Adobe AIR 3.8 introduces Socket Server on Android and iOS

Hi All,

after long time I’m back for all the developers are working with the Flash Platform right now!
Sorry for that but it was a really intensive period for me with the organization of “Having fun with Adobe AIR” so I haven’t a lot of time to share with you my new experiments.
Yesterday Adobe MAX is finished with a lots of design news, great and inspire case histories for designers and a lot of amusement during the Sneak Peek where they have shown the real power of Adobe labs with tons of really cool features that we could see in next releases of Adobe’s softwares.
For a developer perspective there weren’t big announces so, as usual, we can do it by ourselves…. and here we are!

During last few days Adobe release the Adobe AIR 3.8 and Flash Player 11.8, both in BETA but you can download and start to play with them.
When Adobe releases a new AIR SDK I always take a look to the release notes to see the new features of my favorite platform, this time I’m glad to announce that they add the opportunity to create TCP/IP and UDP socket server directly on iOS and Android.
This is a very cool feature because you can really create amazing things in particular for applications and games, for example local multiplayer, chat and so on.
I worked a lots with sockets during last years in several projects and my big concern was that I can’t create a socket server on smartphone and tablet with AIR, I could do that only with native code but I was pretty sure to see this feature will be implemented in next releases of AIR!

Today I had few time to spend experimenting new stuff so I decided to try AIR 3.8 BETA on mobile and create something cool to share with you.
As you can see in this short video I create a socket server on my iPhone 4 that interact with a client made on my iPad mini (I tried also with my Android smartphone and it works as well):

To create this sample you needn’t to learn something new, you can use the same APIs you will use on a desktop application, so to create a socket server you write those few lines of code:

//creation of a TCP/IP Socket server
private function createServer():void{
server = new ServerSocket();
server.addEventListener(Event.CONNECT, onConnect);
server.bind(7934); // this is the number of the port where your socket communicate
server.listen();
}

Then, when a client socket will join in the same network and it listens the same port of the server, the magic happens and you can start to comunicate:

//on the server socket application
protected function onConnect(event:ServerSocketConnectEvent):void {
incomingSocket = event.socket;
incomingSocket.addEventListener(ProgressEvent.SOCKET_DATA, onData);}

protected function onData(event:ProgressEvent):void {
if (incomingSocket.bytesAvailable > 0){
//here you can pass data to the client using writeBytes, writeUTFBytes and many other methods
/*an example could be:
incomingSocket.writeUTFBytes(String("HELLO!");
incomingSocket.flush();*/
}
}

// on the client socket application you have to create the connection and then manage (send and receive) data from the server
private function createSocketConnection():void{
socket = new Socket()
socket.addEventListener(Event.CONNECT, connectedToServer);
socket.addEventListener(ProgressEvent.SOCKET_DATA, receiveData);
socket.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
socket.addEventListener(Event.CLOSE, closeSocket});
//pass to connect method the server IP and the port to comunicate
socket.connect("127.0.0.1", 7934); 
}
protected function receiveData(event:ProgressEvent):void {
// here you can read all the packets sent from the server
}
protected function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
private function connectedToServer(e:Event):void{
//yes! you are connected to the socket server
}
private function closeSocket(e:Event):void{
//your socket connection is closed
}

After that you can start to experiments with this new feature as I’ve just done.
Last but not least, as you can see on the release notes, Adobe adds another great feature, that is the capability to stop all movieclips are running on the stage calling a new method “stopAllChildren()” directly from the stage instance.
Simple, easy and useful!

Dynamic embedding fonts without using Flash or Embed Metadata

I’m working in a new project where we have to automate the integration of fonts loaded on a server by users and integrate them in a Flash / AIR project.
In the most cases, if you search online, you can find 2 main solutions:
1. first one is embedding fonts in a class with [Embed] metadata
2. second one is create a swf file and instantiate the class of Font embedded inside (this method require Flash Pro)

Searching well you can also find a solution with swfmill but there are some problems to integrate with AS3 projects.
Like you know, in my spare time, I’m playing with Haxe and Corona SDK and in this case Haxe help me to accomplish my task.
I found a great library called hxswfl made with Haxe that allow me to create a swf or swc file directly from an XML, there are many other usage of this library that are described on online repository of this project, but what I need this time is use it to create a library with embedded fonts inside with a class name assigned to each font.

So first of all, following the library XML schema, I create a lib with a list of fonts in this way:

<lib>
 <font file="Palatino-Bold.ttf" class="com.insideabit.PalatinoBold"/>
 <font file="Palatino-BoldItalic.ttf" class="com.insideabit.PalatinoBoldItalic"/>
 <font file="Palatino-Italic.ttf" class="com.insideabit.PalatinoItalic"/>
 <font file="Palatino-Roman.ttf" class="com.insideabit.PalatinoRoman"/>
 <font file="Verdana-Bold.ttf" class="com.insideabit.VerdanaBold"/>
 <font file="verdana.ttf" class="com.insideabit.Verdana"/>
</lib>

Any node has 2 attribute, file attribute where I set the path to find my font on filesystem and the class where I set the class name of my font that I’ll use in my actionscript class later.
After download source of hxswfml library (and obviously before anything I’ve installed Haxe in my computer), I go with Terminal in bin/neko folder and I launched neko file (hxswfml.n) with those parameters:

neko hxswfml.n xml2lib librarySWF.xml lib.swf

I’m telling to my neko program that it has to convert my xml to a swf library, embedding inside all fonts described in the XML file with that class name.

Now we have our SWF file with fonts, we can create our Actionscript project and load with a loader object our swf file.
Then, when SWF file is loaded, we have to register our fonts inside the SWF library, you can accomplish this task like this:

 for(var i:int = 0; i < _fontsArr.length; i++){
 var FontLib:Class = _loader.contentLoaderInfo.applicationDomain.getDefinition(FONT_NAME) as Class;
Font.registerFont(FontLib);
}

Ok, now you can use any fonts that you have in your SWF without install them in your laptop and without create any AS3 class, this is a really easy way to work with external fonts in a dynamic way.


Obviously I prepare a sample to download if you have any questions feel free to leave me a message to this post.

It’s not finished yet, because I’ve a question for you: what happens if I use the same technique for different devices?
On web and desktop (AIR application) there are any problem because I can load any external SWF file, the same on Android and Playbook but on iOS?
With iOS you can a SWC file instead a SWF file so your SWC library will be embedded at compile time in your application for iOS and you can access to fonts more easily instantiate directly your class name.


For more information about this technique I suggest to read this article on Adobe DevNet.

InDesign and Flash: PageFlip controller

One of our last project was to create an easy but integrated workflow from InDesign to web.
In particular they request us to create a PageFlip that will be published automatically online every change they made in the offline version without spending a lot of time on this activity.
Like you can see for a Flash Platform developer nothing more obvious that a project like this, so you can take a PageFlip online, you export all pages in swf or jpg files and you popolate the XML behind the PageFlip… yes but we don’t bring this direction.
First of all we suggest to our client to add interaction elements directly in InDesign because from CS5 version (if I remember well) it adds the animator engine of Flash, so it is quite easy make animations directly in InDesign for a graphic designer that is more comfortable with this software instead of Flash Professional.
After that we study the InDesign exporting settings and we find that you can have your PageFlip exporting InDesign document directly in unique SWF file; the only problem is that you haven’t any control panel to add interaction in your PageFlip, for example if my catalogue is composed by 300 pages and I have to see the 250, from the beginning I have to click 249 times on the right page to see my page.
Another interesting thing that we see during this development is that there are many PageFlip on the web but it’s not easy for a graphic designer, more focused on the paper, to customize them because you have to know how Flash works and in detail how the PageFlip, that you chosen, works too.
Also the PageFlip made by InDesign has great performance instead of any other PageFlip tested with many pages in particular if pages are vector based.
Finally we decide to decompile the InDesign PageFlip to analyze if we will able to create a control panel for this SWF file and… WOW… we really bring an interesting direction!


In fact, in the document class of the SWF file called IDSWFFile, you can find many methods that could help you to create, for example, a navigation panel to jump from a page to another one or to create an index to navigate trough chapters.
The main thing that you have to remember is that InDesign PageFlip works putting each page in a frame so if you have 20 pages you’ll have 20 frames inside the SWF file generated.

Below you can find some useful methods that could help you to develop your personal control panel:

  • getFrameCount() return the number of frames (so the number of pages inside the SWF file)
  • getCurrentFrame() return the actual frame (so the page that user is reading)
  • getThumbnailForFrame(frame:int, width=32, height=32) return a bitmapdata of a frame in the size that you prefer, the default values are 32×32 px
  • goToFirstFrame() goes to the first page of the PageFlip
  • goToLastFrame() goes to the last page of the PageFlip
  • goToPreviousFrame() goes to the previous page of the PageFlip
  • goToNextFrame() goes to the next page of the PageFlip
  • goToFrame(frame:int) goes to a particular page
  • stopAllAnimations()
  • stopAllSounds()
  • stopAllVideos() 

There are also other public methods but for me those are the most interesting to create a PageFlip controller.
To work with those methods you have to cast the content of Loader like a generic Object and then you can call all those methods like you can see here:

// here we create the generic object to call PageFlip methods
private var _pf:Object; 
// we load our file generated by InDesign
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setPosition);
_loader.load(new URLRequest("pageflip.swf"));
//when PageFlip is loaded I add on the DisplayList
private function setPosition(e:Event):void{
_contPF = new Sprite();
_contPF.addChild(_loader.content);
addChild(_contPF);
_pf = _loader.content; 
}

// below I make functions to navigate the PageFlip when user click a button
private function prevPage(e:MouseEvent):void{
 _pf.goToPreviousFrame();
 }
 private function nextPage(e:MouseEvent):void{
 _pf.goToNextFrame();
}
 private function lastPage(e:MouseEvent):void{
_pf.goToLastFrame();
}
private function firstPage(e:MouseEvent):void{
_pf.goToFirstFrame();
}

If you’d like to create a more automatic workflow that allow your user to focus only on the content of PageFlip without waste his time with exporting issues.
In our case we use InDesign Server to solve this problem and create some scripts that allow user to create thumbnails and zoom pages without spend a minute on Photoshop or InDesign but easily upload own InDesign file on a server and via scripts we make everything user needs.
But I know that not everybody could have InDesign server in house, so another solution that I’d like to suggest could be create an InDesign panel with Flex that make the dirty job for the user, preparing all images for thumbs and exporting the PageFlip with right settings.

I know very well that it’s not rocket science for a Flash developer but I think that the workflow behind could be interesting and could be helpful in many situations and also I guess that InDesign users could find good stuff in this post.
Finally we have to remember that technology has to help people in their daily work accelerating process and maybe substitute the human interaction with a computer interaction giving more time to what people should be better like think to new stuff.

Introducing Starling: book review

Hi All,

first of all I apologize with people that usually read this blog if I didn’t insert any new post since last year but I’m working a lots in these few months to open a new market opporunity for my company out of Italy and I’m totally absorbed in this new activity, but in the meanwhile I’m studying during my spare time and I’d like to share with you my thoughts about “Introducing Starling”.

This book is for any Flash Platform developer that is looking to create next generation of mobile and desktop apps (or games).
It’s a book so practical that introduce you to the Starling framework, explaining how it works with simple examples of code that you can put in practice in a while.
Thibault guides you showing each object presents in this framework, that is an abstraction of Stage3D API introduced with Flash Player 11 and AIR 3.
With Starling you can aim better performance in your 2D applications thankfully the GPU acceleration added on Stage3D, with this book you can discover what there is behind and starting to develop with it.

Flash Platform Galaxy: why choose Flash Platform

In those days I’m reading a lots of mailing lists, forums, blogs and so on where Flash Platform supporters are so disappointed about the latest marketing movement of Adobe.

In fact yesterday Adobe announced that they stop the development of Flash Player on Mobile devices (on Desktop they are going ahead).
The road is clear HTML 5 inside the browser and Flash Platform for RIAs, Games and out of browser in combination with Adobe AIR.

For me Adobe for the second time (the first one was during Adobe MAX) has totally mistaken how to communicate this news and obviously tech blogs bring this announcement like the end of Flash…
Personally I don’t think that is the end of Flash but I think that Flash is moving on a new position in multimedia world probably out of browser.
I’m an Adobe addicted, like you know, and in particular I’m a Flash Platform supporter, so I think that we have to move on and make something to spread the word about this foggy situation, guys, Flash Platform is ALIVE!
To do this, I start making a pdf file called Flash Platform Galaxy that could help people to have an idea of what is Flash Platform and why choose it ( I know, I’m not a graphic designer but I think it could be useful), if you want to add more informations or change something feel free to leave a comment at this post or drop me a line via email.
Let’s go guys, we have a platform to save ;)

It’s time for a new web design era… probably without Flash

I’m here in L.A. for Adobe MAX, before the beginning of the conference we were very excited about the 2 keynotes because we were waiting for amazing news about our favorite platform… but it didn’t happen, instead we find 2 days very focused to designers (and it’s normal I guess) and to HTML 5, JQuery and CSS 3.

This is an important signal from Adobe, in 2 keynotes they mentioned Flex 2/3 times maybe, all the new stuff for Flash was focused on games and 3D and AIR had only 5 mins to show the new release and its new features.

So the message from Adobe is quite clear: “Use HTML 5 for the web and Flash for the game and out of browser”.
This recommendation from Adobe would change online web design classes significantly in the future.

It seems crazy but it’s the truth… the same company that in the beginning of 2000 was scared from the little Macromedia and its best technology Flash, today substitued the player with a new one.

In latest years I took part of different Flash Platform projects, mainly desktop and mobile applications and I hoped to embrace the right direction with the Flash Platform, with this MAX I’m pretty sure  that I made the right decision.
I’m disappointed that my favorite platform will be out of the browser but I’m more disappointed that Adobe is following the market instead of make it.

Today I can say that it’s time to move on and start again to study new “trendy” technology instead of a good and solid technology like Flash Platform.
Could Flash be the new mobile and desktop technology? I really don’t know but I’m sure that this year a new milestone of the web was put by Adobe.

Playing with Google+ API and Actionscript 3

Yesterday I saw that Google has released Google+ API, so I started to played with in my favorite part of the day: the night!

For now Google has published only public APIs that allow you to retrieve user’s informations and his activities list, all API are made in RESTful and JSON that are so easy to add in your project.
When Google will release next APIs, I hope soon, you can consume them with an oAuth 2.0 authentication, like Facebook.
I made a simple example to retrieve data from my Google+ profile in Actionscript for Android, you can download the source files directly from here.

If you want to play with Google+ API, first of all you have to request your Google+ API key; to do that go to Google API console and activate Google+ service, then in the details page you can find your key.

Google+ RESTful services get us a JSON response, to read it in your Flash/Flex application remember that you need as3corelib that have the JSON deserializer, for example you can push in a generic Object all data retrieved from Google+ service or if you prefer you could create a Value Object that it could be more useful.
In this case I decode directly in a generic Object, like you can see in this code snippet:

var data:Object= JSON.decode(dataToRead, true);

then now you can easily access to informations:

var icon:String = data.image.url;
var name:String = data.displayName;
var tagline:String = data.tagline;
var description:String = data.aboutMe;

Another easy feature that you can add in your Google+ application is a static image of the map, like in your web page, using Google Maps Static API.
You can easily make a query to Google Maps passing in GET params like: the dimension of image, the location and the zoom; you can also add more params that you find in the docs of Google Maps Static API.
Here a code sample to add this feature in your Flash application, in those line I request for an image with width 480px, height 200px, with roadmap skin and with a zoom of 15x:

var mapLoader:Loader = new Loader();
//city is a variable with the name of the place that you have to retrieve.
mapLoader.load(new URLRequest("http://maps.googleapis.com/maps/api/staticmap?center="
+city+"&zoom=15&size=480x200&maptype=roadmap&sensor=true"));
mapLoader.y = this.stage.stageHeight - 200;
addChild(mapLoader);

Like you can see work with those APIs are pretty easy, so now we have to wait for final release and then we can start to create our Google+ integration with the Flash Platform.

Tricks for tween on mobile devices with Flash Platform

In this quick post I’d like to share with you my experience about Tween on Flash Platform projects delivered on a mobile devices.
I started work on mobile since Flash Lite 1.1 so I grew up with mobile, I lived all the Flash mobile evolution and now, on tablet and smartphone, I had some good tricks to share with you, I really hope that those tips could help you during your developer life.
OK, let’s start:

  • Use quality property of stage
    This is a really good technique to use when you have to improve performance of your project, when you need to make a fluid tween before launch it, set stage quality to low and when tween will finish set stage quality to high or best.
    Avoid to use this technique when you have vectors (textfield for example) on the stage because you could have a worst result.
  • Use cacheAsBitmap and cacheAsBitmapMatrix
    If you have vector object that you’d like to animate in your project remember to cache them and then animate; remember also to set your application with GPU acceleration and you can see a really good performance with this technique.
    Avoid to cache objects that you need to remove from display list, it will be so expensive for your memory.
  • System.gc() works!
    I tried in few sample to use it on Android and I saw a good result, so the “old” tip to call System.gc() twice in a try/catch statement works on mobile device too (only on AIR apps)
  • Take care with multiple animations on iPad and iPhone
    On iOS devices we don’t have AIR runtime so LLVM translate our AIR project for us in Native Binary so it could help if you move few objects per time in particular if you have big objects to move like a background or something like that
  • Greensocks tweens are the best
    I tried tweener and other tween libraries for AS3, but the best one for me are the Greensock tween library, in particular on iOS devices.
  • Last but not least, remember to test your animation on the device because you could see “funny” results
    Sometimes happen that on your computer everything works well but when you port your content on a tablet or smartphone everything works not so well.
    Before hurt your head, remember to test a lots of times your mobile content on the device, it could save your projects!
Finally I suggest to take a look at dev center mobile development zone of Adobe site because you can find many tutorials and helpful tips on mobile development.
That’s all folks for now, I hope you enjoy those tips.

Multicast UDP socket in Adobe AIR with Python

In my last project I solved a big issue that I needed to receive notification from an hardware via a Multicast UDP socket.
If you want to know more about Multicast and Unicast in Flash Platform I really suggest to read Flashrealtime blog.
Like you know the Flash Platform can use multicast with RTMFP protocol so you can use it Flash to Flash or Flash to Flash Media Server but not Flash to hardware for example.

In my case I needed a Multicast UDP socket in a local application that communicate with an hardware that was my server, so I thought to realize a Python application for Mac OS X and Windows that could help me to solve this problem.
Python is my second favorite programming language after ActionScript (obviously) and this time Python saves me to accomplish my project.
I want to start with Python side, my goal is to connect to a multicast socket and get all data and then send them to a unicast UDP socket server that we will create in Adobe AIR in next example.

#!/usr/bin/env python
# encoding: utf-8

import socket, select

ANY = '0.0.0.0'
MCAST_ADDR = '239.0.1.1'
MCAST_PORT = 10300

sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM, socket.IPPROTO_UDP)
sock.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
sock.bind((ANY,MCAST_PORT))
sock.setsockopt(socket.IPPROTO_IP, socket.IP_MULTICAST_TTL, 255)
status = sock.setsockopt(socket.IPPROTO_IP, socket.IP_ADD_MEMBERSHIP,
socket.inet_aton(MCAST_ADDR) + socket.inet_aton(ANY));

sock.setblocking(0)
print 'socket UDP multicast ready'

udp = socket.socket(socket.AF_INET, socket.SOCK_DGRAM);

while 1:
	ins, outs, errs = select.select( [ sock ] , [], [], 1.0)
	try:
	    data, addr = sock.recvfrom(1024)
	except socket.error, e:
	    pass
	else:
	    print data
	    udp.sendto(data, (socket.gethostbyname('127.0.0.1'), 10303))

socket.close()

First few lines we define the multicast socket server ip (that in my case is pointing to the hardware) and the socket port to communicate with.
Then I create the UDP multicast socket and the UDP unicast socket (udp var); in the while loop I set the socket timeout and if I receive data trough the multicast socket I send everything to unicast one.
After that to create an application without any dependency in Windows or Mac OS X, you need to use a couple of Python libraries called py2app and py2exe.
Both allow you to create an executable file from your Python script for mac or win without any dependencies, in Windows side you have only to remember which kind of Python dll you have to incapsulate in your AIR application but we take a look at that in a while.
To create the executable file you have to create a setup script in Python for both operating systems, I suggest to create something like that:

FOR WINDOWS:

from distutils.core import setup
import py2exe,sys,os

origIsSystemDLL = py2exe.build_exe.isSystemDLL
def isSystemDLL(pathname):
        if os.path.basename(pathname).lower() in ("msvcp71.dll", "dwmapi.dll"):
                return 0
        return origIsSystemDLL(pathname)
py2exe.build_exe.isSystemDLL = isSystemDLL

setup(windows=['myPythonScript.py'])

FOR MAC:

from setuptools import setup

APP = ['myPythonScript.py']
DATA_FILES = []
OPTIONS = {'argv_emulation': True}

setup(
    app=APP,
    data_files=DATA_FILES,
    options={'py2app': OPTIONS},
    setup_requires=['py2app'],
)

Then if you want to create your executable files you have only need to launch the command on command prompt or terminal (you can find more informations on how to customize those setup scripts in each library’s website):
FOR WINDOWS:

python setup.py py2exe

FOR MAC:

python setup.py py2app

Now we can start with the AIR part, like you know with AIR 2 you can work with Native Process and this is the case to use them:

const WIN_PATH:String = "win/socket.exe";
const OSX_PATH:String = "socket.app/Contents/MacOS/socket";

var nativep:NativeProcessStartupInfo = new NativeProcessStartupInfo();

var finalPath:String;

var f:File
if(Capabilities.os.substr(0, 3) == "Win"){
   finalPath = WIN_PATH
}else{
   finalPath = OSX_PATH
}

f = File.applicationDirectory.resolvePath(finalPath);

nativep.executable = f;

var process:NativeProcess = new NativeProcess();

process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onOutputData);
process.addEventListener(NativeProcessExitEvent.EXIT, onExit);
process.addEventListener(IOErrorEvent.STANDARD_OUTPUT_IO_ERROR, onIOError);
process.addEventListener(IOErrorEvent.STANDARD_ERROR_IO_ERROR, onIOError);

process.start(nativep);

var udp:DatagramSocket = new DatagramSocket();
udp.addEventListener(DatagramSocketDataEvent.DATA, getData);
udp.bind(10303);
udp.receive();

function getData(e:DatagramSocketDataEvent):void{
	trace(">>>>>" + e.data.readUTFBytes( e.data.bytesAvailable ))	
}

function onOutputData(event:ProgressEvent):void{
   trace(process.standardOutput.readUTFBytes(process.standardOutput.bytesAvailable)); 
}

function onErrorData(event:ProgressEvent):void{
    trace(process.standardError.readUTFBytes(process.standardError.bytesAvailable)); 
}

function onExit(event:NativeProcessExitEvent):void{
   trace(event.exitCode);
}

function onIOError(event:IOErrorEvent):void{
  trace(event.toString());
}

In this simple script I’m choosing the right executable file for the operating system where my AIR application is working on and then I launch the native process to start the multicast socket.
Finally I listen for the unicast socket and I trace on the output panel the messages that I receive from the hardware.
I think this is an interesting way to extend Adobe AIR with Python that open new possibilities on the desktop side, think for example to create a Python bluetooth extension for Adobe AIR, it could be so interesting add this feature to AIR apps isn’t it?

Presentation Model design pattern: multiple screen solution – part 1

Today I’d like to talk about Presentation Model design pattern because it’ll be so useful for anyone that is working on multiple screen project with Flash or Flex.
In latest months we lived in phrenetic mobile world where we have tons of new and powerful devices on the market with different screen sizes, different hardware and so on, on the other hand we have clients that are looking for new business opportunities and they are seeking a way to spend less but earn more.
So, one way to solve those problems could be find a way to deploy with the same technology in different devices (tablets, smartphones, computers…) saving time with great results!
That’s not a dream, it could be made with knowledge, architecture and a good developer or a team!

Our goal

For a developer find a way to have a good project architecture to maintain it’s so important, usually when you start a project you try to define the parts that could be re-usable in different part of the same project or in different project too.
So our aim is find a way to write less code but it will cover the project needs and that could be portable in different screens / operating systems easily.

What is Presentation Model design pattern?

My mentor Martin Fowler describes it with those words: “Represent the state and behavior of the presentation independently of the GUI controls used in the interface”  (here the full article of Martin Fowler).
In fact with this pattern we divide UI (components, movieclips, sprites…) from their behaviors; each view will have one and only that one presentation model and only the presentation model will interact with the whole architecture (like with model or proxy…).
Probably with this image you can easily understand better this concept (from Martin Fowler website):

Like you can see we have 3 class, AlbumTitle that is a view with a textfield, AlbumPresentationModel that is the presentation model of AlbumTitle and it has the copy of the view but storing datas inside and finally the main model Album where we have the data that could be used for the whole application.
There aren’t any connection trough the views and the application model because only the presentation model has access to the whole project, so the view is only a bunch of components and custom graphics, this it means that if you have to change UI on a mobile project for a different device, changing the views and anything else, you will have done your job.
In fact with this easy technique you perfectly solve our problem and you should create the same content for different devices changing only the views.
Probably your application in different devices will have the same functionalities but with a different UI dedicated for the OS is running on.
With this sample design pattern you’ll have a solid infrastructure that will solve the big problem to port the same application in different screen sizes.
So in next paragraph we can take a look on how to organize our files project.

Manage a project for different screen sizes

Another important thing before starts the project is understand how to organize the project for different OS, in fact if you work with Adobe AIR on Android you’ll have only the XML descriptor with Android permissions described in this file, on Playbook you’ll have another XML file dedicated to this platform and so on.
So, my suggestion is to organize the project in different projects that work together.
In this image you can see how I organize it for our final scope, I’ve a common project (Runtime Shared Libraries in this case but you can use also an Actionscript or AIR project if you work with Flash for example) where I’ll put all classes that are common for different target, so in my case all the presentation models, main models, utils classes, my notification bus and views that are common for different projects like components for example.

In the target device projects I add only what I need for that device, in this case only a couple of views and assets but in big projects could be more stuff that those one:

When you have a specific behavior only for a target device, you can easily extends the common presentation model and add new functionalities or create a side class that you’ll add in the specific view.
So with this infrastructure you can solve bugs and change stuff directly on the common project and all the platforms will be ready to package the project and upload to their store. That’s cool, isn’t it?

Summary

So in this post I hope to give you some ideas on how to solve the big problem to create a common base code that could be useful for different purpose.
In next post I’ll show you how to implement it in practice, for now if you have any feedback or suggestions for the second part of this article please add a comment to this post.