Shulou(Shulou.com)06/03 Report--

In addition to WijmoJS's visual online designer (read Web-based WijmoJS Designer here), we have just released a designer for Visual Studio Code developed for Angular. In the HTML file, it inserts the CodeLens link above each tag that represents the WijmoJS pure front-end control. Click the link to open the Wijmo Designer in a separate tab and initialize it based on the associated tag. After the user makes changes in the designer, the original HTML file can be updated with the modified Angular tag with a single click.

WijmoJS VSCode Designer also provides a separate command to open the design surface in a separate tab, where you can instantiate the control with sample data, customize its properties, and generate Angular tags that can be copied to the source file.

Wijmo Designer Extension for Visual Studio Code

You can use WijmoJS VSCode Designer in conjunction with the IntelliSense extension introduced in this article. For example, you can use IntelliSense to create an Angular tag for a new control, and then edit the tag using a visual designer.

The installation WijmoJS VSCode DesignerWijmoJS VSCode Designer is not included in any WijmoJS distribution, but has been released to 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.

Modifying an existing control tag activates WijmoJS VSCode Designer whenever you open a HTML file in VSCode. Let's first open a WijmoJS sample HeaderFilters. If you have downloaded WijmoJS, you can find this project in the Samples\ TS\ Angular2\ HeaderFilters\ HeaderFilters folder. Open the folder in VS Code, and then open the file src\ app.html, which contains the following FlexGrid tags

Notice the gray Wijmo Designer that appears above the mark. Link. In VS Code, this is called CodeLens,Microsoft and defines it as "actionable contextual information with source code scattered." In our example, the action is to open the design surface in a separate tab and use the context provided by the Angular tag and the location of the tag in the source file. Now click the link to open the designer in the adjacent tab.

The FlexGrid table control on the design surface is displayed in design mode, which means that you cannot scroll, resize, or otherwise manipulate it directly, but 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 mesh rendering because this is a run-time behavior setting. However, if you click the Source View button on the left side of the designer, you will see that the extension has changed.

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

For controls that have collections, such as grid columns, the designer allows you to add, delete, and modify individual members. Locate the columns property in the Properties pane, and then click the Show items button on the right side of the attribute 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. Locate the visible property and change it to False. Now redraw the grid to show that the author column is hidden.

To return to the settings of the FlexGrid table control, click the back button in the Properties pane.

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

The indentation style of the modified tag may not match the original style because it is controlled by the built-in VS code setting html.format.wrapAttributes. For best results, set this value to something other than auto, such as force-aligned, as shown above.

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

To create a new control tag for the new WijmoJS pure front-end control, press F1 to open the command palette, and then execute the WijmoJS VSCode Designer command to open a stand-alone 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, gauge, navigation, olap). Use the Themes command to see the effect of selecting a different WijmoJS theme, although this has no effect on the generated code, which consists only of control tags.

Let's create a chart control with trendlines. Click Toolbox, expand the chart group, and then click the project named FlexChart Chart. Note that it displays real-time sample data that represents "constantly updated" securities.

In the Properties pane, notice that there are four properties on the chart 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 the settings for FlexChart. Next, click the gear icon for the legend properties and change its position setting to bottom. Click the back button as before to return to the FlexChart settings. Add a title to the chart by setting its title property to Most Active. Locate the palette property, click the Show Colors button in the editor, and select a predefined value, such as dark.

Now the chart looks like this:

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

Click the add item link to add a new chart series to the end of the collection. Click the down arrow at the right edge of the newly added project and select TrendLine from the list of available series types.

The newly added project is now displayed as [trend Line]. Hover over the text in parentheses and click the link that appears. The Properties pane now displays properties specific to the TrendLine class. Set binding to latestPrice,fitType set to Logarithmic, and visibility to Plot. You do not need to provide a value for the name property because this series is omitted from the legend.

As trend lines are added to the diagram, the design interface now looks like this:

In stand-alone 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 on the left side of the designer to display the generated Angular markup. From there, highlight the text you want to copy and use the shortcut key (on Windows, Ctrl + C) to copy the text to the clipboard. Note that the copy command on the edit menu of VS Code does not apply to designers.

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

Differences between designer versions the following table summarizes the differences between WijmoJS visual online designers, calls from CodeLens links in HTML source files, and VSCode calls to WijmoJS VSCode designers from stand-alone commands:

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 markup are retained.

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

The following WijmoJS controls are not supported by the WijmoJS VSCode designer updated this time:

Menu

Popup

TabPanel

MultiRow

PdfViewer

ReportViewer

In Angular projects, control properties are typically bound to run-time data members rather than literal values. In this case, the designer displays the bindings in the read-only text box in italics. Bind events are retained during the save operation; however, there is no interface in the designer for creating or editing them.

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

Summary WijmoJS VS Code designer assists front-end development engineers in Angular project development by providing a WYSIWYG design interface, and the designer is used to edit tags that represent WijmoJS controls. In addition, the designer supports the creation of new WijmoJS tags by providing stand-alone design patterns where you can experiment with control properties, sub-objects, and collections.

About Grape City

Empowered developer! Founded in 1980, Grape City is the world's leading software and service provider integrating development tools, business intelligence solutions, and management system design tools. Xi'an Grape City is its branch in China, providing software research and development services to the global market, and providing international advanced development tools, software and R & D consulting services for the informatization of Chinese enterprises. Grape City's controls and software products have won many awards at home and abroad, and have been widely used by hundreds of thousands of enterprises, schools and government agencies around the world.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.