Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser

The Visual Mobile Designer (VMD) is a graphical interface within NetBeans Mobility that enables you to design mobile applications using drag and drop components. The VMD allows you to define the application flow and design your GUI using the components supplied by the IDE or components you design yourself. The VMD contains many standard User Interface (UI) components that you can use to create applications such as Lists, Alerts, Forms and Images. It also includes custom components that simplify the creation of more complex features, such as Wait Screens, Splash Screens, Table Items and more.

File browser is a custom component that provides a user interface to work with device file system. It provides basic functionality to browse content of devices storage memory. This component utilizes The FileConnection API which is part of the JSR-75 specification for PDA Optional Packages for the Java ME Platform. JSR-75 is not a part of the MIDP 2.0 specification which is why this custom component can be used only with JSR-75 enabled devices.

This tutorial shows you how to use the File Browser component in a mobile application for JSR-75 enabled devices. You'll learn the basic features of the components, and how to browse content of device memory storage and display content of chosen text files. In addition to the File Browser custom component we'll use two other MIDP components: Splash Screen and TextBox.

Contents

Content on this page applies to NetBeans IDE 6.9 or later

To follow this tutorial, you need the software and resources listed below.

Software or Resource Version Required
NetBeans IDE with Java ME Version 6.9 or later
Java Development Kit (JDK) Version 6 or version 7

Installing and Running the Sample Application

Before we begin, you might want to see final result of the tutorial.

Take the following steps to install the FileBrowserExample application:

  1. Download filebrowserexample.zip.
  2. Unzip the file.
  3. In the IDE, choose File > Open Project and browse to the folder that contains the unzipped files with the FileBrowserExample project.
  4. Click Open Project.
    The Projects window should look like the following:

    Projects window with FileBrowserExample opened

  5. In the Projects window, right-click the project node and choose Run Project (or press F6 key). As the application runs, an emulator window opens and displays the application running in the default device emulator.
  6. In the Emulator window, click the button underneath "Launch."
    The emulator displays a Splash Screen component then File Browser, as shown:

    WTK 2.5 emulator displaying the sampel File Browser application

  • Move the cursor up and down to navigate through available files and folders.
  • Click the button underneath "Select" to open folder or file.
  • Click the button underneath "Exit" to close the application.

top

Creating an Application with the File Browser Custom Component

Now that you have seen the File Browser component in action, let's go back to the beginning and create this application. To create the application, do the following:

  1. Create the FileBrowserExample project
  2. Add packages and a visual MIDlet to the FileBrowserExample project
  3. Add components to the FileBrowserExample
  4. Add Commands to the TextBox and File Browser Components
  5. Connect the Components to create an application flow
  6. Insert method loadTextFile into the source code
  7. Run the Project

Creating the FileBrowserExample Project

  1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select JavaME. Under Projects, select Mobile Application and click Next.
  2. Enter FileBrowserExample in the Project Name field. Change the Project Location to a directory on your system. From now on, let's refer to this directory as $PROJECTHOME.
  3. Uncheck the Create Hello MIDlet checkbox. Click Next.
  4. Leave the Sun Java Wireless Toolkit as the selected Emulator Platform. Click Next.
  5. Click Finish.

    Note: The project folder contains all of your sources and project metadata, such as the project Ant script. The application itself is displayed in the Flow Design window of the Visual Mobile Designer.

Adding Packages and a Visual MIDlet to the FileBrowserExample Project

  1. Choose the FileBrowserExample project in the Project Window, then choose File > New File (Ctrl-N) . Under Categories, select Java Classes. Under File Types, select Java Package. Click Next.
  2. Enter filebrowserexample in the Package Name field. Click Finish.
  3. Choose the filebrowserexample package in the Project window, then choose File > New File (Ctrl-N). Under Categories, select MIDP. Under File Types, select Visual MIDlet. Click Next.
  4. Enter FileBrowserExample into MIDlet Name and MIDP Class Name fields. Click Finish.

Adding Components to the FileBrowserExample

  1. Switch your Visual MIDlet to the Flow Designer window. Drag the following components from the Component Palette and drop them in the Flow Designer:
    • Splash Screen
    • TextBox
    • File Browser
  2. Click on splashScreen and, in the Properties Window, change value of property Text from null to the File Browser Example.

Adding Commands to the FileBrowserExample

  1. Open the Flow Designer Window.
  2. Choose Exit Command from the Commands section of the Component Palette. Drag and drop it into Flow Designer Window (fileBrowser component).
  3. Choose the Back Command from the Commands section of the Component Palette and drag and drop it into the textBox component.

Connecting the Components to Create an Application Flow

In the Flow design window, click on the Start Point on the Mobile Device and drag it to the spalshScreen component. In the same manner, connect the components together as shown in the following graphic.

Shows the Flow Designer with components conneted by command lines

Inserting a Pre-action into the Source Code

  1. Switch to the Source Window.
  2. Insert the following code at the end of the source code. This method is responsible for reading the selected files:
        /** 
        * Read file
        */ 
        private void readFile() {
            try {
                FileConnection textFile = fileBrowser.getSelectedFile();
                getTextBox().setString("");
                InputStream fis = textFile.openInputStream();
                byte[] b = new byte[1024];
                int length = fis.read(b, 0, 1024);
                fis.close();
                if (length > 0) {
                    textBox.setString(new String(b, 0, length));
                }
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
        
  3. Find commandAction method in the source code:
    Insert readFile(); into pre-action section of the FileBrowser.SELECT_FILE_COMMAND (right after: if (command == FileBrowser.SELECT_FILE_COMMAND), where it says //write pre-action code here):

Running the Project

Press <F6> to Run the main project or select Run > Run Main Project.

top

Javadoc for the File Browser Component

The NetBeans IDE provides API Javadocs for the File Browser component, as well as other components you can use in the VMD. To read the Javadocs for the File Browser component, complete the steps below:

  1. Place the cursor on the FileBrowser component in the source code and press Ctr-Shift-Space (or choose Source > Show Documentation).
    The Javadoc for this element displays in a popup window.
  2. Click the Show documentation in external web browser icon (Show documentation in external web browser) in the popup window to view the detailed information about the FileBrowser component in your browser.

top


See Also

top

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo