Application Architecture

Like many of today’s developers. I started my IT career as a Flash Developer, and spend much of my time on learning new things from my senior friends, books and blogs about Flash Platform and get idea that there are lots of things to learn like Software Development Life Cycle (SDLC), Software Design Patterns, Coding Standards and many more. With expanding knowledge, I understand that architecture, frameworks and coding standards are important. Before starting discussion about application architecture, would like to share about preface for this post.

There are different technologies are available, we pick one technology, get knowledge for that, practice on that technology’. We live in technologies limitations or boundary and competing with other technologies. It is difficult enough to truly master a single platform. Of course many developers are experts in multiple languages, but mostly their knowledge and development practices of each language are different from each other.

For example, It you want to develop an application in two different languages (let say) Flex and Python. Your knowledge of Flex doesn’t give you any advantage for the Python application development. But I would like to say that knowledge of architecture or framework will help you here for the application development in both the languages. And that’s the reason behind the post on application architecture.

From a set of frameworks, I selected PureMVC as my framework of choice.

Before starting about PureMVC, let’s discuss about what is framework. As I understand Frameworkis a reusable set of libraries or classes for a software system, which follow some rules throughout the application. These rules are known as Design Patterns. So in other words we can say a framework is a collaborating set of design patterns. Frameworks are helpful as it give us the flexibility to implement the fastest solution to given problem.

Currently there are lots of discussions going on between Flash Platform & HTML5 features, development tools, and usage and development standards. But I think there is one topic ‘architecture‘ which is common and useful for all technologies or languages, application architecture/ framework is the heart of application standard, performance and scalability. Technology doesn’t matter for that. So  for the reference example, I have selected my favorite platform to explain application architecture. The Adobe Flash Platform is superb for developing rich experiences, including websites, games for web desktop and mobile users. From last few years lightweight, interactive run time has become the ideal choice for expressive media-centric web software. There is a major benefit of Flash Platform can experience as it has expanded to the desktop and well with Adobe AIR.

Goals of PureMVC

PureMVC is lightweight framework based upon well known Model-View-Controller design pattern. Main goals of PureMVC frameworks are:

• To separate application’s coding into three different tiers: model (data), view  (UI) and controller (business logic)
• For speedy implementation with scalability and maintainability
• Reduce complexity from developer

Also one major benefit of using well known formal framework is common design patterns and way of adding development. From organizational point of view, usage of such great standard produce clean coding standard of applications and reduce dependency on developers, reduce knowledge transfer time for new developer. I think it’s a best and most attractive benefit of using standard and well known framework. Here are some reasons why I like PureMVC:

• It is easy to learn, great documentation, samples and tutorials, easy to use and also easy to extend.
• It facilitates loosely coupled application architecture (Publish and Subscribe- type), scalability, maintainability and portability for you application.

Developers agree that separating an application’s code into different part based on its functionality. These separations are three major areas: model, view and controller. Let’s have a quick overview of these terms: the model is for your data, the view is for user controls, user interaction, and the controller decides how model change when view is clicked and how view should updates when model updated. You can get basic idea about PureMVC framework from below conceptual diagram:

A forth singleton Façade, simplify development by providing single interface for communication throughout application. Below is the base overview of each singleton:

• Model: manipulating the data model and retrieve data from remote services
• View: mainly refer named mediators that adapt view component.
• Controller: named mapping command classes, which are only created one needed.
• Façade: initializes core singletons (model, view and controller) and provide a single interface for communications.

Will have to use Façade and other actor classes (like Mediator, Proxy/delegate and commands), to interact with singleton as shown below:

Note: In next Part, will update sample applications implemented with PureMVC framework using different programming language.

Adobe Edge Preview 5

Adobe Edge Preview 5 introduces some new features and enhancements over previous releases, which play an important role for animation and application optimization. Edge is fully compatible with all modern browsers and can work in mobile browsers. Edge even works in Internet Explorer 9 and this latest version provides a down-level stage for browsers that do not support HTML5, which allows web developers to create animations and post them online without any fear.

Some of the new features in Preview 5 include:

1. Optimizing your content for deployment on the web
2. Down-level stage for non-HTML5 browsers by using Poster Capture feature
3. Preloader tool such as spinning wheels, for indication of animation loading. The loading event also exposed, providing information on the size and giving more control on when it’s used.
4. Cursor attributes, so that your cursor changes in appearance when user hovers a link or other actions.
5. Timeline based improvements
6. Easing functions now available on the timeline control strip, which visualizes how each of them behaves.
7. Swap images makes it easier to design with temporary or placeholder images that can be replaced later.

You can download Adobe Edge Preview 5 from here. You will get interesting information about Adobe Edge Preview 5 from below video from ADC

Enjoy RIA…

HTML5 Banner Using Adobe Edge

Now a days, RIA developers having high expectations from the new tool introduced by Adobe with the named ‘Adobe Edge’, for RIA interactive applications. Some people even say that the new change or trend in HTML5 can compete with great RIA tool like Adobe Flash. As I understand, Flash capabilities are more powerful and more extendable then the current versions of HTML5. At the moment, I don’t see any competition between Flash and HTML5. I think both will have their own place in the market.

Adobe Edge is new promising tool that provides an environment to create HTML5 animations through a timeline (something like flash timeline) and interface using interactive methods and functionalities. It can makes HTML5 animations very easy for designers who do not have experience with coding, and allows them to create HTML5 animation without writing a single line of code.

In this post, I would like to show you how to create a simple HTML5 banner animation using Adobe Edge. Before staring the tutorial, you can download Adobe Edge latest from Adobe Labs.

Assuming that you have some basic idea about animations with Adobe’s other tools.

Step 1

Let’s start by opening Adobe Edge. Open New File from File menu. Set document width and height properties from Properties panel on left side. Here set Width to 600 px and Height to 200 px. Also you can set title of the document from the Properties panel.

Step 2

Now from the Properties panel, open the background color picker and set the background color. And set the Overflow to Hidden to hide the objects that are off screen and also you can set Autoplay options.

Step 3

Choose Import from the File menu and open Edge icon type image and place it in the banner as shown below and set the Edge icon image Width to 180 px and Height to 160 px.

Step 4

Use Text tool, type “Adobe Edge” and set dimension and font size of the text area.

Step 5

Now you will animate the Adobe Edge icon and text through the timeline. The timeline in Adobe Edge is similar to other Adobe applications, such as After Effects. When you create an object on the stage you will find that a separate layer is created for it in the timeline. Each layer has sub layer that includes the properties of each layer. In order to create the animation, we will need to create keyframes that represent the change in layers content properties like position. As shown in below screen you can change the translate X and Y position of object.

Now the time line indicator positioned at the beginning of the timeline, move the Adobe Edge icon image to top of the stage and moves the timeline indicator by a few frames and drag the Adobe Edge icon image to its final position in the stage. Apply same thing with text object. Also you will get the animation area of object by different color.

There is an interesting panel known as Elements Panel. It simultaneously servers two purpose. It exposes the document’s DOM and acts as a Library for the items or objects used in your application. The order in which elements appears in this panel is the order in which they appear in the timeline. If you move a timeline layer up or down in the layering order, that change is instantly reflected the Elements panel and vice versa.

Step 6

Save the file and you can preview it in browser by selecting “Preview in Browser” from File menu.

In this post just show how to create a simple HTML5 animation using Adobe Edge. I think the tool is very simple, it would be helpful for creating animation, especially because in HTML5, it would be more complex to create animation using manual coding.

You will get a quick overview of the output folder from below screen. It contains the Adobe Edge included JavaScript files in “edge_includes” folder, application related JavaScript files and “images” folder contains assets used in the application.

Adobe Flash and Facebook

As we know that Adobe Flash and Facebook provide superb solution for building rich and social experiences on the web. And there is some useful informations for developers to build applications using the two great platform.

You can refer the article for Facebook application development using Flash Builder from here.

I think there is no need to say about number of people everyday to connect with Facebook and share there views and ideas with world !! Adobe Flash and Facebook together allow some interesting things like share your ideas with friends, have some fun with superb games etc.

You will get the Adobe ActionScript 3 SDK for Facebook Platform from here.

For more references of Flash and Facebook application development you can download sample code from the list as described below:

- Display information on currently logged-in user – Download Sample Code
- Display list of photo albums – Download Sample Code
- Browse thumbnails of Facebook photos – Download Sample Code
- Display list of events – Download Sample Code
- FQL Query – Download Sample Code
- GraphAPI – Download Sample Code
- Up2 – Download Sample Code
- Friends List With Flash – Download Sample Code
- Friends List With Flex – Download Sample Code
- Media Upload Demo with AIR – Download Sample Code
- Media Upload Demo with Web – Download Sample Code
- News feeds Demo with AIR – Download Sample Code
- Web IFrame Demo – Download Sample Code

Enjoy RIA..

New communications protocol RTMFP Service

Adobe introducing the service known as Cirrus. Cirrus (previously codename Stratus ) is technology preview service for developers to build applications using end-to-end peering capability features in Flash Player 10.1.

Flash Player is already the market leader in online video distribution over the web. With the introduction of RTMFP and advanced media compression technologies, Flash Player 10 is well positioned as the leader in real-time communications as well.

Using Cirrus you can build some interesting application like :

• Video chat application
• Multi-player games
• Voice Over IP

You will get more interesting information from here.

Enjoy RIA…

Apple Relaxes Restrictions for Flash Apps

Great news from Apple, for Flash Developers. Apple reversed and announced that it has lifted restrictions on third-party developers guidelines has direct implications for Adobe’s Package for iPhone, a feature in Flash Professional CS5 authoring tool. The feature enable Flash Developers to deliver applications for iOS devices.

You can get more information from Statement by Apple

“We are continually trying to make the App Store event better. We have listened to our developers and taken much of their feedback to heart. Based on their input, today we are making some important changes to our iOS Developer Program license in section 3.1.1, 3.3.2 and 3.3.9 to relax some restrictions we put in place earlier this year.

In particular, we are relaxing all restrictions on the development tools used to create iOS apps, as long as the resulting apps do not download any code. This should give developers the flexibility they want, while preserving the security we need.“

You can get some interesting information related to smartphone market shares here.

So friends, Enjoy RIA… 

Features of Next Version of Flex… Hero

It’s really rocking news for Flex Developers. Adobe introduces the next release of the Flex SDK, code-named Hero. The Hero release has three main base themes:

• Multi-Screen Development

It will be great for developers if have an single framework to build applications that target the web, desktop or mobile devices. The Hero release of Flex will enable developers to continue to create application experiences that translate well across platforms, in addition to making it easy to build applications that work well on a wide variety of mobile devices. Hero will augment a number of existing Flex components with mobile- and touch-optimized skins and functionality and will also add new components that support mobile-specific UI patterns. Developers already familiar with core Flex concepts like data binding, MXML and dynamic layout will be able to quickly leverage that knowledge into building applications that can target numerous mobile devices.

You can get more information about the new features in the upcoming release version of Flex from Flex and Mobile Whitepaper and feature specifications.

• Spark Maturation

In Flex 4 an interesting component called Spark was introduced which allows for designers and developers to separate component logic from behavior and visuals of the component. Spark has proven to be a key addition to the Flex framework, and the Hero release focuses on building more Spark-based components as well as providing new Spark capabilities to existing Flex features. Some of the new Spark components being offered in the Hero release include Spark Form, Spark Image and Spark DataGrid controls. These new Spark components not only provide parity with the previous MX versions, but also expose capabilities that allow for more modern component designs.

• Large-Application Development

As people use Flex to build much more complex interesting and mature applications so the framework should support these efforts. The next version of Flex aims to improve the compilation experience and memory consumptions for large applications. And also runtime shared libraries feature improvements introduce in Hero.

You can get more information from here.

So friends, Enjoy RIA…

Flash CS5 Features and Apple

War never ends between Apple and Adobe. Apple play a game with Adobe with the recent change to the iPhone Developer Program License Agreement it’s now clearer. You can see the details from “The Apple-Adobe War Escalates: Using Flash to Build iPhone Apps Banned”:

There are the new wording of the policy:

“3.3.1 – Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).”

First of all, the ability to package an application for the iPhone or iPad is one feature in one product in Creative Suite. CS5 consists of 15 industry-leading applications, which contain hundreds of new capabilities and a ton of innovation. We intend to still deliver this capability in CS5 and it is up to Apple whether they choose to allow or disallow applications as their rules shift over time.

You can get nice view from Adobe CTO Kevin Lynch.

I think after analysis of  the small list of CS5 features and videos, you can think who win the war :

• CS5 For Design
• CS5 For Video Production
• CS5 For Web
• CS5 For Photography

Let me focus on the features in Flash CS5.

1)  Text Engine: In CS5 text will be handled in better and effective way and some nice features like advance styling, columns, right to left options etc.

Also introducing user friendly font embedding option.

2) Code Snippets Panel: This will provides a very fast access for common ActionScript code. Great option for designers also now they can also deal with normal task very easily.

3) iPhone Capabilities: Flash Pro CS5 introduces an application packager that can be used to deploy flash applications on iPhone.

4) Document Property Inspector: Now it also displays the size of all SWF files generated during movie operations like Test Movie, Publish or Debug Movie.

5) Improved component: Some nice updates for Flash Components like

- FLVPlayback component equipped with new skins and an option for its live preview on Stage

- Cue Points in Video are now easy to add.

6) XFL file format Flash: By default now flash files will be saved in XFL format internally. As the format name denotes, its an XML format which will result in an improved exchange of data with the other Adobe applications.

7) Uncompressed XFL file and FXG file format: Uncompressed XFL structure will now make it possible to analyze the parts of the flash file and thus working with the source control systems like Visual source safe.

FXG file format allows CS5 to export and exchange graphics with the other Adobe applications with a complete compatibility.

8 ) New Decorative Drawing tool: CS5 provides several new effects with the newly added Decorative Drawing tool which can be great

9) New Properties for IK bones: New properties like Spring properties have been added to IK bones to create realistic physics effects for bone animation.

10) Integration with Photoshop CS5: Graphics of Flash CS5 can be edited in Photoshop CS5 and so they can be exchanged between the both directly.

11) Coding and Formatting Improvements: These are some improvements for coding and formatting

- Code completion for custom and build-in Classes has been added for ActionScript 3.0.

- Custom classes are automatically added to the application using import tag.

- While you script, closing brackets { } are automatically added.

12) Better integration with Flash Builder: Improved workflow between flash CS5 and Flash Builder makes it easy for developers and designers to use both the products together.

13) Updated AIR Publish Settings: The user interface and Installer Settings Window for AIR Application have been changed to make it more user friendly.

14) New templates added for common type of project templates.

15) New JavaScript API’s are added for motion tweens.

16) Live Services are accessible from within the Flash authoring environment.

I think there are a several improved options for developers and designers prospective. So it will be a rocking environment.

Enjoy RIA…

Adobe Flash Player 10.1 Release

Adobe Flash Payer 10.1 release candidate is first runtime release of the Open Screen Project which enables uncompromised web browsing of applications, content and video across devices, with the support of broad range of mobile devices, including smartphones and other internet-connected devices.

You can get more details about the release from here.

For more details on new features and enhancements in Flash Player 10.1, see the complete list of New Features.

You get some interesting improved flash player support from here.

You can enjoy the release candidate from here and enjoy the Flash Brings the Web to Life demo from here.

Enjoy RIA… 

New functionality for Text Component

Yesterday, I got an update of preview release of  Squiggly, a good feature for adding spell checking engine for Adobe Flash Player and AIR.  By using its library you can easily add spell checking functionality in any Flex 3 or Flex 4 based text controls.

You can enjoy the demo application from here.

Get the superb feature package from here.

Enjoy RIA…