Flex Pasta

One of the most basic ways to improve the feel of a Flex application, is to add transitions and effects when a change in the viewstack occurs.  Here is an example of the code using the “showEffect” and “hideEffect” property on the NavigatorContent class.

<mx:ViewStack id=”vs” width=”100%” height=”100%”>

<fx:Script>

<![CDATA[

import spark.effects.Fade;

]]>

</fx:Script>

<s:NavigatorContent label=”Link 1″ width=”100%” height=”100%” hideEffect=”{new Fade()}” showEffect=”{new Fade()}”>

<s:VGroup/>

</s:NavigatorContent>

<s:NavigatorContent label=”Link 2″ width=”100%” height=”100%” hideEffect=”{new Fade()}” showEffect=”{new Fade()}”>

<s:VGroup/>

</s:NavigatorContent>

</mx:ViewStack>

There are many effects and transitions to play for a hide or show.  This is just one simple example to illustrate how easy it is to do.  The effect gives the user a less jerky and smooth transition from one view to the next.  The simple Fade effect for hide and showing prevents the screen from snapping from one view to another.  There is no waiting for a page to load in Flex, so it is good to have some transition for the user.

Tinkering around with the new scrolling method s:Scroller in Flex 4.  I like it much more than Flex 3.  Less overhead and more control of scroll bars.  Still the overall frustrations with scroll bars and where they should appear still remains.  Thought and trial/error are required to get it just right.

I was recently trying to do a full application scroll bar rather than those “in component” ones.  I was using a viewstack and having all sorts of issues with getting the scroll bars to actually activate.  I have a simple example of my problem.  Can you easily figure out the solution?!?!

Code Before

 <?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” pageTitle=”Booyah”
xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″ height=”100%” xmlns:local=”*”>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<s:Scroller width=”100%” height=”100%” verticalScrollPolicy=”on”>
<s:VGroup width=”100%” height=”100%”>
<mx:LinkBar dataProvider=”{vs}”/>
<mx:ViewStack id=”vs” width=”100%” height=”100%”>
<s:NavigatorContent label=”Link 1″ width=”100%” height=”100%”>
<s:VGroup/>
</s:NavigatorContent>
<s:NavigatorContent label=”Link 2″ width=”100%” height=”100%”>
<s:VGroup height=”100%” width=”100%”>
<s:HGroup width=”100%” height=”500″>
<mx:Image source=”http://www.wallpaperbase.com/wallpapers/photography/greece/greece_6.jpg” height=”100%”/>
<s:Label text=”Some Text 2!” width=”50%”/>
</s:HGroup>
<s:HGroup width=”100%” height=”500″>
<mx:Image source=”http://www.photoatlas.com/photo/italy_venice_03.jpg” height=”100%”/>
<s:Label text=”Some Text 3!” width=”50%”/>
</s:HGroup>
<s:HGroup width=”100%” height=”500″>
<mx:Image source=”http://www1.pictures.zimbio.com/gi/St+Louis+Cardinals+v+Cincinnati+Reds+5GwTSG7xvgfl.jpg” height=”50%”/>
<s:Label text=”Some Text 4″ width=”50%”/>
</s:HGroup>
</s:VGroup>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>

</s:Scroller>
</s:Application>

When I run this, I am expecting a scroll bar on the application.  Here is a screen shot of the output:

Checking out the right side, I see my scroll bar, but is disabled, despite content hanging off the bottom of the screen.  The only reason the scroll bar is showing up at all is because I have verticalScrollPolicy=”on” for demo purposes.  Looking the source can be a bit challenging to figure out a solution, even in a simple example.  Figured out where the problem is?

Read the rest of this entry…

A while ago I wrote an example on how to run command line in an AIR app.  This worked great until trying to actually release my application to the world.  The problem:  AIR files cannot run Native processes.  While the AIR app will run fine in Flash Builder, when I try to export a release build, it will throw an error if the profile is set to extendedDesktop(which I need for a native app).  This is because the file must be an .exe file under windows to support native integration.  The ability to export a release build .exe file is not baked into Flash Builder.  The command line must be used. When using the command line, another issue arises.  YOU MUST run the command line from the directory where the SWF file is sitting.  For example c:\projects\flashbuilder\TestProject\bin-debug\.  I didn’t do this at first and I got an error like MyNativeApp.exe does not exist.  Well MyNativeApp.exe is the one I am trying to generate!!

2 1/2 years ago I published annotations for BlazeDS that allowed for placing tags on Java getters/setters to determine if a value is serialized to the Flex client.  Soon I will publish a 3 part BlazeDS extension that does the following(with annotations of course).

1. Serialization Profiles with BlazeDS - This was mentioned in a previous post and I will be releasing this soon along with the rest of the annotations code.
2. Mate Code Generator - More details to come, but if you are familiar with the Mate Framework, this code generator will create complete EventMaps/DataManagers/Events from Java services(and it runs for the life of the project).
3. Model Code Generator  - This isn’t the kind where a button is pressed once to create Flex remote object bean classes.  I don’t like code generators that only generate the file initially.  I also don’t like when a code generator creates generated code that then the developer must extend(ex: Customer extends _Customer).  I have created a code generator that does neither but still can be run endless times for the life of the project.  Here is an example output file.  The developer can add any code to the area marked as such in comments.  Every time the generator is run it will clear out the rest of the file and regenerate the properties from the matching Java class.
   /* File Generated by FlexPastaDomainGenerator v. 1.0
   * Only edit the file in the designated area.
   * All other changes will be lost
   */
   package com.company.model
   {[Bindable]
   [RemoteClass(alias=”com.company.model.Address”)]
   public class Address
   {
   public var country:String;
   public var lot:String;
   public var parcel:String;
   public var state:String;
   public var streetName:String;
   public var streetNumber:String;
   public var subdivision:String;
   public var uuid:String;
   public var zipCode:String;

   //**********EDIT AREA**********

   //**********END EDIT**********
   }
   }

Looks for more details in the coming weeks!

A hand full of bugs have been field with Adobe’s Flash Player regarding problems uploading with Firefox.

https://bugs.adobe.com/jira/browse/FP-78
https://bugs.adobe.com/jira/browse/FP-1044
https://bugs.adobe.com/jira/browse/FP-419
https://bugs.adobe.com/jira/browse/FP-201
https://bugs.adobe.com/jira/browse/FP-568

There have also been plenty of posts describing the problem.

http://sethonflex.blogspot.com/2007/10/flex-and-filereferenceupload-using.html
http://thanksmister.com/index.php/archive/firefox-flex-urlrequest-and-sessions-issue/
http://stackoverflow.com/questions/351258/how-do-i-make-flex-file-upload-work-on-firefox-and-safari

In Flash 9, there is really no good way around this problem.  However, in Flash 10 / Flex 4, an enhancement to flash.net.FileReference makes it possible to read the contents of a file before it is uploaded.  Meaning that the file can be uploaded in different ways then can be done in Flash 9.  The following example shows how easy file uploading can be and is not tied to SSL, Firefox, IE, Chrome, etc.  This method is using Java server side with BlazeDS, but could be modified to work with other setups.

First, look at the application file.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Applicationxmlns: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“>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!–
Place non-visual elements (e.g., services, value objects) here –>
<s:RemoteObject id=”upload” destination=”uploadService” endpoint=”http://localhost/Context/messagebroker/amf“/>
</fx:Declarations>

<fx:Script>
<![CDATA[
private var fr:FileReference = new FileReference();

private function test():void
{
fr.browse();
fr.addEventListener(Event.SELECT, selected);
fr.addEventListener(Event.COMPLETE, complete)
}
private function selected(event:Event):void
{
fr.load();
}
private function complete(event:Event):void
{
var byteArray:ByteArray = fr.data;
upload.uploadFile(byteArray);
}
]]>
</fx:Script>

<s:Button label=”Upload” click=”test()”/>
</s:Application>

Notice the fr.load();  This will actually load the file and make it’s contents available to us in the code.  The complete handler than takes those contents as a byte array and calls the remote “uploadService” passing in that byte array.  Here is the simple Java code for the service method “uploadFile”:

public void uploadFile(byte[] file)
{
// Do something here to save the file
}

It is that easy in Flash 10.  By allowing access to the file, the upload process is quick and painless.