精靈點點基礎教程7 -- 自建窗體

摘要：點點的界面渲染引擎是基於DUILIB的，窗體的界面文件是XML文件。爲了便於說明，須要您先下載精靈點點v0.8.0.0以上的安裝版，安裝完成後，點擊【開始菜單】-【全部程序】-【精靈點點】-【腳本目錄】 打開腳本目錄，打開後能夠找到一個 【自建窗體.js】的文件同時還能夠找到一個【_自建窗體】的文件夾，這是點點的命名約定，若是腳本須要引用其它的腳本或者須要使用其它的文件，就要將這些文件放在以【_+腳本名】的文件夾裏

---

目錄    

精靈點點簡明教程1 -- 下載與安裝

精靈點點簡明教程2 -- 基本操做

精靈點點簡明教程3 -- 錄製腳本

精靈點點簡明教程4 -- 編輯與調試腳本

精靈點點簡明教程5 -- 編寫擴展程序

精靈點點簡明教程6 -- 發佈腳本

精靈點點簡明教程7 -- 自建窗體

---

 

自建窗體

點點的界面渲染引擎是基於DUILIB的，窗體的界面文件是XML文件。爲了便於說明，須要您先下載精靈點點v0.8.0.0以上的安裝版，安裝完成後，點擊【開始菜單】-【全部程序】-【精靈點點】-【腳本目錄】 打開腳本目錄，打開後能夠找到一個 【自建窗體.js】的文件同時還能夠找到一個【_自建窗體】的文件夾，這是點點的命名約定，若是腳本須要引用其它的腳本或者須要使用其它的文件，就要將這些文件放在以【_+腳本名】的文件夾裏 ，這樣在發佈腳本時點點會連同這個目錄一塊兒發佈 。 
如今打開【_自建窗體】目錄，能夠看到裏面有兩個文件 
【ACWindowTest.xml】和【sys_btn_close.png】 
其中【sys_btn_close.png】是窗體關閉按鈕用到的圖片。 
【ACWindowTest.xml】就是界面文件了，咱們打開看看。

<?xml version="1.0" encoding="UTF-8"?>
<Window size="300,200" caption="0,0,0,28">
    <VerticalLayout name="VerticalLayoutUI1" bkcolor="#FFEFEFEF" bkcolor2="#FFEFEFEF" bordersize="1" bordercolor="#FF25AB5E" focusbordercolor="#FF25AB5E" inset="1,0,1,0">
        <HorizontalLayout name="HorizontalLayoutUI1" bkcolor="#FF25AB5E" pos="0,0,0,28" >
            <HorizontalLayout name="HorizontalLayoutUI2">
                <Text name="TextUI1" text="測試窗體-計算器" pos="8,8,200,28" textcolor="#ffffffff" float="true" font="5"/>  
            </HorizontalLayout>
            <HorizontalLayout name="HorizontalLayoutUI3" bkcolor="#FF25AB5E" pos="0,0,112,0" width="27" inset="0,1,0,0">
                <Button name="closebtn" class="symbtn" 
                maxheight="22"
                maxwidth="27"
                align="center"
                textcolor="#FF000000"
                disabledtextcolor="#FFA7A6AA" 
                normalimage="file='sys_btn_close.png' source='0,0,27,22'"
                hotimage="file='sys_btn_close.png' source='28,0,55,22'"
                pushedimage="file='sys_btn_close.png' source='56,0,83,22'"
                />
            </HorizontalLayout>  
        </HorizontalLayout>
        <HorizontalLayout  height="6"/>
        <HorizontalLayout name="HorizontalLayoutUI4" height="32" valign="middle">
            <Label name="" height="28" />
            <Edit name="edtx" height="28" width="40" text="1"/>
            <Label name="" height="28" width="40" text="+" align="center"/>
            <Edit name="edty" height="28" width="40" text="1"/>
            <Label name="" height="28" width="40" text="=" align="center"/>
            <Edit name="edtr" height="28" width="40"/> 
            <Label name="" height="28" />
        </HorizontalLayout>
        <HorizontalLayout name="HorizontalLayoutUI4" height="30">
            <Label name=""/>
            <Button text=" 肯定 " name="btnConfirm" width="48" />
            <Label name=""/>
        </HorizontalLayout>
    </VerticalLayout>
</Window>  

 

具體的說明到時候專門開專題詳解，如今你們先簡單本身理解一下。顯示出來是這樣的。 
 
界面文件除了手寫也可使用【UIDesigner】工具進行設計。下載地址 http://www.moni.me/tools/UIDesigner.zip ，但版本過老，BUG過多，不建議使用。 
界面文件設計好了，下一步就是寫腳本使其顯示，而且實現界面上的按鈕事件了。 
這時候打開精靈點點，有個【自建窗體.js】打開

// 構造一個窗體類 其中xmlName爲界面文件的名稱    
function MyWindow(xmlName){
    // 這個窗體類必須繼承自ACWindow 如下兩行就是實現繼承
    ACWindow.call(this,xmlName);
    this.prototype = ACWindow.prototype;
    
    // 這個類必須有一個this.init的方法  
    this.init = function(){
        // 在這個方法體裏實現一些初始化操做,以及窗體內控件的事件綁定
        // 得到窗體內名爲btnConfirm的按鈕控件(參看界面文件 肯定按鈕)
        var btnConfirm = this.findControl('btnConfirm');
        // $等同於this.findControl 
        // 獲取第一個文本框的對象  
        var edtx = $('edtx')
        // 獲取第二個文本框的對象
        var edty = $('edty');
        // 獲取第三個文件框的對象
        var edtr = $('edtr');
        // 綁定單擊事件    
        btnConfirm.click(function(){
            // 獲取第一個文本框內的文本內容並轉化爲整型
            var x = parseInt(edtx.getAttribute('text'));
            // 獲取第二個文本框內的文本內容並轉化爲整型
            var y = parseInt(edty.getAttribute('text'));
            // 相加  
            var r = x + y;
            // 將結果寫到第三個文本框內   
            edtr.setAttribute('text',r);   
        });
    }
}

// 建立一個窗體實例  界面文件爲ACWindowTest.xml  
var win = new MyWindow('ACWindowTest.xml'); 
// 居中顯示  
win.centerWindow();
// 以模態對話框顯示，至此界面就出來了      
win.showModal();  
// 在前兩個文本框內輸入整數，而後點擊【肯定】按鈕，會自動算起結果，並顯示在第三個文本框內

仔細看註釋，而後運行一下腳本，參看運行結果來看腳本的實現，其實很容易 。 
有了自建窗體後，發佈腳本時若是不想內置的腳本引導界面再出來，在發佈時只須將【直接執行】勾選便可，這樣發佈的腳本就不會在執行的時候出現那個有簡介信息的引導界面了。 
 固然如今窗體功能只是初步支持，後續將會進一步支持。