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.

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.

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.

Specify what device to use in the Design View by using the Device Settings 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.

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.

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

<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.

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.

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.

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

<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.

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.

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.

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

• Click anywhere in the yellow area;

• Click the Refresh button.