Web UI techniques

Ant and gui components ( Groovy Swing )

2009-01-07T07:09:00.000-08:00

What to do if you want to extend ant scripts functionality with some gui features i.e. wizards for the beginners etc. ? I was facing the same problem - I needed some quick and nice solution so my choice was Swing and Java, well not directly - it's Groovy and SwingBuilder. It's even easier :)

Two things, we need to create our component in Groovy and integrate it with Ant's environment.

Component's key parts and structure ( Groovy ):

Some explanations:

We need to add the code preventing from the thread termination due to Ant policies. Ant executes target and ends its work by terminating its thread and all sub threads.

isAlive - flag which indicates whether component is alive or not


class Configurator extends SoftwareBuild {

boolean isAlive = true
SwingBuilder swing = null
JFrame frame = null

public void init(AntBuilder providerAntBuilder) {
  if (swing == null || frame == null) {
      swing = new SwingBuilder()
      frame = swing.frame()
  }
  super.init(providerAntBuilder);
}


public void start() {

  frame = swing.frame(title: 'Vine configurator', size: [800, 600],
          defaultCloseOperation: WindowConstants.EXIT_ON_CLOSE,
          addShutdownHook { isAlive = false}) {
        
  }

  frame.show()

  //To keep this tread alive - prevents from being closed by ant
  while (isAlive) {
      sleep(1000)
  }

}

Invocation of our component from the ant script level ( Ant's build.xml ):


<target name="gui" description="Displays gui for Vine configuration">
  <groovy>

      ant.gui.Configurator configurator = new ant.gui.Configurator()
      try {
// from the level of Ant's build script we're passing a reference to the ant environment
      configurator.init(ant)
// displaying our swing component
      configurator.start()
      } catch (Exception e) {
      e.printStackTrace()
      }

  </groovy>
</target>

Ant the effect of this work is ( based on the example from the Vine Toolkit ):

mxmlc ant Flex task in Groovy

2008-12-31T02:01:00.001-08:00

Hi,

lately, there was a need to add a flex compilation feature to the Vine Toolkit build system. In the build scripts we're using Groovy as our extension to Ant scripts so I designed some additional logic to automatically choose source files and compile them in a special manner:

compile only source files with the Vine Toolkit extensions,
add locale bundles,
add dependent source paths,
add external libraries.

I'm presenting this code because not all options were mapped correctly in ant task def, especially the external library path was pretty troublesome :)

Here is the code snippet:

flexAppPath - path to the flex sources.
flexLocalePath - path to the flex locale bundles.
dependentSourcePath - path to dependent flex sources.
flexLibPath - path to the external swc libraries.



        antBuilder.fileset(id: "flexSourcesList", dir: flexAppPath,
                includes: "**/*.mxml") {
                antBuilder.contains(text: "VineApplication")

        if (new File(flexLibPath).exists()) {
            antBuilder.fileset(id: "flexLibList", dir: flexLibPath,
                    includes: "**/*.swc")

        }


        antBuilder.project.references.flexSourcesList.each {
            println "Compiling " + it.name
            antBuilder.mxmlc(
                    file: it) {
                antBuilder.'use-network'('true')
                antBuilder.'compiler.strict'('true')
                antBuilder.'compiler.context-root'('gridsphere')
                antBuilder.'compiler.services'(applicationBuild.getBuildAptPath() + '/WEB-INF/services-config.xml')
                println "*    Using services-config.xml file from: " + applicationBuild.getBuildAptPath() + '/WEB-INF/services-config.xml'
                println "**   Adding locale source path: " + flexLocalePath + '/{locale}'
                antBuilder.'compiler.source-path'(flexLocalePath + '/{locale}')

                new File(flexLocalePath).listFiles().each {
                    if (!it.name.startsWith(".")) {
                        println "**   Adding locale: " + it.name
                        antBuilder.'compiler.locale'(it.name)
                    }
                }

                antBuilder.'compiler.source-path'('path-element': flexAppPath)
                println "***  Adding dependency from: " + flexAppPath

                usesProjectBuildList.each {
                        String dependentSourcePath = it + 'flex/src'
                        antBuilder.'compiler.source-path'('path-element': dependentSourcePath)
                        println "***  Adding dependency from: " + dependentSourcePath
                
                }
                antBuilder.project.references.flexLibList.each {
                    String libraryPath = it
                    println "**** Adding external library: " + libraryPath
                    antBuilder.'compiler.library-path'('file': libraryPath, 'append': 'true')
                }
            }

I especially like this code for listing files:



new File(flexLocalePath).listFiles().each {
if (!it.name.startsWith(".")) {
println "**   Adding locale: " + it.name
antBuilder.'compiler.locale'(it.name)
}
}

This is the pure power of Groovy especially in conjunction with ant features.

Enjoy :)

Simple example of fish eye effect in flex

2008-12-30T01:06:00.001-08:00

Ok,

it's very simple, but can do the work :) Below, there is a screenshot from the rss component from Vine Toolkit - you can change views using that feature. When pointer is over the icon it's being zoomed in, with pointer out of the icon area it's zoomed out to its original state. Additionally whole logic ( except effect definitions ) is done on the Action Script side.

In the mxml code define 2 effects responsible for the image resizing:


<mx:Zoom id="zoomIn" zoomHeightTo="1.1" zoomWidthTo="1.1"></mx:Zoom>
<mx:Zoom id="zoomOut" zoomHeightTo="1.0" zoomWidthTo="1.0"></mx:Zoom>

Then in our as class we need a logic for creating icons with their handlers:


[Bindable]

[Embed(source="assets/panel_view_250_176.png")]

static public var panelViewIcon:Class;

[Bindable]

[Embed(source="assets/accordion_view_250_176.png")]

static public var accordionViewIcon:Class;

[Bindable]

[Embed(source="assets/tab_view_250_176.png")]

static public var tabViewIcon:Class;



public function createChangeViewHBox():void {

   viewHBox = new HBox();



   var panelViewButton:Button = new Button();

   panelViewButton.setStyle("icon", panelViewIcon);



   panelViewButton.addEventListener(flash.events.MouseEvent.CLICK, 

    function(event:flash.events.MouseEvent):void {

       PopUpManager.removePopUp(viewHBox);

       Alert.show("panelViewButton clicked");

   });



   panelViewButton.setStyle("rollOverEffect", zoomIn);

   panelViewButton.setStyle("rollOutEffect", zoomOut);



   viewHBox.addChild(panelViewButton);



   var accordionViewButton:Button = new Button();

   accordionViewButton.setStyle("icon", accordionViewIcon)

   accordionViewButton.addEventListener(flash.events.MouseEvent.CLICK,

    function(event:flash.events.MouseEvent):void {

       PopUpManager.removePopUp(viewHBox);

       Alert.show("accordionViewButton clicked");

   });

   accordionViewButton.setStyle("rollOverEffect", zoomIn);

   accordionViewButton.setStyle("rollOutEffect", zoomOut);



   viewHBox.addChild(accordionViewButton);



   var tabViewButton:Button = new Button();

   tabViewButton.setStyle("icon", tabViewIcon)

   tabViewButton.addEventListener(flash.events.MouseEvent.CLICK, 

    function(event:flash.events.MouseEvent):void {

       PopUpManager.removePopUp(viewHBox);

       Alert.show("tabViewButton clicked");

   });

   tabViewButton.setStyle("rollOverEffect", zoomIn);

   tabViewButton.setStyle("rollOutEffect", zoomOut);



   viewHBox.addChild(tabViewButton);

}

As you can see it's pretty simple code, just don't forget that effects and icons are set via setStyle() method.

Second thing, viewHBox is a separate widget just to make a popup of it.

VineToolkit as a Java / Flex / BlazeDs web MVC framework

2008-12-19T04:58:00.000-08:00

As I've mentioned before I'd like to present you my main field of research and work - Vine Toolkit framework. This is pretty interesting piece of software, especially because of its modular structure. In a current form it could be perceived as a MVC framework with the following structure:

You can see here that I've included some mappings between the server and client side. If you're familiar with BlazeDs and Flex you'll notice that right away - it's the Remoting from BlazeDs integrated trough our additional logic with a hosting environment ( i.e. portlet container - session/user management and so on ).

But what Vine gives you apart from that ? Ease of use. What does it stands for ? There are two things which do all the magic:

- build system:

It's a set of powerful scripts ( Ant mixed with Groovy ) responsible for building all parts of Vine and performing additional pre/post-processing task. It means that with one command:

ant install

build system will fetch all needed sources from the svn, compile Java and Flex source files, process all annotations of classes and generate configuration files for BlazeDs and servlet/portlet container. Then it will deploy all that stuff to the target environment and performs some post-processing tasks like tuning deployment descriptors in a destination environment.

Another use-case is to add new components - it's just creating another project with our gui wizard - then you'll get a template component which could be a base to your new one.

- integration logic:

we've created several tools responsible for hiding some implementation details from the end user ( there is a base class on the client side which is responsible for the MVC logic and adds some helper methods i.e. to manage file upload/download ) and on the server side we have logic which among the others is synchronizing data between hosting environment and user components, it's responsible for the model persistence and so on.

I didn't mention about the strong HPC/Grid background of Vine, it's added value here. Thanks to the modular structure of Vine we extended its basic functionality and added a resource model - the resource in Vine could be any concept i.e. file system resource, task resource etc.

As a base functionality we give you a local file system resource where user can store his files with advanced file upload/download control, possibility to define your own custom resources and much more. If you want to do something with a HPC you can use our grid sub-projects like:

- Globus Toolkit, G-Lite, Unicore support with their secuirity solutions,

- support for grid file systems,

- support for info services.

Then you'll gain a grid context in your components and a transparent way to access them.

Of course this is just general description of Vine Toolkit. If you get interested in that you can go to the vinetookit.org page and get into details..

To begin with..

2008-12-19T02:27:00.000-08:00

Hi,

just few words of introduction. The main purpose of this blog is to share my ideas regarding Web UI with you. Many times sites like this were saving me a lot of time and now I'd like to give something in exchange :) I'll mainly focus on the Flex / BlazeDs issues as well as on the Groovy scripting language since I'm using it to enhance Ant build scripts in our framework. Talking about that, I'm the core developer in the Vine Toolkit project and most cases my posts will be the solutions to problems I have faced there. I'll also do a brief presentation of this framework - it's the glue between Flex/BlazeDs and the web application containers like Tomcat and it could be deployed in a portlet containers ( Gridsphere ) as a set of integrated portlet components.

That all for now.

Cheers,

Piotr