Yii + jQuery Mobile

 今年初忽然想找一个PHP Framework来学习, 选择了Yii下手, 意外的
    还算好上手, 最近在开发Mobile Web平台, 看到jQuery Mobile的效果很好
    , 决定将两个东西一起使用, 虽然有不少衝突需要花时间解决, 但是整体
    效果还不错 ; 当初在这版看到网友[aaroms]分享了Yii的教学, 确实帮到
    我不少, 以他的文章继续下去, 分享一些Yii的使用心得

    1.多国语言
        使用yiic webapp 建立专案后, 可以在protected内看到有资料夹
    messages, 在这裡面以资料夹做语言的区隔, 例如建立(zhtw),(enus),共
    两个资料夹, 接著建立相同名称的php档案分别存放这两个资料夹内, 例如
    login.php, 程式内容就是代码对应文字

    zhtw/login.php
    <?php
        return array(
           't_account'=>'帐号',
           't_password'=>'密码',
           't_required'=>'请勿空白'
        );
    ?>

    enus/login.php
    <?php
        retunr array(
           't_account'=>'Account',
           't_password'=>'Password',
           't_required'=>' Is Required'
        );
    ?>


    接著在config/main.php设定网站预设的语言, 使用Yii::app()->language
    例如:
    if(empty($_GET['lang'])){
        $lang = 'zhtw'; }
    else{
        $lang = $_GET['lang']; }
    Yii::app()->language = $lang;


    最后利用<?php echo Yii::t('login', "t_account");?>
    会根据使用者所选择的语言, 印出[帐号] or [Account]


    2.AJAX栏位检查
        在protected/models内存放自订的Form Class, 针对要使用的资料栏位
    , 可以设定AJAX的检查, 首先宣告会使用到的栏位, 以登入的表格来说明,


    例如在 LoginForm.php 中宣告[帐号], [密码]两个变数
    public account;
    public password;


    设定变数的检查条件, 这边先以[required 必填]做举例, message则是设定
    栏位空白时, 所要显示的错误讯息
    public function rules(){
        return array(
           array('account, password,', 'required',
             'message'=>'{attribute}'.Yii::t('login', "t_required")),
        );
    }
    这边错误讯息使用{attribute}, 会自动判断是哪个变数 (因为有account,
    password两个以上的变数), 当前端判断[帐号]空白时, 会显示
    [account请勿空白], {attribute}只能抓到变数的名称, 所以要另外设定
    文字标籤来做多国语言的显示


    接著是文字标籤的设定
    public function attributeLabels(){
        return array(
           'account'=>Yii::t('login', "t_account"),
           'password'=>Yii::t('login', "t_password"),
        );
    }
    设定完后, 原先的[account请勿空白]中的account就会根据语言做变化,
    例如变成[帐号请勿空白]


    在protected/controller中设定每个action(动作), 定义Model以及
    要显示的View, 例如
    public function actionLogIn()
    {
       $model = new LoginForm;

       $this->render('login',array('model'=>$model));
    }

    最后, 在protected/view/site/login.php, 利用Yii的语法产生form以及
    资料栏位, 像是text, password, radio, hidden ....等


    <?php
        $form=$this->beginWidget('CActiveForm', array(
                'id'=>'login-form',
                'enableClientValidation'=>true,
                'clientOptions'=>array(
                        'validateOnSubmit'=>true,
                )
        ));
    ?>
        <?php echo $form->textField($model,'account');?>
        <?php echo $form->error($model,'account'); ?>
        <input type="submit" value="submit">
    <?php $this->endWidget(); ?>

    在按下Submit送出的时候, 就会根据在LoginForm中的设定栏位检查条件
    去做检查, 并且透过 echo $form->error($model,'account')将设定好的
    错误讯息印出
    ----------------------------------------------------------------
    LoginForm的栏位检查条件function rules()中, 除了[required必填], 还有
    其他一些常用的检查条件

    A. 正规表示法
       array('account, password', 'match', 'pattern'=>'/^[A-Za-z0-9]{6,12}$/',
'message'=>Yii::t('login', "e_match")),

    B. 两个栏位资料比对(例如设定密码, 需要 [密码] & [确认密码] ),
       需要注意的是, 两个变数的位置
       array('password_confirm', 'compare', 'compareAttribute'=>'password',
'message'=>Yii::t('login', "e_pass")),

   其它的检查条件可以至yii\framework\validators中查看

 3.引入档案

        A.本机端

        CSS和Img及JS这些档案, 通常是放在专案的最外层, Yii建立好专案后,
    固定会有以下这些资料夹
        /assets
        /css
        /images
        /protected
        /themes
    CSS内设定的图片路径就照一般即可, 如果是在/protected内的档案要读取图
    片, 则使用下列语法取得专案的路径

    <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/
         act/act_01.jpg">

    同理, CSS和JS也是这样引入, 通常CSS和JS会设定在layouts/main.php这个主
    样板内, 如果某些特殊页面需要不同的CSS和JS, 则在那个View档案中, 加入

        $baseUrl = Yii::app()->baseUrl;
        $cs = Yii::app()->getClientScript();
        $cs->registerScriptFile($baseUrl.'/js/yourscript.js');
        $cs->registerCssFile($baseUrl.'/css/yourcss.css');


        B.远端

        使用jQuery Mobile时, 如果要远端引入jQuery官网的jquery.mobile.js,
    在加上jquery.mobile.js需要配合指定版本的jquery.js, 会跟Yii内建的
    jquery.js衝突

        打开/protected/config/main.php, 在components这段程式码中加上
        'clientScript'=>array(
            'packages'=>array(
               'jquery'=>array(
                   'baseUrl'=>'http://code.jquery.com/',
                   'js'=>array('jquery-1.8.2.min.js'),
                   'coreScriptPosition'=>CClientScript::POS_HEAD
               ),
               jquery.mobile'=>array(
                   'baseUrl'=>'http://code.jquery.com/mobile/1.3.0/',
                   'js'=>array('jquery.mobile-1.3.0.min.js'),
                   'depends'=>array('jquery'),
                   'coreScriptPosition'=>CClientScript::POS_BEGIN
                )
             ),
         ),

        接著在layouts/main.php主样版中, 使用下列语法
        <?php
                $cs = Yii::app()->getClientScript();
                $cs->registerCoreScript('jquery');
                $cs->registerCoreScript('jquery.mobile');
        ?>

    4.样板

        专案建立时初始在layouts中会有column1.php, column2.php, main.php,
        预设使用的是column1.php, 此档案的程式码中可以看到

        <?php $this->beginContent('//layouts/main'); ?>
                ......
                ......
        <?php $this->endContent(); ?>

        表示是使用main.php

        A.一般网页

        一般的网页大部分就是由上而下分三个区块, 在layouts/main.php中
        <div class='header'></div>

        <?php echo $content;?>

        <div class='footer'></div>

        其中$content就是在controller各个action指定使用的View所产生的
        页面, 例如在siteController中

        public function actionLogIn()
        {
                $model = new LoginForm;
                $this->render('login',array('model'=>$model));
        }

        则会使用views/site/login.php来当作View

        B.jQuery Mobile

        jQuery Mobile的架构跟一般网页稍有不同, 可以在同一支Html档案中
        , 将整个网站的内容放进去, 以DIV做各页面的区块, 每个页面区块一
        样包含header, content, footer例如:

        <div data-role='page' id='login'>
                <div data-role='header'></div>
                <div data-role='content'></div>
                <div data-role='footer'></div>
        </div>
        <div data-role='page' id='news'>
                <div data-role='header'></div>
                <div data-role='content'></div>
                <div data-role='footer'></div>
        </div>

        纯静态页面时这样使用还不错, 但是需要后端程式做处理就不适合了,
        在Yii中的layouts/main.php 则变成

        <div data-role='page'>

                <div data-role='header'></div>

                <div data-role='content'>
                        <?php echo $content;?>
                </div>

                <div data-role='footer'>
                        [回首页][功能选单]
                </div>

                <?php $this->beginContent('//layouts/menu'); ?>
                <?php $this->endContent(); ?>
        </div>

        JQM(jQuery Mobile)的header和footer在使用手机浏览时, 会自动固定
        在上方及下方, 通常footer可能会放[回首页]和[功能选单], 而[功能选
        单]是共用的页面, 所以使用beginContnet来引入, menu.php的内容大约
        是:

        <div data-role='panel' data-position='right'>
                [登入]
                [申请会员]
                [最新消息]
        </div>
        则这个Menu区块会从右方往左边展开

        有些页面可能需要在下方有[分页Bar], 可以参考巴哈姆特手机版样式, 这
        时候就需要不同的主样版, 刚刚有提到controller预设是使用column1.php
        , 这时候需要额外设定class SiteController中宣告样版变数

        public $layout = 'column1';

        接著在指定的action中设定
        public function actionNews()
        {
                $this->layout = 'column_page';
        }

        则当页面为News时, 会使用column_page.php, 其他页面则是使用
        column1.php, 接著column_page.php再搭配main_page.php,
        main_page.php中的内容则变成

        <div data-role='page'>

                <div data-role='header'></div>

                <div data-role='content'>
                        <?php echo $content;?>
                </div>

                <div data-role='footer'>
                        <?php $this->beginContent('//layouts/page'); ?>
                        <?php $this->endContent(); ?>
                        [回首页][功能选单]
                </div>

                <?php $this->beginContent('//layouts/menu'); ?>
                <?php $this->endContent(); ?>
        </div>

        在footer中加入page.php产生分页功能的php, 这个分页Bar就会跟footer
        一起, 固定在页面的下方