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

 

posted @ 2017-05-22 20:09  晴晴加油  阅读(3386)  评论(0)  编辑  收藏  举报