DeviceOne開發App

第一課

DeviceOne主要解決那些問題？

移動應用開發的痛點：學習難度大、開發周期長、項目成本高、技術陷阱多、App易閃退、屏幕適配難、壓力大......

開發者的硬性要求：統一的UI開發能力、統一的邏輯開發能力、具備高品質體驗效果、能夠自動適配屏幕、大量可重用的優質組件......

需要達到的目標：降低成本、快速開發、原生體驗

移動開發服務類平台的崛起將是大勢所趨。

 

 

UI層和代碼層完全分離，修改UI層，完全不用考慮代碼層的結構或者是邏輯。

第二課  組件開發及組件使用的概念

核心組件：UI  SM  MM

DeviceOne目前提供了8個核心組件，和組件商店里的擴展組件的差別就在於，這些核心組件都是一個DeviceOne應用能運行起來的基本元素，用戶是不能選擇的，都會自動加到應用里。每一個擴展組件的API文檔都在組件商店里能獲取到。核心組件的簡介和API文件可以在這里查詢到。

DeviceOne的核心就是由這8個組件組成的。在開發過程中一直存在於App中。

do_App，do_Page，do_Global，do_Storage，do_Animation，do_ALayout，do_LinearLayout，do_Webview

SM組件：在整個App的生命周期中，只可能創建一次實例，不需要多次創建實例。像這種組件就稱作SM組件。

--------------------------------------

1.在OutLine中越靠下面的組件會展示在頁面越上層。

2.iphone6:750*1334

3.在RootView中只允許有一個容器類組件，其他組件都是放在這個容器類組件中的，通常我們選擇ALayout絕對布局組件來當這個容器組件。

通過屬性列表修改該組件的id為do_ALayout_root，默認大小是跟整個項目的大小相同的750x1334

4.DeviceOne有強大的屏幕適配技術，但可能會在某些局部對圖片顯示形狀要求嚴格的地方會稍微有些變形，為了保證點ALayout有一個特殊屬性isStretch，這里將該屬性設置成false來保證ImageView不變形。

5.通過點擊Bottom Bar上的不同按鈕來切換內容，這種情況下最適合用ViewShower這個組件，ViewShower是一個包含多個子VIew的UI容器組件。把組件ID改為do_ViewShower_main。

雙擊index.ui.js打開代碼編輯頁面，先通過ID實例化ViewShower組件，再給ViewShower綁定數據，在DeviceOne的組件庫中，ViewShower、ListView等這種容器類都是采用MVVM形式來綁定數據的，使得開發人員可以將View和業務邏輯分離出來。

這里先給ViewShower定義需要綁定的數據viewShower_data，其中id需要保持唯一，否則后id已經存在，會覆蓋之前的View；

path為需要展示的子View所在的UI頁面的絕對路徑，此時path所指的三個頁面還不存在，一會來創建。

定義好數據后，通過ViewShower的addViews方法將數據綁定進去，在調showView方法使其先默認顯示第一個頁面，即id為”news”的子頁面。

---------------------------

DeviceOne平台開發App

app.js是整個項目的入口頁面。

statusBarState:transparent; 全屏顯示，狀態欄是全透明。

do_App.on("loaded",fn);

do_App.openPage({

    source:"",

    statusBarState:"transparent",

    animationType:fade

});

-------------------------------

sdk（軟件開發工具包）

軟件開發工具包（外語首字母縮寫：SDK、外語全稱：Software Development Kit）一般都是一些軟件工程師為特定的軟件包、軟件框架、硬件平台、操作系統等建立應用軟件時的開發工具的集合。

-----------------------------

所有組件分三種類型(UI,MM,SM)，這三種組件都有自己的屬性，事件，方法，其他所有組件(目前大概有90+)都是這三種組件的子類，繼承了父類的屬性，事件和方法。應用開發者只需要了解基本的javascipt知識和我們提供的這套API規范，就可以開始開發移動應用了。

1. deviceone: 命名空間
2. UI : 界面View
3. SM : 單實例模塊
4. MM : 多實例模塊
5. Class : 類繼承實現(工具函數)
6. foreach : 遍歷Object(工具函數)
7. foreachi : 遍歷Array(工具函數)
8. merge : 合並多個Object(工具函數)

 UI/SM/MM的簡介

• UI(User Interface) : 頁面上的控件,只要能放在頁面展示出來的,能在設計器中可視化編輯屬性的,就是UI. 如 Button 、 ImageView、 Label 等.

• SM(Singleton Modle) : 單例的組件,主要實現對原生單例API的封裝, 如 Global 、 App、 Page、 Storage 、 Device 等.這些組件在整個app中就只有一個對象.它的方法更像是我們其它語言常用的靜態方法。

• MM(Multiton Modle) : 多實例組件, 對原生的多實例API的封裝. 如 SQLite 、 Http 、 Animation 等.在整個app中可以new多個對象。

我們提供了3個對應的工廠方法以獲取或構建UI/SM/MM的實例.

• ui : 通過UI對象的id來獲取對象，id是一個ui對象的id屬性值。這個id值由開發者來定義，可以是任何字符串
• sm : 通過SM組件的名稱來構建對象，不過因為是單例，只有第一次調用sm函數是構建，以后再調用就是獲取已經構建好的對象了
• mm : 通過MM組件的名稱，id以及作用域來創建或者獲取對象

  //創建一個作用域在App級別的do_Http組件的對象，它的id是http_id1, //如果在這個作用域里已經有這個id的對象，則不會創建新的，而是返回已有的對象
      var http = mm("do_Http");//缺省在當前page作用域
      var http = mm("do_Http","http_id1","app"); var animation = mm("do_Animation","anim_id1","page"); ...

 

source目錄下的ui.js文件

特殊的js文件，每一個ui文件都可以對應一個它自身的js文件，比如1.ui對應的就是1.ui.js.
這種js文件和標准的js文件差異在於它能獲取到它對應的ui文件的上下文環境，從而可以根據id來獲取ui對象，這一點類似HTML DOM getElementById()的原理。
另外一個區別在於這種js文件自動加載了deviceone.js這個核心js庫。而其它標准的js文件需要顯式的require這個deviceone.js核心庫。

------------------------

do_App：這個是DeviceOne提供的基本應用類，通常在DeviceOne里開發的一個工程項目就是一個App實例。這個類負責頁面Page的基本跳轉，和App作用域內的數據共享等。

DeviceOne平台包含2個基礎的布局組件，do_ALayout和do_Linearlayout。所謂布局組件就是在IDE里設計界面，可以拖拽別的組件加到這個布局組件里作為這個布局組件內的一個部分。

注意：do_ScrollView也算是布局，也可以往里面拖拽其他組件，不過它比較特殊，它有且只有一個子節點。

do_ALayout組件

這個是最基礎最常用的布局組件，這里的 ALayout是AbsoluteLayout的縮寫，表示絕對布局。絕對布局使用很簡單，它內部的所有組件的布局都是絕對坐標值，不過這個坐標值是相對ALayout來說的，不是相對整個屏幕。

介紹幾個重要的特性：

1.do_ALayout可以設置背景圖片，這個功能比較常見，就是設置bgImage屬性。

2.do_ALayout支持touch,touchDown,touchUp事件，這里有一個技巧就是，在do_ALayout上添加一個do_Imageview, 如果在imageview上添加點擊事件，用戶手指必須點中圖片才能激活，但是如果把事件加到imageview所在的ALayout，那么可點擊區域就很大了，用戶體驗會好很多。

3.屬性isStretch和layoutAlign，這二個屬性很重要，涉及到屏幕適配的一個方式，解決在不同的手機屏幕寬高比不一樣導致的變形問題。

4.add方法,do_ALayout和do_LinearLayout都具有這個方法，原理也一樣。add這個方法也非常重要，通過這個方法可以在app運行是動態增加ui。應用的場景就是一些ui可以重復使用，比如一個app中所有的頁面的header都是類似的，可以通過add動態添加，然后更新數據。更大的好處是能把這個add進去的ui對應的邏輯代碼寫在這個ui對應的js文件里。可以降低代碼的耦合度。

do_LinearLayout組件

LinearLayout組件叫線性布局，意思就是里面的組件按線性排列，可以上下，可以左右排列。里面所有的子view的x，y沒有意義，因為它們是一個接一個，無縫的拼接在一起。

重點的介紹幾個重要的特性：

1.LinearLayout很少設置固定的高度和寬度，它最大的優勢是可以動態根據內容來變化width和height,自適應大小，強制性地使視圖擴展以便顯示其全部內容，也就是WRAP_CONTENT。Do平台有不少組件支持這種方式，參考文檔.

2.具體就是設置LinearLayout的width或height為-1表示自適應。那么LinearLayout顯示的真實高度和寬度就是由它里面的所有子view疊加起來的。

3.padding和margin屬性，其實margin是所有ui都具有的公共屬性，但是它只能在Linearlayout里有效，所以在這里一起提一下。

4.padding就是在LinearLayout的內邊距，margin就是LinearLayout里的一個子view和相鄰的組件的距離

5.add方法，LinearLayout 原理和do_ALayout完全一樣，只不過就是參數x，y改成一個id值，表示加到現有一個組件的后面或下面。

容器組件

能包容其它ui組件的組件，和布局組件的差別在於，容器組件不能直接在IDE的設計界面拖拽其它ui組件加到它的內部。他一般是通過屬性templates來指定多個ui文件作為模板，然后通過數據綁定的方式來加載數據。數據綁定參考文檔.
容器組件很多種而且也很重要，因為它一般是App的主框架，目前官方容器類組件包含10個，我們只是簡單介紹10個組件的基本界面讓大家能夠了解每個組件的應用場景從而准確選擇合適的組件，具體查看點擊