Firefox 15 is great for development

Firefox 15 was just released this week and I have been using it since the beta began and as far as I am concerned it is the best browser for development purposes. Let me highlight a couple of reasons why.

Working with CSS
A lot of times when developing a web site or web application, getting the "look" just right requires quite the effort. Up to now one of the best tools for working with CSS in Firefox was Firebug. However with the latest Firefox, you can just right-click on any element on a page and select "Inspect Element  (Q)" and you get to see all the properties of the element and adjust them on the fly and see what effect your changes. Now this has been there for a while, but with version 15, in the bottom-right corner, you now get visual tool showing you the overall size of the element and the size of each of its properties (borders, padding and margins). Quite useful, here is a sample:

Testing for Mobile
As we go along in 2012 and beyond, a good portion of work will require us to make sure a site is mobile-ready. So if you are doing Responsive Design (using CSS Media Queries), you can now test your design in Firefox 15 without the need of having various physical devices. Simply navigate to the site and select from the Firefox menu, "Web Developer > Responsive Design View" and you will be able to see how your site looks based on some predefined screen resolutions that are available.

So happy developing using Firefox 15!

More info on Adobe Shadow

In my last post I spoke about Adobe Shadow, their new tool for test web applications on various mobile devices concurrently. Since then, Adobe has posted a couple of short videos displaying the capabilities of Adobe Shadow. So what are you waiting for, click on the links below to check them out!

• Shadow Intro
• Remote Inspection

Adobe releases Shadow beta

In this mobile crazy world we work and live in today, as web application developers one of the hardest things to do is testing. With all the various devices and all the various screen sizes, testing your web application to make sure it looks and works properly in various permutations can be a difficult thing.

Enter Adobe Shadow, an inspection and preview tool. Here is how it works. You link a device (phone, tablet) to your main computer and then as you browse your web site on your main computer, the same web site automatically appears on your linked device(s). Furthermore you can remotely inspect the DOM and CSS from the web browser of the device, make on-the-fly changes and see them take effect in real-time. This is a great way to do testing across different devices and get your web application just right. Check out the quick tutorial video to learn more!

Official Adobe page about recent news

Adobe has put up a more official page about the recent news, confirming that they will not continue work on Flash for mobile and reaffirming their commitment to such technologies as Flash Player on the desktop, AIR for the mobile and desktop, Flash Builder and Flash Professional. Go read for yourself!

New components in Flex 4.6

One of the best Flex Evangelists out there, Christopher Coenraets, has recently made a blog post where he demonstrates the newest components added to the Flex 4.6 SDK. It is a must see for those developing mobile applications, as these new components were added specifically for this use case. My favorites are the Spinner (like a regular ComboBox) and the Callout components, cause I remember looking for components such as these earlier this summer when I was building some prototype applications (for Android). So what are you still doing here, go see the demo!

Montreal AUG meeting August 3rd

There is another Montreal Adobe User Group meeting coming up this week, on Wednesday August 3rd to be specific. This one is being held at a pool hall like the last one and will involve open talk about the mobile development. So if you are interested in dropping by, there is a $20 entry fee (hey, there's beer involved) and you can sign up here.

Great AIR for Android tutorial

As I was building my first AIR application for Android, I was naturally doing some research into how to get started. No article helped me more than this one from Narcico Jaramillo from Adobe. It properly explained the basics about the new Flex components that you need to use for mobile development and also had some links to some great step-by-step tutorials (scroll all the way to the bottom of the page) on how to build your first application using Flash Builder.

Kudos to Narcico for the great articles!

My first Flex 4.5.1 android mobile application

So I finally got myself an Android tablet this passed week and needless to say I've been playing with it ever since. And of course today, I build my first application with it using both the Android SDK and Flex 4.5.1. But it wasn't just click a button and voila! I had to go thru several steps and just wanted to note them all here, just in case someone else is getting started in the mobile development environment anytime soon and will be going thru the same thing as I experienced.

Before I get started, the tablet I bought is the Asus Eee Pad Transformer TF101, which you can read all about here. Its a nice 10 inch tablet at an affordable price of $399 CAD. And my PC is running Windows 7 Service Pack 1.

So here are the steps that I took to build my first "Hello World" application:

1. Enable Debug mode on your device.
   
2. Download and install the USB driver for your device. The Android web site links to whole list of OEM sites, so you can find the one for your device. In my case, Windows 7 installed it on its own.
3. Download the latest Android SDK from here. I downloaded the zip version and extracted to my folder of preference.
4. Since we are using Eclipse for our development, install the ADT plugin by following the instructions on this page. I am using Eclipse Helios (3.6).
   
5. Once the ADT plugin is installed, start Eclipse and go to Window > Android SDK and AVD Manager. You can now download and install some extra components related to the Android SDK. The most important one as I recall is the "Android SDK Platform-Tools".
6. Again within the Android SDK and AVD Manager (see above step), under Virtual Devices, add your device... I just had to specify Name, Target, SD Card size.

Once I had done all these steps, I was ready to rock'n'roll. Once way to check that your device and your PC are talking to each other is to do the following:

1. Open a console window
2. Goto <android sdk>\platform-tools folder
3. Run the following command: adb devices

You should see your device listed with some alphanumeric identifier assigned to it. If you dis-connect it from the USB port and run this command again, you should see that the device is no longer listed.

The next thing that I did was to create a Flex Mobile Project and just add a label to the UI and set its text property to "Hello World". Then I ran the application and voila, the application was compiled and auto-deployed and auto-launched on my device!

NOTE: Make sure that the Run Configuration has it's Launch Method set to On Device.

I hope these steps help out all those that are getting started in Android development with Flex!

Montreal AUG meeting June 1st

This upcoming Wednesday June 1st 2011, will be the first Montreal AUG meeting in a year. The event will be held at the Atwater Library (Google map details here) from 6:00 to 9:00 pm. You can find some details here. The primary presentation will be about the newly released Flex SDK 4.5 and Flash Builder 4.5, which will be given by Martin Arvisais, a Flex/Flash developer and trainer here in Montreal.

There is no need to sign up, you just need to show up and bring any friends/colleagues along with you. I will not be able to attend due to a prior commitment, otherwise I would have loved to give a presentation of my own.

Ottawa Mobile Dev day recap

On Saturday I went to the Mobile Dev Day in Ottawa and here is a brief recap of what I saw.

Windows Phone 7
It was the last prez of the day and for me it was by far the most interesting, so you could say they saved the best for last. The presenter actually demoed a beta version of the phone (due out in Nov of this year) with all of its features and then proceeded to use Visual Studio to create a couple of simple apps and run them in the simulator to demonstrate a simple development cycle. A couple of the sample apps he built used the Azure services (provinded by MS for a monthly fee of $12 - dont quote me on that) to push information to the phone. The development was done in C# so easy for existing Windows developers to pick up on (or even Java developers like me!).

Adobe AIR on Android
Unfortunately there was no demo, just a look at sample code and what extra APIs are provided to AIR for the Android OS. Again this is just a beta, so you can try it out yourself by downloading the add-on here. Although you can access things like the Geolocation API and the Accelerometer, you cannot unfortunately access the phone's contacts or any over local data. Maybe in the next version.

iPhone
Two words: Objective C. We had two presenters for the iPhone and although the apps looked great (like they always do), I can't say that programming in Objective C turns me on. It looks so archaic. Dealing with pointers? Remembering to free up memory? That's so 15 years ago! There is a glimmer of hope however, you can use PhoneGap to create HTML/JS/CSS apps and deploy them to the iPhone. But you have to have a Mac in either case to do iPhone development. Bah!

Adobe Ottawa Mobile Developer day

Adobe is holding a developer day on Saturday August 28th, 2010. They will showcase development for mobile devices using Adobe tools for various platforms, including iPhone and Windows Phone. The mini-conference is free, so better sign up as soon as possible here.