Client Side Javascript in UX Components
Description
This is an overview of javascript in UX Components, what events are, how javascript can be written, where javascript can be used, and ways to test javascript in UX components.
Discussion
UX components are used to create mobile apps and provide robust interfaces in web applications. Built on top of web technology, a UX Component is composed of 3 parts: HTML, CSS, and Javascript. HTML and CSS define the structure and look of the component. Javascript is used to create the interactive piece of the UX component. Javascript allows you to create a rich user experience. Retrieving data from a server, showing a message, resetting data in a form, or enabling a button are behaviors created with javascript.
Javascript is added through events or properties to create effects and functionality in a UX component. Action Javascript offers a wide assortment of functionality you can drop into your component or use as a starting point in your scripts. UX components also have built-in methods you can use to access information about and manipulate the controls in your component. Built-in debugging tools and compatibility with third-party debuggers also help to track down problems before you publish them to the web.
- Name
- Description
- Client-Side Events
The UX Component has a number of javascript events you can hook into to do extra processing, such as caching data or validating a control.
- Action Javascript
Action Javascript is a way to add javascript to a component in Alpha Anywhere with minimal to no code required.
- Javascript Actions
Javascript Actions enable you to call Action Javascript from places in the UX Component where Action Javascript isn't directly available.
- Aliases & Placeholders
Aliases & placeholders let you reference objects in the UX Component without requiring you know their generated IDs.
- {dialog.object} Methods
The UX component provides its own set of methods and properties for interacting with the controls on the component. These methods are accessed using the {dialog.object} placeholder.
- Extending {dialog.object}
{dialog.object} is a javascript object that you can extend by adding your own properties and methods.
- Modifying Action Javascript Code
In most situations, Action Javascript is sufficient to get the job done. But what if you need to populate attributes with data from a third-party library or need to make a static setting dynamic? In these situations, it may become necessary to convert your Action Javascript to its underlying implementation.
- Client Side Expressions, Validation, and Calculated Fields
A number of properties for controls can be configured using javascript, this includes Validation, Show/Hide and Enable expressions, and Calculated Fields. Javascript functions for properties usually take a few parameters and return the value that defines the state of the parameter.
- Import External Javascript
Javascript can be loaded in the UX Component by including it in the Javascript Files property or importing it on demand.
- Testing & Debugging
Alpha Anywhere has a number of ways you can debug and test your Javascript code from within the development environment. These debugging methods are available for more than just the UX component. They can be used in Grids, Tabbed UIs, Custom Components, and even .html and .a5w pages.