DevExtreme 學習應用[1]

 

DevExtreme學習開發 【1】

用HTML開發手機應用，看一哈幫助文檔覺得還很不錯。

在開發前一定要安裝DevExteme  下載連接地址：

ftp://211.101.1.108/DevExpress/DevExpressDevExtreme-13.1.8.zip

ftp://211.101.1.108/DevExpress/DevExpressPhoneJS-13.1.8.zip

首先創建一個項目：

 1選第一個基本模板[DevExtreme 13.1 Basic Application]。然后指定相應的程序名稱。

 

2創建完成后會看到解決方案。包含以下幾個目錄

• CSS - 通用和特定平台的樣式表文件的文件夾
• data- 打算把一切相關的數據，例如一個文件夾，變量數據加載/存儲
• JS - 一個文件夾，應用程序所需的所有JavaScript庫
• layouts- 代表的預定義布局的框架文件的文件夾
• View - 視圖一個文件夾中有兩個樣本的意見 - “Home”和“About”
• app.config.js - 一個文件，該文件包括初始化應用程序使用的配置對象
• index.css - 應用樣式表文件
• index.html的 - 應用程序所需的所有資源文件鏈接的
• index.js - 一個文件中創建和配置的HtmlApplication對象

 3然后運行程序以瀏覽器的形式

可以在里面切換不用的移動平台。

找到VIEW 文件夾。然后創建一個NewView。

添加dxList控件。

<div data-options="dxView : { name: 'NewView', title: 'NewView' } ">
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div>
            <div data-bind="dxTextBox: { mode: 'search', value: searchString, 
           visible: showSearch, valueUpdateEvent: 'search change keyup' }"></div>
        </div>
        <div data-bind="dxList: { dataSource: dataSource}">
            <div data-options="dxTemplate: { name:'item'}"
                data-bind="text: 'name', dxAction: '#ProductDetial/1'">
            </div>
        </div>
        </div>
    <div data-bind="dxCommand: {title: 'Search',placeholder:'Search...',
    location:'create',icon:'find',action:find }"></div>
</div>

然后給DxList控件賦值。它這個值就是Josn格式的數據。

Application1.NewView = function (params) {

    var viewModel = {
        searchString: ko.observable(''),
        find:function() {
            viewModel.showSearch(!viewModel.showSearch());
            alert("serachIng");
        },
        showSearch: ko.observable(false),
        categoryId: params.id,
        dataSource: [
            { id: 1, name: 'Wisky', category_id: 1 }
        ]
    };

    return viewModel;
};

然后在創建一個Detial頁面;

<div data-options="dxView : { name: 'product_details', title: 'Product' } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">Id: </div>
                <div class="dx-field-value" data-bind="text: id"></div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Name: </div>
                <div class="dx-field-value" data-bind="text: name"></div>
            </div>
        </div>
    </div>
</div>

JavaScript代碼：

Application1['product_details'] = function(params) {
    var viewModel = {
        id: params.id,
        name: ko.observable('')
    };
    return viewModel;
};

然后運行一哈效果：

然后點擊列跳轉到Detial頁面

 由於研究了半個小時。還沒有搞的太懂。