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。