Built-in Layouts

In most cases, you do not have to define layouts yourself. The framework comes with a set of predefined layouts that are located in the lib | layouts folder of your PhoneJS zip archive. This folder is added to the PhoneJS project template as well. When building an application, you can use one of the predefined navigation types. In this instance, the predefined layouts will be applied to the application views automatically according to the strategy that the specified navigation type implies. Just ensure that the layouts that are demanded by the specified navigation type are linked in the application page.

JavaScript
window.MyApp = {};
$(function() {
    MyApp.app = new DevExpress.framework.html.HtmlApplication({
        navigationType: 'navbar',
        namespace: MyApp
    });
});
HTML
<!-- Layouts -->
<script type="text/javascript" src="layouts/NavBar/NavbarLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/NavBar/NavbarLayout.css" />
<link rel="dx-template" type="text/html" href="layouts/NavBar/NavbarLayout.html"/>
<script type="text/javascript" src="layouts/Pivot/PivotLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Pivot/PivotLayout.css" />
<link rel="dx-template" type="text/html" href="layouts/Pivot/PivotLayout.html"/>
<script type="text/javascript" src="layouts/Simple/SimpleLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Simple/SimpleLayout.css" />
<link rel="dx-template" type="text/html" href="layouts/Simple/SimpleLayout.html"/>

The images below detail which content placeholders and command containers are available for you in different versions of the predefined layouts.

Navbar Layout

The Navbar layout is available for all platforms supported by the framework. This layout is characterized by the presence of a navigation control on a view. The navigation control is a global navigation that provides access to the root views of the application.

iOS

NavBar iOS

NOTE: If you place a command in the 'ios-view-footer' command container, add the 'view-footer' content placeholder to your view as well. In this instance, the dxContent component with the 'ios-view-footer' command container defined in the layout will be rendered to the 'view-footer' content placeholder of your view.

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/NavBar/NavbarLayout.html" />
<script type="text/javascript" src="layouts/NavBar/NavbarLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/NavBar/NavbarLayout.css" />

Android

NavBar Android

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/NavBar/NavbarLayout.html" />
<script type="text/javascript" src="layouts/NavBar/NavbarLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/NavBar/NavbarLayout.css" />

Windows 8

NavBar Windows 8

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/NavBar/NavbarLayout.html" />
<script type="text/javascript" src="layouts/NavBar/NavbarLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/NavBar/NavbarLayout.css" />

Tizen

NavBar Tizen

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/NavBar/NavbarLayout.html" />
<script type="text/javascript" src="layouts/NavBar/NavbarLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/NavBar/NavbarLayout.css" />

Generic

NavBar Generic

NOTE: If you place a command in the 'generic-view-footer' command container, add the 'view-footer' content placeholder to your view as well. In this instance, the dxContent component with the 'generic-view-footer' command container defined in the layout will be rendered to the 'view-footer' content placeholder of your view.

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/NavBar/NavbarLayout.html" />
<script type="text/javascript" src="layouts/NavBar/NavbarLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/NavBar/NavbarLayout.css" />

Pivot Layout

The Pivot layout is available for Windows Phone 8 applications. This layout is characterized by the presence of a pivot control on a view. The pivot control is global navigation that provides access to the root views of the application.

Pivot

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Pivot/PivotLayout.html" />
<script type="text/javascript" src="layouts/Pivot/PivotLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Pivot/PivotLayout.css" />

SlideOut Layout

The SlideOut layout is available for all the platforms supported by the framework. This layout is characterized by its slide-out menu that is hidden behind the main screen. This menu can be revealed by a click on the top left corner menu icon. The slide-out menu represents global navigation that provides access to the root views of the application.

iOS

SlideOut iOS

SlideOut iOS

NOTE: If you place a command to the 'ios-view-footer' command container, add the 'view-footer' content placeholder to your view as well. In this instance, the dxContent component with the 'ios-view-footer' command container defined in the layout will be rendered to the 'view-footer' content placeholder of your view.

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/SlideOut/SlideOutLayout.html" />
<script type="text/javascript" src="layouts/SlideOut/SlideOutLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/SlideOut/SlideOutLayout.css" />

Android

SlideOut Android

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/SlideOut/SlideOutLayout.html" />
<script type="text/javascript" src="layouts/SlideOut/SlideOutLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/SlideOut/SlideOutLayout.css" />

Windows Phone 8

SlideOut Windows Phone 8

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/SlideOut/SlideOutLayout.html" />
<script type="text/javascript" src="layouts/SlideOut/SlideOutLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/SlideOut/SlideOutLayout.css" />

Tizen

SlideOut Tizen

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/SlideOut/SlideOutLayout.html" />
<script type="text/javascript" src="layouts/SlideOut/SlideOutLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/SlideOut/SlideOutLayout.css" />

Generic

SlideOut Generic

SlideOut Generic

NOTE: If you place a command in the 'generic-view-footer' command container, add the 'view-footer' content placeholder to your view as well. In this instance, the dxContent component with the 'generic-view-footer' command container defined in the layout will be rendered to the 'view-footer' content placeholder of your view.

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/SlideOut/SlideOutLayout.html" />
<script type="text/javascript" src="layouts/SlideOut/SlideOutLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/SlideOut/SlideOutLayout.css" />

Split Layout

The Split layout is available for Windows 8 tablet applications. There are two content placeholders in this layout: 'navigation' and 'content'. To set the required placeholder for a view, use the targetFrame option of the corresponding dxView markup component. In the image below, a view with product details is displayed in the Split layout. The target placeholder of this view is set to 'content'. This view was navigated to from a view with a product list, whose target placeholder is 'navigation'. So both these views are displayed on the screen simultaneously. The 'win8-appbar' command container includes the commands from both these views, since commands from both these views are mapped to this container. The toolbar that displayed the 'win8-toolbar' command container includes the system Back command and the title of the currently navigated view - Product.

Split

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Split/SplitLayout.html" />
<script type="text/javascript" src="layouts/Split/SplitLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Split/SplitLayout.css" />

Simple Layout

The Simple layout is available for all the platforms supported by the framework. This layout is characterized by the absence of a navigation control on the view. Thus, it is normally used for the views that are invoked to present specific data, perform particular actions and return back to the previous view or pass to the next context view.

iOS

Simple iOS

NOTE: If you place a command to the 'ios-view-footer' command container, add the 'view-footer' content placeholder to your view as well. In this instance, the dxContent component with the 'ios-view-footer' command container defined in the layout will be rendered to the 'view-footer' content placeholder of your view.

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Simple/SimpleLayout.html" />
<script type="text/javascript" src="layouts/Simple/SimpleLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Simple/SimpleLayout.css" />

Android

Simple Android

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Simple/SimpleLayout.html" />
<script type="text/javascript" src="layouts/Simple/SimpleLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Simple/SimpleLayout.css" />

Windows Phone 8

Simple Windows Phone 8

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Simple/SimpleLayout.html" />
<script type="text/javascript" src="layouts/Simple/SimpleLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Simple/SimpleLayout.css" />

Tizen

Simple Tizen

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Simple/SimpleLayout.html" />
<script type="text/javascript" src="layouts/Simple/SimpleLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Simple/SimpleLayout.css" />

Generic

Simple Generic

NOTE: If you place a command to the 'generic-view-footer' command container, add the 'view-footer' content placeholder to your view as well. In this instance, the dxContent component with the 'generic-view-footer' command container defined in the layout will be rendered to the 'view-footer' content placeholder of your view.

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Simple/SimpleLayout.html" />
<script type="text/javascript" src="layouts/Simple/SimpleLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Simple/SimpleLayout.css" />

Empty Layout

The Empty layout includes a single 'content' content placeholder on any platform.

Links:

HTML
<link rel="dx-template" type="text/html" href="layouts/Empty/EmptyLayout.html" />
<script type="text/javascript" src="layouts/Empty/EmptyLayout.js"></script>
<link rel="stylesheet" type="text/css" href="layouts/Empty/EmptyLayout.css" />

Default Command Mapping

Built-in layouts come with a default command mapping. This means that if you use particular identifiers for your commands, these commands are automatically added to the command containers of the predefined layouts. The following table details a command location on a toolbar representing a command container according to the default command mapping.

Command Container Left Center Right Menu
ios-header-toolbar "back"
"cancel"
"edit"
"save"
"create"
ios-view-footer "delete"
android-header-toolbar "back" "edit"
"save"
"create"
"cancel"
"delete"
android-footer-toolbar "edit"
"save"
"create" "delete"
android-simple-toolbar "back"
"save"
"create" "edit"
"cancel"
"delete"
tizen-header-toolbar "back" "edit"
"save"
"create"
"cancel"
"delete"
tizen-footer-toolbar "edit"
"save"
"create" "delete"
tizen-simple-toolbar "save"
"back"
"create" "edit"
"cancel"
"delete"
generic-header-toolbar "back"
"cancel"
"edit"
"save"
"create"
generic-view-footer "delete"
win8-appbar "create" "edit"
"cancel"
"save"
"delete"
win8-toolbar "previousPage"
win8-phone-appbar "create"
"edit"
"cancel"
"save"
"delete"