An overview of the

In addition to the Visual online Designer for WijmoJS (read the Web-based WijmoJS Designer here), we just released a Designer for Visual Studio Code for Angular development. In the HTML file, it inserts CodeLens links above each tag that represents a pure WijmoJS front-end control. Click the link to open Wijmo Designer in a separate TAB and initialize it based on the associated tag. With one click, users can update the original HTML file with the modified Angular tag after making changes in the designer.

WijmoJS VSCode Designer also provides a separate command that opens the design surface in a separate TAB, where you can instantiate controls with sample data, customize their properties, and generate Angular tags that can be copied to source files.

wijmo Designer Extension for Visual Studio Code

You can use the WijmoJS VSCode Designer in conjunction with the IntelliSense extension described in this article. For example, you can create Angular tags for new controls using IntelliSense, and then edit the tags using the visual designer.

Install WijmoJS VSCode Designer

WijmoJS VSCode Designer is not included in any WijmoJS distribution, but is published to the Visual Studio Marketplace. The easiest way to install it is to open VS Code and go to the Extensions pane. Type Wijmo in the search box, and then click the Install button to start downloading the extension.

Click the Reload button when it appears to complete the installation.

Modify an existing control

The WijmoJS VSCode Designer is activated whenever you open an HTML file in VSCode. Let’s first open a WijmoJS example of HeaderFilters. If you have already downloaded WijmoJS, you can find this project in the Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters folder. Open this folder in VS Code, then open the file SRC \ app.html, which contains the following FlexGrid tags

Note the gray Wijmo Designer that appears above the tag… Link. In VS Code, this is called CodeLens, which Microsoft defines as “actionable contextual information with source Code scattered around.” In our example, we open the design surface in a separate TAB, using the context provided by the Angular tag and the location of that tag in the source file. Now click the link to open the designer in an adjacent TAB.

The FlexGrid table control on the design surface is displayed in design mode, which means you can’t scroll, resize, or otherwise manipulate it directly. Instead, you use the Properties pane on the right side of the designer to manipulate the control’s object model. Each available property displays the corresponding type of editor, and any changes you make here are immediately applied to the selected control.

For example, if you change the value of the allowResizing property from Columns to None, there is no visual difference in the grid rendering because this is a runtime behavior setting. However, if you click the Source View button to the left of the designer, you will see that the extender has changed.

To return to the design surface, click the Design View button under the WijmoJS logo.

For controls that have collections, such as grid columns, the designer allows you to add, remove, and modify individual members. Locate the Columns property in the Properties pane, and click the Show Item button on the right side of the properties editor to display the eight columns defined in the Angular tag.

Hover over the word “author” and click the link that appears. This opens the column definition for editing. Find the Visible property and change it to False. Now redraw the grid to show that the Author column is hidden.

To return to Settings for the FlexGrid table control, click the Back button in the Properties pane.

If you are satisfied with the changes you made in the designer, click the “Save” button below the WijmoJS logo to update and focus the editor of the original source file. Notice that the modified Angular tag is highlighted, and changes made in the designer are now reflected in the tag. At this point, you can save or discard the changes just as you type them yourself.

Modified markup indented style may do not match with the original style, because it is built-in VS code sets HTML. The format. WrapAttributes control. For best results, set this value to something other than auto, such as force-aligned, as shown above.

After saving, the WijmoJS VSCode Designer TAB still exists, and if you give it focus, it will remain in its previous state. However, you should know that the extension remembers the scope of the document that called its Angular tag. If you subsequently modify the original source file, you should revisit the CodeLens link to refresh the associated designer TAB. Otherwise, if you just switch to the Designer TAB and click Save, the update might happen in the wrong place.

Create a new control tag

To create an Angular tag for a new WijmoJS pure front-end control, press F1 to open the command palette, and then run the WijmoJS VSCode Designer command to open a separate version of the design surface. Click the WijmoJS logo in the upper left corner of the designer to open the menu.

The Toolbox command opens a collapsible panel of WijmoJS front-end controls, grouped by module name (grid, chart, input, meter, navigation, OLAP). Using the Themes command, you can see the effect of selecting different WijmoJS Themes, although this has no effect on the generated code, which consists only of control tags.

Let’s create a chart control with a trendline. Click the Toolbox, expand the chart group, and then click the project called FlexChart Chart. Note that it shows real-time sample data representing “constantly updated” securities.

In the Properties pane, notice that there are four properties on the diagram that represent complex objects: axisX, axisY, dataLabel, and Legend. Click the gear icon for the axisY property, and then set the format property to the string C0, which represents the currency value of zero decimal places. Click the Back button in the Properties pane to return to FlexChart Settings. Next, click on the gear icon for the legend property and change its position Settings to “Bottom.” Click the back button as before to return to FlexChart Settings. Add a title to the chart by setting its title property to Most Active. Go to the Palette property, click the Show Colors button in the editor, and select a predefined value, such as Dark.

Now the graph looks something like this:

WijmoJS VSCode Designer is particularly useful for manipulating collections such as the chart series. For example, you can easily add trend lines to a chart by adding new series elements of the appropriate type. Scroll down in the Properties pane to find the series of properties, and then click the Show Items button to expand them.

Click the Add Item link to add the new chart series to the end of the collection. Click the down arrow on the right edge of the newly added project, and then select TrendLine from the list of available family types.

Newly added items are now shown as trendlines. Hover over the text in parentheses and click the link that appears. The Properties pane now displays properties specific to the TrendLine class. Dsmt4 sets bind to latestPrice, fitType to DSMMIC, and visibility to Plot. You do not need to provide a value for the name attribute because this series will be omitted in the legend.

With trend lines added to the chart, the design interface now looks like this:

In standalone mode, there are no source files to update, but you can still generate Angular tags and copy them from the designer to the HTML source. Click the Source View icon to the left of the designer to display the generated Angular tag. From there, highlight the text you want to copy, and use the shortcut key (Ctrl + C on Windows) to copy the text to the clipboard. Note that the copy command on VS Code’s Edit menu does not apply to designers.

<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>

In our example, the generated tag contains child elements that represent the Y-axis, chart legend, three data series, and trend line. To return to the visual Designer, click the Design View button under the WijmoJS logo.

Differences between designer versions

The following table summarizes the differences between the WijmoJS visual online designer, called from a CodeLens link in an HTML source file, and VSCode calling the WijmoJS VSCode designer from a separate command:

The designer does not provide the Events pane because it can only modify the original control markup — it does not know the entire Angular project. However, when the extension updates the source file, any existing event handlers defined in the original control tag are retained.

The designer’s separate commands remember the state of the visual design interface in the current workspace context, even if you close and reopen the VS code.

Parts that are unresolved

The WijmoJS VSCode designer does not currently support the following WijmoJS controls:

  • Menu
  • Popup
  • TabPanel
  • MultiRow
  • PdfViewer
  • ReportViewer

In Angular projects, control properties are usually bound to runtime data members rather than literal values. In this case, the designer displays the binding in a read-only text box in italics. Retain the binding event during the save operation; However, there is no interface in the designer for creating or editing them.

For a current list of restrictions on Angular tags, see the Extensions page on the Visual Studio Marketplace.

conclusion

The WijmoJS VS Code designer assists front-end developers with Angular projects by providing a WYSIWYG design interface for editing markup that represents WijmoJS controls. In addition, the designer supports the creation of new WijmoJS tags by providing independent design patterns in which you can experiment with control properties, child objects, and collections.

About Grape Town

Empower developers! Founded in 1980, Winestown is a leading global software and service provider of development tools, business intelligence solutions, and management system design tools. Xi ‘an Grape City is its branch in China, providing software development services for the global market, and providing international advanced development tools, software and r&d consulting services for The informatization of Chinese enterprises. Winestown controls and software products have won awards at home and abroad and are used by hundreds of thousands of businesses, schools and government agencies around the world.