- 1 第一个应用 Hello World
- 2 Yii Web 应用基础
- 3 为应用添加日志
- 4 Hangman 猜单词游戏实例
- 5 URL 管理
- 6 CComponent 组件
- 7 使用 CHtml 创建 Form
- 8 使用 FormModel
- 9 UI 组件 Widget 概述
- 10 UI 组件 自定义组件
- 11 UI 组件 ActiveForm 示例
- 12 UI 组件 ClipWidget 示例
- 13 UI 组件 ContentDecorator 示例
- 14 UI 组件 MaskedTextField 示例
- 15 UI 组件 MultiFileUpload 示例
- 16 UI 组件 StarRating 示例
- 17 UI 组件 TabView 示例
- 18 UI 组件 TextHighlighter 示例
- 19 UI 组件 TreeView 示例
- 20 UI 组件 Captcha 示例
- 21 UI 组件 自定义 Captcha 示例
- 22 UI 组件 Zii 组件简介
- 23 数据库-概述
- 24 数据库-DAO 示例
- 25 数据库-Query Builder 示例
- 26 数据库-Active Record 示例
- 27 数据库-关联 Active Record 示例
- 28 Data Provider 简介
- 29 Zii 组件-Menu 示例
- 30 Zii 组件-ListView 示例
- 31 Zii 组件-DetailView 示例
- 32 Zii 组件-GridView 示例
- 33 Zii 组件-Accordion 示例
- 34 Zii 组件-AutoComplete 示例
- 35 Zii 组件-Button 示例
- 36 Zii 组件-DatePicker 示例
- 37 Zii 组件-Dialog 示例
- 38 Zii 组件-ProgressBar 示例
- 39 Zii 组件-Slider 示例
- 40 Zii 组件-SliderInput 示例
- 41 Zii 组件-Tabs 示例
- 42 Zii 组件-Draggable 示例
- 43 Zii 组件-Droppable 示例
- 44 Zii 组件-Resizable 示例
- 45 Zii 组件-Selectable 示例
- 46 Zii 组件-Sortable 示例
- 47 主题 Theme 示例
- 48 多国语言示例
9 UI 组件 Widget 概述
和通常的应用程序开发框架一样,Yii Framework 也提供了一组 UI 小组件(CWidget)来帮助程序员设计用户界面,小组是 CWidget 或其子类的实例.它是一个主要用于表现数据的组件.小组通常内嵌于一个视图来产生一些复杂而独立的用户界面.例如,一个日历小物件可用于渲染一个复杂的日历界面.小组件使用户界面更加可复用。
我们可以按如下视图脚本来使用一个小物件:
<?php $this->beginWidget('path.to.WidgetClass'); ?> ...可能会由小物件获取的内容主体... <?php $this->endWidget(); >
或者
<?php $this->widget('path.to.WidgetClass'); ? >;
后者用于不需要任何 body 内容的组件。
小组件可通过配置来定制它的表现.这是通过调用 CBaseController::beginWidget 或 CBaseController::widget 设置其初始化属性值来完成的.例如,当使用 CMaskedTextField 小物件时,我们想指定被使用的 mask .我们通过传递一个携带这些属性初始化值的数组来实现.这里的数组的键是属性的名称,而数组的值则是小物件属性所对应的值.正如以下所示 :
<?php $this->widget('CMaskedTextField',array( 'mask'=>'99/99/9999' )); ?>
继承 CWidget 并覆盖其 init() 和 run() 方法,可以定义一个新的小物件:
class MyWidget extends CWidget { public function init() { // 此方法会被 CController::beginWidget() 调用 } public function run() { // 此方法会被 CController::endWidget() 调用 } }
小组件可以像一个控制器一样拥有它自己的视图.默认情况下,小物件的视图文件位于包含了小组件类文件目录的 views 子目录之下.这些视图可以通过调用 CWidget::render() 渲染,这一点和控制器很相似.唯一不同的是,小组件的视图没有布局文件支持。另外,小组件视图中的$this 指向小物件实例而不是控制器实例。
在上一篇文章 Yii Framework 开发简明教程(8) 使用 FormModel 说通过 CController 来处理用户提交事件,和 Windows 桌面应用或 ASP.Net 做个类比, Yii 中视图 View (HTML Form) 类似于 WinForm 或是 Asp.Net 的 Page。 控制类 Controller 类似 Windows 桌面应用或 Asp.Net 的事件处理(Code-Behind) 类。 严格上来说,把 Yii 中视图 View (HTML Form) 比作 Windows 桌面中的 WinFrom 或是 Asp.Net 的 Page 并不十分恰当,实际上 Yii 中视图的整个 HTML (或是 body)对等于 WinForm 或是 Page。 HTML Form 也只是 CWidget 的一个子类,对应到 CActiveForm UI 组件,此外,Yii 内置了下面 CWidget 类型:
图片 9.1 picture9.1
其中 CJuiWidget (封装 JQuery)和 CInputWidget 进一步分为:
图片 9.2 picture9.2
后面的教程将逐个介绍 Yii 提供的 UI 小组件的用法,除了这些内置的 UI 小组件外,Yii 也支持自定义 UI 小组件。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论