<core:set title="More on Wrapping" />
<wact:wrap file="/wrap_more/layout.html" replaceat="content">

<p>
    The component tree generated by the use of wact:wrap is exactly the same as if you had manually
    written the wrapper html into one big file.</p>
<p>Some of the virtues of this are</p>
    <ul>
        <li> there is no (programatical) limit on placing wrappers inside other wrappers </li>
        <li> data binding expressions will work as expected </li>
        <li> components that check nesting level will work as expected </li>
    </ul>

<p>
    The contents of the file where this paragraph is stored is wrapped by 'layout.html'.
    Additionally, each example that follows is wrapped by 'example.html'.
</p>

<p>
    <strong>Hint:</strong> because the parser requires that html tags be balanced within each wact
    tag, the contents of wrapper files must balance.
</p>

<wact:wrap file="/wrap_more/example.html" insertat="content">
    <p>
        This example shows how you can identify, at runtime, components inside wrappers.
        The following two bits of content are wrapped by the same wrapper file 'box.html'.
        To manipulate the components inside the wrapper, you must get them using view id of an
        enclosing component.  In this case it is natural to give the wact:wrap tag a view id and use that.
    </p>

    <p>
        Here's the first:
        <wact:wrap wact:id="wrap1" file="/wrap_more/box.html" insertat="content">
            Wrapped by the wact:wrap tag with wact:id="wrap1", it should be set red at runtime
        </wact:wrap>

        And the second:
        <wact:wrap wact:id="wrap2" file="/wrap_more/box.html" insertat="content">
            wrapped by the wact:wrap tag with wact:id="wrap2", it should be set blue at runtime
        </wact:wrap>
    </p>
</wact:wrap>

<wact:wrap file="/wrap_more/example.html" insertat="content">
    <p>
        This is an example of nested wrapping using the same file.  Again, using the wact:id
        of the relevant component can be used to manipulate components at runtime.
    </p>
    <wact:wrap wact:id="outer" file="/wrap_more/box.html" insertat="content">
        This is in the outer wrapper.  The border should be set thicker at runtime.
        <wact:wrap wact:id="inner" file="/wrap_more/box.html" insertat="content">
            This is in the inner wrapper.  The border should be set thinner at runtime.
        </wact:wrap>
    </wact:wrap>
</wact:wrap>

<wact:wrap file="/wrap_more/example.html" insertat="content">
    <p>
        This is an example of wrapping an input by a (quite idiosyncratic) wrapper file that contains a form.  It is also an example of how one wrapper
        may contain many insertion points, of which you choose one when wrapping some content.  In this case the insertion point
        is the the component with view id = "top".
    </p>
    <!--wact:wrap file="/wrap_more/form.html" insertat="top">
        <label><strong>Wrapped input:</strong> <input name="special" type="text" size="10" /></label>
    </wact:wrap-->
</wact:wrap>

</wact:wrap>
