Mobile Form generates html snippet from XDP template designed from LiveCycle Designer. In this post, we will decode the internal structure of the generated html snippet. Once you are familiar with the html structure, you can customize it at will.
Generally, Mobile Form generates an html <div> element for every object of XFA form maintaining the same hierarchical structure. Here is the html snippet source of the xfa form and the red lines shows the 1-1 mapping between xfa objects and html.
As mentioned earlier, for each xfa object, Mobile Form will have a corresponding div. Every div has, in general, 4 attributes:
- class: This is the attribute that should be used for customization. Mobile Form generates many different class selectors based on the various attributes of XFA object. One can use these class selectors to specify styles on the objects.
- id: This is for internal usage. There is no guarantee for getting same id all the time. Anybody shouldn’t use it for customization.
- style: This is again for internal usage. XFA form specific layout styles are applied on the element using this attribute.
- data-xfamodel: This is again for internal usage. Mobile Form keeps xfa form specific data in this data attribute. One should not temper with this to ensure smooth processing.
All set for customizing the individual html elements of Mobile Form, well, you need to know what all class selectors are applied on each div element. Mobile Form first adds a class for type of objects like subform, field, draw, area etc, then subtype of object like if it a field then what type of field: textfield, choicelist etc then the name of the object. You will find these 3 class selectors on each and every html div element corresponding to XFA objects. Here is the complete list:
|XFA Object||Class Selectors in Html div|
|Check Box||field, checkboxfield|
|Date Field||field, datefield|
|Date/Time Field||field, datetimefield|
|Decimal Field||field, numericfield|
|Drop-down List||field, choicelistfield|
|Email Submit Button||field, buttonfield|
|Image Field||field, imagefield|
|HTTP Submit Button||field, buttonfield|
|List Box||field, choicelistfield|
|Numeric Field||field, numericfield|
|Password Field||field, passwordfield|
|Print Button||field, buttonfield|
|Radio Button||field, radiofield|
|Reset Button||field, buttonfield|
|Signature Field||field, signaturefield|
|Text Field||field, textfield|
|Time Field||field, timefield|
Besides the above class selectors, Mobile Form adds the name of the object as a class selector also. This is very useful if you want to apply some customizations to a particular field or draw element.
I will now backup a bit and describe how Mobile Form generates an html form from an XFA Form.
The initial html snippet generated by Mobile Form looks like the following with all the jsp variables <%=@@variables@@%> expanded into encoded html strings, as soon as you open any form in the browser:
Here formAction is the submitUrl specified in the request parameter. For detail on the request parameters refer Mobile Form. The <div> at line 2 contains all the data required to show a form. The
Now let’s see how Mobile Form represents individual XFA Objects into Html objects.
For draw elements, Mobile Form uses SVG.
text objects are represented using SVG Text. We don’t use html text because the layout generated by the html text doesn’t really match up to the text layout by XFA. SVG Text gives more control to the author by not doing auto layout. The “text” element of SVG has
textLength attribute that gives finer control over the length of the text object. SVG is the primary reason why Mobile Form looks closer to PDF Form. Similarly line, arc and rectancle are represented by SVG only. Only The
image object is represented using html5 <img>.
XFA Field object is wrapped in one html
<div> that contains two different
<div>, one each for caption and widget, something like the following:
Field caption is represented in SVG just like the draw text object whereas the field widget, the interactive area or the area where user can click and fill the data, is represented using
html5 <input>. If caption is not present on the field, Mobile Form not only omits the
caption div but also merge
widget div and
field div. Every