Introduction to Customizing HTML Workspace

HTML Workspace provides capabilities to modify the presentation semantics and functionality of its interface. The types of customizations to change the style, layout, formatting, branding, and core functionality are described below.

HTML Workspace supports a wide variety of customizations to update the layout of the user interface, its appearance, functionality, and much more. The customizations involve updating one or more of the following:

• Appearances of the user interface
• Functionality using semantic customizations
  
• Reusing HTML components in other applications

User interface changes

You can change the appearance, layout, and other presentation semantics of HTML Workspace. Change Workspace by customizing the CSS, HTML templates, and JavaScript™ files. All the default files are provided in the default installation.

The most commonly applicable steps are covered in Generic steps for HTML Workspace customization. For specific examples of such customizations, including the detailed steps, see the related articles at the end of this article.

Understanding the style sheet

Before customizing Workspace, make yourself familiar with the default style sheet supplied with Adobe® LiveCycle® at /libs/ws/css/style.css.

To customize the Workspace, it is recommended that you make yourself familiar with the existing style sheet, style.css, located in /libs/ws/css folder. A few prominent components are described below.

CSS

The appearance of HTML Workspace borrows its appearance from a CSS. By customizing the CSS, you can change the presentation semantics of Workspace like fonts, colors, branding, and layout.

The top-level steps for CSS customization are:

• Create a CSS file.
  
• Add style items to this CSS. See Understanding CSS Styles for more information.
• Update its references in html.jsp.

For the exact steps to do these customizations, see Generic steps for HTML Workspace customization. The CSS file shipped with HTML Workspace is at /libs/ws/css/. For CSS-related customizations, use the Ship Package. For specific examples of CSS-related customizations, see the related Help topics at the end of this article.

Image

You can customize the HTML Workspace to add avatars of users or to add the logo of your organization. For these customizations, use Ship Package.

The top-level steps for customizations to the images are:

• Install and configure WebDAV.
• Add new images.
• Add new styles corresponding to the added images.
• Link to the new CSS file in html.jsp file.

To get started with customizing the images in HTML Workspace, follow the Generic steps for HTML Workspace customization. For specific examples of image-related customizations, see the related Help topics at the end of this article.

HTML template

HTML templates help define the appearance and the layout of the Workspace user interface. By updating the default HTML templates you can customize the layout default user interface.

The top-level steps for customizations to the HTML template are:

• In a user-created folder, make copies of the required default files.
• Add new templates in user-defined folder.
• Make relevant updates to the copied files like, the path of the new template.

For specific examples of such customizations, see the Help topics provided at the end of this article. Choose between the Ship Package or the Dev Package, depending on the template to be customized.

Semantic changes

To modify the HTML Workspace functionality, change the JavaScript source code. Modifications in the core functionality are labeled as Semantic changes. You modify models, view, and templates provided as part of the source code of HTML Workspace.

The top-level steps to do semantic changes to modify the functionality of HTML Workspace are:

• In a user-created folder, make copies of the appropriate default files.
• Add new models and views in the user-defined folder.
• Make relevant updates like updating paths of newly added models and views in the default JavaScript files.
• Minify the package to optimize the performance.

For more conceptual information about the components that are part of the source code, see the Description of reusable components. For these customizations, use the Dev Package.

Reusable components

As HTML Workspace is a component-based software, it can be easily customized and reused. You can easily integrate the Workspace components with your web applications.

For more conceptual information, see the Description of reusable components and for instruction about using the components, see Integrating HTML Workspace components in web applications.

Building HTML Workspace code

SDK package

The package contains the source code of HTML Workspace. The package is available at [LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip.

It is primarily meant for customizations, as it provides the capability to generate:

• CRX packages for Ship, Debug, and Dev profiles (mentioned below in CRX packages).
• Minified version of customized code (for semantic changes).

WS content

• client-pkg:
  • src - Contains artifacts needed to create CRX nodes.
  • pom.xml - Script to build deploy packages for various profiles WS-Deploy Package
• client-html:
  • assembly - Contains zip.xml used by script for creating HTML Workspace SDK.
  • src/main/webapp -
    • css - Contains style sheets for HTML Workspace.
    • images - Contains images used in HTML Workspace.
    • js:
      
      • libs - Contains all third-party libraries used in HTML Workspace.
      • licenses - Contains licenses for HTML and JS files as well as code to prefix these licenses to respective source files.
      • minifier - Used for combination, minification, and uglification of customized javascript code.
      • resourcejs_optimizer - Used for combination, minification, and uglification of javascript source.
      • resource_generator - Used for generating register.js and modelcontrollerpath.js.
      • runtime:
        
        • initializer - Contains initializer.js used to initialize backbone views and models used in HTML Workspace.
        • models - Contains backbone models of all components present in HTML Workspace.
        • routes - Contains javascript files and HTML files which loads start process, todo, tracking, and preferences in HTML Workspace.
        • services - Contains service.js used in HTML Workspace. All the server calls are made through service.js.
        • templates - Contains all templates, that is, HTML files of all views in HTML Workspace.
        • util - Contains all utility files (javascript) which are used in HTML Workspace.
        • views - Contains backbone views of all components in HTML Workspace.
      • main.js
      • router.js
    • libs/ws: pdf.html and pluginPing.pdf are used for loading PDF forms in HTML Workspace and WSNextAdapter.swf is used to load SWF forms and Guides in HTML Workspace.
    • locales:
      
      • de-DE - Contains translation.json for German.
      • en-US - Contains translation.json for English.
      • fr-FR - Contains translation.json for French.
      • ja-JP - Contains translation.json for Japanese.
      • html.jsp - Contains code to find out current browser locale.
    • html.jsp
    • GET.jsp

CRX Package

CRX package can be deployed on the CRX™ repository. It is available at [LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip.

This package can be built using the three profiles described below.

Ship Profile

Command

• mvn clean -P Ship install on client-pkg folder of Source package shipped to client.
• Ship profile command execution works only on a 64-bit JVM.
  

WS content

• css - Contains style.css, ie.css, and jquery-ui.css.
• images - Contains all images.
• js:
  
  • libs:
    
    • require - Contains require.js.
    • jqueryui - Contains jquery.ui.datepicker.ja.js.
  • runtime:
    
    • templates - Contains all templates, that is, HTML files of all components in HTML Workspace.
  • main.js (combined, minified, and uglified).
  • registry.js
• libs:
  
  • ws - Contains pluginPing.pdf, pdf.html, and WSNextAdapter.swf.
• Locale - Contains .content.xml.
• locales:
  
  • de-DE - Contains translation.json for German.
  • en-US - Contains translation.json for English.
  • fr-FR - Contains translation.json for French.
  • ja-JP - Contains translation.json for Japanese.
  • html.jsp - Contains code to find out current browser locale.
• Index - Contains .content.xml
• profile - Contains offline.jsp.
• GET.jsp
• html.jsp
• content.xml
• _rep_policy.xml
  

Debug Profile

Command

• mvn clean -P Debug install on client-pkg
• Debug profile command execution works only on 64-bit JVM.
  

WS content

• css - Contains style.css, ie.css, and jqueri-ui.css.
• images - Contains all images.
• js:
  
  • libs:
    
    • require - Contains require.js.
    • jqueryui - Contains jquery.ui.datepicker.ja.js.
  • runtime:
    
    • templates - Contains all templates, that is, HTML files of all components in HTML Workspace.
  • main.js (combined).
  • registry.js
• libs:
  
  • ws - Contains pluginPing.pdf, pdf.html, and WSNextAdapter.swf.
• Locale - Contains .content.xml.
• locales:
  
  • de-DE - Contains translation.json for German.
  • en-US - Contains translation.json for English.
  • fr-FR - Contains translation.json for French.
  • ja-JP - Contains translation.json for Japanese.
  • html.jsp - Contains code to find out current browser locale.
• Index - Contains .content.xml
• profile - Contains offline.jsp.
• GET.jsp
• html.jsp
• content.xml
• _rep_policy.xml
  

Dev Profile

Command

mvn clean -P Dev install on client-pkg

WS content

• css - Contains style.css, ie.css, and jqueri-ui.css.
• images - Contains all images.
• js:
  
  • libs - Contains all libraries used in HTML Workspace.
  • require - Contains require.js
  • jqueryui - Contains jquery.ui.datepicker.ja.js
  • runtime:
    
    • initializer - Contains initializer.js and modelcontrollerpath.js.
    • models - Contains models of all components in HTML Workspace.
    • routes - Contains javascript files and HTML files which loads start process, todo, tracking, and preferences in HTML Workspace.
    • services - Contains service.js used in HTML Workspace.
    • templates - Contains all templates, that is, HTML files of all components in HTML Workspace.
    • util - Contains all utility files (JavaScript) which are used in HTML Workspace.
    • views - Contains views of all components in HTML Workspace.
  • main.js
  • registry.js
  • router.js
• libs:
  
  • ws - Contains pluginPing.pdf, pdf.html, and WSNextAdapter.swf.
• Locale - Contains .content.xml.
• locales:
  
  • de-DE - Contains translation.json for German.
  • en-US - Contains translation.json for English.
  • fr-FR - Contains translation.json for French.
  • ja-JP - Contains translation.json for Japanese.
  • html.jsp - Contains code to find out current browser locale.
• Index - Contains .content.xml
• profile - Contains offline.jsp.
  
• GET.jsp
• html.jsp
• content.xml
• _rep_policy.xml