应用Yii1.1和PHP5进行敏捷Web开发_第十一章迭代8美化-设计,布局,主题,国际化(i18N

第十一章：迭代8：美化－设计，布局，主题，国际化(i18N)在之前的迭代中，我们开始着手美化我们的项目，我们的URLs开始对用户和爬过我们网站的搜索引擎变得更有魅力（可能指更友好）。在本次迭代中，我们将更多的注意力投向Yii中页面布局和主题所带来的感观和感觉上。因此我们实现本章将通过将我们应用程序的外观改变的更好看来实现本章的主旨，我们将关注一种可以采取的方法和一种可以用来帮助设计Yii应用程序前台的工具，而不是自己重新设计。所以本次迭代中将更多的关注如何使你的应用程序更漂亮，而不是花费大量时间去专门设计我们TrackStar应用程序(的外观)。迭代计划这次迭代是基于前端来完成的。我们想制作一个可以被动态重用的网站的新外观。我们并不想通过重写或删除当前设计的方式来实现。同时，我们也会深入Yii的i18N(internationalization=i18N)功能，所以我们必须清楚的明白如何使应用程序适应来自不同地理位置的用户。下面是一个high-level(高级/高优先级)任务列表，我们需要完成它以实现我们的目标：通过创建新的布局，CSS和其他配置文件来建立一个新的主题，并为应用程序提供一个新前端设计使用Yii的i18N和定位功能将我们应用程序中的一部分翻译成另外一种新语言设计布局你可能注意到的一件事是：我们已经添加了很多功能到我们的应用程序，但没有添加任何实质的导航来连接到这些功能。自默认建立的应用程序开始首页没有发生任何改变。自我们建立应用程序开始，导航项没有发生改变。我们需要改变基本导航来更好的反映现在应用程序中的各个功能。至此，我们并未完全提及我们的应用程序是如何调用用来呈现内容的view文件的。我们知道view文件是用来显示数据和每次页面请求的HTML回发内容的。当我们建立新Controller(控制器)的actions(行为)时，我们也会建立相关的view文件，来承载actions返回的显示内容。大多数view文件只针对单一action存在，没有通用性。然而，有一些，例如主导航菜单，会在网站中很多页面被重复使用。这类UI组件更适合存放置被我们称为布局文件的文件中。Yii中的布局文件，是一种用来装饰其他view文件的一种特殊的view文件。一般来说布局会包含修饰部分或者包含其他view文件的用户界面元素。在使用布局文件渲染一个view文件时，Yii会将该view文件装入布局。定制一个布局定制一个布局主要分为2步操作。其一是CWebApplication的$layout属性。默认值指向protected/views/layouts/main.php。这一项为默认设置，可以在位于protected/config/main.php的主配置文件里进行修改。例如我们在protected/views/layouts/newlayout.php新建了一个配置文件，并且想将其设置为应用程序级布局文件，我们需要按如下方式修改主配置文件修改layout属性：PHP代码：returnarray('layout'='newlayout',文件名并不包含.php后缀，并且将CWebApplication的$layoutPath属性默认关联到Webroot/protected/views/layouts(如果你的应用程序路径有所改变，可以使用相同的方式重写该值)。另外一个需要指定布局的地方是设置Controller(控制器)类$layout属性。这样就允许针对不同Contorller(控制器)以更细的粒度进行设置。这就是在建立最初程序时定制的方法。当使用yiic工具来建立最初应用程序时，基于Webroot/protected/components/Controller.php来自动创建一个Controller(控制器)。打开该文件你将看到$layout属性被设置为”column1”。在Controller(控制器)级对布局文件的设置将覆盖CWebApplication类中的设置。添加并使用一种布局在调用CController::render()方法来使用一个布局文件。也就是说，当你调用render()方法来渲染一个view文件时，Yii将会将view文件的内容嵌入controller类或应用程序级设置的layout文件中。你可以通过调用CController::renderParial()方法实例来避免应用layout装饰。正如前面所说，一个布局文件一般被用来装饰其他view文件。一个使用布局的例子就是每个页面提供相同的页头和页脚。当render()方法被调用，后台先针对某个view文件调用renderPartial()。这一步的输出被保存在一个叫$content的变量中，并且在接下来的布局文件中可用。因此，一个简单的布局文件可能是下面的样子：PHP代码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=:lang=enlang=enheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/metaname=languagecontent=en//headbodydivid=headerSomeHeaderContentHere/div?phpecho$content;?divid=footerSomeFooterContentHere/div/body/html让我们动手验证一下。新建一个叫newlayout.php的文件，并将其放入默认布局文件位置：/protected/views/layouts/。将上面的HTML添加进去后保存。下面我们将通过修改我们的站点controller(控制器)来使用这个新布局。打开SiteController.php然后重载layout属性设置，添加如下代码：PHP代码：classSiteControllerextendsController{public$layout='newlayout';这样只有这一个controller(控制器)会使用newlayout.php。至此，每一次基于SiteController调用render()方法都会使用newlayout.php布局文件。登录页面就是由SiteController负责渲染的页面之一。让我们访问一次该页面来确认修改。当我们打开(假设我们并未登录)，我们将会看到与下图相关的界面：如果我们简单的注释掉我们之前添加的$layout属性，然后刷新登录页面，我们将重新使用原始的main.php布局，并且页面也变回原来的样子了。重构main.php布局文件目前为止，我们所有的应用程序页面都使用了main.php布局文件作为主要的布局标记。在我们着手改动页面布局和设计之前，应该仔细观察一下main布局文件。下面是该文件的全部内容：PHP代码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=:lang=enlang=enheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/metaname=languagecontent=en/!--blueprintCSSframework--linkrel=stylesheettype=text/csshref=?phpechoYii::app()-request-baseUrl;?/css/screen.cssmedia=screen,projection/linkrel=stylesheettype=text/csshref=?phpechoYii::app()-request-baseUrl;?/css/print.cssmedia=print/!--[ifltIE8]linkrel=stylesheettype=text/csshref=?phpechoYii::app()-request-baseUrl;?/css/ie.cssmedia=screen,projection/![endif]--linkrel=stylesheettype=text/csshref=?phpechoYii::app()-request-baseUrl;?/css/main.css/linkrel=stylesheettype=text/csshref=?phpechoYii::app()-request-baseUrl;?/css/form.css/title?phpechoCHtml::encode($this-pageTitle);?/title/headbodydivclass=containerid=pagedivid=headerdivid=logo?phpechoCHtml::encode(Yii::app()-name);?/div/div!--header--divid=mainmenu?php$this-widget('zii.widgets.CMenu',array('items'=array(array('label'='Home','url'=array('/site/index')),array('label'='About','url'=array('/site/page','view'='about')),array('label'='Contact','url'=array('/site/contact')),array('label'='Login','url'=array('/site/login'),'visible'=Yii::app()-user-isGuest),array('label'='Logout('.Yii::app()-user-name.')','url'=array('/site/logout'),'visible'=!Yii::app()-user-isGuest)),));?/div!--mainmenu--?php$this-widget('zii.widgets.CBreadcrumbs',array('links'=$this-breadcrumbs,));?!--breadcrumbs--?phpecho$content;?divid=footerCopyright©?phpechodate('Y');?byMyCompany.br/AllRightsReserved.br/?phpechoYii::powered();?/div!--footer--/div!--page--/body/html我们将从头开始。最开始的5行可能会让你觉得很熟悉。PHP代码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=