在本节中，将会完成留言板的界面。

 这一节的内容比教少，简单的html代码和css样式控制。

在上一节中我们讲到了MVC中的C （控制器和）V(视图)之间的关系。并且也清楚了joomla中输出的页面其实也就是V(视图)文件输出的页面。并且视图文件可以调用视图的模版进行显示。我们的guestbook的提交留言界面就是在视图的模板文件中做的。

修改default.php文件：

<?php
//留言板提交留言界面
defined('_JEXEC') or die('你不能直接访问这个文件！');

//加载css文件
$document = &JFactory::getDocument();
$document ->addStyleSheet("components/com_guestbook/css/guestbook.css");
?>
<div class="gb_head">
    <span> 留言板组件v1.0  zmax99.com</span>
</div>
<div class="gb_page">
    <div class ="type postmessage">
        <span>提交留言</span>
    </div>
    <div class="gb_body">
        <form action="<?php echo JRoute::_('index.php?option=com_guestbook&task=postmessage');?>" method="post">
         <fieldset>
                <div class="title subject">主题：</div>
                <div class="input"><input type="text" name="subject" size="40"/></div>
                
                <div class="line_nav"></div>
                
                <div class="title text">正文：</div>
                <div class="input"><textarea cols="70" rows="5" name="content" ></textarea></div>
                
                <div class="line_nav"></div>
                
                <div class="title">作者：</div>
                <div class="input"><input type="text" name="author" size="40" /></div>
                
                <div class="line_nav"></div>
                
                <div class="title">Email: </div>
                <div class="input"><input type="text" name="email" size="40" /></div>
                
                <div class="line_nav"></div>
                
          </fieldset>
          <div><button type="submit" class="button">确认提交</button></div>
        </form>
    </div>
</div>

view.html.php文件保持不变即可：

   // 禁止直接访问这个文件
defined('_JEXEC') or die ('you can not access this file!');

jimport('joomla.application.component.view');

/**
 * Guestbook组件的HTML视图类
 */
class GuestBookViewGuestBook extends JView
{
	public $msg0  = "welcome to zmax99.com!";
	
	function __construct()
	{
		parent::__construct();
	}
	
	function display($tpl = null)
	{
		$msg1 = "Hello World";
		$this->assignRef( 'msg1', $msg1 );
		parent::display($tpl);
	}
}

在根目录下增加一个文件夹CSS。并在其中加一个文件guestbook.css.代码如下：

.gb_head {
    color: #DCDC84;
    font-family: 宋体;
    font-size: 20px;
    font-weight: bolder;
    margin: 14px 0;
}

.type {
    color: #4D4D88;
    font-size: 17px;
    font-weight: bolder;
}

.gb_page {
    padding-left: 15px;
}

.gb_body  input:focus{
    border: solid 1px #888ddd;
}

.title {
    color: #626262;
    float:left;
}


.line_nav {
    margin: 10px 0;
}

下面输出结果截图：

一个留言板的提交留言页面就完成了。

在上述代码中唯一需要解释的地方那个就是：

$document = &JFactory::getDocument();
$document ->addStyleSheet("components/com_guestbook/css/guestbook.css");

这代码的主要作用就是在页面引人一个CSS文件。首先调用Joomla的工程类 JFactory得到一个文档对象 然后调用文档对象的addStyleSheet方法引人css.

在下一张 我们将会探讨如何如何接受前台页面提交的数据。敬请期待！

于2014-02-23 更正：

以上的代码虽然没有问题，能够正常执行，但是这样写的代码的可读性不高，我们可以采取分段的思路来书写代码，使用loadTemplate方法来调用，一段典型的代码如下：

<thead><?php echo $this->loadTemplate('head');?></thead>
<tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
<tbody><?php echo $this->loadTemplate('body');?></tbody>

 另外joomla提供了一些自动产生html标签的方法，我们也应该采用，一边书写更加规范的代码！