Web Application Customization Properties

Use the Customization tab on the Project Properties dialog box to configure various aspects of the generated Web application. You can choose from different themes, create your own, or specify a directory location containing customized content which you can use for layouts and other display elements.

The Customization Properties panel provides access to two methods you can use to customize Web applications:

See Customizing Verastream Web Applications for a complete overview of the customization options available to you, including information on custom pages. You use custom pages to control the content shown for recognized entities, unrecognized screens, and procedures.

Cascading Style Sheets (Themes)

Cascading Style Sheets (CSS) is the industry standard for Web site styling. Web Builder uses CSS files to create themes, which give your generated Web application a particular look and feel. You can choose from a variety of provided themes or create a new one.

How do Cascading Style Sheets and themes work?

When Web Builder generates a Web application it consists primarily of JSP and ASP pages. These pages send to the browser XHTML, which is marked up with IDs, Classes, and Divs that are referenced in CSS files. A theme is simply a collection of CSS and related files that tell the browser how to render the XHMTL for the user. When you choose a theme, you select which CSS files to apply to your Web application. You can choose an existing theme or create one of your own.

To choose a Host Integrator theme

  1. In Web Builder, select the Web application model you want to customize.
  2. In the Project Properties dialog box, select either the .NET 2.0 or the Java Web application option. In the right pane, three tabs display. Click Customization.
  3. From the Theme drop down list, select the theme you want applied to your Web application. Click to preview your selection.
  4. Click OK.

To create a new theme

  1. Locate the <vhi-install>/lib/webbuilder/themes directory. Determine which theme is the most similar to the look and feel you want for your Web application and copy it.
  2. Rename and paste this folder into the same themes directory.
  3. Update the values in the CSS files and refresh the page in your Web browser. By default, all generated Web pages import a file, <selected theme name>/main.css. In this file you can either specify your styling directly or import as many additional CSS files as you need. You can modify the theme files by either:
    • Generating your Web application using the theme you are creating, then locating the theme folder in the deployed Web application location, opening the appropriate CSS file, and making the appropriate changes using a CSS or text editor. In Java, theme folders are located in <vhi-install>/servletengine/webapps/<Web-app name>/themes. In .NET theme folders are located in <Inetpub>/wwwroot/<Web application name>/App_themes.
      -or-
    • For an offline approach, browse to the appropriate page in the deployed Web application. Use the browser's "Save" command to save the page to a disk. Load up the saved XHTML and CSS files in your text or CSS editor. You will have a saved XHTML file that you can use in an editor.
  4. Copy the changed files to <vhi-install>/lib/webbuilder/themes before you rebuild.

Custom Content

Use this feature to import custom content and resources into your Web application. For example, you can import custom pages, images,and additional support libraries.

How does importing custom content work?

When a directory is specified, the contents of the specified directory is overlaid on top of the generated Web application before it is deployed. Files in the directory itself end up in the base of the Web application directory. Since all subdirectories are copied as well, a directory structure matching that of the Web application can be created, and you can import files into any area of the generated Web application. Existing files are overwritten with files from the custom content directory.

Note:

You can use the custom content feature in conjunction with the "Custom Pages". You use custom pages to control the content shown for recognized entities, unrecognized screens, and procedures. See Screens (.NET or Java), for more information on custom pages.

To import custom content

  1. Create a directory in which to place your custom content. This is the source from which you will copy your custom content.
  2. In Web Builder, click Options >Customization >Custom Content. Specify the directory that you just created.
  3. Place a file, a collection of files, or an entire directory structure inside the source directory you created in step 1.
  4. Rebuild your project.

    When the project rebuilds, the contents of the source directory is added to and deployed with your Web application. Each time you rebuild, the overlay directory is inserted into the built Web application.

Important tips to remember when creating custom Web applications

 

Related Topics
Bullet How to customize a theme
Bullet How to customize a Web application