Palm developer connection blog updates

• Hot Apps Award Logo Available
• Interesting App: Ancient Frog LE
• Featured Apps Preview Image Widget

Hot Apps Award Logo Available Posted: 20 Aug 2010 05:07 PM PDT If you were one of the winners of our first Hot Apps promotion, you may be looking for a way to capitalize on your success. One way to do that is to promote your app using our new Hot Apps Award logo. We’ve put together a set of usage guidelines on the Developer Portal. Check out the article here for more information, and to learn how to get your official copy of the logo. Thanks to everybody who participated! We hope to see your PDK apps soon in our new PDK Hot Apps promotion.

Interesting App: Ancient Frog LE Posted: 20 Aug 2010 02:45 PM PDT By no means would I categorize myself as a gamer, but found Ancient Frog LE to be instantly addictive from the first time I fired it up. Ancient Workshop did a great job of offering up stimulating puzzle challenges with a mesmerizing visual experience, while keeping the learning curve low with a user friendly interface. The result is a gaming experience that’s perfect for light play while waiting in line, or killing time on a train ride home. In other words, perfect for someone who knows their smart phone isn’t all work and no play. The developers over at Ancient Workshop did a great job of animating the frog with super fluid movements that are really captivating. Froggy footprints mark the trail that needs to be traversed, and the number of moves are displayed in a daisy at the top of the screen. The overall user experience is enhanced with subtle ambient forest noises in the background. Nice touch. And I like that Undo and Redo are called by simply swiping forward or backward across the screen. This is a great example of what’s possible with a graphically rich app that’s ported to webOS with the PDK. If you’ve got a C/C++ app that you haven’t ported over to webOS and you’re feeling inspired, the PDK makes porting a breeze, and there’s still ample time to be a fast mover in the Hot Apps competition.

Featured Apps Preview Image Widget Posted: 20 Aug 2010 10:39 AM PDT For Featured Apps we wanted to provide an attractive means for users to view the application preview images. Initially we investigated attempting to scale the ImageView widget to provide this functionality but its logic is tuned for displaying a single image and did not fit this design well, thus the creation of the new widget. This UI displays up to three images to the user at a single time with one image being the focal point and portions of the next and previous images displayed for the user on either side of the focused image. The user is able to swipe between each of these images, allowing them to display an entire list of images without taking up significant screen space or resources. Since this sort of UI may be a common need we have decided to open source its implementation as well a highlight some of the challenges that we ran into during it’s implementation. Today I will be covering just the usage of this widget, but future posts will highlight some of the nitty gritty details of the implementation. Usage The API of this widget is similar to that of the ImageView widget, with the widget calling user defined callbacks to request an image load and the callbacks providing this information when available via the widget’s mojo interface. The widget’s methods match a subset of the ImageView methods, implementing the leftUrlProvided, centerUrlProvided, and rightUrlProvided methods. Each of these methods should be called when the backing model changes or in response to a request from the widget via these callbacks. Each of these methods accept a URL parameter which will be rendered via img[src] like their ImageView analogs. Additionally the methods support an optional 2nd parameter, orientation which allows the caller to specify the orientation of the image if this is known beforehand, which improves the rendering of the image immediately after it is loaded. If this is not passed the widget will determine the proper aspect ratio after the image has loaded. This parameter may be falsy for unknown aspect ratios, or one of “portrait” or “landscape” if known. The callbacks that the widget expects are onLeftFunction and onRightFunction, both of which are defined on the widget’s data model and are required. When called these methods should call the provider API that matches the direction in question, passing the URL for the next image in the sequence. Dependencies This widget requires the OperationQueue class, available from the palm/webos-samples/tipsAndTricks on github, also embedded in the sample application. In action Like any other widget this widget is defined using the Mojo x-mojo-element attribute combined with the class name: Within the assistant, we first need to setup a simple data model that is used to both define the URLs of the images and record the position of the widget within this list. function MainAssistant() { this.urls = [ "images/100131_00001_chuq.jpg", "images/100304_00001_chuq.jpg", "images/100302_00001_chuq.jpg", "images/100320_00001_chuq.jpg", ]; this.index = 0; } And then we setup the widget: MainAssistant.prototype.setup = function() { this.imageView = this.controller.get('preview-image'); this.controller.setupWidget( "preview-image", {}, { onLeftFunction: this.getLeftImage.bind(this), onRightFunction: this.getRightImage.bind(this) }); }; After the framework has fully instantiated the widget we provide the seed data, in this case the center and right images. MainAssistant.prototype.activate = function() { this.imageView.mojo.centerUrlProvided(this.urls[this.index]); this.imageView.mojo.rightUrlProvided(this.urls[this.index+1]); }; This is the only time that we will call the centerUrlProvided method. The widget is now ready to go. As the user interacts with it, it will call the methods associated with the onLeftFunction and onRightFunction data model fields as necessary. The implementation of each of these methods is quite similar: MainAssistant.prototype.getLeftImage = function() { if (this.index <= 0) { return; } this.index--; this.imageView.mojo.leftUrlProvided(this.urls[this.index-1]); }; MainAssistant.prototype.getRightImage = function() { if (this.index+1 >= this.urls.length) { return; } this.index++; this.imageView.mojo.rightUrlProvided(this.urls[this.index+1]); }; In each we perform range checking and provided we are still in range we pass the next URL to the widget. If there is no additional URLs we do not call any of the provided methods and the widget assumes that there are no additional images in that direction. Improvements While this widget does fit the needs of Featured Apps, there is much room for improvement. Things such as landscape mode support and support for non-image elements cell content could create very interesting UIs. Feel free to fork and hack away! http://developer.palm.com/blog