在前一节我们了解Joomla后台常用的UI元素，这一节我们将看看在v2.0.0版本中我们是如何使用这些UI元素的

1，本节目标

了解标题，侧边栏，列表的使用

2，UI元素

 我们v2.0.0版本组件界面如图：

在上面我们使用了3个元素。分别是标题，侧边栏和内容列表。渲染页面是由视图来负责的，因此我们重点关注views/items/view.html.php这个文件。

标题

在zmaxbookViewItems类中我们发现通过调用JToolbarHelper类来添加标题

JToolbarHelper::title('ZMAX图书管理系统 - 书本管理', 'list');

这个类提供了一个静态的title方法，该方法接受两个参数，一个是标题的文本，一个是标题的图标 

侧边栏（子菜单） 

zmaxbookHelper::addSubmenu('items');
$this->sidebar = JHtmlSidebar::render();

这两行代码就为我们产生了一个侧边栏。首先调用zmaxbookHelper这个类的addSubmenu方法添加子菜单，然后调用JHtmlSiderbar的render方法将生成的侧边栏的代码存储到$this->sidebar中。

zmaxbookHelper类是组件的帮助类，在joomla中我们经常将一些零散不经常用的方法统一放到一个帮助类中。还记得在组件的入口点文件中我们做的第一件事就是注册组件的帮助类。也就是引入 helpers目录下的zmaxbook.php这个文件。

/**
 * ZMAXBOOK组件的帮准类的实现文件.
 *
 * @since  2.0
 */
class zmaxbookHelper
{

	/**
	 * 配置组件的菜单链接.
	 *
	 * @param   string  $vName  当前高亮的视图的名称.
	 *
	 * @return  void
	 */
	public static function addSubmenu($vName)
	{
		JHtmlSidebar::addEntry('书本管理','index.php?option=com_zmaxbook&view=items',$vName == 'items');
	}
}

这个类实际上还是调用的JHtmlSidebar的addEntry方法，需要增加几个子菜单，就调用几次这个方法。

addEntry方法接受3个参数，子菜单的标题，子菜单的链接，是否高亮选中。 

上面的代码中，我们添加了一个叫做书本管理的菜单项，点击菜单的请求链接为index.php?option=com_zmaxbook&view=items。因为 addSubmenu传递的参数是items。所以这个菜单项会以高亮的方式展示。

列表

在布局文件中，我们使用table来展示数据列表。

<div id="j-main-container" class="span10">
	<table class="table table-striped">
		<thead>
			<tr>
				<th >标题</th>
				<th >作者</th>
				<th >价格</th>
				<th >ID</th>
			</tr>
		</thead>
		<tbody>
		<?php foreach ($this->items as $i => $item) :?>
			<tr>
				<td><?php echo $item->title; ?></td>
				<td><?php echo $item->author; ?></td>
				<td><?php echo $item->price; ?></td>
				<td><?php echo $item->id; ?></td>
			</tr>
		<?php endforeach; ?>
		</tbody>
	</table>
</div>

我们只需要在table元素上添加 table，table-striped这两个类，就会得到一个干净整洁的列表了。非常的方便

3，更多

Joomla除了以上的UI元素外，还有一些其他的，这些我们在后期的学习中在慢慢一一介绍