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.

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:

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, as soon as you open any form in the browser:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form action="<%=formAction%>" id="lcforms_xfaform_container" method="post" enctype="application/x-www-form-urlencoded" target="_self">
    <div id="formLoadingDiv" class="formLoading"
       data-xfadom="<%=formDom%>"
       data-xfahtmldom="<%=firstpagedom%>"
       data-xfaresthtmldom="<%=resthtmldom%>"
       data-xfahiddenobjdom="<%=hiddenObjDom%>"
       data-xfamergeddom="<%=mergedFormDom%>"
       data-xfalocaleset="<%=localeset%>"
       data-internalcss="<%=internalcss%>"
       data-xfarendercontext="<%=renderContext%>">
       <p>Loading...</p>
       <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
4
5

<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
5
6
7
8
9
10

<div data-xfamodel="" class="field textfield TextField1" id="_15" style="">
	<div data-xfamodel="" class="caption" style="" role="presentation">
		<svg class="" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
			<text class="" lengthAdjust="spacingAndGlyphs" x="0px" xml:space="preserve" y="19px" textLength="81px">Text Field</text>
		</svg>
	</div>
	<div data-xfamodel="" class="widget textfieldwidget" style="">
		<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.