Using the rating component

From KickApps Documentation

The Rating component enables you to use your own images to render ratings on media items instead of the default rating stars, choose where to get the rating value from, set the current and maximum ratings, and set the number of rating icons.

Contents 1 Use your own images for rating icons 2 Choose where to get the rating value from 3 Set the current rating 4 Set the maximum rating 5 Set the total number of rating icons 6 Component Reference 6.1 Content 6.2 Properties 6.3 Content 6.4 Layout 6.5 Layout Constraints 7 Events 7.1 Standard Events 8 Actions 8.1 Standard Actions

Use your own images for rating icons

1. Create your own rating icon images in your favorite image editor. One image should be of a single rating icon that is "full"; a second image should be of a rating icon that is "empty". Transparent .png's are usually a good choice.
2. Upload your images into the App Studio Assets window, available under Windows > App Studio Assets

1. Drag down an Advanced List component.
   
   
2. Drill into the Advanced List by double-clicking on it, then click on the rating stars.
   
3. Bring up the App Studio Assets window again, and drag your full and empty rating icons into the input fields in the Rating Component panel.
   

The finished product - Advanced List widget with custom rating icons:

Choose where to get the rating value from

1. In the Rating Component tab, click the Select from feed button.
   
   
2. Select the feed node containing the rating value. In KickApps feeds, this node is called ka:rating.
   
3. Click Apply

Set the current rating

You can use the Rating Component panel to change the rating of the items in your Advanced List. This is useful to see how your custom rating icons will look with items that have different ratings than the ones in your List. Just use the numeric stepper next to the current rating field. To switch back to populating the rating value from your feed, follow the directions above.

Set the maximum rating

If you're displaying ratings that aren't based on a 5 point ratings system, use the Max Rating field to adjust for the maximum rating in the ratings system that you're using.

Set the total number of rating icons

If you're displaying ratings that use more or fewer rating icons than five, use the Rating Icon Count field to set the number of rating icons that you'd like to display.

Component Reference

Content

Define rating manually

Enter an integer from 1 to 5.

Pull rating from selected media in...

Select a component from the dropdown that is populated by a KickApps feed. The rating component will then display the rating of the selected item in this component. Select the "Allow click to rate" checkbox to allow users to add a rating by clicking on one of the rating stars. In order to rate media, users must be logged in. You can determine whether a user is logged in by executing the "Check user login status" Action on the "Child components loaded" Event on the AppContainer, or log in a user by setting up a log in form with text input components and button component that has a "Log in user" Action assigned to its "Click" event.

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.

Single Rating Icon (filled)

Enter the URL to an image to use as the "full" rating icon or click Browse to open your App Studio Assets window, where you can select a previously added image, or upload a new one.

Single Rating Icon (empty)

Enter the URL to an image to use as the "empty" rating icon or click Browse to open your App Studio Assets window, where you can select a previously added image, or upload a new one.

Max Rating

Enter an integer that represents the maximum rating value for your rating component. Accepts integers from 0 - 1000.

Rating Icon Count

Enter an integer for how many rating icons should be displayed in the component. Accepts integers from 0 - 100.

Content

Enter the rating value manually, or have the rating component take its value from the selected item in a component of your choice.

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

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.