Just for future reference… this is some nice stuff indeed!

Testing your Flex app with new FunFX | Ladislav Martincik – Personal website

See the syntax example on the page for a quick reference. Wow…  that’s pretty cool.

.::FunFX – Functional Testing of Flex applications

FunFX is created as a framework that will enable you to drive a Flex application through a web browser. FunFX together with for instance Test::Unit or rSpec creates a great to for testing and asserting the functionality of a Flex application.

LocalConnectionAppender can be easy configured for using with debug applications which developed for MiniDebugTarget of Flex Logging Framework.

For this You just set parameters connectionName to _mdbtrace and methodName to trace in configuration of this appender.

This is example log5f.properties config:

<configuration xsi:noNamespaceSchemaLocation="log5f.properties.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:log5j="http://log5f.org">
  <root level="ALL" appenders="minidebug"/>
  <appender name="minidebug" class="org.log5f.appenders.LocalConnectionAppender">
    <param name="layout" value="org.log5f.layouts.PatternLayout" type="Class">
      <param name="conversionPattern" value="%d{ABSOLUTE} [%p] %C{0}.%M %m" type="String"/>
    </param>
    <param name="connectionName" value="_mdbtrace" type="String"/>
    <param name="methodName" value="trace" type="String"/>
  </appender>
</configuration>

Now all log messages from application sends to MiniDebug’s based applications, for example this outputs in Flex Console:

Log messages in Flex Console.

]]> http://phlexdev.wordpress.com/2009/11/24/top-sites-in-kenya/ Tue, 24 Nov 2009 12:12:11 +0000 phlexdev http://phlexdev.wordpress.com/2009/11/24/top-sites-in-kenya/

The fiber optics connections to Asia(Seacom and TEAMS) finally arrived in Kenya. Question is, what technologies are used by the websites that receive the highest hits? I decided to do some digging, and here is a quick snapshot of the results:

Clearly, PHP currently rules on the server side, possibly because of its cost implications and the availability of quality CMS with which it easily integrates. I expect to see more of ASP and Ruby based sites as the developer community grows.

Exploitation of available Javascript utilities is limited, with jQuery and Mootools being used to add a few effects for the menus. I would expect more sites to have AJAX to enrich the user experience using such libraries as Ext Js or even Prototype.js.

As far as the duel between Adobe Flex and Microsoft Silverlight is concerned, no front runners have emerged so far.

Flex Formatter is an Eclipse Plugin to provide source code formatting for Adobe Flex code (i.e. Actionscript and MXML).

It can

• Formate code
• Indent Code
• Generate ASDoc comments
• Rearrange AS Code

Here is the screenshot tour of the installation process in Flex Builder 3

Step 1: Begin the installation from the Flex Builder Help menu item.

Step 2: This screenshot show the screen as it initially comes up. In this case you will need to change the radio button to indicate that this is a new install.

Step 3 : This screen will vary depending on the features you have installed already. You want to click on the New Remote Site button.

Step 4: This screen is showing the New Remote Site dialog, filled in with the correct information to install Flex Formatter

Name : Flex Formatter

URL : http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/

Step 5: When you first come back to this screen, if the site you added is NOT selected, be sure to select it before clicking Finish.

Step 6 : This next screen shows all of the features that are available to install.

Step 7: Click the button to accept the license agreement.

Step 8: Confirm the install location

Step 9 : Just a screenshot of the in-process installation.

Step 10 : This screen is saying that the provider cannot be verified . Ignore that and click on Install All

Step 11: Flex Builder needs to be restarted after installing PHPEclipse.

Step 12: When the Flex Builder is restarted, you will see these new buttons in the toolbar if the plugin is successfully installed.

By Default, Ctrl + Shift + F is the command to format code and Ctrl + I is the command to indent code. You can change these commands in Window->Preferences->General->Keys

Code is not formatted the way you expected ? You can change all settings in

Window->Preferences->Flex Formatting

So, in previous example we have created a simple pupUp window that pops up when we click a button in our application (http://engineeringtheworld.wordpress.com/2009/11/23/how-to-create-a-popup-in-flex/). What if we would want to close the popUp anytime user clicks anywhere outside our popUp window.

We can do that by using FlexMouseEvent’s MOUSE_DOWN_OUTSIDE event which is dispatched when user clicks outside of our pupUp window. All we have to do to make this work is add a few lines of code in popUpWindow.mxml.

We first import the FlexMouseEvent with import mx.events.FlexMouseEvent;. We add init() function when our popUp is initialized (initialize=”init()” in VBox of our MXML).

In init() function we just add event listener to the component with this.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, closePopUp);. We have to create closePopUp function which will close our popUp.

private function closePopUp(event:FlexMouseEvent):void{
PopUpManager.removePopUp(this);
}

And that is all we have to do, to make our popUp dissapear when user clicks anywhere outside of popUp window. Below is the new popUpWindow.mxml source code.

In flex data follow is very important sector to get information

and set information for any application.

XML

If you have little or no experience with XML, here is a brief description

of the most common aspects of XML data. XML data is written in

plain-text form, with a specific syntax for organizing the information

into a structured format.

Generally, a single set of XML data is known as an XML document.

In XML format, data is organized into elements (which can be

single data items or containers for other elements) using a

hierarchical structure. Every XML document has a single element

as the top level or main item; inside this root element there

may be a single piece of information, although there are more

likely to be other elements, which in turn contain other elements,

and so forth.

* XML: Represents a single XML element, which can be an XML document

with multiple children or a single-value element within a document.

* XMLList: Represents a set of XML elements. An XMLList object is used

when there are multiple XML elements that are “siblings”

(at the same level, and contained by the same parent, in the

XML document’s hierarchy).

Xml source code

<products>

<product>

<name>Name</name>

<price>Price</price>

<freeship>Free Shipping?</freeship>

</product>

<product>

<name>ffff</name>

<price>5</price>

<freeship>false</freeship>

</product>

<product>

<name>Tttt</name>

<price>15</price>

<freeship>true</freeship>

</product>

<product>

<name>Rerrr</name>

<price>25</price>

<freeship>true</freeship>

</product>

</products>

With Regards

Hemakumar.S

Since we’ve gotten so much interest on our Noah’s ARK – Design Sale, we figured we’d give you guys some more awesome parts to empty your wallets for!

From The Company:

Ark Design’s R8 Wheel is a lightweight one piece design, developed for style, performance and strength. The R8 features eight solid spokes plus a signature “Balance Ring” to provide rigidity for reduce wheel flex and strength from direct impact. The spoke and rim design are specifically developed for large high-performance brake caliper and rotor clearance. The R8 is available in 18 or 19 inch diameter and various widths and offsets to fit numerous cars. Ark Design’s R8 wheel has gone through rigorous quality testing and is JWL (Japan Light Alloy Wheel) and VIA (Vehicle Inspection Association) certified.

Alright now you know the jist of it. Now go to our Noah’s ARK -Design The Sequel sale on EvoXForums and get the details!

by @el__PAto

El 16 de noviembre del 2009 se llevo acabo en la Universidad Iberoamericana, el Latin Flash Tour. El primer dia se impartieron talleres y conferencias divididos por Área : Diseño Multimedia, Desarrollo, WorkFlows y Tips & Tricks.

La organización estuvo a cargo de Activ,Adobe e Influxis. Quisiera mencionar que Activ es un Agencia que se dedica principalmente a la capacitación y esta certificada por Adobe y a Edgar Parada que es parte de esta y tuvo mucho que ver con la organización del evento, e Influxis que fue patrocinadora de los grandes evangelistas de Adobe que nos visitaron, esta empresa se dedica principalmente al Host de video por Flash Media Server y principal partner de Adobe en ese ramo.

Ahora entrar en materia de las conferencias en el Area de Diseño multimedia se abarcaron temas como Flash Catalyst, efectos con After Effect, Actionscript 3 para animadores,por mencionar algunos.
En el área de desarrollo se tomaron en cuenta temas de Flash sobre mobiles, Flex, Flash Media server y Air.

En el area de WorkFlows se manejo un tema muy interesante “Integracion de la plataforma Flash con datos” , de la cual se observo la potencia de Flex sobre el manejo de datos sobre DashBoard; la integracion de herramientas de Diseño con Flash, aunque no es mi área lo presentado por Mariana Cabral (@marianacabralMX), se me hizo realmente practico y util, tan digerible que hasta yo siendo programador lo entendi a la perfección, menciono los puentes que podemos utilizar para optimizar Photosho, Illustrator, After Effects con Flash. Despues vino el tema de “Flash Player Internals”, un tema realmente interesante para aquellos que somos desarrolladores, se menciono la forma de como optimizar nuestra aplicacion flash en funcion del Flash Player y tambien menciono algunas de las mejoras que tendra el Flash Player 10.1 todo a cargo de Alberto González (@albertx).

En el area de Tips & Tricks, hubo una parte que se hablo de Redes Sociales, mas concretamente el uso del Api de Facebook para Flash, de lo cual se menciono lo mas basico.

It’s great to see fellow Pixstanaut Tomás Lin talking at the forthcoming Grails Exchange conference in December. He’ll be talking about building rich GUI apps with Flex and Grails. There are still a few tickets left if you can make it.

Today I am going to show you how easy it is to show popUp windows in your Flex application.

Above is a picture of our simple application that only has one label and a button, when we press the button a nice popup with rounded corners pops up and if we click close button in the popup it disappears.

In order to make this work, we have to build two files, one will be our application with the text and button to show popup and another file that will be a MXML component (in Flex Builder you just go to File -> New -> MXML Component). Both of the files have to be saved in the same directory on order for this example to work.

Application source code

To use popups Flex has a manager that is devoted specially for that. In our Application under script tags we import mx.managers.PopUpManager. This will allow us to show the popup windows, center them and close them when needed.

As you can see above the application is very basic, on the button click we call showPopUp() function. In this function we first declare a local variable of type IFlexDisplayObject, because this is what createPopUp method from PopUpManager returns.

createPopUp method accepts 4 arguments, 2 of them are optional. First we have to specify the parent of the Popup, this will help Flex set up coordinates and such when we want to later center the popup. Since we want to have our application as the parent we input this as first parameter.

Second parameter we input the name of the MXML component that we made as our PopUp window, in our example file is popUpWindow.mxml, thus we put popUpWindow as second parameter.

The third parameter is optional – modal:Boolean, so it can be either true or false. If we set it to true, than we will not be able to do anything other than interact with popUp window, if it is set to false, than we can still interact with application even when our popUp is on screen.

All there is to do now, it to center our new popUp window with PopUpManager.centerPopUp(popUp). The argument popUp is IFlexDisplayObject that we have created with PopUpManager.createPopUp() method.

Blow is the source of the popUpWindow.mxml file. The only thing worth noting here is that we have assigned a click action for a button, which calls PopUpManager.removePopUp() method. Arugment is this, since our mxml file is the popUp that we want to remove from stage.

popUpWindow.mxml file

I created test application for live testing Log5F’s work – Test Application. Now it uses next appenders:

Trace Appender:

<appender name="trace" class="org.log5f.appenders.TraceAppender">
  <param name="layout" value="org.log5f.layouts.PatternLayout" type="Class">
    <param name="conversionPattern" value="%d{ABSOLUTE} [%5p] %C{0}.%M - %m%n" type="String"/>
  </param>
</appender>

Firebug Appender:

<appender name="firebug" class="org.log5f.appenders.FirebugAppender">
  <param name="layout" value="org.log5f.layouts.PatternLayout" type="Class">
    <param name="conversionPattern" value="%d{ABSOLUTE} %c{1} - %m%n" type="String"/>
  </param>
</appender>

XPanel Appender:

<appender name="xpanel" class="org.log5f.appenders.XPanelAppender">
  <param name="layout" value="org.log5f.layouts.PatternLayout" type="Class">
    <param name="conversionPattern" value="%c{} - %m" type="String"/>
  </param>
</appender>

LocalConnection Appender:

<appender name="minidebug" class="org.log5f.appenders.LocalConnectionAppender">
  <param name="layout" value="org.log5f.layouts.PatternLayout" type="Class">
    <param name="conversionPattern" value="%d{ABSOLUTE} [%p] %C{0}.%M %m" type="String"/>
  </param>
  <param name="connectionName" value="_mdbtrace" type="String"/>
  <param name="methodName" value="trace" type="String"/>
</appender>

This appender uses LocalConnection’s setting such as MiniDebugTarget from Flex Logging Framework therefore it can be used for sending log messages to consoles which uses for working with MiniDebugTarget, for example Flex Console.

and XMLSocket Appender for Chainsaw:

<appender name="chainsaw" class="org.log5f.appenders.XMLSocketAppender">
  <param name="layout" value="org.log5f.layouts.Log4JLayout" type="Class"/>
  <param name="host" value="localhost" type="String"/>
  <param name="port" value="4448" type="Number"/>
</appender>

Flex applications can more often than not be divided into two broad categories:

1) Applications built around a very specific design

2) Applications built with data at the core

Flex 4 provides great new features which addresses both styles of application development. For the first set of applications, Flash builder 4 empowers the developers with a new Developer/Designer Workflow theme. For the second set of applications, Flash Builder 4 provides a new and exciting feature called Data Centric Development (DCD). DCD is a Rapid Application Development feature in Flash Builder 4 which is aimed to enable traditional web developers to quickly build Flex apps, which will connect to server side back ends like Cold Fusion, PHP, LCDS, BlazeDS, HTTPService and WebService.

I will not dwell into the intricacies of both the workflows in this post, as their already exist some amazing articles which completely cover the functionalities of the two features. The links to those articles are documented below,

Quick Links:

Developer/Designer Workflow theme:

1) Tutorials on Flash Catalyst and Flex 4

Data Centric Developement:

1) Introduction to DCD

2) Build a Master-Detail Flex-Cold Fusion application without writing a line of code

3) Building Flex and LCDS based CRUD application using Flash Builder 4

4) DCD Service Wizard – PHP service

5) DCD Service Wizard – HTTPService

6) Using WebServices with DCD

7) Building Flex and Java based CRUD application using Flash Builder 4

View Sample | Source Code

Degrafa supports strokes but the output is a little disappointing. A quick solution is to apply age-old Photoshop skills. And that is to create a smaller shape enclosed inside another shape to mimic a stroke. The containing shape’s background color will serve as the artificial stroke. You also need to add 2 pixels to both the height and width if you’re going to use this approach since a real stroke is an extra 1 pixel (at least in this example) border around the button, easily take care of this inside the overriden updateDisplayList function.

The result looks smoother and more consistent than Degrafa’s built in stroke. However this approach will require more code and may consume more system resource.

The smoothness of the stroke is also affected by the chosen color. It seems that the darker the color of the stroke or if it’s a complement of the button’s color, the less smooth it appears. The size of the corner radius also affects the smoothness of the stroke. You just have to experiment to find the best combination. Thicker strokes on the other hand look alright, so I guess this example only applies to 1 pixel strokes.

Another thing I noticed with Degrafa is it sometimes renders inconsistent corner radii (see screenshot above). One corner may seem off or may not be curved at all. This can be fixed, albeit inelegantly, by using a RoundedRectangleComplex to allow setting of radii for individual corners.

Description

1. The EventDispatcher class is a base class that provides important

event model functionality for every object on the display list.

2. Every object on the display list can use its addEventListener ()

method– inherited from the Event Dispatcher class–to listen for

a particular event, but only if the listening object is part of the

event flow for that event.

Example event dispatch program

Step 1. Two buttons has created for triggering of click event and

mouse over event.

Step 2: Button 1 as mouse over and Button 2 as mouse click.

Step 3: Adding the event listener for the button1 using createListener

(e: Event) method

private function createListener(e:Event):void

{

myb.addEventListener(MouseEvent.MOUSE_OVER, myEventHandler);

myb.addEventListener(MouseEvent.CLICK, myClickHandler);

}

Step 4: Adding the event listener for the button1 using createListener1

(e: Event) method

private function createListener1(e:Event):void

{

myb1.addEventListener(MouseEvent.CLICK, myEventHandler1);

myb1.addEventListener(MouseEvent.DOUBLE_CLICK,myclickbutton);

}

Step 5: Dispatching the event for the alert message through the button 1.

private function myEventHandler(e:Event):void

{

var result:Boolean = myb.dispatchEvent(new MouseEvent

(MouseEvent.CLICK, true, false));

}

Step:6  Dispatching the event for the image through the button 2

private function myEventHandler1(e:Event):void

{

var result:Boolean = myb1.dispatchEvent(new

MouseEvent(MouseEvent.DOUBLE_CLICK, true, false));

}

Step 7:  Defining the alert message method for the button 1.

private function myClickHandler(e:Event):void

{

Alert.show(“my box”);

}

Step 8: Defining the image method for the button 2.

private function myclickbutton(e:Event):void

{

Myimg.visible=true;

}

Step: 9 Design for the button 1 in mxml application..

<mx:VBox>

<mx:Label text=”mouse over event”/>

<mx:Button id=”myb” label=”Mouse Over”/>

</mx:VBox>

Step 10: Design for the button 2 in mxml application.

<mx:VBox>

<mx:Label text=”mouse click event”/>

<mx:Button label=”Mouse click”/>

<mx:Image  id=”myimg” source=”nn.gif” visible=”false”/>

</mx:VBox>

With Regards

Hemakumar.S

Este 17 de Noviembre, tuve al oportunidad de compartir una gran experiencia Latin Flash Tour y participar impartiendo una conferencia de Flash Media Server 3.5. Aquí esta les dejo la presentación y la liga a el código fuente de los ejemplos presentados.

Happy Streaming!!!

In my previous project i needed to find a easy solution for displaying icons in the alert message box.
So i extended the regular class and added the icons.

Check out the example code and screenshots:

Normal alert

Error alert

Information Alert

Warning Alert

AlertBox.mxml

<?xml version = "1.0" encoding = "utf-8"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"
                layout = "vertical"
                backgroundColor = "#FFFFFF">
    <mx:Script>
        <![CDATA[
            import com.winnemconsulting.uicomponents.alert.ExtendedAlert;
            import mx.controls.Alert;

            /** Event handler function imports the Alert control, which uses a static method to show
               a pop-up window with the title, message, and requested buttons.
             **/
            private function Alerted():void
            {
                Alert.show("You have been alerted !!", "Alert Box", Alert.OK);
            }

            private function IconAlert(type:String):void
            {
                switch (type)
                {
                    case ExtendedAlert.ICON_ERROR32:
                        ExtendedAlert.showExtended("This is the error icon", "Alert with icon", Alert.OK, null, null, ExtendedAlert.ICON_ERROR32);
                        break;
                    case ExtendedAlert.ICON_INFORMATION32:
                        ExtendedAlert.showExtended("This is the information icon", "Alert with icon", Alert.OK, null, null, ExtendedAlert.ICON_INFORMATION32);
                        break;
                    case ExtendedAlert.ICON_WARNING32:
                        ExtendedAlert.showExtended("This is the warning icon", "Alert with icon", Alert.OK, null, null, ExtendedAlert.ICON_WARNING32);
                        break;
                }
            }
        ]]>

    </mx:Script>

    <mx:Panel title = "Alert Panel">

        <mx:Button label = "Regular Alert"
                   width = "100%"
                   click = "Alerted();"/>
        <mx:Button label = "Extended Alert error"
                   width = "100%"
                   click = "IconAlert(ExtendedAlert.ICON_ERROR32);"/>
        <mx:Button label = "Extended Alert information"
                   width = "100%"
                   click = "IconAlert(ExtendedAlert.ICON_INFORMATION32);"/>
        <mx:Button label = "Extended Alert warning"
                   width = "100%"
                   click = "IconAlert(ExtendedAlert.ICON_WARNING32);"/>
    </mx:Panel>

</mx:Application>

ExtendedAlert.as

/**
 * Contributed by:
 * Geirr Winnem
 * Created: 10/21/2009
 * Website: www.winnem.com/winnem-consulting
 * Licence: All rights reserved 2009-, Winnem Consulting
 *
 **/
package com.winnemconsulting.uicomponents.alert
{
    import mx.resources.ResourceManager;
    import flash.display.Sprite;

    import mx.controls.Alert;

    /**
     * Extended the regular alert with predefined icons.
     * @author Geirr Winnem
     * @see mx.controls.Alert
     */
    public class ExtendedAlert extends Alert
    {

        [Embed(source="16X16/error.png")]
        public static const iconError16:Class;

        [Embed(source="32X32/error.png")]
        public static const iconError32:Class;

        [Embed(source="48X48/error.png")]
        public static const iconError48:Class;

        [Embed(source="16X16/information.png")]
        public static const iconInformation16:Class;

        [Embed(source="32X32/information.png")]
        public static const iconInformation32:Class;

        [Embed(source="48X48/information.png")]
        public static const iconInformation48:Class;

        [Embed(source="16X16/warning.png")]
        public static const iconWarning16:Class;

        [Embed(source="32X32/warning.png")]
        public static const iconWarning32:Class;

        [Embed(source="48X48/warning.png")]
        public static const iconWarning48:Class;

        /**
         * Error icon,size 16X16
         */
        public static const ICON_ERROR16:String = "errorIcon16X16";

        /**
         * Error icon,size 32X32
         */
        public static const ICON_ERROR32:String = "errorIcon32X32";

        /**
         * Error icon,size 48X48
         */
        public static const ICON_ERROR48:String = "errorIcon48X48";

        /**
         * Warning icon,size 16X16
         */
        public static const ICON_WARNING16:String = "warningIcon16X16";

        /**
         * Warning icon,size 32X32
         */
        public static const ICON_WARNING32:String = "warningIcon32X32";

        /**
         * Warning icon,size 48X48
         */
        public static const ICON_WARNING48:String = "warningIcon48X48";

        /**
         * Information icon,size 16X16
         */
        public static const ICON_INFORMATION16:String = "informationIcon16X16";

        /**
         * Information icon,size 32X32
         */
        public static const ICON_INFORMATION32:String = "informationIcon32X32";

        /**
         * Information icon,size 48X48
         */
        public static const ICON_INFORMATION48:String = "informationIcon48X48";

        /**
         * Constructor.
         */
        public function ExtendedAlert()
        {
            super();
        }

        /**
         * Extension of the original Show method.
         * @param text 			Text to display
         * @param title			Title for Alert
         * @param flags			Button flags.
         * @param parent		Parent object of control.
         * @param clickListener	Specifies listener function for click events from Alert buttons.
         * @param iconType		Specifies which icon type and size to display in alert.
         * @param defaultButton	Specifies the default button in alert.
         * @return Alert.
         * @see http://livedocs.adobe.com/flex/3/html/help.html?content=controls_19.html
         */
        public static function showExtended(text:String, title:String = null, flags:uint = mx.controls.Alert.OK, parent:Sprite = null, clickListener:Function = null, iconType:String = ICON_INFORMATION48, defaultButton:uint = mx.controls.Alert.OK):Alert
        {
            var iconDisplay:Class;

            switch (iconType)
            {
                case ICON_ERROR16:
                {
                    iconDisplay = iconError16;
                    break;
                }
                case ICON_ERROR32:
                {
                    iconDisplay = iconError32;
                    break;
                }
                case ICON_ERROR48:
                {
                    iconDisplay = iconError48;
                    break;
                }
                case ICON_WARNING16:
                {
                    iconDisplay = iconWarning16;
                    break;
                }
                case ICON_WARNING32:
                {
                    iconDisplay = iconWarning32;
                    break;
                }
                case ICON_WARNING48:
                {
                    iconDisplay = iconWarning48;
                    break;
                }
                case ICON_INFORMATION16:
                {
                    iconDisplay = iconInformation16;
                    break;
                }
                case ICON_INFORMATION32:
                {
                    iconDisplay = iconInformation32;
                    break;
                }
                case ICON_INFORMATION48:
                {
                    iconDisplay = iconInformation48;
                    break;
                }
            }
            return show(text, title, flags, parent, clickListener, iconDisplay, defaultButton);
        }
    }
}

32X32 Icons

The <mx: HTTPService>  tad provides REST type service to access a server resources directly with an unique identifier such as URL, HTTPService in flex application can access any server data such as ASP,JSP, Servlet, PHP,  ASP.Net, if the specified server resource is found then it will fetches the data ,return the data to flex, else it throws an fault error.

<mx: HTTPService>  allows to define type of access GET, POST, return format, header information also supports to pass parameters to the server resource.  HTTPService’s  ’send’ method should be called to initiate request to server, upon successful data response it triggers ‘ResultEvent’ , to registered a listener for the event define the listener function in  ’result’  property, similarly it triggers a ‘FaultEvent’ when any problem occur during request and response process define a listener function in ‘fault’ property.

In this post  I am trying to present simple JSP page accessing, witch contains simple xml data, in real application JSP can be any complex code structure,

In NetBeans or  Eclips IDE or any java Editor  define a empty JSP page,   and write a xml data with no additional code .  like

index.jsp

<products>

<product>

<name>Apple IPhone</name>

<price>32000</price>

<description> First tuch screen hand held device, dveloped using Objective C</description>

</product>

——–

——-

</products >

In Flex Builder IDE create anew project in  main application mxml file define code below, In ‘creationComplete’  event initiate the <mx: HTTPService> request by calling ’send()’ method , and opon success full data retrieval assign it to DataGrid dataprovider property.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”productsSrv.send()”>

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.controls.Alert;

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;

[Bindable]

private var productsCollection:ArrayCollection;

private function resultHandler(event:ResultEvent):void

{ productsCollection = (event.result.products.product) as ArrayCollection;

}

private function faultHandler(event:FaultEvent):void

{

Alert.show(“Error:\n “+event.fault);

}

]]>

</mx:Script>

<mx:HTTPService id=”productsSrv” url=”http://localhost:8080/Products/” result=”resultHandler(event)” fault=”faultHandler(event)” />

<mx:DataGrid dataProvider=”{productsCollection}” horizontalCenter=”0″ verticalCenter=”0″  width=”684″ height=”386″/>

</mx:Application>

save the application and run it

you will get the data it JSP page

in next post we will see some complex app

Today I spend my afternoon to configure a part of a full Flash website that interact with Flickr and that retrieve data from my account without any appication authentication but only with my Flickr key.

First of all I was really impressed about how many languages you can use to bring Flickr photos and use in own desktop application or website (Real Basic, cUrl, Perl, Delphi, C…).

When you want retrieve photos from Flickr you must have a Flickr key that is totally free and you can activate one directly in the right section of Flickr site.
In the same section you can find whole documentation and lots of services expose to retrieve any kind of data from a photo, from Exif data to user or friends informations.
For AS3 we have a couple of interesting library; first one is as3flickrlib very well documented but it’s so long to start work with it because you must to find a frob ID then a token and finally you can start to work with Flickr API.
The other one is SWX, that is written by Aral Balkan and it’s too easy to mesh up any kind of popular service like Flickr, Twitter and so on.
Aral gives us availability to use SWX Service Explorer to take a look at the data and how to mesh up your application with public API, I really love it on Flash Lite too!

This is very interesting because you can retrieve all API in this library and in few line of code you can work with public services.
This is a simple example to call Flickr services with SWX, you can download source code too:

swx = new SWX();
swx.gateway = GATEWAY_PHP;
swx.encoding = "POST";
var callDetails:Object =
{
serviceClass: "Flickr",
method: "photosSearch",
args: ["", "", "#mart3"],
encoding: "POST",
timeout: 5,
resultHandler: resultPhotos,
faultHandler: faultHandler
};
swx.call(callDetails);

Another interesting way to work with Flickr API without any authentication is using REST API.
REST (Representational state transfer) is a very simple way to request data from a database, update, delete them or to create new record using HTTPHeaders and XML.
You must know that AS3 doesn’t have PUT and DELETE method but there are some libraries that create a workaround to solve this limitation and they work very well with REST (as3httpclientlib for example)
I start to approach REST a couple of months ago with Ruby on Rails and I think is amazing.

Flickr gives us REST API too, and you can see that is so simple create a Flickr gallery with REST and Actionscript 3.

We have some API that works without authentication like photos search and we use this service to retrieve data for our Flickr gallery.
First of all we take a look at service documentation on Flickr, you can see that we have a lots of opportunity to find data on Flickr; we can search photos via userID, tags, text on title or description and so on.

In Actionscript 3 we’ll use URLLoader class and prepare some url to retrieve XML data from REST.

private const FLICKR_SERVICE = "flickr.photos.search";

private const API_FLICKR:String = "c6c31464878505403f9bbbf6214ae413";

private const PATH_SEARCH_FLICKR:String = "http://api.flickr.com/services/rest/";

		

public function FlickrRest(){

			

	var varsFlickr:URLVariables = new URLVariables();

	varsFlickr.method = FLICKR_SERVICE;

	varsFlickr.api_key = API_FLICKR;

	varsFlickr.tags = "#mart3";

			

	var req:URLRequest = new URLRequest();

	req.url = PATH_SEARCH_FLICKR;

	req.method = URLRequestMethod.POST;

	req.data = varsFlickr;

			

	var urlL : URLLoader = new URLLoader();

	urlL.addEventListener(Event.COMPLETE, retrieveImages);

        urlL.load(req);

			

}

You can download source code and final sample from this link.
Finally I’d like to explain how to compose photo’s url to retrieve them on Flickr.
Flickr url is composed by some variables that you can find in REST XML or SWX result object

1.  set FARM (ex.: http://farm”+flickrXML..photo[i].@farm+”.static.flickr.com/)
2. set SERVER (ex.: +flickrXML..photo[i].@server+”/”)
3. set Photo ID with underscore  (ex.: +flickrXML..photo[i].@id+”_”+”)
4. set Secret code (ex.: flickrXML..photo[i].@secret+)
5. last parameters is which size you want to get photos, you can use “_s.jpg” for small size, “_m.jpg” for medium, “_l.jpg” for large and so on.

I hope that could be interesting for many developers, if you have any suggestions or idea about mesh up with Flickr, feel free to drop a comment.

Test blogging

The Event.ENTER_FRAME event as its timing mechanism for

showing playback progress.

It periodically reports on the playback percentage, which is

calculated as the current position value divided by the total length

of the sound data:

source code

import flash.events.Event;

import flash.media.Sound;

import flash.net.URLRequest;

var snd:Sound = new Sound();

var req:URLRequest = new

URLRequest(“http://av.adobe.com/podcast

/csbu_dev_podcast_epi_2.mp3″);

snd.load(req);

var channel:SoundChannel;

channel = snd.play();

addEventListener(Event.ENTER_FRAME, onEnterFrame);

channel.addEventListener(Event.SOUND_COMPLETE,

onPlaybackComplete);

function onEnterFrame(event:Event):void

{

var estimatedLength:int =

Math.ceil(snd.length / (snd.bytesLoaded / snd.bytesTotal));

var playbackPercent:uint =

Math.round(100 * (channel.position / estimatedLength));

trace(“Sound playback is ” + playbackPercent + “% complete.”);

}

function onPlaybackComplete(event:Event)

{

trace(“The sound has finished playing.”);

removeEventListener(Event.ENTER_FRAME, onEnterFrame);

}

Here EnterFrame event is mechanism to draw line from the circle ,

when user click in some area in application…

source code

package {

import flash.display.Sprite;

import flash.events.Event;

public class ramdom extends Sprite

{

public function ramdom()

{

graphics.lineStyle(6,0,7);

addEventListener(Event.ENTER_FRAME,onEnterFrame);

}

public function onEnterFrame(event:Event):void{

graphics.drawCircle(23,45,25);

for(var i:int=0;i<1;i++)

graphics.lineTo(Math.random()*400,Math.random()*400);

}

}

}

With Regards

Hemakumar.S

[update: this post has been in the limbo for way too long, I wanted a way to embed the flash videos from Adobe.tv here, but it looks like there is none. I am publishing this post today, in hopes that the reader may find it interesting enough to actually try the links... BTW this here might relate to the silverlight 4 thingy as well! ]

I am yet to sift through all the Adobe MAX 2009 videos.

I find it really generous of Adobe to put all of these up. Even if most of it is marketing, they still share a few gems of information. Really worthwhile for guys like me, who end up being so busy there’s little hope of attending an actual MAX event unless planned at least six months ahead of time.

I chanced upon the Adobe AIR 2.0 preview video:  http://tv.adobe.com/watch/max-2009-develop/whats-coming-in-adobe-air-2-/

(I wish there was a way to embed flash videos from Adobe.tv into WordPress…)

To me the most important ones are the support for USB (mass storage devices) and native apps (so you can now open a word document from within AIR). I am still a bit skep about the performance, but, I am sure this is going to improve over the new version too…

Check these videos out. Kinda nice. Kinda exciting.

Cheers.

S.

[update:

1. there's a lot more videos on AIR2 in the complete video list, but I did like this one by Kevin Lynch as well: http://tv.adobe.com/watch/max-2009-develop/kevin-lynch-demos-adobe-air-2-features/

2. I prefer the adobe media player for working out all of it. nicer neater faster AIR based video playing...]

BlazeDS offers a great mechanism to attach your flex application to backend services. In this brief overview we’ll configure flex to call a Java Class and return results. This overview assumes you’ve already setup your IDE with a basic Flex / BlazeDS project.

Main points we’ll cover

• Build the Java Class
• Expose the Class with Blaze on the server
• Configure Flex to find the Blaze service
• Build the Flex components to make the call

Build the Java Class

In your IDE switch to the Java view and create a new Java class. We’ll call it HelloFlex. Create a private variable called message. Set an initial value for this variable in the constructor. Finally create a getter method that returns the message string.

package com.grant;

public class HelloFlex {
private String message;
public HelloFlex(){
message=”HI Flex. this is Java. How are you?”;
}
public String getMessage(){
return message;
}
}

Expose the class with BlazeDS on the server

Under your web-inf directory you’ll fine a subdirectory called flex. Within there you’ll see the main config files blaze uses to set up the services. services-config.xml is the main file and has statements to include the others. For this example we’re creating a simple remoting service, so go ahead and open up the  remoting-config.xml. Here’s where we’ll set up the configuration for our reomting service.

Blaze calls exposed services destinations. In this remoting-config.xml we’ll set up a destination that points to our HelloFlex class.

Under the default-channels create a new destination as follows.

<?xml version=”1.0″ encoding=”UTF-8″?>
<service id=”remoting-service”
class=”flex.messaging.services.RemotingService”>

<adapters>
<adapter-definition id=”java-object” class=”flex.messaging.services.remoting.adapters.JavaAdapter” default=”true”/>
</adapters>

<default-channels>
<channel ref=”my-amf”/>
</default-channels>

<destination id=”helloflex”>
<properties>
<source>com.grant.HelloFlex</source>
</properties>
<adapter ref=”java-object” />
<channels>
<channel ref=”my-amf” />
</channels>
</destination>
</service>

Configure Flex to find the BlazeDS Service

Depending how you set up your workspace that set may already be done for you. In order for flex to know what channels and destinations are available, our application needs to know where these config files are. In Java, these files are in the class path and are included in the build process. In Flex we need to explicitly tell the compiler where these files are.

Right click on the project and choose properties. Under flex compiler you’ll see a textbox for additional compiler arguments. To configure the file location you’ll need an argument here called services which points to the location of your xml files.

You have two options now.

1) If the folder is part of your flex build path you can make a relative reference to the file using the –services=<file> format as follows. Notice the web-inf directory is not included in the definition. In this the folder containing the flex subfolder is on my build path.

2) If the folder is NOT on your build path you can point to the file location. This is the default method that FlashBuilder implements. We’ll use it for this example, however I suggest you move to a relative location style as soon as you can.

For an explicit file system location the flex option is slightly different. Here we use the –services “<file Location>” format. On my drive the option reads –services “C:\FlashBuilder\dev\MyProject\WebContent\WEB-INF\flex\services-config.xml”

Build the Flex components to make the call

Now we can get back to our flex components and make the actual call. First flip back over to your Flex Perspective and open your main mxml file.

First we’ll define the service:

<mx:RemoteObject id=”myService”  destination=”helloflex” />

The id is the name you’ll reference this service elswhere in your flex app. The destination of helloflex needs to match the destination name you entered in your remoting-config.xml

Next we’ll move to some visual components. First lets add a panel to hold our controls.

<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout>

</s:Panel>

And add a text box to display some results

<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout>

<mx:TextArea id=”result_text”/>

</s:Panel>

Now we’ll add a button on the page to use the service

<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout>

<mx:TextArea id=”result_text”/>
<mx:Button label=”Call Java” click=”myService.getOperation(‘getMessage’).send();”/>

</s:Panel>

This is a direct use of the RemoteObject myService. This is not a best practice. Typically you would have a function managing your calls and the button would utilize that function. For simplicity sake I’ve included the direct call for this demonstration. In this example you’ll notice we use the getOperation function and pass in the java method name we want to call.

If you were to run this now you would see no results. We have yet to define what happens when the service gets called. Lets do that now.

Create a script block to hold our action script and add a simple method that puts the response of our service in our textbox.

<fx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
private function resultHandler(evt:ResultEvent):void
{
result_text.text = evt.message.body.toString();
}
]]>
</fx:Script>

To use this function we’ll go back to the service and add a handler to manage all responses.

<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
<!– DEFINE REMOTE SERVICES WE’LL USE –>
<mx:RemoteObject
id=”myService”
destination=”helloflex”
result=”resultHandler(event)” />
</fx:Declarations>

Your completed code should look like this

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/halo” minWidth=”1024″ minHeight=”768″>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
<!– DEFINE REMOTE SERVICES WE’LL USE –>
<mx:RemoteObject
id=”myService”
destination=”helloflex”
result=”resultHandler(event)” />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
private function resultHandler(evt:ResultEvent):void
{
result_text.text = evt.message.body.toString();
}
]]>
</fx:Script>
<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:TextArea id=”result_text”/>
<mx:Button label=”Call Java” click=”myService.getOperation(‘getMessage’).send();”/>
</s:Panel>

</s:Application>

That’s it! Run the application and pat yourself on the back. Congratulations! Your first end to end Flex-Java app.

When your application contains a custom image as a background for the base container, or uses a color different from the regular basic gray, then adding a list control will make the list control stand out in the whole screen like an ugly duckling. And it can be very painful for the eye from the point of view of the end user. So what is the solution??? The solution is to play around with the background and border properties of the list control to make it merge with the general look and feel of your application.

Here is the sample code that I used to generate the screenshots below -

We basically have an application which contains an array with a few elements and a List control that is powered by the array.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:vo=”*”
layout=”horizontal”
verticalAlign=”middle”
backgroundColor=”#EEEEEE”>

<mx:Array id=”arr1″>

<mx:String>Hello</mx:String>
<mx:String>one</mx:String>
<mx:String>two</mx:String>
</mx:Array>
<mx:List dataProvider=”{arr1}”  >

</mx:List>

</mx:Application>

Now the code as it is above will generate the list that stands out oddly from the rest of the screen.  Go ahead and tweak the value of the backgroundAlpha to different values between 1 and 0.  For beginners(like me), the backgroundAlpha controls the opacity of the color of the background from least to most. So a value of 1 means that the opacity is most, which means the background is opaque, and if you set to a color, it will look at its solid best.  On the other hand a value of 0 indicates that the background is least opaque i.e. it is transparent, and if you set a color to the background you will see that it begins to look more and more translucent as the backgroundAlpha value goes towards 0.

Look at the output image below with backgroundAlpha values 0.5,0.2 and 1. and backgroundColor – #45bc67. You will have to insert it like this – <mx:List dataProvider=”{arr1}” backgroundAlpha=”0.5″  >

backgroundAlpha property at various values

I have combined three screenshots into one (ah, I am a little lazy), but as I said before, in the diagram you can see that the middle one with a alpha of 0.2 is more translucent than the one the extreme left with the value 0.5. And the one on the right is the least translucent for an alpha of 1.

One can also play around with the color of the individual items when the mouse hovers on them. This is the rollOver property and can be set to any 6 digit hex value.

See this screenshot with a rollOverColor of  #9aFFDE and a default rollOver color -

rollOverColor set to a custom value and default value

Other properties worth exploring -

background properties

backgroundAlpha, backgroundColor,backgroundDisabledColor,backgroundImage,backgroundSize.

border properties

borderColor,borderSides,borderSkin,borderStyle,borderThickness

Dont want the border nor the background at all? Want it to merge with the application background – remove all the background properties and just use backgroundSkin={null}

borderSkin value set to null

So go ahead and experiment with the various properties and tell me how it goes. Particularly do tell me what happens if you use the backgroundImage property, and what happens if you insert a 150px by 150px image over there…