如何在程序代码中更改Online Designer配置

从FastReport网站下载Online Designer之前，您必须先编译它。为此，您必须首先在特殊的可视化构建器中配置该程序。但是，如果您的需求发生了变化，并且需要一个不同的配置呢？您必须在可视化构建器中再次创建OnlineDesigner，将其下载并将其添加到您的项目中。如果同一个项目中的不同情况需要不同的设计器配置呢？您的代码开始重复使用不同版本的设计器，这增加了不必要的“麻烦”，正如Martin Fowler所说。

但是实际上并没有那么糟糕！

在本文中，我将讨论新功能 - 在程序代码中更改在线设计器的配置。实际上，我们将覆盖设计器的配置文件，这是一个json格式的文档。该功能在2017.3.3版本中已经实现。此功能可用于更改设计器的设计和其他参数。

怎么运行的？在线设计器首先加载默认设置，然后更改 - 它们覆盖初始设置。

覆盖的配置存储在属性：WebReport.DesignerConfig中，作为JSON格式的字符串。

我们来看一个例子。创建ASP.Net MVC应用程序。我们在项目中添加一个包含在线设计器的文件夹。我们称之为WebReportDesigner。在其中，我们将从FastReport站点下载的存档的内容配置为设计器。

在参考文献中，我们添加了一个链接到FastReport.dll和FastReport.Web.dll库。

现在，在Index中将以下代码添加到HomeController控制器：

使用此属性的示例：

using FastReport.Web;
using System.Web.UI.WebControls;
…
 public ActionResult Index()
 {
 WebReport webReport = new WebReport();
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 string report_path = GetReportPath();
 System.Data.DataSet dataSet = new System.Data.DataSet();
 dataSet.ReadXml(report_path + "nwind.xml");
 webReport.Report.RegisterData(dataSet, "NorthWind");
 webReport.Report.Load(report_path + "Simple List.frx");
 webReport.DesignReport = true;
 webReport.DesignScriptCode = false;
 webReport.Debug = true;
 webReport.DesignerPath = "~/WebReportDesigner/index.html";
 webReport.DesignerLocale = "en";
 webReport.DesignerSaveCallBack = "~/Home/SaveDesignedReport";
 webReport.ID = "DesignReport";
 // file with custom configuration
 string designerConfigFile = this.Server.MapPath("~/App_Data/DesignerConfig.json");
 // load file in DesignerConfig
 if (System.IO.File.Exists(designerConfigFile))
 webReport.DesignerConfig = System.IO.File.ReadAllText(designerConfigFile);
 ViewBag.WebReport = webReport;
 return View();
 }

您注意到，WebReport添加了DesignerConfig属性。在其中，我们定义配置文件，覆盖在线设计器的必要参数。该文件放置在项目中的App_Data或任何其他文件夹中。

以下是文件内容/App_Data/DesignerConfig.json的示例：

{
"font-names": [
    "Calibri",
    "Calibri Light",
    "Comic Sans MS",
  ],
"default-font-name": "Calibri",
"preload-fonts": ["Calibri"],
"scale": 1,
"grid": 9.45,
"sticky-grid": true
}

在此文件中，我们更改了在线设计器的文本组件中可用的字体集。

现在来看看在配置文件中可以覆盖的所有配置参数：

“font-name” - 包含可用于文本组件的字体名称的数组;
“default-font-name” - 分配给新创建的文本组件的默认字体;
“preload-fonts” - 一个包含一组将在设计器初始化之前预加载的字体的数组。因此，这里的字体越多，原始设计器的负载将越长;
“prefetch-fonts” - 加载类似于以前设置的字体，但是在稍后的初始化阶段。到目前为止，页面和工具栏已经可见了;
“scale-mobile” - 用于从移动设备（0到2）查看设计器的默认页面比例;
“scale” - 缩放从所有其他设备（0到2）查看设计器的默认页面;
“grid” - 网格间距;
“sticky-grid” - “粘贴”到网格的组件（true / false）;
“hotkeyProhibited” - 禁用热键;

“save_success_redirect”：

{
"url" - Where to make a redirect after successful saving;
"blank": - Open in a new tab;
"useParent" - In the case when the online designer in the iframe then make a redirect in the parent window in which the designer is embedded;
"removeConfirmation" - Do not show confirmation when redirecting (after saving);
},

“colors”：

{
"button-circle" - Color of resize elements and other round elements on the work area;
"angle-slider" - Angle element color;
"default-band-separator" - Color of separator between the bands;
"selected-band-separator" - The color of the active splitter between the bands, when the band is in the process of resizing;
 },

“show-band-title” - Band标题秀;
“add-bands” - 禁止添加Band的能力;
“resize-bands” - 禁止更改Band大小的能力;
“movable-components” - 能够禁止控件的移动;
“resizable-components” - 能够防止更改组件的大小;

自定义面板（左侧，具有按钮的工具栏）

“customization”：

{
        "properties": {
            "enable" - Panel activity;
            "button" - Show the button for this toolbar on the toolbar;
            "shown" - Open the default panel when downloading an online designer;
            "header": - Panel title;
            "hasBorder" – Visual border of the panel;
            "movable" - The ability to move the panel through drag & drop;
            "resizable" – The ability to change the size of the panel;
        },
        "events": {
            "enable": true,
            "button": true,
            "shown": false,
            "header": true,
            "hasBorder": true,
            "movable": true,
            "resizable": true
        },
        "report-tree": {
            "enable": true,
            "button": true,
            "shown": false,
            "header": true,
            "hasBorder": true,
            "movable": true,
            "resizable": true
        },
        "data": {
            "enable": true,
            "button": true,
            "shown": false,
            "header": true,
            "hasBorder": true,
            "movable": true,
            "resizable": true
        },
        "preview": {
            "enable": true,
            "shown": true,
            "button": false,
            "header": false,
            "background": "initial",
            "container": "horz"
            "width": 125 - Default widget width;
            "table": true
        }
    },
    "default-tab-menu": "home" – The default tab in the top toolbar when the designer loads;
    "show-saving-progress": "default", - Possible values - default, small, large;
    "notifications": "default", - Possible values - default, html5, false;
    "notifications-mobile": "default" Possible values - default, html5, false;
}

因此，我们有一个很好的机会重新配置在线设计器，而无需重新编译。

产品介绍 | 下载试用 | 优惠活动 | 在线客服 | 联系Elyn

所有资源

如何在程序代码中更改Online Designer配置

推荐阅读

获取产品

企业服务

资源

成就

关于

联系我们

购买

合作

友情链接