June 5, 2011 at 1:58 am #317300
MobiOne Zipcode2Geolocation Demo
Zipcode2Geolocation is a simple MobiOne mobile webapp that accepts a US zip code as input and outputs the (lat,lng) coordinate and displays a map.
See attachment zip-lookup-screenshot60.png
The source code is attached to the bottom of this post. The interesting work is performed in zipcode-details_custom.js. The function fetchZipDate(), does the heavy lifting for querying the ValidateZip webservice (http://www.webservicemart.com/uszip.asmx/ValidateZip) and processing its results. Yahoo’s YQL service is used to provide the webservice result in JSON form and to workaround a classic cross-domain restriction that prevents direct access to the web service. Click this link to open the YQL console with the query used in this app. The JSON result included a literal XML data string that had to be parsed to an XML document and results then extracted and processed.
Google Maps V3 was used to provide a pannable map. Map options were set to prevent controls such as map type and street view mode. The map options are set in function initMap().
I created Zipcode2Geolocation mobile webapp as demo to assist a MobiOne user who recently requested assistance. The user had a special need to interface with a public web service that converts a postal zip code to a (lat,lng) coordinate pair.
See attachment webservicemart-validatezip50.png
See attachment yql-console-query50.png
See attachment zipcode.zip
Attachments:You must be logged in to view attached files.June 5, 2011 at 2:42 am #317303
i have a problem, when i open your project i have this message:
And the workspace is empty:
thanks a lot
YannJune 5, 2011 at 11:58 am #317306
My bad! I used an internal version of 1.2 early-access that will be released this week. I’ll update the src for 1.1 shortly.June 7, 2011 at 11:22 am #317351
I have the same problem that Yann, but thanks a lot.June 8, 2011 at 12:21 pm #317382
Here is screenshot of this app running in the upcoming Test Center iPad emulator in landscape mode. Recall it was design on iphone in portrait orientation.
See attachment zip-ipad-ls.png
Attachments:You must be logged in to view attached files.July 8, 2011 at 9:49 pm #318064
I just downloaded MobiOne and this test app. I installed MobiOne and opened the project and then I got a message about saving in the latest format. The project seems to compile and run ok. It looks up the zipcode ok but does not show a map.
I’m looking to create a trail map from gps coordiniates with topography and elevations. If you have any suggestions for resources or examples to do this – please let me know.
tksJuly 8, 2011 at 11:07 pm #318065
I’m not sure what’s up. As an experiment I downloaded the zipcode zip file and extracted to disk. I then opened the zipcode-details.mobi file in the MobiOne 1.2 Design Center. From the Design Center I selected Run in Test Center and did not override any of the provided html/css/js files. When I entered a valid US zipcode in the Zip Code field the zipcode details and map appear.
I’m out for most of the weekend but will investigate further and see if I can add some additional error detection. I developed the zipcode app on request of another user.July 9, 2011 at 11:56 am #318075
I’ve been able to make progress with google maps using separate html pages. I’m still unclear as to how to mix code with what is generated by your tool.
I’ve come across two more issues:
1. For some reason – one button with a link will not link to it’s target. I set the target in the designer to the .mobi file I want to link to. It had worked before (before I set the autoresize) and now it doesn’t work. On the same page I have a push button that links to another page – and that works fine. When I look at the generated .html code, I see a “href=…” added for the push button that works, but I do not see an “href=…” generated for the button that does not (but the link is defined in the Link property).
2. I am working with an iPhone 4 and I see now there are some sizing and layout issues. A list that fits fine in a 320 x 460 page for the 3GS takes up more space in the iPhone 4 and the buttons below it are pushed off the screen. It seems that scaling between your view, the 3GS and the iPhone 4 is off a little. I suggest (unless this can be corrected) that you create an iPhone 4 device in the test center so we can see what it will look like on the iPhone 4.
I can send you the .mobi for issue #1 – it’s a simple graphic with an “Index” and “Begin” button on the bottom. I layed it out for the GS and set the autoresize so that it looks fine on the iPhone 4. The next button just won’t bring up the linked page.July 11, 2011 at 12:24 am #318089
Item #1 is solved – I had spaces in file names. I recreated without spaces and that solved the problem.July 11, 2011 at 4:09 am #318092
Can you send me an example of the #2 issue for further investigation? Send to support at genuitec dot com with title “mobione iphone4 list data for wayne”. We have a small window of time to fix problems like this before the 1.2.1 update ships later this week.July 11, 2011 at 10:38 am #318112
Are you seeing something similar to this post: http://www.genuitec.com/support-mobione/viewtopic.php?p=3427#p3427?July 11, 2011 at 2:00 pm #318123
I’ve come across another issue which seems to explain some of the problems I’ve encountered: sometimes the .html or the .css file does not get regenerated (so I end up running off the old copy). After each export to html – I now check the files that are generated and if one has and older date – I delete it – and then export again. This fixes the problem.July 11, 2011 at 4:57 pm #318127
I am seeing something similar to http://www.genuitec.com/support-mobione/viewtopic.php?p=3427#p3427?
but I see it when I create a rounded list with prev and next buttons at the bottom. The list fits fine in the designer – but when I run it on the iPhone 4 the list takes up more space and pushes the button off the screen. I’ve fixed it by using a scrolling panel for the list and anchoring the buttons to the bottom. But – it does show me that the layout does not reflect what actually happens on the iPhone 4 – I’m sure due to scaling issues. If it were possible to preview “as an iPhone 3GS or as an iPhone 4″ – that would be nice. I found simulators on the web that helped me see what the generated code looks like on a 3GS.
I suggest having an option to hide the footer toolbar as well. I think you have the code in there but they still show when using the browser – if there is a way around that – it would help. They disappear when I create an icon on the home page and run from there.
I do run into the files not being regenerated bug fairly often that I mentioned earlier- not sure what is the cause of it.July 11, 2011 at 5:48 pm #318129
As usually I’m always interested in user experiences where the UI design does not match either in the Test Center or on device. Can you send me your design file or an example that renders differently on the iphone3 and iphone4. We have been working to make the experience as close as possible between devices. Send to support at genuitec dot com with title “mobione list scaling issue for wayne” and I’ll investigate it immediately.
The Designer and the Test Center both provide options for hiding the buttonbar. The Test Center also provides a Browser>Strict Web Clips Mode that behaves exactly as the iphone device. On the iphone the buttonbar can not be programmatically hidden via an api. It is only hidden when the webapp is saved to the iphone home screen. The Test Center hides this complexity by default to avoid prematurely throwing deployment details at the user before he has even developed anything significant worth testing on a device.
re: files not being regenerated
Is there a repeatable scenario that you have encountered? For example, are you designing multiple pages and one of the secondary pages (not the main page) does not get its content regenerated… I am trying a few scenarios on my end.
The forum ‘Examples, HOW-TOs’ is closed to new topics and replies.