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

Overview

WijmoJS Designer, a new online Web hosting tool, provides a visual design surface and Java code generator for the WijmoJS pure front-end control set. WijmoJS Designer allows users to create instances of controls, specify properties and events, and generate corresponding HTML and Java that can be merged into the application. The WijmoJS online Web designer is particularly useful for developing complex objects such as grids and charts.

The Wijmo Designer

In addition to this online designer, if you are developing with Angular, you can also try Visual Studio Code's WijmoJS Designer extension, which provides a visual interface for VS Code to create and edit Angular tags that represent WijmoJS pure front-end controls.

When you first open the visual interface using the WijmoJS Designer designer, the design surface comes with a pure front-end FlexGrid table control with real-time sample data by default. To delete it, click the Delete button on the Edit toolbar.

The designer's main menu is all collapsed by default and is displayed as a vertical bar icon. Click the WijmoJS logo in the upper-left corner of the page to expand the menu.

The Toolbox command opens a collapsible panel of WijmoJS front controls grouped by module name (grid, chart, input, gauge, navigation, OLAP). Expand the input group and click Calendar to add a new control named calendar1.

The design surface now looks like this:

To collapse the main menu, click the WijmoJS logo again, or click anywhere inside the design surface (the area below the Edit toolbar).

Note: all pure front-end controls on the design surface are displayed in design mode, which means that you cannot scroll, resize, or otherwise manipulate them directly, but use the Properties pane on the right side of the page to manipulate the object model of the control. Each available property displays the corresponding type of editor, and any changes you make here are immediately applied to the selected control. For example, set the monthView property to False and the formatMonths property to MMMM.

The calendar control now displays the full name of the month of the year

Click the arrow icon to the right of the Properties tab to display the events pane, which displays the toggle button for each event exposed by the selected control. For each event that is opened, the WijmoJS designer automatically generates event Java code. As shown below, open the front-end control of the valueChanged event.

You can collapse the property / event sidebar by clicking the arrow on the right edge of the page.

The design surface supports multiple pure front-end controls with sequential layout. Users can swap the positions of the two controls by opening the toolbox and adding InputDateTime controls to the design surface by clicking the move up button on the Edit toolbar.

In addition, you can use the WijmoJS designer to view and select different WijmoJS theme effects. Click the WijmoJS logo to close the toolbox, click the topic to display a list of available topics, and then click other values, such as Cerulean.

Generating code if you are satisfied with the design of the current WijmoJS visual online Web designer, you can generate code for use in your application. Click the WijmoJS logo to close the themes list, and then click Source View to display the generated HTML and Java.

The WijmoJS online Web designer currently only supports the generation of pure Java code and does not depend on any specific framework, such as jQuery or Angular.

Use the Save icon on the left to write HTML to a file or select the desired clip and use the browser's UI to copy it to the clipboard. The generated code contains the following elements:

Tag that references the CSS file of the main WijmoJS and the selected theme file.

Tags that are automatically generated for any combination of pure front-end controls supported by the WijmoJS designer. You can omit a large number of unnecessary module references.

Tag, which contains a tag that is empty by default for each control created in the designer.

Inline blocks that instantiate each control created in the designer and apply any custom property / event settings. In our example, the script contains the following code:

/ / 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) {

});

The first two lines have been commented out. If you want to deploy this code to a public server, you can insert the application's WijmoJS license key here. These two assignment statements are empty

Tag calls the corresponding WijmoJS constructor.

The call to the Calendar constructor specifies a parameter that contains the modified values of the formatMonths and monthView properties. However, the InputDateTime constructor has no arguments because the property has not been changed. Finally, the valueChanged event of the last behavior calendar adds a Demo handler.

To return to the visual designer, click the Design View button on the left side of the page (below the Save button).

If you want to save the designer layout for future use, use the Save button on the main toolbar to write the current state to the JSON file, and then use the Open button on the main toolbar to reload the contents of the selected file. Note that the designer does not restore the state from the HTML saved in the source view, only from the JSON saved in Design view.

Using diagrams now let's consider a more complex example. Remove all controls from the design surface, expand the chart group in the Toolbox, and click the project named FlexChart. Note that the chart shows real-time sample data representing the "most active" securities. This is the same as the dataset displayed in the default FlexGrid when the designer is first opened, and is limited to the first six rows.

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. The design surface now looks like this:

Notice the currency symbol displayed in the Y axis. 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 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. Before we do this, let's take a look at the default collection of series generated by the designer. Scroll down in the Properties pane to locate the series properties, and then click the Show items button to expand it.

Hover over the latest price and click the link that appears. Note that it has the bound value of latestPrice, which corresponds to the actual field name in the data source. The name property (shown in the chart legend) has the appropriate case and spaces between words.

Click the back button to return to the FlexChart settings, and then expand the series properties as before. Now click the add Project link to add the 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 chart, the designer now looks like this:

In the source view, the generated code starts with a call to the FlexChart constructor. Note the sub-object parameters of axisY and 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"]

});

A single chart series is pushed to the series collection properties in the order specified in the designer. The trend line (last added) uses a special TrendLine constructor instead of the default Series constructor.

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"

}))

Default series names and bindings are provided so that you can understand what the actual chart looks like when you deploy with real data in your application. You can replace the default series with your own bindings to generate code, but the designer does not draw any data points.

Currently, the WijmoJS online Web designer has just been launched, and the following WijmoJS controls are not supported for now:

Menu

Popup

TabPanel

MultiRow

PdfViewer

ReportViewer

The following creatable objects that can add functionality to WijmoJS controls are not supported at this time:

DataMap

FlexGridFilter

FlexSheetFilter

LineMarker

RangeSelector

ChartTooltip

ChartAnimation

ChartGestures

AnnotationLayer

PlotArea

Summary with WijmoJS online Web Designer, you can easily build applications with WijmoJS pure front-end controls through a visual design interface that allows you to easily manipulate control properties, sub-objects, and collections. And automatically generate pure Java code and HTML that can be added to the project, saving developers' project design and development time, and minimizing coding and spelling errors.

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.