PES SCHOOL OF ENGINEERING
Hosur Road ( 1 km Before Electronic city), Bangalore-100
Test-2
Subject : Web 2.0 and Rich Internet Applications (07MCA556) Date : 07-10-2011
Department : V SEM MCA Duration: 1 ½ hour
Name of the Faculty: A.D. Ashwini. Max marks: 50
PART A
Answer any SIX Questions. 6 X 5 = 30.
1. What is Flex? Write the features of it.
2. a. What's the difference between a "Component" (New –> MXML Component) and a
"Module" (New –> MXML Module)
b. Explain MXML in detail.
3. Design a login page using only action script and display username using alert.
4. Write in detail about Action script.
5. Write a program using action script to implement inheritance concept.
6. Write a program using action script to implement interface concept.
7. What is the difference between function expression and function statement explain with
an example.
8. Write a program using action script to implement Exception concept.
PART B
Answer any TWO Questions. 2 X 10 = 20.
1. Write a program to implement tree control using xml and arraycollection.
2. Write a program to implement Data Grid, select the name from the grid and display on the
label and create a toggle button to clear the label.
3. Explain application life cycle, Differentiating between Flash player and Framework.
SOLUTION SET
1. What is Flex? Write the features of it.
Flex is a highly productive, free, open source framework for building expressive mobile, web, and
desktop applications.
Flex allows you to build web and mobile applications that share a common code base, reducing the
time and cost of application creation and longer term maintenance.
Flex provides a modern, standards-based language and programming model that supports common
design patterns.
MXML, a declarative XML-based language, is used to describe user interface layout and
behaviors, and the object-oriented ActionScript® 3.0 programming language is used to create client
logic.
Flex also includes a rich component library with more than 100 proven, extensible user interface
components for both web and mobile applications, plus an interactive Flex application debugger.
Using the Flex framework you can build and compile to the .swf format.
The compiled .swf file is an intermediate bytecode format that Flash Player can read.
Flash Player 9 introduces a new virtual machine called AVM2.
With AVM2, .swf content is no longer interpreted.
Rather, it is compiled (the equivalent of just-in-time compilation) and run such that it can take
advantage of lower-level computing power.
This is very similar to how Java and .NET applications work.
The Flex Framework
The Flex framework is synonymous with the Flex class library and is a collection of ActionScript
classes used by Flex applications.
The Flex framework is written entirely in ActionScript classes, and defines controls, containers, and
managers designed to simplify building rich Internet applications.
2. a. What's the difference between a "Component" (New –> MXML Component) and a
"Module" (New –> MXML Module)
Modules are compiled into SWFs and loaded at runtime with ModuleLoader, whereas MXML components
are compiled into an application. From the Flex docs:
Modules are SWF files that can be loaded and unloaded by an application. They cannot be run
independently of an application, but any number of applications can share the modules.
Modules let you split your application into several pieces, or modules. The main application, or
shell, can dynamically load other modules that it requires, when it needs them. It does not have
to load all modules when it starts, nor does it have to load any modules if the user does not
interact with them. When the application no longer needs a module, it can unload the module to
free up memory and resources. [...]
Modules are similar to Runtime Shared Libraries (RSLs) in that they separate code from an
application into separately loaded SWF files. Modules are much more flexible than RSLs
because modules can be loaded and unloaded at run time and compiled without the application.
b. Explain MXML in detail.
MXML is a declarative markup language used to create the user interface and to view portions of
Flex applications.
As the name implies, MXML is an XML-based language.
the structure of MXML will be familiar like XML or HTML.
MXML uses tags to create components such as user interface controls (buttons, menus, etc.), to
specify how those components interact with one another and with the rest of the application,
including data sources.
3. Design a login page using only action script and display username using alert.
Example program.
4. Write in detail about Action script.
ActionScript
:
ActionScript is the programming language understood by Flash Player and is the fun-
damental engine of all Flex applications. MXML simplifies screen layout and many
basic tasks, but all of what MXML does is made possible by ActionScript, and
ActionScript can do many things that MXML cannot do. For example, you need
ActionScript to respond to events such as mouse clicks.
Although it is possible to build an application entirely with MXML or entirely with
ActionScript, it is more common and more sensible to build applications with the
appropriate balance of both MXML and ActionScript. Each offers benefits, and they
work well together. MXML is best suited for screen layout and basic data features.
ActionScript is best suited for user interaction, complex data functionality, and any
custom functionality not included in the Flex class library.
ActionScript is supported natively by Flash Player, and does not require any addi-
tional libraries to run. All the native ActionScript classes are packaged in the flash
package or in the top-level package. In contrast, the Flex framework is written in
ActionScript, but those classes are included in a .swf file at compile time. All the Flex
framework classes are in the mx package.
5. Write a program using action script to implement inheritance concept.
Inheritance:
class Shape
{
public function area():Number
{
return NaN;
}
}
class Circle extends Shape
{
private var radius:Number = 1;
override public function area():Number
{
return (Math.PI * (radius * radius));
}
}
class Square extends Shape
{
private var side:Number = 1;
override public function area():Number
{
return (side * side);
}
}
var cir:Circle = new Circle();
trace(cir.area()); // output: 3.141592653589793
var sq:Square = new Square();
trace(sq.area()); // output: 1
function draw(shapeToDraw:Shape) {}
var myCircle:Circle = new Circle();
draw(myCircle);
// Base.as in a folder named foo
package foo
{
public class Base
{
public var str:String = "hello"; //
change public on this line
}
}
// Extender.as in a folder named bar
package bar
{
import foo.Base;
public class Extender extends Base
{
public function getString():String {
return str;
}
}
}
// main application class in file named
AccessControl.as
package
{
import bar.Extender;
public class AccessControl
{
public function AccessControl()
{
var myExt:Extender = new Extender();
trace(myExt.str);// error if str is
not public
trace(myExt.getString()); // error if str is
private or internal
}
}
}
6. Write a program using action script to implement interface concept.
Interface:
interface IAlpha
{
function foo(str:String):String;
}
interface IBeta
{
function bar():void;
}
class Alpha implements IAlpha, IBeta
{
public function foo(param:String):String {}
public function bar():void {}
}
8. Write a program using action script to implement Exception concept.
Using try..catch..finally statements
try
{
throw new ArgumentError("I am an ArgumentError");
}
catch (error:Error)
{
trace(" " + error.message);
}
catch (error:ArgumentError)
{
trace(" " + error.message);
}
try
{
try
{
trace(">");
throw new ArgumentError("some error which will be rethrown");
}
catch (error:ApplicationError)
{
trace("> " + error);
trace(">");
throw error;
}
catch (error:Error)
{
trace("> " + error);
}
}
catch (error:ApplicationError)
{
trace("> " + error);
}
Creating custom error classes
public class AppError extends Error
{
public function AppError(message:String, errorID:int)
{
super(message, errorID);
}
}
try
{
throw new AppError("Encountered Custom AppError", 29);
}
catch (error:AppError)
{
trace(error.errorID + ": " + error.message)
}
7. What is the difference between function expression and function statement explain with
an example.
Defining your own functions
There are two ways to define a function in ActionScript 3.0: you can use a
function statement or a function expression.
Function statements
Function statements are the preferred technique for defining functions in strict
mode. A function statement begins with the function keyword, followed by:
The function name
The parameters, in a comma-delimited list enclosed in parentheses
The function body—that is, the ActionScript code to be executed when the
function is invoked, enclosed in curly braces
For example, the following code creates a function that defines a parameter
and then invokes the function using the string “ hello" as the parameter
value:
function traceParameter(aParam:String)
{
trace(aParam);
}
traceParameter("hello"); // hello
Function expressions
The second way to declare a function is to use an assignment statement with a
function expression, which is also sometimes called a function literal or an
anonymous function.
An assignment statement with a function expression begins with the var
keyword, followed by:
The function name
The colon operator ( : )
The Function class to indicate the data type
The assignment operator ( = )
The function keyword
The parameters, in a comma-delimited list enclosed in parentheses
The function body—that is, the ActionScript code to be executed when the
function is invoked, enclosed in curly braces
For example, the following code declares the traceParameter function
using a function expression:
var traceParameter:Function = function (aParam:String)
{
trace(aParam);
};
traceParameter("hello"); // hello
var traceArray:Array = new Array();
traceArray[0] = function (aParam:String)
{
trace(aParam);
};
traceArray[0]("hello");
Difference between statements and expressions:
dynamic class Test {}
var myTest:Test = new Test();
// function expression
myTest.functionExp = function () { trace("Function expression")
};
myTest.functionExp(); // Function expression
delete myTest.functionExp;
myTest.functionExp(); // error
PART B
1. Write a program to implement tree control using xml and arraycollection.
Example program.
2. Write a program to implement Data Grid, select the name from the grid and display on
the label and create a toggle button to clear the label.
Example program.
3. Explain application life cycle, Differentiating between Flash player and Framework.
Understanding the Flex Application Life Cycle
1.Flex applications are essentially Flash
applications that use the Flex framework (which
is written in ActionScript).
2. The root of a Flex application is typically
SystemManager, which is a subclass of
flash.display.MovieClip, a Flash Player display
object type.
3. A movie clip is a display object type that
supports frames, which are units of a timeline.
4. SystemManager has two frames.
5.The .swf format is a progressive download
format, which means that Flash Player can access
content on frames as they download without
having to wait for the entire file to download.
6. The first frame is used to display a progress
indicator while the application loads.
7.This frame is lightweight in terms of file size so
that it can download and run almost immediately,
and it does not house much of the Flex
framework.
8.The second frame is the one in which the
application itself (along with the majority of the
Flex framework utilized by the application) is
actually housed.
9.Understanding how SystemManager works is
essential for customizing preloaders and for
effectively loading Flex applications at runtime.
10. The SystemManager instance for the Flex
application has an application property that is null
until it creates the application object on frame 2.
11. At that point, the application instance is
initialized and runs through its own startup
procedure.
12. That means that all the application object’s
internal life cycle events occur.
13. The internal life cycle events are as follows:
preinitialize
The application has been instantiated but has not yet
created any child components.
initialize
The application has created child components but has
not yet laid out those components.
creationComplete
The application has been completely instantiated and
has laid out all components.
The creation order is different for containers and
components because a container can be the parent of
other components or containers.
The following scheme shows the major events that
are dispatched during the creation of a container:
The events in more detail:
- preinitialize() is dispatched when the component
has been attached to its parent container, but before
the component has been initialized, or any of its
children have been created. In most cases, this event
is dispatched too early for an application to use to
configure a component.
- initialize() is dispatched when a component has
finished its construction and its initialization
properties have been set. At this point, all of the
component’s immediate children have been created
(they have at least dispatched their preinitialize()
event), but they have not been laid out.
- creationComplete() is dispatched when the
component, and all of its child components, and all of
their children, and so on have been created, laid out,
and are visible.
- updateComplete() is dispatched every time the
container or component characteristics are changed.
applicationComplete() dispatches events after
the Application has been initialized, processed by
the LayoutManager and added to the display list.
This is the last event dispatched during an
application startup.