在本节中,将会完成留言板的界面。
这一节的内容比教少,简单的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标签的方法,我们也应该采用,一边书写更加规范的代码!
评论 (0)