Auto List

From KickApps Documentation

The Auto List consumes RSS feeds and automatically lays them out in your choice of several different arrangements. It can render any RSS feed, but is optimized to render KickApps RSS Feeds. Use the Custom List instead of the Auto List if you need complete control over which components are rendered in your list, the ability to skin each of them individually, and the ability to render content from any XML feed.

Contents 1 List Properties 2 List Item Properties 3 Click Action 4 Content 5 Fonts 6 Layout 6.1 Layout Constraints 7 Events 7.1 Standard Events 7.2 Auto List Events 8 Actions 8.1 Standard Actions 8.2 Auto List Actions

List Properties

Properties are configurable aspects of a component that let you customize the way it looks and how it works by changing their values in its configuration panel in the App Studio. You can also use JavaScript to change widget properties after the widget loads on a page using the setComponentProperty() method method of the Widget JavaScript API. Finally, you can use widget property values in Actions using our bracket literal syntax. For a listing of all properties on KickApps components, see our Properties Reference.

• Style
  • Row count
  • Column count
  • Background Color
  • Opacity
  • Background image URL
  • Border Color
  • Border Thickness
  • Corner Radius
    • Round the component's corners individually (click the link icon to break the link) or collectively (keep the link icon intact)
  • Enable Selection
    • Set whether the list can be used as a playlist for another component (like a video or audio player). The list item currently being played (or displayed, e.g. when the list is connected to a slideshow component) in the other component will have a different background color and clicking on any cell will give it the selected background color and play/display it in the component to which it is connected.
    • Preselect first item
      • Select the first item in the list
    • Selection color
      • Set a background color for the selected list item. A lighter shade of this color will be used as the background color of other list items when the user mouses over them.
• Show preloader
  • Show a spinning preloader animation while the component's content is loading
• Scrollbar
  • Vertical or horizontal
  • Track color
    • Select a background color for the scrollbar "track"
  • Thumb color
    • Select a background color for the actual scrollbar

List Item Properties

• Background Opacity
• Inner padding / margin
  • Inner padding sets negative space around the contents of the cell; margin sets negative space around this

    

• Border Color
• Border Thickness
• Corner Radius
  • Round all 4 corners of the component
• Alternating row colors
  • Set different background colors for odd and even rows
• Display Options
  • Choose which feed elements to render in list items
    • Image only
    • Image and title
    • Custom Meta
      • Image (slider controls image size)
      • Title
      • Description
      • Contributor Name
      • Points
      • Level
      • Date
      • Time
      • Rating
      • # of times viewed
      • # of times favorited (the number of KickApps community members who have added this item to their favorites list)

Click Action

• No click action
• Link to URL specified in feed
  • Where an item in the feed has an associated URL, link that item's image or text component to the associated URL (as a title to its play page, or a member's username to their profile page)
• Link to custom URL
  • Link all items to the same URL
• Play in
  • Clicking on the item should play or display it in the selected player component

Content

• Feed
  • Select a saved feed from the dropdown, or enter the URL of an mRSS or ATOM feed.
• Playlist
  • Click inside the empty playlist to reveal the KickApps Assets window, from which you can drag and drop media items into your playlist.

Fonts

The Auto List automatically detects text that should be linked to a URL. The Fonts panel for the Auto List has two tabs: a "Global" tab for regular, unlinked text, and a "Links" tab for linked text.

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.

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

Auto List 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.

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.

Auto List 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 |