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

  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

  四、总体代码:

[Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序
<!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>
View Code

  五、导航历史(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

你可能感兴趣的:(framework)