Decoding Mobile Form Html

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.

xh

As mentioned earlier, for each xfa object, Mobile Form will have a corresponding div. Every div has, in general, 4 attributes:

  1. 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.
  2. id: This is for internal usage. There is no guarantee for getting same id all the time. Anybody shouldn’t use it for customization.
  3. style: This is again for internal usage. XFA form specific layout styles are applied on the element using this attribute.
  4. 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
Button field, buttonfield
Check Box field, checkboxfield
Circle draw, arc
Content Area contentarea
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
Image draw, image
Line draw, line
List Box field, choicelistfield
Numeric Field field, numericfield
Password Field field, passwordfield
Print Button field, buttonfield
Radio Button field, radiofield
Rectangle draw, rectangle
Reset Button field, buttonfield
Signature Field field, signaturefield
Subform subform
Table subform
Text Field field, textfield
Text draw, text
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:

1
2
3
4
5
6
7
8
9
10
11
<form id="lcforms_xfaform_container" action="/lc/content/xfaforms/submission/default" enctype="application/x-www-form-urlencoded" method="post" target="_self">
<div class="formLoading" id="formLoadingDiv" data-xfadom="&lt;%=formDom%&gt;" data-xfahtmldom="&lt;%=firstpagedom%&gt;" data-xfaresthtmldom="&lt;%=resthtmldom%&gt;" data-xfahiddenobjdom="&lt;%=hiddenObjDom%&gt;" data-xfamergeddom="&lt;%=mergedFormDom%&gt;" data-xfalocaleset="&lt;%=localeset%&gt;" data-internalcss="&lt;%=internalcss%&gt;" data-xfarendercontext="&lt;%=renderContext%&gt;">
 
Loading...
 
<script type="text/javascript">
_initializeXfaLoading();
</script>
 
</div>
</form>

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 _initializeXfaLoading() method of xfa runtime javascript generates the actual form while loading which will look like following:

1
2
3
<form id="lcforms_xfaform_container" enctype="application/x-www-form-urlencoded" method="post" target="_self">
<div class="xfaform form1" role="form" data-xfamodel="{}"><!-- form content goes here --></div>
</form>

Now let’s see how Mobile Form represents individual XFA Objects into Html objects.
For draw elements, Mobile Form uses SVG.
The 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:

1
2
3
4
<div class="field textfield TextField1" id="_15" data-xfamodel="">
<div class="caption" role="presentation" data-xfamodel=""><svg> Text Field </svg></div>
<div class="widget textfieldwidget" data-xfamodel=""><input type="text" /></div>
</div>

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 div has a performance cost while loading the page or interacting with it. So in order to optimize the user experience, we merge div elements. For Date Field and List Box, Mobile Form uses javascript widgets to match up to widgets in PDF Form.