Thursday, December 17, 2009

Toolbar Flex Button Control

In the previous post I have found a way how to remove borders from the Button control. But often in your toolbar buttons you have some of the buttons disabled and need to visually mark them as that. With borders it was obvious, as borders were drawn black/white. But what can we do without borders? If you look at some standard desktop applications, disabled buttons are completely drawn black/white and maybe with some lowered alpha value. In Flex we can do just that.

Below you can see complete example of Button control:

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
       width="22"
       height="20"
       upSkin="mx.skins.Border"
       disabledSkin="mx.skins.Border">
  <mx:Script>
    <![CDATA[
      private static var bwMatrixArray:Array = [.33, .33, .33, 0, 0,
                                                .33, .33, .33, 0, 0,
                                                .33, .33, .33, 0, 0,
                                                0, 0, 0, 0.7, 0];
      private static var bwFilter:ColorMatrixFilter = new ColorMatrixFilter(bwMatrixArray);
      override public function set enabled(value:Boolean):void {
        super.enabled = value;
        this.filters = value ? [] : [bwFilter];
      }
    ]]>
  </mx:Script>
</mx:Button>


Borders are removed by setting upSkin and disabledSkin to mx.skins.Border value. Black/white and alpha effect is achieved through ColorMatrixFilter with equal RGB values 0.33 and with alpha value set to 0.7. If you need icons for your toolbar buttons, there is a free icon set available at http://www.famfamfam.com/.

Tuesday, December 15, 2009

Borderless Flex Button Control

In our recent project with RIA Flex client we are using button icons with little neat shadow below. But inside button control with border enabled these shadows look ugly (even to me - developer). Unfortunately, in Flex 3 you can’t disable border of the button control. Yes, I did not believe it myself, but that is what we have. As getting new icons is much more trouble for me than hacking button control, I started to explore the ways to do it.

First, I tried to extend Button control class, but soon remembered that all the border and background drawings is done in the Skin classes. mx.skins.halo.ButtonSkin is the skin class for Button control in Flex 3. So, my second attempt was to extend this skin class. Unfortunately, all the drawings are done in the same method with no simple point of extension. That is extending this class meant coping 200 lines method and commenting out a few lines. It is not good at all. With no choice of easy elegant solution I was about to break that DRY rule. Fortunately (at last), I found simple, almost empty mx.skins.Border class and that was it - simple solution.

To disable borders in button control you need to simply set skin property to this mx.skins.Border class. Something like this:

<mx:Button skin="mx.skins.Border" />

In addition, button control provides you a way to specify skin classes for various states individually:

  • upSkin
  • overSkin
  • downSkin
  • disabledSkin
  • selectedUpSkin
  • selectedOverSkin
  • selectedDownSkin
  • selectedDisabledSkin

So, if you need to disable borders but still enable them for cases like mouse-over, click, etc… you only need to set upSkin property.

Monday, December 14, 2009

Auto-Resizable TextInput and TextArea Flex Controls

Well, title says it all. Simple extension of TextInput and TextArea controls in Flex 3 to enable auto resize.

package components {
  import flash.events.Event;
  import flash.text.TextFieldAutoSize;
  import mx.controls.TextInput;
  public class AutoSizeTextInput extends TextInput {
    public function AutoSizeTextInput() {
      super();
      this.addEventListener(Event.CHANGE, function(event:Event) {
        invalidateSize();
      });
    }
    override protected function childrenCreated():void {
      this.textField.autoSize = TextFieldAutoSize.LEFT;
      super.childrenCreated();
    }
  }
}


package components {
  import flash.events.Event;
  import flash.text.TextFieldAutoSize;
  import mx.controls.TextArea;
  public class AutoSizeTextInput extends TextArea {
    public function AutoSizeTextInput() {
      super();
      horizontalScrollPolicy = "off";
      verticalScrollPolicy = "off";
      this.addEventListener(Event.CHANGE, function(event:Event) {
        invalidateSize();
      });
    }
    override protected function childrenCreated():void {
      this.textField.autoSize = TextFieldAutoSize.LEFT;
      this.textField.wordWrap = false;
      super.childrenCreated();
    }
    override protected function measure():void {
      super.measure();
      measuredWidth = textField.width;
      measuredHeight = textField.height;
    }
  }
}

Friday, December 11, 2009

Would You Consider Moving from .Net to Java?

First, I should clarify that I am a long time .Net developer with quite a few high grade projects behind. And I am in fact still heavily using excellent .Net Framework. There is certainly place for both of them, no flame war intended. But you know, everyone has a favorite one. With this post I start a series of articles in which I will try to explore some really cool Java technologies, which not so long time ago made Java my framework of choice. The primary target audience are those .Net developers who started to have that strange feeling that there should be something more than standard .Net framework and Visual Studio with all its conveniences. I strongly encourage you to try examples by hand and feel that excitement of learning something new. Some of you might argue that there ARE many exciting development done in .Net as well. Although I might agree, we have to admit that almost any .Net related open source project (and open source IS the driving force of innovation) is in some respect a reflection of the same project started years ago in Java or some other alternative technology like RoR. Anyway, lets start and you decide on yourself.

Everything started with Apache Maven

I remember my first acquaintance with Maven. My reaction was: “I want this tool in .Net !”. I was so much excited with it that I have spent couple of days playing with it and searching for .Net equivalent. Without any success I started to consider building one. How naive I was! First let me explain what is all the fuss about.

Lets imagine we are about to build a web application. How do you set your project/solution/workspace? What is your directory structure? Where do you put source files, resources, tests, configuration files, etc? How do you add/resolve references/dependencies to external assemblies/libraries?  What about different versions of those libraries? Hopefully you have some templates setup in Visual Studio to reuse them later. But are you consistent from project to project? Are your different developer teams consistent with each other? It is quite a long list of questions and we are just about to create our project. Well, Maven is the tool from Apache Foundation to answer all of these and more. But you have to try it yourself to see all the possibilities and flexibility it provides.

Lets install Maven first and try some examples. I expect you already have a recent JDK installed on your system. Now go to Maven web site download latest release and follow simple steps to install it (unzipping and PATH environment variable settings). Now create some working folder for our examples , open command prompt in it and execute the following:

1: >mvn archetype:generate

You will see lots of text as an output. First it may confuse you, but explore it a little bit. You will realize that Maven gave us a list of project types (archetypes in Maven terminology). Some keywords in the list may sound familiar to you, struts (one of the first web frameworks in Java world) or maybe spring (popular IoC container with support for integration with many other technologies). Lets just choose #18 (in your case number may vary) which is maven-archetype-webapp. Now Maven will prompt you for groupId, artifactId and version. These are the properties which make any module/library/assembly unique. For this example we can enter something like com.tsvayer, web-app,1.0 accordingly. For further prompts simply accept default values.

What we got as a result is a web application template with standard folder structure for our source files, standard Java web application folders like WEB-INF,  tests etc. Now execute the following two commands:

1: >cd web-app
2: >mvn tomcat:run

You will see lots of text output and Maven will download some files. Simply ignore it for now. After you see this last message “INFO: Starting Coyote HTTP/1.1 on http-8080” open your browser and direct to http://localhost:8080/web-app. You should see running Hello World web application. Cool.

Now stop it pressing CTRL-C and execute the following command:

1: >mvn jetty:run

Again you will see lots of output and some downloads and after “Started Jetty Server” browse to http://localhost:8080/web-app

Lets stop and analyse what we have done so far. Before this Maven thing all we had is JDK installed. Then we installed some little tool called Maven, executed few commands and got a working web application hosted on a real Web Server. Wait, on two different real web servers, that is Tomcat and Jetty (in fact, you can try others as well, just run mvn jboss:run to run under JBoss, but be prepared, it will download lots of Mbs). Some of you may notice similarity with Ubuntu/Debian linux apt-get utility.

Now execute the following command:

1: >mvn package

After some more strange output you can find a target folder created and web-app.war file in it. What we have done is building our application, running unit tests on it(notice No Tests to Run info messages in the output) and packaging it in a standard Java WAR archive ready to be deployed on a production web server.

Just think about it, it is quite a lot for a few commands. By simply typing a few commands you get the whole application stack downloaded from internet with right external dependencies with right versions, all ready to develop, build, test, run and deploy ANY kind of application in ANY kind of hosting environment. Just imagine how easy it is now to have a standard development environment in your team, standard way of structuring your applications, standard way of building/packaging and deploying. In case you are not excited as much as I am, remember the day a new junior developer has joined your team with a fresh installed machine and how frustrating it was to set that machine to the same “comfortable” level as yours. Another question to consider: “Are you afraid to format you machine?” :)

To conclude this part, I just want to introduce you one more Maven command. Maybe some of you are not so much comfortable with command prompt and maybe you even say: “Man, wasn’t it supposed to eas the whole development process? Will I have to develop my web application from command prompt?”. As an answer for this, just execute the following command:

1: >mvn eclipse:eclipse

And if you have an Eclipse IDE installed on your system, your project is ready to be imported. Now you can enjoy all the conveniences of modern IDE. All of the commands we just learned above are available through mouse clicks.

“But wait, I heard IntelliJ IDEA is the best Java IDE out there. I want that instead“. Just execute the following:

1: >mvn idea:idea

and you are ready to go. In fact, all the modern IDEs support Maven generated projects directly.

In conclusion I want to clarify why building such a tool in .Net won’t be so much a cool idea as it is in Java. The reason is open source community. Just google how many libraries of any kind out there in Java world freely available to you and then you start to understand how invaluable Maven is. Just go to Apache Foundation web site and see it. In contrary, what we have in .Net world? Well, you answer that. Although I see certain benefits of using such a tool internally for in house built assemblies, and all that version conflict resolutions etc, the real benefit of Maven is in the availability of a central repository available over internet anytime anywhere.

Thursday, December 10, 2009

MATE File Upload Service Invoker

If you are working with Adobe Flex technology you probably heard of MATE Flex Framework. It is “a tag-based, event-driven Flex framework” with IoC container, view auto wiring and other convenient features. In one of my recent projects there was a requirement to import local data files in XML format. Unfortunately, Flash Player 9 was a constraint as it does not allow to load local files into Flex application. This feature comes with Flash Player 10 through FileReference.load method. In this scenario you have to first upload file on to the server and download it back to Flex client application. MATE framework provides a concept of Service Invokers for remote communication, configurable through its Event Maps in MXML format. There are Service Invokers for RemoteObject, HTTPService and WebService available out of the box. It seemed logical to handle this file upload scenario the same way. Unfortunately, current version of MATE does not provide such a Service Invoker, so I decided to build it myself.
It consists of two classes: FileUploadServiceInvoker and FileUploadHandlers. You can see them below:
1: package components {
2:  import com.asfusion.mate.actionLists.IScope;
3:  import com.asfusion.mate.actions.IAction;
4:  import com.asfusion.mate.actions.builders.ServiceInvoker;
5:  import com.asfusion.mate.core.ISmartObject;
6:  import com.asfusion.mate.events.UnhandledFaultEvent;
7: 
8:  import flash.events.DataEvent;
9:  import flash.events.IOErrorEvent;
10:  import flash.net.FileReference;
11:  import flash.net.URLRequest;
12: 
13:  public class FileUploadServiceInvoker extends ServiceInvoker implements IAction {
14:   private var _url:String;
15:   private var _fileReference:Object;
16: 
17:   public function FileUploadServiceInvoker() {
18:   }
19: 
20:   public function get url():Object {
21:    return _url;
22:   }
23: 
24:   public function set url(value:Object):void {
25:    if (value is String) {
26:     _url = String(value);
27:    }
28:   }
29: 
30:   public function get fileReference():Object {
31:    return _fileReference;
32:   }
33: 
34:   public function set fileReference(value:Object):void {
35:    _fileReference = value;
36:   }
37: 
38:   override protected function run(scope:IScope):void {
39:    var uploadRequest:URLRequest = new URLRequest(_url);
40:    getRealFileReference(scope).upload(uploadRequest);
41:   }
42: 
43:   private function getRealFileReference(scope:IScope):FileReference {
44:    var value:FileReference = fileReference is ISmartObject ? ISmartObject(fileReference).getValue(scope) as FileReference : FileReference(fileReference);
45:    return value;
46:   }
47: 
48:   override protected function complete(scope:IScope):void {
49:    innerHandlersDispatcher = getRealFileReference(scope);
50:    if (resultHandlers && resultHandlers.length > 0) {
51:     var resultHandlersInstance:FileUploadHandlers = createInnerHandlers(scope, DataEvent.UPLOAD_COMPLETE_DATA, resultHandlers, FileUploadHandlers) as FileUploadHandlers;
52:     resultHandlersInstance.validateNow();
53:    }
54:    if ((faultHandlers && faultHandlers.length > 0) || scope.dispatcher.hasEventListener(UnhandledFaultEvent.FAULT)) {
55:     var faultHandlersInstance:FileUploadHandlers = createInnerHandlers(scope, IOErrorEvent.IO_ERROR, faultHandlers, FileUploadHandlers) as FileUploadHandlers;
56:     faultHandlersInstance.validateNow();
57:    }
58:   }
59:  }
60: }


1: package components {
2:  import com.asfusion.mate.actionLists.EventHandlers;
3:  import com.asfusion.mate.actionLists.IScope;
4:  import com.asfusion.mate.actionLists.ServiceScope;
5:  import com.asfusion.mate.events.UnhandledFaultEvent;
6: 
7:  import flash.events.DataEvent;
8:  import flash.events.Event;
9:  import flash.events.IOErrorEvent;
10: 
11:  import mx.rpc.Fault;
12: 
13:  public class FileUploadHandlers extends EventHandlers {
14:   public function FileUploadHandlers(inheritedScope:IScope = null) {
15:    super();
16:    this.inheritedScope = inheritedScope;
17:   }
18: 
19:   override protected function fireEvent(event:Event):void {
20:    if (actions && actions.length > 0) {
21:     var currentScope:ServiceScope = new ServiceScope(inheritedScope.event, debug, inheritedScope);
22:     currentScope.owner = this;
23: 
24:     if (event is DataEvent && event.type == DataEvent.UPLOAD_COMPLETE_DATA) {
25:      currentScope.result = DataEvent(event).data;
26:     } else if (event is IOErrorEvent) {
27:      currentScope.fault = new Fault("", IOErrorEvent(event).text);
28:     }
29: 
30:     setScope(currentScope);
31:     runSequence(currentScope, actions);
32:    } else if (event is IOErrorEvent) {
33:     var faultEvent:UnhandledFaultEvent = new UnhandledFaultEvent(UnhandledFaultEvent.FAULT);
34:     faultEvent.fault = new Fault("", IOErrorEvent(event).text);
35:     inheritedScope.dispatcher.dispatchEvent(faultEvent);
36:    }
37:   }
38:  }
39: }

FileUploadServiceInvoker prepares URLRequest and calls FileReference.upload in its run() method. FileUploadHandlers handles DataEvent.UPLOAD_COMPLETE_DATA and IOErrorEvent events in its fireEvent() method. Everything else is MATE specific code like scope management etc.

Usage of this service invoker is exactly the same as other service invokers provided by MATE. To give a short example, lets suppose we need to import local XML data file and bind it to DataGrid. Here you can see main.mxml file, FileUploadEvent even class which holds FileReference object, MainEventMap which configures Handlers/Injectors and server side import.jsp which simply echoes uploaded file back to Flex client.

main.mxml

1: <?xml version="1.0" encoding="utf-8"?>
2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3:     layout="vertical"
4:     xmlns:maps="maps.*"
5:     xmlns:net="flash.net.*">
6:  <mx:Script>
7:   <![CDATA[
8:    import mx.controls.Alert;
9:    import mx.rpc.Fault;
10:    import components.FileUploadEvent;
11: 
12:    [Bindable]
13:    private var xmlData:XML;
14: 
15:    private function selectFile():void {
16:     fileRef.addEventListener(Event.SELECT, onFileSelect);
17:     fileRef.browse();
18:    }
19: 
20:    private function onFileSelect(event:Event):void {
21:     var uploadEvent:FileUploadEvent = new FileUploadEvent(FileUploadEvent.FILE_UPLOAD, true);
22:     uploadEvent.fileReference = fileRef;
23:     dispatchEvent(uploadEvent);
24:    }
25: 
26:    public function onResult(data:*):void {
27:     xmlData = new XML(data);
28:    }
29: 
30:    public function onFail(fault:Fault):void {
31:     Alert.show(fault.faultString);
32:    }
33:   ]]>
34:  </mx:Script>
35:  <maps:MainEventMap />
36: 
37:  <mx:Button label="Select File" click="selectFile()" />
38:  <net:FileReference id="fileRef" />
39:  <mx:DataGrid dataProvider="{xmlData.member}">
40:   <mx:columns>
41:    <mx:DataGridColumn dataField="@name" headerText="Name" />
42:    <mx:DataGridColumn dataField="@email" headerText="Email" />
43:    <mx:DataGridColumn dataField="@department" headerText="Department" />
44:   </mx:columns>
45:  </mx:DataGrid>
46: </mx:Application>

FileUploadEvent.as

1: package components {
2:  import flash.events.Event;
3:  import flash.net.FileReference;
4: 
5:  public class FileUploadEvent extends Event {
6:   public static const FILE_UPLOAD:String = "fileUpload";
7: 
8:   public var fileReference:FileReference;
9: 
10:   public function FileUploadEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false) {
11:    super(type, bubbles, cancelable);
12:   }
13:  }
14: }

MainEventMap.mxml

1: <?xml version="1.0" encoding="utf-8"?>
2: <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/" xmlns:components="components.*">
3:  <mx:Script>
4:   <![CDATA[
5:    import components.FileUploadEvent;
6:   ]]>
7:  </mx:Script>
8:  <EventHandlers type="{FileUploadEvent.FILE_UPLOAD}">
9:   <components:FileUploadServiceInvoker url="import.jsp" fileReference="{event.fileReference}">
10:    <components:resultHandlers>
11:     <CallBack method="onResult" arguments="{resultObject}" />
12:    </components:resultHandlers>
13:    <components:faultHandlers>
14:     <CallBack method="onFail" arguments="{fault}" />
15:    </components:faultHandlers>
16:   </components:FileUploadServiceInvoker>
17:  </EventHandlers>
18: </EventMap>

import.jsp

1: <%@page import="org.apache.commons.fileupload.FileItem"%>
2: <%@page import="java.util.List"%>
3: <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
4: <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
5: <%  
6: 
7: DiskFileItemFactory factory = new DiskFileItemFactory();
8: ServletFileUpload upload = new ServletFileUpload(factory);
9: //@SuppressWarnings("unchecked")
10: List items = upload.parseRequest(request);
11: for(int i= 0; i <items.size(); i++){
12:  FileItem item = (FileItem)items.get(i);
13:  if(!item.isFormField())
14:  {
15:   out.write(new String(item.get(), "UTF-8"));
16:  }
17: }
18: %>

Sunday, November 29, 2009

How to host your Blogger theme images

I was thinking on the topic for my first blog post. Suddenly, I realized that there is one little problem I just solved and probably should share with others.

I was searching for a good simple theme for my new software development oriented blog. There are some nice free themes to start with on the net. I picked one, customized a little bit (few css and image tweaks), and just before saving it in Blogger Settings Layout panel, my brain threw an exception, saying: “Man, you need some place to host your theme image files!”. Fortunately, I managed to catch that and after some stack trace investigation came up with a few possible recovery solutions:
  • Find similar images (mostly background) on the net and use that
  • Host images on some free/paid hosting site
  • Host images on Blogger itself
Well, the first one is not reliable, at least, and although images in my theme are very simple I would have to find similar ones. Second one is not logical, if I need some place to host something related to my blog on Blogger, than why do I need Blogger at all? The last one seems to be the most reliable and elegant solution. And actually simple one.

All you need is to create a new post, insert all the images used in your theme and publish it (or save as a draft if you do not want everyone to see some strange post with a list of 1px wide images). That’s it. If you see your images in your browser than Blogger hosts them, right? Then there is some URL, right? Absolutely. Now you need to update your theme with URLs of the images from your post hosted on Blogger.

Well, in fact, this post is exactly that post which contains those 2 images used in my theme. You can see them below.




Ok, this is my first post on this blog and I hope it will be useful to someone. If it is, please drop some note below. It is really nice to hear that these few bytes of information help someone.