Rich Internet Applications

Open Laszlo: This is an open source platform for creating web applications with the user interface capabilities of desktop client software. This is an open source program (free) but is written in XML and java script and then compiled to Flash. This is a cheaper way of constructing RIA without the need of Adobe software just the flash player.

Ajax: This is a group of inter related web techniques for creating interactive web applications. This is a cross platform technique which can be used on many different operating systems, web browsers and computer architectures; it is based around open standard technology such as JavaScript. Ajax can be used in conjunction with technology such as Flash or used with most other technologies. There is an Ajax library that can be added to the Flash platform also.

Silver Light: Silver light is a technology developed by Microsoft which is a’ cross browser, cross platform and cross device plug-in for delivering the next generation of .net based media experiences and rich internet applications for the web.’ [http:6]  Silver light is new technology which is hoping to bring Microsoft into the market of RIA. It is a web browser plug-in which supports RIA but is in competition with Adobe Flash and other plug-in clients. Silver light is designed to work with a language XAML which is scriptable in JavaScript. One main advantage over Flash is that it is more searchable over the web.

These technologies summarised give a small overview of some of the main technologies competing in the RIA market. They all base themselves mainly around the open standard JavaScript language. Unlike this, Adobe use their own scripting language and have a whole framework in which RIA’s can be developed,

They are all emerging into the RIA technology world., with Adobe looking to be the industry’s leading technology at this moment in time with a very strong and secure cross browser platform and framework for building and viewing RIA development as shown in figure:1. Further sections in this report focuses on this technology to use certain parts such as the action script 3.0 development to create a web application.

This diagram shows where RIA’s lies in the user interface experience:

Figure: 2, where RIA lies [http:7]

As explained there are different technologies which are expanding and trying to take lead in the technology of Rich Internet Application development.  Building an RIA can be shown by looking back at figure:1 and understanding the different layers that are needed for such a development. Adobe provides all the necessary tools for the creation of each of the layers that can support a full RIA package.

There are some good examples of popular RIA developments over the net:

Google Maps:

There is many thousands of other RIA on the web. It is a very up and coming technology giving the user a new feel for the web. Because of the advantages of RIA’s industries are very keen to get hold and incorporate their company into the technology.

2.2 Current Stance in the technology

RIAs are still in the early stages of development and user adoption. There are a number of restrictions and requirements that remain still when it comes to the deployment of such developments

Web standards: Differences between web browsers can make it difficult to write an RIA that will run across all major browsers.

Development tools: Some  and products such as ,  and Microsoft  provide an integrated environment in which to build RIAs.

Browser adoption: Many RIAs require modern  in order to run. Some RIAs use techniques such as  for client-server communication, and advanced  techniques to enable the rich . This would mean that an advanced JavaScript engine would be needed

Accessibility: Additional interactivity may require technical approaches that limit applications' .

User adoption: Users expecting standard web applications may find that some accepted browser functionality may have somewhat different behavior.

2.3 Distributed Rich Internet Applications

A distributed application is one where a part of a system is running in separate runtime environments. In the case of an RIA the client would be separate from say the server side part of the system and separated over a network.

Distributed RIA is just a part of what RIA’s can do. It is a way of separating up the computing program and in a way parallel working the components. A good example of an RIA distributed system would be one where a database is held in a specific place and different client machines could access it via PHP from the front end FLEX build.

3.0 Design/Implementation

Previous the concept of Rich Internet Applications has been investigated and how they are structured in their framework. Throughout the next sections there will be references to RIA’s because the programming language used was developed to create interactive web applications. As explained due to time limitations and constraints on development techniques what is proposed to be developed is a web application that is based around the new Adobe Flash programming language Action Script 3.0. This language is supported by both Flash CS3 and Flex 3. Used within the development of the following application is Flash CS3. What is proposed is a template for a multimedia based application one which can be further implemented to combine and allow the interaction of RIA’s and other Flash based files.

In the design section there will be a design probably based around the idea of importing SWF files (ones which are movies rendered by the flash API) to the stage of a main SWF.

3.1 Requirements

This requirement section is based mainly around what is required of an RIA in general. A set of requirements is put together to what a RIA would contain. Post to this a set of requirements is placed together to what the application developed in the implementation section will need to make a template for an action script 3.0 application.

Figure: 3 - Requirements Catalogue

4.0 Design

Looking at the requirements section it was based around what requirements would be needed for an RIA in general. The problem with this report is that time is not on the developer’s side and because of this it is going to be difficult to implement any form of server side scripting as well as a huge amount of interactivity between the applications and user. What is going to be done however is to develop an application to showcase a new technology. What has been chosen in this development is Action Script 3.0. The application proposed will build a web site combining a Flash development using CS3 with actions script 3.0 languages to make a multimedia based application.

4.1 Colour Scheme

The choice of colour for the proposed application was of just using standard web colours. Because the application was not aimed at an end user and rather based as a template for action script 3.0 development any colours that are contained could be changed later on.

Colours chosen however were:

Black – For background

Red – Rollover on buttons

Grey – buttons background / footer background

White – For writing

These colours were combined throughout the applications in the external swf’s as well as the main swf.

4.2 Page Layout/ Structural Dimensions

Below is how the page layout will hopefully look with a blend of neutral colours.

Figure: 4 -  Design

When the website is published it will be designed so that it fills the screen.

Each of the SWF files that will be imported will take the dimensions:

800 x 400 pixels. This gives a nice standard size for the screen when importing pages.

The main template itself will be scaled to fit the page using the action script programming language.

4.3 Template

Figure:5 -  Website template

This is the proposed template with any external SWF files being imported to the center of the stage. With the size 800 x 400 px they should fill the space sufficiently.

4.4 Buttons

The buttons for the page are designed as a standard based flash button would be. They have four states: normal, rollover, clicked. One button has been created and duplicated via action script and XML to place below in the footer.

The button has been designed from scratch as seen in the implemented section:

Normal                        Rollover/Clicked        Roll Out

  

5.0 Implementation

From the previous section the application proposed was developed. The software package used as already discussed was:

• Flash CS3 – Using action script 3.0

There is also an amount of action script 2.0 within the application. This being due to the limited amount of knowledge of action script 3.0. On the CD contained with this report is the code which has been annotated. There will not be much code contained in this section apart from small snippets which may be necessary in explaining certain aspects of the implementation.

5.1 Hierarchical Chart. Site structure:

Below are the names of the files that are contained on the CD included with this report:

The index document is the site published to the browser.

The bottom_menu.swf file is the main template which imports the external SWF. The other SWF files are the movies that are imported to the template.

Within the ‘COM’ folder is all the code that is used throughout the development. There is an action script file called’ main’ which contains all the code for creating the template. There three other AS files which are pre designed AS3 classes which help in various rolls of the development, such as Tweening, and the XML import as well as one providing a global variable. These are all annotated and under the relevant folders:

A hierarchical chart is shown below

Figure:6 -  Hierarchical chart of web pages

5.2 SWF Files

There is a lot of action script code behind the ‘main.as’ file which is linked via the ‘document’ class on the stage to the ‘bottom_menu.swf’ page. This document provides all the action script necessary for the development of the site. As well as this main site some small applications have been developed to import into the stage to prove that the template is working:

Figure:7 -  Screen shots of SWF files

Home.swf

Gallery.swf

Thanks.swf

The previous three screen shots just provide a simple swf file with filled backgrounds and some text just to prove that they can be imported into the template. The following two now give a contact form and an XML news feed. These were put in to show how action script 2.0 and 3.0 can both be used with

Contact.swf

News.swf

This swf is an example of an action script 2.0 news feed that was built in order to show how it can be imported to the stage of the A3 template.

From the previous movie files it can be seen that there is not an awful lot of contact to the files. The main idea of this development was to use the new language action script 3.0 and to create an application which could import external SWF files. This has been achieved. In achieves it by using an XML class. The code for this class can be found in the ‘com’ folder on the CD. The XML for each of the pages is shown below:

Figure:8  xml for page buttons

<menuitems>

 

        <item>

                <title>HOME</title>                

                <externalURL>home.swf</externalURL>

        </item>

        

        <item>

                <title>NEWS</title>                

                <externalURL>news.swf</externalURL>

        </item>

        

        <item>

                <title>GALLERY</title>                

                <externalURL>gallery.swf</externalURL>

        </item>

        

        <item>

                <title>CONTACT US</title>                

                <externalURL>contact.swf</externalURL>

        </item>

        

        <item>

                <title>THANKS</title>                

                <externalURL>thanks.swf</externalURL>

        </item>

 

</menuitems>

The XML is loaded in the main.as file as a function:

Figure: 9 XML Class function- action script code

private function _loadXML():void {

                        

                        //xml_path

                        _Xmlmenu = new Xmlclass("data/xml/main_menu.xml");        

                                                

                        //xml loading listener/ dispatchEvent in the xmlClass

                        _Xmlmenu.addEventListener("xmlLoaded",OpenOk);

There is a set of functions below this script then that sets the buttons to be targeted by the XML and positioned on the stage. Events are added to the button for when they are ‘onrolled’:

private function onRollover(pEvt:MouseEvent):void{

                        (pEvt.currentTarget).gotoAndPlay("rollover");                

                }

                        

                private function onRollout(pEvt:MouseEvent):void{

                        (pEvt.currentTarget).gotoAndPlay("rollout");

                        

                }

The application is set up so that external URL links can also be added or SWF files. This code imports the first SWF file that is in the XML via the class:

_contentMC.addChild(loaderMC);

                                loaderMC.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);        

                                TweenLite.to(_contentMC, 1, {alpha:1});

It also uses the Tween class from  to give the motion tween of the fade in and out of the SWF.

6.0 Evaluation

Looking at what has been developed to the requirements of what an RIA should be, there is a big difference. The application developed is more of a multimedia based application with the use of motion tweens for example for effects. But as explained the process of the application developed was mainly to show the use of action script 3.0. Everything was built from scratch in the AS3 template from the buttons to the XML document contained. It does give a clean efficient demonstration of action script 3.0 programming in Flash CS3.

However the overall design of the application is not very appealing. The structure of the site is quite rigid and mapped so that it gives the user an ease of control. It could contain a lot more use of graphics such as logos etc to make a more structured website. For the purpose of this report however it does put together an easy editable template for building an action script 3.0 website.

Compared to an RIA the application develop doesn’t really meet the framework as shown in the concept section. Because of the programming language used however it could be used as a front end client to support RIA components.

The site was built specifically to import SWF files. This gives a great advantage which allows Flash files which have already been implemented to import to the center of the stage. This could be a file containing a server side script linking via PHP to a database for example.

Overall the application meets the needs of what was wanted in the design and meets the requirements of this development. It doesn’t meet the criteria and requirements however for a RIA but does use a powerful object orientated language to help in the development of rich internet applications, which are now a need in the overall web experience.

To be improved this application could contain a lot more SWF files each with interactivity to possibly server side script. Parts of the application could also be developed in different software packages such as Flex and could be made to look more desktop appealing. This application designed gives a template to use with future development of RIA components.

7.0 Test

On the CD provided are all the necessary documents to view what has been explained and created in the previous sections. The flash document has been published and can be viewed through the index.html file.

Once clicked will open the website:

8.0 Bibliography

[http:1],

 ,

Accessed 5th June 2008

[http: 2],

 ,

Accessed 5th June 2008

[3], Digital Web Magazine, 2008 URL:

[http: 4], 

,

accessed 5th June 2008

[http:5],

 ,

accessed 5th June 2008

[http:6],

 ,

accessed 5th June 2008

[http:7],

 ,

accessed 5th June 2008

9.0 Appendices

Screen shots of the website

Index.html

Home.swf

News.swf

Gallery.swf

Contact.swf

Thanks.swf