xwiki开发者指南-主从视图教程

本次教程介绍了如何在XWiki使用一分钟创建App (AWM)和一些自定义的编码来实现一个主从视图(master-detail view)。更具体地说，我们希望有一个拥有2个字段的HTML表单，当我们选择一个字段的一个值，另一个字段基于第一个字段的选择自动更新它的值。

我们将采取州和城市的例子：一个字段将让用户选择一个州(State)，另外一个字段选择一个城市(City)。

• 第1步：创建一个State Data应用程序
• 第2步：为State Data应用程序添加条目
• 第3步：创建State应用程序
• 第4步：修改State Class Sheet
• 第5步：添加一个JavaScript皮肤扩展
• 第6步：创建一个JSON服务
• 第7步：在State应用程序创建一个条目
• 第8步：总结这一切！

第1步：创建一个State Data应用程序

第一步使用AWM来创建一个应用程序来允许输入一些州和城市。创建一个名为“StateData”的应用程序，设计的表单如下图所示：

第2步：为State Data应用程序添加条目

我们为State Data应用程序添加5条条目，如下图所示：

注意：XWiki 当前要求我们要为每个条目提供一个名字，所有我们使用entry1到entry5的名字。

第3步：创建State应用程序

我们再次使用AWM来创建一个State应用程序来完成我们的主从视图的实现。

在设计视图，开始添加一个Database List类型的State字段：

现在，我们通过创建StateDataCode.StateDataClass来链接第一个State Data应用程序的state字段。

然后添加一个Static List类型的City字段：

第4步：修改State Class Sheet

让我们修改StateCode.StateSheet来实现动态显示City HTML Select。修改默认内容：

{{velocity}}

{{html wiki="true"}}

#set ($discard = $doc.use('StateCode.StateSheet'))

#set ($discard = $services.localization.use('document', 'StateCode.StateTranslations'))

(% class="xform" %)

(((

 <dl>

   <dt><label for="StateCode.StateClass\_0\_state">$escapetool.xml($doc.displayPrettyName('state', false, false))</label></dt>

   <dd>$doc.display('state')</dd>

   <dt><label for="StateCode.StateClass\_0\_city">$escapetool.xml($doc.displayPrettyName('city', false, false))</label></dt>

   <dd>

      #if ($xcontext.action == 'edit')

        $xwiki.jsx.use('StateCode.StateClass')

       <select id="StateCode.StateClass\_0\_city" name="StateCode.StateClass\_0\_city" size="1">

         <option></option>

       </select>

      #else

        $!doc.getValue('city')

      #end

   </dd>

 </dl>

)))

{{/html}}

{{/velocity}}

注意，我们使用一个JavaScript皮肤扩展，我们将在当前页面(即StateCode.StateSheet)创建：#set ($discard = $doc.use('StateCode.StateSheet'))

第5步：添加一个JavaScript皮肤扩展

在对象编辑器里编辑StateCode.StateSheet，添加一个XWiki.JavaScriptExtension对象：

你可以复制粘贴此代码：

require('jquery', function ($) {

    var stateSelect = $('#StateCode\.StateClass_0_state');

    var citySelect = $('#StateCode\.StateClass_0_city');    

    var jsonDocument = new XWiki.Document('WebHome', 'StateCode.JSON');

    stateSelect.change(function() {

      $.get(jsonDocument.getURL('get', 'outputSyntax=plain&state=' + stateSelect.val()), function(json) {

        var output = '';

        $.each(json, function(index, value) {

          output += '<option>' + value + '</option>';

        });

        citySelect.empty().append(output);

      });

    });

});

请注意，我们希望有一个名为StateCode.JSON.WebHome的页面通过传递state来返回包含city值列表来的一些JSON。我们将在下一步中添加。

除了可以创建自己的页面来返回JSON，我们也可以复用State应用程序的Livetable结果页面。这将避免创建一个新的页面，从而跳过第6个步骤。这里有一个如何调用和过滤State字段的例子：

var jsonDocument = new XWiki.Document('StateDataLiveTableResults', 'StateDataCode');

var url = jsonDocument.getURL('get', 'outputSyntax=plain&classname=StateDataCode.StateDataClass&collist=state%2Ccity&state=' + stateSelect.val())

第6步：创建一个JSON服务

创建一个名为StateCode.JSON.WebHome的页面（只需在StateCode空间添加一个名为JSON的页面）：

你可以复制粘贴以下为内容：

{{velocity}}

#if($xcontext.action == 'get' && "$!{request.outputSyntax}" == 'plain')

  $response.setContentType('application/json')

#end

#set($list = [])

#set ($state = $request.state)

#if ("$!state" != '')

  #set ($itemList = $services.query.xwql("where doc.object(StateDataCode.StateDataClass).state like :state").bindValue('state', $state).execute())

  #foreach ($item in $itemList)

    #set ($itemDoc = $xwiki.getDocument($item))

    #set ($discard = $list.add($itemDoc.getValue('city')))

  #end

  $jsontool.serialize($list)

#end

{{/velocity}}

你已经完成所有设置！让我们体验下吧！

第7步：在State应用程序创建一个条目

导航回state应用程序，创建一个条目，当你改变state时，验证city列表是不是被更新 

​

查看这个页面：

第8步：总结这一切！

这里有一个XAR文件包含了本次教程的所有步骤，你可以导入到你的XWiki。