Summary

• Page properties (1 modified, 0 added, 0 removed)

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