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

港控/mmm° 2022-02-22 11:00 296阅读 0赞

本次教程介绍了如何在XWiki使用[一分钟创建App][App] (AWM)和一些自定义的编码来实现一个[主从视图(master-detail view)][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”的应用程序，设计的表单如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 1][]

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

# 第3步：创建State应用程序 #

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 2][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 3][]

# 第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皮肤扩展][JavaScript]，我们将在当前页面(即StateCode.StateSheet)创建：\#set ($discard = $doc.use('StateCode.StateSheet'))

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 4][]

你可以复制粘贴此代码：

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的页面）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 5][]

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

\{ \{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列表是不是被更新 ![emoticon\_smile][emoticon_smile]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 6][]

查看这个页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 7][]

# 第8步：总结这一切！ #

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

[App]: https://blog.csdn.net/qq_33873431/article/details/89148589
[master-detail view]: https://en.wikipedia.org/wiki/Master%E2%80%93detail_interface
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70]: /images/20220222/c53c3da13f064532b5e58115e3c062b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 1]: /images/20220222/e926f97eff464f8690f6e337bc1004ca.png
[Link 1]: http://jira.xwiki.org/browse/XWIKI-7374
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 2]: /images/20220222/ded35a49987e4209adf181b2f8782cd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 3]: /images/20220222/d948f6c7bb8d4bf29ac9b1eca49e0b94.png
[JavaScript]: http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 4]: /images/20220222/62ca4e2fbd554928a676744d850cf06a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 5]: /images/20220222/bfc3f6ff7eb54047832d134455a8325b.png
[emoticon_smile]: http://www.xwikichina.com/xwiki/resources/icons/silk/emoticon_smile.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 6]: /images/20220222/aa36e16d40004977893c034d3dc73893.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODczNDMx_size_16_color_FFFFFF_t_70 7]: /images/20220222/c5b15bd87dda4a4f99d3bcfcafaf6c90.png
[XAR]: https://www.xwiki.org/xwiki/bin/download/Documentation/DevGuide/Tutorials/MasterDetailTutorial/WebHome/state-1.0.xar