<!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> |