Custom List

From KickApps Documentation

The Custom List enables you to design completely customized list widgets using text, image, and any other components.  You have complete control to add whatever components you want in a list cell, as well as layout, styles, and formatting, and the design you create will be replicated in every cell of your Custom List.  Importantly, the Custom List can display the contents of any XML document, including our traditional support for RSS and ATOM feeds.

Follow these steps to create your own Custom List.

1.  Drag a Custom List to the stage.
   
2. Set the feed that you'd like to use for your list by picking from the dropdown or pasting in a feed URL. Note: the Custom List component can consume any XML document, including RSS and ATOM feeds.
   "
3.  This is how your list will look by default. In the Custom List properties panel, you have all the usual configurations for layout, background, border, and scrollbar.
   
4. With a little styling, my Custom List looks like this:
   
5. Double click the Custom List to edit the actual list cells.  You'll see that only the first cell is available.  Every customization you make to this cell will be replicated in all subsequent cells. So the first thing I'll do here is re-arrange the components in this list cell and do a little styling.  You can see that the changes I've made to the first cell are reflected in the second.
   
6. Drag an image component into the cell to display the profile photo of the member who uploaded this video.
   
7. With the image component selected, click the Select from feed button.
   
8. Scroll down to the "uploadedByThumbnail" node in the Feed Element Selector window.  Click on this row, then click Apply.
   
9. The widget is almost done.  By default, the video thumbnail and title are set to link to the video's play page.  I'd also like the member's thumbnail and username to link to his or her profile page.  To do that, select the image component holding the thumbnail, open the Actions window, and add an Open Custom URL action on the Click event, then click the Select from feed button.
   
10. In the Feed Element Selector Window, pick out the uploadedByURL node.  Click apply.
    www.kickapps.com/documentation/images/stories/advancedlist6.png
11. Click the Add button to add this action to your component, then repeat this process for the text component displaying the member's username.
    
12. Done:
    

Contents 1 Layout 1.1 Layout Constraints 2 Events 2.1 Standard Events 2.2 List Component Events 3 Actions 3.1 Standard Actions 3.2 List Component Actions

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

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

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.

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