Html Dialog View Types
An Html Dialog is either a page or a component. Both are complete Html Dialogs and have therefore their own view, model (data class) and controller (logic). This concept allows to build up component oriented UI design.
Note
The templates for page and component are configured in the Html Dialog Preferences.
Html Dialog Page
An Html Dialog page represents a full page that is finally displayed in the web browser. Therefore a page can be opened by a User Dialog.
Html Dialog Layouts
An Html Dialog Page uses an Html Dialog Layout. An Html Dialog Layout is the concept of a master page that defines a common layout for a number of similar dialogs. An Html Dialog Page references a layout and implements defined parts of it. For example the layout provides the header- and footer-area whereas the content-area is individually implemented on each dialog.
Axon.ivy brings a set of predefined layouts. The layout (together with the view type) is chosen in the New User Dialog Wizard.
For more information about templating have a look at the official JSF documentation.
Custom Html Dialog Layouts
Axon.ivy is not limited to the usage of the built-in Html Dialog Layouts. Custom layouts can be added with small effort.
In order to add a custom layout - which is a normal .xhtml file - it needs to be stored into the folder web content folder of the project. In doing so, the custom layout can now be referenced as a layout inside an Html Dialog.
To make the custom layout show up in the
New User Dialog Wizard
(for selection of the view type),
it must be stored in the folder webContent/layouts
of the project.
The folder structure of webContent/layouts
should follow the
following contract:
webContent/layouts/[MyTemplateName].xhtml
webContent/layouts/[A sub folder]/[for additional template content]
Note
A layout can be anywhere in the webContent
folder, but as mentioned
before we recommend to store it in the webContent/layouts
folder.
Please don’t store it into the webContent/view
folder. This location
is intended for Static JSF Pages, which would mean that you could
call the layout directly.
Html Dialog Component
A component can be embedded into other Html dialog or again in another component.
View Definition
The view consists of two parts, an interface and the implementation. The
interface is constituted by a
<cc:interface componentType="IvyComponent">
tag and is followed by
an optional list of component attributes. The implementation part starts
with a <cc:implementation>
tag and the component attributes can be
accessed with the expression cc.attrs.attributeName
The following code fragment defines an example Html Dialog component:
<cc:interface componentType="IvyComponent">
<cc:attribute name="caption" />
</cc:interface>
<cc:implementation>
<p:fieldset legend="Address Component">
<h:outputLabel value="#{cc.attrs.caption}" />
<h:panelGrid columns="2">
<p:outputLabel value="Street" for="street" />
<p:outputLabel value="Country" for="country" />
<p:inputText value="#{data.address.street}" id="street" />
<p:inputText value="#{data.address.country}" id="country" />
</h:panelGrid>
</p:fieldset>
</cc:implementation>
Usage
A component could be inserted with the <ic:
-tag. E.g.
<ic:my.namespace.ComponentName ... />
.
Tip
In the Html Dialog Editoryou have pretty nice tool support for inserting components. You can drag and drop an available component from the palette. You can select one from the auto completion popup list and you can define required attributes in the properties view.
Start Method
Optionally you can define the start method that should be used to start
the embedded component with the attribute startMethod
. If you do not
define the start method, then a default start method will be used.
Parameters of the start method can be defined by adding them as named
attributes. Parameters are mapped by name, i.e. an attribute of the tag
will be mapped to the start method parameter with the same name.
Furthermore you can set the component attributes that you defined in the
interface of the component by simply adding them as attributes of the
tag too.
Note
You can not override start methods. So do not use multiple start methods with the same name but different parameter lists.
See the following code fragment that inserts a Html Dialog component.
The start method start(data.person.BillingAddress:address)
will be
used, the current value of the data class property billingAddress
will be used as parameter for the start method and the component
attribute caption
will be set to the value “Billing Address”
<h:panelGrid columns="2">
<ic:ch.ivyteam.htmldialog.demo.component.AddressComponent
startMethod="start" address="#{data.person.billingAddress}"
caption="Billing Address">
</ic:ch.ivyteam.htmldialog.demo.component.AddressComponent>
</h:panelGrid>