Component Publisher

Abstract Editor

Superclass of a set of editor classes that should become the default editors by wm 6.2

Accordion Layers

The Accordion widget is a Layers widget (see the Layers widget) for adding accordion layers. If you decide you don't want to use accordion layers, you can easily switch to another style of layer by changing the layersType property.

Bevel

This widget creates a fixed border between two widgets.

Busy Button

A button with a status indicator, telling the user that the process the button launched is still running, was successful or failed.

Button

The button class represents an on-screen button with a label and an onclick event. The main difference between the button class and a label with an onclick event is that they are represented with different graphics.

Calendar

Displays a month calendar, allowing user to select a particular date.

Checkbox

Represents a basic checkbox

Check Box Editor

Provides a widget for selecting checkbox items.

See _Check Box Editor for editor properties.

Component

This is the base class of all things your liable to directly interact with in your wavemaker application.

Composite Publisher

This class is used to publish/unpublish a composite; a simplified way of adding new widgets to your palette.

Container

A container is the parent class of all types of page elements used to contain a set of other page elements. A container widget can contain other widgets. Examples include panels, layers and pages.

Content

The content widget can display any html content that has been entered into the source code Markup tab as a DIV. Here is an example of a DIV in the Markup source tab that you could access from within any Content widget.

<div id = "about">
All about this application.
</div>

Control

This is the basic widget class; all page elements that go on the screen are subclasses of Control

Currency

Represents a text field for entering in currencies

Currency Editor

Editor for entering currency input.

See _Currency Editor for editor properties.

Currency Formatter

Provides options for turning a string into a currency string

Data Formatter

This class serves only as a superclass for classes that will format different kinds of data. The default formatter is used to display text.

Data Grid

Widget for displaying data in a tabular format.

JavaScript to access dataGrid data

To get data for the selected row 

// Return the row for the selected grid item
this.customerDataGrid1.selected.data.address
// Return the address column for the selected grid item
this.customerDataGrid1.selected.data.address

See details for more code examples.

Data Grid Column

This widget represents the column of a dataGrid widget. It is used to specify the formatting and ordering of each column.

Data Navigator

This is a specalized widget for use with LiveForms that allows the user to move through a list of records, similar to the record navigation feature of MS Access and FileMaker.

There are two ways to use the dataNavigator widget:

  • Record navigation in a LiveForm: this allow the user to show data in a LiveForm record by record, similar to a database cursor.
  • Paging in a Grid: this allows the user to page through data in a grid. This requires setting the byPage property checkbox in the dataNavigator and also setting the maxResults property of the LiveVariable bound to both the grid and the dataNavigator.

Date

An editor for entering in a date

Date Editor

Editor for entering dates.

See _Date Editor for editor properties.

Date Formatter

This class provides some options to format a string of text into a date.

Date Time Formatter

Provides a superclass for DateFormatter and TimeFormatter; both of which use the same set of properties.

Dojo Chart

The Dojo Chart widget is currently in beta.

Dojo Grid

This widget is currently in beta.

Dojo Menu

The DojoMenu widget.

Editor

The editor class is an advanced widget that can represent all types of edit widgets including:

  • TextField
  • TextArea
  • Checkbox
  • Radio button
  • Date
  • Time
  • Select (pulldown)
  • Number
  • Currency
  • Lookup
  • Slider
To use this component, drag an editor onto your canvas, and then set the display property to specify which of the above editor types it will be.

Edit Panel

The EditPanel Widget is a specialized container must be placed inside a LiveForm and holds button widgets to perform create, update and delete operations.

By default, the LiveForm has three buttons:

  1. New: creates a new record for the data type of the containing LiveForm.
  2. Update: if the dataSet of the LiveForm is bound to a grid.selectedItem, then this button will update the currently selected grid item (if there is no selected item, this button is disabled).
  3. Delete: if the dataSet of the LiveForm is bound to a grid.selectedItem, then this button will delete the currently selected grid item (if there is no selected item, this button is disabled).

Use within the javascript editor 

// Start insert on the liveForm containing editPanel1
this.editPanel1.beginInsert();          
// Start insert on the liveForm containing editPanel1
this.editPanel1.beginUpdate();         
// Start insert on the liveForm containing editPanel1
this.editPanel1.deleteData();

Evaluation Formatter

This class transforms a string into another string.

Note: This synopsis needs work.

Feed List

Displays information from an RSS feed.

Html

Displays HTML content.

IFrame

Display web content.

Image List

The ImageList class represents a single image that contains a grid of icons. This allows a project to use a single image download to get a set of icons rather than make a large number of separate requests to the server for each individual icon.

To use this:

  1. Insert a new ImageList (from palette or insert menu)
  2. Enter in how many icons there are for each row of your grid of icons (colCount property)
  3. Enter in the height and width of each icon (note that since this is a grid of icons, each must be of identical height and width)
  4. Enter the url to the imagelist. If you put it in your project's resources folder, the url might be something like "resources/images/imagelist/myimagelist.png"
  5. Name your new ImageList object "MyImageList" (it should now show up in your model tab as "MyImageList".
  6. Select a Panel, Layout or other container with buttons (or subcontainers with buttons) that should get these icons, and set its imageList property to "MyImageList".
  7. Select a button within the panel which you want to assign an icon from the image list, and enter in the index of the image. -1 means no image; 0 means the icon on the first row, first column, 5 means the 5th icon. (Note these may not show up when designing the application, so try test running your project to see that it is working).
sampleImageList.png

Label

The label is your generic widget for putting text on the page. Common use cases:

  • a page header
  • a form field label
  • a paragraph of text
  • a link

Large Text Area

A large scrolling text area

Layer

Layers

The Layers widget is a container for individual layers. Layers are containers similar to pages but with a different scope and more flexible and efficient navigation possibilities (About Pages and Layers).

Layout

The Layout widget is a container for other widgets.

Link Formatter

Provides options for how a string will be turned into a link

List

Displays a list of information. Each row of the list may be selected and is exposes as the selectedItem of the List.

Use the dataSet property to assign the data source for the List. If the source has multiple fields for each item in the list then the list will display multiple fields of information.

Also see: DataGrid widget.

Live Form

The LiveForm widget makes it easy to build forms that create, update and delete data in an underlying data table.

The LiveForm widget has built-in functionality for displaying, inputting, deleting or updating a record. The LiveForm widget has an associated DataSet object that represents its data source. It also has a DataOutput object, which you can use to get the data out of the LiveForm.

When you specify the DataSet (Getting the DataSet), the LiveForm widget automatically generates Editor widgets for every item in the DataSet (except lists and substructures). The binding on these Editor widgets is already done for you, so this can save you a huge amount of time.

The Editor widgets that LiveForm generates for you are ordinary Editor widgets. You can configure them as you would any other widget and you are free to delete them. However, do not move these Editor widgets outside the LiveForm that generated them.

If you use a LiveVariable for the dataSet then LiveForm can automatically generate Create/Read/Update/Delete functionality for you. A LiveVariable can be based either on a LiveTable (LiveTables) or a LiveView (LiveViews). However, for LiveForms, use a LiveVariable that references a LiveView.

Note: If you use a liveTable, you won't get composite key fields, since these currently appear to the client as a structured related object.

To use the LiveForm widget to insert or update records, you bind its dataOutput to an appropriate Service Variable (Using the DataOutput).

Live Variable

This is a non-visual component for working with database information. A LiveVariable provides great control over how data is made available for dataGrid and LiveForm widgets.

  • autoUpdate: updates the LiveVariable whenever one of the filter attributes changes.
  • filter: only returns the results which match the filter attributes. Useful for performing searches on data.
  • maxResuts: limits the number of rows returned (add dataNavigator widget for paging)

Logout Variable

The LogoutVariable is a shortcut for combining a ServiceVariable thats connected to the logout operation of the securityService AND a page navigation variable that sends the user back to the login page after the service variable finishes logging the user out. If you want to logout and NOT go to the Login page, then use ServiceVariable and set "service" to "securityService", set operation to "logout" and set the onSuccess event to perform your own custom logout action.

NOTE: the logoutVariable will not work unless security is enabled.

Standard usage:

  1. Turn on security for your project
  2. Add a LogoutVariable to your project
  3. Add a button to your project; set its caption to "Logout"
  4. Set the onClick event for your button to point to your logout variable.

Lookup Editor

This is a specialized widget for use in looking up related data within LiveForms. Normally, it should not be used by developers.

See _Lookup Editor for editor properties.

Navigation Call

This non-visual component navigates between application layers and pages.

Number

Represents a text field for entering numerical data (possibly formatted numbers)

Number Editor

Editor for entering numerical information.

See _Number Editor for editor properties.

Number Formatter

This class provides options for formatting numerical data

Page Container

This widget can display other pages. This is a very effective way to manage a large project. Create a tab on the home page and in each tab layer put a page container.

Panel

The panel is used to lay out a set of components. There are two ways to layout a set of components:

left-to-right: each successive element appears to the right of the previous element

top-to-bottom: each successive element appears below the previous element

In either case, components within this Panel will have to share the width and height of this panel, and will be sized according to the size of this panel and the requested size of each contained component.

For more information go to Arranging Widgets within a Container

Picture

This widget displays pictures from local images or urls.

Progress Bar

Displays progress bar showing percent complete.

Property

The Property is a way of adding properties to composites your creating.

Radio Button

Represents a basic radio button

Radio Button Editor

This widget allows a user to select from a number of radioButton options, where each radioButton has the same radioGroup property. For radioButtonEditors who share the same radioGroup property, calling getDataValue() on any editor in the radioGroup returns the same value.

To create a group of radio buttons, drag an editor widget onto the page for each radio button you want. Change the value of the display property to RadioButton.

When you set displayType to RadioButton, the following properties are important to understand:

  • checkedValue: the value returned by this editor when the radio button is checked
  • dataValue: returns the dataValue for just this one editor widget (normally, this is not used - use groupValue instead)
  • emptyValue*: the value returned by this editor when the radio button is not checked (only the emptyValue of the first editor is used)
  • groupValue: returns the checkedValue for the currently selected radio button in the group (or the emptyValue of the first editor in the group if none of the editors are selected).
To set the default value for a group of radioButton widgets, select the startChecked property for just one of the widgets in the group.

Each radioButton has a radioGroup property that allows you to assign a group of radioButtons to the same subgroup.

The following editor properties are available for the RadioButton Editor:

  • dataType: the data type for the RadioButton selection value. The data type for this value can be a string, a boolean, or a number.
  • radioGroup: type in a group name for this radio button. This will create a sub-group of radio buttons. All radio buttons with the same radioGroup name wil belong to this sub-group.
  • required: if checked (true) the value cannot be null.
  • showMessages: if checked (true) this Editor widget diplays the promp and invalidMessage messages.
  • startChecked: if checked (true) this radio button appears selected by default. This is also how you can set the default value for a group of radioButton widgets.
See _Radio Button Editor for editor properties.

Regular Expression Formatter

This class provides options for transforming a string using regular expressions.

Related Editor

The RelatedEditor widget is used to represent related data within a LiveForm. For a one-to-many relationship, the data is represented in a grid. For a one-to-one relationship, the data is represented using a sub-form or lookup editor (similar to a select editor).

Rich Text

Represents an editor that allows users to create formated/styled text

Select Editor

This widget allows users to select from a drop-down list of items.

Select Menus allow the user to select a value from a drop-down list of values. In order for this to work, you need to populate the select list with the values. There are three ways to do this:

  • Simple static list: use the options property to enter list elements as a comma separated string
  • Static list with name/value pairs: create a Json variable with a list of displayValue/dataValue options and bind the variable to the dataSet property
  • Dynamic list: perform a database or web service call and bind the results to the dataSet property.
The following editor properties are available when the displayType is Select:

  • allowNone: adds a blank entry to the list of selectable items
  • binding: allows you to obtain the values for the drop down from a Service Variable or Variable
  • dataField: if bound - select the column name to be used as the data value for the selection (i.e. StateID)
  • displayField: if bound - select the column name of the values to be displayed to the user (i.e. StateName)
  • options: manually enter option to be used as both display and data values for the selection
  • required: if checked (true) the user must select an item from the menu
See _Select Editor for editor properties.

Select Menu

Represents a basic select editor (pulldown menu for selecting a form value)

Service Variable

This non-visual component is used to call web services, custom database queries and Java methods.

In Javascript, serviceVariables are invoked by calling the update() function.

However, because there is no way of knowing how long it will take for a serviceVariable.update() call to perform its work, developers must always use the onResults and onSuccess events to check the results of a serviceCall.

Using service variable events ensures:

  • The service call has returned.
  • Errors returned from the service call are handled
  • The result set is available.

Javascript Example

// This function is called when button1 is clicked
button1.onclick: function(inSender, inData){
   // Invoke the service variable operation using update()
   myServiceVar.update();
  // DO NOT try to get results here. Use the onResults event!
}
// This function is called when myServiceVar completes its operation
myServiceVarResult: function(inSender, inData) {
   // The return data from the service call is in the inData variable
   alert("Answer is: "+inData.dataValue);
}

Slider

Represents a drag and drop widget for selecting a number in a specified range

Slider Editor

This class represents a Slider Editor widget. The properties that are important for this widget include:

  • discreteValues: the total number of values to represent in the slider (setting discreteValues = 3 means that there are only 3 "positions" on the slider: start, middle, end)
  • maximum: the dataValue to return for the maximum slider value (slider all the way to the right)
  • minimum: the dataValue to return for the minimum slider value (slider all the way to the left)
See _Slider Editor for editor properties.

Spacer

This widget is used to put space between other widgets.

Splitter

This widget creates a movable border between two widgets. The trick with a splitter is that one of the two widgets that are being split needs to have its width or height set to 100% and the other widget needs its width or height set to a specific px value.

Stocks

Displays stock information for ticker provided.

Tab Layers

The TabLayers widget is a Layers widget (Layers) for adding tabbed layers. If you decide you don't want to use tabbed layers, you can easily switch to another style of layer by changing the layersType property.

Template Publisher

Allows user to create a custom widget from component widgets.

Text

A basic text box

Text Area Editor

The TextAreaEditor widget is specialized for multi-linem text input.

See _Text Area Editor for editor properties.

Text Editor

Editor widget for inputting string data.

Also see _Text Editor.

Ticker

Displays content as moving across the screen. Useful for displaying stock ticker information or other changing data.

The ticker will stop moving when the user's mouse entered the ticker area, allowing the user to select the content within the ticker.

Use the delay, motion, and rewindDelay properties to control the speed of the ticker.

The Ticker container scrolls content right-to-left through the container. To design the a ticker you must have more content in the Ticker container than fits in the space allocated to the Ticker container. The Ticker container will then move the contents from right to left, eventually displaying all contents.

To design a ticker, size the Ticker based on your window requirements. Enable the "scrollX" property, which will allow you to add content within the ticker container as you desire. Drag content into the Ticker container. Once you have finished designing disable the "scrollX" property so the scrollbar does not display at runtime.

If you want the ticker to begin blank and move content from the far right of the ticker container then insert a Spacer widget into the Ticker container and size the Spacer to the full visible area of the Ticker container.

Time

An editor for entering in time of day

Time Editor

This is a specialized editor for inputting time values, such as 11:59AM.

See _Time Editor for editor properties.

Time Formatter

Provides some options for formatting a string into time.

Tree

Tree widget. Full tooling within WaveMaker studio is not yet available. Assigning nodes to the tree must be done via coding.

Variable

This is a non-visual component for storing data values. The data values can be specified as:

  • Simple data type: string, number, boolean, etc.
  • Name/Value list for select editor: using json
  • Complex data type for database and web service data: using json

Weather

Weather gadget displays forecast for region defined by zip code.

Composite Publisher

Composite Widgets allow you to create and publish user inferfact elements that you can reuse across multiple projects.

You Tube

Display YouTube gadget.

_Base Editor

Superclass of all text edit widgets. Note that the Editor class contains a Label control and an edit control. The _BaseEditor classes represent that edit control.

_Check Box Editor

The checkbox editor represents the checkbox control within the checkbox type of Editor widget.

Note that the Check Box Editor class contains a Label control and an edit control. The _CheckBoxEditor classes represent that edit control.

_Currency Editor

This class represents the edit field of a Currency Editor widget.

Note that the Currency Editor class contains a Label control and an edit control. The _CurrencyEditor classes represent that edit control.

_Date Editor

This class represents the edit element within the wm.Editor widget when that edit widget represents a date. The Calendar widget is automatically displayed below the date-entry field. Invalid dates in the Calendar are unselectable.

Note that the Date Editor class contains a Label control and an edit control. The _DateEditor classes represent that edit control.

_Lookup Editor

This is a specialized editor for use within LiveForms and normally should not be used by developers.

Note that the Lookup Editor class contains a Label control and an edit control. The _LookupEditor classes represent that edit control.

_Number Editor

This class represents the edit field within an Editor widget for editing numbers.

Note that the Number Editor class contains a Label control and an edit control. The _NumberEditor classes represent that edit control.

_Radio Button Editor

This class represents the radio button element within an Editor widget of type Radio Button. This class does NOT represent the caption or other elements that go with the Editor widget.

Note that the Radio Button Editor class contains a Label control and an edit control. The _RadioButtonEditor classes represent that edit control.

_Select Editor

This editor widget creates a pulldown menu control that allows the user to select from a list of options.

Note that the Select Editor class contains a Label control and an edit control. The _SelectEditor classes represent that edit control.

_Slider Editor

This class represents the slider portion of the Slider Editor widget. The properties that are important for this widget include:

  • discreteValues: the total number of values to represent in the slider (setting discreteValues = 3 means that there are only 3 "positions" on the slider: start, middle, end)
  • maximum: the dataValue to return for the maximum slider value (slider all the way to the right)
  • minimum: the dataValue to return for the minimum slider value (slider all the way to the left)
Note that the Slider Editor class contains a Label control and an edit control. The _SliderEditor classes represent that edit control.

_Text Area Editor

This class represents the edit element within the TextEditor Editor widget.

Note that the Text Area Editor class contains a Label control and an edit control. The _TextAreaEditor classes represent that edit control.

_Text Editor

This class represents the text field edit widget that appears within an Editor control.

Note that the Text Editor class contains a Label control and an edit control. The _TextEditor classes represent that edit control.

_Time Editor

This class manages the edit control within a time-based Editor Widget.

Note that the Time Editor class contains a Label control and an edit control. The _TimeEditor classes represent that edit control.

      Share/Bookmark
© 2010 WaveMaker Software™ All Rights Reserved.