Appendix C - Mobile Document Authoring Tools
Adobe’s Dreamweaver
Dreamweaver is a commercial tool that does HTML and CSS composition. It also supports composing XSL with syntax coloring and help and has a feature to run XSL with an XML data file for testing from the editor tools. Here is an example of the Life quote as an HTML document under development in Dreamweaver:
Here is an example of Dreamweaver’s coloring of XSL syntax for the Life example mobile document shipping with Documaker where the HTML from above has been pasted in to XSL Templates for transformation testing:
If you select the test tool from the XSL source, the following warning message is displayed:
Select an XML source:
The output for testing in the default browser is shown in the following figure:
Note: Oracle does not require and neither endorses or discourages the use of Dreamweaver when creating Snippets for Documaker Mobile use.
Oracle JDeveloper
JDeveloper is a tool available from Oracle as a general integrated development environment (IDE) for development with Oracle products including deep capabilities for Web development. It has features for editing HTML, XSL, CSS, and XML including rich syntax color coding, with intelligence on the structure of XSL, HTML, and CSS including statement completion help and an outline view of the documents. Here is the prototype Quote output in the HTML editor.
Here is XSL in JDeveloper:
With support for XML testing:
And support for XML editing:
Note: Oracle does not require and neither endorses or discourages the use of JDeveloper when creating Snippets for Documaker Mobile use.
Eclipse's IDE for Java EE Developers
The Eclipse packaging for Java EE developers is a widely used free open source product that provides almost as much functionality as Dreamweaver does for Documaker mobile document development. This includes a dedicated XML editor.
Ability to also view content through a text editor:
It has a dedicated editor for XSL and HTML (this is the Life quote example document):
Eclipse provides rich syntax color coding, with intelligence on the structure of XSL, HTML, and CSS including statement completion help and an outline view of the HTML document.
Eclipse also provides a special editor for HTML syntax authoring with a level of web preview.
Note: Oracle does not require and neither endorses or discourages the use of Eclipse when creating Snippets for Documaker Mobile use.
Notepad++ is a Windows only free pure text editor with rich support for syntax highlighting. It has no preview capability or deep syntax help like Dreamweaver or Eclipse:
Note: Oracle does not require and neither endorses or discourages the use of Notepad++ when creating Snippets for Documaker Mobile use.
Microsoft’s Expression
Expression is a commercial product available for free download from Microsoft®. This is a pure HTML and CSS editor with tuning for Microsoft's NET environments. It includes both preview and syntax helpers for HTML and CSS. There is no functionality within Expression for handling XSL or XML.
Note: Oracle does not require and neither endorses or discourages the use of Microsoft's Expression when creating Snippets for Documaker Mobile use.
Packaging and Deployment of Mobile
When using Documaker Mobile, a single MRL (Assembly Line) may generate output in more than one layout. You may choose to have a single layout (shell or master snippet) for all forms in the Master Resource Library, or, more likely you may define a different master snippet per formset (KEY/KEY2). This is done using Documaker Studio to override the master snippet name associated with the Key 2 value in the Application Definition. Each resource also can be associated with a custom snippet but most often there will be no need to create custom definitions for any snippet types other than the master. Each master snippet will typically reference an XSLT definition when XML is used to create output, as needed per formset associated to the master snippet so that a unique mobile presentation can defined via the referenced XSLT for the formset (KEY1/KEY2).
References
The master and individual object snippet files are stored in a location referenced by the MROLIB path definition. These files must be included in the deploy of the master resource library as part of the overall configuration. These files are NOT stored within the database tables for the MRL. Additionally, some of these files may also need to be made accessible to the web portal used to display/render the mobile output. Which means, any files referenced in mobile presentation output (e.g. CSS, WebFonts, Images, JavaScript frameworks, etc) need to be placed in a location that can be resolved to from the mobile output web server. The mobile output generated from Documaker should also be designed to reference external items that are managed and version controlled by the web portal, or its content server, being used to distribute the mobile document. This way the content management system (CMS) under the web portal will be responsible for making sure the correct versions of reference external items are delivered with the mobile content to consumers.
It is recommended to use existing resources which are already part of your web or mobile offering. If you need a style sheet to reference fonts used in Documaker for the mobile presentation, you can use Studio’s Generate CSS option to have the Studio drop a text file that is really an HTML formatted file with embedded CSS:
Some assembly will be required to pull the CSS rules you want to use from the file produced by Studio into your mobile presentation. Consider the file below as an example:
Typically the first two lines of HTML syntax and also the third line including the “body” rule can be removed from the file to form pure CSS. Also, the last line containing HTML syntax can be removed. The remaining lines are CSS rules where the font-size and position attributes can be adjusted or removed leaving font faces, styles and weight attributes such as this:
.TFID912 {font-family: "Pdf417","arial","times"; font-style: normal; font-weight: normal;}
.TFID24004 {font-family: "Albany AMT","arial","times"; font-style: normal; font-weight: normal;}
.TFID24104 {font-family: "Albany AMT","arial","times"; font-style: normal; font-weight: bold;}
.TFID24204 {font-family: "Albany AMT","arial","times"; font-style: italic; font-weight: normal;}
.TFID24304 {font-family: "Albany AMT","arial","times"; font-style: italic; font-weight: bold;}
The CSS rule names listed by the Documaker Studio font export are matched to the values produced by the MRO for the “documaker.font.id” replacement tags by taking the documaker.font.id value and appending “TFID”. The default snippets place the value of the documaker.font.id replacement tag in an “FNTID” attribute that is emitted for text snippets to form CSS style class name references that match the style rule names exported by the Documaker Studio’s font CSS export function.
Mobilizing Existing Formsets
Existing Documaker formsets contain publishing objects that are already named with a meaning that supports mapping and editing. However, for Documaker Mobile use, it is advisable for the Document Author and the Mobile Author to work together to identify other objects that must be named for reference within the mobile context. These items may be:
- Charts
- Images
- Tables
- TextAreas
Adding names to objects will allow the Mobile Author to layout the data mapping logic (XSLT or JavaScript/jQuery) to consistently locate needed page based document content in the assembled output produced by Documaker’s Mobile Responsive Output (MRO) driver.
The default snippets delivered with Documaker mobile will work with any existing Documaker formset to produce a mobile presentation that helps to identify unnamed publishing objects, so they can be named for use in mobile output, and objects with names that are not unique, so they can be renamed for use in mobile output. For instance, here is the default mobile output for the mortgage life insurance example that is used earlier in this document:
When enabling existing documents for use in mobile, there is a step where the mobile design for the document is implemented in XSL that consumes the XML results produced by the MRO via the snippets to compose the document’s mobile representation. To assist the process, an accelerator tool is provided that consumes the default XML results produced by the MRO via the default snippets and generates a starter XSL stylesheet. The starter XSL stylesheet has template syntax defined for each form that is represented in the default XML results. Syntax for accessing each named field, text, and bitmap element is found in the default XML results. The accelerator is an XSL stylesheet that produces an XSL stylesheet. It is named “xformstarter.xsl” and can be found in the resources directory under the MRO snippet directory.
To create a starter XSL stylesheet, run the xformstarter.xsl providing it the default XML results from the default snippets. Here is what the resulting starter XSL stylesheet looks like for the example mortgage life insurance documents from the enterprise MRL shipping with Documaker in JDeveloper:
Here is what the starter XSL stylesheet looks like in Eclipse:
This starter XSL stylesheet’s structure triggers its transformation templates based on encountering named forms in the XML output:
This is a starter XML structure designed to accelerate the development of an XSL stylesheet for mobile output creation. It helps by providing XPATH syntax for processing the data hierarchy produced by the default snippets with syntax for locating Forms, Fields, Texts, Bitmaps, Tables and Charts in the MRO output. Once the XSL stylesheet has been created the next step is to load it with the HTML required for your mobile design as described in Step 6 of the Delivering Mobile Output topic in this document.
If the resulting starter XSL stylesheet is used without modification to transform the default snippet output into HTML, it produces a mobile document as seen in the image below. This image was produced for the example Mortgage Live Insurance documents from the enterprise MRL that ships with Documaker.
