DevExtreme Vue - Design-Time Features

To implement a view in a DevExtreme SPA Framework-based 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 .dxView 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.

NOTE
To see a view from the Shared project in the simulator of the Design View, select another project to show the view in its context. For this purpose, use a corresponding combobox in the Device Settings Toolbar.

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 version 8, 7 or 6, Android version 5 or 4, Windows Phone 8.1 or a 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-options="dxContent : { targetPlaceholder: 'content' } ">
        <div data-bind="dxTextBox: {}"></div>
    </div>
</div>

Specify widget options. You can do this manually in code, setting the required properties proposed by the intellisense. 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. Press Add command on the strip at the bottom of the Design View; this will invoke the Add Command dialog.

Add Command

In this dialog, specify an identifier for the added command. You can choose an identifier from the drop-down list of predefined identifiers or specify a custom one. But take into account that the command identifier must be unique within the application. If you choose a predefined identifier, default mapping will used for this command. This means that the command will be displayed in a predefined place of the command containers that are located on the built-in layouts used in your application. If you set a custom identifier for your command, use the rest of the editors in the Add Command dialog to specify command containers for your command and a place on the widgets that these command containers represent. Set a required command container for the required platforms available for the layouts used in your application.

NOTE
The set of command containers that are offered to be chosen for a command depends on the current project. If the current project is Shared, set a required context for the currently designed view by using the Select a project to show the view in its context combobox on the toolbar.

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: 'products', title: 'products' } " >
    <div data-bind="dxCommand: { title: 'edit', id: 'edit' }"></div>
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <!--view content is here-->
    </div>
</div>

All changes that you specified for command mapping within the dialog will be saved to the application's app.config file.

Specify command options. You can do this manually in code, setting the required fields of the configuration object that is passed to the command'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

You can change command mapping specified for the command. For this purpose, press Edit on the command strip at the bottom of the Design View.

Edit Command

The Edit Command dialog will be invoked. This dialog is identical to the Add Command dialog. The changes will be saved to the application's configuration file again.

NOTE
The changes performed in the Add Command/Edit Command dialog influence all application views, since command mapping is specified globally for an entire application. So, be attentive to the command identifiers to avoid the unexpected placement of a command.

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.