• Arguments
• Client-side Data Cache Editor
• Copy selected controls to clipboard
• Create static HTML files
• Data Series Editor
• Duplicate selected controls
• Go to control number -Ctrl G
• Insert comment
• Internationalization Helper Utilities
• Javascript Actions Editor
• Load controls from library
• Move Javascript Code to Different Event
• Paste controls from clipboard
• PhoneGap Shell QR Codes
• Print comments
• Recalculate all controls
• Recalculate selected controls
• Save selected controls in library
• Security and server-side show-hide settings in component
• Select all controls in current container
• Set tab order
• Show the value of the selected property in all controls
• Toggle line numbers in Controls display

Create static HTML files

Description

Generate a static HTML version of your UX component. Several different files will be generated (e.g. .html, .css, .js, etc.). The collection of files is referred to as a 'fileset'. You must save the component that you want to convert to HTML before you can use this feature.

Static HTML Files

Component alias

Specify an alias for this component. The alias is used to generate the object name for the component at runtime.

Location

Folder

Specify the folder where the files should be generated. The files will be generated inside a sub-folder in this folder. If you select the <Webroot> the files will be generated in a folder in your Alpha Anywhere webroot and you will be able to do a Remote Preview on a mobile device or Live Preview in your browser.

Name

Specify the name for this fileset. The generated files are placed in a sub-folder with this name inside a specified 'Folder'

Options

Additional assets to include in Fileset

Specify the filenames of any additional files in the Web Project that you want to include in the fileset.

Create application manifest

Specify if an application manifest file should be created.

Show manifest

Specify if the manifest should be shown after it has been created. This will allow you to apply manual edits to the list in the manifest.

Manifest filter rules

You can define rules to automatically filter out certain files from the manifest.

URL Ajax callbacks

The URL for any ajax callbacks that are made from the page. This property needs to be specified if the static page will be used in a Cordova mobile application or downloaded from a service such as Amazon S3. This is because the application server's URL cannot be inferred from the page's location. In the case of mobile apps, the page is loaded from the device file system. In the case of Amazon S3 or other file hosting service, the Application Server is not used to retrieve the page.

If the static page is used in a web application where the request is made to the Application Server to retrieve the page, the application server can be determined from the page request and you do not need to specify the URL for Ajax callbacks.

Overwrite without warning

Should modified files be overwritten without a warning?

Create PWA (Progressive Web App)

Select this option to generate a Progressive Web App (PWA). Once selected the PWA Settings menu appears.

PWA Settings

App name

Specify the app name.

Short name

Specify the short app name.

Description

The description should explain what your app does.

Static cache name

The cache name must be unique for each PWA that you publish. If the browser detects a duplicate cache name for different apps, then the required JavaScript service worker will not be installed. By convention use pwa_cache_appname (no spaces allowed, they will be replaced by the _ character).

Static cache version

Enter the version number for the static app cache. By convention use v-##.##. Each time any of the files already in the cache are modified (cached files are older, stale) the version number should be changed to invalidate the older cache.

Dynamic cache name

The dynamic cache name must be unique for each PWA that you publish. If the browser detects a duplicate cache name for different apps, then the required JavaScript service worker will not be installed. By convention use pwa_cache_appname (no spaces allowed, they will be replaced by the _ character).

Dynamic cache version

Enter the version number for the dynamic cache. By convention use v-##.##. If any of the files in the dynamic cache are stale, change the version number to invalidate the older cache. The older dynamic cache will then be deleted and a new dynamic cache is created. The dynamic cache will then be populated with newer files as they are requested when online.

Dynamic cache max size limit

Enter a number (10 to 250) that represents the maximum number of items allowed in the dynamic cache. When the maximum number is reached, the oldest items in the cache are deleted to make room for newer items. A large cache size consumes more resources and can slow app performance.

Start URL

Enter the starting URL. Typically ./index.html

Offline HTML page

When the device is offline and the html page is not in the static or dynamic cache, this page will be displayed. It is automatically stored in the static cache.

Master icon

The app master icon. The file size should be 512px x 512px for best results.

Display

How would you like the app to display when launched from the home screen icon? Options include fullscreen, standalone, minimal-ui, and browser.

Theme color

The theme color determines that top border color when run as a standalone app.

Background color

The background color is used as the splash screen when the app is launched. It should be similar to the app background color.

Using Firebase Cloud Firestore

Are you using Firebase Cloud Firestore with this app? If this option is checked then the data returned from Firestore requests are not cached in the dynamic cache. This ensures that the data is not stale.

Hosting with GitHub Pages

Will you be deploying this web app to GitHub Pages?

Set noJekyll flag

(only shown when Hosting with GitHub Pages is checked) In most cases, this flag should be set (checked) if you are deploying the app to GitHub Pages

Show debug console messages

When enabled, console debug messages will be displayed. This is typically enabled during the app development phase and turned off when ready to deploy.

After Fileset Create

Open in browser

Upload files to Amazon S3 storage

You can upload the files in the fileset to a bucket in Amazon S3 storage.

Storage connection string

To define a storage connection string go to the 'Tools' menu in the Web Projects Control Panel.

Sub-folder name in Amazon S3 storage

Specify the folder within Amazon S3 storage that you want to store the static html file

Advanced

Set embedded mode on

Enables embedded mode.

Convert built-in images to base64 encoded images

Should all built-in images be converted to in-line base64 encoded images?

Embed linked files

Should links to Javascript and CSS files be converted to embed the Javascript and CSS in the Static HTML?

Create a static HTML version of a Component.

1. Create a component and save it.

   

2. On the UX Builder's UX Controls page click the 'Menu' dropdown in the toolbar and select the 'Create static HTML files' option.

   

3. In the Static HTML UX Generator dialog's 'Location' section's 'Folder' property specify where you want to store the file

   

4. Click the button next to the 'Name' property and give the Static HTML a name. Click OK.

   

5. Minimize Alpha Anywhere and open your computers file manager. Navigate to the folder where you saved the Static HTML version of you component.

   

6. Click on the index page to open static version of the component in a browser.

   

7. Result: