在线播放无码不卡,国产91三级精选国产,亚洲五月天综合网

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

原創|使用教程|編輯：郝浩|2013-03-11 16:01:59.000|閱讀 2768 次

概述：在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@fc6vip.cn

文章轉載自：慧都控件

上一篇：Web圖表控件ChartDirector使用教程：創建三維散點圖下一篇：Aspose.Pdf使用教程：在現有的PDF文件中添加注釋