在DevExpress中HTML和JavaScript 組合可以你創建一個友好的、交互的、全功能的應用程序而且不需要依賴于某個IDE，而且這些應用程序的代碼可以在記事本中重新編寫。
DXTREME ENTERPRISE里面的DXTREME HTML JS框架將繼承此功能，并允許您使用最喜愛的工具進行開發。在本文中，我們將展示如何將使用 DXTREME 框架的主要架構創建新的應用程序。
在編寫的代碼之前，先從DXTREME 來源復制的"css"和"js"目錄（(%PROGRAMFILES%\DevExpress\DXTREME 12.2\Sources\Lib\）到項目目錄。
然后創建一個 index.html 文件，包括我們的程序集：
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/knockout-2.1.0.js"></script>
<script type="text/javascript" src="js/globalize.js"></script>
<script type="text/javascript" src="js/dxtreme.core-12.2.js"></script>
<script type="text/javascript" src="js/dxtreme.framework-12.2.js"></script>
<script type="text/javascript" src="js/dxtreme.widgets-12.2.js"></script>
<script type="text/javascript" src="js/dxtreme.viz-12.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/dxtreme.ios.default-12.2.css" />
<link rel="stylesheet" type="text/css" href="css/dxtreme.android.holo-dark-12.2.css" />
<link rel="stylesheet" type="text/css" href="css/dxtreme.desktop.default-12.2.css" />
<link rel="stylesheet" type="text/css" href="css/dxtreme.win8.black-12.2.css" />
<script>
$(function() {
app.navigate();
});
</script>
</head>
<body>
<div id="viewPort"></div>
</body>
將Layout.html 和 layout.css 文件添加到項目目錄，并將以下代碼插入到相應的文件：
div data-dx-role="layout" data-dx-name="navbar" data-dx-platform="ios" class="page">
<div class="layout-header" data-dx-placeholder="header" data-dx-transition="none">
<div
data-bind="dxToolbar: { items: [ { text: title, align: 'center' } ] }"
data-dx-command-container="back: { showIcon: false }, cancel: { showIcon: false }, create: { showText: false }, edit: { showIcon: false }, save: { showIcon: false }"
data-dx-left-locations="back;cancel"
data-dx-right-locations="create;edit;save">
</div>
</div>
<div class="layout-content" data-dx-placeholder="content" data-dx-transition="slide"></div>
<div class="layout-footer" data-dx-placeholder="footer">
<div id="navBar" data-bind="dxNavBar: { }" data-dx-command-container="navigation: { }">
</div>
</div>
<div data-dx-target-placeholder="view-footer" class="view-footer">
<div data-bind="dxToolbar: { }" class="view-toolbar-bottom" data-dx-command-container="'delete': { showIcon: false }" data-dx-left-locations="delete"></div>
</div>
</div>
<div data-dx-role="layout" data-dx-name="navbar" data-dx-platform="android" class="page">
<div class="layout-header" data-dx-placeholder="header">
<div id="navBar" data-bind="dxNavBar: { }" data-dx-command-container="navigation: { }">
</div>
</div>
<div class="layout-content" data-dx-placeholder="content" data-dx-transition="slide"></div>
<div class="layout-footer" data-dx-placeholder="footer">
<div
data-bind="dxToolbar: { }"
data-dx-command-container="create: { showText: false }, edit: { showText: false }, 'delete': { showText: false }, save: { showIcon: false }, cancel: { showIcon: false }"
data-dx-left-locations="edit;save"
data-dx-right-locations="delete;cancel">
</div>
</div>
</div>
<div data-dx-role="layout" data-dx-name="navbar" data-dx-platform="win8" class="page">
<div class="layout-header" data-dx-placeholder="header">
<h1 data-bind="text: title"></h1>
<div id="navBar" data-bind="dxNavBar: { }" data-dx-command-container="navigation: { showIcon: false }"></div>
</div>
<div class="layout-content-wrapper">
<div class="layout-content" data-dx-placeholder="content" data-dx-transition="none"></div>
</div>
</div>
/* Layout */
.layout-content div[data-dx-target-placeholder] {
height: 100%;
position: absolute;
width: 100%;
}
.page {
height: 100%;
width: 100%;
position: relative;
}
.layout-header {
position: absolute;
width: 100%;
}
.layout-content {
position: absolute;
width: 100%;
overflow: hidden;
}
.layout-footer {
width: 100%;
position: absolute;
}
/* ios */
.dx-theme-ios .layout-header {
top: 0;
height: 44px;
}
.dx-theme-ios .layout-content {
top: 44px;
bottom: 59px;
}
.dx-theme-ios .layout-footer {
bottom: 0;
overflow: hidden;
height: 59px;
}
.dx-theme-ios div[data-dx-target-placeholder].view-footer {
position: static;
}
.dx-theme-ios .view-toolbar-bottom.dx-toolbar {
background: transparent;
border: none;
margin-bottom: 10px;
display: none;
}
.dx-theme-ios .view-toolbar-bottom.dx-toolbar .dx-toolbar-left {
right: 0;
}
.dx-theme-ios .view-toolbar-bottom.dx-toolbar .dx-toolbar-left .dx-button {
position: absolute;
left: 10px;
right: 10px;
}
/* android */
.dx-theme-android .layout-header {
top: 0;
height: 68px;
}
.dx-theme-android .layout-content {
top: 68px;
bottom: 40px;
}
.dx-theme-android .layout-footer {
bottom: 0;
height: 40px;
}
.dx-theme-android .dx-tabs.dx-navbar {
height: 100%;
}
/* desktop */
.dx-theme-desktop {
background: #ccc;
}
.dx-theme-desktop .fixed-width {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.dx-theme-desktop .logo {
float: left;
margin: 25px;
background: white;
}
.dx-theme-desktop h1 {
margin: 0;
padding: 10px;
}
.dx-theme-desktop .layout-header {
top: 0;
position: relative;
overflow: auto;
background: #303030;
text-align: left;
border-top: 1px solid rgba(0,0,0,.1);
-webkit-box-shadow: inset 0 1px rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px rgba(255,255,255,.2);
box-shadow: inset 0 1px rgba(255,255,255,.2);
}
.dx-theme-desktop .dx-tabs {
border: none;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
display: block;
}
.dx-theme-desktop .layout-content-wrapper {
background: #fff;
}
.dx-theme-desktop .layout-content {
position: relative;
overflow: visible;
min-height: 400px;
}
.dx-theme-desktop .layout-footer {
position: relative;
overflow: auto;
}
/* win8 */
.dx-theme-win8 {
height: 100%;
}
.dx-theme-win8 [data-dx-name="navbar"] .layout-header,
.dx-theme-win8 [data-dx-name="navbar"] .layout-content,
.dx-theme-win8 [data-dx-name="navbar"] .layout-content div[data-dx-target-placeholder] {
position: static;
width: auto;
}
.dx-theme-win8 [data-dx-name="navbar"] .layout-content div[data-dx-target-placeholder] {
height: auto;
}
.dx-theme-win8 [data-dx-name="navbar"].page {
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 104px 1fr;
overflow: hidden;
}
.dx-theme-win8 [data-dx-name="navbar"] .layout-header {
-ms-grid-column: 1;
-ms-grid-row: 1;
height: 180px;
padding: 60px; /* #B230682 */
}
.dx-theme-win8 [data-dx-name="navbar"] .layout-header h1 {
margin-bottom: 40px;
}
.dx-theme-win8 [data-dx-name="navbar"] .layout-content-wrapper {
padding: 0 60px 60px 60px; /* #B230682 */
/* for IE */
-ms-grid-column: 1;
-ms-grid-row: 2;
padding: 110px 60px 60px 60px\9; /* #B230682 */
/* end for IE */
}
這是一個對于所有的視圖常見的代碼，在index.html 文件中同樣包含這些代碼：
添加 index.js 文件并將其包括在 index.html 文件中。在此文件中，創建一個 HtmlApplication 實例，這里使用演示的代碼。
創建“views”目錄，在此目錄中，把所有的 HTML，JS 和 CSS 文件與這個views相關聯，不要忘記在 index.html 文件中包括的新文件。創建的所有視圖后，需要聲明在 index.js 文件中聲明路由規則，第一個匹配沒有參數的URL 的rule的默認視圖名字，，將會被用于查找啟動視圖。比如以下的代碼：
[JScript]Open in popup window
myApp.router.register("Product/:categoryId/:id", { view: "Product", id: undefined });
myApp.router.register(":view/:id", { view: "index", id: undefined });
下面是index.html 和index.js 文件的例子：
[HTML]Open in popup window
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/knockout-2.1.0.js"></script>
<script type="text/javascript" src="js/globalize.js"></script>
<script type="text/javascript" src="js/dxtreme.core-12.2.js"></script>
<script type="text/javascript" src="js/dxtreme.framework-12.2.js"></script>
<script type="text/javascript" src="js/dxtreme.widgets-12.2.js"></script>
<script type="text/javascript" src="js/dxtreme.viz-12.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/dxtreme.ios.default-12.2.css" />
<link rel="stylesheet" type="text/css" href="css/dxtreme.android.holo-dark-12.2.css" />
<link rel="stylesheet" type="text/css" href="css/dxtreme.desktop.default-12.2.css" />
<link rel="stylesheet" type="text/css" href="css/dxtreme.win8.black-12.2.css" />
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="dx-template" type="text/html" href="layout.html" />
<link rel="dx-template" type="text/html" href="views/start.html" />
<script type="text/javascript" src="views/start.js"></script>
<script>
$(function() {
app.navigate();
});
</script>
</head>
<body>
<div id="viewPort"></div>
</body>
</html>
window.myApp = window.myApp || {};
$(function() {
app = new DevExpress.framework.html.HtmlApplication({
// the default namespace where code-behind/ViewModel functions reside
ns: window.myApp,
// a DOM tree node where Views will be rendered
viewPortNode: document.getElementById("viewPort"),
// a layout used when a View does not specify the data-layout attribute
defaultLayout: "navbar",
navigation: [
{
title: 'Start',
execute: '#start',
icon: 'home'
}
]
});
app.router.register(':view/:id', { view: 'start', id: undefined });
})
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都控件
半島外圍網上直營 
4次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線