Announcements

The practice final is up.
The neat ideas fair is this Tuesday, Dec. 7.
I will try to check people's presentations before class. i.e., in the time frame 10-12.
You should send me an e-mail to let me know you are presenting, so I try to check your presentation out.

Creating a simple program

Creating a Flex App involves writing a mxml file which is a XML language which may be scripted (as Javascript can be used to script HTML) using Adobe's Actionscript language (a variant of Javascript).
You then compile this code using the mxmlc compiler.
To include the compiled code into HTML file you need to use an object/embed tag

A simple MXML file (test.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       width="100%" height="100%" >   
   <mx:Button label="Hello World Button"></mx:Button>   
</mx:Application>

This could then be compiled by typing:

	
mxmlc test.mxml

This should produce a test.swf file.

Including your .swf file in a web page

To include your program in a web page you need to an object tag.

For instance, you could use:

<html>
<body>
 <object type="application/x-shockwave-flash" data="test.swf"
      width="320" height="240">
    <param name="src" value="test.swf" />
    <!-- name="movie" works as well -->
  </object>
</body>
</html>

Making an Air App

To make an Air App out of the last example first we change the Application tag to WindowedApplication:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
      width="100%" height="100%" >   
   <mx:Button label="Hello World Button"></mx:Button>   
</mx:WindowedApplication>

Then we compile it using amxmlc rather than mxmlc:
```
amxmlc test.mxml
```

Application Descriptor File

In order to package our swf file as an app we need to create a basic application descriptor file.

If our swf file is name.swf, typically, this will be called name-app.xml.

<?xml version="1.0" encoding="utf-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
  <id>org.pollett.CS174Fall2008.HelloWorld</id>
<filename>test2</filename>
  <version>1.0</version>
  <initialWindow>
     <title>Hello World Example</title>
     <content>test2.swf</content>
     <visible>true</visible>
  </initialWindow>
</application>

id just needs to be unique to tell if our app is already installed.
To run the app using the debug launcher one could then type:
```
adl test2-app.xml
```

Creating and Signing Your App

As part of the app creation process you need to get your app signed.
Usually, this would be by a trusted third-party (read cost you $$$) such as Thawte or Verisign.
This signature is checked when the app is actually installed.
For the purposes of this class I will show you how to create a self-signed app.
First you need to create a self-signed cert that meets RSA's pkcs12 standards:
```
adt -certificate -cn ChrisPollett 1024-RSA mytest.p12 secret
```
secret here is the password being used.

Next we compile our app using the .p12 file:

adt -package -storetype pkcs12 -keystore mytest.p12 \
    test2.air test2-app.xml test2.swf

Clicking on the .air file produced will install the app (at least on a MAC).

Quiz

Which of the following statements is true?

Squid can be used for proxying, reverse proxying, and load balancing.
For a web-site to be scalable it suffices that it can accommodate increased usage and it can accommodate an increased dataset.
The latest versions of Chrome, Safari, Firefox, and IE all support the same encodings for the HTML 5 video tag.

Components

Flex applications are built-out of components.
There are visual components such as Containers and user interface controls
There are non-visual components such as data components and utility components.
Let's take a look at these.

Containers and UI controls

A container is a component that can be used to hold other components and might be used for layout purposes:
```
<mx:VBox>
	<mx:Button label="Button 1" />
    <mx:Button label="Button 2" />
</mx:VBox>
```
There is also an HBox tag, tags for gridlayout, tiles, etc.
Layouts can be nested.
UI Controls. We already seen Button. There are many others such as Label, ComboBox, Text, TextInput, etc.
Properties of a Control can be set using either: tag attributes, nested tags, or ActionScript.
You often give tags id attributes. The UI control object can then be used elsewhere as a variable (data binding) provided the id name is put in {}.
The next slide has an examples.

Example 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  width="100%" height="100%" > 
<mx:VBox>
    <mx:HBox>
        <mx:Button> <mx:label>Button 1</mx:label></mx:Button> 
        <mx:Button label="Button 2" />
    </mx:HBox>
    <mx:ComboBox>
        <mx:dataProvider>
             <mx:ArrayCollection>
                  <mx:String>Item 1</mx:String>
                  <mx:String>Item 2</mx:String>
                  <mx:String>Item 3</mx:String>
             </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:ComboBox>
    <mx:Text text="hello" width="100" height="15" />
     <mx:Text text="{input.text}" width="150" height="20" />
    <mx:TextInput id="input" />
</mx:VBox>
</mx:Application>

CSS

Styles can be used in mxml in a similar fashion to HTML.
The style tag is <mx:Style> (potentially with a different prefix) not <style> however.
External styles can be includes using <mx:Style src="stylesheet.css" />
To set the style of an element one sets its styleName attribute.

Example with CSS and also of TextArea and Comments

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  width="100%" height="100%" >

<!-- styles can be used with Flex (notice html style comment) -->
<mx:Style>
   /*     C style comment   */
   .red 
   {
       color: red;
   }
</mx:Style>  
    <mx:VBox>
        <mx:TextArea> <mx:text>This is some text.</mx:text></mx:TextArea> 
        <mx:TextArea width="400" height="100">
            <mx:htmlText><![CDATA[This is a  test <b>with html </b>.]]></mx:htmlText>
        </mx:TextArea>      
        <mx:Button label="Button" styleName="red" />
    </mx:VBox>       
</mx:Application>

What CSS Example Looks Like

Screenshot of an application with two textareas and using css to style a button red

Actionscript

Actionscript is a supped up version of Javascript.

It can appear inline as when we did things like last day:

<mx:Text id="out" text="{'the output is:' + someid.text}" />

It can be included in your mxml document between <mx:Script> </mx:Script> tags
External scripts can also use be used by doing:
```
<mx:Script src="my_script.as" />
```

Simple Actionscript Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  width="200" height="200" >
<mx:Script>
function imclicked()
{
 var a = 30;
 mx.controls.Alert.show('The world needs more lerts '+a);
 /*since this function does not specify types 
 and say what package it is in, it will generate warnings */
}
</mx:Script>
<mx:Style>
  Canvas { background-color:red; }
</mx:Style>
<mx:Canvas width="150" height="150"> 
<!--Notice how you can use a Canvas layout for positioning --> 
  <mx:Button id="bealert1"  x="20" y="30"
     label="Be A Lert 1" 
     click="mx.controls.Alert.show('The world needs more lerts'); " />

  <mx:Button id="bealert2"  left="10" bottom="40">
  <!--right and bottom based on parent container -->
      <mx:label>Be A Lert 2</mx:label> 
       <mx:click>imclicked();
       </mx:click>
   </mx:Button> 
</mx:Canvas>      
</mx:Application>

What Alert Example Looks Like

Screenshot of an application with two buttons which display alerts

What's new in Actionscript versus Javascript

Actionscript supports packages and classes.
Packages are used to give a namespace for a collection of classes.

General format of a class definition looks like:

package my_package
{
    import some_package; //a list of packages
    public class MyClass extends Something
    {
       // some var declarations
       public function MyClass(){} //constructor
       /* other methods which could be static,
         public, private, protected 
         (available to subclass), 
         internal (available within package)*/
    }
}

The Alert on the previous slide shows how we could invoke a method once it is defined.
In Actionscript, variables can be declared either with or without a type:
```
var  my_variable:Number;
```
Some example types: String, Number, int, uint, Boolean, Date, Array, XML.
Function and method declarations can also specify input and return types:
```
internal function my_method(my_arg:int) : uint {/* body */}
```

Event Handling

Events can be handled by either adding a handling like we did when we did the alert example a couple of slides back or by using something akin to the DOM 2 event model we discussed with Javascript:
```
button.addEventListener(MouseEvent.CLICK, clickHandler)
function clickHandler(evt:MouseEvent):void {/*code */}
button.removeEventListener(MouseEvent.CLICK clickHandler);
```

Working with Media -- Images

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  width="400" 
    height="400" initialize="init()" >
    <mx:Script>
      <![CDATA[
        [Embed(source="me3.jpg")] /* this add me3.jpg directly into the .swf file that will be produced
                     other two images below come from external files */
        private var meAsset:Class; //will represent image file above
        private function init():void { me3.source = meAsset; }
        ]]>                                                    
    </mx:Script>
    <mx:HBox>
        <mx:Image source="me1.jpg" width="150" height="150"/> 
        <!-- need to use webserver not local filesystem -->
        <mx:Image id="me3" width="150" height="150"/> 
     </mx:HBox>   
     <mx:Image id="image2" autoLoad="false" width="150" height="150" />
     <mx:Button label="Load Image" click="image2.load('me2.jpg');" /> 
</mx:Application>

The Embed directive can also be used to create skins for Buttons, etc. You can set style properties: down-skin, up-skin, and over-skin. You can set the icon attribute of the button as in icon="@Embed(my.gif)".

Image Example Before and After Click

Screenshot of flex app showing dynamically and statically loaded images

Video

<?xml version="1.0" encoding="utf-8" ?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400" >
       <mx:Panel title="My Video" >
            <mx:VideoDisplay id="myViewer" source="fred_ott.flv"
                  volume="{volumeControl.value}" /> 
            <!-- note the source is an http source; trouble if play on filesystem -->
            <!-- you should look up Fred Ott -->
            <!-- you can create .flv files using ffmeg (Mac, Linux, Windows).
                   Or google for your favorite other tool. -->
            <mx:Label text="{myViewer.playheadTime.toPrecision(2)}" />
      
            <mx:ControlBar>
                 <mx:Button label="Play" click="myViewer.play();" />
                  <mx:Button label="Pause" click="myViewer.pause();" />
                  <mx:Button label="Stop" click="myViewer.stop();" />
                  <mx:HSlider id="volumeControl" maximum="1" width="80" />
            </mx:ControlBar>          
     </mx:Panel>
</mx:Application>

SoundEffect and Sound can be used to play sound. (See 2008 slides for more info)

Simple Flex and Air Apps

Outline