Using Wijmo's Designer to Customize Controls
The Wijmo Designer is a visual designer for creating and configuring Wijmo controls. The Wijmo Designer provides a property grid and live preview similar to what you see in Visual Studio. Use the design surface to create instances of specific controls, customize their properties and events, and generate the corresponding HTML/JavaScript that you can incorporate into your applications. The designer is particularly useful for exploring complex objects such as grids and charts.
When the page first opens, the design surface contains a single FlexGrid control with some live sample data. Controls on the design surface are displayed in design mode, which means that you cannot scroll, resize, or otherwise interact with them directly. Instead, you use the Properties pane on the right side of the page to manipulate the control's object model. Each available property displays an editor of the appropriate type, and any changes you make there are immediately applied to the selected control.
The Events pane, also on the right side, displays a toggle button for each event exposed by the selected control. For each event that is turned on, the designer will emit boilerplate event handling code.
The design surface supports multiple controls with sequential layout. Use the Edit toolbar at the top of the page to move, duplicate, or delete controls on the design surface.
Command | Description |
|---|---|
Move Up | Moves the selected control up one position on the design surface. |
Move Down | Moves the selected control down one position on the design surface. |
Duplicate | Creates a copy of the selected control and inserts it immediately after the original control on the design surface. |
Delete | Permanently removes the selected control from the design surface. |
The name of the selected control instance is displayed to the left of the Edit toolbar tab.
The designer's main menu is collapsed initially, and is displayed as a vertical strip of icons. Click the Wijmo logo at the upper left corner of the page to expand the menu, which contains the following commands:
Command | Description |
|---|---|
Open | Prompts the user for a JSON file created with the Save command and renders its contents on the design surface. |
Save | Downloads the contents of the design surface as a JSON file for subsequent reloading via the Open command. |
Toolbox | Opens a collapsible panel of Wijmo controls, grouped by module name (grid, chart, input, gauge, nav, olap). Click a control name to add it to the design surface. |
Themes | Opens a list of available Wijmo themes. Click a theme name to apply it to all controls on the design surface. |
Source View | Switches from design view to source code view. |
Help | Displays this page. |
About | Displays the Wijmo version number and copyright notice. |
You can use the Save and Open commands to store the current state of the designer as a JSON file, then reload its contents back into the designer later on.
To view the contents of the designer as HTML/JavaScript code, use the Source View command. In source view, the design surface is replaced with code that contains Wijmo script and CSS references, <div> tags for each control on the design surface, and script code that creates and initializes each control. You can copy code snippets directly from the page or use the Save command on the main menu.
Command | Description |
|---|---|
Save | Downloads the contents of the design surface as an HTML file containing Wijmo references and script code matching the control definitions and customizations specified in design view. |
Design View | Switches from source code view to design view. |
To return to the design suface, use the Design View command.