Amazon-OnTheGo: Screengrabs & Introduction
August 4, 2006 · Print This Article
Amazon-OnTheGo is the result of a vanity project I undertook to port a Bluepulse widget to a full-blown Java ME application. With it, you can experience all of the best things about Amazon.com, on your phone:
- Search for products by keyword, ISBN number, or UPC code
- Access product details, used and new prices, images, user ratings, editorial reviews
- Maintain a shopping cart, and submit it to Amazon for purchase
- Find and review friends’ wishlists
- Get suggestions on similar items to view
Say you’re at the video store trying to determine what to rent. Fire up OTG, type in the UPC code, and check out the online editorial review. Maybe you’re at the local book store, and you can’t decide between two books. Type in their ISBN numbers to view ratings and comments. While you’re at, find out what the cheapest used price is.
Learn more about it and check out a video walk-through at the OnTheGo web site: www.mywebonthego.com (yes, most on-the-go and similar domains were snapped up long ago!). Go to the “Download” section to get it on your phone in any of three ways, or open http://m.mywebonthego.com with your phone’s WAP browser to download it directly.
More screenshots:
Similar products: Scanbuy Shopper, featured on Lifehacker (coincidentally, right at the time OTG was released), except that it offers more search options
hello, this is a great proyect using j2mepolish. I want to know how did you do the animations for the main menu and for the conection that is like a progress bar. Or if you have diferent links to the page of polish that can help me it will be great, thanks.
Ahh, the power of Polish. The animation is Polish’s pulsating circles background. Give your menu items a focused style like:
focused {
background {
type: pulsating-circles;
first-color: primaryLightColor;
second-color: white;
circles-number: 6;
min-diameter: 10;
max-diameter: 60;
}
}
For the progress indicator, use a gauge with a style similar to:
.gaugeItem {
gauge-height: 12;
font-color: primaryDarkColor;
gauge-color: primaryDarkColor;
gauge-gap-color: primaryMediumColor;
gauge-gap-width: 2;
gauge-chunk-width: 6;
}
Check out the Polish documentation at http://j2mepolish.org/docs/css-specific.html#backgrounds and http://j2mepolish.org/docs/css-specific.html#gaugeitem respectively. Good luck!
Joe Fission
thanks!
Hi Joe!
First of all, I would like to congratulate you on your Amazon-OnTheGo application. It single-handedly convinced me to give J2ME polish a try.
I was wondering if you could help me solve a little problem. In my application I have a screen with a FramedForm and, in Graphics.TOP I put a StringItem. Then, in the central part of the FramedForm, I have a TextField component and a Button (StringItem, Item.BUTTON). The problem is, when the TextField gain focus, the Polish shows the input type (to show the current kind of input, “abc”, “Abc”, “123″) before the title String item (in the Graphics.TOP part of the FramedForm). I used your Amazon-OnTheGo and I noticed that, when I select any TextField, the input type appears in the central part of framedform, without moving any other component (in my app, the input type moves the Title stringitem and appears on the top of the screen). I´ve already tried to change the info style to get a similar effect without sucess.
Long story short, how can I put the info type text like you did in the find items screen of your application (almost like an absolute position on the top-right corner of center part of the FramedForm the screen)?
Thanks a lot in advance for any ideas.
Best regards,
Carlos Eduardo Pontual - Fortaleza-CE/Brazil
Hi Carlos,
Glad you like OnTheGo. Polish really does make these kind of apps quite easy to deploy, as long as you can avoid some of the little headaches along the way. Speaking of which. . .
I generally don’t use the FramedForm, only because I invariably run into errors that are difficult to resolve, so that’s always a possibility. My guess would be a conflicting style defined in polish.css, though. Removing inheritance from my style definition, what I have defined is:
info {
padding-right: 10;
margin-top: 4;
background: none;
font-style: bold;
font-face: proportional;
font-size: small;
font-color: rgb(63,134,178);
layout: right;
}
Using inheritance, you’d define the font-color in the colors section, and the other font selectors in the default section. So really, using right padding, and laying out to the right should do the trick. If it doesn’t, then I would guess there’s a conflict with another style. For example, when using an IconItem, you can define a style with IconItem attributes, but you also need to define the label style, and the default style, and they all need to match appropriately for it to look proper.
That’s where I’d start. Good luck!
Shaun (Smilin’ Joe)
Oh, incidentally, you can use the ‘before’ attribute in the info definition, which works nicely. I use a 12×12 pencil image in another app.
info {
before: url(pencil.png);
}
Shaun
Hi Joe… thats me again!
At first, I decided to take your advice and I changed all the FramedForms to Forms..then, I tried to use your “info” style (that one that you wrote in your reply, I’ve only changed the colors). Well, the result was incredible! Much better! But, there’s a thing that is still not working perfectly.. When I select a TextField, the info caption (ABC, Abc, abc, 123) is still moving down the other components. For example, in one screen with 2 components, a StringItem and a TextField, when the TextField gain focus, the abc (info) is shown just under the title of the screen, but it occupies one entire line, moving down the StringItem and the TextField. In your OnTheGo app, the info caption doesn’t move down the other components. How can I configure Polish to show the info caption without move down the other components?
Thanks a lot in advance for any ideas.
Best regards,
Carlos Eduardo Pontual - Fortaleza-CE/Brazil
Ps: this is my info style:
info {
padding-right: 10;
margin-top: 4;
background: none;
font-style: bold;
font-face: proportional;
font-size: small;
font-color: fontColor
layout: right;
}
Carlos, try padding your form at the top. Generally what I do is create a base screen style, and extend it for forms and lists. That base screen style can contain global attributes like top padding.
.baseScreen {
padding-top: 15; /* whatever works for your screens */
}
.myFormStyle extends baseScreen {
/* specific screen attributes */
}
Hope that works for you.
Best,
Shaun (Smilin’ Joe)
Hi Shaun,
Sorry to bother you again, but I was wondering how were you able to detect the mobile-specific version when I visit m.mywebonthego.com on my mobile. I thought you were using WURFL, but when I tried using it on my website, it was unable to detect my two cell phones (Nokia 6230 and 6111), while yours did so flawlessly. How did you do it on yours? How do you map the user-agent string (I assume that is what you’re using to do the detection) to the polish-generated jar?
I wrote a little PHP class to extract brand and model from the user-agent string, but it is not always straight-forward to map them to the version-specific jar that polish generates. For instance, the Motorora V3 sends me the following string:
MOT-V3i/08.B4.34R MIB/2.2.1 Profile/MIDP-2.0
My class, does some extracting and converting using regular expressions and gives me back “Motorola” and “V3i” for brand name and model, respectively. But J2ME Polish generates the jar as “Motorola-Motorazr_V3i”. Of course, I could locate the file by looping the directory and looking if the brand name and model appear as a substring in the filename, but I fear that there might be cases were that would not suffice. So I was wondering, if you have a smarter way of doing this matching.
Also, how did you put together the manual selection (if the user decides to choose brand and model by himself)? Did you manually compile some sort of database with every mobile-specific built? Or is there some easy way to generate that from polish?
I hope I was able to make myself clear, since you probably can tell that English is my second language. I would greatly appreciate if you could give me any pointers on how to do all this a bit better. Thank you very much for all your help.
Best regards,
Carlos Eduardo Pontual
Fortaleza, CE, Brazil
Perfectly clear!
If there is an easy way to do midlet provisioning, I haven’t figured it out yet! I’ve made considerable improvements in this provisioning system, but only plan on using them in my latest project. The general approach I use in OnTheGo is below:
* Create one properties file that maps all the possible user agent strings for a phone to a build name.
* Create another properties file that maps build names to jar/jad names (without the extension).
* Load the properties files into Hashtables when the provisioning servlet starts.
* Extract the user agent string when someone visits the provisioning serlet, and match that to a value in the first Hashtable.
* Use that key to determine the filename of the file to serve in the HttpServletResponse object.
There’s actually a lot more going on, but that’s the approach.
For manual selection, I do use a database. The database is the source of all of the information in the properties files, too. So I add each build to the database, then I kick off a job that extracts data to create the properties files. The generic builds are ones that don’t use Polish features not supported without vendor-specific libraries.
I hope that answers your questions. I find provisioning is really difficult, which is why the big guys use specialized software for the task. Something you might want to check out is an article written by Eric Giguere. It might give you some inspiration. http://developers.sun.com/techtopics/mobility/midp/ttips/provisioning/index.html
Good luck!
Shaun
Hi Shaun,
Thanks for the quick reply. I suspected that this would not be an easy task. I have already started a similar provisioning system in PHP. I ported some of the code in Python Mobile User Agent (http://code.google.com/p/mua/) to PHP and added a couple of other rules. I tried to avoid building a database manually by traversing the jars/jads directory and building a database from the filenames (grouping them by brand) that Polish generates. We are entering a beta test phase right now in our project, and this approach has worked for most mobiles that we have tried. But every now and then, we find one that demands a tweak in the code or a new exception rule.
I wonder why open source projects like WURFL or Polish itself who already have a large mapping of user agents to brand and model take the approach of directly mapping entire user agent strings instead of writing some sort of a rules engine with exception rules when needed. And also, it would be great if they were able to unify the way they uniquely identify mobile phones (i.e. Polish uses Motorola/Motorazr_V3i for V3, while WURFL uses something like Motorola/V3i).
I guess for now, we just have to develop our own approach to the problem.
Once again, thanks for sorting it all out for me, Shaun.
Best regards,
Carlos Eduardo Pontual
Fortaleza, CE, Brazil
Good luck with the project!
There has been talk of combining the device definitions in WURFL and Polish, but I’m not sure if it ever got off the ground. Someday. . .
Shaun
Hi EveryBody,
I need ur help to develope my project. I am using framedform in my project & I have written code for it also. the problem is whn i run that program separately i mean as a separate midlet it works fine. Now i have to integrate with my project in that it wont be a main midlet program. So my question is Can we create framedform with out a midlet, if yes how? If possible plz provide me a sample program.
plz mail me ur suggestion to shridhar.bond@gmail.com.
Thax in advance
Shridhar G
My preference is to use inheritance, but it will increase your jar size by a KB or so. Extend FramedForm in a separate class, and add a reference to it in your MIDlet.
Add a showMyFramedForm() method to your MIDlet — create the form if it’s null (first time view) or use the handy ScreenHistory object to display it if it’s not null.
I’d recommend checking out the samples that shipped with Polish, and making sure you’re using the latest build. Up to November 2007, there were some irritating bugs in FramedForm.
Good luck.
Shaun