Things to do

Jan 28 2010 Published by Eneko Alonso under uncategorized

To do list:

That’s it for now. Let’s see if I can find time to do all those.

Updated

No responses yet

Spaniards for iPhone available now

Aug 29 2009 Published by Eneko Alonso under uncategorized

Finally, the first release of Spaniards Mobile got released just today and it is available for download on the App Store for FREE.

More info:
http://www.spaniards.es/noticias/2009/08/29/spaniards-10-para-iphone-ya-disponible

Spaniards for iPhone

No responses yet

Placing a UIActivityIndicartorView on a UIBarButtonItem

Jul 26 2009 Published by Eneko Alonso under uncategorized

Have you seen those iPhone apps with a reload button that switches itself to an animated activity indicator while the reload action is being performed?

Here is how to do that. Place this code on your ViewController:

  1. - (void)showReloadButton {
  2.   UIBarButtonItem *refreshItem = [[UIBarButtonItem alloc]
  3.     initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh
  4.                                         target:self
  5.                                         action:@selector(reload:)];
  6.   self.navigationItem.rightBarButtonItem = refreshItem;
  7.   [refreshItem release];
  8. }
  9.  
  10. - (void)showActivityIndicator {
  11.   UIActivityIndicatorView *activityIndicator =
  12.     [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
  13.   [activityIndicator startAnimating];
  14.   UIBarButtonItem *activityItem =
  15.     [[UIBarButtonItem alloc] initWithCustomView:activityIndicator];
  16.   [activityIndicator release];
  17.   self.navigationItem.rightBarButtonItem = activityItem;
  18.   [activityItem release];
  19. }
  20.  
  21. - (IBAction) reload {
  22.   // Do your reload stuff
  23. }

Seen here.

No responses yet

iPhone 3.0 geolocation with Javascript

Jun 30 2009 Published by Eneko Alonso under uncategorized

I was watching one of the video tutorials from Apple last night about some custom JS available on Safari, only on the iPhone 3.0, that let’s you interact with the phone and obtain data like the current location, etc.

So I built a little page to see how it works. I included Mootools 1.2.3 from Google servers and the Google Maps API. And voilá, with a few lines of code we have a totally functional web based GSP navigation system. A little bit ugly, but functional. Currenlty it only centers the map on the coordinates given by the phone, and also does a reverse geolocation to obtain the address (actually city, state and country). But it could be easily extended to add markers to the map, or even paths to track the movement.

If you have an iPhone (or an iPhone simulator) go to:
http://enekoalonso.com/research/iphone/geolocation.html

The source code:

  1. var Navigator = new Class({
  2.   initialize: function() {
  3.  
  4.     // Listen for position changes
  5.     this.watchId = navigator.geolocation.watchPosition(
  6.       function(position){ this.position(position) }.bind(this),
  7.       function() {},
  8.       { enableHighAccuracy: true, timeout: 1000, maximumAge: 10000 }
  9.     );
  10.     this.infoPanel = $('info');
  11.  
  12.     // Create the Geocoder and the Map
  13.     this.geocoder = new google.maps.Geocoder();
  14.     this.map = new google.maps.Map($('map'), {
  15.       zoom: 12,
  16.       mapTypeId: google.maps.MapTypeId.ROADMAP
  17.     });
  18.   },
  19.  
  20.   position: function(position) {
  21.     // Update labels
  22.     this.infoPanel.getElement('p.date').set('text', position.timestamp);
  23.     this.infoPanel.getElement('p.coords').set('text', position.coords.latitude + ', ' + position.coords.longitude);
  24.     this.infoPanel.getElement('p.altitude').set('text', position.coords.altitude);
  25.     this.infoPanel.getElement('p.heading').set('text', position.coords.heading);
  26.     this.infoPanel.getElement('p.speed').set('text', position.coords.speed);
  27.  
  28.     // Center map
  29.     var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  30.     this.map.set_center(latLng);
  31.  
  32.     // Reverse geolocation (get current address)
  33.     this.geocoder.geocode({'latLng': latLng},
  34.       function(results, status) {
  35.         if (google.maps.GeocoderStatus.OK) this.showAddress(results)
  36.       }.bind(this)
  37.     );
  38.   },
  39.  
  40.   showAddress: function(results) {
  41.     // console.dir(response);
  42.     if (results[1]) {
  43.       this.infoPanel.getElement('p.location').set('text', results[1].formatted_address);
  44.     }
  45.   }
  46. });
  47.  
  48. window.addEvent('load', function() {
  49.   new Navigator();
  50. });

Enjoy.

No responses yet

Handling events on iPhone webapps

Dec 05 2008 Published by Eneko Alonso under uncategorized

This week I have been working on a website for iPhone phones and I have discovered some interesting things about events. I am using plain Javascript, with no third party libraries, so I don’t know if they have any fix for these issues or if they affect them.

For example, a couple of days ago I was posting how to detect the iPhone’s orientation. The problem with the method I used is that I am assigning explicitly the function to handle the event, which means only that function will handle the event. If I wanted to add a second function to handle the same event, for example inside an object, I would have to use the window.addEventListener method. But apparently addEventListener does not work on the iPhone for some events.

The following code wont work on the iPhone (although it works on the iPhone simulator)

  1. function updateLayout() {
  2.   if (window.orientation)
  3.     document.body.setAttribute('class', 'landscape');
  4.   else
  5.     document.body.setAttribute('class', 'portrait');
  6. }
  7.  
  8. window.addEventListener('orientationchange', function(event) {
  9.   updateLayout();
  10. }, false);
  11.  
  12. window.addEventListener('load', function(event) {
  13.   updateLayout();
  14. }, false);

I have found the addEventListener function works with input fields (focus and blur events), with links (click event) and with window (load event). I have found it doesn’t work on forms (submit event) neither with the custom onorientationchange event as shown avobe. I haven’t tested other events yet.

It may be that all these issues have been fixed in newer versions of the iPhone OS X – the one I have for testing is 1.1.4 (4A102).

No responses yet

Detecting iPhone’s orientation

Dec 02 2008 Published by Eneko Alonso under uncategorized

Detecting the iPhone’s orientation on a website is very easy: the only thing needed is a little bit of Javascript to listen to the onorientationchange event:

  1. window.onorientationchange = function() {
  2.   if (window.orientation)
  3.     document.body.setAttribute('class', 'landscape');
  4.   else
  5.     document.body.setAttribute('class', 'portrait');
  6. }
  7. window.onload = function() {
  8.   window.onorientationchange();
  9. }

The window.orientation variable can have three different values: 0, 90 and -90. In most cases we wont mind if its 90 or -90, since both are landscape, so I have ignored this on the code above. Adding a CSS class to the body is the cleanest way to handle iPhone’s orientation. Now it’s up to you to set up the CSS for both layouts.

The resolution of the visible screen (viewport) changes drastically from portrait to layout, so be aware of this:

  • Portrait visible screen: 320 x 356 px
  • Landscape visible screen: 480 x 196 px

Source: Web Apps Reference Library – Handling Orientation Events (needs registration)

No responses yet