Actions

From KickApps Documentation

Actions enable you to add behavior or change components' properties in response to events initiated by the user or issued by widget components.

Contents 1 Add an action via the Actions window 2 Remove an action 3 Setting values for actions 4 Events Reference 4.1 Standard Events 4.2 3d Carousel Component 4.3 3d Gallery Component 4.4 AppContainer 4.5 Audio Component 4.6 Auto List Component 4.7 Button Component 4.8 Button Bar Component 4.9 Container Component 4.10 Image/.swf Component 4.11 List Component 4.12 Pages Component 4.13 Rating Component 4.14 Rectangle Component 4.15 Scrubber Component 4.16 Slide Component 4.17 Text Component 4.18 Text Input Component 4.19 Timer Component 4.20 Video Component 4.21 Video Player (basic, all-in-one player) 4.22 Volume Control Component 5 Actions Reference 5.1 Standard Actions 5.2 3d Carousel Component 5.3 3d Gallery Component 5.4 App Container 5.5 Audio Component 5.6 Auto List Component 5.7 Button Component 5.8 Button Bar Component 5.9 Container Component 5.10 Image/.swf Component 5.11 List Component 5.12 Pages Component 5.13 Rating Component 5.14 Rectangle Component 5.15 Scrubber Component 5.16 Slide Component 5.17 Text Component 5.18 Text Input Component 5.19 Timer Component 5.20 Video Component 5.21 Video Player (basic, all-in-one player) 5.22 Volume Control Component

Add an action via the Actions window

1. Select a component.
2. Open the Actions panel by clicking the Actions option under the Window menu.

   

3. Click the Add Action button.

   

1. The add/edit action window will appear.

   

2. Select the Event that you'd like to trigger your desired action from the Event dropdown. (Tip: type into the dropdown; it auto-completes. Click enter when you see the event you're looking for.)
3. Select the Action that you'd like to be executed when the event occurs.
4. If the action you chose requires a value, enter the value directly or click Select to choose the value of a component property.

   

5. Click Add.

Remove an action

1. Select a component.
2. Open the Actions panel.
3. Click on the action that you'd like to remove.
4. Click the garbage can icon.

Setting values for actions

There are 5 ways to set values for actions:

1. Enter a number (you can use up to 2 decimal places).
2. Use the value of any property on any component in your widget, including nested properties.

   Syntax:

   #{componentName.propertyName}

   Example:

   #{List1.height}

   Access properties of a component's parent using this syntax:

   #{Text Area 1.parent.height}

   The Advanced List component has a property called contentSource. contentSource returns the raw source of the Advanced List's content, e.g., its RSS, Atom, or XML feed. You can drill into nodes and properties of the contentSource by chaining their names onto contentSource, like so:

   #{Advanced List 1.contentSource.channel.item.0.link}

   The Advanced List also has a selectedItem property that represents its current item. This property can be chained with another property called xmlSource to retrieve and drill into the raw XML content of the selected item. In the example below, the Advanced List's content is an XML feed from Yes.com containing songs nodes that contain cover nodes containing URLs to cover art.

   #{Advanced List.selectedItem.xmlSource.cover}

3. Use JavaScript to compute a value from the values of one or more component properties.

   Syntax:

   javascript:eval(#{componentName1.propertyName} + #{componentName2.propertyName})

   Example:

   javascript:eval(#{List1.height} + #{Button1.height})

   You can also abbreviate "javascript" like this:

   js:eval(#{List1.height} + #{Button1.height})

4. Call a JavaScript function on the page that the widget is installed on.

   Syntax:

   javascript:functionName(optionalVariable)

   Example:

   javascript:incrementViewCount(#{VideoPlayer.selectedMedia.title})

5. Use relative values to increment or decrement from the current value of a property.

   Syntax:

   A number preceded by a plus or minus sign

   Example:

   + 10

Events Reference

Standard Events

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

3d Carousel Component

• #Standard Events
• Media Change

3d Gallery Component

• #Standard Events
• Media Change

AppContainer

• Child components loaded
• Click
• Comment list failure
  • The request to retrieve comments from the API failed.
• Comment list success
  • The request to retrieve comments from the API succeeded.
• Comment post failure
  • Posting a new comment to the API failed.
• Comment post failure - not logged in
  • The user submitting the comment is not logged in. Use this event to show a log in dialogue box.
• Comment post success
  • Posting a new comment to the API succeeded.
• Component loaded
• Double click
• Log in user failure
• Log in user success
• Log out user success
• Mouse down
• Mouse move
• Mouse up
• Roll out
• Roll over
• User login status logged in
• User login status not logged in

Audio Component

• #Standard Events
• Media Paused
• Media Playing
• Media Start
• Media End
• Media Percent Complete
  • Specify the percentage of playback at which this event should be fired
• Media Time Elapsed
  • Specify how many seconds of playback should occur before firing the event (whole seconds only; no decimals)
• Media Change

Auto List Component

• #Standard Events
• Media Change
• Media list failed to load
  • The list component requested a feed, but either didn't receive a response, or received an error.
• Media list is empty
  • The list component requested a feed and received a response, but that response doesn't contain any content items.
• Media list loaded
  • Fires when the component's feed, playlist, or content URL has loaded
  • Useful when you need a component to fetch its content from a list component. Without this event there's no way for you to be sure that the list component's content has actually loaded, which could result in your component attempting to retrieve its content value from the list before the list's content has loaded, resulting in your component's property being set to null. By using the Media list loaded event you can ensure that the list's content has loaded and that your component will be able to access it.

Button Component

• #Standard Events
• Toggled On
  • Issued whenever the button's "toggled" property changes from false to true. By default, this event is issued when the user clicks a button for the first, third, fifth, etc., time.
• Toggled Off
  • Issued whenever the button's "toggled" property changes from true to false. By default, this event is issued when the user clicks a button for the second, fourth, sixth, etc., time.

Button Bar Component

• #Standard Events

Container Component

• #Standard Events
• Child Components Loaded

Image/.swf Component

• #Standard Events
• Media failed to load

List Component

• #Standard Events
• Child components loaded
• Media change
• Media list failed to load
  • The list component requested a feed, but either did not receive a response, or received an error.
• Media list is empty
  • The list component requested a feed, but the response it received doesn't contain any content items.
• Media list loaded
  • Fires when the component's feed, playlist, or content URL has loaded
  • Useful when you need a component to fetch its content from a list component. Without this event there's no way for you to be sure that the list component's content has actually loaded, which could result in your component attempting to retrieve its content value from the list before the list's content has loaded, resulting in your component's property being set to null. By using the Media list loaded event you can ensure that the list's content has loaded and that your component will be able to access it.

Pages Component

• #Standard Events

Rating Component

• #Standard Events

Rectangle Component

• #Standard Events

Scrubber Component

• #Standard Events

Slide Component

• #Standard Events
• Media Paused
• Media Playing
• Media Change

Text Component

• #Standard Events

Text Input Component

• #Standard Events
• Keyboard Enter
• Value Changed

Timer Component

• #Standard Events
• Timer
  • This event fires every time the Timer component finishes a cycle.
• Timer Complete
  • This event only fires when the timer has completed all of its cycles.

Video Component

• #Standard Events
• Connecting to video server
• Connected to video server
• Buffering start
• Buffering complete
• Media change
• Media end
• Media list loaded
• Media paused
• Media percent complete
  • Specify the percentage of playback at which this event should be fired
• Media playing
• Media start
• Media time elapsed
  • Specify how many seconds of playback should occur before firing the event (whole seconds only; no decimals)
• Mouse over
• Request failed georestriction policy
• Request passed georestriction policy
• Video ad end
• Video ad start

Video Player (basic, all-in-one player)

• #Standard Events
• Connecting to video server
• Connected to video server
• Buffering start
• Buffering complete
• Media change
• Media end
• Media list loaded
• Media paused
• Media percent complete
  • Specify the percentage of playback at which this event should be fired
• Media playing
• Media start
• Media time elapsed
  • Specify how many seconds of playback should occur before firing the event (whole seconds only; no decimals)
• Mouse over
• Request failed georestriction policy
• Request passed georestriction policy
• Video ad end
• Video ad start

Volume Control Component

• #Standard Events

Actions Reference

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 components, see our Properties Reference.

3d Carousel Component

• #Standard Actions
• Change Selection
• Set Media URL
• Toggle auto-rotate
  • Off/On/Toggle
  • Delay: specify number of seconds to wait between the event and executing this action

3d Gallery Component

• #Standard Actions
• Change Selection
• Set Media URL

App Container

• #Standard Actions

Audio Component

• #Standard Actions
• Play/Pause
• Set Media URL
• Change Selection
• Mute

Auto List Component

• #Standard Actions
• Change Selection
• Scroll
  • Direction: Forward or Backward
  • Specify number of pixels to scroll
• Page Items
  • Direction: Forward or Backward
  • Option to page by just one media item (default pages by the number of visible list items in the list)
• Set Media URL
  • This action lets you set or update the URL from which a component pulls its content
  • Select a feed from the dropdown of saved feeds or enter a feed/media URL in the input box

Button Component

• #Standard Actions

Button Bar Component

• #Standard Actions

Container Component

• #Standard Actions
• Update Property

Image/.swf Component

• #Standard Actions

List Component

• #Standard Actions
• Change Selection
• Scroll
  • Direction: Forward or Backward
  • Specify number of pixels to scroll
• Page Items
  • Direction: Forward or Backward
  • Option to page by just one media item (default pages by the number of visible list items in the list)
• Set Media URL
  • This action lets you set or update the URL from which a component pulls its content
  • Select a feed from the dropdown of saved feeds or enter a feed/media URL in the input box

Pages Component

• #Standard Actions
• Change selected page to

Rating Component

• #Standard Actions

Rectangle Component

• #Standard Actions

Scrubber Component

• #Standard Actions

Slide Component

• #Standard Actions
• Change Selection
• Fullscreen
• Play/Pause
• Set Media URL
• Set selected index

Text Component

• #Standard Actions

Text Input Component

• #Standard Actions

Timer Component

• #Standard Actions
• Toggle Timer
  • On/Off/Toggle
  • Delay: number of seconds to wait between the event and executing this action
• Reset Timer
  • Makes the timer begin cycling as if it had just been loaded for the first time

Video Component

• #Standard Actions
• Change Selection
• Fullscreen
• Mute
• Play/Pause
• Set Media URL
• Video ad end
• Video ad start

Video Player (basic, all-in-one player)

• #Standard Actions
• Change Selection
• Fullscreen
• Mute
• Play/Pause
• Set Media URL
• Video ad end
• Video ad start

Volume Control Component

• #Standard Actions