Actions

From KickApps API Reference

(Redirected from Events and Actions)
Jump to: navigation, search

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

Contents

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.
Tip: You can also add an action by right-clicking your mouse and selecting Add Action from the context menu.
Tip: You can also add an action by right-clicking your mouse and selecting Add Action from the context menu.
  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
  • Roll Over
  • Roll Out
  • Component Shown
  • Component Hidden
  • Component Loaded
  • Mouse Down
  • Mouse Up
  • Double Click

Auto List Component

  • #Standard Events
  • Media Change
  • 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.

Custom List Component

  • #Standard Events
  • Media Change
  • 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.

Video 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

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

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.

Image/.swf Component

Slide Component

3d Carousel Component

3d Gallery Component

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.

Text Input Component

Actions Reference

Standard Actions

  • Copy to clipboard
  • Drag/Stop Drag
    • Choose a component
    • To: Off/On/Toggle
    • Delay: X seconds
  • Open custom URL
  • Open log in Page
  • Open more Page
  • Open sign up page
  • Open share panel
  • Open upload Page
  • Set depth
  • Show/Hide
  • Track event
Sends a custom event to Google Analytics when you have Google Analytics set up for the current widget. Google's definitions of the configurable parameters are included below. For more information, consult the Google docs.
Category (required)
The name you supply for the group of objects you want to track.
Action (required)
A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
Label (optional)
An optional string to provide additional dimensions to the event data.
Value (optional)
An integer that you can use to provide numerical data about the user event.
  • Tween Blur
  • Tween Color
  • Tween Drop Shadow
  • Tween Glow
  • Tween Property
  • Update Property

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

Video Component

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

Audio Component

Slide Component

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

3d Gallery Component

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

Image/.swf component

Button component

Text component

Text Input component

Retrieved from "http://www.kickdeveloper.com/api/index.php/Actions"