Examples

The following sections contain several examples of use cases that are implemented using Scaleform CLIK components.

The following examples are simple in scope and complexity, but demonstrate the ease of use of the Scaleform CLIK framework to perform general tasks.

Figure 65: ScrollingList showing list items containing two labels.

The ScrollingList component by default uses the ListItemRenderer to display the row contents. However the ListItemRenderer only supports a single textField. There are many cases in which a list item may have more than one textField to display, or even non-textField resources such as icons. This example demonstrates how to add two textFields to a list item.

First, let us define the requirements. The objective will be to create a custom ListItemRenderer that will support two textFields. This custom ListItemRenderer should also be compatible with the ScrollingList. Since the plan is to have two textFields per list item, the data should also be more than just a list of single strings. Let us use the following dataProvider for this example:

list.dataProvider = [{fname: "Michael", lname: "Jordan"},
                           {fname: "Roger",   lname: "Federer"},
                           {fname: "Michael", lname: "Schumacher"},
                           {fname: "Tiger",   lname: "Woods"},
                           {fname: "Babe",    lname: "Ruth"},
                           {fname: "Wayne",   lname: "Gretzky"},
                           {fname: "Usain",   lname: "Bolt"}];

This data provider contains objects with two properties: fname and lname. These two properties will be displayed in the two list item textFields.

Since the default ListItemRenderer only supports one textField, it will need to functionality to support two textFields. The easiest way to accomplish this is to subclass the ListItemRenderer class. The following is the source code to a class called MyItemRenderer, which subclasses ListItemRenderer and adds in basic support for two textFields. (Put this code in a file called MyItemRenderer.as in the same directory as the FLA being worked on):

import scaleform.clik.controls.ListItemRenderer;

class MyItemRenderer extends ListItemRenderer {

        public var textField1:TextField;
        public var textField2:TextField;

        public function MyItemRenderer() { super(); }

        override public function setData(data:Object):void {
            this.data = data;
            textField1.text = data ? data.fname : "";
            textField2.text = data ? data.lname : "";
        }

        override protected function updateAfterStateChange():void {
            super.updateAfterStateChange();
            textField1.text = data ? data.fname : "";
            textField2.text = data ? data.lname : "";       
        }
}

The setData and updateAfterStateChange methods of ListItemRenderer are overridden in this subclass. The setData method is called whenever the list item receives the item data from its container list component (ScrollingList, TileList, etc.). In the ListItemRenderer, this method sets the value of the one textField. MyItemRenderer instead sets the values of both textFields and also stores a reference to the item object internally. This item object is reused in updateAfterStateChange, which is called whenever the ListItemRenderer’s state changes. This state change may require the textFields to refresh their values.

Thus far, the dataProvider with the complex list items and a ListItemRenderer class that supports rendering of those list items have been defined. To hook up everything with the list component, a symbol must be created to support this new ListItemRenderer class. For this example, the fastest way to accomplish this would be to modify the ListItemRenderer symbol to have two textFields called ‘textField1’ and ‘textField2’. Next this symbol’s identifier and class must be changed to MyItemRenderer. To use the MyItemRenderer component with the list, change the itemRenderer inspectable property of the list instance from ‘ListItemRenderer’ to ‘MyItemRenderer’.

Run the FLA now. The list should be visible containing list elements that display two labels: the fname and lname properties that were set in the dataProvider.

Figure 66: Per-pixel scroll view with content containing CLIK elements.

Per pixel scrolling is a common use case in complex user interfaces. This example demonstrates how to achieve this easily using the CLIK ScrollBar component.

To begin, create a new symbol for the scroll view. This provides a useful container that simplifies the math required to compute content offsets. Inside this scroll view container, set up the following layers in top to bottom order. These layers are not required, but are recommended for clarity:

• actions: Contains the ActionScript code to make the scroll view work;
• scrollbar: Contains an instance of the CLIK ScrollBar. Call this instance ‘sb’;
• mask: The mask layer defined by a rectangular shape or MovieClip. Set the layer property to be a mask as well;
• content: Contains the content to be scrolled;
• background: Optional layer containing a background to highlight the unmasked area.

Add the appropriate elements to the content layer and create a symbol that holds all of them. By creating a symbol that holds all of the content, the task of scrolling the content becomes easier. Call this content instance ‘content’ and set its y-value to 0. This ensures that the scrolling logic does not need to account for different offsets. However, such offsets may be required depending on the complexity of your scroll view.

Thus far the structure necessary to create a simple scrollview, as well as named elements that need to be hooked together have been defined. Put the following ActionScript code in the first frame of the code layer:

// 133 is the view size (height of the mask)
sb.setScrollProperties(1, 0, content.height - 133);
sb.position = 0;

sb.addEventListener(Event.SCROLL, onScroll, false, 0, true);
function onScroll(e:Event) {
        content.y = -sb.position;
}

Since the scrollbar is not connected to another component, it needs to be configured manually. The setScrollProperties method is used to make it scroll by one position, and set its minimum and maximum values to completely display the content. The scrollbar positions in this case are in pixels. Run the file now. The scrollview may now be changed by interacting with the scroll bar.