Welcome to Open Device Lab

Last year some German dudes (Anselm Hannemann, Andre Jay Meissner, and Christian Schaefer) had an idea to organize a bit more the “open device lab” movement.

I guess it is only normal to have this “thing” coming from the Germans. It totally makes sense, doesn’t it? We could make fun about this all day long but at the end of the day their work is important for those developers who have to test their work on real devices and can’t afford to buy all the different devices they need.

I think Jeremy Keith had this idea to set up “a lab” with a bunch of mobile devices in his company office and then let outside people come by and test their work on these devices – and all for free of course.

This is something that is really useful and when you are Jeremy Keith the word passes from mouth to mouth quite fast. You don’t have any problem to get unused devices from good Samaritans and to let developers know that they have this open lab in their area.

However, if you are not Jeremy probably you’d want to use OpenDeviceLab.com :) It can help you to:

  • Find Open Device Labs near you. They have 37 labs in 18 countries listed for a total of 530 mobile devices
  • Advertise your lab and get a chance to receive some sponsor’s love (AKA getting more devices for your device lab)
  • Do good deeds if you (or your company) want to be a good Samaritan and donate mobile devices

Two more things: strangely enough there is nothing in German on this site (Jay maybe you should do something about this or maybe ask Jeremy as he does speak German) and for a German initiative I’d have expected it to cover the whole world by now (guys you don’t  have a single, teeny-tiny warm lab in Antartica yet).

Adobe Shadow Release 2 is out

We just launched the second release of Adobe Shadow. You can grab the bits from here.

If you haven’t already tried this tool and you build websites or web apps for mobile then you should definitely check this out. It will make your life so much easier.

What’s new in this release:

  • Localhost URL support – now you can test localhost, 127.0.0.1, and machine.local (for Mac OS X) URLs instead of using the IP address of your desktop device
  • Adobe Edge integration – the Preview command from Adobe Edge works with Adobe Shadow
  • HTTP Authentication Support – you can navigate to URLs that require HTTP Authentication (you will see the login form on the mobile devices). It works also with URLs that contain the login information - http://login:password@mysite.com
  • Support for the latest iPad (retina display)
  • Support for working with sticky caches – you can perform a gesture on the mobile devices to force Shadow to load the latest resources (tap on the page, hold, and pull down until you see the “Release to refresh…” message)
  • Amazon Kindle Fire version will be soon available for download in store
  • URL Monitoring – if your website/web app uses # to change the state, now it will work with Shadow

If you want to stay updated with what’s happening with Shadow make sure you follow the team blog.

Now go and make sure you update your desktop app, Chrome extension, and iOS/Android clients. Enjoy!

Using PhoneGap Build and Debug

PhoneGap is a great solution for building mobile applications for multiple platforms using the “write once, run everywhere” paradigm. However there is a tricky part: when you want to package your app and get the native installers you get back to the native development nightmare.

Typically you package your PhoneGap app using the developer tool chain for the specific platform. In other words, if you want to package your app for iOS and Android you will be using a Mac and XCode for iOS and Eclipse with Android plugins for Android. As you add more platforms you can get a sense of the magnitude of the problem.

This is exactly the problem PhoneGap Build solves. Using PhoneGap Build you can let the “cloud” do the crunching task for you. So from the comfort of your browser you only have to upload your application files (HTML, CSS, JavaScript, and images files) and PhoneGap Build will give you back installers for:

  • iOS
  • Android
  • BlackBerry
  • webOS
  • Symbian

Windows mobile support is coming in case this question was about to land in the comments section :)

Before moving on I want to stress one thing so I make sure you get the awesomeness of this service: in order to use it and get the native installers you don’t have install anything – no IDEs or developer SDKs.

Introducing Adobe Shadow – a new way to debug mobile web sites and apps

So what is Adobe Shadow? Shadow helps developers who work on mobile web sites and applications by enabling them to do “synchronous browsing”. You connect your mobile devices to your computer and then you navigate to a page on your computer and all the devices are synchronized displaying the same web page.

So when you open an URL in your desktop browser, all the connected devices will stay synchronized displaying the same URL. Furthermore, you can open up a debug session with one mobile device and use Web Inspector to check the DOM as it was generated on that device, check the CSS properties for DOM elements, resources, and network calls.

It supports iOS and Android devices and it works on Windows/Mac OS computers using the Chrome browser.

Continue reading

aTabSplitter – the web standards edition

I thought that it would be helpful to document the experience I had while building a web application using jQuery Mobile. And this is what this article is all about. But before going into details let me set the context.

I started building mobile applications a while ago using Adobe AIR and the Flex framework. My first “production ready” application was called aTabSplitter and it is available for download in Android and BlackBerry markets. It was a fun and eye-opening experience. I mean it is one thing “to play” with technology and an entirely different thing to build something that will be actually useful and people will love to use.

Recently, as I was playing with jQuery mobile I had an idea: what if I tried to rebuild the application using HTML, CSS, and JavaScript? To make things more complicated I wanted to retain the same UI and user experience. In other words I treated the mobile application as the design and user workflow diagrams you’d get from a UX.

If you haven’t tried the application yet let me briefly describe it: it allows you to split a restaurant bill. The important workflows are the first screen, where you add new persons, delete them, move them around the table, or adjust the tip, and the calculator screen where you add the items for a single person. Actually, I am pretty proud because I think I found a good/intuitive user interface.

And by the way, here is the link for this web app.

Here are screenshots with the application running on desktop and mobile devices.

 

Android 4 Phone:

 

On iPad:

 

Continue reading

Native Extensions examples available now

Among of the biggest news of the Adobe AIR 3 release  is the Native Extensions feature. If you want to get started with this, or maybe just try it, you should check out the Native Extensions page on Adobe Developer Connection.

There are five examples so far:

  1. Gyroscope (iOS/Android)
  2. NetworkInfo (iOS) – retrieves information about the network interfaces on an iOS device
  3. Vibration (iOS/Android) – make the device vibrate
  4. iBattery (iOS) – gets the battery status (unknown, unplugged, charging, or full) of an iOS device
  5. .NET Image Encoder (Windows) – encodes a bitmap into BMP, JPEG, or PNG format using Microsoft .NET Framework 4

The first three extensions were created by Adobe engineers, the last two by community. As I said before I’m looking forward to seeing many more extensions created and having a central place to go for all of them.

Building an iPad game with Adobe AIR in a week

Radu Ticiu of Timisoara Mobile Development Group invited me to speak at their August event about Adobe’s solutions for mobile development. And I must say I’m glad I accepted. Not only because the event and the people were great but because the other speaker was quite interesting.

Stefan is his name and he runs one of the most creative companies in this part of the world. Just to give you some context: they’ve won three FWA awards so far. His presentation was about the making off of an iPad game using Adobe AIR and Flash Builder 4.5. So far nothing new or extraordinary. isn’t it?

Well what really caught my attention were these facts:

  • While they had great expertise in building Flash applications for the desktop, this was the first project they’ve done for mobile.
  • They completed the game from concept to final IPA file ready for publishing in a week.
  • The team who built this consisted of one designer, one developer, and Stefan.

Continue reading

Flex Mobile Development: skinning the ActionBar component

One of the important pieces of the Flex framework for mobile development is the ActionBar class. This class lets you create an application title bar with three distinct areas. Starting from left to right you can have a navigation area, a title area, and an actions area. Of course you are not forced to use all these areas.

Why would you want to use this component? There are many reasons for using it but probably the most important is that it is an established user interaction design pattern on Android and iOS. This is how you usually add things like an application or section title, navigation buttons, search input texts, or action buttons.

Continue reading

Flex Mobile Development: pay attention to list.itemRenderFunction

A colleague of mine who is building a Flex mobile application had some performance issues with a list. In short, when he used a pretty heavy custom item renderer (with checkboxes, buttons, and labels) the scrolling performance dropped a lot. When using just a label item renderer everything worked well.

So, we started to debug the code and, as I suspected, the culprit was the layout manager: the virtualization was off.

This was strange as he didn’t turn off the useVirtualLayout flag anywhere in the code – at least not explicitly. So why was the virtualization off? Because he used list.itemRenderFunction to change the item renderer at runtime. If you take a look at the documentation you will find this:

Function that returns an item renderer IFactory for a specific item. You should define an item renderer function similar to this sample function:

function myItemRendererFunction(item:Object):IFactory

Currently, when using itemRendererFunction with a virtual layout (useVirtualLayout=true), item renderer recycling is turned off. Because of this, using itemRendererFunction can cause a performance degradation and is not recommended for mobile. This may be fixed in future versions of Flex.

So, if you use a heavy item renderer and/or you have many items, don’t set the item renderer using the itemRendererFunction method.

Instead, you can wrap your custom item renderer in a ClassFactory object and then assign this object to the list.itemRenderer property. Like this:

var factory:ClassFactory = new ClassFactory(MyCustomItemRenderer);
// set the properties for custom item renderer
factory.properties = {iconField:"thumbnailSmall",
                  messageField:"description", iconHeight:180, iconWidth:180};
// set the ClassFactory object as the list item renderer
myList.itemRenderer = factory;

There is one more thing. In the example above I used the properties property of the ClassFactory object to set the properties I needed (for example what data property should be used for the message label). You can’t use this approach for setting CSS properties like fontSize. The only solution I found so far is to create setters that behind the scenes are doing something like this:

public class MyCustomItemRenderer {
   //...

   public function set fontSize(value:int):void {
      setStyle("fontSize", value);
   }

   //...
}

This was my tip of the week. And don’t forget, stay away from useVirtualLayout = false;

Flex Mobile Development: storing data locally

One way to improve the user experience for mobile applications is to save data locally. This technique is important for desktop applications and it is even more important for mobile applications (mostly because the network connection is expensive, slower, or intermittent).

When using applications such as mail or Twitter clients local storage enables users to see the messages or tweets loaded in the previous session. And while you are seeing these “old” items the application can pull in newer items behind the scenes. The main idea is to not to make the user stare at an empty screen each time he opens your application.

A second benefit of this technique is that your application will feel much more responsive. As I said it is possible that the user has a slow Internet connection and downloading 12 small pictures and some descriptions could be visibly slow. Local storage can offer a “performance” boost especially for applications that access data that changes rarely.

Depending on your specific use case you may want to save locally:

  • media assets (images, MP3 files, video files)
  • text or HTML resources
  • XML files
  • ActionScript data structures (an array of ActionScript value objects for example)

Continue reading