dev.enekoalonso.com » iphone http://dev.enekoalonso.com having fun with code Sat, 31 Jul 2010 05:51:28 +0000 en hourly 1 Titanium Developer: love and hate http://dev.enekoalonso.com/2010/07/30/titanium-developer-love-and-hate/ http://dev.enekoalonso.com/2010/07/30/titanium-developer-love-and-hate/#comments Sat, 31 Jul 2010 04:57:16 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=615 I’ve been using Titanium Developer for a while now, since I installed it to do some mobile app research one or two months ago. But up until now I barely used it again other than to maintain a desktop app I created for a game, which thanks to Titanium runs in both Mac and PC. Thus, up until this week, I hadn’t really get in depth with it.

The good things

Nice, easy and fast. Creating apps is piece of cake, loading JSON feeds from Internet, using local storage, placing buttons and labels on the screen… it’s all easy and it works on both iPhone and Android right away.

The bad things

Titanium Developer looks like an unfinished app. It shouldn’t be version 1.X, not even 0.X. Looks like an alpha, buggy and very easy to get screwed up, specially if you share your projects between Windows and Mac. This time it launches the emulator, this time it does not. This time your project does not load properly. Next time, you try to create a new project and it fails. And the errors are totally useless. Not very helpful.

Conclusion

The idea is great, awesome. The code is clean and using Javascript for development makes it easy for web developers to get easily involved into mobile app development. If only the Appcelerator team could improve their app, we would save a lot of headaches.

Related Posts:

]]> http://dev.enekoalonso.com/2010/07/30/titanium-developer-love-and-hate/feed/ 2 Things to do http://dev.enekoalonso.com/2010/01/28/things-to-do/ http://dev.enekoalonso.com/2010/01/28/things-to-do/#comments Fri, 29 Jan 2010 04:15:44 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=418 To do list:

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

Updated

Related Posts:

]]> http://dev.enekoalonso.com/2010/01/28/things-to-do/feed/ 0 Spaniards for iPhone available now http://dev.enekoalonso.com/2009/08/29/spaniards-for-iphone-available-now/ http://dev.enekoalonso.com/2009/08/29/spaniards-for-iphone-available-now/#comments Sat, 29 Aug 2009 22:43:09 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=373 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

Related Posts:

]]> http://dev.enekoalonso.com/2009/08/29/spaniards-for-iphone-available-now/feed/ 0 Placing a UIActivityIndicartorView on a UIBarButtonItem http://dev.enekoalonso.com/2009/07/26/placing-a-uiactivityindicartorview-on-a-uibarbuttonitem/ http://dev.enekoalonso.com/2009/07/26/placing-a-uiactivityindicartorview-on-a-uibarbuttonitem/#comments Sun, 26 Jul 2009 21:36:39 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=347 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.

Related Posts:

]]> http://dev.enekoalonso.com/2009/07/26/placing-a-uiactivityindicartorview-on-a-uibarbuttonitem/feed/ 0 iPhone 3.0 geolocation with Javascript http://dev.enekoalonso.com/2009/06/30/iphone-3-0-geolocation-with-javascript/ http://dev.enekoalonso.com/2009/06/30/iphone-3-0-geolocation-with-javascript/#comments Tue, 30 Jun 2009 16:13:43 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=338 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.

Related Posts:

]]> http://dev.enekoalonso.com/2009/06/30/iphone-3-0-geolocation-with-javascript/feed/ 1 Handling events on iPhone webapps http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/ http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/#comments Fri, 05 Dec 2008 22:02:29 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=82 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).

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/feed/ 0 Detecting iPhone’s orientation http://dev.enekoalonso.com/2008/12/02/detecting-iphones-orientation/ http://dev.enekoalonso.com/2008/12/02/detecting-iphones-orientation/#comments Tue, 02 Dec 2008 16:59:23 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=70 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)

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/02/detecting-iphones-orientation/feed/ 0