进入专题模式查看 >>

在这一节,我们将改进编辑界面,使用XML表单来实现同样的效果。

1,本节目标


了解如何使用XML来定义表单

2,操作步骤


2.1 改进模型的继承关系,使用JModelForm作为基类。

修改models/item.php文件,将zmaxbookModelItem的基类修改为JModelForm.代码如下:

//class zmaxbookModelItem extends JModelLegacy
class zmaxbookModelItem extends JModelForm  //修改基类,继承自JModelForm

2.2  实现getForm方法。

由于JModelForm中定义getForm方法为一个虚方法,我们必须在子类中实现这个方法。在JModelForm中定义的getForm代码如下:

abstract public function getForm($data = array(), $loadData = true);

所以,我们需要修改models/item.php文件,增加getForm方法的实现。代码如下:

	public function getForm( $data = array() , $loadData = true)
	{
		$form = $this->loadForm('com_zmaxbook.item' ,'item' ,array('control' =>'jform' ,'load_data' => $loadData ));
		if(!$form)
		{
			return false;
		}
		return $form;
	}

在上面的代码中,重点关注

$form = $this->loadForm('com_zmaxbook.item' ,'item' ,array('control' =>'jform' ,'load_data' => $loadData ));

这行代码的意思是得到需要加载的xml表单。loadForm方法接收三个参数

  • 第一个参数类型为字符串,是这个表单的唯一标识符,主要用来缓存表单用的,一般使用组件的名称加模型的名称来组合。在本例中 第一个参数为com_zmaxbook.item
  • 第二个参数类型为字符串,当这个参数是以"< "开头的时候,那么系统默认此时第二个参数为XML表单内容的字符串。如果不是以“<”开头,那么系统会认为此时传递的是XML表单的名称。按照约定,此时系统会在组件的根目录models/forms这个目录下找到第二个参数命名的XML文件。在本例中,第二个参数为item.因此,系统会在administrator\components\com_zmaxbook\models\forms目录下寻找item.xml文件
  • 第三个参数类型为数组,control决定了生成HTML元素时的命名前缀,load_date决定了是否需要为表单加载数据。,一般这个参数保持默认即可

 现在我们知道了此时会加载administrator\components\com_zmaxbook\models\forms目录下的item.xml文件

2.3 定义xml文件

在administrator\components\com_zmaxbook\models\forms下面新建一个item.xml文件。代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<form>
	<fieldset name="main" label="详细信息">		
		<field
			type="text"
			name="title"
			label="标题"
			description="标题"
			required="true"
		/>
		<field
			type="text"
			name="author"
			label="作者"
			description="作者"
		/>
		<field
			type="text"
			name="price"
			label="价格"
		/>
		<field
			type="text"
			name="id"
			label="ID"
		/>
	</fieldset>
</form>

上面是一个标准的XML文件的定义,其中第一二行是固定的。真正的内容是从第3行开始。在Joomla中,XML节点常用的一共有3个元素

  • field  真正定义字段的地方。这个元素最主要的属性有type和name,label属性,分别用来定义类型,名称和标签
  • fieldset 用来将字段进行分组,主要的目的是提供更好的展示效果。这个元素最主要的属性有name和label。分别用来指示名称和标签
  • fields 这个的作用是用来定义字段组,与fieldset不同,这个会改变表单字段名称。后期我们再重点说明

 在上面我们定义了item.xml这个文件,可以看到,这里面有4个field元素他们的名称和编辑页面的使用到元素名称是一一对应的。

接下来要做的就是使用这个XML文件来输出编辑页面的HTML元素。说明一下,在上面的4个field中,我们将他的type属性设置为text,这个text的最终输出结果是在页面输出一个单行输入框。更多的关于field的说明,后期我们在讨论。

2.4 在视图中获得定义的表单

修改views/item/view.html.php的代码:

	public function display($tpl = null)
	{
		$this->form = $this->get("Form"); //得到form
		$this->item = $this->get("Item"); //从模型获得数据

 同之前的getItem方法一样,这次使用的是getForm方法。这样在视图中就获得需要输出的表单了。

2.5 在布局中输出表单

修改administrator\components\com_zmaxbook\views\item\tmpl\default.php文件,代码如下:

<form name="adminForm"  id="adminForm" class="form-horizontal" action="index.php" method="post" enctype="multipart/form-data">
	<!-- 编辑表单 -->
	<div class="form-horizontal">		
		<?php foreach ($this->form->getFieldsets() as $fieldset) : ?>
		<div class="row-fluid">
			<?php echo  $this->form->renderFieldset($fieldset->name);?>
		</div>
		<?php endforeach; ?>
	</div>
	<input type="hidden" name="option" value="com_zmaxbook" />
	<input type="hidden" name="task" value="" />
</form>

在上面首先通过$form对象的getFieldsets()方法获得XML中的所有fieldset数组,然后使用renderFieldset方法渲染输出,得到最终的结果。如图:

joomla_binddata表单.png

此时输出的是一个空的表单。

2.6 加载表单数据

为了让表单加载数据,我还需要修改模型类,实现一个loadFormData的方法,虽然在JModelForm中也实现了这个方法,但其默认只返回一个空的数组,这是不满足我们要求的。修改models/item.php文件,增加loadFormData方法的实现。代码如下:

	public function loadFormData()
	{
		return $this->getItem();
	}
	public function getItem()
	{
		//STEP 1:获得需要编辑记录的ID
		$app = JFactory::getApplication();
		$id = $app->input->get("id",'0','INT');

		//STEP 2:查询数据库,得到编辑记录的详情
		$db = JFactory::getDBO();
		$query = $db->getQuery(true);
		$query->select("*")->from("#__zmaxbook_item")->where("id=".$db->quote($id));
		$db->setQuery($query);
		$item = $db->loadObject();
		if(!$item) //item不存在,创建一个空的对象,以避免视图中报错
		{
			$item = new stdclass(); //同时可以做一些默认值的设置
			$item->id =0;
			$item->title="";
			$item->author="";
			$item->price=0;
		}
		 return $item;
	}

loadFormData方法返回一个数组或者对象,JForm实现了一个绑定数据的方法,其基本的逻辑就是将XML中的field和loadFormData返回的数据进行绑定,绑定的依据是二者的名字是相同的。具体的实现代码大家可以自行查看。再次刷新,结果如下:

JForm的编辑页面.png

至此,我们可以看到现在输出了和之前完全一样的编辑页面。

评论 (0)

  • 最新在前
  • 最佳在前