The Wijmo Designer is a visual tool for JavaScript-based web applications. It provides an easy way generate HTML, CSS, and JavaScript to define the appearance and behavior of the controls. In a previous article introducing the Wijmo Designer, we discuss how the designer is particularly useful for exploring complex objects such as grids and charts.
This video and step-by-step tutorial will show you how to use the designer. To get started, visit the Wijmo Designer Demo page.
Getting started using the Wijmo Designer
There is a FlexGrid loaded by default. Delete it and click the suitcase icon on left-side of the designer to add a Wijmo control.
Properties and Events pane
The Properties pane and Event pane are located on the right-hand side of the designer. Click the arrow in the top right corner to view them. In the Properties pane, change any of the control properties to define the behavior of the control.
In the Events pane, you can toggle events to add handlers for the control's events. If you click on the markup icon ["{..}"], you will see event handlers have been added to the script. Use these events to give you more control over the native behaviors!
When you are finished using the designer, you can copy the markup section page and add it to your project. If you are adding the code to an existing project, just copy the <script> tags for each control from the head section, the <div> tags hosting each control, and the JavaScript code in the <script> that instantiates the controls.
Adding themes
You can also add themes to the controls. Click on the Palette icon to view available themes. Selecting a theme will apply the colors to the selected control.
The Wijmo Designer makes it easier to build applications with Wijmo controls by providing a visual design surface that lets you experiment with control properties, child objects, and collections. It generates pure JavaScript code that you can add to your projects, which saves time while minimizing coding errors and typos.
Developing in Angular?
Try the Wijmo Designer extension for Visual Studio Code, an extension that provides a visual interface for creating and editing Angular tags representing Wijmo controls.
For more articles like this, demos, videos and tutorials, check out our blog page. Do you have a demo request? Leave us a comment below!
Troy Taylor