CLASS: Ticker

SUPER CLASS: Panel

Subclasses

No subclasses found

Synopsis

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.

Full Description

Properties

Ticker.border

described in Control

Sets the border-width in pixels for your widget. Enter a single value like 5 to have a 5 px border around the widget. To have borders with different widths, enter a comma-separated list of pixel values like this:

border-top, border-right, border-bottom, border-left

For example, entering

10, 0, 5, 1

Will result in a border that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setBorder("5,0,10,15")

Ticker.borderColor

described in Control

Enter a border color for your widget; rgb and hex values are accepted: rgb(0,255,0) and #00FF00 are both valid entries.

You can also enter css color names, including black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white.

Use within the javascript editor

this.<WidgetID>.setBorderColor("rgb(0,255,0)");       
this.panel1.setBorderColor("#00FF00");
main.editor2.setBorderColor("purple");

Ticker.delay

Milliseconds between each left-ward movement of the ticker contents.

Ticker.fitToContent

described in Container

This property causes the containing widget to size automatically based on the size of the widgets it contains. The width and height are set to the cumulative maximum width and height of the contained widgets.

Use within the javascript editor

this.<UniqueID>.setValue("fitToContent", true)

Ticker.freeze

described in Container

Checking the checkbox to freeze a containing widget makes it impossible to move any individual widget currently inside the container, however it is possible to drag new objects into this widget.

This is valuable for creating templates, where the border components (e.g., the chrome) are not meant to change, but the interior can be edited by other developers.

Ticker.height

described in Control

The height of your widget can be specified in px or % (i.e 50px, 75%).

You can have a column of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% height widget gets twice as much space as a 40% widget).

Use within the javascript editor

this.<WidgetID>.setHeight("50%");  
this.label1.setHeight("40px");

Ticker.horizontalAlign

described in Container

This property controls how contained widgets are aligned horizontally (e.g., left to right) within this widget container.

1. left: each widgets inside this container will be displayed left justified inside the container
2. center: each widget inside this container will be displayed centered horizontally inside the container.
3. right: each widget inside this container will be displayed right justified inside the container

Use within the javascript editor

this.<UniqueID>.setHorizontalAlign("right");

Ticker.imageList

described in Container

Enter the name of a wm.ImageList you've added to your model. This ImageList will be used by all buttons that specify an imageIndex. If a button also specifies its own ImageList, then it will ignore the container's ImageList.

Ticker.layoutKind

described in Container

This property controls how contained widgets are displayed within this widget container.

1. top-to-bottom: each widgets inside this container will be displayed below the other widgets inside the container
2. left-to-right: each widget inside this container will be displayed to the right of other widgets inside the container.

Use within the javascript editor

this.<UniqueID>.setLayoutKind("top-to-bottom");

Ticker.lock

described in Container

Checking the checkbox to lock a containing widget makes it impossible to select any individual widget inside the container.

This is similar to the "group" function in PowerPoint and makes it easy to cut and paste a group of object. It also ensures that an object cannot be accidentally dropped into a group of widgets.

Ticker.margin

described in Control

Sets the margin in pixels for your widget. The margin for an object is outside of its border (the padding is inside the border).

Enter a single value like 5 to have a 5 px margin around the widget. To have margins with different widths, enter a comma-separated list of pixel values like this:

margin-top, margin-right, margin-bottom, margin-left

For example, entering

10, 0, 5, 1

Will result in a margin that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setMargin("5,0,10,15")

Ticker.motion

Distance the ticker will move for each leftward movement (pixels).

The leftward movement will occur based on the "delay" property. For example, if the default values are used, the ticker will move left 4 pixels (the default value of the "motion" property) every 20 milliseconds (the default value of the "delay" property).

Ticker.name

described in Component

The name is a unique identifier for your widget. Each page element and component must be uniquely identified. WaveMaker automatically renames any non-unique element.

The name makes it easy

1. Find the component in a bind dialog box
2. Find the component in your model tree
3. Reference the component in javascript

Use within the javascript editor

this.<UniqueID>.setShowing(true)

Ticker.padding

described in Control

Sets the padding in pixels for your widget. The padding for an object is inside of its border (the margin is outside the border).

Enter a single value like 5 to have a 5 px padding around the widget. To have padding with different widths, enter a comma-separated list of pixel values like this:

padding-top, padding-right, padding-bottom, padding-left

For example, entering

10, 0, 5, 1

Will result in padding that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setPadding("5,0,10,15")

Ticker.rewindDelay

When left most content of ticker is reached, number of iterations to delay before ticker resets.

To calculate the total delay, multiply the "delay" property value with the "rewindDelay" property to get the total milliseconds of delay. For example, the default "delay" is 20 and the default "rewindDelay" is 200 for a total of 4000 milliseconds (or 4 seconds). When the ticker reaches the end it will pause for 4 seconds then restart.

Ticker.scrollX

described in Control

The ScrollX property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated width can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollX(true);

Ticker.scrollY

described in Control

The ScrollY property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated height can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollY(true);

Ticker.showing

described in Control

Showing determines whether or not a component is visible. A page element that is not showing has its css display style set to none; it is still a part of the DOM model of the page, but no longer affects the layout of other components.

Uncheck the checkbox to make this widget invisible. A widget that is not showing can still be selected by navigating to that widget in the model tree and clicking it.

Use within the javascript editor

this.<UniqueID>.setShowing(true)

Ticker.startNow

Press the startNow "..." button to enable the ticker within Studio (during design) to see the ticker behavior.

Ticker.stopNow

Press the stopNow "..." button to disable the ticker within Studio (during design).

Ticker.verticalAlign

described in Container

This property controls how contained widgets are aligned vertically (e.g., top to bottom) within this widget container.

1. top: each widgets inside this container will be displayed aligned to the top of the container
2. middle: each widget inside this container will be displayed centered vertically inside the container.
3. bottom: each widget inside this container will be displayed aligned to the bottom of the container

Use within the javascript editor

this.<UniqueID>.setVerticalAlign("middle");

Ticker.width

described in Control

The width of your widget can be specified in px or % (i.e 50px, 75%).

You can have a row of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% width widget gets twice as much space as a 40% widget; they will fit in the designated space even though the sum is 120%).

Use within the javascript editor

this.<WidgetID>.setWidth("80px");