tag:blogger.com,1999:blog-46919155494200372292024-03-14T03:56:53.549-07:00The LWUIT BlogOfir Leitnerhttp://www.blogger.com/profile/08721818051943678344noreply@blogger.comBlogger241125tag:blogger.com,1999:blog-4691915549420037229.post-25344323782351529312012-05-03T10:00:00.000-07:002012-05-03T10:00:05.901-07:00Removing BlackBerry Port From LWUIT<br />
Dear LWUIT developers,<br />
<br />
We have an important notice for you. As of May 3rd, we are removing the BlackBerry port and BlackBerry support code from LWUIT's main source trunk and binary file.<br />
<br />
<div class="p1">
We tried hard to resolve third-party licensing issues related to the port, but after months without progress we decided to remove the BlackBerry port from the main trunk and relocate it in <a href="http://java.net/projects/lwuit-incubator/sources/svn/show"><span class="s1">LWUIT's incubator source trunk</span></a>.</div>
<div class="p2">
<br /></div>
<div class="p1">
Note: We will update you when the BlackBerry port is live.</div>
<br />
Here are the details.<br />
<br />
1. We are removing the directory <span style="font-family: 'Courier New', Courier, monospace;">Ports/RIM</span> and its subfolders. The subfolder includes <span style="font-family: 'Courier New', Courier, monospace;">IO_RIM</span> and <span style="font-family: 'Courier New', Courier, monospace;">UI_RIM</span>, which contains the following files.<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;">BlackBerryCanvas.java</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">BlackBerryImplementation.java</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">BlackBerryTouchImplementation.java</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">BlackBerryTouchSupport.java</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">BlackBerryVirtualKeyboard.java</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">MMAPIPlayer.java</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">ImplementationFactory.java</span><br />
<br />
2. We are removing BlackBerry themes from the Resource Editor.<br />
<br />
We acknowledge that this change impacts some of you who chose LWUIT because of its multi-platform support. We apologize for any such inconvenience.<br />
<br />
Be assured that the Blackberry functionality will soon be available from its new home in the LWUIT incubator source trunk. Watch this blog for further notice.<br />
<br />
- LWUIT Team<br />
<div>
<br /></div>Sungmoon Chohttp://www.blogger.com/profile/14640753763804997158noreply@blogger.com7tag:blogger.com,1999:blog-4691915549420037229.post-35711711561818146422011-12-12T06:17:00.000-08:002012-02-03T11:47:31.944-08:00I Suck At Photoshop<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28NGp0BKUZoA3CyKj5uJLXpx3JRYzAEc_VvYe35N5jTamXl9MXOHoxN4gRv5yiIiXwgNmFu5VQMH1HLOfv6rmy7cX_WkJSphRnHu2vEf67EURkKDj9dU4ZMxvDO9pc16A9GZvHE1GsGR1/s1600/square.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28NGp0BKUZoA3CyKj5uJLXpx3JRYzAEc_VvYe35N5jTamXl9MXOHoxN4gRv5yiIiXwgNmFu5VQMH1HLOfv6rmy7cX_WkJSphRnHu2vEf67EURkKDj9dU4ZMxvDO9pc16A9GZvHE1GsGR1/s320/square.jpg" width="179" /></a></div>I was looking at the presentation from <a href="http://mobile.dzone.com/articles/video-taming-android-uis-eric?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+javalobby%2Ffrontpage+%28Javalobby+%2F+Java+Zone%29">Eric Burke</a> about the work square did with Android which resulted in a really nice UI. He tells about quite a few struggles they had with the Android API which seem to be pretty easy to get around in LWUIT.<br />Anyway, one of the nicest things they did was the screenshot on the right which features a leather texture with stitches as the UI for the application which is a really nice touch for a wallet application (assuming you aren't a vegan).<br />Anyway, that took me back a bit... How do you make a UI like that regardless of the platform that will look nice for all resolutions. I came up with the answer but because I suck at Photoshop I wasn't able to achieve anything remotely close to the image on the right... This just goes to show you how valuable professional design can be to a team.<br />The way to produce an image like that is start with a clean tileable leather texture such as this one which I got from <a href="http://webtreats.mysitemyway.com/free-tileable-leather-patterns/">here</a> and scaled down:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPGqsWa3cWKHu6eQCLXCEdRkY3p-_fm_NVYvCWTGl6VRZYIP5nSL2Z9O094Yk5HiYpHIxNyMeWjBcvhBoCKNln8XBD11cr3_TB8CHTJeo-FOZgu4uMCkjUlKOjeLwMeYyUWeBL0D7xUFQ7/s1600/leather.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPGqsWa3cWKHu6eQCLXCEdRkY3p-_fm_NVYvCWTGl6VRZYIP5nSL2Z9O094Yk5HiYpHIxNyMeWjBcvhBoCKNln8XBD11cr3_TB8CHTJeo-FOZgu4uMCkjUlKOjeLwMeYyUWeBL0D7xUFQ7/s1600/leather.jpg" /></a></div><br /><br /><br /><br /><br />I set this as the style of the Form UIID and made it TILE on both axis's. Then I created a simple transparent gradient image, its so transparent you might not even see it but its very important to create the texturized depth to the image above:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xsks_SmCYM15gJ6kj1QldfL1cpIrWnc2puAxThfg8YYKZO63RA9EnlZQpqIQyLEIl7-gW_wf8meNw1hTLx_EgKUt2oxzt0U_3WHntjiTnIcMDiT19SlvVAhpq2mC7hvKFkeP_MiMdDrc/s1600/blend.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xsks_SmCYM15gJ6kj1QldfL1cpIrWnc2puAxThfg8YYKZO63RA9EnlZQpqIQyLEIl7-gW_wf8meNw1hTLx_EgKUt2oxzt0U_3WHntjiTnIcMDiT19SlvVAhpq2mC7hvKFkeP_MiMdDrc/s320/blend.png" width="213" /></a></div>I created a container and placed it above the form and gave it a style of Gradient, then I set this image as the scaled background (since this is an alpha mask scaling won't hurt the image quality much).<br />Last I created a stitch image by using a stitch brush tool I found on the internet and this is the stitch image I was able to make (I set the background to red since the image is barely visible otherwise):<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT7zf1F1Z-Hhh6Ck7HMt1FqgEpfI9Rgw9yjA0QRe0-yQ-v7WiebKD2Fp3YjHKYuh6Q21w5Jz7VFkSquGApC_rdLFaUpEECmwWeEuvoRSRwbjbq50AdzTuRddMAFqghx7ar7FilpXf-x9T/s1600/stitch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT7zf1F1Z-Hhh6Ck7HMt1FqgEpfI9Rgw9yjA0QRe0-yQ-v7WiebKD2Fp3YjHKYuh6Q21w5Jz7VFkSquGApC_rdLFaUpEECmwWeEuvoRSRwbjbq50AdzTuRddMAFqghx7ar7FilpXf-x9T/s1600/stitch.png" style="background-color: red;" /></a></div><br />I set the stitches as a 9-piece border which allowed them to grow nicely. However, due to the bad source material the end result doesn't look nearly as polished as the work the guys from square were able to achieve. I'm guessing they have a depression overlay with the stitch layer to create an additional effect and their images are obviously more refined. This is what I ended up with in the resource editor:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrl3cWV4IFtqewLFxWtubRn80LsEjnnkNFIRHMjzpDEa-zknnp1zOEr18_PeIrB9bLBJweJUxNc0iWZbzEBvyGauUJkYiu_HcKW7brtJ0v4OTLVFeyb2oAGNSS_3Acym6aq4_NGRIN3Eyl/s1600/Screen+Shot+2011-12-12+at+16.17.01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrl3cWV4IFtqewLFxWtubRn80LsEjnnkNFIRHMjzpDEa-zknnp1zOEr18_PeIrB9bLBJweJUxNc0iWZbzEBvyGauUJkYiu_HcKW7brtJ0v4OTLVFeyb2oAGNSS_3Acym6aq4_NGRIN3Eyl/s320/Screen+Shot+2011-12-12+at+16.17.01.png" width="212" /></a></div><br /><br /><br />Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-4691915549420037229.post-17549306379582238342011-12-04T23:55:00.000-08:002012-02-03T11:47:31.780-08:00Using EmbeddedContainer<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/F8utkzc-4OU" width="640"></iframe>EmbeddedContainer is a class I added to LWUIT 1.5 without much fanfare out of a simple necessity, the problem is that this necessity existed only within the GUI builder and the class makes no sense outside of the context of the GUI builder. How do you document something like that???<br />The necessity came about due to Triplay's application designs (our original GUI builder beta site), their design was iPhone inspired and so it relied on tabs (iPhone style tabs at the bottom of the screen) where different features of the application are within a different tab.<br /><br />This didn't mesh well with the LWUIT GUI builder navigation logic and so we needed to rethink some of it. I wanted to reuse GUI as much as possible while still enjoying the advantage of navigation being completely managed for me.<br />Android does this with Activities and the iPhone itself has a view controller, I don't like both approaches and think they both suck. The problem is that you have what is effectively two incompatible hierarchies to mix and match which is why Android needed to "invent" fragments and Apple can't mix view controllers within a single application.<br /><br />The Component/Container hierarchy is powerful enough to represent such a UI but we needed a "marker" to indicate to the UIBuilder where a "root" component exists so navigation occurs only within the given "root". Here EmbeddedContainer comes into play, its a simple container that can only contain another GUI from the GUI builder. Nothing else. So we can place it in any form of UI and effectively have the UI change appropriately and navigation would default to "sensible values".<br /><br />Navigation replaces the content of the embedded container, it finds the embedded container based on the component that broadcast the event. If you want to navigate manually just use the showContainer() method which accepts a component, you can give any component that is under the EmbeddedContainer you want to replace and LWUIT will be smart enough to replace only that component.<br /><br />You can see an example of building a simple Tab based UI with the GUI builder and embedded container in the video above. The nice part about this is that this UI can be very easily refactored to provide a more traditional form based UI without duplicating effort and can be easily adapted to a more tablet oriented UI (with a side bar) again without much effort.Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-4691915549420037229.post-54075221745563729552011-11-30T00:46:00.000-08:002012-02-03T11:47:31.953-08:00Interview With Peter & Ofir From JavaOneWhen we were at JavaOne this year Ofir and Peter sat down for a chat about the <a href="http://www.aegis-project.eu/index.php?option=com_content&view=article&id=155&Itemid=25">LWUIT accessibility</a>, which you can read about there. Its a fascinating and complex subjects that we don't spend much time thinking about.<br />Listen to their interview in the Java Spotlight <a href="http://blogs.oracle.com/javaspotlight/entry/java_spotlight_episode_58_peter">mobility podcast</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-79218052279077273212011-11-27T23:54:00.000-08:002012-02-03T11:47:31.981-08:00How LWUIT Is Different (better) From SwingI've been meaning to write an introduction to LWUIT for Swing developers, for quite a while so this is it. We were highly inspired by Swing when writing LWUIT and that inspiration allows Swing developers instant familiarity into LWUIT thus providing them a very easy path into mobile development without the hassle. <br /><br />The best way for a Swing developer to get into mobile is just to open a LWUIT based project and start working, its just that simple! At first the use of styles might seem slightly alien but you get used to it instantly and its ridiculously familiar. <br /><br />There are quite a few differences between LWUIT and Swing which came thanks to the fact that we could learn and adapt from Swing. So LWUIT is in effect better than Swing mostly thanks to it being newer. Here is a list of highlight/bullet points for Swing developers wishing to take a look at LWUIT.<br /><br /><b>What's Similar:</b><br /><ul><li>Component/Container hierarchy with layout managers to arrange the elements. All the old friends are there with some additional added features (GridLayout, BorderLayout, BoxLayout, FlowLayout, GroupLayout) and some new (TableLayout, LayeredLayout). Naturally LWUIT doesn't feature the whole JComponent sub hierarchy and maintains a simpler hierarchy.<br /></li><li>You can override paint and get a graphics object to do whatever you want. LWUIT is lightweight (just like Swing) and draws everything on its own to maximize portability and flexibility<br /></li><li>You can add/remove action listener and similar observer based patterns for various events<br /></li><li>Dialogs can be modal, so when you use Dialog.show() or similar method the next line won't execute until the dialog is disposed. Like in Swing, this is entirely optional.<br /></li><li>LWUIT has a glasspane, its a bit different from the Swing glasspane but very similar in functionality<br /></li><li>List model and list cell renderer, pretty much like Swing's API with added functionality for animations and horizontal lists. <br /></li><li>ContentPane for the body of the Form (LWUIT's root component) which is technically hidden<br /></li><li>The LWUIT EDT requires that you interact with it over a single thread, it has a callSerially method (invokeLater), callSeriallyAndWait (invokeAndWait) and even an invokeAndBlock (foxtrot for the advanced swing users)</li></ul><br /><br /><b>What's Different :</b><br /><ul><li>Optimized for phones/tablets both touch & feature phones. This includes support for gestures and complex key layouts<br /> </li><li>Styles & Themeing - the PLAF is much narrower in LWUIT (due to size constraints) but LWUIT makes up for it by having a Style object associated with every component. Furthermore, LWUIT allows customizing said styles with a theme that can be created visually using an open source resource editor tool!<br /></li><li>Animations are integrated in the core of LWUIT in several levels. You can animate layouts, transitions and just arbitrary objects.<br /></li><li>The resource file format is an integral part of LWUIT (although technically completely optional) it offers a GUI builders (optional but quite helpful), theme creator, localization etc. Unlike matisse it doesn't generate any code thus providing a more VB like experience where the UI and code are cleanly separated. The tool can be given to a designer with no coding experience<br /></li><li>Painters - Swing tried to integrate painters after the fact and failed since the framework needs to be designed with them to begin with. We did just that. We also separated background painting from foreground painting and made it easier to override just background painting.<br /></li><li>Deep and elaborate porting layer allowing LWUIT to be ported to any platform easily <br /></li><li>LWUIT is <b>truly</b> open source - while Swing was technically open sourced, debugging/modifying Swing was not trivial since it was integrated into the JDK. This also prevented developers from incorporating fixes (or a known working version) into their build. <br />LWUIT is bundled with the application so you can easily fix it and very easily modify code/debug to locate/fix issues. The development is easy to follow with a public viewable SVN. You can actually get commits from us as we fix issues and add features.<br /></li></ul>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-4691915549420037229.post-59039135322102572352011-11-21T04:38:00.000-08:002012-02-03T11:47:31.966-08:00Places Demo Part V: Location Animation<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/N4Joaz-TniE" width="640"></iframe>Simple animations to provide a sense of place/navigation are what makes an application shine. They attract the attention of the user to the ongoing operation within the application while providing a sense of continuity, in that sense they are not "fluff" and should be taken very seriously.<br />One of the nicest things in the places demo is the animation on the map bellow which you should be able to see in the video above. When selecting a city within the demo we can see an animation of the map highlight moving to a new location. To do that we need to start with the map location image here (I set the text background to red to make the white image visible):<br /><div class="separator" style="background-color: red; clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYlwMO0ir8S1xpKE82ks6AwzP3imJA3UKdBWbu1Dh3Kh6KVvKdbQr2qRfIn5PTQ0RlnVK9q6s-pFvB5SCl-LcHkAN77qHnRuH6jIZwjwclq-rQglwe8UJLvrnnIAQB9mmw4PgT7ZGfibL/s1600/mapLocation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYlwMO0ir8S1xpKE82ks6AwzP3imJA3UKdBWbu1Dh3Kh6KVvKdbQr2qRfIn5PTQ0RlnVK9q6s-pFvB5SCl-LcHkAN77qHnRuH6jIZwjwclq-rQglwe8UJLvrnnIAQB9mmw4PgT7ZGfibL/s1600/mapLocation.png" /></a></div><div style="background-color: red;"><br /></div>We can add this image by using the add multi-image dialog as such:<br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ONAnkhDZAxZ_OlrZb7gsSSHZdvL7TU8DzjBI9LdRfbtFYrBEhoWK7MIZrFy_oVO7r3GxYk3n3c43iCYtd9uQTGn4B7ioAWrCoA2V3sE_Xw5-V8KGBzQ2k3DH0Xv7OepKeRleMEO9ggvL/s1600/Screen+Shot+2011-11-21+at+13.56.37.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ONAnkhDZAxZ_OlrZb7gsSSHZdvL7TU8DzjBI9LdRfbtFYrBEhoWK7MIZrFy_oVO7r3GxYk3n3c43iCYtd9uQTGn4B7ioAWrCoA2V3sE_Xw5-V8KGBzQ2k3DH0Xv7OepKeRleMEO9ggvL/s320/Screen+Shot+2011-11-21+at+13.56.37.png" width="320" /></a></div><br />And now we need to go back to the GUI builder to place the image on the map, don't worry about the location we will get to that soon enough. I select the Map Label entry and change its name to Map (to make it easier to work with it in code), I also change the name of the List at the bottom to cityList.<br />Next drag a container into the same container where the Map is currently at and set its layout to layered layout. Make sure that the Map entry is before the Container entry which you just added (you can rearrange them in the tree). Drag the Map into that container and place another new container next to it. Drag a label into the new container and call it "MapHighlight", set its text to an empty string, set its UIID to container and select the mapPosition.png image as its icon. You should end up with something that looks like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGoTvT9GjDKX7LqtDi6dnL63OuP__lQlpE8fbBxJtVd3-zxJnrbYZXglf2szsCgcLl7bG9DpoBdafr76y0Wo7FDiBIi6PVqXeisK_KpxTykPOnqcQwSR1p5fg_vS9uTuMTdulVcG9amcNH/s1600/Screen+Shot+2011-11-21+at+14.50.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGoTvT9GjDKX7LqtDi6dnL63OuP__lQlpE8fbBxJtVd3-zxJnrbYZXglf2szsCgcLl7bG9DpoBdafr76y0Wo7FDiBIi6PVqXeisK_KpxTykPOnqcQwSR1p5fg_vS9uTuMTdulVcG9amcNH/s320/Screen+Shot+2011-11-21+at+14.50.54.png" width="320" /></a></div><br />Now its <u><b>FINALLY</b></u> time to start writing some code... Click the menu Application->Generate Netbeans Project. Type the name "LWUITPlaces" and select a directory into which the project should be generated.<b> </b><br /><b>Important:</b> you do this only ONCE after that saving the file will automatically update the generated code for you. <b>Also important</b>: If you saved the file in the past the old location is no longer relevant! The resource file will now be within the src directory of the generated project and can't be moved from that location.<br /><br />In the GUI select the Form and select the events tab in the properties on the right, click the "Before Show" button. This should open the StateMachine.java file in Netbeans and create a method like this:<br /> protected void beforeMain(Form f) {<br /> // If the resource file changes the names of components this call will break notifying you that you should fix the code<br /> super.beforeMain(f);<br /> <br /> }<br /><br />Before we continue go to the top of the class and add the following variables and constants:<br /> private static final int MAP_ORIGINAL_WIDTH = 178;<br /> private static final int MAP_ORIGINAL_HEIGHT = 114;<br /> private int mapActualWidth;<br /> private int mapActualHeight;<br /> private static final int [][] MAP_POINTS = {<br /> {10, 65},<br /> {0, 42},<br /> {77, 75},<br /> {146, 37},<br /> {107, 33}<br /> };<br /> <br /> private int mapSelection = 0;<br /><br />We will also need these methods to exist:<br /> private int mapXCoordinate(int c) {<br /> return (int)(((float)c) / ((float)MAP_ORIGINAL_WIDTH) * ((float)mapActualWidth));<br /> }<br /><br /> private int mapYCoordinate(int c) {<br /> return (int)(((float)c) / ((float)MAP_ORIGINAL_HEIGHT) * ((float)mapActualHeight));<br /> }<br /><br />Some of these things might seem obvious but others might not. When we animate to a particular list offset we need to know the pixel coordinate of the city within the Map. This worked great in Martin & Chen's demo since they used a regular image as the map. The problem is that a regular sized image would not work for lower/higher resolution devices which is why I used a multi-image.<br />Once I used a multi-image the resolution of the image (hence the coordinates) would change depending on the device, so all the old city coordinates from Martin will no longr work (these are the MAP_POINTS coordinates).<br /><br />The trick is simple, I ask the size of the map image in runtime and store it within the mapActualWidth/Height variables. Then I calculate the position in map offsets using a simple ratio equasion in the mapXCoordinate/mapYCoordinate methods.<br /><br /><br />Back to the beforeMain method (under the super call) we will write the code to position the selection based on coordinates. With the comments within the body I hope the content of this method is clear enough:<br /><br /><br /><script src="http://gist.github.com/c80bf70350a11acab15d.js"></script>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-4691915549420037229.post-55797630638653994542011-11-14T07:15:00.000-08:002012-02-03T11:47:31.959-08:00Places Demo Part IVLast time we left off with the UI partially implemented yet we left one of the hardest features still ahead: the annoying circular button.<br />To implement that button we will first select the top area container (the one with the MainList UIID) and set its layout to box layout Y. We will then drag a container (which will represent the first entry in the list) into that container, we will set the layout of that container to LayeredLayout!<br />We will then place two containers within the layered layout container and set both to BorderLayout. We will add a button to the center of the first (label it Attractions) and a label to the west of the second (give it a " " space label, important do not leave it blank make sure a space is there!).<br /><br />One last thing I forgot the last time, update the padding of the MainList UIID to 10 on all sides to keep the entries at a healthy distance from the border. <br /><br />You should end up with something like the image bellow:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhTU5GJ5RJ6gJkYqdq0CSv6HHV8iiFuESHPOM4gRVlq7v3OuFp1hc5hevikoO0YWWQFeTNXTrduMCDQGOdqF6eyc31gW3vzaoo7O9mumjFm_QhYOzvrYCLgAoMqHlm2QXLnWNIzEbVgbn/s1600/Screen+Shot+2011-11-14+at+13.13.49.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhTU5GJ5RJ6gJkYqdq0CSv6HHV8iiFuESHPOM4gRVlq7v3OuFp1hc5hevikoO0YWWQFeTNXTrduMCDQGOdqF6eyc31gW3vzaoo7O9mumjFm_QhYOzvrYCLgAoMqHlm2QXLnWNIzEbVgbn/s320/Screen+Shot+2011-11-14+at+13.13.49.png" width="320" /></a></div><br /><br /><br /><br /><br />What we did is create a layered layout which places one component on top of the other and we used two containers with their layout to position a label on top of a button pretty much like we would do for the actual layout of the button.<br /><br />Now lets style this to actually look like the end result, change the UIID of the attractions button to ListEntry and open its unselected style. Use this image to create an image border (notice I placed the same image in my first post in this series but it had a small artifact on it so use this one!):<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodVhZFa47neaSD715S9DYc10i2HoZuYOYI5t_SYxrFKOE5BjwKoK42buAND8RugCqil6BQKJpenOjZc0jeNMgyaBAt9JfVzfSmoAZupgC0JiNdqjJbsGQ-4L8YhTGuwZKYdKmsXbmDcJe/s1600/list_entry.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodVhZFa47neaSD715S9DYc10i2HoZuYOYI5t_SYxrFKOE5BjwKoK42buAND8RugCqil6BQKJpenOjZc0jeNMgyaBAt9JfVzfSmoAZupgC0JiNdqjJbsGQ-4L8YhTGuwZKYdKmsXbmDcJe/s1600/list_entry.png" /></a></div><br />And define the image border as such:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCmS4Ro1zviQv4NgBl7qM7nx7W_gNNazc-SZalDciGJgXgVav5h2_D0zeNPU56boXMPdmkRWS5fkRSXx8aMyLCFOMD5zJ8cUbGihhTQ3M34-WcfxCqIpNld0b6FkYPoNgo9W1ehjMylzJ2/s1600/Screen+Shot+2011-11-14+at+11.37.26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCmS4Ro1zviQv4NgBl7qM7nx7W_gNNazc-SZalDciGJgXgVav5h2_D0zeNPU56boXMPdmkRWS5fkRSXx8aMyLCFOMD5zJ8cUbGihhTQ3M34-WcfxCqIpNld0b6FkYPoNgo9W1ehjMylzJ2/s320/Screen+Shot+2011-11-14+at+11.37.26.png" width="320" /></a></div><br />After generating the image border select the Margin and define 5 <b>Millimeters</b> on the left side and 1 millimeter on every other side. Notice that using millimeters allows us to scale the padding/margin more appropriately to higher/lower resolutions.<br />Then select the padding tab and define 5 <b>Millimeters</b> on the left and 15 pixels on the other sides.<br />After pressing OK you should have something like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvEOqEcpzHxyW0mp50q_qZ6B-IF8iLlRBUNMx8mgxHvK327GXSM271BR23ILgFT8iv4CaQx4oo_5VMSc0QGyDc4j3NX9yaxDsGK-nPNIYlOGQjdeqAoBAdwtEs1KVUatWTjnsgKPCfvHZn/s1600/Screen+Shot+2011-11-14+at+13.39.58.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvEOqEcpzHxyW0mp50q_qZ6B-IF8iLlRBUNMx8mgxHvK327GXSM271BR23ILgFT8iv4CaQx4oo_5VMSc0QGyDc4j3NX9yaxDsGK-nPNIYlOGQjdeqAoBAdwtEs1KVUatWTjnsgKPCfvHZn/s320/Screen+Shot+2011-11-14+at+13.39.58.png" width="320" /></a></div><br />Now select the parent container of the button and set its style to PaddedContainer, set the padding to 10 pixels on the left 0 on the right 4 on top and 4 on bottom. In the derive tab select deriving from Container. This will ensure that the button will always be smaller than the label which is important for the base design.<br /><br />Now add the following images as multi-images:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GHU2zy4Ogtm4NFxxxUH5gfKzrVNuE2rSfXR45p4AOUgoHovWmZBLhfi8N5K4Q15Q0DottwhEPE1biJOtJ_kp71CZ8laRyQ4-fYHhyiOcduNLUpUVtGJSOpIqoR6KSrrPz61e5yobLZ_Y/s1600/attractions.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GHU2zy4Ogtm4NFxxxUH5gfKzrVNuE2rSfXR45p4AOUgoHovWmZBLhfi8N5K4Q15Q0DottwhEPE1biJOtJ_kp71CZ8laRyQ4-fYHhyiOcduNLUpUVtGJSOpIqoR6KSrrPz61e5yobLZ_Y/s1600/attractions.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw29SzxCrkjqpPDvFbRWmv-2VLTfK4YPlBrb9qebzu6ftBbDYrKP_orgAm23vF92pfIs5DRolTmtuG5Hj6neHOHNrTbqqZSYk_yqi3-ACFhEpiGke9Lt9_q6odTeshWwP1j6dJzhKQsKlo/s1600/bars.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw29SzxCrkjqpPDvFbRWmv-2VLTfK4YPlBrb9qebzu6ftBbDYrKP_orgAm23vF92pfIs5DRolTmtuG5Hj6neHOHNrTbqqZSYk_yqi3-ACFhEpiGke9Lt9_q6odTeshWwP1j6dJzhKQsKlo/s1600/bars.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbQP7u1b3vAASSt0aiGI2lBz_Kx6k2V9JofpL_2klIhz28kX9k0Wox5sCgMdxNgFLBKbuDdXKNby_nTL62wHyp1phtH6cx6CBtFZRfBmUhkyUJ40r1QX97SM71z1e9Igo5YwSBjycNeeKI/s1600/bed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbQP7u1b3vAASSt0aiGI2lBz_Kx6k2V9JofpL_2klIhz28kX9k0Wox5sCgMdxNgFLBKbuDdXKNby_nTL62wHyp1phtH6cx6CBtFZRfBmUhkyUJ40r1QX97SM71z1e9Igo5YwSBjycNeeKI/s1600/bed.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLIwwT8yDz_FYsSR92OO_k5DAzaODOogElf0WcWeVa3g7SjT9qsB3SsJBhx2wwNgp4s0ThifYdYfoABAVuHePK2Mnx7ft1DXp6OHkNXBwzddHFGRkMtIyE5hKuFtrGz1zW2cbqLMfnHM9w/s1600/places_icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLIwwT8yDz_FYsSR92OO_k5DAzaODOogElf0WcWeVa3g7SjT9qsB3SsJBhx2wwNgp4s0ThifYdYfoABAVuHePK2Mnx7ft1DXp6OHkNXBwzddHFGRkMtIyE5hKuFtrGz1zW2cbqLMfnHM9w/s1600/places_icon.png" /></a></div>Using the "Add Multi-Images" add these 4 icons as such:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAk-y1Zosbyk0b8EKOuRTbF09QOuuAbVIs7ePRDts0tQP0o6oUnJeni_0uqAKrhWiTcElHonot15VGu2NjHkhUSk3vEBH5tWdYKQ270z4COK-wp3tOPkFOyVXDvjc0GZwXqJRYrk-m79C2/s1600/Screen+Shot+2011-11-14+at+11.53.39.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAk-y1Zosbyk0b8EKOuRTbF09QOuuAbVIs7ePRDts0tQP0o6oUnJeni_0uqAKrhWiTcElHonot15VGu2NjHkhUSk3vEBH5tWdYKQ270z4COK-wp3tOPkFOyVXDvjc0GZwXqJRYrk-m79C2/s320/Screen+Shot+2011-11-14+at+11.53.39.png" width="320" /></a></div><br /><br /><br /><br />Open ListEntry's selected/pressed style and in the derive tab type "ListEntry" unselected to derive the same style.<br /><br />Select the label for the first entry and set its UIID to AttractionsIcon, edit its style and set the background to image scaled and attractions.png image from above:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GHU2zy4Ogtm4NFxxxUH5gfKzrVNuE2rSfXR45p4AOUgoHovWmZBLhfi8N5K4Q15Q0DottwhEPE1biJOtJ_kp71CZ8laRyQ4-fYHhyiOcduNLUpUVtGJSOpIqoR6KSrrPz61e5yobLZ_Y/s1600/attractions.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GHU2zy4Ogtm4NFxxxUH5gfKzrVNuE2rSfXR45p4AOUgoHovWmZBLhfi8N5K4Q15Q0DottwhEPE1biJOtJ_kp71CZ8laRyQ4-fYHhyiOcduNLUpUVtGJSOpIqoR6KSrrPz61e5yobLZ_Y/s1600/attractions.png" /></a></div><br /><br /><br /><br />Set the padding of the style to 5 millimeters on all sides and the margin to 0 on all sides.<br /><br />You should end up with this result:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHkHw9Z-bsj2CbQNQAC6GMo3pjEBwsPsdYPs2YH_ReCQFZwP6zHhzUgO-hpoT4yVP477Q6yZUJN_NoSC9jJQFTzVg0zYXpF5BdwrggC0ifjOQAtu6OleQuMK4APfLIkTXSezmqZOAtiih/s1600/Screen+Shot+2011-11-14+at+15.03.29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHkHw9Z-bsj2CbQNQAC6GMo3pjEBwsPsdYPs2YH_ReCQFZwP6zHhzUgO-hpoT4yVP477Q6yZUJN_NoSC9jJQFTzVg0zYXpF5BdwrggC0ifjOQAtu6OleQuMK4APfLIkTXSezmqZOAtiih/s320/Screen+Shot+2011-11-14+at+15.03.29.png" width="320" /></a></div><br />Which is already pretty much what we are looking for. Now just right click on the attractionsContainer and copy it. Paste it to the parent container 4 times and update every entries icon/text to this end result:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGE4_4eRFygeb6R2CKNnmP2-TZnMDRArFhaICApmtiQSAZ9-D3xB7fvd79uht_VFoB55GnO77z28Pbnbxxc0YfgBN2JK4PNLC1Rw4HenMzQoNx7_ZL39_6_nyLTfyV-_CucX-1aq9237D/s1600/Screen+Shot+2011-11-14+at+15.09.18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGE4_4eRFygeb6R2CKNnmP2-TZnMDRArFhaICApmtiQSAZ9-D3xB7fvd79uht_VFoB55GnO77z28Pbnbxxc0YfgBN2JK4PNLC1Rw4HenMzQoNx7_ZL39_6_nyLTfyV-_CucX-1aq9237D/s320/Screen+Shot+2011-11-14+at+15.09.18.png" width="320" /></a></div><br />Now just so you will understand why we did all of this, this is how the UI will look on the iPhone scale resolution (3GS = 320x480):<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJn3a8vKUmpHAMRNJLB3oLBPoyEG10rCjFYnfPcSGJhHQTXkAun70yKzns0vIEMlCuiVHg9s4ZRqCh-BnZgXeeuBre1PWMmKuIwCsyQoHFRludsM0TxawC_vpo8V9jyx8Bxbz9Fnj-V_yi/s1600/Screen+Shot+2011-11-14+at+15.13.23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJn3a8vKUmpHAMRNJLB3oLBPoyEG10rCjFYnfPcSGJhHQTXkAun70yKzns0vIEMlCuiVHg9s4ZRqCh-BnZgXeeuBre1PWMmKuIwCsyQoHFRludsM0TxawC_vpo8V9jyx8Bxbz9Fnj-V_yi/s320/Screen+Shot+2011-11-14+at+15.13.23.png" width="212" /></a></div><br />Here is what it will look like on a Nexus One device (480x800, larger font):<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRy7yollJIQ2nT5iG_o2NEtebYa_-LHWx1dbWxGT7fHR7294O6jL6HAZqfjc9fRwxfoGk9BecH1IoTe-qGRVPp5GuJj3vd0tQFS6aokopeKIW29IovobdmYDaSkyfmsKwrLpDVT54Nv0lr/s1600/Screen+Shot+2011-11-14+at+15.14.53.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRy7yollJIQ2nT5iG_o2NEtebYa_-LHWx1dbWxGT7fHR7294O6jL6HAZqfjc9fRwxfoGk9BecH1IoTe-qGRVPp5GuJj3vd0tQFS6aokopeKIW29IovobdmYDaSkyfmsKwrLpDVT54Nv0lr/s320/Screen+Shot+2011-11-14+at+15.14.53.png" width="199" /></a></div><br />Notice that after blogger scaled down the images they look almost identical, but if you will click to zoom you will see they are sized very differently.<br /><br />Lets proceed with the easy parts! <br />Select the main form and uncheck the scrollable Y property. Then select the Container with the MainList style and check its scrollable Y property. This will effectively make sure that horizontal scrolling doesn't hide the bottom section of the screen.<br /><br />Now lets add the entries in the list, select "Add Multi-Images" and select the following images:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieH3HlvU8WUR37MMvrUgKpxnjNJB0C8KL_bIDTq2IsT5eo-8467yX2kXhQpfoe3BJYGTSamXsHWE6PLzjrHQP3xfbnHC2Ok5ZPIhCA4bgz-uRv7Z19JHrjoUxHYEsu28rVCAHv1XZf-B0e/s1600/chicago.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieH3HlvU8WUR37MMvrUgKpxnjNJB0C8KL_bIDTq2IsT5eo-8467yX2kXhQpfoe3BJYGTSamXsHWE6PLzjrHQP3xfbnHC2Ok5ZPIhCA4bgz-uRv7Z19JHrjoUxHYEsu28rVCAHv1XZf-B0e/s1600/chicago.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7LHaq9VdKNhTFIGj7URA3PrGxn9lutfujA2gAuPmSLwboUUHu4YpfF5N_cnzN39vwechE9yoa55SY6eZ6s8nWPaWW-i_jPUmfYAx248IGu6no16ZKALtoAmz7H2JgimtDNFYXT4mY97X/s1600/dallas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7LHaq9VdKNhTFIGj7URA3PrGxn9lutfujA2gAuPmSLwboUUHu4YpfF5N_cnzN39vwechE9yoa55SY6eZ6s8nWPaWW-i_jPUmfYAx248IGu6no16ZKALtoAmz7H2JgimtDNFYXT4mY97X/s1600/dallas.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllpbK5Q7YN8uM6PaBA4DSKTKcJiMpqFWO8d5-241wZq8tMaySi0F4QhtqrAEkDjbwlf-O064BFDoeYZ_6zU8E5CLWIGet6fnZhnmZrECuljQk-bx2uPXozIU-lDpu6-Bq9AI4o-m7wZ79/s1600/newYork.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllpbK5Q7YN8uM6PaBA4DSKTKcJiMpqFWO8d5-241wZq8tMaySi0F4QhtqrAEkDjbwlf-O064BFDoeYZ_6zU8E5CLWIGet6fnZhnmZrECuljQk-bx2uPXozIU-lDpu6-Bq9AI4o-m7wZ79/s1600/newYork.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3XEuymXPNCHgagQGdngD1-4uQv8ERgcYJpRI2YWpxarb71UiqczMib412X7NqCfR1r85sdwcSZG6OQBKOfxyKx1_KB0QwnhgPl_doUVs1JfwSnkAX_Ctx5ElEDL3k9rud9SnkbKkCiJS/s1600/sanDiego.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3XEuymXPNCHgagQGdngD1-4uQv8ERgcYJpRI2YWpxarb71UiqczMib412X7NqCfR1r85sdwcSZG6OQBKOfxyKx1_KB0QwnhgPl_doUVs1JfwSnkAX_Ctx5ElEDL3k9rud9SnkbKkCiJS/s1600/sanDiego.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYRgij5xIwjgg9uRcCm3_jmLCIn1hsGSDil4xcQ7g4pJhilMnoa2_JnhiKk2VxMwj52s2QeIJhoivwc35fdwHl52C_x9hTeZ54Hedfuske88Pes3SS_ZjHRcA243aZTptzENR6hZcEzMD/s1600/sanFrancisco.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYRgij5xIwjgg9uRcCm3_jmLCIn1hsGSDil4xcQ7g4pJhilMnoa2_JnhiKk2VxMwj52s2QeIJhoivwc35fdwHl52C_x9hTeZ54Hedfuske88Pes3SS_ZjHRcA243aZTptzENR6hZcEzMD/s1600/sanFrancisco.png" /></a></div>Use these values for the multi-image dialog:<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEK0_YHv71LSmWY5ffhnFUhyphenhyphenMaRJoSMch6w-TwrnKuI-shjNguqfFFtWGV9wdOUZbZ6GkDYCHgu2cbHtseHowHB5usCNRqLVeGhSMuf8n7Xu_N-x0f8C4dozgoSTnD8vaw58_ov5FPpJKG/s1600/Screen+Shot+2011-11-14+at+15.32.09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEK0_YHv71LSmWY5ffhnFUhyphenhyphenMaRJoSMch6w-TwrnKuI-shjNguqfFFtWGV9wdOUZbZ6GkDYCHgu2cbHtseHowHB5usCNRqLVeGhSMuf8n7Xu_N-x0f8C4dozgoSTnD8vaw58_ov5FPpJKG/s320/Screen+Shot+2011-11-14+at+15.32.09.png" width="320" /></a></div><br /><br /><br /><br />Now select the UI section in the GUI builder and click the + button on the top left to add a new Blank Container. Call it CityRenderer.<br />Set its UIID to "Renderer" and edit the style, set its derive tab to derive from Container and set its margin left/right to 15 millimeters.<br /><br />Set the layout of the container to border layout and place two labels one in the north which you should name "Icon" (notice this should be the name not the label text!) and another in the south which you should name "Name" (yep).<br />Set the UIID of the North label to Container and the UIID of the south label to WhiteLabel. Edit the style of white label, set its foreground color to white and make its transparency 0. Set its alignment to Center.<br /><br />In the theme add a new Style in the selected tab called RendererFocus and set it to derive from Container.<br /><br />You should end up with something like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSKP76Bq9OgDr_wKs-Fkcl9h_gD7ivBI1qrrxu-qyzNMwjyyDIsoObTu1_7O1TXVpqnVt7RWyUWw7qll6uQ-H_gq3Yz71BiG0Sy4seciZJu8pxSkj_kLL0P8_gkFs0NDevT4eXSDfKL_Ix/s1600/Screen+Shot+2011-11-14+at+15.41.24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSKP76Bq9OgDr_wKs-Fkcl9h_gD7ivBI1qrrxu-qyzNMwjyyDIsoObTu1_7O1TXVpqnVt7RWyUWw7qll6uQ-H_gq3Yz71BiG0Sy4seciZJu8pxSkj_kLL0P8_gkFs0NDevT4eXSDfKL_Ix/s320/Screen+Shot+2011-11-14+at+15.41.24.png" width="320" /></a></div><br /><br />Go back to the Main form in the UI builder and select the list of cities at the bottom, select the ListItems property and remove all the elements within it. Click add entry and add elements one by one starting with San Francisco (and the matching image from above) using the key Name for the city label and the key Icon for the image to this end result:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOuS928KTu2rmeVW7GdEEZxke0o1HUn6PzE_2ZtHwuR03CnhNrIzahdkIN70gpIoa5mDbJeM7aGDWOqAJYLHwGhCDIYyiXxn5bLKh1oMrxHgye7DHeJevBzArnX6Fq9qi9WpkIpBKo3lZh/s1600/Screen+Shot+2011-11-14+at+16.45.22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOuS928KTu2rmeVW7GdEEZxke0o1HUn6PzE_2ZtHwuR03CnhNrIzahdkIN70gpIoa5mDbJeM7aGDWOqAJYLHwGhCDIYyiXxn5bLKh1oMrxHgye7DHeJevBzArnX6Fq9qi9WpkIpBKo3lZh/s320/Screen+Shot+2011-11-14+at+16.45.22.png" width="320" /></a></div><br /><br /><br /><br /><br />Follow this up and add all the cities from above to the list.<br />After pressing OK select the list and set the fixed selection to Center and uncheck the scroll visible flag.<br /><br /><br />Last but not least select the Main form and type "LWUIT Places" in the title attribute, then create a title style and use this image to generate the border:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxncTIv5ubEL5jN4BuM_Tt2RWD8Wkyxfp9s4DobBKASLYuNCNQ3Q9GBREmDVQwOjSvwRZuf4uIbcYTMKaf5w_SNh0urITb6ibH70D8ccNCxCMoaglUlZDP-G8jNuAth49kVK_0Bv87HZ_/s1600/title.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="39" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxncTIv5ubEL5jN4BuM_Tt2RWD8Wkyxfp9s4DobBKASLYuNCNQ3Q9GBREmDVQwOjSvwRZuf4uIbcYTMKaf5w_SNh0urITb6ibH70D8ccNCxCMoaglUlZDP-G8jNuAth49kVK_0Bv87HZ_/s320/title.png" width="320" /></a></div><br /><br /><br /><br />Now use the border wizard as such:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4wmxoM5ilOXYh7Mzd3KbCfY8RkddbbB2uyP5PHPdxvvlAjdpirfavBBo0GtDlxkfhhxgjTIoVVUrQL4uiXYIV8ROt1YKoV0WbedOF6ZeqfD-8AiLrvUubgTryoK0npTYi4Y9-p-eZT3C_/s1600/Screen+Shot+2011-11-14+at+17.00.01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4wmxoM5ilOXYh7Mzd3KbCfY8RkddbbB2uyP5PHPdxvvlAjdpirfavBBo0GtDlxkfhhxgjTIoVVUrQL4uiXYIV8ROt1YKoV0WbedOF6ZeqfD-8AiLrvUubgTryoK0npTYi4Y9-p-eZT3C_/s320/Screen+Shot+2011-11-14+at+17.00.01.png" width="320" /></a></div><br /><br /><br />And we are done! This is the final result:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6w9MShjrjcpnGnQxhpSVcJdUVcTob9X-9QR9XUZzwlv9zqTQC5YYtDidhafZ83H02x4JyY3L3upfDhvBj-HlUCQgKX3mUIPCkZC8I7rsXM2bS38MXo9Je11995GxKIH-bnEZJi-DHfrt/s1600/Screen+Shot+2011-11-14+at+17.15.35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6w9MShjrjcpnGnQxhpSVcJdUVcTob9X-9QR9XUZzwlv9zqTQC5YYtDidhafZ83H02x4JyY3L3upfDhvBj-HlUCQgKX3mUIPCkZC8I7rsXM2bS38MXo9Je11995GxKIH-bnEZJi-DHfrt/s320/Screen+Shot+2011-11-14+at+17.15.35.png" width="211" /></a></div>Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-4691915549420037229.post-64452239736046378442011-11-07T03:42:00.000-08:002012-02-03T11:47:31.969-08:00Places Demo Part IIIOK, its time to get started with actual resource editor work. First we need to launch the resource editor and create a new blank theme.<br /><br />BTW If you follow along don't forget to save frequently, unfortunately the resource editor doesn't yet offer proper "crash recovery" it is in my todo list but is a rather hairy problem. <br /><br />Then I define the form background to a vertical gradient starting from d8fe:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE8piHPBTT7K-MrF-W1TBiQt-axmmKi8JgxSgdKQrbOQyTI81AXC3PzrQ6MwjCKFsWY0C4ojFkSYgkuIalzF-MASKMjT8cNuMe1aTo4eK3fkXZaCUFdoPStVRFBRuMKwgFl5X_cUGOUgN/s1600/Screen+Shot+2011-11-07+at+12.48.32.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE8piHPBTT7K-MrF-W1TBiQt-axmmKi8JgxSgdKQrbOQyTI81AXC3PzrQ6MwjCKFsWY0C4ojFkSYgkuIalzF-MASKMjT8cNuMe1aTo4eK3fkXZaCUFdoPStVRFBRuMKwgFl5X_cUGOUgN/s320/Screen+Shot+2011-11-07+at+12.48.32.png" width="320" /></a></div><br /><br /><br /><br /><br />The next stage is going to the GUI builder and creating a new form (I called it Main, but call it whatever you want). I set its layout to border layout and placed two containers within it (in the center and in the south), these containers will hold the UI for the two portions of the screen.<br /><br />It should look something like this:<br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lq5r8Qa7EhQR3-y4FeE4eg8EghxSJjgxEQd-Y7PCnv57HaHT4rzMj9JZtuML-LnF8ep_Yxg5P66cbL1n09UxxTuRuDeRNWX6bX3XDKUNlpzb1JtFvA1MdWamwwgqaQDEs191p8dT-kaT/s1600/Screen+Shot+2011-11-07+at+12.54.32.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lq5r8Qa7EhQR3-y4FeE4eg8EghxSJjgxEQd-Y7PCnv57HaHT4rzMj9JZtuML-LnF8ep_Yxg5P66cbL1n09UxxTuRuDeRNWX6bX3XDKUNlpzb1JtFvA1MdWamwwgqaQDEs191p8dT-kaT/s320/Screen+Shot+2011-11-07+at+12.54.32.png" width="320" /></a></div><br />Then we need to allow for the design of the top area texture, for that we will add a new multi-image using the Images->Add Multi-Images option and select the skyline image here:<br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPtTtyl271ofIi7QsHW2fe78c8DgEUiyr1y_tn8pP7R5ZT14fY1zVdvX3KJssc34rLo3Przzyr-DJNuMkcLv29zdxg0tL-bSUUWPSnYgtJEKFlDUn-7Xsnb70-EeVu5M5sn6L4iy3KHais/s1600/skyline_texture_background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPtTtyl271ofIi7QsHW2fe78c8DgEUiyr1y_tn8pP7R5ZT14fY1zVdvX3KJssc34rLo3Przzyr-DJNuMkcLv29zdxg0tL-bSUUWPSnYgtJEKFlDUn-7Xsnb70-EeVu5M5sn6L4iy3KHais/s320/skyline_texture_background.png" width="269" /></a></div>Notice that I am selecting the full size image and not the one included in the blog!<br /><br />Then I am prompted to select the resolutions to the multi images. Notice that I filled out the percentages (to 100 and 61) and only then updated the values to 0 where appropriate.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73jfn_WIK1WOt5tESYIoVCziyk1Hn5qzgDqGIvHMyja3G1rBYnLyBvCOQdna2ku430qfJHrhyphenhyphenxQBX3e3wGXuVp6_bN1dr0p4K-ZnvXanLe24FYeDJkKJZOd6-sJbPxYdbv4nlWYrIw0yL/s1600/Screen+Shot+2011-11-07+at+13.02.15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73jfn_WIK1WOt5tESYIoVCziyk1Hn5qzgDqGIvHMyja3G1rBYnLyBvCOQdna2ku430qfJHrhyphenhyphenxQBX3e3wGXuVp6_bN1dr0p4K-ZnvXanLe24FYeDJkKJZOd6-sJbPxYdbv4nlWYrIw0yL/s320/Screen+Shot+2011-11-07+at+13.02.15.png" width="320" /></a></div><br />This dialog effectively tells the resource editor which size images it should manufacture for every resolution. I selected 100% for width which means I want the typical width of a device class as listed above (since the image needs to occupy the full width) and selected 60 percent height to match the image dimensions.<br />I zeroed out the values of the fields for which I didn't want an image created, very high resolution images would make my resource file too large and very low res images will be pointless for this sort of application.<br /><br />After pressing OK I select the first container and set its UIID property to "MainTexture", I then right click it and select Style->Unselected to edit its style. I select "Image Tile Horizontal Align Top" and within the derive tab I type in Container (to inherit the behavior of the Container style).<br /><br />Notice that the image might not tile properly sometimes due to its size, in which case we can increase its width slightly. Ideally an image that tiles "properly" will provide the best background texture.<br /><br />You should have something that looks like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn8evPpkGUDIPtIzk8GKMgh9iXepOcKW79FdY0IBOmfh9iMD_5KGQRsTKepHKbNlceHhyphenhyphenXHMOJ9pAL-OExaP5HqTkZy-8meZhfTIDLFFDiB2z2KYw0jjhR_oto05oj4nfCzpeXcaVDolnx/s1600/Screen+Shot+2011-11-07+at+13.10.46.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn8evPpkGUDIPtIzk8GKMgh9iXepOcKW79FdY0IBOmfh9iMD_5KGQRsTKepHKbNlceHhyphenhyphenXHMOJ9pAL-OExaP5HqTkZy-8meZhfTIDLFFDiB2z2KYw0jjhR_oto05oj4nfCzpeXcaVDolnx/s320/Screen+Shot+2011-11-07+at+13.10.46.png" width="320" /></a></div><br />And the GUI should look like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCraCWBJKmp0mnebuA7PaB6knRmrVhGEYhAP3MhJo9pmyrTYitYRAAs4HHn2xQzL4lAaDJiBBF1jm0eWhyphenhyphenKg6gPrGq4OsLwEzWeRq3yGUxtXMdiAkT-aeJAmGXAFhw9YP4brGz_X-7C4l/s1600/Screen+Shot+2011-11-07+at+13.11.56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCraCWBJKmp0mnebuA7PaB6knRmrVhGEYhAP3MhJo9pmyrTYitYRAAs4HHn2xQzL4lAaDJiBBF1jm0eWhyphenhyphenKg6gPrGq4OsLwEzWeRq3yGUxtXMdiAkT-aeJAmGXAFhw9YP4brGz_X-7C4l/s320/Screen+Shot+2011-11-07+at+13.11.56.png" width="320" /></a></div><br />Now we would like to add the carousel to the bottom of the screen and the map. <br />We add the map image using the same multi-image approach from before:<br /><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6j1UxzrX2zc1805DoBOwZ_NDoJ2liET5OqBZotD8KivHx1SBxIUPLA26I37VucZLzoZR9WgswHMM0F4OkX1XbdUx6ndc8Av7rxyllYNT_VjWjpLWplkj2Gjx8_c9fnazNrQemRkSWbHJ/s1600/Screen+Shot+2011-11-07+at+13.14.21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6j1UxzrX2zc1805DoBOwZ_NDoJ2liET5OqBZotD8KivHx1SBxIUPLA26I37VucZLzoZR9WgswHMM0F4OkX1XbdUx6ndc8Av7rxyllYNT_VjWjpLWplkj2Gjx8_c9fnazNrQemRkSWbHJ/s320/Screen+Shot+2011-11-07+at+13.14.21.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYAWNLmy_x_sR3Z1tnsq2j_ySyaNDnRSvNsqZNr4EOIuYXjH9Pe45L1_cGGywOHGDCL5WqH11h8OMtA4YaxahsuUd3tBi6pm_pUgXDPqyWNROBuFFQIee6FuFkZ8vB3RxlxkWqS0kkPb7/s1600/map.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYAWNLmy_x_sR3Z1tnsq2j_ySyaNDnRSvNsqZNr4EOIuYXjH9Pe45L1_cGGywOHGDCL5WqH11h8OMtA4YaxahsuUd3tBi6pm_pUgXDPqyWNROBuFFQIee6FuFkZ8vB3RxlxkWqS0kkPb7/s1600/map.png" /></a></div><br />We then select the second container and select BoxLayout_Y as its layout. We drag two containers into it. We select the containers and select for both the FlowLayout layout type, and configure it to align to center. This allows us to center the elements within the containers.<br />We drag a label into the top first of these two containers, set its UIID to Container and set its icon to the map image.<br />We drag a List to the second container and configure its orientation to be Horizontal. You should end up with something that looks like this:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2_tnft8Kpcw_QJWTj7L0SLnKR8RonGyLwQF0opOC5txOYtp7pVrVdTsObsuF-c0Swn_oza-vLXPg0JMgZj7ZEiW-_r9z6OklKTeDOa3cwClIyX3-qLIdx685tLaNmoK5m18_hyuEgPcL/s1600/Screen+Shot+2011-11-07+at+13.25.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2_tnft8Kpcw_QJWTj7L0SLnKR8RonGyLwQF0opOC5txOYtp7pVrVdTsObsuF-c0Swn_oza-vLXPg0JMgZj7ZEiW-_r9z6OklKTeDOa3cwClIyX3-qLIdx685tLaNmoK5m18_hyuEgPcL/s320/Screen+Shot+2011-11-07+at+13.25.54.png" width="320" /></a></div><br />We will implement the list bellow in the next part but lets at least finish the main sections of the top part... Go to the top container (the one I called Container1 which we placed in the Center) and set its layout to border layout, drag a container into its center area.<br />Set the UIID of that new container to MainList and its layout to box layout Y.<br />Edit its style by right clicking it and selecting Style->Unselected, in the derive tab type in "Container". Select the border tab and click the image border wizard.<br />Use pick image to pick the list image here:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGxEkF-h1nRKRCapLY8rXEt2znDezkW9J1ia7EZYzfBF2rXpp7hqTKQwbDwnNhM_m_H3RlcMtdFjdN5KMVX2e20jaozbDa3zd6_9EUU_vz8kW8Q7tRtLDuhP3l4uHMoa8q_nEJV0JMCpd/s1600/list_background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGxEkF-h1nRKRCapLY8rXEt2znDezkW9J1ia7EZYzfBF2rXpp7hqTKQwbDwnNhM_m_H3RlcMtdFjdN5KMVX2e20jaozbDa3zd6_9EUU_vz8kW8Q7tRtLDuhP3l4uHMoa8q_nEJV0JMCpd/s320/list_background.png" width="281" /></a></div><br /><br /><br /><br />And fill out the cutting setting as such with 30 px for every direction and Low/Medium multi-image generation:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8f4m0T7Qfmf5RFnn_HzWaAm2v1zwh2IKtaDNHn7Pb97wJO0j-de6vi1Taf4dtPw1FDDJ0nznq3og-mGzgsY1F3DdQG4jsQ-uUzkXsIH1YX1_iX0D15wU_1S3Vni9S_jWDs4lV2PORxtN/s1600/Screen+Shot+2011-11-07+at+13.34.35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8f4m0T7Qfmf5RFnn_HzWaAm2v1zwh2IKtaDNHn7Pb97wJO0j-de6vi1Taf4dtPw1FDDJ0nznq3og-mGzgsY1F3DdQG4jsQ-uUzkXsIH1YX1_iX0D15wU_1S3Vni9S_jWDs4lV2PORxtN/s320/Screen+Shot+2011-11-07+at+13.34.35.png" width="320" /></a></div><br />After pressing the generate button close the wizard and select the margin tab, define 10 pixels for every direction and click OK. <br />This should produce something like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4hw18LuWYIanRmXitmFv0lhfncN2G-uMYX0IPoHd7efHiN1_U0jUfB6U1A169gqb3Ceey8x8SU-Gyl3rzLFQau9sSJFtBlyX4o6TQPu4MCLGUWrb8vO0rGV8mY2JeLdAyKvUHdSHioPe/s1600/Screen+Shot+2011-11-07+at+13.40.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4hw18LuWYIanRmXitmFv0lhfncN2G-uMYX0IPoHd7efHiN1_U0jUfB6U1A169gqb3Ceey8x8SU-Gyl3rzLFQau9sSJFtBlyX4o6TQPu4MCLGUWrb8vO0rGV8mY2JeLdAyKvUHdSHioPe/s320/Screen+Shot+2011-11-07+at+13.40.55.png" width="320" /></a></div><br /><br /><br /><br />Next time I will continue from this point to complete the UI of the first form.<br /><br /><br /><span id="goog_639425034"></span><span id="goog_639425035"></span>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-3448861432354740172011-11-02T02:22:00.000-07:002012-02-03T11:47:31.792-08:00Places Demo Part IIIn the <a href="http://lwuit.blogspot.com/2011/10/places-demo-graphics-designer-bof.html">first part</a> of this series I went over the image Martin and Chen produced, in this part I'll review the path that needs to be taken in order to take this image and make it into an actual application fit for all devices.<br /><br />The first part is divide & conquer, we need to divide the image into its basic elements:<br />Backgrounds<br />Component looks<br />Content<br /><br />Photoshop makes this division relatively easy since it already divides elements to layers, although often these layers make sense in photoshop and not within our application. So reviewing this image:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSCdKIDqDVfXIQh5XSeHOdIB4ciXRFIYOca-b3C4VcDNKiFDuHeT-3DgrPdSnFapJDg8Vb2dq2xdPO8RIq-hePhiFNNte9XX6Kc64jifwiEkJCdc620EXmuX2KX7b1m3kmaATAyhfOSrc7/s1600/skyline.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSCdKIDqDVfXIQh5XSeHOdIB4ciXRFIYOca-b3C4VcDNKiFDuHeT-3DgrPdSnFapJDg8Vb2dq2xdPO8RIq-hePhiFNNte9XX6Kc64jifwiEkJCdc620EXmuX2KX7b1m3kmaATAyhfOSrc7/s320/skyline.jpg" width="160" /></a></div><br /><br />We have the following elements in the background:<br /><ul><li>Gradient from 00d8fe to black: </li></ul><br /><div class="separator" style="clear: both; text-align: center;"></div><br /><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHh1RpnNl3gkEkf20qT8A7FkQg2-6i1t-422RNsXDDZIs0pIOJdFkuj_eCkcqWzHfpMPYhyjs38hfMiNqUb9N6gQTYsNMWLZ9TdnVrD8bq7whAOGHfMuK7WOZ2WeNaglfeGbgCq85haPuE/s1600/skyline_background_gradient.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHh1RpnNl3gkEkf20qT8A7FkQg2-6i1t-422RNsXDDZIs0pIOJdFkuj_eCkcqWzHfpMPYhyjs38hfMiNqUb9N6gQTYsNMWLZ9TdnVrD8bq7whAOGHfMuK7WOZ2WeNaglfeGbgCq85haPuE/s320/skyline_background_gradient.jpg" width="160" /></a></div><br /><ul><li>Translucent texture image, notice that this image is translucent and it appears here on the background of the blog. When layered on the gradient it will look quite different:<br /></li><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPtTtyl271ofIi7QsHW2fe78c8DgEUiyr1y_tn8pP7R5ZT14fY1zVdvX3KJssc34rLo3Przzyr-DJNuMkcLv29zdxg0tL-bSUUWPSnYgtJEKFlDUn-7Xsnb70-EeVu5M5sn6L4iy3KHais/s1600/skyline_texture_background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPtTtyl271ofIi7QsHW2fe78c8DgEUiyr1y_tn8pP7R5ZT14fY1zVdvX3KJssc34rLo3Przzyr-DJNuMkcLv29zdxg0tL-bSUUWPSnYgtJEKFlDUn-7Xsnb70-EeVu5M5sn6L4iy3KHais/s320/skyline_texture_background.png" width="269" /></a></div></ul><br />Effectively these two come together to form a background like this:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdtW-uGwTzurDl1KnLeODuQkWyp9zcH2uG3cePz9Pvjo6u9wnwIi1nJcBEJxKkAjUkAwFbmxYH5UD06VMMOdIkm_QJKxhgs36_XbVeHOxPBp63dtsVYSvtYoLB_UHqlxF2jY_Yl3J0SgAJ/s1600/skyline_background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdtW-uGwTzurDl1KnLeODuQkWyp9zcH2uG3cePz9Pvjo6u9wnwIi1nJcBEJxKkAjUkAwFbmxYH5UD06VMMOdIkm_QJKxhgs36_XbVeHOxPBp63dtsVYSvtYoLB_UHqlxF2jY_Yl3J0SgAJ/s320/skyline_background.jpg" width="160" /></a></div><br /><br /><br /><br />Notice the color at the top its actually the area where the title bar background should reside, that is a part of the title component design.<br /><br />The components within the design are far more complex, there are easy elements such as the title:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0QVmV7xUcGCoAkT3CdrnJuXolq8QPQyFhfAvVjfRL4QPClrgS4MjQBy8oiaBEqaThRGOjiAtGhFbnLtbfQPA0H12hqnWhYKesrZvLfSnAKBw60-BpRASTw_Svta4mxZq6-1SrXn4aKBcP/s1600/title.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="39" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0QVmV7xUcGCoAkT3CdrnJuXolq8QPQyFhfAvVjfRL4QPClrgS4MjQBy8oiaBEqaThRGOjiAtGhFbnLtbfQPA0H12hqnWhYKesrZvLfSnAKBw60-BpRASTw_Svta4mxZq6-1SrXn4aKBcP/s320/title.png" width="320" /></a></div><br /><br /><br />And the list background:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGxEkF-h1nRKRCapLY8rXEt2znDezkW9J1ia7EZYzfBF2rXpp7hqTKQwbDwnNhM_m_H3RlcMtdFjdN5KMVX2e20jaozbDa3zd6_9EUU_vz8kW8Q7tRtLDuhP3l4uHMoa8q_nEJV0JMCpd/s1600/list_background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGxEkF-h1nRKRCapLY8rXEt2znDezkW9J1ia7EZYzfBF2rXpp7hqTKQwbDwnNhM_m_H3RlcMtdFjdN5KMVX2e20jaozbDa3zd6_9EUU_vz8kW8Q7tRtLDuhP3l4uHMoa8q_nEJV0JMCpd/s320/list_background.png" width="281" /></a></div><br /><br /><br />Which are both pretty easy. It gets complicated when looking at an element like this:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2fdGZsufKS0AUg178otgRH2o2RWkEM2fukJkJ2LkN1OosrHCDlXoU9UN1_VU6o3tbPxjed76NQb48l0XDw52jw6XkEmlUgkOGBUrIeYWam9qt0KD3y-UyR9mDX6vNlJFYwV-dwuJnNua/s1600/sample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2fdGZsufKS0AUg178otgRH2o2RWkEM2fukJkJ2LkN1OosrHCDlXoU9UN1_VU6o3tbPxjed76NQb48l0XDw52jw6XkEmlUgkOGBUrIeYWam9qt0KD3y-UyR9mDX6vNlJFYwV-dwuJnNua/s320/sample.png" width="320" /></a></div><br /><br /><br />Obviously the word Bars is part of the foreground its just here for visualization. As you can see the round portion of the cup fits snugly into the button, because it contains and icon and is aligned perfectly to that icon it can't be separated from that icon.<br />Yet because it aligns to the button and the button needs to grow with the text within it we might end up with something that looks like that:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6LDmfcvZ3PFuBs6TJOfB7EBdPTLG7AJ68LT-h2qzwTqk1uHoxFxycyzAerWs2lXaCviPGN7TVJmLIydrGHjI6WRYMqSawY-eET_PqYCVX086ePl02IFIrdOhEPqJUI4Zpe2IU1QEU2Tf/s1600/sample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6LDmfcvZ3PFuBs6TJOfB7EBdPTLG7AJ68LT-h2qzwTqk1uHoxFxycyzAerWs2lXaCviPGN7TVJmLIydrGHjI6WRYMqSawY-eET_PqYCVX086ePl02IFIrdOhEPqJUI4Zpe2IU1QEU2Tf/s320/sample.png" width="320" /></a></div>Which is obviously very far from the original design! There is no way to actually solve this problem that would be truly satisfying so we will make some compromises.<br />We will treat this element as the component:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtHqyb7FIeVEmGbDDuajNZ0FJvKtEYdsf3-sgLmQS9T1bHMdbXv2YHLAs-k-RTKXd14tiYDek5tdtncFroUzRMbVd2vyWDvvuvof-zoNYg0pUxkhi4jMFYrUgp-TkIEqQXUHDjEpjp7i-I/s1600/list_entry.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtHqyb7FIeVEmGbDDuajNZ0FJvKtEYdsf3-sgLmQS9T1bHMdbXv2YHLAs-k-RTKXd14tiYDek5tdtncFroUzRMbVd2vyWDvvuvof-zoNYg0pUxkhi4jMFYrUgp-TkIEqQXUHDjEpjp7i-I/s320/list_entry.png" width="320" /></a></div>And we will always scale the icon on the left to fit that element so it will be covered perfectly. Its not an ideal solution since it requires scaling the background image which can cause degradation.<br /><br />The rest of the images and the text within the application are really just the content, this separation is critical since elements that are background elements should be incorporated in the theme and elements that represent content should be incorporated into the UI.<br /><br />In the next post I will start explaining how to move this logic into the resource editor and create the UI for this demo.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-22690343113708955092011-10-24T23:53:00.000-07:002012-02-03T11:47:31.785-08:00Places Demo & The Graphics Designer BoF<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSCdKIDqDVfXIQh5XSeHOdIB4ciXRFIYOca-b3C4VcDNKiFDuHeT-3DgrPdSnFapJDg8Vb2dq2xdPO8RIq-hePhiFNNte9XX6Kc64jifwiEkJCdc620EXmuX2KX7b1m3kmaATAyhfOSrc7/s1600/skyline.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSCdKIDqDVfXIQh5XSeHOdIB4ciXRFIYOca-b3C4VcDNKiFDuHeT-3DgrPdSnFapJDg8Vb2dq2xdPO8RIq-hePhiFNNte9XX6Kc64jifwiEkJCdc620EXmuX2KX7b1m3kmaATAyhfOSrc7/s400/skyline.jpg" width="200" /></a></div>With the uncertainty of travel arrangements to JavaOne we didn't prepare anything for the Graphics Designer BoF & just intended to review our existing demos.<br />A day before the BoF Martin created this Graphic PSD, he and Chen worked quite allot to get it into a working demo state. I initially dismissed the attempt to do this when I glanced at the graphic he prepared, there are several "mistakes" you can see in the graphics if you have any experience in building UI's to scale to multiple resolutions/devices.<br /><br />The first and obvious "mistake" is the background, its a texture. If we will scale it, it would look "odd" and when a device is rotated we won't have an option. Not to mention supporting multiple device resolutions.<br />Sure we can add a version for every resolution but once you start going down that path you enter the maintenance hell that is the true cost of software development.<br /><br />The second mistake isn't quite as obvious, the icons for the 4 options are round and perfectly aligned to the content. This might not seem like a problem but it is quite a big one. The font will have different sizes on different devices (due to device density variation) but the icons have a fixed size that doesn't depend on the font size. Due to the box that surrounds the font the text effectively becomes dependent on the icon size. So the text might appear grotesquely small or freakishly large in comparison to the icon and the box that surrounds it.<br />Martin "solved" this by using a bitmap font, however that's a poor solution since it might look good on one device and awful on a higher/lower DPI device.<br /><br />The last major issue isn't as obvious, the map on the bottom wouldn't have enough space in landscape mode due to the large amounts of whitespace distributed all around.<br />This might actually be the easiest issue to resolve by moving the map graphic to the side in landscape mode.<br /><br />Its unclear from the graphic but Martin intended to have the map animate and the cities in the bottom to be swipeable, Chen and Martin actually implemented this full demo with a few additional screens not shown here. In the next few weeks I will try to go over the process of creating a demo like this from a PSD deliverable and adapting that demo to partially resolve these various issues I raised.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-70246467056121533802011-10-19T21:54:00.000-07:002012-02-03T11:47:31.979-08:00Interview and HOL<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0" height="360" id="flashObj" width="640"><param name="movie" value="http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1" /><param name="bgcolor" value="#FFFFFF" /><param name="flashVars" value="videoId=1190522301001&playerID=1217746023001&playerKey=AQ~~,AAAAAFcSbzI~,OkyYKKfkn3x1llKvCBQgVazGCPhNSKRX&domain=embed&dynamicStreaming=true" /><param name="base" value="http://admin.brightcove.com" /><param name="seamlesstabbing" value="false" /><param name="allowFullScreen" value="true" /><param name="swLiveConnect" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1" bgcolor="#FFFFFF" flashVars="videoId=1190522301001&playerID=1217746023001&playerKey=AQ~~,AAAAAFcSbzI~,OkyYKKfkn3x1llKvCBQgVazGCPhNSKRX&domain=embed&dynamicStreaming=true" base="http://admin.brightcove.com" name="flashObj" width="640" height="360" seamlesstabbing="false" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" swLiveConnect="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed></object><br />Here is a LWUIT interview I did at J1. I was sick and after a long flight, normally I'm more eloquent...<br /><br />The hands on lab that Daniel Green submitted and I wrote was refined by his team and is now an easier to follow PDF which you can download from the <a href="https://oracleus.wingateweb.com/scheduler/eventcatalog/eventCatalogJavaOne.do">Java One content catalog</a> by searching for 24682 and clicking the small PDF icon that appears next to the session details. Thanks to <a href="http://terrencebarr.wordpress.com/2011/10/18/new-lwuit-tutorial-available/">Terrence</a> for that tip.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-90786750451161029072011-10-10T23:54:00.000-07:002012-02-03T11:47:31.990-08:00Back From J1 2011<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsn83lX7bJyLW89iiTZtjzkGRD4NBkS0ilSYGM-Sv9PMGjFVW293HYw7cazjIbYVKzIXxjy5d-w0c9Hrsjg5k_8YZKgr3M5wZWSlkUS4WF56xZCXW8iIbcrwt4Ldxwav9RFiYh8eEASpN/s1600/SDC16898.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsn83lX7bJyLW89iiTZtjzkGRD4NBkS0ilSYGM-Sv9PMGjFVW293HYw7cazjIbYVKzIXxjy5d-w0c9Hrsjg5k_8YZKgr3M5wZWSlkUS4WF56xZCXW8iIbcrwt4Ldxwav9RFiYh8eEASpN/s320/SDC16898.JPG" width="320" /></a></div>JavaOne 2011 is finally over, its been a hectic week for us both because of the cramped timeline (we had to hurry back home due to complex holiday logistics) and because of the huge distance between my hotel and the venue. <br /><br />By all accounts this years J1 was bigger & better than last years although it wasn't the same as the old J1 in moscone. Hopefully the trend of improvement will persist to next year and the conference will be restored to its former glory.<br /><br />Despite the relatively weak attendance in the the mobility track and our own session (which had problematic scheduling) the BoF I had with Martin (in the picture above you see from left to right, Martin, myself & Chen) was pretty full. The hands on lab was also full although it was mired by an admin choosing to randomly reboot peoples PC's while they were working and problematic lab setup. Since we arranged this lab as a sort of last minute thing its amazing that we got it off the ground and even had a decent attendance.<br /><br />Martin & Chen created a pretty cool demo for our BoF, when I get the time I will clean it up and create something more robust based on it. Right now my desk is full with so many tasks postponed to "after" JavaOne.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-4691915549420037229.post-82968632130527952132011-09-30T02:02:00.000-07:002012-02-03T11:47:31.984-08:00My Music Cloud Finally Available<div class="separator" style="clear: both; text-align: center;"><a href="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/307189_248275755207787_212806222088074_625617_1089202011_n.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/307189_248275755207787_212806222088074_625617_1089202011_n.jpg" width="248" /></a></div>Remember Triplay? They guys behind the <a href="http://lwuit.blogspot.com/2011/02/musix-under-skin.html">musix application.</a> They are back now with <a href="http://www.mymusiccloud.com/">My Music Cloud</a>, a music service similar in a way to Google Music effort with a few advantages such as being available internationally on all devices etc.<br />The service essentially downloads music to the device from the cloud server and allows you to purchase additional music directly to the cloud server.<br /><br />The entire application is based on LWUIT with the exception of the iPhone port. The J2ME, Blackberry & Android versions of the application were implemented using the LWUIT GUI builder.<br /><br />Unlike the musix application which was operator bound you can check the MMC application right now by going to <a href="http://www.mymusiccloud.com/">their website</a> right now and following the instructions to try out this application.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-4691915549420037229.post-18969768053706029592011-09-27T21:13:00.000-07:002012-02-03T11:47:31.783-08:00Major LWUIT Developer Purchased For 300M USD<a href="http://global.telmap.com/">Telmap</a> was just <a href="http://www.themarker.com/hitech/1.1485359">purchased by Inte</a>l for the sum of 300,000,000, they haven't made an announcement though. While a huge portion of their effort is the server side and that deserves a great deal of their value, I can't think of a single company who bet more heavily on LWUIT.<br />In a recent visit to their headquarters they showed us pretty spectacular things such as their LWUIT port to native Windows Phone 7 and a tool that allows them to modify and preview resource files on devices. Very cool.<br />Telmap adopted LWUIT at a time when it had a fraction of the features it had today and used it to get their applications UI far and wide into the devices of the world. Their Android port is based entirely on LWUIT and the work from <a href="http://www.google.com/url?sa=t&source=web&cd=1&ved=0CBkQFjAA&url=http%3A%2F%2Fwww.pader-sync.com%2Flwuit-for-blackberry-and-android.html&rct=j&q=pader%20sync%20LWUIT%20on%20android&ei=wJ2CTufTAqGh0QXeiLDTAQ&usg=AFQjCNFuFn2Vd4Jifk6dtHoaWWfPFknfLA&cad=rja">Thorsten</a> and their RIM port as well. <br />Telmap has also made one of the most elaborate LWUIT source contributions for RTL (right - to left, bidi) support, displaying their faith in the open source model and giving back to the community.<br /><br />Congratulations guys on a well deserved exit and recognition of your efforts!<br /><br />Update: The story has made it to the usual guys, here is an <a href="http://www.slashgear.com/intel-grabs-telmap-for-cross-platform-appup-location-services-30184228">English article in Slashgear</a>. BTW I neglected to mention that during our visit to Telmap headquarters we talked quite a bit about their future and past with LWUIT. The technical guys were very bullish on LWUIT and indicated that they have no intention of shifting direction. They claim that they save a fortune in maintenance costs by focusing on a single code base, their mobile team is indeed quite small relatively to the complexity of their application and the amounts of platforms supported.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-58697077002466842762011-09-18T03:59:00.000-07:002012-02-03T11:47:31.963-08:00LWUIT and Facebook API - by Chen Fishbein<div>Nowadays almost every app needs to be connected to facebook in some level: post a message to your friends wall, post on your wall, like a post, etc...</div><div><br /></div><div>We are well aware of such need and we are well aware of the lack of support for J2ME devices.</div><div>Connect an app to facebook sounds something trivial that every smart phone is doing very easily, but doing the same on a J2ME device is almost impossible.</div><div><br /></div><div>Facebook uses Oauth2 to authenticate which basically means you need a browser to display the login page and the ability to handle a session on the client until login is authenticated.</div><div><br /></div><div>In the last couple of months we worked very hard to finally offer such solution to LWUIT developers, now you can use a very simple API to access Facebook.(it's important to note that this won't work on all J2ME devices, due to a relatively new/complex certificate facebook is using, which some old devices has difficulties with, even the good old WTK won't work - this will require a nokia SDK or the upcoming SDK 3.0.5 from Oracle which should be released soon)</div><div><br /></div><div>The new API has a new Demo which is available from our svn:</div><div>https://svn.java.net/svn/lwuit~svn/trunk/Apps/FaceBookDemo</div><div><br /></div><div>In addition we created an official facebook lwuit page which is open for lwuit discussions</div><div><a href="https://www.facebook.com/pages/Lwuit/132932836804285">https://www.facebook.com/pages/Lwuit/132932836804285</a></div><div><br /></div><div><br /></div><div>Some API samples:</div><div><br /></div><div>//authenticate your facebook app with the permissions you need</div><div><div>FaceBookAccess.getInstance().authenticate(appid<appid>, redirect_uri<redirect-uri><appid>, <redirect_uri>new String[]{"user_photos", "friends_photos", "publish_stream", "read_stream", "user_relationships", "user_birthday", "friends_birthday", "friends_relationships", "read_mailbox", "user_events", "friends_events", "user_about_me"});</redirect_uri></appid></redirect-uri></appid></div><div><br /></div><div>//then create a User Object and ask the FaceBookAccess to fill it with the data</div><div>User me = new User();</div><div>FaceBookAccess.getInstance().getUser("me", me, null);</div></div><div><br /></div><div><a href="http://screencast.com/t/5oV1MYjOdDG"><iframe width="425" height="349" src="http://www.youtube.com/embed/6afeZEP6ed0?hl=en&fs=1" frameborder="0" allowfullscreen=""></iframe></a></div>Unknownnoreply@blogger.com19tag:blogger.com,1999:blog-4691915549420037229.post-28894166793525377122011-09-15T04:01:00.000-07:002012-02-03T11:47:31.789-08:00Recipe Book HOL Draft<span id="internal-source-marker_0.1533423932650423" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">This is a quick draft of my hands on lab for JavaOne where we go over creating a GUI builder Recipe book application. Let me know what you think.</span><br /><span id="internal-source-marker_0.1533423932650423" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span id="internal-source-marker_0.1533423932650423" style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Launch the LWUIT Resource Editor application from the utils directory under the LWUIT distribution directory.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Create a new basic wood theme in the theme tab</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><img height="320px;" src="https://lh4.googleusercontent.com/Bmsi5gLUAIJw_QNdOBWhGACZxEhRXN26_CuFG780skXtzesqo_yRXfRv7sBVSHfWHVChOQn1jcqdX8HZ5zx27CeKuPZzpf77gha62co7kDTiFfRfDeM" width="526px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to the UI Tab in the resource editor and add a new UI entry, name it “Splash Screen” to create a new splash screen.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Set its layout to border layout with “absolute center” place a label in the center and give it the text Recipe Book.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">At the south area place a slider component, set it to infinite mode and set its text to an empty string.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><img height="436px;" src="https://lh6.googleusercontent.com/Zh2afcFvhFoA_9DvHpHiBlmZP_2w-OlTop7xlcbHtvwDRi2DZ_Ivo5s9aqz0_BxI5NB_WhQoRiSw3Re3MLXo05dNye3GCvZZtf6Gdj2jIPNmvFF1EC4" width="671px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Create a new GUI form and name it Main. Go back to the Splash Screen and define next form as Main.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Set the title of Main to “Recipe Book”, set the layout to BoxLayout Y so elements may be organized from top to bottom.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Drag a Container into the form and select it. Set its layout to GridLayout with 2 rows and two columns.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Drag 4 buttons into that container and name them add, edit, exit & settings. Make sure to update their labels as well. </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Use the “Images->Add Images” menu item and select the images add.png, edit.png, exit.png & settings.png</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><img height="47px;" src="https://lh6.googleusercontent.com/nAydgIJjFhUubvUptxStNOoZ0X3TY-cnDBg-JuacBSAhadv_wwCScIcTSDJ5Vz3wiOaxgalJ63XysJevmIVBTuU0wWbySXG2iGPWxdTlBCvaJKF_EL4" width="47px;" /><img height="47px;" src="https://lh3.googleusercontent.com/mAbmko6vvfYlOJvUy5fDf4tgWPjmkRq-JghM_ryHkl5LKLR7qtyhAH8afPFxWo2Vnk0Yzb46Lnoo5Vae3Uvqg6c_1yMCnDzLabwtyLdSsoUzIkIS538" width="47px;" /><img height="47px;" src="https://lh6.googleusercontent.com/-z6PL9PXP5K47gFo3_k0J6LcZZsLO26lIpA6-hmZ6gky5DSD0qtU97-MYmOP8JUoDtNN7E_B9IBRr5f0p4zB3cHtxTIanAFYdh78B5ZGDgjQM7OpHi8" width="47px;" /><img height="47px;" src="https://lh4.googleusercontent.com/x_h0nVSqfpH3-2fxKKORiPQjzG3wVzYQ7Kl3nIuINrEbTibMECFxMXLhQn0JxFhlxh7sqHtvFYnOhypfJ4_55eBZKCWqqONMBWFPE6KDAY984Rr5VUs" width="47px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to each of the buttons, select the appropriate icon and set the text position to bottom. You should end up with a form that looks like this:</span><img height="419px;" src="https://lh3.googleusercontent.com/HirXOqqi7dl-oN3mbrj1JIzKMvWTWqzgK9JWw-_ndRHmGFC-ZKO3NClBqnVrNxC9hXwp6VnTee-tkgfWlWOWaUc7B1a0GsO2_AXcYXpmeyQr46hNDpA" width="641px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Create a new form and call it “Add Recipe” go back to the main form and select the add button. In the properties section click the Command entry, leave most of the defaults select the Action to point at “Add Recipe” which will trigger navigation to the add recipe page.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><img height="321px;" src="https://lh5.googleusercontent.com/yxu5qN7USUJPYtN0GqR_vX7xA7U24UswKaURUJfzLwSg29YeabZLDjYm19cH7JLFcXrS_vfz-yIlH3u7ju2RQ_oTZMcHGj7S4T1Qv3nZ8OSyaOOzMjQ" width="543px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Click the exit button and click the command for that button, select the “Exit” action for this button.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Select the “Add Recipe” form and click the form. Set the title to “Add Recipe” set the layout to border layout. Drag a container into the North portion of the form and set its layout to table layout with 2 columns and 4 rows.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Drag the following components into the table layout container 4 labels, text field, combo box, text area & button.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Arrange the elements within the table layout container either by dragging on the tree or within the UI place all the labels to the left and arrange the component order so the text field is first, the combo box second the text area third and the button last.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Give the labels the following text: “Title”, “Type”, “Steps” & “Image”.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Give the components equivalent names to the labels besides them: text field = title, combo box = type, text area = steps & button = image.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Set the text of the text field to an empty string.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Click the list items entry in the combo box and remove all the “Item *” entries. Add 3 entries by selecting the String radio button and typing in the text field bellow the table. “Savory”, “Sweet” & “Spicy”:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><img height="234px;" src="https://lh3.googleusercontent.com/Mt8AM03e8JRHCG2LFgFVYoxAPPBOOVqw_AKf4NJ-y64aKfMC8aCz0Dq-VfhGiEOA5wughX6MAeDsiQHXaJDDNIqvf0TNzyulj3mOKWFo5LBYRZh72EE" width="516px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">This should be the result:</span><br /><img height="178px;" src="https://lh3.googleusercontent.com/NuQ_RQcSqNMDiCcbz27bzJVbvNBKCWtCbxtNYIa_tCEW1pzgIWYxfhS0bG9PigqNhlQ4MQNe6Icdp_20Isp-UdDJhQHt5YWyoCXXCMZDbqY7eoTFHCA" width="301px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Select the text area and clear the current text, set columns to 20 and rows to 5.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Select the “Steps” label next to the text area, click “Layout Constraints” and set the vertical align to top.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Select the button and set its text to “...”, set its UIID to “Label”.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">You should end up with this:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><img height="382px;" src="https://lh3.googleusercontent.com/XKJKCB5BWDzEPDXHksC5EG43ZTKles-JgR6TiHl1UQwxfdKKKjz_Nyj6LkBSgPUxwovLsu8ByvHOOHPxtNSVBg66ErexS-5XKu_y0VHn-Hud4W_wzFc" width="588px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Now you can actually go to the “Theme” section in the resource editor and play with a live functioning version of your application. Within the theme select the “Preview Settings” button and select “Splash Screen” as the first form.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Select the Menu Item “Application->Generate Netbeans Project”.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">You will be prompted to select the main screen select the “Splash Screen”</span><img height="121px;" src="https://lh6.googleusercontent.com/dWI9KTCdUpcuvmxlJ-8he9tCj214SuQIefujVZJ8ye_ayyo3bFMWmnlda1aS15K7Ic3WfF1TBDMkcavOCL-V1NXyGQo5-MFpa3fg6V-pPw65aBbx8v0" width="260px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Then you would be prompted for a project name, its probably best to avoid spaces or special characters in a project name:</span><br /><img height="115px;" src="https://lh5.googleusercontent.com/MVcELjvtOxqV9P3nuroyvWM3tkAB5YAanPXShASs65Azqe8lwc_Y86y_cx5iIzt4Epv08KycQGaZNik70ZwgXGfczzab2RyqLQvWVcCXgJgW7fYlKF8" width="250px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">You will now receive a directory to which the project will be generated, notice that if you saved the resource file previously this old copy would be discarded and the resource file will now reside in the src directory under the directory you have given.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">If Netbeans isn’t detected you will now be prompted to find the Netbeans executable under Program Files. Once the project is generated you should have 4 projects in Netbeans: </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">RecipeBook - Main library project where the cross platform LWUIT code & resources reside</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">RecipeBook_Desktop - Port to Java SE allowing you to rapidly run your code on the desktop and also generate Applets from LWUIT applications.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">RecipeBook_RIM - Enables building native RIM applications from LWUIT applications.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">RecipeBook_MIDP - Enables building MIDlets for J2ME mobile devices</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Some of the projects might be marked in red for unresolved dependencies due to different emulator settings etc. If the RIM project is marked in red ignore it for now since it requires setting up a RIM environment. For the other projects right click the project and select properties, select Platform and make sure the proper environment is configured as CLDC 1.1, MIDP 2.0 and all the optional packages are checked (this is mostly for compilation and isn’t required in runtime).</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go back to the resource editor and select the “Add Recipe” form click the “Commands” entry and select “Add”. Type “Add” as the name of the command, select “Main” as the action of the command and click the “Go To Source” button (if Netbeans pops up go back to the resource editor) click OK to dismiss the dialog and press the save button in the resource editor toolbar (whenever save is pressed code is generated).</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to Netbeans you should see the source code for the “Add” command callback:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> protected boolean onAddRecipeAdd() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> boolean val = super.onAddRecipeAdd();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return val;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> What we have is a method that will be invoked before the command is processed we can add our custom code to save the data. First lets create a recipe object, right click the userclasses package and select “New Class”. Give the class the name Recipe and enter the following fields:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> private String title;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> private int type;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> private String steps;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> private byte[] image;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Select the menu “Refactor->Encapsulate Fields” and select all the fields so you will have getters/setters for the fields.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Add an implements Externalizable to the class and make sure to import com.sun.lwuit.io.Externalizable.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">You will be prompted to implement the missing methods, accept this prompt which will generate the following method stubs:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public int getVersion() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public void externalize(DataOutputStream out) throws IOException {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public void internalize(int version, DataInputStream in) throws IOException {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public String getObjectId() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Make sure to import com.sun.lwuit.io.util.Util for the following step, implement these methods as such:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public int getVersion() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return 1;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public void externalize(DataOutputStream out) throws IOException {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Util.writeUTF(title, out);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> out.writeInt(type);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Util.writeUTF(steps, out);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(image == null) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> out.writeInt(0);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> } else {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> out.writeInt(image.length);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> out.write(image);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public void internalize(int version, DataInputStream in) throws IOException {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> title = Util.readUTF(in);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> type = in.readInt();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> steps = Util.readUTF(in);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> int s = in.readInt();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(s == 0) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> image = null;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> } else {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> image = new byte[s];</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> in.readFully(image);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public String getObjectId() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return "Recipe";</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go back to the state machine to the onRecipeAdd method and add the following code:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">protected boolean onAddRecipeAdd() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> boolean val = super.onAddRecipeAdd();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Form root = Display.getInstance().getCurrent();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Recipe entry = new Recipe();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setTitle(findTitle(root).getText());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setSteps(findSteps(root).getText());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setType(findType(root).getSelectedIndex());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> EncodedImage e = (EncodedImage)findImage(root).getIcon();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(e != null) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setImage(e.getImageData());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Vector recipes = (Vector)Storage.getInstance().readObject("recipes");</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(recipes == null) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> recipes = new Vector();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> recipes.addElement(entry);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Storage.getInstance().writeObject("recipes", recipes);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return val;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">}</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">In the initVars method of the state machine you must register the recipe class as such so the deserialization code can work:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Util.register("Recipe", Recipe.class);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to the Main class in the Desktop project and the MIDP project and add this code just bellow the Display.init() call :</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Storage.init("RecipeBook");</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> NetworkManager.getInstance().start();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to the resource editor and select the “...” image button, in the tabs pick the events tab and click “Action Event”. This should create a new method in the state machine class:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> protected void onAddRecipe_ImageAction(Component c, ActionEvent event) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.onAddRecipe_ImageAction(c, event);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Update the code to allow image picking:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">protected void onAddRecipe_ImageAction(final Component c, ActionEvent event) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.onAddRecipe_ImageAction(c, event);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> final GoogleRESTService r = new GoogleRESTService(findTitle(c.getParent()).getText(), GoogleRESTService.IMAGE_SEARCH);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> r.setResultSize(8);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> final Progress p = new Progress("Searching", r);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> p.showPacked(BorderLayout.CENTER, false);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> r.addResponseListener(new ActionListener() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public void actionPerformed(ActionEvent ae) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> p.dispose();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Vector results = r.getResults();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Container options = new Container();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> for(int iter = 0 ; iter < results.size() ; iter++) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(results.elementAt(iter) instanceof GoogleRESTService.ResultEntry) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> GoogleRESTService.ResultEntry e = (GoogleRESTService.ResultEntry)results.elementAt(iter);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(e.getTbUrl() != null) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Button selection = new Button();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> options.addComponent(selection);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> ImageDownloadService img = new ImageDownloadService(e.getTbUrl(), selection);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> NetworkManager.getInstance().addToQueue(img);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> selection.addActionListener(new ActionListener() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public void actionPerformed(ActionEvent ae) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> ((Dialog)Display.getInstance().getCurrent()).dispose();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> findImage(c.getParent()).setIcon(((Button)ae.getComponent()). getIcon());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> c.getComponentForm().revalidate();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> });</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Command cancel = new Command("Cancel");</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Dialog.show("Pick Image", options, new Command[] {cancel});</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> });</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> NetworkManager.getInstance().addToQueue(r);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">}</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Create a new form in the resource editor called “List Recipes”, go back to the Main form and edit the command for the “Edit” button so its action will be “List Recipes”.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go back to “List Recipes” and set the layout to BorderLayout, uncheck the scrollable Y property, set the title to “List Recipies” and drag a list to the center. Select the List and name it recipeList, move to the events tab and click List Model.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">You should end up with something that looks like this:</span><img height="407px;" src="https://lh5.googleusercontent.com/waprKVfcqhDH5gY03KACbdIXla4_xC5gU_2gI8e4acSFkQjbNRJQuLhZZjQ-_y_AiRhPeH4sgZDf0ACKLRH88RBMG-ghqyCkvueJgPnpsAwF-BhG3fs" width="602px;" /><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Save the resource and go to Netbeans where a new method should appear:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">protected boolean initListModelRecipeList(List cmp) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.initListModelRecipeList(cmp);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> cmp.setModel(new DefaultListModel(YourDataHere));</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return true;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">}</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Replace the setModel line with this code:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">cmp.setModel(new DefaultListModel((Vector)Storage.getInstance().readObject("recipes")));</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">cmp.setRenderer(new DefaultListCellRenderer(false) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public Component getCellRendererComponent(Component list, Object model, Object value, int index, boolean isSelected) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(value instanceof Recipe) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Recipe r = (Recipe)value;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.getCellRendererComponent(list, model, r.getTitle(), index, isSelected);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> setIcon(r.getEncodedImage());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return this;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return super.getCellRendererComponent(list, model, value, index, isSelected);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> } </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> });</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to the Recipe class and add the following code to allow image caching: </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> private EncodedImage img;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> public EncodedImage getEncodedImage() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(image == null) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> img = null;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> } else {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(img == null || img.getImageData() != image) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> img = EncodedImage.create(image);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return img;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">In the Resource Editor select the Add Recipe form and select the menu item “Edit->Duplicate”.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Call the new form “Edit Recipe”.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Change the title for the form to “Edit Recipe”. Remove the “Add” command from the form and add a “Save” command instead.</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go back to the “List Resources” form and select the List & the events tab, within it select action event for the list. Go to Netbeans where you should see the code:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">protected void onListRecipes_RecipeListAction(Component c, ActionEvent event) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.onListRecipes_RecipeListAction(c, event);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">}</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Add the offset field to the State machine class:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> private int offset;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Then add the following code into the onListRecipes_RecipeListAction method:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> offset = findRecipeList(c.getParent()).getSelectedIndex();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> showContainer("Edit Recipe", null, c);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go back to the resource editor and select the “Edit List” form, select the “Events” tab and click “Before Show”. Go to Netbeans where you should see this method:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> protected void beforeEditRecipe(Form f) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.beforeEditRecipe(f);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Insert the following code into the method:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Vector recipes = (Vector)Storage.getInstance().readObject("recipes");</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Recipe r = (Recipe)recipes.elementAt(offset);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> findTitle(f).setText(r.getTitle());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> findSteps(f).setText(r.getSteps());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> findType(f).setSelectedIndex(r.getType());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> findImage(f).setIcon(r.getEncodedImage());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Select the properties tab in the resource editor GUI builder and edit the commands of the form, edit the save command. Set the action of the command to list recipes. Click Go To source and press OK to close the dialogs that are open. </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to Netbeans where you should now have:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> protected boolean onEditRecipeSave() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> boolean val = super.onEditRecipeSave();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return val;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Insert the following code instead of the method body:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.onEditRecipeSave();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Vector recipes = (Vector)Storage.getInstance().readObject("recipes");</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Recipe entry = (Recipe)recipes.elementAt(offset);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Form root = Display.getInstance().getCurrent();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setTitle(findTitle(root).getText());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setSteps(findSteps(root).getText());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setType(findType(root).getSelectedIndex());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> EncodedImage e = (EncodedImage)findImage(root).getIcon();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> if(e != null) {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setImage(e.getImageData());</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> } else {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> entry.setImage(null);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> }</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Storage.getInstance().writeObject("recipes", recipes);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> back();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return true;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to the “Edit Recipe” form and add a command, name it “Delete” and press “Go To Source”. Press OK for both dialogs and save the resource file. </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Go to Netbeans where you should see the following code:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">protected boolean onEditRecipeDelete() {</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> boolean val = super.onEditRecipeDelete();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return val;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">}</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Insert the following lines instead of the method body:</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> // If the resource file changes the names of components this call will break notifying you that you should fix the code</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> super.onEditRecipeDelete();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Vector recipes = (Vector)Storage.getInstance().readObject("recipes");</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> recipes.removeElementAt(offset);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Storage.getInstance().writeObject("recipes", recipes);</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> back();</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> return true;</span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span>Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-4691915549420037229.post-14214715073935706862011-08-31T08:33:00.000-07:002012-02-03T11:47:31.778-08:00LWUIT Hands On Lab For Java OneI got tasked with writing a Hands On Lab (HoL) for JavaOne about LWUIT. For those of you who haven't been to a JavaOne (or Java Developer Day) HoL's are generally a bootcamp like class where you get your feet wet building a quick and dirty demo with a tool to get a feel of the tool.<br />I already wrote a HoL for LWUIT a while back but it was before the GUI builder was ready and it required internet connectivity to actually work & provide value. The problem with the latter portion is that the internet connectivity might be flaky on people's laptops when everyone tries to reach webservice X in a crowded conference.<br /><br />So I'm working on a long overdue lab rewrite that will incorporate the latest and greatest resource editor GUI builder and LWUIT 1.5. Generally I would like to create something that is simple yet elegant and I will try to post most of the "how to" in the blog, to actually learn first hand from Chen and myself you would need to actually attend the lab.<br />If you have any ideas which are simple enough for a first time mobile developer to implement and still show value without an internet connection (we can use some mockups etc. to get the point across) then feel free to post suggestions because I'm somewhat stumped with ideas. Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-4691915549420037229.post-55588591201456199142011-08-24T08:31:00.000-07:002012-02-03T11:47:31.956-08:00Resource Editor Mac Integration<iframe width="640" height="390" src="http://www.youtube.com/embed/6cfdxvl0SZY" frameborder="0" allowfullscreen></iframe><br />I just uploaded a new version of the resource editor application which features much improved Mac OS integration to ease the work of designers who use a Mac with LWUIT. Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-90460298786121412902011-08-22T01:17:00.000-07:002012-02-03T11:47:31.987-08:00Fixing Netbeans RIM Integration On Windows 7 And VistaFor some reason which is entirely unclear to me the guys who implemented Netbeans RIM integration chose to copy the resulting COD files from the dist directory to the RIM program files directory effectively breaking this integration for newer MS OS's which fixed the faulty behavior of a user writeable program files directory.<br />The problem is that the error you get is misleading, it claims that the directory is read only and when trying to change the read-only status windows "seems" to do some work but fails. The reason for the problem is permissions and fixing this problem is actually quite easy once you understand that.<br /><br /><br />First go to the Program Files directory (or Program files x86 for 64 bit machines) and select the RIM directory.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKcDviORWIHI6Qtss37cth2Y8umaEBLbtwIFe2EtvkAhATkZhVwqwtT1ZyrtB9r68QvF3O98yZSujol9nmKtCmuZEsPYi6H-e1sCOqtEjqVstS7sav82sYGy04sHJMjmPlJO_XKIS7nqo/s1600/file_browser_RIM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKcDviORWIHI6Qtss37cth2Y8umaEBLbtwIFe2EtvkAhATkZhVwqwtT1ZyrtB9r68QvF3O98yZSujol9nmKtCmuZEsPYi6H-e1sCOqtEjqVstS7sav82sYGy04sHJMjmPlJO_XKIS7nqo/s320/file_browser_RIM.jpg" width="320" /></a></div><br /><br />Right click and select properties, go to the security tab and click edit.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWj_MEC2hpzcceIC0Qy8Kdf9pjeTI3ZBB7SrShl8tlrLSGxkhV_s20zfxJu0D4ADtXuXC-rGLh9Ha62Xgk7uzcVbZGp6xda6p4m_3xv77D-LZADg6OnS_KbeGeVh5iZ76yr1h7s4pp6ERQ/s1600/permissions_dialog_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWj_MEC2hpzcceIC0Qy8Kdf9pjeTI3ZBB7SrShl8tlrLSGxkhV_s20zfxJu0D4ADtXuXC-rGLh9Ha62Xgk7uzcVbZGp6xda6p4m_3xv77D-LZADg6OnS_KbeGeVh5iZ76yr1h7s4pp6ERQ/s320/permissions_dialog_1.jpg" width="244" /></a></div><br />Select your user name from the list and check the allow for all the boxes, click OK for all the dialogs (this will take a bit of time since the operation is recursive).<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0OTh5dVUk5bfxFyGHmdCiRUx9E8YaIXTsPxO904jl9WKgiEvLD-4AxuMZvog1TRYS0V6JjbRjUL3HovBANoJVIFbDe9Q9EH_248gvHlLI6sBq0d0Og_Kbq7nLYYCEicCKqdwW9T3pM_j/s1600/permissions_dialog_2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0OTh5dVUk5bfxFyGHmdCiRUx9E8YaIXTsPxO904jl9WKgiEvLD-4AxuMZvog1TRYS0V6JjbRjUL3HovBANoJVIFbDe9Q9EH_248gvHlLI6sBq0d0Og_Kbq7nLYYCEicCKqdwW9T3pM_j/s320/permissions_dialog_2.jpg" width="267" /></a></div><br />Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-4691915549420037229.post-90704472721722137032011-08-11T21:27:00.000-07:002012-02-03T11:47:49.246-08:00Java Spotlight Podcast Interview With Chen Fishbein on LWUIT 1.5<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-3qkn7jHA3lU/TkBWl5sBuxI/AAAAAAAAp2E/XZ453KA-2lk/GUI%252520Builder.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="154" src="http://1.bp.blogspot.com/-3qkn7jHA3lU/TkBWl5sBuxI/AAAAAAAAp2E/XZ453KA-2lk/GUI%252520Builder.png" width="320" /></a></div>Roger Brinkly recorded this a while back in India (at the local JavaOne where Chen spoke) when we thought we would be releasing 1.5 soon. Regardless its a great interview and <a href="http://blogs.oracle.com/javaspotlight/entry/java_spotlight_episode_42_chen">interesting podcast</a> worth the listen especially if you haven't been following 1.5 news.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-47931861635379974182011-08-11T01:18:00.000-07:002012-02-03T11:47:49.083-08:00LWUIT 1.5 Released (finally!)<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-Zibt-3W1Fts/TkK_ausgozI/AAAAAAAAqag/HqRJFEtwqIc/moz-screenshot.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="298" src="http://3.bp.blogspot.com/-Zibt-3W1Fts/TkK_ausgozI/AAAAAAAAqag/HqRJFEtwqIc/moz-screenshot.png" width="320" /></a></div>After multiple delays we are thrilled to announce the release of LWUIT 1.5 which you can download <a href="http://www.oracle.com/technetwork/java/javame/javamobile/download/lwuit/index.html">here</a>. This is probably the biggest, most complete release of LWUIT since version 1.0 hit the scene, it includes both groundbreaking changes and refinements to LWUIT core features.<br /><br />The major features of this release are:<br /><br /><ul><li>GUI Builder With major revamp of the Resource Editor tool</li><br /><li>LWUIT4IO a tightly integrated Storage, Networking & Filesystem framework with ports to multiple platforms</li><br /><li>Far deeper theming including, theme constants, declarative style inheritance, disabled styles etc.</li><br /><li>New JavaSE & CDC ports allowing easier debugging/testing/profiling on the desktop as well as easier demos by deploying LWUIT applications as applets</li><br /><li>New Components: <ul><li>ContainerList allows variable row size list & complex list layouts</li><br /><li>Tabs supersedes the TabbedPane providing swipe gestures, elaborate theming and much more</li><br /><li>Slider provides progress indication and gauge control</li><br /></ul></li><br /><li>New recommended project structure for demos allowing for easier porting to RIM/Desktop/CDC</li><br /><li>PeerComponent allowing the embedding of native components within a LWUIT UI (applicable on some platforms)</li><br /><li>Improved & simplified animations for layout effects</li><br /><li>Multi-Images and improved SVG support</li><br /><li>HTML 4 tag support and public parser API for HTML/XML</li><br /><li>Virtual Keyboard is now builtin to LWUIT with deep support for native VKB input and toggling between multiple VKB's</li><br /><li>Focus rewritten from scratch to be more intuitive </li><br /><li>Performance/RAM improvements</li><br /><li>Drag & Drop API, copy and paste API and much more</li><br /></ul>Unknownnoreply@blogger.com27tag:blogger.com,1999:blog-4691915549420037229.post-54415129517831956532011-08-09T11:46:00.000-07:002012-02-03T11:47:49.106-08:00Parsing In LWUIT & LWUIT4IOGenerally LWUIT as a UI framework focuses on the visual aspect of things and not so much on the unsexy backend logic such as parsing. However, thanks to Ofir we now have an HTMLComponent that included within it a parser for XML which now has its own public API.<br /><br />Normally we would all try to reuse code from existing projects such as kXML etc. however due to licensing conflicts and the requirement to get permissions from management for every dependency we tend to just solve problems by writing code which is easier than going through the Sun/Oracle bureaucracy.<br /><br />In LWUIT4IO I needed and subsequently wrote a JSON parser as well which allowed me to easily traverse results for queries to Google, Facebook and other API's. So now LWUIT includes two separate API's allowing you to parse server responses whether in XML or in JSON.<br /><br />Using both API's is rather simple and both API's include two versions: Parse Tree or Event based.<br />The parse tree approach returns a data structure containing the parse data, for JSON this is a simple Hashtable with nested data structures. For XML this is an element node that can contain the whole XML hierarchy.<br /><br />The event based approach allows subclassing the parser and overriding key methods within it to store the data in the way you see fit.<br /><br />XML can be parsed by creating an instance of XMLParser and invoking the parse() method on that instance, which returns the root Element object for the XML tree. Alternatively the XMLParser class can be subclassed and the eventParser() method invoked, this will be followed by callbacks to the methods: startTag, endTag, attribute & textElement all of which can be overriden to provide custom behavior.<br /><br />The JSONParser class allows us to parse JSON data either by using the static parse method which provides callbacks to the JSONParseCallback interface thus providing events of the data within the JSON structure. It also contains an instance method named parse() that returns a Hashtable containing the resulting JSON structure, this structure is a set of nested Strings, Hashtables and Vectors to match the JSON JavaScript based hierarchy.<br /><br />You can take a look at the LWUIT4IO services package source code to see samples of how we use these parsers to implement several builtin services.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-54442430396741654292011-08-01T03:29:00.000-07:002012-02-03T11:47:49.110-08:00Drag And Drop Support In LWUITI recently committed support for a drag and drop API in LWUIT to simplify the task of implementing this functionality. LWUIT always allowed dragging and dropping which was a part of our demo for quite a while now, however we didn't have a convenient generic drag and drop API.<br /><br />Unlike other platforms who tried to create overly generic catch all API's I tried to make things as simple as possible. We always drag a component and always drop it onto another component, if something else is dragged to some other place it must be wrapped in a component, the logic of actually performing the operation indicated by the drop is the responsibility of the person implementing the drop.<br /><br />There is a minor sample of this in the LWUITDemo whose drag and drop behavior is now implemented using this API. However, the LWUITDemo relies on builtin drop behavior of container specifically designed for this purpose.<br /><br />To enable dragging a component it must be flagged as draggable using setDraggable(true), to allow dropping the component onto another component you must first enable the drop target with setDropTarget(true) and override some methods (more on that later).<br /><br />Notice that is a drop target is a container that has children, dropping a component on the child will automatically find the right drop target. You don't have to make "everything" into a drop target.<br /><br />You can override these methods in the draggable components:<br /> getDragImage - this generates an image preview of the component that will be dragged. This automatically generates a sensible default so you don't need to override it.<br /> drawDraggedImage - this method will be invoked to draw the dragged image at a given location, it might be useful to override it if you want to display some drag related information such an additional icon based on location etc. (e.g. a move/copy icon).<br /><br />In the drop target you can override the following methods:<br />draggingOver - returns true is a drop operation at this point is permitted. Otherwise releasing the component will have no effect.<br />dragEnter/Exit - useful to track and cleanup state related to draging over a specific component.<br />drop - the logic for dropping/moving the component must be implemented here!<br /><br /><br />Notice that Container.java has a simple sample drop implementation you can use to get started.Unknownnoreply@blogger.com12tag:blogger.com,1999:blog-4691915549420037229.post-26874302928859038182011-07-27T09:28:00.000-07:002012-02-03T11:47:48.970-08:00LWUIT VKB Localization<iframe width="640" height="390" src="http://www.youtube.com/embed/yukaBz0glzA" frameborder="0" allowfullscreen></iframe><br />I just posted a new video showing how you can localize the LWUIT VKB, notice that this only applies to the LWUIT VKB in J2ME. For platforms that have native VKB's such as RIM & Android LWUIT will use the native keyboard by default.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4691915549420037229.post-24207487431479655952011-07-26T00:36:00.000-07:002012-02-03T11:47:48.954-08:00JavaOne 2011 Content Catalog Open: 7 LWUIT sessions/BoF's<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7d3P-yrFDml6iM-_J2BBCxESjxsL8TOW9Hr3h5GHh0vtpb-r1BIHJeTnYXoYDoCqKEghIsd4toHbf1MCQT2893gIvfMtz38V4VbS786PoMWAR1XBOP0etBUg7VGW03zLOr6n0tcTioLE/s1600/CIMG1207.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7d3P-yrFDml6iM-_J2BBCxESjxsL8TOW9Hr3h5GHh0vtpb-r1BIHJeTnYXoYDoCqKEghIsd4toHbf1MCQT2893gIvfMtz38V4VbS786PoMWAR1XBOP0etBUg7VGW03zLOr6n0tcTioLE/s200/CIMG1207.JPG" width="200" /></a></div>Searching through the J1 2011 <a href="https://oracleus.wingateweb.com/scheduler/eventcatalog/eventCatalogJavaOne.do">content catalog for LWUIT</a> produces 7 sessions and BoF's. Surprisingly I didn't even know about most of them and don't know the speakers in quite a few cases.<br />The one you should probably attend is the one given by Chen and myself 24026 "What's New In LWUIT?". Other than that Ofir & Peter will talk about the LWUIT accessibility effort which is something I haven't talked about much in this blog. Its the effort to make LWUIT usable for people with disabilities ranging from color blindness, blurry vision to blindness etc. Both Peter & Ofir are very engaging speakers and I was personally able to learn quite allot from this important humane effort.<br /><br />I also have a BoF which I will be presenting with <a href="http://lwuit.blogspot.com/2011/06/martin-is-on-fire-new-lwuit-tipster.html">Martin our graphics designer</a> (first time for J1, hell I think this is the first time a designer took the stage at J1), titled Graphics Designer Secrets for Compelling Mobile User Interfaces (20340). In this BoF we will try to bridge the developer-graphics designer gap by showing you how the dynamics and technicalities of the back and forth process between the designer and the developer can become a fertile grounds for innovative UI.Unknownnoreply@blogger.com0