User interface with a fixed header and horizontal tabs. The user interface is initialized via the update() method. Websockets are used to relay events between the client and the server.
Constructors
Horizon( parent, config )
Used to instantiate this class | parent | DOM element in which to render this component | | config | Configuration settings (optional). See config options for more information. |
Config Options
name Name of the application. By default, the name will be used as the document title. As a user switches tabs, the tab name will be appended to the title.
style Style for individual elements within the component. In addition, there is a general "javaxt" config for javaxt-components. This is a complex, nested config. See "default.js" in the javaxt-webcontrols. Note that you can provide CSS class names or an inline set of css style definitions for each components and javaxt subcomponents.
url Map of URLs to REST end points
autoLogoff Used to define the maximum idle time for a user before calling logoff(). Units are in milliseconds. Default is false (i.e. no auto-logoff).
useBrowserHistory If true, will enable users to navigate between tabs using the browser's forward and back buttons. Default is false.
windows A shared array of javaxt.dhtml.Window components. All the windows in the array are automatically closed when a user logs off or when the logoff() method is called. You are encouraged to create your own array and pass it to the constructor via this config setting and update the array whenever you create a new window.
Events
beforeTabChange( currTab, nextTab ) Called immediately before a tab is raised in the tab bar.
| currTab | Object representing the current tab. Example: - name: Name/label of the tab (String)
- tab: Tab in the tab bar (DOM Object)
- panel: The panel that is rendered in the body (Object)
| | nextTab | Object representing the tab that will be raised. |
onTabChange( currTab ) Called whenever a tab is raised in the tab bar.
| currTab | Object with key/value pairs including: - name: Name/label of the tab (String)
- tab: Tab in the tab bar (DOM Object)
- panel: The panel that is rendered in the body (Object)
|
onMessage( msg ) Called whenever a message is recieved from the server via websockets. Used the onModelChangeEvent() event listener to receive CRUD events specifically. onModelChangeEvent( op, model, id, userID ) Called whenever a Model created, updated, or deleted.
| op | Operation name. Options include "create", "update", or "delete" | | model | The name of the model that was changed (e.g. "User"). | | id | The unique identifier associated with the model (e.g. 12345) | | userID | The unique identifier associated with the user that's responsible for the change. |
onLogOff( ) Called after the logoff() method is complete. onUserInteration( e ) Called whenever a user interacts with the app (mouse click, mouse move, keypress, or touch event). Public Methods
update( user, tabs ) Used to initialize the app with a new user and a set of tabs
| user | Simple json object with an id. Additional attributes such as name, contact info, etc may be present and used by the renderers defined in the config (e.g. profileButton) | | tabs | Either an array or json object with tabs. Each entry should have a name and a class will be instantiated at runtime. The class constructor should accept two arguments: - parent: DOM object
- config: JSON object with optional config settings
Here's an example of an array of tabs:
|
tabs = [
{name: "Home", class: com.acme.webapp.Home, config: { ... }},
{name: "Admin", class: com.acme.webapp.Admin, config: { ... }}
]; Here's an example of a json object with tabs:
|
tabs = {
Home: com.acme.webapp.Home,
Admin: com.acme.webapp.Admin
}; The most significant difference between the two options is that the array includes an optional config key which will be used to instantiate the class. Note if the class has a public update() method, it will be called after the class is instantiated. |
getTabs( ) Returns an array of tabs. Each entry includes: - name: Name/label of the tab (String)
- tab: Tab in the tab bar (DOM Object)
- panel: The panel that is rendered in the body (Object). Note that the panel might be null/undefined if it has never been raised. This is because panels are only instantiated if a user clicks on a tab.
getTab( name ) Returns an individual tab for a given label. sendMessage( msg ) Used to send a message to the server via websockets. addHistory( params ) Used to add a "page" to the browser history
| params | JSON object with the following: - title - text to display in the browser's title
- tab - label associated with a tab
- url - custom url
|
updateHistory( params ) Used to update browser history for the current "page"
| params | JSON object with the following: - title - text to display in the browser's title
- tab - label associated with a tab
- url - custom url
|
|
|