Friday, January 8, 2010

ELIPS Studio: Mobile Application Developement using Adobe Flex Builder

ELIPS Studio 3 is a mobile application development SDK based on Adobe's Flex Builder. Using ELIPS Studio developers can quickly develop mobile applications and deploy them on any mobile platforms supported by ELIPS.

Until now if developers want to develop an mobile application they had to develop the application using various technologies (Windows Mobile, SYmbian, IPhone, Android..) for different mobiles of different manufacturers. ELIPS cuts this complexity with a single development toolkit for popular handsets. It also includes sophisticated simulator and the code it generates is compact and rapid enough to run even on low-specification, mass-market handsets.

see the supported mobile OS by ELIPS here:

http://developer.openplug.com/index.php/learn/supported-platforms

ELIPS Studio 3 is available as a plug-in for Adobe Flex / Flash Builder. It allows you to develop mobile applications using ActionScript and MXML.

For any platform, the compilation of your application to the platform format is done in 2 stages:

1. Generation of the native source code (C/C++/ASM) from your MXML/AS
2. Compilation of the native source code to executable format


If we take iPhone development using ELIPS Flex Builder, ELIPS studio will map the controls available in iPhone with Flex Controls (as we use ELIPS sdk it has only those controls/containers which are mapped/present in mobile platforms)

For all platforms except the iPhone, the above said two stages 1 and 2 are done transparently one after the other, on the same machine of course.

For the iPhone, in this technology preview, it’s different: stage 1 is done in a Windows VM in your Mac, or on your Windows PC, but stage 2 needs to be done on a Mac, using XCode, at least today.

The complete flow for the iPhone comes as follows:

- Develop in ELIPS Studio3 / Flex Builder on a PC (or a Mac, in a Windows VM, like Parallels or VMWare)
- Within Flex Builder, build for the iPhone target. This will actually generate an XCode project with the C++ files from your MXML/AS
- Copy the generated sources with the XCode project to a Mac (if you were working on a VM, simply put it in a shared folder of your VM)
- Open it in XCode, build, simulate, debug, deploy on the Mac


So How to start using ELIPS???

Download the latest version of ELIPS Flex sdk setup from here:

http://developer.openplug.com/index.php/download

Then Run the file 'ELIPS_STUDIO_***.exe'

It has its own sdk (we had to use ELIPS flex SDK which was developed on Flex SDK to develop mobile application) and maps/imports this sdk and some options into flex builder.

See the other installation steps here:

http://developer.openplug.com/index.php/learn/tutorials/?videoid=3

We had to use ELIPS for flex builder. Open ELIPS for flex builder from Programs -> Open_Plug -> ELIPS Studio -> ELIPS for Flex Builder, and create a normal New AIR Project (Lets the name of the project be 'ElipsDemoPrj')



Goto Project Properties (Right Click on Project -> Properties) and go to Elips3 -> Targeted Devices and select the Devices you want the code to be generated and press "Apply".



I selected Iphone & Generic WM6 is selected default

In 'Flex Compiler' options change the 'Use a specific SDK' option to 'ElipsFlexSDK***' and click 'OK'



For further info:

http://developer.openplug.com/index.php/learn/tutorials/?videoid=20

Now in top toolbar you will find some new (3) options/icons



By pressing the '?' (first new icon) icon the Help for ELIPS sdk will open
By pressing the second icon the native code for mobile platforms will be generated from flex code
In the third option (like dropdown) you can select the platform (among those you selected in Targeted Devices) to Run

Lets start with a typical 'Hello World' example. Take a label and place "Hello World" on it., select Iphone in the dropdown in toolbar and Run the APP (like a normal Flex application using 'Run' option'), now a VM of the IPhone will run and it shows your output in an IPhone simulator




The left window (SimUI) contains some options and the right (IPhone window) window contains your output

Now press the 'Build ELIPS package for all Targeted Devices' button (middle icon in the three new icon/control in toolbar.

Two new folders 'resources' & 'output' will be created parrllel to 'src' folder. The 'output' folder contain subfolders (one folder for each targeted device we selected) and native code (each Targeted device in its native language) is created and placed in respective folders.



From the above image you can see a '.cab' file is generated for WM(windows mobie) which can be directly deployed into the mobile but for IPhone XCode project with the C++ is generated which had to be compiled using a MAC & XCode.

Visit ELIPS website:

http://developer.openplug.com/

3 comments:

  1. Hi, I need a help.

    Click Project > Properties.

    Elips3 > Targeted Devices.

    Check the first option "iPhone" and click button "Edit by device"

    What does the option "Toolchain type: Generate XCode Project" mean?

    Thanks

    ReplyDelete
  2. There is another doubt. Using only a label "hello world" I'm getting the error below:

    VerifyError: Error #1014: Class flash.events::TouchEvent could not be found.

    at mx.containers.utilityClasses::CanvasLayout/measure()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\containers\utilityClasses\CanvasLayout.as:182]
    at mx.core::LayoutContainer/measure()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\core\LayoutContainer.as:302]
    at mx.core::Application/measure()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\core\Application.as:240]
    at mx.core::UIComponent/measureSizes()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\core\UIComponent.as:3666]
    at mx.core::UIComponent/validateSize()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\core\UIComponent.as:3627]
    at mx.core::Container/validateSize()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\core\Container.as:1584]
    at mx.managers::LayoutManager/validateSize()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\managers\LayoutManager.as:507]
    at mx.managers::LayoutManager/doPhasedInstantiation()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\managers\LayoutManager.as:596]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponentGlobals$/callFunctions()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\core\UIComponentGlobals.as:173]
    at mx.core::UIComponentGlobals$/renderEventHandler()[C:\package\MySystems\ELIPS_NATIVE_3_0_1_196\FlexRuntime\ElipsFlexFramework\src\mx\core\UIComponentGlobals.as:146]

    ReplyDelete
  3. Flex Application Development- Flexdeveloper.in is a leading IT company that offer high quality flex application development, flex web applications, flex design and much more at affordable price. We also outsource flex work and flex freelance developers.

    ReplyDelete