Improved UX Component Performance using Static HTML

Description

Configure UX components to deliver significantly faster initial load times by rendering a static HTML version of the component at runtime.

Discussion

The UX component can be configured to deliver significantly better performance for the initial load. This is done by rendering a static HTML version of the component and then using that static file at runtime for the initial load, rather than dynamically processing the .a5wcmp file.

The improved performance is available in all places where a UX component is loaded, including:

• An .a5w page that runs a component
• A UX that embeds another UX component
• Action Javascript that runs a UX component
• A TabbedUI that loads a UX component

Action Javascript Configuration

In the Action Javascript Open a UX action builder, you can check the Open UX using static HTML file property to enable this feature.

Open a UX Action Javascript Builder

TabbedUI Configuration

In the TabbedUI component builder, you can check the Open UX using static HTML file property on buttons that open a UX component.

TabbedUI Button Properties

Save Page (.a5w) Configuration

When saving a UX component to a page (using the Save Page button on the toolbar), you can check the Run component using a static HTML page checkbox in the builder.

Save Page Builder

Technical Details: IFrames and Styles

When the Static HTML version of the component is run, the page is loaded inside an IFrame.

Because the page is running in an IFrame, you can use different styles for the parent and child component without conflict. Previously, this was only possible if the components used legacy style sheets (styles that were not inherited from the core Alpha style).

Prerequisites

When you turn on the Open UX using static HTML file property, Alpha Anywhere checks to see if the target UX component is configured to automatically create a static HTML version of the component when it is saved.

If the target component is not configured correctly, Alpha Anywhere can automatically turn on the required option for you.

Live Preview with Static HTML

When you execute a Live Preview of a UX component for which a static HTML page has already been created, the Live Preview can now utilize that static page to simulate the load time performance.

Alpha Anywhere will display a prompt asking if you want to use the Static HTML version, or if you want to run the component dynamically (standard Live Preview).

Populating a Dropdown, RadioButton or Checkbox control

NOTE: The standard method of populating RadioButton, CheckBox, and Dropdown controls using a variable defined in the onDialogInitialize event (e.g., `e.rtc.listName = ...`) does NOT work when the UX is rendered as Static HTML. This is because the static HTML is generated once and saved, bypassing the server-side variable population during runtime.

To populate these controls dynamically in a Static HTML environment, you must a different approach. See [Populating Dynamic Controls in Static HTML].

Videos

In most Alpha Anywhere applications it is common to load child UX components. For example, a user might click a button to open a child UX in a window, or a user might click a button to load a child UX component into a a new pane in a Tabbed UI component.

In these videos, we show how the loading of child UX components can be substantially sped up by using static HTML versions of the child UX component.

• Watch video - 1
• Watch video - 2

See Also

• Create static HTML file(s) when component is saved
• Populating Dynamic Controls in Static HTML
• Create static HTML files