src/content/kb/71/javame/filebrowser.html - netbeans-website-cleanup - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <!--
 Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved.
 -->

 <HTML>
 <HEAD>
 <TITLE>Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser - NetBeans Java ME Tutorial</TITLE>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
 <link rel="stylesheet" type="text/css" href="../../../netbeans.css">
 <meta name="author" content="Karol Harelzak">
 </HEAD>

 <BODY>
 <a name="top"></a>
 <H1>Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser</H1>
 <p>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.</p>
 <p>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 <a href="http://jcp.org/en/jsr/detail?id=75">JSR-75 specification</a>
 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.</p>
 <P>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.
 </P>
 <!--<p class="notes"><b>Note:</b> If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/filebrowser.html">Creating a Mobile Device File Browser in NetBeans IDE 6.8</a> tutorial.</p>-->

 <p><b>Contents</b></p>
  <img  src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="Content on this page applies to NetBeans IDE 6.9 or later" title="Content on this page applies to NetBeans IDE 6.9 or later" >
   <ul class="class">
    <li><a href="#sample-app">Installing and Running the Sample Application</a></li>
    <li><a href="#create-app">Creating an Application with the File Browser
 Custom Component</a><div>
 <ul>
 	<LI><A HREF="#create">Creating the
 	FileBrowserExample Project</A>
 	</LI>
 	<LI><A HREF="#add">Adding Packages and a
 	Visual MIDlet to the FileBrowserExample Project</A>
 	</LI>
 	<LI><A HREF="#addcomponent">Adding
 	Components to the FileBrowserExample</A>
 	</LI>
 	<LI><A HREF="#addcommands">Adding
 	Commands to the FileBrowserExample</A>
 	</LI>
 	<LI><A HREF="#connect">Connecting the
 	Components to Create an Application Flow</A>
 	</LI>
 	<LI><A HREF="#insert">Inserting a Pre-action into
 the Source Code</A>
 	</LI>
 	<LI><A HREF="#run">Running the Project</A>
 	</LI>
 </ul></div></li>
    <li><a href="#javadoc-filebrowser">Javadoc for the File Browser Component</a></li>
    <li><a href="#see-also">See Also</a></li>
   </ul>
 <p><b>To follow this tutorial, you need the software and resources listed below.</b></p>

 <table>
         <tbody>
             <tr>
                 <th class="tblheader" scope="col">Software or Resource</th>
                 <th class="tblheader" scope="col">Version Required</th>
             </tr>
             <tr>
                 <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE with Java ME</a></td>
                 <td class="tbltd1">Version 6.9 or later</td>
             </tr>
             <tr>
                 <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td>
                 <td class="tbltd1">Version 6 or version 7</td>
             </tr>
         </tbody>
 </table>

 <a name="sample-app"></a>
 <H2>Installing and Running the Sample Application</H2>
 <P>Before we begin, you might want to see final result of the
 tutorial.
 </P>
 <P>Take the following steps to install the FileBrowserExample
 application:</P>
 <OL>
 	<LI>Download <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/filebrowserexample.zip">filebrowserexample.zip.
 	</A>
 	</LI>
 	<LI>Unzip the file.
 	</LI>
 	<LI>In the IDE, choose <tt>File</tt> &gt; <tt>Open Project</tt> and browse to the folder that contains the unzipped files with the <tt>FileBrowserExample</tt> project.</LI>
 	<li>Click Open Project.<br>
 	The Projects window should look like the following:
 	<p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/projects.png" NAME="graphics1" ALT="Projects window with FileBrowserExample opened" BORDER=1>
   </p></li>
 	<LI>In the Projects window,
 	right-click the project node and choose <tt>Run Project</tt> (or press F6
 	key). As the application runs, an emulator window opens and displays
 	the application running in the default device emulator.
 	</LI>
 	<LI>In the Emulator window, click the button underneath
 	&quot;Launch.&quot;<BR>The emulator displays a Splash Screen
 	component then File Browser, as shown:
 	<p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/file-browser_wtk.png" NAME="graphics2" ALT="WTK 2.5 emulator displaying the sampel File Browser application" BORDER=1>
   </p></li>
 </OL>
 <UL>
 	<LI>Move the cursor up and down to
 	navigate through available files and folders.
 	</LI>
 	<LI>Click the button underneath
 	&quot;Select&quot; to open folder or file.
 	</LI>
 	<LI>Click the button underneath &quot;Exit&quot; to close the
 	application.
 	</LI>
 </UL>
 <p class="align-center"><a href="#top">top</a></p>
 <a name="create-app"></a>
 <H2>Creating an Application with the File Browser
 Custom Component
 </H2>
 <P>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:
 </P>
 <OL>
 	<LI><A HREF="#create">Create the
 	FileBrowserExample project</A>
 	</LI>
 	<LI><A HREF="#add">Add packages and a
 	visual MIDlet to the FileBrowserExample project</A>
 	</LI>
 	<LI><A HREF="#addcomponent">Add
 	components to the FileBrowserExample</A>
 	</LI>
 	<LI><A HREF="#addcommands">Add
 	Commands to the TextBox and File Browser Components</A>
 	</LI>
 	<LI><A HREF="#connect">Connect the
 	Components to create an application flow</A>
 	</LI>
 	<LI><A HREF="#insert">Insert method
 	loadTextFile into the source code</A>
 	</LI>
 	<LI><A HREF="#run">Run the Project</A>
 	</LI>
 </OL>
 <H3><A NAME="create"></A>Creating the
 FileBrowserExample Project</H3>
 <OL>
 	<LI>Choose <tt>File</tt> &gt;  <tt>New Project
 	(Ctrl-Shift-N)</tt>. Under Categories, select JavaME. Under Projects,
 	select Mobile Application and click Next.
 	</LI>
 	<LI>Enter <CODE>FileBrowserExample</CODE>
 	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 <tt>$PROJECTHOME</tt>.
 	</LI>
 	<LI>Uncheck the Create Hello MIDlet
 	checkbox. Click Next.
 	</LI>
 	<LI>Leave the Sun Java Wireless Toolkit
 	as the selected Emulator Platform. Click Next.
 	</LI>
 	<LI>Click Finish.
 	<p class="notes"><b>Note:</b> 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. </p></LI>

 </OL>
 <H3><A NAME="add"></A>Adding Packages and a Visual
 MIDlet to the FileBrowserExample Project</H3>
 <OL>
 	<LI>Choose the <CODE>FileBrowserExample</CODE>
 	project in the Project Window, then choose <tt>File</tt> &gt; <tt>New File
 	(Ctrl-N)</tt> . Under Categories, select Java Classes. Under File Types,
 	select Java Package. Click Next.
 	</LI>
 	<LI>Enter <CODE>filebrowserexample</CODE>
 	in the Package Name field. Click Finish.
 	</LI>
 	<LI>Choose the <CODE>filebrowserexample</CODE>
 	package in the Project window, then choose <tt>File</tt> &gt; <tt>New File
 	(Ctrl-N)</tt>. Under Categories, select MIDP. Under File Types, select
 	Visual MIDlet. Click Next.
 	</LI>
 	<LI>Enter <CODE>FileBrowserExample</CODE> into MIDlet Name and MIDP
 	Class Name fields. Click Finish.
 	</LI>


 </OL>
 <H3><A NAME="addcomponent"></A>Adding Components to
 the FileBrowserExample</H3>
 <OL>
 	<LI>Switch your Visual MIDlet to the
 	Flow Designer window. Drag the following components from the
 	Component Palette and drop them in the Flow Designer:

 	<UL>
 		<LI>Splash Screen</LI>
 		<LI>TextBox</LI>
 		<LI>File Browser</LI>
 	</UL></LI>
 	<LI>Click on splashScreen and, in the Properties Window, change
 	value of property Text from <tt>null</tt> to the <tt>File
 	Browser Example</tt>.
 	</LI>
 </OL>
 <H3><A NAME="addcommands"></A>Adding Commands to the
 FileBrowserExample</H3>
 <OL>
 	<LI>Open the Flow Designer Window.
 	</LI>
 	<LI>Choose Exit Command from the
 	Commands section of the Component Palette. Drag and drop it into
 	Flow Designer Window (fileBrowser component).
 	</LI>
 	<LI>Choose the Back Command from the Commands section of the
 	Component Palette and drag and drop it into the textBox component.
 	</LI>
 </OL>
 <H3><A NAME="connect"></A>Connecting the
 	Components to Create an Application Flow</H3>
 <div>
 	<p>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.</p>
 	<p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/file-flow.png" NAME="graphics3" ALT="Shows the Flow Designer with components conneted by command lines"  BORDER=1>
   </p>
 </div>
 <H3><A NAME="insert"></A>Inserting a Pre-action into
 the Source Code</H3>
 <OL>
 	<LI>Switch to the Source Window.
 	</LI>
 	<LI>
 	  Insert the following code at the end of the source code. This
 	method is responsible for reading the selected files:
 	<br>
 	<PRE>    /**
     * Read file
     */
     private void readFile() {
         try {
             FileConnection textFile = fileBrowser.getSelectedFile();
             getTextBox().setString(&quot;&quot;);
             InputStream fis = textFile.openInputStream();
             byte[] b = new byte[1024];
             int length = fis.read(b, 0, 1024);
             fis.close();
             if (length &gt; 0) {
                 textBox.setString(new String(b, 0, length));
             }
         } catch (IOException ex) {
             ex.printStackTrace();
         }
     }
     </PRE></LI>
 	<LI><P>Find <tt>commandAction</tt> method in the source code:<BR>
 	Insert
 	<CODE>readFile();</CODE> into pre-action section of the
 	<CODE>FileBrowser.SELECT_FILE_COMMAND</CODE> (right after: <CODE>if
 	(command == FileBrowser.SELECT_FILE_COMMAND)</CODE>, where it says
 	<CODE>//write pre-action code here)</CODE>: </p>
 	</LI>
 </OL>
 <H3><A NAME="run"></A>Running the Project</H3>
 <div>
 	<p>
 	  Press &lt;F6&gt; to Run the main project or select <tt>Run</tt> &gt; <tt>Run Main Project</tt>.
 	</p>
 </div>
 <p class="align-center"><a href="#top">top</a></p>
 <a name="javadoc-filebrowser"></a>
 <H2>Javadoc for the File Browser Component</H2>

 <P>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:</P>
 <OL>
 <li>Place the cursor on the <tt>FileBrowser</tt> component in the source code and press Ctr-Shift-Space (or choose <tt>Source</tt> &gt; <tt>Show Documentation</tt>).<br>
 The Javadoc for this element displays in a popup window. </li>
 <li>Click the Show documentation in external web browser icon (<img src="../../../images_www/articles/71/mobility/filebrowser/show-doc-button.png" alt="Show documentation in external web browser">) in the popup window to view the detailed information about the <tt>FileBrowser</tt> component in your browser.</li>


 </OL>
 <p class="align-center"><a href="#top">top</a></p>

 <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=NetBeans%20Java%20ME%20Custom%20Component:%20File%20Browser">Send
   Us Your Feedback</a></div><br style="clear:both;" >
 <a name="see-also"></a>
 <h2>See Also</h2>
 <UL>
  <li><a href="smscomposer.html">Visual Mobile Designer Custom Components: Creating an SMS Composer Application</a></li>
  <li><a href="loginscreen.html">Visual Mobile Designer Custom Components: Creating Mobile Login Screens</a></li>
  <li><a href="pimbrowser.html">Visual Mobile Designer Custom Components: Creating a Personal Information Manager Application</a></li>
  <li><a href="splashscreen.html">Visual Mobile Designer Custom Components: Using Splash Screens in Java ME Applications</a></li>
  <li><a href="waitscreen.html">Visual Mobile Designer Custom Components: Creating Wait Screens for Mobile Applications</a></li>
 <li><a href="tableitem.html">Visual Mobile Designer Custom Components: Using Table Items in Java ME Applications </a></li> <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li>
 </UL>
 <p class="align-center"><a href="#top">top</a></p>
 </BODY>
 </HTML>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

	<!--
	Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved.
	-->

	<HTML>
	<HEAD>
	<TITLE>Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser - NetBeans Java ME Tutorial</TITLE>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
	<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
	<meta name="author" content="Karol Harelzak">
	</HEAD>

	<BODY>
	<a name="top"></a>
	<H1>Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser</H1>
	<p>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.</p>
	<p>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 <a href="http://jcp.org/en/jsr/detail?id=75">JSR-75 specification</a>
	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.</p>
	<P>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.
	</P>
	<!--<p class="notes"><b>Note:</b> If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/filebrowser.html">Creating a Mobile Device File Browser in NetBeans IDE 6.8</a> tutorial.</p>-->

	<p><b>Contents</b></p>
	<img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="Content on this page applies to NetBeans IDE 6.9 or later" title="Content on this page applies to NetBeans IDE 6.9 or later" >
	<ul class="class">
	<li><a href="#sample-app">Installing and Running the Sample Application</a></li>
	<li><a href="#create-app">Creating an Application with the File Browser
	Custom Component</a><div>
	<ul>
	<LI><A HREF="#create">Creating the
	FileBrowserExample Project</A>
	</LI>
	<LI><A HREF="#add">Adding Packages and a
	Visual MIDlet to the FileBrowserExample Project</A>
	</LI>
	<LI><A HREF="#addcomponent">Adding
	Components to the FileBrowserExample</A>
	</LI>
	<LI><A HREF="#addcommands">Adding
	Commands to the FileBrowserExample</A>
	</LI>
	<LI><A HREF="#connect">Connecting the
	Components to Create an Application Flow</A>
	</LI>
	<LI><A HREF="#insert">Inserting a Pre-action into
	the Source Code</A>
	</LI>
	<LI><A HREF="#run">Running the Project</A>
	</LI>
	</ul></div></li>
	<li><a href="#javadoc-filebrowser">Javadoc for the File Browser Component</a></li>
	<li><a href="#see-also">See Also</a></li>
	</ul>
	<p><b>To follow this tutorial, you need the software and resources listed below.</b></p>

	<table>
	<tbody>
	<tr>
	<th class="tblheader" scope="col">Software or Resource</th>
	<th class="tblheader" scope="col">Version Required</th>
	</tr>
	<tr>
	<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE with Java ME</a></td>
	<td class="tbltd1">Version 6.9 or later</td>
	</tr>
	<tr>
	<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td>
	<td class="tbltd1">Version 6 or version 7</td>
	</tr>
	</tbody>
	</table>

	<a name="sample-app"></a>
	<H2>Installing and Running the Sample Application</H2>
	<P>Before we begin, you might want to see final result of the
	tutorial.
	</P>
	<P>Take the following steps to install the FileBrowserExample
	application:</P>
	<OL>
	<LI>Download <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/filebrowserexample.zip">filebrowserexample.zip.
	</A>
	</LI>
	<LI>Unzip the file.
	</LI>
	<LI>In the IDE, choose <tt>File</tt> > <tt>Open Project</tt> and browse to the folder that contains the unzipped files with the <tt>FileBrowserExample</tt> project.</LI>
	<li>Click Open Project.<br>
	The Projects window should look like the following:
	<p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/projects.png" NAME="graphics1" ALT="Projects window with FileBrowserExample opened" BORDER=1>
	</p></li>
	<LI>In the Projects window,
	right-click the project node and choose <tt>Run Project</tt> (or press F6
	key). As the application runs, an emulator window opens and displays
	the application running in the default device emulator.
	</LI>
	<LI>In the Emulator window, click the button underneath
	"Launch."<BR>The emulator displays a Splash Screen
	component then File Browser, as shown:
	<p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/file-browser_wtk.png" NAME="graphics2" ALT="WTK 2.5 emulator displaying the sampel File Browser application" BORDER=1>
	</p></li>
	</OL>
	<UL>
	<LI>Move the cursor up and down to
	navigate through available files and folders.
	</LI>
	<LI>Click the button underneath
	"Select" to open folder or file.
	</LI>
	<LI>Click the button underneath "Exit" to close the
	application.
	</LI>
	</UL>
	<p class="align-center"><a href="#top">top</a></p>
	<a name="create-app"></a>
	<H2>Creating an Application with the File Browser
	Custom Component
	</H2>
	<P>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:
	</P>
	<OL>
	<LI><A HREF="#create">Create the
	FileBrowserExample project</A>
	</LI>
	<LI><A HREF="#add">Add packages and a
	visual MIDlet to the FileBrowserExample project</A>
	</LI>
	<LI><A HREF="#addcomponent">Add
	components to the FileBrowserExample</A>
	</LI>
	<LI><A HREF="#addcommands">Add
	Commands to the TextBox and File Browser Components</A>
	</LI>
	<LI><A HREF="#connect">Connect the
	Components to create an application flow</A>
	</LI>
	<LI><A HREF="#insert">Insert method
	loadTextFile into the source code</A>
	</LI>
	<LI><A HREF="#run">Run the Project</A>
	</LI>
	</OL>
	<H3><A NAME="create"></A>Creating the
	FileBrowserExample Project</H3>
	<OL>
	<LI>Choose <tt>File</tt> > <tt>New Project
	(Ctrl-Shift-N)</tt>. Under Categories, select JavaME. Under Projects,
	select Mobile Application and click Next.
	</LI>
	<LI>Enter <CODE>FileBrowserExample</CODE>
	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 <tt>$PROJECTHOME</tt>.
	</LI>
	<LI>Uncheck the Create Hello MIDlet
	checkbox. Click Next.
	</LI>
	<LI>Leave the Sun Java Wireless Toolkit
	as the selected Emulator Platform. Click Next.
	</LI>
	<LI>Click Finish.
	<p class="notes"><b>Note:</b> 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. </p></LI>

	</OL>
	<H3><A NAME="add"></A>Adding Packages and a Visual
	MIDlet to the FileBrowserExample Project</H3>
	<OL>
	<LI>Choose the <CODE>FileBrowserExample</CODE>
	project in the Project Window, then choose <tt>File</tt> > <tt>New File
	(Ctrl-N)</tt> . Under Categories, select Java Classes. Under File Types,
	select Java Package. Click Next.
	</LI>
	<LI>Enter <CODE>filebrowserexample</CODE>
	in the Package Name field. Click Finish.
	</LI>
	<LI>Choose the <CODE>filebrowserexample</CODE>
	package in the Project window, then choose <tt>File</tt> > <tt>New File
	(Ctrl-N)</tt>. Under Categories, select MIDP. Under File Types, select
	Visual MIDlet. Click Next.
	</LI>
	<LI>Enter <CODE>FileBrowserExample</CODE> into MIDlet Name and MIDP
	Class Name fields. Click Finish.
	</LI>


	</OL>
	<H3><A NAME="addcomponent"></A>Adding Components to
	the FileBrowserExample</H3>
	<OL>
	<LI>Switch your Visual MIDlet to the
	Flow Designer window. Drag the following components from the
	Component Palette and drop them in the Flow Designer:

	<UL>
	<LI>Splash Screen</LI>
	<LI>TextBox</LI>
	<LI>File Browser</LI>
	</UL></LI>
	<LI>Click on splashScreen and, in the Properties Window, change
	value of property Text from <tt>null</tt> to the <tt>File
	Browser Example</tt>.
	</LI>
	</OL>
	<H3><A NAME="addcommands"></A>Adding Commands to the
	FileBrowserExample</H3>
	<OL>
	<LI>Open the Flow Designer Window.
	</LI>
	<LI>Choose Exit Command from the
	Commands section of the Component Palette. Drag and drop it into
	Flow Designer Window (fileBrowser component).
	</LI>
	<LI>Choose the Back Command from the Commands section of the
	Component Palette and drag and drop it into the textBox component.
	</LI>
	</OL>
	<H3><A NAME="connect"></A>Connecting the
	Components to Create an Application Flow</H3>
	<div>
	<p>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.</p>
	<p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/file-flow.png" NAME="graphics3" ALT="Shows the Flow Designer with components conneted by command lines" BORDER=1>
	</p>
	</div>
	<H3><A NAME="insert"></A>Inserting a Pre-action into
	the Source Code</H3>
	<OL>
	<LI>Switch to the Source Window.
	</LI>
	<LI>
	Insert the following code at the end of the source code. This
	method is responsible for reading the selected files:
	<br>
	<PRE> /**
	* 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();
	}
	}
	</PRE></LI>
	<LI><P>Find <tt>commandAction</tt> method in the source code:<BR>
	Insert
	<CODE>readFile();</CODE> into pre-action section of the
	<CODE>FileBrowser.SELECT_FILE_COMMAND</CODE> (right after: <CODE>if
	(command == FileBrowser.SELECT_FILE_COMMAND)</CODE>, where it says
	<CODE>//write pre-action code here)</CODE>: </p>
	</LI>
	</OL>
	<H3><A NAME="run"></A>Running the Project</H3>
	<div>
	<p>
	Press <F6> to Run the main project or select <tt>Run</tt> > <tt>Run Main Project</tt>.
	</p>
	</div>
	<p class="align-center"><a href="#top">top</a></p>
	<a name="javadoc-filebrowser"></a>
	<H2>Javadoc for the File Browser Component</H2>

	<P>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:</P>
	<OL>
	<li>Place the cursor on the <tt>FileBrowser</tt> component in the source code and press Ctr-Shift-Space (or choose <tt>Source</tt> > <tt>Show Documentation</tt>).<br>
	The Javadoc for this element displays in a popup window. </li>
	<li>Click the Show documentation in external web browser icon (<img src="../../../images_www/articles/71/mobility/filebrowser/show-doc-button.png" alt="Show documentation in external web browser">) in the popup window to view the detailed information about the <tt>FileBrowser</tt> component in your browser.</li>


	</OL>
	<p class="align-center"><a href="#top">top</a></p>

	<div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=NetBeans%20Java%20ME%20Custom%20Component:%20File%20Browser">Send
	Us Your Feedback</a></div><br style="clear:both;" >
	<a name="see-also"></a>
	<h2>See Also</h2>
	<UL>
	<li><a href="smscomposer.html">Visual Mobile Designer Custom Components: Creating an SMS Composer Application</a></li>
	<li><a href="loginscreen.html">Visual Mobile Designer Custom Components: Creating Mobile Login Screens</a></li>
	<li><a href="pimbrowser.html">Visual Mobile Designer Custom Components: Creating a Personal Information Manager Application</a></li>
	<li><a href="splashscreen.html">Visual Mobile Designer Custom Components: Using Splash Screens in Java ME Applications</a></li>
	<li><a href="waitscreen.html">Visual Mobile Designer Custom Components: Creating Wait Screens for Mobile Applications</a></li>
	<li><a href="tableitem.html">Visual Mobile Designer Custom Components: Using Table Items in Java ME Applications </a></li> <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li>
	</UL>
	<p class="align-center"><a href="#top">top</a></p>
	</BODY>
	</HTML>