At last year’s BlackBerry Developer Conference, I hosted a session where I discussed various ways of previewing video content, and now I’d like to share the sample application that allows you to view video within a list-like structure. The application demonstrates how the BlackBerry® video API allows you to add video just like a field within your UI manager. I have included the project and its source code as an example.

The sample takes video from your memory card and displays them as a list. On focus, it starts playing inline, and stops when the focus is away. There are three simple steps to achieving this:

1. Inline Player Creation
a. Create a player using the media manager API
b. Obtain the controls of the player
c. Get a reference of the video field

2. Set relative video view position
a. Set the display position of the field
b. Set height and width of the video field
c. Add this field to the parent container to handle layout.

3. Handle Control Events
a. onFocus schedule a timer to detect Hover state
b. Start the player on Hover
c. onUnFocus stop the player

The setup code is in the InlineVideoManager class:

public InlineVideoManager(Video video, int videoWidth, int videoHeight){
p = Manager.createPlayer (url);
_player.realize();
VideoControl videoControl = (VideoControl) p.getControl("VideoControl");
Field field = (Field) videoControl.initDisplayMode(VideoControl.USE_GUI_PRIMITIVE,
"net.rim.device.api.ui.Field");
field.setPadding(3, 3, 3,3);
videoControl.setDisplayLocation(3, 3);
videoControl.setDisplaySize(videoWidth, videoHeight);
videoControl.setVisible(true);
……..
super.add(field )
}

Handling focus change events:

public void onFocus(int direction)
{
if(_player != null && _player.getState() == Player.STARTED){
try{
_player.stop();
}catch(Throwable e){}
}

_videoDelayTimer = new Timer();
_videoDelayTimer.schedule(new VideoDelayTimer(),1000);
super.onFocus(direction);
}

To get the entire package of source code, click here.

For the sake of simplicity, I have left the loading of videos from SD card synchronous, which means that if you have a lot of video, it may take some time. This just helps to demonstrate how you can embed video and play inline within your UI manager.

Have you had any experience with embedding video? Let us know in the comments.

• BlackBerry UI hierarchy (ARTICLE)
• Manage UI interactions (ARTICLE)
• Introduction to Resource Bundles (VIDEO)

Tune in next week for more Developer Resource Friday fun, and don’t forget to post a comment about your favorite article and articles you would like to see!

In our upcoming UI developer webinar, we will be discussing a host of details that are often overlooked in BlackBerry application UI design. With the material covered in this session, you’ll gain a new appreciation for how small changes can make a big difference.

So how do you get started? Here are some topics to think about before attending the webinar:

• The key is to be patient – don’t jump into your own BlackBerry application UI design until you have a firm grasp on what you think will appeal to users of your target device.
• Figure out the basic concepts for your screens, but do not design the screens themselves. That is, determine the principal features of each screen such as whether or not it will present items as a list, will it use tabs, will there be buttons, will there be menu controls, etc, but do not actually sketch out the screen. Instead, build a list of criteria that you want to consider for each and every screen and field. Items that you might want to consider are:
  1. colors
  2. fonts
  3. spacing / padding
  4. layout / alignment
  5. contrast / gradients
  6. images / backgrounds
  7. navigation
  8. shapes
  9. transitions / animations
  10. presentation and organization of data
• Before you make any decisions relating to the items of that list, take stock of what other applications have done, learning from the successes of others. Start with the applications that are resident on the BlackBerry® smartphone and carefully inspect some of the design choices in these apps. Pay special attention to UI features that might be applicable to your application and examine them with a fine tooth comb – what do you like about it, what could be improved, does the layout make sense, is it consistent with other applications on the smartphone, etc.
• If you’re able to replicate any UI resident in applications that ship with the BlackBerry smartphone, your users will bestow some inherent goodwill on your application since on first launch, there are elements to your UI that they can immediately identify, allowing them to leverage what they’ve already learned. Take a look at the UI Guidelines documentation to get a feel for common usage patterns on BlackBerry smartphones.
• Once you’ve picked up some of the existing interaction models, it’s time to set your application apart. The first step in differentiation is understanding what’s already out there. Research software stores like BlackBerry App World™, inspecting some of the most popular applications. Of the most downloaded applications, find a sampling of applications that have received very positive feedback and those that have been successful in spite of neutral or even negative reviews. Read the reviews to discover what users liked and what they disliked. Install and run these applications, learning everything you can from the various screens of these applications.
• When building your BlackBerry application UI, if you remember nothing else, think of this: do not overlook even the smallest of details. If an image isn’t crisp, if some piece of text isn’t exactly how you want it, or if something just doesn’t feel right, change it.

Want to learn more? Attend the webcast on February 16th for an in-depth exploration of the criteria items listed above along with an analysis of real-world examples that will help you apply the same critical eye to your own applications.

Webinar

Small Screens, Big Dreams: a Detail-Oriented Approach to BlackBerry Application User Interface Design

Date: February 16, 2010

Time: 2:00 PM EST (North America)

Presenters: Brian Zubert, Sr. Application Development Consultant

Register Now!