Implementing the movie list screen

The MoviesListScreen class provides the UI that displays the list of movies to the user. The class organizes the information into two adjacent panels using the landscape style layout.

The MoviesListScreen class creates the following UI:

Figure: Movie list screen

To implement the movie list screen:

  1. Create the MoviesListScreen.java class file.

  2. Import the required classes.

    import java.io.InputStream;
    import java.io.IOException;
    
    import com.nokia.example.moviebooking.moviedb.Movie;
    
    import org.eclipse.ercp.swt.mobile.Command;
    import org.eclipse.swt.SWT;
    import org.eclipse.swt.events.SelectionEvent;
    import org.eclipse.swt.events.SelectionListener;
    import org.eclipse.swt.graphics.Image;
    import org.eclipse.swt.layout.FormAttachment;
    import org.eclipse.swt.layout.FormData;
    import org.eclipse.swt.layout.FormLayout;
    import org.eclipse.swt.layout.GridData;
    import org.eclipse.swt.widgets.Composite;
    import org.eclipse.swt.widgets.Label;
    import org.eclipse.swt.widgets.List;
    import org.eclipse.swt.widgets.Shell;
  3. Set MoviesListScreen to implement SelectionListener, and create the required variables.

    class MoviesListScreen implements SelectionListener {
    
        private Command reserveMovieCommand, exitCommand;
        private MovieBooking main;
        private List moviesList;
        private java.util.Vector movies;
        private Composite mainComposite;
        private Image image;
        private Label imageLabel;
        private Label descriptionText;
  4. Create the Shell.

        MoviesListScreen(MovieBooking main, Shell mainShell,
                java.util.Vector movies) {
            this.main = main;
            this.movies = movies;
    
            mainShell.setText("Movies");
            mainShell.setRedraw(false);
            mainComposite = new Composite(mainShell, SWT.NONE);
    
            // Size and location of this Composite are controlled by
            // the GridLayout of the mainShell.
            mainComposite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
            mainShell.layout();
  5. Create the widgets. For a full list of available widgets and their details, see the org.eclipse.swt.widgets package.

            // This contains the list of movies
            moviesList = new List(mainComposite, SWT.BORDER);
    
            // Widgets to describe the movie
            imageLabel = new Label(mainComposite, SWT.TOP | SWT.CENTER);
            descriptionText = new Label(mainComposite, SWT.WRAP | SWT.CENTER);
    
            // Populate moviesList
            for (int i = 0; i < movies.size(); ++i) {
                Movie m = (Movie) movies.elementAt(i);
                moviesList.add(m.getName());
            }
            if (movies.size() > 0) {
                moviesList.select(0);
                movieSelected(0);
            }
            moviesList.addSelectionListener(this);
  6. Organize the widgets by using a layout. For a full list of available layouts and their details, see the org.eclipse.swt.layout package.

            // Distribute the widgets using a FormLayout
            FormLayout layout = new FormLayout();
            mainComposite.setLayout(layout);
    
            // Set movies list location
            FormData moviesListData = new FormData();
            moviesListData.top = new FormAttachment(0);
            moviesListData.left = new FormAttachment(0);
            moviesListData.right = new FormAttachment(50);
            moviesListData.bottom = new FormAttachment(100);
            moviesList.setLayoutData(moviesListData);
    
            // Set image location
            FormData imageLabelData = new FormData();
            imageLabelData.top = new FormAttachment(moviesList, 0, SWT.TOP);
            imageLabelData.left = new FormAttachment(moviesList);
            imageLabelData.right = new FormAttachment(100);
            imageLabel.setLayoutData(imageLabelData);
    
            // Set image location
            FormData descriptionTextData = new FormData();
            descriptionTextData.top = new FormAttachment(imageLabel);
            descriptionTextData.left = new FormAttachment(
                    imageLabel, 0, SWT.LEFT);
            descriptionTextData.right = new FormAttachment(100);
            descriptionTextData.bottom = new FormAttachment(
                    moviesList,
                    0,
                    SWT.BOTTOM);
            descriptionText.setLayoutData(descriptionTextData);
    
            // Apply the FormLayout
            mainComposite.layout();
            mainShell.setRedraw(true);
  7. Add Commands to the screen:

    • exitCommand is used to exit the MIDlet.

    • reserveMovieCommand is used to reserve a movie. The setDefaultCommand method is used to set this command as a default command, meaning that a device selection key can be used to activate the command.

    Use the setText method to define the text to be displayed for the commands. The commands are associated with a typed listener called SelectionListener, which invokes the appropriate method after an event has been generated by the Control. For more information on eSWT API typed listeners, see the org.eclipse.swt.events package.

            // Add commands
            exitCommand = new Command(mainShell, Command.EXIT, 0);
            exitCommand.setText("Exit");
            exitCommand.addSelectionListener(this);
    
            reserveMovieCommand = new Command(mainShell, Command.GENERAL, 1);
            reserveMovieCommand.setText("Reserve");
            reserveMovieCommand.addSelectionListener(this);
            reserveMovieCommand.setDefaultCommand();
        }
  8. Define handlers for the generated events.

        // Called when a command is invoked or a movie is selected
        public void widgetSelected(SelectionEvent e) {
            if (e.widget == exitCommand) {
                destroy();
                main.exit();
            } else if (e.widget == reserveMovieCommand) {
                if (moviesList.getSelectionIndex() >= 0) {
                    // Order of operations is important.
                    // We need to destroy before reserve that will create a new UI.
                    // But need to call moviesList.getSelectionIndex() before destroy.
                    Movie selectedMovie = (Movie) movies.elementAt(moviesList.getSelectionIndex());
                    destroy();
                    main.startReserve(selectedMovie);
                }
            } else if (e.widget == moviesList) {
                // This is called when the user selects a movie
                movieSelected(moviesList.getSelectionIndex());
            }
        }
    
        public void widgetDefaultSelected(SelectionEvent e) {
            // Do nothing
        }
    
        // Called when a movie is selected.
        // Take the picture and name and put in the
        // right side window.
        private void movieSelected(int index) {
            if (index >= 0) {
                Movie m = (Movie) movies.elementAt(index);
                if (m != null) {
                    if (m.getImageLocation() != null) {
                        try {
                            InputStream stream = getClass().getResourceAsStream(
                                    m.getImageLocation());
                            if (stream != null) {
                                Image newImage = new Image(mainComposite.getDisplay(), stream);
                                imageLabel.setImage(newImage);
                                if (image != null) {
                                    image.dispose();
                                }
                                image = newImage;
                                stream.close();
                            }
                        } catch (IOException e) {
                            // Do nothing, a picture is missing
                        }
                        descriptionText.setText(m.getDescription());
                    }
                }
            }
        }
    
        private void destroy() {
            // Dispose the widgets by disposing the parent
            mainComposite.dispose();
            reserveMovieCommand.dispose();
            exitCommand.dispose();
            // Dispose the current image
            if (image != null && !image.isDisposed()) {
                image.dispose();
            }
        }
    }

Now that you have implemented the movie list screen, implement the reservation screen.