移动前端工作的那些事—前端制作篇之框架篇–Sencha Touch框架

Sencha Touch是个重量级的框架,是基于extjs写的, 它的使用原理全是封装好的方法,包括页面布局和版块。全是js方法生成。换句话说HTML页面结构文档中之间是没有任何前端代码结构的。这个也算是该框架的一大特点吧。

该框架优点是兼容性很广,Android和IOS上都可以良好的运行。在布局上,手机、平板电脑都可以兼容。但其缺点也较明显。过于封闭,调试起来很麻烦。需要有相当水平的前端技术才能使用。上手较慢,另外,运行速度和流畅度上,同比于jquery mobile、jqmobi、jqtouch差了一些。前端水平一般者,不建议使用该框架!

这个框架我使用的不多。平时偶尔拿来练练手而已,没有实际太多的项目开发的使用经验,对该框架的使用程度而言,我只是停留在初级阶段,对它没有进行很深入的研究和学习。因此本文权当是该框架的入门文章。只对该框架的进行简单的介绍即可。想通过该篇文档对Sencha Touch框架的使用水平有质的飞跃的话,请选择专业的教程进行系统的学习,谢谢。

言归正传,下面对该框架进行简单的介绍,同时我已经认为你的电脑上已经下载了该框架的整体文件包了。以下为代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GeoTweets</title>

<!-- Sencha Touch CSS -->
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">

<!-- Custom CSS -->
<link rel="stylesheet" href="css/guide.css" type="text/css">

<!-- Google Maps JS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- Sencha Touch JS -->
<script type="text/javascript" src="../../ext-touch-debug.js"></script>

<!-- Application JS -->
<script type="text/javascript" src="src/index.js"></script>


</head>
<body></body>
</html>

这段代码是我从该框架官网上的一个demo中截取出来的。大家可以看到该页面中<body></body>之间没有任何前端代码内容。这个也是这个框架的一大特点。下面对以上代码进行一个简单的说明。

<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
上面的代码是其框架自带的css样式,直接导入即可!
<link rel="stylesheet" href="css/guide.css" type="text/css">
这段代码导入的是你关于自建项目的自定义的样式表文件
<!-- Google Maps JS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- Sencha Touch JS -->
<script type="text/javascript" src="../../ext-touch-debug.js"></script>

<!-- Application JS -->
<script type="text/javascript" src="src/index.js"></script>

这三段是JS文件,第一个是谷歌的地图插件(因为这个demo介绍的是外部地图插件的使用,所以这里要导入这个js,这段JS本身和框架没有关系),第二个js则是sencha touch框架的主执行程序必须导入!第三个js则是生成该项目的关键JS(也是重点的介绍对象,每个项目都会有一个专门的js文件,该文件负责页面逻辑、页面布局、版块生成等等)。

下面,详细说明这个index.js。我会详细的分段加以说明,其代码如下:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        var timeline = new Ext.Component({
            title: 'Timeline',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                    '<div class="tweet">',
                            '<div class="avatar"><img src="{profile_image_url}" /></div>',
                            '<div class="tweet-content">',
                                '<h2>{from_user}</h2>',
                                '<p>{text}</p>',
                            '</div>',
                    '</div>',
                '</tpl>'
            ]
        });

        var map = new Ext.Map({
            title: 'Map',
            getLocation: true,
            mapOptions: {
                zoom: 12
            }
        });

        var panel = new Ext.TabPanel({
            fullscreen: true,
            animation: 'slide',
            items: [map, timeline]
        });

        var refresh = function() {
            var coords = map.geo.coords;

            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
                    rpp: 30
                },
                callback: function(data) {
                    data = data.results;

                    // Update the tweets in timeline
                    timeline.update(data);

                    // Add points to the map
                    for (var i = 0, ln = data.length; i < ln; i++) {
                        var tweet = data[i];

                        // If the tweet is geo-tagged, use that to display marker
                        if (tweet.geo && tweet.geo.coordinates) {
                            var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
                            addMarker(tweet, position);
                        }
                    }
                }
            });
        };

        // These are all Google Maps APIs
        var addMarker = function(tweet, position) {
            var marker = new google.maps.Marker({
                map: map.map,
                position: position
            });
        };

        map.geo.on('update', refresh);

        var tabBar = panel.getTabBar();
        tabBar.addDocked({
            xtype: 'button',
            ui: 'mask',
            iconCls: 'refresh',
            dock: 'right',
            stretch: false,
            align: 'center',
            handler: refresh
        });

    }
});

其中,Ext.setup({})是创建整个项目的方法;它表示的是设置一个触摸功能设备的使用页面.它允许你为你的应用程序设置不同的开始属性和行为;
tabletStartupScreen: ‘tablet_startup.png’,//非手机(一般所指的都是平板电脑)初始化时所使用的图片;
phoneStartupScreen: ‘phone_startup.png’,//手机初始化时所使用的图片;
icon: ‘icon.png’,//保存至主屏幕时进入项目的图标;
glossOnIcon: false,//是否给该图标加入高光效果;

onReady: function() {}//当浏览器的文档对象模型(DOM)准备好之后,所开始执行的方法;可以定义应用程序代码的其余部分,包括各个页面模版的组成,都在这个函数里写。类似于jquery中的$(document).ready();

剩下的则开始定义页面中的各个组件部分;基本模式如下:

var objectName = new Ext.ComponentName({
        objectDefinition
    });

其中:
objectName是用于引用该对象的变量名.
ComponentName是对象的类名称.
objectDefinition 定义对象的属性和行为.

语法的使用方法近似于javascript面向对象的写法;我分段加以说明:

var timeline = new Ext.Component({
        title: 'Timeline',  // 所要显示的标题名字
        cls: 'timeline',    // 要使用的CSS样式
        scroll: 'vertical', // 所采用的滑屏方式
        tpl: [              // 创建一个名为tweet的模块面板;
          '<tpl for=".">',
            '<div class="tweet">',
              '<div class="avatar"><img src="{profile_image_url}" /></div>', // 该面板的图片路径
              '<div class="tweet-content">',
                '<h2>{from_user}</h2>',       // 题目名字
                '<p>{text}</p>',              // 具体内容
              '</div>',
            '</div>',
        '</tpl>'
       ]
    });

其中,{profile_image_url}、{from_user}、{text}都是采用json方式获取的。这里就不讨论了。这里的值可以写死的。如:”<img src=”images/XXX.png” />;

再创建一个地图组件:

var map = new Ext.Map({
        title: 'Map',        //所要显示的标题名字
        getLocation: true,   // 是否使用地理位置
        mapOptions: {        //地图组件参数层的设置;
          zoom: 12
        }
    });

再创建一个容器组件(这个非常重要!!!,必须要有!!!类似于在<body></body>之间加入了一个整体内容的<div></div>,说通俗一点就是创建一个可以放入内容的容器);

var panel = new Ext.TabPanel({
        fullscreen: true,            // 容器是否开启为全屏模式(就是把移动终端的屏幕铺满);
        cardAnimation: 'slide',       // 页面之间的动画切换采用的样式;
        items: [map, timeline]       // 这块非常关键!!!它表达的意思就是该容器中所要包含的模块项目有什么!! 我们把上面创建好的map地图组件和timeline组件放入到里面去。
    });

至于地图组件的使用代码这里就不详细赘述了。大家看看就好。地图具体使用这块可以略过,有想详细了解的可以查阅谷歌地图插件的API。

var refresh = function() {
            var coords = map.geo.coords;

            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
                    rpp: 30
                },
                callback: function(data) {
                    data = data.results;

                    // Update the tweets in timeline
                    timeline.update(data);

                    // Add points to the map
                    for (var i = 0, ln = data.length; i < ln; i++) {
                        var tweet = data;

                        // If the tweet is geo-tagged, use that to display marker
                        if (tweet.geo && tweet.geo.coordinates) {
                            var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
                            addMarker(tweet, position);
                        }
                    }
                }
            });
        };

        // These are all Google Maps APIs
        var addMarker = function(tweet, position) {
            var marker = new google.maps.Marker({
                map: map.map,
                position: position
            });
        };
      map.geo.on('update', refresh);

最后这个方法有必要拿出来说明一下,这个组件其实是添加自定义刷新按钮到标签栏,并对这个按钮进行了设置:

var tabBar = panel.getTabBar();
        tabBar.addDocked({
            xtype: 'button',//定义属性为button按钮;
            ui: 'mask',//UI的外观;
            iconCls: 'refresh',//按钮的CSS样式;
            dock: 'right',//水平放置的方式为居右;
            stretch: false,//位置是否为固定,和dock配合使用;
            align: 'center',//垂直情况下的排列方式为居中;
            handler: refresh//按钮点击时执行创建的地图组件refresh;
        });

只此,一个简单的应用就创建完了。保存各个文件后,就可以预览所创建的项目了。

以上就是sench touch一个简单demo的应用了。另外,我以前在自学这个sench touch框架的时候,看了几个关于使用该框架的教程视频后。总结并写了一些关于sencha touch的各种demo进来,可以供学习的同学已做参考!我逐行加了注释,以便于学习的同学便于理解。以下是代码:

<script>
//例子一!
Ext.setup({//创建一个工程
onReady:function(){//读取工程所用的方法是:
new Ext.Panel({//新建一个面板,相当于一个容器body或是是DIV等。
  fullscreen:true,//显示的方式是全屏状态。
  style:"background-color:#fc0",//设置面板的背景色样式。
  items:[],//项目
  dockedItems:[//添加的项目。
  {
  dock:"right",//让添加的项目的排布方式显示为居右。
  html:"another docked item",//该项目里包含的HTML内容。
  style:"back-ground-color:#f0c",//设置这个项目的背景色。
  height:200,//可以设置这个项目的高。
  width:500,//可以设置这个项目的宽。
  }]})}})
//例子二!可以再项目里在添加其他的项目。
Ext.setup({
onReady:function(){
  new Ext.panel({
   fullscreen:true,
   items:[{//这个知识点是在项目里添加其他的项目!。
    width:340,//设置这个项目的宽度,
    height:210,//设置这个项目的高度,
    cls:"panel-1",//这个项目调用的外部的CSS样式是什么。
    html:"panel",//包含的HTML内容是什么。
    dockedItems:[{
     dock:"top",
     width:130,
     height:200,
     cls:"panel-2",
     html:"inner panel",
     dockedItems:[{//我们还可以在添加项目里中再添加项目。
     dock:"top",
     width:130,
     height:50,
     cls:"panel-3",
     html:"inner panel",  
     }]  
     }]
     }]})}})
    
//例子三!建立一个标题栏。    
Ext.setup({
onReady:function(){
  var gongjulan= new Ext.Toolbar({//定义一个变量为新建的工具栏。这个工具栏为sencha touch内置的。可以通过修改其css样式来实现自定义。
  dock:"top",//它的排布方式局顶部显示。
  title:"Toolbar",//名称为toolbar.
  items:[{//在这个工具栏里添加一个项目文本为按钮字样。
   text:"button"
   }]
      })
 
new Ext.panel({//建立一个body面板。
  fullscreen:true,//显示方式为全屏。
  dockedItems:[gongjulan]//在这个面板里添加刚才定义的这个工具栏。
  })
  }})
 
 
 
//例子四!一个综合的复杂的动画应用。视频学习地址:<A href="http://v.youku.com/v_show/id_XMjkyNDgwMzk2.html">http://v.youku.com/v_show/id_XMjkyNDgwMzk2.html</A>
App = new Ext.Application({//建立一个新的应用,这个应用也是sencha touch内置的。下面是要为这个应用定义方法:
name:"App",//为这个应用定义一个名称。
    launch:function(){//在这个应用里,要启动一个方法。launch是启动开启的意思。
  this.views.viewport = new this.viems.Viewport();//这个视图的视图窗口等于一个新的视图的视图窗口。
 
 
  }
  })
 
 
//例子五!布局实例1!
    Ext.setup({//创建一个方法。
  onReady:function(){
   var red={
    dock:"top",//排布模式为居上。
    style:"background-color:#822222; color:white",//行业样式的定义。
    title:"red",//命名标题。
    html:"red",//html内容。
    };
  
   var rootPanel=new Ext.Panel({//创建body面板
    fullscreen:true,//全屏显示
    layout:"auto",//布局方式为自动
    items:[red]//项目输出为定义的变量red.
    })
   }
  })
//例子六!布局实例2
     Ext.setup({
   onReady:function(){
    var bottomChanger=new Ext.Carousel({//添加一个滑屏事件。默认滑屏方式为水平滑动。
     direction:"vertical",//将滑屏方式改为上下垂直滑动。
     items:[
     {cls:"yangshi1"},"//上下滑屏的第一屏内容。
     {cls:"yangshi2"},//上下滑屏的第二屏内容。
     {cls:"yangshi3"},//上下滑屏的第三屏内容。
     ]
     })
   
    var credits=new Ext.Panel({
    
     dock:"bottom",
     html:"yiduanwenzi",
     })
    
    rootPanel=new Ext.Panel({
     fullscreen:true,
     layout:"card",//当显示模式为card的时候,则可以通过cardswithanimation这个参数来实现动画设置。请详细参考layout的所有参数。以及各个参数的用法。详见API文档。
      defaults:{flex:1},//个人理解为布局等分的份数。详情可以参考sencha touch之Ipad开发文章。如果为1的话。应该是被设置的这个项目。1等分屏幕剩下的部分。如果另一个项目也设置了为1.那么就是这两个项目等分屏幕。
      cardSwitchAnimation:{type:"fade",duration:500},//动画切换模式为渐隐。时间为500毫秒。
      items:[topChanger,centerChanger,bottomChanger],//包含的项目有三个插件。
      dockedItems:[credits]//另外添加的一个项目。要理解dockedItems和item之间的区别!!
      })
    
     }
    })
     
 </script>

原文:http://blog.sina.com.cn/s/blog_3f1fc8950101n5b1.html

Leave a Reply