<
From version < 115.1 >
edited by Marius Dumitru Florea
on 2020/05/18
To version < 116.1 >
edited by Marius Dumitru Florea
on 2020/05/18
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -131,33 +131,74 @@
131 131  ## You can modify this page to customize the presentation of your object.
132 132  ## At first you should keep the default presentation and just save the document.
133 133  
134 -#set($class = $doc.getObject('FAQ.FAQClass').xWikiClass)
135 -#foreach($prop in $class.properties)
136 - ; $prop.prettyName
137 - : $doc.display($prop.getName())
138 -#end
134 +## We have to use wiki=true because $doc.display() can produce wiki syntax.
135 +{{html wiki="true" clean="false"}}
136 +## Load the JavaScript code required to make the object properties editable in-place.
137 +#set ($discard = $xwiki.jsfx.use('uicomponents/edit/editableProperty.js', {
138 + 'forceSkinAction': true,
139 + 'language': $xcontext.locale
140 +}))
141 +#set ($editing = $xcontext.action == 'edit')
142 +## The object to display.
143 +#set ($xobject = $doc.getObject('FAQ.FAQClass'))
144 +## The class that describes the object properties.
145 +#set ($xclass = $xobject.xWikiClass)
146 +## Make sure the following display* method calls use the right object.
147 +#set ($discard = $doc.use($xobject))
148 +## Using the xform vertical form layout.
149 +<div class="xform">
150 + <dl>
151 + #foreach ($property in $xclass.properties)
152 + <dt #if (!$editing && $hasEdit)
153 + class="editableProperty"
154 + #set ($xobjectPropertyReference = $xobject.getProperty($property.name).reference)
155 + data-property="$escapetool.xml($services.model.serialize($xobjectPropertyReference))"
156 + data-property-type="object"#end>
157 + ## This must match the id generated by the $doc.display() method below.
158 + #set ($propertyId = "${xclass.name}_${xobject.number}_$property.name")
159 + <label#if ($editing) for="$escapetool.xml($propertyId)"#end>
160 + $escapetool.xml($property.translatedPrettyName)
161 + </label>
162 + ## Support for specifying a translation key as hint in the property definition.
163 + <span class="xHint">$!escapetool.xml($services.localization.render($property.hint))</span>
164 + </dt>
165 + <dd>$doc.display($property.name)</dd>
166 + #end
167 + #if (!$xclass.properties || $xclass.properties.size() == 0)
168 + ## Keep the empty definition term in order to have valid HTML.
169 + <dt></dt>
170 + <dd>$escapetool.xml($services.localization.render('xclass.defaultObjectSheet.noProperties'))</dd>
171 + #end
172 + </dl>
173 +</div>
174 +{{/html}}
139 139  {{/velocity}}
140 140  {{/code}}
141 -)))Let's take a moment now and analyze this code:(((
142 -* The first line retrieves the ##FAQ.FAQClass## from the wiki
143 -* Then we iterate through all its properties and display their values for the current document in a definition list.
144 144  
145 -As we mentioned, XWiki provides a mechanism that helps us create sheets used for both View and Edit mode.
146 -This is the display function used in the line:
178 +Let's take a moment now and analyze this code:
147 147  
180 +* first, it loads the JavaScript required for in-place editing
181 +* then it retrieves the FAQ object from the current page and the FAQ class defintion
182 +* then it iterates through all the FAQ class properties displaying:
183 +** the translated pretty name
184 +** the translated hint
185 +** the value from the FAQ object in view mode, or the form field used to input or modify the value in edit mode
186 +* it uses a definition list to display the FAQ object, following the [[Vertical Form>>xwiki:Documentation.DevGuide.FrontendResources.VerticalForms.WebHome]] layout
187 +
188 +As we mentioned, XWiki provides a mechanism that helps us create sheets used for both view and edit mode. This is the ##display## function used in the line:
189 +
148 148  {{code language="none"}}
149 -: $doc.display($prop.getName())
191 +<dd>$doc.display($property.name)</dd>
150 150  {{/code}}
151 151  
152 -It detects the current mode (Edit or View) and displays the property referenced by its argument as the mode dictates:
194 +It detects the current mode (edit or view) and displays the property referenced by its argument as the mode dictates:
153 153  
154 -* In view mode it will display the value of the property
155 -* In edit mode it will display a form field that will allow the user to edit it
196 +* in view mode it will display the value of the property
197 +* in edit mode it will display a form field that will allow the user to edit it
156 156  
157 157  This way we can use a single Design Sheet to both display and edit our FAQ entries. See the [[XWiki API reference>>platform:DevGuide.API]] and [[XWiki Scripting>>platform:DevGuide.Scripting]] pages for more details about this.
158 -
159 -* Click "Save & View"
160 160  )))
201 +* Click "Save & View"
161 161  
162 162  = Create the Authoring Template =
163 163  

Get Connected