PhoneJS With Layout
HTML
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/13.2.9/css/dx.ios.default.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.9/js/dx.phonejs.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/13.2.9/layouts/Simple/SimpleLayout.css">
<script src="http://cdn3.devexpress.com/jslib/13.2.9/layouts/Simple/SimpleLayout.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/13.2.9/css/dx.common.css">
<div data-options="dxView : { name: 'home', title: 'Home' } " >
<div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } " >
<p>Welcome</p>
<div data-bind="dxButton: { text: 'Click me!', clickAction: showHelloWorld }">
</div>
</div>
</div>
<!-- Simple Layout Markup (should be linked to the page) -->
<div class="win8phone-layout dx-black-background" data-options="dxLayout : { name: 'simple', platform: 'win8' } " >
<div class="layout-frame dx-content-background">
<div class="dx-top-header" data-options="dxContentPlaceholder : { name: 'header', transition: 'none' }">
<div data-bind="text: title">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', transition: 'slide' } " >
<div class="dx-loadindicator-container">
<div data-bind="dxLoadIndicator: { visible: true }"></div>
</div>
</div>
</div>
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
<div class="layout-toolbar-bottom win8" data-options="dxToolbar: { items: [], renderAs: 'bottomToolbar' }, dxCommandContainer : { id: 'win8-phone-appbar' } " >
</div>
</div>
<div...
JavaScript
DevExpress.devices.current({ platform: "ios", phone: true, version: [6] })
window.MyApp = {};
MyApp.home = function () {
var viewModel = {
showHelloWorld: function() {
alert("Hello world!");
}
};
return viewModel;
};
MyApp.app = new DevExpress.framework.html.HtmlApplication({
namespace: MyApp,
navigationType: "simple"
});
MyApp.app.router.register(":view/:name", { view: "home", name: '' });
MyApp.app.navigate();
MyAPP