Writing Applications for mobile devices and reducing ... - NetBeans

Mobile DevelopmentA A 5Figure 5Applicationflow with asplash screen.AFigure 6Splash screenin the deviceemulator.Mobility Packfor CLDC/MIDPdocumentationindexnetbeans.org/kb/55/mobility.htmlIDE automatically makes it available to us from the Resources folderin the Navigator window, on the lower left side of the IDE.) Drag aSplashScreen component from the Tools Palette on the right of thewindow on to the Flow Designer. Next, Drag the image1[Image] fromthe Navigator window and drag it on top of the splash screen.Presto! Our splash screen has been created. You can look at itby double-clicking on the SplashScreen component, which takesyou into the Screen Designer. The splash screen should look likeFigure 4.Now let’s make the splash screen part of the application flow. Clickthe Flow Design button to go back to the Flow Designer. Grab thetip of the Start Point Arrow and drag it over to the splashScreen1component. Click on the orange square next to Dismiss and dragthe arrow over the helloForm component. The flow should now looksomething like Figure 5.Let’s just make one more quick change to the program to illustratethe Screen Designer. Double click on the form component. In theScreen Designer, click on the “Hello, World!” text and change it tosomething else, say “Hello, Universe!”Now go ahead and run the MIDlet again. Click the button under“Launch,” and the emulator displays the splash screen as shown inFigure 6. Then you see the new message.That was just a simple example of howyou can quickly design the screens and flowof your application in the VMD. The Splash-Screen component is one of three customcomponents, along with WaitScreen andTableItem, created by the NetBeans MobilityPack team and added to the palette tomake visual programming easier. You canalso create your own custom componentsand add them to the palette.Another important VMD feature is its supportfor Scalable Vector Graphics (SVG).SVG is an XML-based standard definedby the W3C and supported by MIDP 2.0through JSR 226. The compact size andconsistent appearance across differentplatforms and screen resolutions makesit an attractive graphics format for mobiledevelopers. SVG also enables scripting andanimation that allows users to interact withA 634 N NetBeans Magazine

Mobile DevelopmentAFigure 8The Java PlatformManager.AFigure 9Abilities page.experience for an application on a particular device, and to test theportability of the application across different devices. As you haveseen, the J2ME Wireless Toolkit 2.2, bundled with Mobility Pack 5.5for CLDC/MIDP, provides several sample devices, like the Default-ColorPhone (and you can easily update to WTK 2.5).It is important, however, to remember that an emulator can onlyapproximate a device’s performance. Environmental variables likeprocessing speed or the strength of the wireless signal can affectperformance on a real device, and should be taken into account.A very important feature of the Mobility Pack is its ability to workA 8A 9with the emulators provided by major manufacturers,such as Nokia, Sony Ericsson,Siemens, and Motorola. Using the JavaPlatform Manager (see Figure 8), you caneasily add any emulator that supports theUnified Emulator Interface (UEI) standards.Simply choose Tools>Java Platform Manager,select the J2ME Platform, and thewizard detects the emulator platforms installedon your system. Other emulatorscan also be added with a little more effort.Project propertiesWe can use the project properties to definemany aspects of the program. As youcan see in Figure 9, the property categoriesare on the left, and the properties forthat category are on the right. A short listof things you can do in properties includes:defining the emulator platform, setting/checking Configuration and Profile versionsand optional APIs the device supports; addingor removing the contents of the JAR andJAD files; setting the Push Registry; settingobfuscation and optimization levels; addingsigning and security certificates; andsetting deployment options. The Abilitiesshown in Figure 9 list attributes that mightbe shared by different devices, and thereforemight be shared when you are addingpre-processing code.Let’s take a look at this using the two configurationswe’ve created for our TestMIDlet.The first is the DefaultConfiguration we’vebeen using so far. The second is the MediaControlSkinthat you selected when firstcreating the project. Before we discussproject properties and pre-processingcode, let’s take a quick look at the Media-ControlSkin device emulator.To switch configurations, choose the36 N NetBeans Magazine

Write Once, Deploy AnywhereMediaControlSkin from the Configurationdrop-down menu in the IDE toolbar. Thenchoose Run>Run Main Project. It’s theA11AFigure 11Preprocessorcode.same TestMIDlet as before, but this timethe device emulator and its display arethinner – so we lose a little bit of the splashscreen, as shown in Figure 10.Preprocessing codePreprocessing modifies the code in yoursource files before the code is parsed bythe compiler. The preprocessor modifiesthe code according to preprocessor directivesyou insert into the code as codeblocks with beginning and ending directives.These code blocks are marked visuallyin the Source Editor and are includedA 10(or excluded) when you build the JAR for a specific project configurationor ability. You can use these code blocks to create, manage,and track code that is specific to one or more project configurationsor abilities.Now that we’ve defined the key concepts of project configurations,let’s go back to our example and say now that we want touse a different graphic for the MediaControlSkin device. We alreadyhave our two project configurations defined, so what we need todo is add some pre-processing code so that the compiler knowsit should use one image for DefaultConfiguration and another forMediaControlSkin.Click the Source button to view the TestMIDlet source code. Thenscroll down to the get_image1() method. Notice that some sectionshave a blue background – these are “guarded blocks” that are generatedby the VMD, and cannot be edited. Highlight the code beginningwith “//Insert pre-init code here and ending with “//Insertpost-init code here.” Right click on the selection and choose PreprocessorBlocks>Create If/Else Block. A menu with all the availableconfigurations and abilities appears. Double click on DefaultConfiguration.Your code should look like Figure 11.Notice that the //#else directive has a pink background. Thiscode can be edited. Change the graphic name “/mobileduke.png” to the name of another graphic (such as “/veryproudduke.AFigure 10TheMediaControlSkinEmulator.netbeans.org/kb/55/mobilitycdc.htmlMobilityPack for CDCdocumentationindexIssue Three N 37

Write Once, Deploy AnywhereNetBeansMobility Pack for CDCThe Mobility Pack for CDC (ConnectedDevice Configuration) makes it possible tocreate, test, and deploy applications forseveral CDC platforms including the SunJava CDC Toolkit, Sony Ericsson CDC Platform1, Nokia S80, SavaJe and Ricoh MFP,as well as Windows CE using NSIcom’sCrEme CDC virtual machine. Although itis not yet as complete as the MIDP/CLDCPack, many new features will be addedwhen Mobility Pack 6.0 is released.You create CDC projects in the samemanner as MIDP/CLDC projects, using theNew Project Wizard. Before you begin, youwill want to install the Sun Java Toolkit forCDC or an emulator platform from one ofthe growing list of manufacturers the MobilityPack supports. You can find this list inthe NetBeans MobilityPack for CDC Quick Start Guide.To get started on a project, Choose File>New Project. Choose thecategory CDC, project type CDC Application. The wizard will guideyou through the rest of the steps for creating your Main Project.Once you’ve created a project, you can use the Matisse GUI Builderwith either the AGUI toolkit or the Personal Profile 1.0, in thesame way you would use it for regular Java SE development. ForPersonal Profile GUI development, right click the Main.java form inthe GUI Builder, and choose Set Layout>Free Layout. Then dragand drop components from the Palette window into the Design Areaof the GUI Builder. You can also take advantage of JUnit testing andother key features of the NetBeans IDE when developing CDC applicationsin the Mobility Pack for CDC.What’s coming in NetBeansMobility Pack 6.0The NetBeans Mobility Pack has many dramatic changes comingup. One of the most significant changes, as we’ve mentioned before,is that the CLDC/MIDP and CDC Packs will be merged into asingle UI, making it easier to create end-to-end applications. Otherexciting new features include:• New custom components to simplify programming, includinga File Browser, an SMS Composer, a Login Screen and a PersonalInformation Manager (PIM) Browser• VMD support for the MIDP 2.x Game API that allows creatingtiled and animated layers for environment design, and support foranimated character and sprites.• Improved VMD UI, including support for non-visual componentsand a design analyzer.• CDC support for project configurations and pre-processingblocks.ConclusionsThis article was intended to give you a hands-on sense of thecapabilities of the Mobility Pack for CLDC/MIDP and CDC, and arunning start on building your first mobile application. You can learnmore about the Mobility Pack by reading the tutorials and articleson the NetBeans website, joining the NetBeans community of developers,and most importantly, by going out there and creating greatmobile applications!CAnatole Wilson(anatole.wilson@sun.com) livesin Pittsburgh,Pennsylvania andhas been the SeniorTechnical Writer forthe Mobility Packsince its inception.He has worked forvarious high-techcompanies, includingIBM and Oracle, and,as a freelance writer,has written articlesfor publication invarious magazines.Issue Three N 39