概述
除了WijmoJS 的可视化在线设计器之外（在这里阅读基于Web的WijmoJS Designer），我们刚刚发布了针对Angular开发的Visual Studio Code的设计器。 在HTML文件中，它在代表WijmoJS纯前端控件的每个标记上方插入CodeLens链接。单击该链接可在单独的选项卡中打开Wijmo Designer，并根据关联的标记对其进行初始化。用户在设计器中进行更改后，只需单击一下，就可以使用修改后的Angular标记更新原始HTML文件。
WijmoJS VSCode Designer还提供了一个独立的命令，可以在单独的选项卡中打开设计图面，您可以在其中使用示例数据实例化控件，自定义其属性，并生成可以复制到源文件中的Angular标记。
wijmo Designer Extension for Visual Studio Code
您可以将WijmoJS VSCode Designer与本文中介绍的IntelliSense扩展结合使用。例如，您可以使用IntelliSense为新控件创建Angular标记，然后使用可视化设计器编辑标记。
安装WijmoJS VSCode Designer
WijmoJS VSCode Designer不包含在任何WijmoJS发行版中，但却已发布到Visual Studio Marketplace。 安装它的最简单方法是打开VS Code并转到Extensions窗格。 在搜索框中键入wijmo，然后单击“安装”按钮开始下载扩展。
出现时单击“重新加载”按钮以完成安装。
修改现有的控件
标记每当您在VS Code中打开HTML文件时，都会激活WijmoJS VSCode Designer。 让我们首先打开一个WijmoJS示例HeaderFilters。 如果您已经下载了WijmoJS，则可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夹中找到此项目。 在VS Code中打开该文件夹，然后打开文件src \ app.html，其中包含以下FlexGrid标记
注意标记上方出现的灰色Wijmo Designer ...链接。 在VS Code中，这被称为CodeLens，Microsoft将其定义为“可操作的上下文信息，其中散布着源代码。”在我们的示例中，操作是在单独的选项卡中打开设计图面，并使用 Angular标记提供的上下文，以及源文件中该标记的位置。 现在单击链接以在相邻选项卡中打开设计器。
设计图面上的FlexGrid 表格控件以设计模式显示，这意味着您无法直接对其进行滚动，调整大小或以其他方式的操作行为，而是使用设计器右侧的“属性”窗格来操作控件的对象模型。每个可用属性都显示相应类型的编辑器，您在此处所做的任何更改都会立即应用于所选控件。
例如，如果将allowResizing属性的值从Columns更改为None，则网格渲染中没有视觉差异，因为这是运行时行为设置。 但是，如果单击设计器左侧的“源视图”按钮，您将看到扩展程序已经发生更改。
要返回到设计图面，请单击WijmoJS 徽标下方的“设计视图”按钮。
对于具有集合的控件（例如网格列），设计器允许您添加，删除和修改单个成员。 在“属性”窗格中找到columns属性，然后单击属性编辑器右侧的“显示项目”按钮以显示Angular标记中定义的八个列。
将鼠标悬停在单词“author”上，然后单击出现的链接。 这将打开该列定义以进行编辑。 找到visible属性并将其更改为False。 现在重新绘制网格以显示author列已被隐藏。
要返回FlexGrid表格控件的设置，请单击“属性”窗格中的“后退”按钮。
如果对设计器中所做的更改感到满意，请单击WijmoJS 徽标下方的“保存”按钮以更新原始源文件的编辑器并将其重点关注。请注意，修改后的Angular标记会突出显示，设计器中所做的更改现在会反映在标记中。此时，您可以保存或放弃更改，就像您自己键入更改一样。
修改后的标记的缩进样式可能与原始样式不匹配，因为它受内置VS代码设置html.format.wrapAttributes的控制。 为获得最佳效果，请将此值设置为auto以外的值，例如force-aligned，如上所示。
保存后，WijmoJS VSCode Designer选项卡仍然存在，如果您给它焦点，它将保持其先前状态。但是，您应该知道扩展会记住调用它的Angular标记的文档范围。 如果随后修改了原始源文件，则应重新访问CodeLens链接以刷新关联的设计器选项卡。 否则，如果您只是切换到设计器选项卡并单击“保存”，则更新可能发生在错误的位置。
创建新的控件标记
要为新的WijmoJS 纯前端控件创建 Angular标记，请按F1打开命令选项板，然后执行WijmoJS VSCode Designer命令以打开设计图面的独立版本。 单击设计器左上角的WijmoJS 徽标以打开菜单。
“工具箱”命令打开一个可折叠的WijmoJS 前端控件面板，按模块名称（网格，图表，输入，仪表，导航，olap）分组。 使用Themes命令可以查看选择不同WijmoJS 主题的效果，尽管这对生成的代码没有影响，该代码仅由控件标记组成。
让我们用趋势线创建一个图表控件。 单击“工具箱”，展开图表组，然后单击名为FlexChart图表的项目。 请注意，它显示代表“不断更新中的”证券的实时样本数据。
在“属性”窗格中，请注意图表上有四个表示复杂对象的属性：axisX，axisY，dataLabel和legend。 单击axisY属性的齿轮图标，然后将format属性设置为字符串c0，表示零小数位的货币值。 单击“属性”窗格中的“后退”按钮以返回FlexChart的设置。 接下来，单击图例属性的齿轮图标，并将其位置设置更改为“底部”。 像以前一样单击后退按钮返回FlexChart设置。 通过将其标题属性设置为Most Active，为图表添加标题。 找到palette属性，单击编辑器中的Show Colors按钮，然后选择一个预定义的值，例如dark。
现在图表看起来像这样：
WijmoJS VSCode Designer对于操作图表系列等集合特别有用。 例如，您可以通过添加适当类型的新系列元素，轻松地将趋势线添加到图表中。 在“属性”窗格中向下滚动，找到系列属性，然后单击“显示项目”按钮将其展开。
单击“添加项”链接以将新图表系列添加到集合的末尾。 单击新添加项目右边缘的向下箭头，然后从可用系列类型列表中选择TrendLine。
新添加的项目现在显示为[趋势线]。 将鼠标悬停在括号内的文本上，然后单击出现的链接。 现在，“属性”窗格显示特定于TrendLine类的属性。 设置绑定到latestPrice，fitType设置为Logarithmic，以及对Plot的可见性。 您不需要为name属性提供值，因为图例中将省略此系列。
随着趋势线添加到图表中，设计界面现在看起来像这样：
在独立模式下，没有要更新的源文件，但您仍然可以生成Angular标记并将它们从设计器复制到HTML源。 单击设计器左侧的“源视图”图标以显示生成的Angular标记。 从那里，突出显示要复制的文本，并使用快捷键（在Windows上，Ctrl + C）将文本复制到剪贴板。 请注意，VS Code的“编辑”菜单上的“复制”命令不适用于设计器。
<wj-flex-chart #flexchart1
[bindingX]="'symbol'"
[header]="'Most Active'"
[palette]="['#005fad', '#f06400', '#009330', '#e400b1', '#b65800', '#6a279c', '#d5a211', '#dc0127', '#000000']">
<wj-flex-chart-axis [wjProperty]="'axisY'" [format]="'c0'"></wj-flex-chart-axis>
<wj-flex-chart-legend [wjProperty]="'legend'" [position]="'Bottom'"></wj-flex-chart-legend>
<wj-flex-chart-series [name]="'Latest Price'" [binding]="'latestPrice'"></wj-flex-chart-series>
<wj-flex-chart-series [name]="'52-Week High'" [binding]="'week52High'"></wj-flex-chart-series>
<wj-flex-chart-series [name]="'52-Week Low'" [binding]="'week52Low'"></wj-flex-chart-series>
<wj-flex-chart-trend-line [binding]="'latestPrice'" [fitType]="'Logarithmic'" [visibility]="'Plot'"></wj-flex-chart-trend-line> </wj-flex-chart>
在我们的示例中，生成的标记包含表示Y轴，图表图例，三个数据系列和趋势线的子元素。 要返回可视化设计器，请单击WijmoJS 徽标下方的“设计视图”按钮。
设计器版本之间的差异
下表总结了WijmoJS 可视化在线设计器，从HTML源文件中的CodeLens链接调用和VS Code从独立命令调用 WijmoJS VSCode设计器之间的差异：
设计器不提供“事件”窗格，因为它只能修改原始控件标记 —— 它不了解整个Angular项目。 但是，当扩展更新源文件时，将保留原始控件标记中定义的任何现有事件处理程序。
设计器的独立命令会记住当前工作空间上下文中可视化设计界面的状态，即使您关闭并重新打开VS代码也是如此。
凾待解决的部分
本次更新的WijmoJS VSCode设计器暂不支持以下WijmoJS控件：
Menu
Popup
TabPanel
PdfViewer
ReportViewer
在Angular项目中，控件属性通常绑定到运行时的数据成员而不是文字值。 在这种情况下，设计器以斜体显示只读文本框中的绑定。 保存操作期间保留绑定事件; 但是，在设计器中没有用于创建或编辑它们的界面。
有关Angular标记的当前限制列表，请参阅Visual Studio Marketplace上的扩展页面。
总结
WijmoJS VS Code设计器通过提供WYSIWYG设计界面来协助前端开发工程师进行 Angular 项目开发，该设计器用于编辑代表WijmoJS控件的标记。此外，设计器还支持通过提供独立设计模式创建新的WijmoJS标记，您可以在其中试验控件属性，子对象和集合。
关于葡萄城
赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。
