Design-Time Features

To implement a view in a PhoneJS application, define the view's HTML markup, apply style sheets and implement a function that returns the view's ViewModel. DevExtreme comes with the View Designer that helps you design view markup easily and quickly. To open the View Designer, change the View's .html file extension to the .dxView extension and double-click the file.

NOTE: If you create an application using DevExtreme project templates, HTML view files will already have the .html extension.

View Designer

As you can see in the image above, the View Designer has Design and Source Views. The HTML code that is presented in the Source View is running in the Design View.

Arrange Design and Source Views

Set up the View Designer in a way that best suits your needs, then lay out the Design and Source Views as required. The following image details how to do this.

View Designer Layout

Set Device Settings

Specify what device to use in the Design View by using the Device Settings Toolbar.

Toolbar

Here are the options to be set for changing the device.

  • Landscape

    Choose between the landscape or portrait orientation for the device.

  • Theme

    Choose how to display the device's view: as an iOS, android, win8phone, tizen or desktop view.

  • Resolution

    Choose the required resolution for the device.

  • Zoom

    Choose how to zoom the device.

  • Select a project to show the view in its context

    When designing a view from a Shared project, you can see how it looks in the final application.

To show/hide the Device Settings Toolbar, use the button that is displayed in the image below.

Show Toolbar

Add Widgets

The View Designer gives you the freedom from having to write HTML code for adding widgets to a View. Choose a widget in the Toolbox, and drag and drop it to the required place in the view displayed in the device.

Add Widget

A code template will be added to the corresponding place in the dxView's source automatically.

HTML
<div data-options="dxView : { name: 'Categories', title: 'Categories', targetFrame: 'navigation' } ">
    <div data-bind="dxCommand: { action: '#CategoryEdit', location: 'create', title: 'Add', icon: 'plus' }"></div>
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div data-bind="dxTextBox: {}"></div>
    </div>
</div>

Specify the widget's options. You can do this manually in code, setting the required properties of the configuration object that is passed to the widget's constructor. Alternatively, you can use the Properties grid. It displays all options specified for the widget currently selected in the Source or Design View.

Widget Properties

Add Commands

The View Designer gives you the freedom from having to write HTML code for adding Commands to a View. Drag and drop the dxCommand item from the Toolbox to the strip at the bottom of the Design View.

Add Command

A code template for a command will be added to the corresponding place in the dxView's source automatically.

HTML
<div data-options="dxView : { name: 'Categories', title: 'Categories', targetFrame: 'navigation' } ">
    <div data-bind="dxCommand: { action: '#CategoryEdit', location: 'create', title: 'Add', icon: 'plus' }"></div>
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
    </div>
    <div data-bind="dxCommand: { title: 'Command Title' }"></div>
</div>

Specify command options. You can do this manually in code, setting the required properties of the configuration object that is passed to the widget's constructor. Alternatively, you can use the Properties grid. It displays all the options that can be specified for the Command that is currently selected in the Source or Design View.

Command Properties

Set the location option. The command will be displayed in the specified location of the layout that is currently used for the view.

Refresh Design View

When code in the Source View is changed, the Design View should be refreshed. To do this, use the following approaches:

Refresh Design View

  • Click anywhere in the yellow area;

  • Click the Refresh button.