Day 2: Getting the First Screen to Come Up in the Simulator              

<< Back to Tutorial Home -  < Back to Day 1 - Forward To Day 3 >

If you've completed Day 1, your environment should be all set up and ready to go for writing the application.  Today, we'll get the project set up, add a few very simple classes, and run them in the simulator to make sure everything's coherent so far.

Checklist of Steps

• Start up Eclipse and start a new project called 'TrafficCam1'.  details
• Add a new package called 'com.bitrazor.tivo.trafficcam'.  details
• Add hme.jar and hme-host-sample.jar from the TiVo HME SDK to the project.  details
• Add bananas.jar from the Bananas toolkit to the project.  details
   
• Create a new class called 'TrafficCam'.  details
• Create a new class called 'ScreenTemplate'. details
• Add 'blue.jpg' and 'icon.png' to the package.  details
• Create a new class called 'InitialScreen' that extends ScreenTemplate.  details
   
• Create a run configuration for running the app in the simulator.  details
• Run the application in the simulator.  details

Details

Start up Eclipse and start a new project called 'TrafficCam1'.

Start up Eclipse from the desktop icon we created yesterday.  Do File - New - Project, then select 'Java Project':

Call it 'TrafficCam1', set the other options as follows, then click 'Finish.'

Eclipse should look something like this, with your new project listed in the Package Explorer:

Add a new package called 'com.bitrazor.tivo.trafficcam'.

Do File - New - Package, and enter com.bitrazor.tivo.trafficcam for the package name.  Click Finish.

Your Package Explorer view should now look something like this:

Add hme.jar and hme-host-sample.jar from the TiVo HME SDK to the project.

Right-click on the TrafficCam1 project and choose Properties:

Select 'Java Build Path' over on the left, then click the 'Add External Jars...' button.

Navigate over to the directory where you unzipped the TiVo HME SDK (if  you followed my example on Day 1, it'll be in c:\tivo\hme_sdk_1.4).  Hold down the Ctrl key and single-click hme.jar and hme-host-sample.jar.  Then click Open.

Add bananas.jar from the Bananas toolkit to the project.

Similar to the last step, right-click the TrafficCam1 project and select Properties.  Then select 'Java Build Path', and click 'Add External JARs...'  Navigate to the directory where you unzipped the Bananas toolkit (if you followed my example from Day 1, it'll be in c:\tivo\bananas_1.3).  Select 'bananas.jar', then click Open.  Your screen should look something like this:

Create a new class called 'TrafficCam'.

Now that the basics of the project are set up, we can start adding a couple classes.  We'll start with the main entry point class; we'll call it TrafficCam.  Right-click on the com.bitrazor.tivo.trafficcam package, then do 'New - Class'.

Enter 'TrafficCam' for the name (properly capitalized as shown), and set up the other options as shown:

Double-click TrafficCam.java in the Package Explorer to open it in the editor, then paste in the following contents (or, download the file from here: TrafficCam.java)

package com.bitrazor.tivo.trafficcam;

import com.tivo.hme.bananas.BApplication;
import com.tivo.hme.bananas.BView;
import com.tivo.hme.interfaces.IContext;

public class TrafficCam extends BApplication {
   public final static String TITLE = "Traffic Cam Viewer";

   public void init(IContext context) {
      try {
         super.init(context);
      } catch (Exception e) {
      }
      push(new InitialScreen(this), TRANSITION_NONE);
   }

   public boolean handleAction(BView view, Object action) {
      if (action.equals("pop")) {
         pop();
         return true;
      } 
      return super.handleAction(view, action);
   }
}

Don't worry if you don't understand any of the above code.  This is simply the standard pattern to follow when creating a new application.  This code creates the application, calls the first screen (called 'InitialScreen' -- we'll get to that in a minute), and handles killing the application properly.  Also, at this point, Eclipse should be showing one error (for "InitialScreen"; you can tell by the little marker to the left of the code).  We'll fix that in a minute.

Create a new class called 'ScreenTemplate'.

Since we might have several screens that we want to have the same look and feel (same background, same title, etc.), it might make sense to create a base class to do this work for us.  Then, future screen classes we create can just extend this screen template.  Let's create a class called 'ScreenTemplate' and do some basic things in there.

As before, right-click the package and do New - Class.  Enter 'ScreenTemplate' for the name, and set up the other options the same as in the TrafficCam class in the previous step.  Then, open up ScreenTemplate.java in the editor (again, by double-clicking on it in the Package Explorer), and paste in the following contents (or download the file from here: ScreenTemplate.java):

package com.bitrazor.tivo.trafficcam;
import java.awt.Color;

import com.tivo.hme.bananas.BApplication;
import com.tivo.hme.bananas.BScreen;
import com.tivo.hme.bananas.BText;

public class ScreenTemplate extends BScreen { 

   public ScreenTemplate(BApplication app) {
      super(app);

      // Background
      getBelow().setResource("blue.jpg"); 

      // Title
      BText title = new BText(getNormal(), SAFE_TITLE_H+100, SAFE_TITLE_V, 
       (getWidth()-(SAFE_TITLE_H*2))-100, 54);
      title.setValue("Traffic Cam Viewer");
      title.setColor(Color.yellow);
      title.setShadow(Color.black, 3);
      title.setFlags(RSRC_VALIGN_TOP);
      title.setFont("default-48.font");
   }
}

Add 'blue.jpg' and 'icon.png' to the package.

Note that the 'ScreenTemplate' class references an image called 'blue.jpg'.  I just use the one from the Bananas Sample. Drag it from its location in the Bananas toolkit (c:\tivo\bananas_1.3\sample\src\com\tivo\hme\samples\bananas) and drop it on the com.bitrazor.tivo.trafficcam package.  In this step, you want to be sure to drop it on the com.bitrazor.tivo.trafficcam package, not anywhere else.

If you do this step wrong, when you try to run the app, you'll get an error message similar to the following:

com.tivo.hme.sdk.HmeException: java.io.FileNotFoundException: blue.jpg

Repeat this process with the file 'icon.png', found in the same directory.  (When it's running, your application will be listed under 'Music, Photos, & More' on your main TiVo screen.  It is normal to have a little icon displayed next to your app in the list, and you can get this to happen simply by adding an icon graphic to your project.)

Create a new class called 'InitialScreen' that extends ScreenTemplate.

OK, we're almost ready to try running our app; we just need to add the InitialScreen class that we talked about earlier.  As before, right-click the package and do New - Class.  Enter 'InitialScreen' for the name, and set up the other options the same as in the previous steps.  Then, open up InitialScreen.java in the editor, and paste in the following contents (or download the file from here: InitialScreen.java):

package com.bitrazor.tivo.trafficcam;

import com.tivo.hme.bananas.BApplication;

public class InitialScreen extends ScreenTemplate {
    public InitialScreen(BApplication app) {
        super(app);
    }
}

At this point, we should have everything we need.  Eclipse should look something like this; notice the Problems tab at the bottom is selected, and there are no problems listed.

(Click for bigger view)

Create a run configuration for running the app.

Do 'Run - Run':

Select 'Java Application', then click 'New':

For the name, type in 'TrafficCam'. 

In the 'Main class' box, enter 'com.tivo.hme.host.sample.Main':

Now click the 'Arguments' tab, and in the 'program arguments' field, enter com.bitrazor.tivo.trafficcam.TrafficCam .  Proper capitalization is important, so you might just want to cut and paste it.

Now click 'Apply' to save the changes you've made, and leave the 'Run' dialog box open for now.

Run the application in the simulator.

Now, from that same dialog box, click 'Run'.  You should see some startup messages in the console similar to the following:

This means that the app is now running.  At this point, you can do one of two things:

1. Go over to your TiVo and look for the app in 'Music, Photos, & More' from the main TiVo menu
2. Use the Simulator

We will use the Simulator for now.  To do so, simply go to c:\tivo\hme_sdk_1.4 and double-click simulator.jar while the app is running.  On the 'Network' menu, select the correct network interface:

Then, on the 'Applications' menu, you should see the app running:

If all goes well, you should get a screen that looks like the following (note for Windows XP Service Pack 2 users: the first time you run the simulator, you may get a firewall warning; click 'Unblock' to allow the simulator to run).

Holy cow, it works!  If you've gotten to this point successfully, you are way over the hump in writing TiVo apps.

Congratulations!  You've now written a real app for TiVo.  Okay, it doesn't do much yet, but that's just a matter of time.  Tomorrow, we'll set this up to run on the actual TiVo box, and we'll add a few more goodies to the UI.

<< Back to Tutorial Home -  < Back to Day 1 - Forward To Day 3 >