DevExpress DXTREME使用教程：如何不用VS创建和部署DXTREME程序-控件新闻-慧都网

DevExpress DXTREME使用教程：如何不用VS创建和部署DXTREME程序

原创|使用教程|编辑：郝浩|2013-03-11 16:01:59.000|阅读 2695 次

概述：在DevExpress中HTML和JavaScript组合可以你创建一个友好的、交互的、全功能的应用程序而且不需要依赖于某个IDE，而且这些应用程序的代码可以在记事本中重新编写。DXTREME HTML JS框架将继承此功能，并允许您使用最喜爱的工具进行开发。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

在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@pclwef.cn

文章转载自：慧都控件

上一篇：Web图表控件ChartDirector使用教程：创建三维散点图下一篇：Aspose.Pdf使用教程：在现有的PDF文件中添加注释