Archive for the ‘iOS’ Category

Ryan R

Up and running iOS development

Tuesday, April 30th, 2013

Creating an iOS application can be a daunting task. From design and architecture to testing and deploying, there’s a lot to think about. Luckily, you don’t have to start from scratch, as most of the problems you’ll run into have already been solved by someone else. The internet is filled with a great selection of reusable components and libraries which can be used to jump-start your next iOS project.

 

User Interface and Architecture


Cocoa Controls (https://www.cocoacontrols.com/) is a directory of open source controls for Cocoa (OS X) and CocoaTouch (iOS) applications. A recent phenomenon you’ll discover on Cocoa Controls is that when a big app is released on the app store with a unique user interface control of some sort, there will be dozens of open source implementations within weeks. A great example of such a phenomenon is the parallax zooming effect ‘clones’, which imitate a visual effect implemented in some new apps like CNN and Tweetbot (https://www.cocoacontrols.com/search?utf8=✓&q=parallax).


One drop-in component that I want to make special mention of is InAppSettingsKit (https://github.com/futuretap/InAppSettingsKit). Many developers find the process of storing app settings in the official iOS settings app confusing, and simply implement their settings in their own application. InAppSettingsKit makes writing a settings screen *and* having those settings exposed to the iOS settings application a snap – huge time saver.

 

Networking


A great user interface is not all that important without some data. If you’re integrating with a web service, downloading images, or just making simple GET requests, you definitely need to take a look at AFNetworking. AFNetworking (the AF stands for AlamoFire, the team behind Gowalla, now a part of the Facebook) is a very mature library for making network request. Its biggest draw is its powerful block-based syntax. If you’ve used anonymous functions, and observed their closure abilities, then you understand blocks.


What if you want to build a network connected app, but don’t have your back-end figured out yet? Well there are libraries (libraries as a service?) which not only handle the networking layer of your app, but generate a backend server based on the model objects you design for your application.


Check out Parse (http://www.parse.com). Parse, which coincidentally is now also owned by Facebook, is one such service. If you don’t mind locking yourself into the Parse-o-verse, then you may find yourself very impressed with how much time Parse can save you. Parse allows you to model your data online, import values from common formats (CSV, etc.), and provides an SDK for every platform under the sun to access the data. It can also take care of push notifications, login (including with Facebook or Twitter credentials) and supports what it calls “Cloud Code”: the ability to have your own custom JavaScript server code, run on the Parse servers.

 

Testing

 

So you have your beautiful Internet-connected app, and you’re almost ready to ship. Time to test. TestFlight (http://www.testflightapp.com), is designed to make testing and, more importantly, organizing beta tests a breeze. TestFlight allows you to organize your testers, invite them to betas, inform them of new betas and even deliver beta applications over the air, completely bypassing the App Store.


While your testers are finding all the bugs in your app, Crashlytics (http://try.crashlytics.com) can be used collecting detailed crash logs. When an app normally crashes, it stores a crash log (a blackbox recording of what went wrong) in the device. On the next iTunes sync, these logs are sent to Apple. Apple will eventually let you see these logs, which have to be downloaded and interpreted by analysing the code that generated it (so it can properly report line numbers, method names, etc.). It’s quite a process. This is where Crashlytics comes in.


Crashlytics simplifies all that by having your app communicate directly with its servers on a crash. Better yet, it caches unsent crash logs to be sent on the next launch, to ensure it’s been sent. You can also inject custom Crashlytics flags, to help debug the state of an application on crash.


Production


Finally, your app is approved and in the store. You may want to make tweaks but the app update process is lengthy. GroundControl (https://github.com/mattt/GroundControl#readme) is a library that allows you to store application configurations in the Cloud. Use GroundControl to tweak default values, or maybe have dynamic themes. You can now tweak your app to fit user trends without re-submitting a new version.


Finally…


This is just a small subset of what’s available. With new developers joining the community every day, there’s an ever-changing landscape of bits and pieces to be toyed with… but don’t be afraid to create something unique, and maybe your next piece of code may the next big thing.

alaint

Flex Mobile: IconItemRenderer Example

Thursday, January 5th, 2012

By Alain Thibodeau – Consultant

For Flex mobile applications you should use the mobile optimized item renderers. The default base class for mobile renderers is the LabelItemRenderer. Extending this is the IconItemRenderer, which is a handy renderer that includes an icon area, label and message.

Here is an example of using IconItemRenderer in the simplest form:

MyIconItemRenderer.mxml

1
2
3
4
5
6
7
8
9
10
<!--?xml version="1.0" encoding="utf-8"?-->
<s:IconItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    iconField="icon"
    labelField="label"
    messageField="message"
    iconWidth="45"
    iconHeight="45"
    />

HomeView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:List
        width="100%"
        height="100%"
        itemRenderer="MyIconItemRenderer"
        >
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object
                    label="Title 1"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 2"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 3"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 4"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 5"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 6"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
</s:View>

Outcome:

 
 

Here is an example of IconItemRenderer using messageFunction, labelFunction to display content other than what is directly in our dataprovider. I added a color property to my dataprovider objects.

Updated HomeView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?xml version="1.0" encoding="utf-8"?>
<s:View
        xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    title="HomeView"
    >
           <s:List
        width="100%"
        height="100%"
        itemRenderer="MyIconItemRenderer"
        >
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object
                    label="Title 1"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Red"
                    />
                <fx:Object
                    label="Title 2"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Blue"
                    />
                <fx:Object
                    label="Title 3"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Green"
                    />
                <fx:Object
                    label="Title 4"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Pink"
                    />
                <fx:Object
                    label="Title 5"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Brown"
                    />
                <fx:Object
                    label="Title 6"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Yellow"
                    />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
</s:view>

And here is the modified MyIconItemRenderer.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    iconField="icon"
    labelField="label"
    labelFunction="getLabel"
    messageField="message"
    messageFunction="getMessage"
    iconWidth="45"
    iconHeight="45" >
    <fx:Script>
        <![CDATA[
            private function getMessage(item:Object):String {
                return item.message + " - " + new Date().toDateString();
            }
                          private function getLabel(item:Object):String {
                return item.message + " - " + item.color;
            }
        ]]>
    </fx:Script>
</s:IconItemRenderer>

Outcome:

 

 

For online and in-person Flex and AIR training, checkout our course finder.

bslack

Objective-C Debugging Overview

Friday, November 18th, 2011

By Brandon Slack – Consultant

This is a simple guide that goes over some of the basics one should know when debugging Objective-C. Over the six years that I have spent working with Objective-C I have noticed some patterns and learned some tricks that have helped me to debug some really hard issues. I will be publishing various entries going forward on debugging tips and tricks. Starting first with the basics (console output) and moving onto more advanced techniques both in objective-c (posing, zombies, etc.) to gdb (how to use it, how to move your instruction pointer etc.) to using instruments. So check back often for further updates. Without further ado, I introduce Part I.

Part I: Console Output (The Basics)

This section walks you through the basics of using console output to debug. It starts off with a review of standard out and standard error, and explains the difference between buffered and unbuffered output, in particular, how that could effect your debugging output. It ends with a description of how to customize the logging output of an objective-c method through the overriding of the ‘description’ method.

Simplicity is usually the answer when it comes to debugging. Sometimes the quickest and easiest approach to debugging a problem is log statements. Whether you use a logger, or printf, or NSLog, getting output on what is happening is one of the most simple and powerful tools that can be used to solve problems.

For creating console output you would typically use one of the following functions:

void NSLog(NSString *format, …);
int printf(const char * __restrict, …);
int fprintf(FILE * __restrict, const char * __restrict, ...);

There are of course many other functions that would allow you to output to console, but those are the three big ones I often use. If you are working on a bigger project, you might even have developed your own that will output to both console and a log file, and perhaps even format the output for you.

Typically you would output to a file or console or to some other stream. There are two very common streams that are predefined in stdio for you.

stdout (Standard Out) – This stream usually outputs all text to the console or terminal that you are working in. One thing to keep in mind with this stream is that it is typically a buffered stream, sometimes line buffered, sometimes buffered by size. The point is that you might write to stdout and not see anything appear on the console. You may write several lines to stdout and only see the first three or four. This is an important thing to understand that this stream will not output until its buffer is full or has reached a threshold. You can however force output of this stream prematurely by using the ‘fflush’ function which is also defined in ‘stdio.h’. Calling this will immediately force everything in the buffer to be outputted. You should try to avoid calling this function when possible however as it does involve a small amount of overhead and could therefore be a small point of performance loss. When debugging an application that uses output to stdout, I typically have a fflush(stdout) command at the end of my run-loop.

stderr (Standard Error) – This is the other pre-defined stream. It also typically outputs to console and is typically used to output diagnostics or error reporting information. A big difference between stdout and stderr is that stderr is unbuffered unlike stdout. This is again platform specific, and you should always double check, but scenario is that stdout is buffered and stderr is not. This means that anything you output to stderr should appear right away at the output terminal. This can cause some confusion for some people. As you could have a scenario like the following:

"Hello World" --> stdout
"Error Message" --> stderr
"Hello Again" --> stdout

Typically, at the output terminal, you would expect to see:

Hello World
Error Message
Hello Again

But what they might actually end up seeing is:

Error Message
Hello World
Hello Again

It also goes back to the fact that stdout might be buffered, and therefore will not be outputted right away, where as stderr is typically unbuffered and therefore outputted immediately. This is something important to keep in mind when debugging and outputting data.

One other important aspect to stdout and stderr is that there output locations can be redirected. Typically, they both go to terminal or console. However a user has the ability to pipe their contents to a file. Further, a user could pipe stdout to one file and all the stderr statements to another file if they so desire.

<stdio.h> Output

The printf, and fprintf functions are both defined in stdio.h and is therefore part of the C standard library. The printf function will output to console on stdout all the time, where as fprintf, allows you to specify the file that you wish to output to. So typically you might find:

1) printf("Hello World\n");
2) fprintf(stdout, "Hello World\n");
3) fprintf(stderr, "Hello World\n");

Lines 1 and 2 are equivalent. Both go to standard out, where as line 3 is directed to standard error instead (and as previously explained might be unbuffered). Another important thing to note is that we have a ‘\n’ at the end. This ‘\n’ indicates that we want to start a ‘newline’. The printf family of outputting does not automatically output to a new line each time you use it. You need to tell it when you want to start a new line.

The printf family of functions also allows you to output other information such as numbers, strings etc. You can output a number by doing:

printf("My number is %d\n", 14);

This will output

"My Number is 14"

The ‘%d’ is a format specifier that dictates where the number should be positioned. A string would have a different format specifier as would characters and pointers etc. If you need a refresher on this, you should probably take a read of this:

http://www.cplusplus.com/reference/clibrary/cstdio/printf/

The same format specifiers will work in fprintf that work in printf.

NSLog Output
NSLog is an output function provided by the foundation framework which is typically included when you are building most Objective-C projects. It is very similar to the printf family of functions and can use the same format specifiers to output information from variables. There are however four differences:

1) NSLog is set to output to stderr (in contrast to printf).
2) NSLog always appends a ‘\n’ (newline) to the end of your log statement for you. Therefore you no longer need to use ‘\n’ at the end of your log statements to drop down to a new line. This is done automatically for you. Therefore, if you do add a ‘\n’ at the end of your log statement you will drop down two lines instead of one.
3) NSLog accepts NSString objects as the format string as opposed to CStrings. E.g.

printf("Hello World\n");
NSLog(@"Hello World");

Notice the ‘@’ symbol in objective-c means that we want this to be a NSString object. Also notice that no ‘\n’ is needed.

4) A format specifier has been added, the ‘%@’ format specifier. The ‘%@’ format specifier is the specifier that you use to output Objective-C objects that inherit from NSObject (typically most objects). There are ways to output objects that do not inherit from NSObject, but thats beyond the scope of this introduction.

EDIT: The NSLog format specifiers can be found here:
http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/Strings/Articles/formatSpecifiers.html

The most interesting part is the new format specifier ‘%@’. This allows us to print an object out to console. Say we have the following:

@interface Foo : NSObject {
     int x;
}
@end

@implementation Foo

- init {
    if((self = [super init])) {
        …
    }
    return self;
}

- (void)dealloc {
    …
    [super dealloc];
}
@end

A typical object, and then we have:

Foo *f = [[Foo alloc] init];
NSLog(@"Output: %@", f);

What we would typically see go to the console is this:

Output: <Foo: 0x10036d5e0>

That is the name of the object, plus is memory address. This is a nice way of uniquely identifying a reference to an object, but nothing more, and it could be hard to follow. What you can do is add more information by overriding the NSOjbect’s ‘description’ method. The description method accepts no parameters and always returns a NSString. Here is an improved version of Foo that will give us more output:

@interface Foo : NSObject {
    int x;
}
@end

@implementation Foo
- init {
    if((self = [super init])) {
        …
    }
    return self;
}

- (void)dealloc {
    …
    [super dealloc];
}

- (NSString*)description {
    return [NSString stringWithFormat:@"%@ - X: %d", [super description], x];
}
@end

Now when we do the following:

Foo *f = [[Foo alloc] init];
NSLog(@"Output: %@", f);

What we will see in the console is something like this:

Output: <Foo: 0x10013caf0> – X: 0

Notice how we now have information on the ‘x’ variable and its value. You will notice if you look at my override that I call ‘super description’ as well and put that at the begging of the string. This is not strictly required, but I have found when making subclasses, it is always nice to output the super classes description. You never know what it might have and what information it might add.

There is another ‘special’ method you can override that is often overlooked. It is called ‘debugDescription’. This will get called, before ‘description’ when the print-object function is called. It can be useful when debugging, especially in the debugger where you might print out more detailed information then you might log. This will be discussed more in a future update.

Chad Upton

Example: Tracking Multiple Simultaneous Touchscreen Interactions in Adobe AIR

Tuesday, October 18th, 2011

By Chad Upton – senior consultant

If you’re building AIR apps for Android, iOS or BlackBerry PlayBook then you definitely need to handle touchscreen input. Many apps treat your finger just like a mouse, and by default that’s how AIR handles it.

Since you have more fingers than mice, you may want to plan for the case when a user touches the screen with more than one finger at a time. If you hold one finger on the screen and then touch it with a second, AIR will ignore any finger after the first one, unless you enable “TOUCH_POINT” mode in actionscript.

To show you how this works, I spun up a demonstration app that will track each of your fingers as you move them around on the screen. The app will place a circle below each finger. I made the circle nice and fat to accommodate the chubbiest of code hammers. I’m not sure what the maximum number of inputs is; I was able to get 11 circles on the screen (10 fingers plus 1 nose) — seriously. In this screenshot, you can see 8 touch points.

NOTE – If you’re running iOS 5 for iPad and have Multitasking Gestures enabled, using more than 3 touch points simultaneously can be a challenge since the OS uses four and five fingers for the Multitasking Gestures. If you’re targeting iOS devices, you may want to keep this in mind and even plan to use a maximum of three touch points at once.

Now for the code. Create a new “flex mobile project” in flash builder and paste over the default mxml with this code below. For best results, run it on your mobile device. The screenshot above shows it running on an iPad.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application 

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

backgroundColor=”#333333″

creationComplete=”creationCompleteHandler()” >

<fx:Script>

<![CDATA[

import flash.ui.Multitouch;

import flash.ui.MultitouchInputMode;

import spark.core.SpriteVisualElement;

public const CIRCLE_RADIUS:int = 50;

 

public function creationCompleteHandler():void {

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

touch.addEventListener(TouchEvent.TOUCH_BEGIN, eventHandler);

touch.addEventListener(TouchEvent.TOUCH_MOVE, eventHandler);

touch.addEventListener(TouchEvent.TOUCH_ROLL_OUT, eventHandler);

}

 

public function eventHandler(event:TouchEvent):void {

if (event.type == TouchEvent.TOUCH_BEGIN) {

addCircle(event);

} else if (event.type == TouchEvent.TOUCH_MOVE) {

moveCircle(event);

} else if (event.type == TouchEvent.TOUCH_ROLL_OUT) {

removeCircle(event);

}

}

 

public function addCircle(event:TouchEvent):void {

var sprite:SpriteVisualElement = new SpriteVisualElement();

sprite.name = event.touchPointID.toString();

sprite.graphics.beginFill(0xB1B247);

sprite.graphics.drawCircle(CIRCLE_RADIUS / 2, CIRCLE_RADIUS / 2, CIRCLE_RADIUS);

sprite.graphics.endFill();

sprite.x = event.localX - CIRCLE_RADIUS / 2;

sprite.y = event.localY - CIRCLE_RADIUS / 2;

paint.addElement(sprite);

}

 

public function moveCircle(event:TouchEvent):void {

paint.getChildByName(event.touchPointID.toString()).x = event.localX-CIRCLE_RADIUS/2;

paint.getChildByName(event.touchPointID.toString()).y = event.localY-CIRCLE_RADIUS/2;

}

 

public function removeCircle(event:TouchEvent):void {

paint.removeElementAt(paint.getChildIndex(paint.getChildByName(event.touchPointID.toString())));

} ]]>

</fx:Script>

<s:Group

id=”paint”

width=”100%”

height=”100%”

/>

<s:Group

id=”touch”

width=”100%”

height=”100%”

/>

</s:Application>

Each time your finger touches the screen, a TOUCH_BEGIN event fires off. In the event object there is a touchPointID (integer). Each new finger to touch the screen gets a new ID. This allows you to keep track of each finger as it moves around or is removed from the screen. You’ll see that I give each circle a name that matches this ID. This allows me to move and remove the circle when the finger moves around or is removed from the screen. It’s quite straightforward and elegant.

If you’re interested in Flex or iOS training online or in-person, checkout our course selector for upcoming courses.

alaint

Generate a Certificate with ADT and ANT

Wednesday, August 10th, 2011

By Alain Thibodeau – Consultant

AIR and mobile applications need to be signed. Most of the time we use the same self-signed certificate to package our applications. There are times when you may want to use a different self-signed certificate or create one on the fly. This is possible using ADT and ANT.

Adobe’s documentation states the ADT certificate command use like this:

adt -certificate -cn name -ou orgUnit -o orgName -c country -validityPeriod years key-type output password

To incorporate with ANT we would do something like this:

Properties file:

cert.keystore=mycertificate.p12
cert.name=SelfSignedCertificate
cert.orgunit=Software Development
cert.orgname=newyyz
cert.country=CA
cert.keytype=2048-RSA
cert.password=mypassword

Build file:

<target name=”generate.certificate”>
<exec executable=”${ADT}”>
<arg value=”-certificate” />
<arg value=”-cn” />
<arg value=”${cert.name}” />
<arg value=”-ou” />
<arg value=”${cert.orgunit}” />
<arg value=”-o” />
<arg value=”${cert.orgname}” />
<arg value=”-c” />
<arg value=”${cert.country}” />
<arg value=”${cert.keytype}” />
<arg value=”${cert.keystore}” />
<arg value=”${cert.password}” />
</exec>
</target>

You can find more information here: http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac1e63e3d128fc240122-7ffc.html

Andrew Rybak

Native vs. Web Apps

Wednesday, July 27th, 2011

By Andrew Rybak – Professional Services Sales Consultant

I was very interested to read that the Financial Times has replaced their native iPhone/iPad app (found here) with a browser based version that will run on any iOS device. The Financial Times claims that this is a better and faster app, and they stress the benefits of not having to go through iTunes to download the app or to receive updates.  For Financial Times, this of course also means that they are not subject to Apple’s 30% take of content/apps sold through iTunes. Attempts to bypass paying such fees appear to be on the rise among media companies, as noticed by Wired in this article.

AT NTG we are frequently asked to weigh in on the native app vs. mobile site decision faced by our customers. We do not believe that there is a singular, one size fits all, approach as each app is different. Sometimes a native app makes the most sense from both a business and technical standpoint. But in many instances an HTML5-based site or AIR-based app will meet all the requirements and allow you to build functionality that will work across multiple devices and platforms. I suspect we will see more and more of our customers favour this path in the coming months.

What are your thoughts regarding the debate between a native vs. a web app?

alaint

Packaging Flex/Flash Applications to iOS with ADT

Tuesday, July 5th, 2011

By Alain Thibodeau – Consultant

The release of Flash Builder 4.5.1 took care of exporting mobile applications for iOS and made it a lot simpler. However, there are times when you still need to use ADT or when you simply don’t have Flash Builder 4.5.1.

At first, it can be confusing if you are not familiar with ADT and the command line to package your swf to iOS (there is plenty of documentation on the subject on Adobe’s site). To help with the process, Peter Vullings built a helper tool for us.

ADT helper tool (found here) can speed up the use of ADT and can help you learn the syntax. Follow the instructions on the site and make sure to point ADT helper to the AIR 2.7 SDK. If you don’t already have it, you can get it here.  Once you hit “the deploy to iOS” button, ADT helper will create an iOS directory in your project. This directory will include your generated application file and a build.bat. If you need to deploy again, you can simply run the bat file. If you open the bat file you can get a better understanding of how to use ADT to deploy your swf to iOS.

Take note that it is assumed that you have all the prerequisites needed to deploy, such as a provisioning file and certificates. For more information you can see my previous post.

alaint

Adobe Flash Builder 4.5.1, AIR 2.7 and iOS

Monday, June 20th, 2011

By Alain Thibodeau – Consultant

Before today, we could only get AS3 projects created with Flash Builder 4.5 onto an iOS device. Adobe has now released Flash Builder 4.5.1 which includes the option of creating a Flex project and exporting it to your iOS device. This long awaited release brings us relief from having to manually create our ipa files with ADT and the command line.

Last week, Adobe also released Air 2.7. This release brings great improvements to rendering for iOS which is said to be up to 4 times faster. Take note that Flash Builder 4.5.1 does not ship with Air 2.7, but includes the Air 2.7 packager for iOS, taking advantage of the new enhancements. You will have to manually update Air 2.6 to 2.7 if you want to use it with Flash Builder.

It is easier to create ipa files from Flash Builder 4.5.1, however the same process hasn’t changed for Apple. Here is a brief explanation of what is needed:

1. Register as an Apple developer
2. Sign on to the iOS developer program – $99
3. In your iOS provisioning portal get a developer certificate:

  • Generate a signing request; if you are on windows you can use openSSL
  • Get your certificate approved by your corporate account manager, or approve it yourself if you are and admin
  • Download your certificate and convert into a p.12

More information here.

4. In your iOS provisioning portal register your development device with Apple.
5. In your iOS provisioning portal create a development provisioning profile.
6. Once your ipa is created, use iTunes to transfer your application to your iOS device.

Serge Jespers created a few videos on how to create an ipa file from Flash Builder 4.5.1 and Flex, take a look at his blog.

Also be sure to take a look at NTG’s training courses: “AIR 2: Building Beyond the Browser” and “Complete iPhone/iPad Software Development“.