Button Bar

From KickApps Documentation

The Button Bar Component includes multiple buttons, arrayed horizontally or vertically, with a configurable amount of space between them. Each button can be associated with arbitrary data, which makes it easy to do things like change the content of a list component depending on which button is selected. This technique can be used to change the feed for a video player without having to set separate actions on a number of buttons (see next section for details). The Button Bar can also be used in conjunction with the Pages component to create tabbed interfaces.

Define buttons manually

Enter a button Label, and an optional icon or data to create new buttons. Data is exposed to the JavaScript API and can be accessed in Actions with the bracket syntax.

Use the Button Bar's data fields

In addition to changing the selected page in a Page component, the Button Bar can also be used to change the feed or media URL content in other components, like Lists, Video Players, Audio Players, and Slideshows. To use the Button Bar in this way,

Create multiple buttons in the Button Bar component.
In each button's "data" field, enter a URL that returns an RSS feed, XML, video, .mp3, image, or .swf file.
Select the Button Bar. Add an Action to the Button Bar's Click Event. The Action should be Update Property. Select the component whose content you want the Button Bar to change from the list, then, in the Value field, enter #{ButtonBar.selectedItem.data}, where "ButtonBar" is the name of your Button Bar component.

Define buttons from a Pages component

Select a Pages component to create as many buttons in the Button Bar component as there are pages in the selected Pages component. Button labels will be the same as the page titles, and clicking on a button will render the page associated to it in the Pages component.

Settings

Button Orientation
- Choose a horizontal or vertical orientation for your buttons.
Button Gap
- Define the distance between adjacent buttons, in pixels.
Toggle first button on load
- Puts the first (leftmost or topmost) button into its toggled, or active state when the component first loads. Useful when using the Button Bar component to create a tabbed interface.

Background & Border

Background & Border properties can be applied to buttons in each of their 4 states. To apply styles for a particular state, select the tab that corresponds to that state.

Background Image URL

Enter the URL to an image file in .jpg, .gif, or .png format, or click Browse to open the App Studio Assets window. You can select an image from your App Studio Assets by double-clicking on its icon or by dragging and dropping the icon into the Background Image input field, or upload a new image by clicking Add.

Tile Image
- Repeat the image in the X and Y directions to fill the area of the Button component
Scale Image
- Expand or contract the image to fit the area of the Button component

Icon URL: Enter the URL to an image file in .jpg, .gif, or .png format, or click Browse to open the App Studio Assets window. You can select an image from your App Studio Assets by double-clicking on its icon or by dragging and dropping the icon into the Icon input field, or upload a new image by clicking Add. Your selected image will be centered horizontally and vertically within the selected component.

The scrubber component is used in conjunction with the video and audio players to change positions in the video or audio track that's currently playing.

Properties

Layout
- Horizontal
- Vertical
Handle Dimensions
- Width
- Height

Background & Border

The play progress bar, load progress bar, handle, and background elements of the scrubber can all be styled individually, with the following options:

Icon URL: Enter the URL to an image file in .jpg, .gif, or .png format, or click Browse to open the App Studio Assets window. You can select an image from your App Studio Assets by double-clicking on its icon, or upload a new image by clicking Add. Your selected image will be centered horizontally and vertically within the selected component.

Layout

There are two types of containers: the widget canvas itself (background of the entire widget) is considered a container, and you can also create containers that enclose components within your widget. Like any standard component, containers that you create can be moved around the stage, resized, and styled. The most powerful feature of Containers, though, is their ability to fix the positions of their constituent components via layout constraints, which we'll cover below. To create a container, select multiple components, right-click, and select "Group in new container".

You can configure a container's background color, opacity, border color, border thickness, corner radius, and background image in its Properties panel:

You can also mask content in a container by selecting the Mask Content checkbox at the bottom of the panel above. With masking enabled, components that belong to the container but fall outside its bounds will be hidden. To indicate this, when you're editing a container that has masking enabled in Design mode, and then add a component outside the bounds of the container you're in, that component will be translucent:

Masking is useful for situations in which you want to animate a component into a container after it loads initially.

Layout Constraints

Layout constraints let you anchor components a certain distance away from the sides and axes of their containers. Components with layout constraints enabled maintain their offset distances when their containers are resized. To set layout constraints, double click on your container, then single click on a component within it. The Layout Constraints panel will appear:

The checkboxes along the top side of the square in the Layout Constraints panel can be used to anchor the selected component to the left, vertical center, and right sides of its container. The checkboxes along the left side of the square can be used to anchor the selected component to the top, horizontal center, and bottom sides of its container.

When you select a checkbox, a text input field appears across the box from it. The number in this field represents the offset distance, in pixels, from the selected side of the container. For example, this is what it looks like when you anchor to the left side:

If you then resize this container, the component maintains its distance from the left side:

Similarly, you can anchor a component to the top of its container, and it will maintain its distance from the top when its container is resized:

You can also anchor components to the horizontal and vertical center lines of their containers. This component is anchored to the horizontal center of its container. It maintains its distance from the horizontal center when its container is resized.

This component is anchored to the vertical center of its container. It maintains its distance from the vertical center when its container is resized.

Components anchored to opposite sides of their containers expand and contract to maintain their offsets. Below is a component anchored to both the left and right sides of its container. Note how it expands to maintain its distances from the left and right sides.

The component below is anchored to both the top and bottom sides of its container. It contracts when its container is resized.

Events

Standard Events

Click
Component hidden
Component loaded
Component shown
Double click
Mouse down
Mouse up
Roll out
Roll over

Actions

Standard Actions

Drag/Stop Drag
Set depth
Show/Hide
Tween Blur
Tween Color
Tween Drop Shadow
Tween Glow
Tween Property
Update Property
- For a listing of all properties on KickApps components, see our Properties Reference.

Fonts

Font: Choose the typeface you'd like to use.
Use embedded font: Embedded fonts are literally embedded into your widget, which means that your text will be visible to anyone who views your widget in the selected typeface with the properties you've set. Un-checking "Use embedded font" enables you to pick a font from your machine. When other people view your widget, they will see your text in the same font if they have that font on their machines; otherwise the widget will pick the closest approximation to this font from the embedded fonts and will render your text in this closest approximation. If you need to use characters that are not included in the English language, you'll need to de-select "Use embedded fonts".
Font style
Bold
Italic
Underline

Font color
Font size: 6pt - 28pt
Alignment Left Right Center

Layout

There are two types of containers: the widget canvas itself (background of the entire widget) is considered a container, and you can also create containers that enclose components within your widget. Like any standard component, containers that you create can be moved around the stage, resized, and styled. The most powerful feature of Containers, though, is their ability to fix the positions of their constituent components via layout constraints, which we'll cover below. To create a container, select multiple components, right-click, and select "Group in new container".

You can configure a container's background color, opacity, border color, border thickness, corner radius, and background image in its Properties panel:

You can also mask content in a container by selecting the Mask Content checkbox at the bottom of the panel above. With masking enabled, components that belong to the container but fall outside its bounds will be hidden. To indicate this, when you're editing a container that has masking enabled in Design mode, and then add a component outside the bounds of the container you're in, that component will be translucent:

Masking is useful for situations in which you want to animate a component into a container after it loads initially.