Widgets on iDevices

From KickApps Documentation

Contents 1 Announcing iDevice support for widgets and video players 1.1 What's supported? 1.1.1 Components 1.1.2 Events 1.1.3 Actions 1.1.4 Videos 1.2 How does it work?

Announcing iDevice support for widgets and video players

We are now offering support for KickApps widgets and video players on the iPhone, iPad, and iPod. These devices don't support Flash, so we've set up new forms of embed code that identify these devices and serve them HTML5 versions of your widgets and video players. You can design once in the App Studio and publish embed code as usual, and iDevice users will receive the same experience they have from the desktop, for supported components.

What's supported?

Components

The initial release will support fully skinned custom video players, playlists, and list widgets, composed of the following components:

• Video Player
• Button
• Image
• Text
• Rectangle
• Scrubber
• Volume control
• Custom List (partial support)

Events

• Button
  • Click
• Video Player
  • Media Playing
  • Media Paused

Actions

• Video Player
  • Change Selection
  • Fullscreen
  • Mute
  • Pause
  • Play
  • Seek to time
  • Show/Hide

Videos

Please note: iDevices only support H.264-encoded .mp4 video files. All videos uploaded to KickApps are now encoded to iDevice-compatible .mp4 files; however, prior to 7-23-10, .flv files uploaded to KickApps were not encoded to iDevice-compatible .mp4s. All other video files were encoded to iDevice-compatible .mp4s. If a video uploaded prior to 7-23-10 is not playing on an iDevice, re-uploading it now will ensure that it does.

How does it work?

In the App Studio's View menu, you'll find an option called iDevice Safe Mode. In iDevice Safe Mode, all the unsupported components, templates, and plug-ins are removed from the component panels in the left column. Unsupported components that you've already added to the stage will appear with a red border indicating that they won't appear on iDevices.

File:IDeviceSafeMode.png

We've also modified the widget preview screen to give you Flash, iDevice, and Side By Side previews of your widget so you can easily compare the experience in the different environments. Please note that the iDevice preview can't render the exact experience that iDevice users will have, because Flash-supporting browsers render things a little differently than does the iDevice browser. For best results we recommend testing from an iDevice.

File:Side by side 2.png

When you're ready to publish, just copy the embed code and paste it into your page as usual. If you'd like to publish an existing widget with iDevice support, simply re-save it in the App Studio and paste the iDevice embed code into your page.

File:IDeviceEmbedCode.png