The canvas

The canvas is the main work area and the largest screen region. You can adjust the width of the palette, model, and services tabs to the left and the properties to the right. When running Studio on a wide aspect screen, many find they have sufficient screen real-estate to widen those side panels. Conversely, when developing on a smaller resolution screen or designing for large screens, it may be necessary to adjust the width of the side panels to get a larger width for the canvas.

At the very top of the area, and just below our top level menu, we have the canvas tabs. When we first open our project, we have only Canvas and Source tabs. As we open services, additional service tabs are added to the tab row. Selecting our HRDB service from the service tree adds a Database tab as shown in the following screenshot:

Within the canvas tab, we have two rows of buttons and select menus that constitute the canvas toolbar. The first set of buttons mirror top level menu choices such as save, cut, copy, and paste. Many of these are also available as keyboard shortcuts, some of which are documented at http://dev.wavemaker.com/wiki/bin/wmdoc_6.5/PageDesigner#HKeyboardShortcuts.

The first option unique to the canvas controls is the toggle outline view just to the left of the Open Page dropdown. This toggles the dotted line outline and name label on widgets in the design area. While the outline view is helpful when getting started and easy to forget about, experienced users may find the information less useful and might prefer turning outline mode off. The page select is an easy way to open any page in the project.

The Language pull-down menu lets you specify which locale you are setting properties for. When language is left to default, properties such as label captions are defined in the page widgets file directly. The widgets file defined string is the caption used unless a locale-specific caption is set for the page. To set a local string, choose a locale code from the dropdown. Saving properties with a language selected saves those strings in a page language file in the language folder in the projects webapproot. These localized string properties are then shown instead of the default when browsers with the matching locale code load the page. Test running the application with a language selected also adds dojo.locale=<code> to the URL, where <code> is the selected locale code, so you can test the language files.

Under the canvas toolbar is the device view toolbar. The device view toolbar is the visual aspect of WaveMaker's mobile development tooling. Choosing a device view, either by the Size dropdown or choosing the Desktop, Tablet, or Phone view, has two outcomes: first, the canvas view is adjusted to match the target device; second, Test and Run append a wmmobile property to the URL. This wmmobile property adjusts the size of the launched browser window to emulate the chosen device screen size. The effects of the Portrait and Landscape toggles are similar, but for orientation.