• Sitemaps en site indexes te maken
• Robot verkeer te regelen
• Analyseren van de site

Het analyseren beperkt zich niet tot een IIS site maar kan op een willekeurige site worden losgelaten. Ik heb dit direct losgelaten op onze nieuwe ‘out of the box’ WordPress installatie en was vervolgens erg snel klaar met de analyse. De robot.txt blokkeerde alles. Dit was natuurlijk snel opgelost maar dit geeft maar aan dat controle van je site niet overbodig is.

De toolkit is zeer eenvoudig te installeren via de Microsoft Web platform installer (dowload) applicatie. Met deze applicatie is het beheren van je webserver zeer eenvoudig.

Google Web Toolkit is cool, and so is OSGi. However, when building a web UI for Apache ACE, I found out that creating a web application that can use OSGi services is not that easy. By the end of this tutorial, you will have created a GWT project that delivers a usable jar. If you’re impatient, skip to the end for the downloadable Eclipse project.

Step 1: Create a GWT project

Create a regular GWT project using the regular webAppCreator; this will give you a project that includes an Ant buildfile, we will need that later on.

angelos:workspace angelos$ ./gwt-mac-1.6.4/webAppCreator -out GwtDemo net.luminis.gwt.gwtdemo
Created directory GwtDemo/src
Created directory GwtDemo/war
Created directory GwtDemo/war/WEB-INF
Created directory GwtDemo/war/WEB-INF/lib
Created directory GwtDemo/src/net/luminis/gwt
Created directory GwtDemo/src/net/luminis/gwt/client
Created directory GwtDemo/src/net/luminis/gwt/server
Created file GwtDemo/src/net/luminis/gwt/gwtdemo.gwt.xml
Created file GwtDemo/war/gwtdemo.html
Created file GwtDemo/war/gwtdemo.css
Created file GwtDemo/war/WEB-INF/web.xml
Created file GwtDemo/src/net/luminis/gwt/client/gwtdemo.java
Created file GwtDemo/src/net/luminis/gwt/client/GreetingService.java
Created file GwtDemo/src/net/luminis/gwt/client/GreetingServiceAsync.java
Created file GwtDemo/src/net/luminis/gwt/server/GreetingServiceImpl.java
Created file GwtDemo/build.xml
Created file GwtDemo/README.txt
Created file GwtDemo/.project
Created file GwtDemo/.classpath
Created file GwtDemo/gwtdemo.launch
Created file GwtDemo/war/WEB-INF/lib/gwt-servlet.jar

If you want to, you can import this project directly into your Eclipse. If you check the mark “use Google Web Toolkit” in the project properties, you can use all the same goodies that creating the project in Eclipse would have given you. Remember to replace the buildpath entries for gwt-user.jar and gwt-dev-*.jar by a Library import for GWT.

Step 2: Include the necessary OSGi references

Create an ‘ext’ directory, and add org.osgi.core.jar to that. In Eclipse, add this jar to your build path.

Step 3: Use OSGi services from your web applicaiton

We will first add a simple Activator on the server side.

package net.luminis.gwt.server;
 
import org.osgi.framework.BundleActivator;
import org.osgi.framework.BundleContext;
 
public class Activator implements BundleActivator {
    private static BundleContext m_context;
 
    public static BundleContext getContext() {
        return m_context;
    }
 
    public void start(BundleContext context) throws Exception {
        m_context = context;
    }
 
    public void stop(BundleContext context) throws Exception {
    }
}

Then, we up the GreetingServiceImpl to actually use this BundleContext (note that we use it directly here, but you could use it to get other services, create a ServiceTracker, etc.)

public String greetServer(String input) {
  String serverInfo = getServletContext().getServerInfo();
  String userAgent = getThreadLocalRequest().getHeader("User-Agent");
  return "Hello, " + input + "!
 
I am running " + serverInfo
    + ".
 
It looks like you are using:" + userAgent +
    "The framework we run from has " + Activator.getContext().getBundles().length + " bundles in it.";
}

Step 4: Add OSGi dependencies for the compiler

Add our OSGi dependencies to the classpath, so the compiler can find all of it.

    <!-- Add any additional non-server libs (such as JUnit) -->

Right, let’s give it a try!

angelos:GwtDemo angelos$ ant war
Buildfile: build.xml
 
...some output removed...
 
war:
[zip] Building zip: /Users/angelos/workspace/workspace/GwtDemo/gwtdemo.war
 
BUILD SUCCESSFUL
Total time: 36 seconds

You will find a war in your project directory now. There still is one ingredient we need. We need to make this into a proper bundle. We can use bnd to help us with that.

Step 5: use bnd to create a proper war

Download bnd, and put into a lib directory, and add it to your buildfile.

We create a new target that transforms our war into a jar.

<target name="jar">
    <copy file="gwtdemo.war" tofile="gwtdemo.jar"/>
    <echo file="gwtdemo.bnd">Import-Package: junit.framework;resolution:=optional, com.google.gwt.*;resolution:=optional, org.w3c.*;resolution:=optional, sun.misc;resolution:=optional, javax.imageio;resolution:=optional, javax.servlet.*;resolution:=optional, *
Bundle-Name: GWT Demo
Bundle-ClassPath: WEB-INF/classes, WEB-INF/lib/gwt-servlet.jar
Bundle-SymbolicName: net.luminis.gwt.gwtdemo
Webapp-Context: gwtdemo
Bundle-Activator: net.luminis.gwt.server.Activator
    </echo>
    <bndwrap jars="gwtdemo.jar" output="gwtdemo.jar"/>
    <jar file="gwtdemo.jar" update="true">
    <manifest>
        <attribute name="Bundle-ClassPath" value="WEB-INF/classes, WEB-INF/lib/gwt-servlet.jar, ."/>
     </manifest>
    </jar>
    <delete file="gwtdemo.bnd"/>
</target>

What’s happening here?

• we copy our war to the same file, but with a jar extension,
• we create a file for bnd to use, stating that we
  • want optional imports for junit and the gwt benchmarks, and non-optional imports for everything else (that what the * is for),
  • have some classes that we want bnd to scan for finding dependencies,
  • want to use a given Webapp-Context (this is a Pax war extender specific entry),
• let bnd do its magic,
• update our manifest: we put the . back on the classpath. This is important for the web application to find all resources, but if we would tell bnd to do it like this, it would treat . as the root of the classpath.
• Finally, we delete that temporary bnd file.

What does that give us?

angelos:GwtDemo angelos$ ant jar
Buildfile: build.xml
 
...some output removed...
 
jar:
[copy] Copying 1 file to /Users/angelos/workspace/workspace/GwtDemo
[bndwrap] gwtdemo 41 910305
[bndwrap] Warnings
[bndwrap] Superfluous export-package instructions: [WEB-INF.classes.net, gwtdemo.gwt.standard.images, WEB-INF, gwtdemo, WEB-INF.classes.net.luminis.gwt, gwtdemo.gwt.standard, WEB-INF.classes.net.luminis, WEB-INF.lib, WEB-INF.classes, gwtdemo.gwt.standard.images.ie6, WEB-INF.classes.net.luminis.gwt.client, WEB-INF.classes.net.luminis.gwt.server, gwtdemo.gwt]
[jar] Updating jar: /Users/angelos/workspace/workspace/GwtDemo/gwtdemo.jar
[delete] Deleting: /Users/angelos/workspace/workspace/GwtDemo/gwtdemo.bnd
 
BUILD SUCCESSFUL
Total time: 23 seconds

That’s it! You can now deploy this jar into a framework that uses the pax web tools. Right, let’s give that a try.

Download pax-runner, and unzip that somewhere. Copy in your new jar, an try the following command

angelos:pax-runner angelos$ sh bin/pax-run.sh --profiles=war,compendium gwtdemo.jar

Now visit http://localhost:8080/gwtdemo:

Summary

So, what did we need?

• A fairly regular GWT project, create with an Ant file,
• some code that tries to use OSGi services,
• some bnd magic to make the war into a jar,
• Pax tools to get it all running quickly.

If you don’t want to use pax runner, you can need to deploy pax-web-extender-war(jar, snapshot 23 June) and an http server, preferably pax-web-service(jar), into your framework.

You can download the gwtdemo Eclipse project to play around with it. I have not provided the GWT runtime in this download; you should edit line 4 of the build.xml to point to your installation of GWT.

During the last few weeks, we’ve been working on setting up a sample application using Adobe Flex / ActionScript (working with Adobe Flex Builder 3).

Luminis had already developed a Web application for Nedap Healthcare, and we would like to know whether a desktop variant with an offline scenario would be possible. The web application displays items such as a worksheet, planning, news, weather and birthdays of colleagues.

The desktop application does not include all functionality of the Web application, but focuses on the worksheet. The existing functionality will be rebuilt in Flex and Air. The focus of our assignment was on modifying times in the worksheet and implementing an online / offline scenario.

User Interface

Web applications have set a new trend in interface design. The rules of interface design are no longer bound by the rules of the Operating System, and also no longer bound by the rules of the developer. The design for Web applications is usually defined by a designer, and implemented by the developer. For example the Gmail look and feel differs from a standard desktop application, but works in a familiar way. Buttons remain buttons, and input fields look like input fields, but there is the freedom to create a completely new interaction model and design.

The web application we were to base our desktop application on was designed by one of our team members which also did the interaction model. A specific design for a software application can help the customer to recognize the product and get a better feeling about the application. Don’t think of it as your corporate style embedded in the software, but also as user-friendly since it is targeted toward the end user.

The desktop application is a simple, familiar, user-friendly version of the Web application to be used by the target audience: women aged 40-50 years with little to no computer experience.

The interface is a direct derivative of the Web application and has the same look and feel.
The desktop application provides the same functionality as the web application, adding the possibility of changing times and the control of the application when it is offline.

Flex

Flex makes it easy and fast to build applications. This is especially due to the many standard components. Much can be modified in Flex, such as colors and properties such as shadows and corners. Also refer to the
Flex 3 Style Explorer

The same functionality of our Flex application could be built quickly if we would use standard Flex. The challenge was to make no concessions to our design. In this process in which we were responsible for design and implementation, it was occasionally hard to make a balance between adjusting the design or features in Flex to match original design.

The implementation

The most common approach building software appliances, is to build it with the standard components and skin it later on. This not only affects the design, but also does not involve the end user in the process.

The implementation chosen here is the same as implementing a design in HTML. From the existing design, slice the PSD and create a grid in Flex. Put the images into the grid and translate component design to Flex where necessary.

In Flex, the possibilities are extensive and there are minimal restrictions. Also covered are a lot of design possibilities like rounded corners, drop shadows and glows. This makes building your application very flexible. But also means you rebuild your original (Photoshop) design in Flex. So adjusting your original design could mean rebuilding your Flex implementation.

For example, when using the application, we noticed that there were indicators missing in the design. These were:

• Feedback to notify the user what the application was doing.
• An indication of whether the application was online or offline.

Not wanting to create a new, more complex design (adding items such as a status bar or an online/offline indicator [on/off light bulb]), we chose to show the online and offline situation turning the colors of the application to black and white, and displayed the status at the place where it is triggered on the button. The button is not useful when the application is busy.

Technologies

This should give an overview of the issues we ran into and how we solved them in the context of using the mentioned technologies to setup an AIR application. To get a bit of an overview of the possibilities of Flex / get familiar with the subject, a good first step would be to check out Tour de Flex. Since that application includes all (re)sources, it’s also very convenient as a reference / to get basic samples up-and-running quickly.

Now, moving on to the issues encountered and how we tackled them. Please note that the sample code below includes only non-standard import statements and is taken from an Adobe AIR application that uses AIR-only functionality!

XML

It took a while to get a bit of a feeling for creating and handling XML type objects. To illustrate, a number of relevant subtleties are incorporated in the following bit of code:

    var i:int = 2;
    var s:String = 'green';

    // Convert a String value to an XML object to create the first element:
    var e1:XML = XML("<element attr1='1'><label>first label</label>" +
                     "<color>blue</color></element>");

    // Create the second XML element using the values of variables 'i' and 's':
    var e2:XML =
        <element attr1={i}>
            <label>second label</label>
            <color>{s}</color>
        </element>;

    // Now create the final XML object using the 2 elements that were created:
    var x1:XML = <main>{e1}{e2}</main>;

    // And query it for a specific attribute value ('attr1', be sure not to forget the '@'!)
    // and element value (color) to determine the label value of a specific element:
    var result:String = x1.element.(@attr1 == 2).(color == 'green').label;
    // The value of the 'result' variable now is "second label". It would've been an empty
    // string ("") in case no matching element was found.

HTTP POST

The application started out using only the HTTP GET method, which was easily achieved by using the HTTPService. However it was soon necessary to post data as well and getting the HTTPService to do this properly / finding some good examples (or even debuggin the (https) requests that were created properly) turned out to be a bit of a hassle. When we stumbled upon the URLRequest we got things up-and-running fairly easily:

    import flash.net.*;

    private function onPostComplete(event:Event):void {
    }

    private function doPost():void {
        var dataToPost:XML = x1; // Posting the XML object from the previous example.
        var urlLoader:URLLoader = new URLLoader();

        // Define a handler in which actions can be defined for when the post is complete.
        urlLoader.addEventListener(Event.COMPLETE, onPostComplete);

        var urlToPostTo:String = "https://fillinyourhosthere.net/post.xml"
        var urlRequest:URLRequest = new URLRequest(urlToPostTo);
        urlRequest.data = dataToPost.toXMLString();
        urlRequest.method = URLRequestMethod.POST;
        urlLoader.load(urlRequest);
    }

Online / Offline

Another requirement of the application was that it should be usable even if the target server went down or the client using the application is offline. As it turns out, this functionality is readily provided through using the URLMonitor:

    // This code assumes a 'mx:WindowedApplication' with 'initialize="onWindowInitialized(event)"'.

    import air.net.URLMonitor;

    private var m_monitor:URLMonitor;

    private function onWindowInitialized(e:Event):void {
        var serviceURL:String = "https://fillinyourhosthere.net";
        var serviceToMonitor:URLRequest = new URLRequest(serviceURL);
        m_monitor = new URLMonitor(serviceToMonitor);
        m_monitor.addEventListener(StatusEvent.STATUS, announceStatus);
        m_monitor.start();
    }

    private function announceStatus(e:StatusEvent):void {
        if (m_monitor.available) {
            // Possibly update work that was done if previously offline.
        } else {
            // The application is (now) offline.
        }
    }

Updating DataProvider data

When using e.g. an array of data objects as a dataprovider for a TileList (or a DataGrid/AdvancedDataGrid) and changing (the value of) an item in the array, the view isn’t (always) updated immediately. If you want to see the changes immediately, you should use the invalidateList() method:

    <mx:TileList
        id="tl"
        dataProvider="myDataProvider"
    <!-- ...rest of the declaration... -->

    // Do something that updates myDataProvider data.
    tl.invalidateList();

Conclusion

There are still some things that could be improved on.

It would be preferable that the hours could be entered only through the use of keyboard, or mouse. Now you have to use both, and that makes it less intuitive. And corrupted/invalid data could be entered as the input fields are not masked.

Using Flex as a RIA developer kit can be fun, especially for designer who already know a bit of HTML/CSS and Javascript. Creating a skinned application in Flex is easy to do but still takes more time time than using the original components.

Patrick de Klein & Jaap Vriend