[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
四、总体代码：
![[Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序](http://img.e-com-net.com/image/product/806da7fa9d244ebba78e4a3ccb7837cc.gif)
![[Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序](http://img.e-com-net.com/image/product/613cce1d7e224465916443e6996c692b.gif)
<!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