Wiki source code of Using ERXWOComponentContent and ERXWOTemplate
Version 8.1 by Pascal Robert on 2012/01/30 22:06
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | [[WOComponentContent>>url:http://wocommunity.org/documents/javadoc/WebObjects/5.4.2/com/webobjects/directtoweb/generation/WOComponentContentGeneration.html||shape="rect"]] is the standard WebObjects dynamic element used to allow a sub-component to obtain content from its parent component. It acts as a marker in a sub-component to indicate where that content should be rendered. The content itself is the fragment between the child's opening and closing tags in the parent. For example, consider the following pair of components: | ||
2 | |||
3 | {{code title="Parent" 0="xml"}} | ||
4 | <div> | ||
5 | <wo:Child><em>Hello, World!</em></wo:Child> | ||
6 | </div> | ||
7 | {{/code}} | ||
8 | |||
9 | {{code title="Child" 0="xml"}} | ||
10 | |||
11 | <p> | ||
12 | <wo:WOComponentContent /> | ||
13 | </p> | ||
14 | |||
15 | {{/code}} | ||
16 | |||
17 | At run-time, the content between {{code language="none"}}<wo:Child>{{/code}} and {{code language="none"}}</wo:Child>{{/code}} is passed to {{code language="none"}}Child{{/code}} and rendered in place of the {{code language="none"}}WOComponentContent{{/code}} element: | ||
18 | |||
19 | {{code title="Output" 0="xml"}} | ||
20 | |||
21 | <div> | ||
22 | <p> | ||
23 | <em>Hello, World!</em> | ||
24 | </p> | ||
25 | </div> | ||
26 | |||
27 | {{/code}} | ||
28 | |||
29 | The documentation for {{code language="none"}}WOComponentContent{{/code}} clearly describes its main limitation: | ||
30 | |||
31 | >Note: You can only have one WOComponentContent element in a given component. | ||
32 | |||
33 | We can overcome this limitation with [[ERXWOComponentContent>>url:http://wocommunity.org/wonder/latest/api/er/extensions/components/ERXWOComponentContent.html||shape="rect"]] and [[ERXWOTemplate>>url:http://wocommunity.org/wonder/latest/api/er/extensions/components/conditionals/ERXWOTemplate.html||shape="rect"]]. Firstly, the child component defines any number of regions for content from the parent using {{code language="none"}}ERXWOComponentContent{{/code}}: | ||
34 | |||
35 | {{code title="Child" 0="xml"}} | ||
36 | |||
37 | <wo:ERXWOComponentContent templateName="first"> | ||
38 | First default | ||
39 | </wo:ERXWOComponentContent><br/> | ||
40 | <wo:ERXWOComponentContent templateName="third"> | ||
41 | Third default | ||
42 | </wo:ERXWOComponentContent><br/> | ||
43 | <wo:ERXWOComponentContent templateName="second"> | ||
44 | Second default | ||
45 | </wo:ERXWOComponentContent> | ||
46 | |||
47 | {{/code}} | ||
48 | |||
49 | The value for the {{code language="none"}}templateName{{/code}} binding is arbitrary, and we use it to match the {{code language="none"}}ERXWOComponentContent{{/code}} with its {{code language="none"}}ERXWOTemplate{{/code}}. | ||
50 | |||
51 | {{code title="Parent" 0="xml"}} | ||
52 | |||
53 | <div> | ||
54 | <wo:Child> | ||
55 | <wo:ERXWOTemplate templateName="third"> | ||
56 | Some <em>stuff</em> in the third template. | ||
57 | </wo:ERXWOTemplate> | ||
58 | <wo:ERXWOTemplate templateName="first"> | ||
59 | Some <em>stuff</em> in the first template. | ||
60 | </wo:ERXWOTemplate> | ||
61 | </wo:Child> | ||
62 | </div> | ||
63 | |||
64 | {{/code}} | ||
65 | |||
66 | Note that the order of the {{code language="none"}}ERXWOTemplate{{/code}} components in the parent need not match the order of the {{code language="none"}}ERXWOComponentContent{{/code}} elements in the child (they are matched on the {{code language="none"}}templateName{{/code}} binding), and if the child finds no matching {{code language="none"}}ERXWOTemplate{{/code}}, the content within the {{code language="none"}}ERXWOComponentContent{{/code}} element itself is rendered to the output. In this example, the output would be: | ||
67 | |||
68 | {{code title="Output" 0="xml"}} | ||
69 | |||
70 | <div> | ||
71 | Some <em>stuff</em> in the first template. | ||
72 | Some <em>stuff</em> in the third template. | ||
73 | Second default | ||
74 | </div> | ||
75 | |||
76 | {{/code}} |