All Articles

Using the Rating Component

Josh — Fri, 24 Jul 2009 17:58:20 +0000

The Rating component enables you to

Use your own images for rating icons

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.
Upload your images into the App Studio Assets window, available under Windows > App Studio Assets
Drag down an Advanced List component.
Drill into the Advanced List by double-clicking on it, then click on the rating stars.
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:

Choose where to get the rating value from

In the Rating Component tab, click the Select from feed button.
Select the feed node containing the rating value. In KickApps feeds, this node is called ka:rating.
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.

Create an Advanced List

Josh — Wed, 15 Jul 2009 18:51:38 +0000

The Advanced 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 Advanced List. Follow these steps to create your own Advanced List.

Drag an Advanced List to the stage.
Set the feed that you'd like to use for your list by picking from the dropdown or pasting in a feed URL.
This is how your list will look by default. In the Advanced List properties panel, you have all the usual configurations for layout, background, border, and scrollbar.
With a little styling, my Advanced List looks like this:
Double click the Advanced 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.
Drag an image component into the cell to display the profile photo of the member who uploaded this video.
With the image component selected, click the Select from feed button.
Scroll down to the "uploadedByThumbnail" node in the Feed Element Selector window. Click on this row, then click Apply.
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.
In the Feed Element Selector Window, pick out the uploadedByURL node. Click apply.
Click the Add button to add this action to your component, then repeat this process for the text component displaying the member's username.
Done:

KickApps Media Window

Josh — Tue, 07 Jul 2009 13:50:44 +0000

The KickApps Media window enables you to search the media in your system from within the App Studio and use the results as image components or as elements in a playlist.

To access this window, select Window > KickApps Media.

You can search for videos, audio tracks, photos, and members from within this window using keywords, tags, and admin tags. Please note that multiple search terms must be separated by commas, and searches do not support partial matches (so searching for "Apps" would not return an item tagged "KickApps"; to get this item you'd need to use the full tag, "KickApps").

To use a media item from the KickApps Media window as an image component in your widget, simply drag and drop its thumbnail onto the stage.

Learn how to use the KickApps Media window to create playlists.

Create a playlist

Josh — Thu, 02 Jul 2009 15:31:27 +0000

You can create playlists for video players, audio players, slideshows, 3-d galleries, carousels, and lists by dragging and dropping items into their Playlist trays. In this case we'll create a playlist for a video player.

Start by dragging a video player to the stage.
In the video player's Content panel, select Playlist.
Double-click the Playlist tray to open your KickApps Media window.
Drag media items from the KickApps Media window into the Playlist tray. You can drag and drop items within the tray to re-arrange your playlist

Your video player will now play the contents of its playlist.

App Studio Assets

Josh — Tue, 30 Jun 2009 22:26:00 +0000

The App Studio Assets window enables you to

To upload an image or .swf file,

In the App Studio, select Windows > App Studio Assets.
Click the Add button.
To upload a file from your computer, click Browse. (Tip: SHIFT-click in your file browser to upload multiple files.) To add a file from a URL, paste it in the text field and click Add.
The file(s) will be automatically uploaded and will appear in your App Studio Assets window.

To use an image or .swf file from your App Studio Assets in your current widget,

Open the App Studio Assets window by clicking Windows > App Studio Assets.
Drag the file you'd like to use from the App Studio Assets window onto the stage.

To use an image or .swf file as a background image for a component,

Open the App Studio Assets window by clicking Windows > App Studio Assets.
Select the component whose background image you'd like to change.
Drag an image or .swf file from the App Studio Assets window and drop it onto the Background Image URL field in your component's properties panel.
Oila!

To edit an image file in Pixlr,

Open the App Studio Assets window by clicking Windows > App Studio Assets.
Select the image file that you'd like to edit, and click the Edit button.
A new browser tab will open with your image loaded into Pixlr. Edit your image in this window until you're satisfied with it, then click File > Save.
A Save dialogue box will come up. Make sure to select the "Save to the referrer" to save the edited file back to KickApps. Please note: saving this file back to KickApps will overwrite your original file. If you'd like to add the edited image to KickApps as a separate image, select "Save it to my computer", and upload this new image into the App Studio Assets window.
Return to the browser tab or window in which you have the App Studio opened. Click the Refresh button in the App Studio Assets window to update it with the edited image.

Making a KickApps Search Component

Josh — Fri, 12 Jun 2009 22:02:42 +0000

In Making a YouTube Search Component I showed you how to assemble a dynamic search field that would poll YouTube's RSS API and show the results in a list component. In response we got a lot of feedback asking how to make a search component that would work with KickApps, so I've whipped up a step-by-step for this one too:

Drag an advanced video player, a text input component, a button, and a list component to the stage.
Select the button and add a new action to it:
Use this string for the value of the new media URL (replace "Text input 1" with the name of your text input component and the value of theas parameter with your own affiliate site ID, which you can find in any of your KickApps-powered URLs):
http://serve.a-feed.com/service/getFeed.kickAction?as=30483&mediaType=videos&quantity=20&keywords=#{Text Input 1.text}
That takes care of updating the list with search results from your community when users click the search button. But many users are accustomed to pressing the enter or return keys on their keyboards. To do that, add a new action to the text input component. The event will be "Keyboard Enter"; use the media URL from the previous step.
Done. Switch to Preview mode to try it out!

In this example I used the keywords parameter to filter the feed results. This parameter searches for media with the search term(s) within the tags, admin tags, media title, media description and username properties of all media items in your system. If you prefer to search on a narrower parameter like title or tags, just substitute in those parameters. You can find details and more rss filters in the RSS API doc.

If you'd like to import this widget into your App Studio, select Import from the Menu in the App Studio, and paste in the widget source code from the field below.

Make a dynamic counter for a slideshow

Josh — Fri, 15 May 2009 17:19:34 +0000

In the 4.0 Release Note I mentioned that you can build a dynamic counter for a slideshow by populating text components with values from the slideshow. Getting this right is trickier than it sounds, but with a few clicks and some clever JavaScript (thanks Derek!), you too can share in the glory that is the dynamic counter.

How to distinguish KickApps list pages via JavaScript

mauvis — Thu, 14 May 2009 22:24:05 +0000

To distinguish a list page in your JavaScript you can use the trusted Ka.Info.PAGE variable you learned from this tutorial paired with a handy dandy utility function called Ka.Util.getLocationParam - a utility method to get the mediaType GET parameter from the URL. Here's an example:

Code snippet - How to distinguish KickApp's list pages via JavaScript on Snipplr