如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

概述

WijmoJS Designer，一种全新的在线Web托管工具，为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Designer允许用户创建控件实例，指定属性和事件，并生成可以合并到应用程序中的相应HTML 和 Java。WijmoJS 在线Web设计器对于开发网格和图表等复杂对象特别有用。

The Wijmo Designer

除了这款在线设计器，如果您正在使用Angular进行开发，还可以尝试使用Visual Studio Code的WijmoJS Designer扩展，它为VS Code 提供了一个可视界面，用于创建和编辑表示WijmoJS 纯前端控件的Angular标记。

开始使用WijmoJS Designer

设计器可视化界面首次打开时，该设计图面默认自带一个带有实时样本数据的纯前端FlexGrid表格控件，要删除它，请单击"编辑"工具栏上的"删除"按钮。

设计器的主菜单默认为全部折叠，并显示为垂直条形图标。单击页面左上角的WijmoJS徽标以展开菜单。

工具箱"命令打开一个可折叠的WijmoJS前端控件面板，按模块名称（网格，图表，输入，仪表，导航，OLAP）分组。 展开输入组并单击"日历"以添加名为calendar1的新控件。

设计表面现在看起来像这样：

要折叠主菜单，请再次单击WijmoJS 徽标，或单击设计图面内部的任何位置（"编辑"工具栏下方的区域）。

注意：设计图面上的所有纯前端控件均以设计模式显示，这意味着您无法直接对其进行滚动，调整大小或以其他方式的操作，而是使用页面右侧的"属性"窗格来操作控件的对象模型。每个可用属性都显示相应类型的编辑器，您在此处所做的任何更改都会立即应用于所选控件。例如：将monthView属性设置为False，将formatMonths属性设置为MMMM。

日历控件现在显示当年的月份的全名

单击"属性"选项卡右侧的箭头图标以显示"事件"窗格，该窗格显示所选控件公开的每个事件的切换按钮。对于打开的每个事件，WijmoJS 设计器将自动生成事件Java代码。如下图，打开valueChanged事件的前端控件。

您可以通过单击页面右边缘的箭头来折叠属性/事件侧栏。

设计表面支持具有顺序布局的多个纯前端控件。用户可通过打开工具箱并将InputDateTime控件添加到设计图面，单击"编辑"工具栏上的"上移"按钮以交换两个控件的位置。

此外，您还可以使用WijmoJS设计器查看并选择不同WijmoJS 主题效果。 单击WijmoJS 徽标以关闭工具箱，单击主题以显示可用主题列表，然后单击其他值，例如Cerulean。

Generating code

如果您对当前WijmoJS可视化在线Web设计器的设计效果感到满意，则可以生成在应用程序中使用的代码。单击WijmoJS 徽标以关闭"主题"列表，然后单击"源视图"以显示生成的HTML 和 Java。

WijmoJS 在线Web设计器目前仅支持生成纯Java代码，并不依赖于任何特定框架，如jQuery或Angular。

使用左侧的"保存"图标将HTML写入文件或选择所需的片段并使用浏览器的UI将其复制到剪贴板。生成的代码包含以下元素：

• 标签，引用主要WijmoJS 的CSS文件和所选主题文件。

• <>标签，自动生成用于WijmoJS设计器支持的任何纯前端控件组合的<>标签。您可以省略大量不需要的模块引用。

• 标签，对于在设计器中创建的每个控件，均包含默认为空的

  的标记。

• 内联<>块，用于实例化设计器中创建的每个控件并应用任何自定义属性/事件设置。在我们的示例中，该脚本包含以下代码：

// var key = "your-license-key";

//wijmo.setLicenseKey(key);

var inputdatetime1 = new wijmo.input.InputDateTime("#inputdatetime1");

var calendar1 = new wijmo.input.Calendar("#calendar1", {

formatMonths: "MMMM",

monthView: false

});

calendar1.valueChanged.addHandler(function (s, e) {

});

前两行被注释掉了。如果要将此代码部署到公共服务器，则可以在此处插入应用程序的WijmoJS许可证密钥。这两个赋值语句在空的< div>标记上调用相应的WijmoJS构造函数。

对Calendar构造函数的调用指定了一个包含formatMonths和monthView属性的修改值的参数。但是，InputDateTime构造函数没有参数，因为没有更改属性。最后，最后一行为日历的valueChanged事件添加了一个Demo处理程序。

要返回可视化设计器，请单击页面左侧的"设计视图"按钮（"保存"按钮下方）。

如果要保存设计器布局以供将来使用，请使用主工具栏上的"保存"按钮将当前状态写入JSON文件，然后使用主工具栏上的"打开"按钮重新加载所选文件的内容。请注意，设计器不会从源视图中保存的HTML恢复状态，只能从设计视图中保存的JSON恢复。

使用图表

现在让我们考虑一个更复杂的例子。 从设计图面删除所有控件，然后在"工具箱"中展开图表组，并单击名为FlexChart的项目。 请注意，该图表显示代表"最活跃"证券的实时样本数据。 这与首次打开设计器时默认FlexGrid中显示的数据集相同，仅限于前六行。

在"属性"窗格中，请注意图表上有四个表示复杂对象的属性：axisX，axisY，dataLabel和legend。 单击axisY属性的齿轮图标，然后将format属性设置为字符串c0，表示零小数位的货币值。 设计表面现在看起来像这样：

请注意Y轴中显示的货币符号。 单击"属性"窗格中的"后退"按钮以返回FlexChart的设置。 接下来，单击图例属性的齿轮图标，并将其位置设置更改为"底部"。

像以前一样单击后退按钮返回FlexChart设置。 通过将其标题属性设置为Most Active，为图表添加标题。 找到palette属性，单击编辑器中的Show Colors按钮，然后选择一个预定义的值，例如dark。 现在图表看起来像这样：

WijmoJS Designer对于操作图表系列等集合特别有用。 例如，您可以通过添加适当类型的新系列元素，轻松地将趋势线添加到图表。 在我们这样做之前，让我们看看设计师生成的默认系列集合。 在"属性"窗格中向下滚动，找到系列属性，然后单击"显示项目"按钮将其展开。

将鼠标悬停在最新价格上，然后单击出现的链接。 请注意，它具有latestPrice的绑定值，对应于数据源中的实际字段名称。 name属性（在图表图例中显示）具有适当的大小写和单词之间的空格。

单击后退按钮返回FlexChart设置，然后像以前一样展开系列属性。 现在单击"添加项目"链接以将新图表系列添加到集合的末尾。 单击新添加项目右边缘的向下箭头，然后从可用系列类型列表中选择TrendLine。

新添加的项目现在显示为[趋势线]。 将鼠标悬停在括号内的文本上，然后单击出现的链接。 现在，"属性"窗格显示特定于TrendLine类的属性。 设置绑定到latestPrice，fitType设置为Logarithmic，以及对Plot的可见性。 您不需要为name属性提供值，因为图例中将省略此系列。 随着趋势线添加到图表中，设计器现在看起来像这样：

在源视图中，生成的代码以对FlexChart构造函数的调用开始。 请注意axisY和legend的子对象参数。

var flexchart1 = new wijmo.chart.FlexChart("#flexchart1", {

axisY: {

format: "c0"

},

bindingX: "symbol",

header: "Most Active",

legend: {

position: "Bottom"

},

palette: ["#005fad", "#f06400", "#009330", "#e400b1", "#b65800", "#6a279c", "#d5a211", "#dc0127", "#000000"]

});

单个图表系列按照在设计器中指定的顺序推送到系列集合属性。 趋势行（最后添加）使用专门的TrendLine构造函数而不是默认的Series构造函数。

flexchart1.series.push(new wijmo.chart.Series({

name: "Latest Price",

binding: "latestPrice"

}));

flexchart1.series.push(new wijmo.chart.Series({

name: "52-Week High",

binding: "week52High"

}));

flexchart1.series.push(new wijmo.chart.Series({

name: "52-Week Low",

binding: "week52Low"

}));

flexchart1.series.push(new wijmo.chart.analytics.TrendLine({

binding: "latestPrice",

fitType: "Logarithmic",

visibility: "Plot"

}));

提供了默认的系列名称和绑定，以便您可以了解在应用程序中使用实际数据进行部署时实际图表的外观。 您可以使用自己的绑定替换默认系列以生成代码，但设计人员不会绘制任何数据点。

凾待解决的部分

目前，WijmoJS在线Web设计器刚刚推出，暂时不支持以下WijmoJS控件：

• Menu

• Popup

• TabPanel

• MultiRow

• PdfViewer

• ReportViewer

暂不支持以下可为WijmoJS控件添加功能的可创建对象：

• DataMap

• FlexGridFilter

• FlexSheetFilter

• LineMarker

• RangeSelector

• ChartTooltip

• ChartAnimation

• ChartGestures

• AnnotationLayer

• PlotArea

总结

借助WijmoJS 在线Web Designer，您可以通过可视化设计界面来轻松构建具有WijmoJS纯前端控件的应用程序，该界面可让您轻松操作控件属性，子对象和集合。并且自动生成可以添加到项目中的纯Java代码和HTML，节省开发人员的项目设计和开发时间，最大限度地减少编码错误和拼写错误。

关于葡萄城

赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。