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個組件的基本界面讓你們可以瞭解每一個組件的應用場景從而準確選擇合適的組件，具體查看點擊