[Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序

时间：2022-09-17 13:18:17

　　af3的变化非常大。参见[译]Intel App Framework 3.0的变化

　　一、应用需要引用的js脚本：

　　af3中不在自己实现dom选择器，而是选择基于jquey或兼容jquery的库如zepto等，touch layer也依靠fastclick。下面就是af3应用的head部分示意代码，对比2.x变化很明显，这里引入了jquery和fastclick，没有了appframework.js

 <head>

        <title>LearAF3</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.css" />

        <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" />

        <script src="js/libs/jquery/jquery-2.1.1.min.js"></script>

        <script src="js/libs/fastclick/fastclick-1.0.3.min.js"></script>

        <script src="js/af3.0/appframework.ui.js"></script>

   　　  ...    
  </head>

　　二、页面组织结构：

　　af3中应用视觉元素组织变化巨大，一改2.x时代panel和header，footer混乱的现象，3.0中新增加了一个*元素类型（除afui）view，现在header，footer和panel页面都属于view元素，一个view内部的panel有相同的header和footer，需要不同的footer或header需要创建新的view，窃以为这样清爽多了:)，请看：

<body>

    <div class="view" id="viewMain">

            <header>

                <h1 class="title">Main view</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel active" id="page01"> this is page in main view</div>

            </div>

            <footer>

                <a  data-transition="up-reveal" class="icon html5" onclick="$.afui.loadContent('#view2',false,false,'slide');">Next view</a>

            </footer>

        </div>

        <div class="view active" id="view2">

            <header>

                <h1 class="title">view 22</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel active" id="page22" >

                    <p>this is page in  view 2</p>

                </div>

            </div>

            <footer>

                <a href="#viewMain" data-transition="up-reveal:back" class="icon home">back to main view</a>

            </footer>

        </div>

</body>

需要注意的是，view中的panel元素，还需要包裹一层pages元素，即使只有一个panel。

代码中同时显示了切换view的三种方式：

  1. 编辑时，通过添加active 类名来指定默认view
  2. 运行时，通过锚定view的id来切换
  3. 运行时，通过js函数loadContent

　　三、自定义themes：

　　af3中默认使用系统theme，如果你需要自定义theme，需要设定useOSThemes为false

$.afui.useOSThemes=false; //This must be set before $(document).ready()

另外，还需要在view之外再包裹一层id为afui的div元素，并指定相应theme的class。af3内置的theme有：

ios，ios7，android(light,dark),win8(light dark),bb/*blackberry*/,tizen

　　四、总体代码：

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

    <head>

        <title>LearAF3</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.base.css" />

        <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.css" />

        <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" />

        <script src="js/libs/jquery/jquery-2.1.1.min.js"></script>

        <script src="js/libs/fastclick/fastclick-1.0.3.min.js"></script>

        <script src="js/af3.0/appframework.ui.js"></script>

        <script>

            $.afui.useOSThemes=false;

        </script>

    </head>

    <body>

    <div id="afui" class="bb">

        <div id="splashscreen">

            <h1>Lear App Framework 3</h1>

            <span class="icon loading">loading...</span>

        </div>

        <div class="view" id="viewMain">

            <header>

                <h1 class="title">Main view</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel" id="page1">

                    <p>this is page in main view</p>

                </div>

            </div>

            <footer>

                <a  data-transition="up" class="icon html5" onclick="$.afui.loadContent('#view2',false,false,'up');">Next view</a>

            </footer>

        </div>

        <div class="view active" id="view2">

            <header>

                <h1 class="title">view 22</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel active" id="page2"  >

                    <p>this is page in  view 2</p>

                </div>

            </div>

            <footer>

                <a href="#viewMain" data-transition="up:back" class="icon home">back to main view</a>

            </footer>

        </div>

    </div>

    </body>

</html>

　　五、导航历史（history）：

　　af3为每个view，单独记录页面（panel）的浏览记录。

　　目前发现af3中每个view下面必须指出默认panel，否则不显示默认panel。并且需要通过给panel添加active类名，而不是通过data-selected="true"

[译]Intel App Framework 3.0的变化  [Learn AF3系列]   第二章 学习App Framework 3.0的组件一：View

[Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序的更多相关文章

  1. &lbrack;译&rsqb;Intel App Framework 3&period;0的变化

    App Framework 3.0 原文 IAN M. (Intel) 发布于 2015-02-11  05:24 我们高兴地宣布App Framework 的新版本3.0发布了.你可以获得最新的代码 ...

  2. &lbrack;Learn AF3&rsqb;第二章 App Framework 3&period;0的组件View——AF3的驱动引擎

    View:af3中的驱动引擎   组件名称:View     使用说明:按照官方的说法,view组件是af3的“驱动引擎(driving force)”,view是af3应用的基础,一个app中可以包 ...

  3. &lbrack;Learn AF3&rsqb;第六章 App Framework 3&period;0中的内置矢量图标

    AF3的内置矢量图标 介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持. <link rel="styleshee ...

  4. 第一章：hybrid app开发之技术选型

    伴随着移动互联网的兴起,越来越多的企业将部分资源投入其中,想在互联网+的大潮中分一杯羹,并期望着站在风口上,成为时代的弄潮儿. 现在不会做一个app都不好意思说是搞互联网的,那么开发一个app的方式有 ...

  5. 《Java从入门到失业》第一章：计算机基础知识（三）：程序语言简介

    1.3程序语言简介 我们经常会听到一些名词:低级语言.高级语言.编译型.解释型.面向过程.面向对象等.这些到底是啥意思呢?在正式进入Java世界前,笔者也尝试简单的聊一聊这块东西. 1.3.1低级语言 ...

  6. &lbrack;Learn AF3&rsqb;第三章 App Framework 3组件之Panel：afui的核心

    Panel,afui的核心组件 组件名称:Panel     使用说明:按照官方的说法,panel组件是af3的“核心(heart of the ui)”,panel用于构造应用中独立的内容展示区域, ...

  7. &lbrack;Learn AF3&rsqb;第七章 App framework组件之Popup

    AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup     说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的     方法 ...

  8. &lbrack;Learn AF3&rsqb;第五章 App Framework 3组件之Drawer——Side Menu

    Drawer——Side menu 组件名称:Drawer     说明:af3中的side menu和af2中有很大变化,af3中的side menu实际上是通过插件$.afui.drawer来实现 ...

  9. &lbrack;AFUI&rsqb;App Framework Quickstart

    ---------------------------------------------------------------------------------------------------- ...

随机推荐

  1. C&plus;&plus; 数组array与vector的比较

    转:http://blog.csdn.net/yukin_xue/article/details/7391897 1. array 定义的时候必须定义数组的元素个数;而vector 不需要: 且只能包 ...

  2. ios CoreData NSManagedObject 生命周期

    用同样的检索条件从context检索出的对象是一个????所以 在主页的3个brand没法释放,在仅仅处理brand的时候???? 和 多个 context无关 我重写了NSManagedObject ...

  3. thrift TNonblockingServer 使用

    下载 0.9.1 版本 (0.9.2需要 2.5的bison,而 RHEL6上自带bison是2.4)   TNonblockingServer 时必须使用 TFramedTransport ,不能使 ...

  4. J2EE应用服务器计数器

    常用的J2EE应用服务器包括Weblogic.WebSphere和Tomcat等,以下是以WebLogic为例给出的计数器. 类别 计数器名称 计数器描述 JVM Heap Size JVM堆大小,该 ...

  5. VS2010-win32下cocos2dx控制台打印的方法

    在xcode中  直接使用printf 或者 cout<<""<<endl;可以直接在控制台打印 但是在VS2010 却死活不好用   真郁闷 ------ ...

  6. Applovin Interview &lpar;面经&rpar;

    职位:SDE Intern positon 地点: San Jose 轮电面:self introduction what's your interest Concept of "Concu ...

  7. 【学习总结】GirlsInAI ML-diary day-12-for循环

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day12 认识for循环执行 ps: range()函数 python range() 函数可创建一个整数列表,一般用在 ...

  8. oracle之 any、some、all 解析

    举几个例子来说明ALL和ANY的用法 1. SELECT * FROM TABLEA WHERE FLD > ALL(SELECT FLD FROM TABLEA) 这相当于 SELECT * ...

  9. Android 9&period;0更新

    北京时间2018年8月7日上午,Google 发布了 Android 9.0 操作系统.并宣布系统版本 Android P 被正式命名为代号"Pie". Android 9.0 利 ...

  10. Linux下php安装redis扩展（redis已经安装）

     1. 下载需要的php操作redis的扩展包 (1).切换到 cd  /usr/local/src (2).   wget https://github.com/nicolasff/phpredis ...

相关文章