從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

推薦閱讀

• FastReport VCL報表控件開發者手冊
• FastReport Online Designer中文手冊
• Fastreport.Net教程2016
• Fastreport.Net用戶手冊
• FastReport.Net教程2017（持續更新中···）
• FastReport Online Designer教程2017（持續更新中···）
• 報表教程2017（持續更新中···）