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

　　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的三种方式：

编辑时，通过添加active 类名来指定默认view
运行时，通过锚定view的id来切换
运行时，通过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>