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个组件的基本界面让你们可以了解每一个组件的应用场景从而准确选择合适的组件，具体查看点击