Lately I've been learning the ins and outs of the Scala language and I have to say, having programmed in Java for the past several years, that Scala is scratching where I itch. It is a lot to grasp and mind opening, but all-in-all I see Scala as what Java could have evolved to if they would have just been willing to ditch some backwards compatibility and fix some stuff rather than just adding more and more work-arounds.

Anyway, that's not the point of this post. I wanted to post some cool loop examples I've been playing with in Scala.

In Java we have the standard incrementing for-loop:

for (int i = 0; i < 10; i++) {
    ...
}

In Scala we have something similar, but I believe more elegant:

for (i <- 0 until 10) {
    ...
}

However, with Java 1.5 we got the enhanced for-loop when we don't care about indexes:

for (String s : listOfStrings) {
    ...
}

In Scala we do something similar, but with a more consistent syntax:

for (s <- listOfStrings) {
    ...
}

Or, we can go a step further with Scala since it's a functional language we can get rid of the for loop entirely and use a friendly method available to us called "foreach" and pass each entry to another method:

listOfStrings.foreach(doSomething);

def doSomething(s:String):Unit = {
    ...
}

To me this is of significant appeal because we don't end up with a bunch of embedded for-loop blocks in our methods we focus more on modular functionality to deal with the results of the iteration instead.

From the outside looking in it would appear that jSeamless is all but dead, but if you've been paying attention to SVN commits you'll notice there's been quite a lot of activity for the past several months. I have somewhat abandoned what small community I had with jSeamless 1.0 in an effort to "start over" with what I believe is the next generation of UI development. I know there seem to be more web frameworks these days than there are developers using them, but I believe that jSeamless 2.0 has several things going for it that goes outside the scope of any UI framework available today. I know that's an ambitious statement, and I hope in this post to back it up enough to push the point home.

So, from a high-level, here are a few of the major features to look forward to in jSeamless 2.0:

Properties

As discussed in previous blog entries the plain old java beans ideology is one that does not lend itself to extensibility and re-use, so the introduction of Properties into the UI framework creates some amazing possibilities with surprisingly elegant results.

Binding

Binding is one of those buzz-word features that both Flex and JavaFX boast and one of the major reasons JavaFX claims to need its own language is because binding is just plain ugly in Java. However, in jSeamless, with the use of Properties, to bind the 'x' position of component2 to the 'x' position of component1 this can be accomplished with the following single-line elegant line of code:

component1.location.x.bind(component2.location.x);

Yes, that's all you have to do to get real-time property binding.

OpenGL

One of the biggest reasons jSeamless 1.0 delved into the realm of Flash/Flex was because Swing was so incredibly slow and lacked many of the niceties professional developers have come to expect from their frameworks. OpenGL not only solves this problem, but laughs in the face of any other competing graphical framework as it boasts FPS rates in the thousands when Flash struggles for framerates in the hundreds. OpenGL is by far the fastest graphical API available on all the major operating systems. Beyond the fact it spits on all the competition, it adds complete 3D capabilities to the landscape of capabilities people can utilize in their UIs. I could spend several pages elaborating on the features that OpenGL brings to the table, but the best example is just to look at the capabilities of any modern game.

States

Similar to the States support in Flex, jSeamless introduces a similar, but far more powerful, concept in its framework. There are default states associated with basic components like Button (over, pressed, focused, etc.) but they can be modified, removed, and since they use Property references the activation of a State in one Component can modify the appearance of another Component.

No Effects

Yes, this sounds like a disadvantage rather than an advantage, but through my extensive use of Flex in jSeamless 1.0 it became very evident that Effects in their common state add more complexity and frustration than benefit to any complex application. The primary cause of this is what is known as "effect fighting". This occurs when you have two effects that are attempting to modify the same values on the same component toward different ends. In an environment where you want modularity this can be a common occurrence because you have no way of easily determining whether an effect is currently being enacted on the property you wish to enact an effect on, nor do you have the ability to gracefully handle that scenario. You end up with a component jumping around like it can't really decide where it wants to be on the screen. Beyond that, having to create an instance of an effect per scenario leads to a lot of code and having to monitor different scenarios (effect causing something to change, or a direct modification). Finally, you run the risk of something concurrently simply trying to set the value and it being overridden by an Effect in progress. After careful consideration the decision was made to leave Effects out entirely in favor of a new concept associated with every Property called PropertyAdjusters.

Property Adjusters

PropertyAdjusters, as the previous point states, is the alternative to Effects in jSeamless. This offers a simple, concise, and asynchronously mindful methodology of "adjusting" a property to some target. For example, rather than creating something like a MoveEffect, setting the start and end values, setting a duration, and playing it upon a Component you simply do something like this:

component.location.x.setAdjuster(new EasingPropertyAdjuster(Easing.LINEAR_IN, 5.0f));
component.location.x.set(500.0f);

That will apply an EasingPropertyAdjuster for every time the "set" method is invoked on that Property until the PropertyAdjuster is removed. This allows you to style your animations completely independent of the programmatic changes that happen elsewhere. Also, if you ever want to bypass a PropertyAdjuster you can simply invoke "setNow" on the Property to get you immediately to your destination regardless of any PropertyAdjuster that might be set. What's particularly nice about this is if half-way to 500.0f you make a call "set" passing 100.0f it will smoothly take the change and apply it to the animation in progress thus eliminating effect fighting and reducing the complexity of animations in programmatic UI development.

Easings

Simply put, easings are an algorithm that defines the path from one numeric value to another given a specific length of time. Rather than moving a box from left to right smoothly easings give you the ability to have it bounce into the new location.

For example, Easings simply add a polish to animations to move your application's effects from cheesy to professional. jSeamless supports all easings that Flex currently supports along with the ability to create your own with a simple to use interface to define the algorithm.

JMC Support / Media

If you are not familiar with JMC (Java Media Components) it is because it's not really talked about very often by itself. It is a media framework for Java that allows playing video and audio in many formats (FLV, H264, WMV, etc). Sun has blindly been pushing JavaFX which contains this very awesome new API, but they seem to be doing their best to block people from taking advantage of the functionality without buying into JavaFX lock, stock, and barrel. A few people like myself have spent a lot of time finding ways to make use of JMC in Java without the JavaFX dependencies and I have to say it has been very much worth the effort.

Swing Integration

It would be foolish to assume such a small endeavor like jSeamless could really garner the capabilities of a long-lived UI framework like Swing in the short-run. To that end there has been a lot of work done to provide Swing integration directly in jSeamless so all those custom components your application may need to take advantage of can still be used if you should decide to make the switch.

100% Java Framework

In jSeamless 1.0 the viability of Applets was nil, the ability to use OpenGL in the application was problematic (the whole Security Trust dialog), and the performance of Swing was lacking to put it mildly. All these things led to the decision to use Java on the back-end as a remote controller to a Flex front-end. The developer using jSeamless 1.0 only ever had to write Java code, but everything displayed in a Flex client. This was a cool idea, but in the years since that decision was made Java has come a long way. Applets have had new life breathed into them, Sun is magically trusted (JOGL signed JARs), and the world is our playground with the use of OpenGL. All of this was done in Java 1.6 update 10. It was this release of Java that made me have to rethink the whole concept of Java in the browser and Java on the desktop. jSeamless 2.0 has abandoned any ties to anything but straight Java (excepting of our JNI bindings to OpenGL via JOGL of course).

Scalable UI

With the introduction of OpenGL we now have the ability to define a "working resolution" that is not the same as the actual resolution. What this means is that you define your UI as an 800x600 statically defined UI and via the use of vector graphics (one of the very powerful features of jSeamless) have the content dynamically scale up to much higher resolutions "seamlessly" to the user. To them it appears that the UI was developed specifically for their screen size, but to you the development was much easier as you can utilize static pixel values that will get scaled dynamically to the proper resolution.

FXG and SVG Support

If you've never heard of FXG don't feel bad, it's a new feature Adobe has introduced with the new CS4 versions of their applications. It is designed as an XML-based format to portray vector and raster graphics exactly the same as they appear in Illustrator, Photoshop, etc. What is particularly cool about this is that not only does jSeamless have the ability to import FXG files, but the layer names and vector graphics are kept intact during the import. This means a graphical designer can create elements and name them in Illustrator, export it to FXG, you can then import the FXG file, and access the elements by their names and manipulate them directly.

Though not quite as cool, a still very useful feature is the ability to import SVG paths into jSeamless vector graphics.

Size and Location Support Percentages

A big frustration in Swing layout management has always been the pixel values you must put into location and size to determine where and how large your Component should be. This leads to a lot of boilerplate code to center, right-align, or arbitrarily place a component at a specific position based on percentage rather than pixel.

Flex did a much better job here by defining the ability to size components with a pixel or percentage. However, in jSeamless we're going for something much more powerful. We not only give size pixel and percentage values, we also allow defining of x and y location as pixel or percentages. Beyond that, we define an "alignment" to determine what point the percentage should be snapped to. Take this example:

component.location.x.set("50%");
component.location.x.align.set(HorizontalAlign.CENTER);

This sets the x location of the component to be 50% of it's parents size and then uses the CENTER alignment to make 50% represent where the component's "center" is giving us the ability to perfectly center the component within the parent without any boilerplate code.

Advanced Event System

One of the most powerful features of jSeamless 1.0 was the extremely powerful and flexible event system. It took many of the new concepts introduced in Flex, coupled them with a powerful multi-threaded ideology, and threw in a lot of new concepts nobody else had ever seen before to create what I humbly consider to be the best UI event system ever created. :)

Okay, yes, that's a pretty bold statement, but it's at least the most powerful event system I've ever seen in use anywhere...and I've used a lot of UI frameworks. With jSeamless 2.0 the same system was largely kept, but updated, performance improved significantly, and some additional features were added to hopefully take a great event system to the next level.

I would really like to get into specific details about the event system here, but as this post is already running long I'm going to have to make a special post to talk just about the event system in jSeamless as it's just too broad.

Vector Shapes

I've alluded to this already a few times, but jSeamless 2.0 is very centralized around vector graphics to allow scalable UI development, which is particularly beneficial in a 3D environment as content may scale up or down significantly depending on the current usage and perspective.

Suffice it to say, the support for vector graphics required to fully support the FXG format is a pretty broad range of features.

Fully Thread-Safe UI Framework

One of the major goals of jSeamless all along has been thread-safety. This is one area where Swing has always been a big disappointment. The need to use a SwingUtilities.invokeLater any time you want to make any changes to a component made code ridiculously ugly and frustrating to work with. Further, the single-threaded event system leading to a locked UI thread (by ignorant coders of course) is one of the primarily reasons people still think Swing responsiveness is poor at best. jSeamless 2.0 ran the same potential problems with OpenGL as it is required to be run in a single-thread, but all of jSeamless has been written to be thread-safe and hide any single-threaded functionality that must be handled directly in the OpenGL thread. To that end, we also introduce some very interesting multi-threaded rendering capabilities that allow components to render themselves in separate threads before pushing into the OpenGL stack.

jSeamless Google Code Project:
http://code.google.com/p/jseamless/

jSeamless 2.0 Branch in SVN:
http://jseamless.googlecode.com/svn/framework/branches/2.0/

jSeamless Forum:
http://forum.captiveimagination.com/index.php/board,14.0.html

This is definitely not an exhaustive list of features and functionality that jSeamless 2.0 provides. This is simply the functionality already being provided in the pre-alpha version of the framework. My goal in this post is hopefully to garner some interest and potentially some developers who might be interested in joining the project. The project is coming along quite well, but it is largely developed by a lone developer...me. I can always use another perspective and more help to bring this framework to its logical conclusion.

If you have any interest in joining the jSeamless project please contact me.

I posted over a year ago about Delegates in Java, and since I kicked off an exploration of the functionality I'm providing in my xjava framework with my previous post I thought I would continue with my newest iteration of the Delegates concept as utilized in xjava.

Until you use a language like Scala or Flex that has full delegate support, you can't really appreciate what it is you're missing. As Java programmers we take it for granted that if we need to do some "work" we usually have to create a Runnable implementation that implements the run() method to do the work we need to do:

  Runnable r = new Runnable() {
   public void run() {
    ... do work ...
   }
  };
  passWorkOff(r);

However, in other languages that support Delegates you can pass methods/functions as parameters to methods/functions to simplify this process greatly. Consider the alternative:

 public void someMethod() {
  passWorkOff(this.doWork);
 }
 
 public void doWork() {
  ... do work ...
 }

This minimizes the amount of custom/anonymous classes you must create in order to pass a unit of work off.

Unfortunately in Java this functionality is not (yet) supported. Many people have created work-arounds, generally with Java Reflection, but none can support the elegance of the native delegate support other languages have.

I may be known for my rants, but I won't leave you hanging here with a negative thought of Java, I love the language too much to do that. Besides, I have a framework to promote, so lets get to it. :)

In xjava there is a simple interface Delegate:

public interface Delegate {
 public Object invoke(Object ... args) throws Exception;
}

The invoke method takes a varargs of Objects and returns an Object. It's pretty straight and simple, but the out-working of the implementations are what add significant power to this concept.

There are several different implementations, but by far the most used and most powerful is MethodDelegate. In our above example of using delegates in other languages to pass a function, this imlementation fulfills that role with the following call:

MethodDelegate delegate = new MethodDelegate(this, "doWork");
passWorkOff(delegate);

This presumes that the passWorkOff method takes a Delegate as a parameter. Like I said, this isn't as good as native support, but it's pretty simple and although you lose the ability to have compile-time checking that you're referencing a valid method, it will throw an exception at runtime if the method referenced is unable to be found.

MethodDelegate has some extremely powerful features that have been added to make it even more powerful though. One such feature is the ability to mix and match when arguments are applied to the method being invoked. Say you have the following method you want to invoke:

public void doSomething(String name, String address) {
    ....
}

Now, at creation time of the Delegate you know what "name" is, but in the place you wish to use the delegate you only know the address. See the following:

public void someMethod() {
    Delegate d = MethodDelegate.createWithArgs(this, "createEntry", "John Doh");
    processAddress(d);
}

public void processAddress(Delegate d) {
    String address = "123 Nowhere Rd.";
    d.invoke(address);
}

public void createEntry(String name, String address) {
    ...
}

Notice that at creation time of the Delegate "John Doh" is passed in. This is assigned in the Delegate instance as the first argument to the MethodDelegate. Now, when d.invoke is called in processAddress rather than requiring both name and address just address is necessary to be passed since name has already been assigned.

This makes it incredibly easy to put parameters into the method when you're ready to do so rather than applying everything in one place.

Delegates in xjava also make it easy to abstract away from the underlying way data is being retrieved or being assigned. For example, in the above processAddress method, it simply takes a Delegate and invokes it passing the address to it. If you decided later that you would rather assign this to a field of an object rather than calling a method you would simply replace someMethod with this:

public void someMethod() {
    Delegate d = FieldDelegate.get(person, "address");
    processAddress(d);
}

This presumes the "person" reference is an object with a String "address" field represented within it. The FieldDelegate doubles for getter and setter since passing a value will apply it to the field and invoking without any arguments will get the value from it.

There are also implementations for CallableDelegate and RunnableDelegate that are self-explanatory.

As seen by the interface for Delegate it is extremely easy to create your own implementations of Delegate for whatever scenario you may want to support and abstract away the details of where and what you are actually accessing and though this isn't as elegant as it could be if Java supported delegates natively, it still provides a very decent mechanism for abstracting and simplifying the process of passable work.

See the xjava project for more information:
http://xjava.googlecode.com

Feel free to look at the source code directly:
http://xjava.googlecode.com/svn/trunk/src/org/xjava/delegates/

My previous post was more of a rant about the frustrations of Java Beans:

Have Beans been holding us back?

I stated at the end of my post/rant that my next post would be about what I suggest as the viable successor to Java Beans. To that end, I begin my discussion about properties.

Though I would like to claim the idea of properties as all my own invention, I cannot and the concept was even new to me when I first read about them here:

https://bean-properties.dev.java.net/tutorial.html

This is not really a new concept, but rather an attempt in Java to solve the problem other languages like C# and ActionScript solve with encapsulated properties that allow you to make calls like:

object.name = "Something";

Though this would appear to a Java developer as a public field being set to a value, in these languages there is a feature to provide special functions/methods for "set" and "get" of the private field and simplifies getter/setter functionality while maintaining a clean and consistent coding experience.

Unfortunately there is no such functionality built into Java and if you want to provide anything beyond assignment of fields to values you must use methods to accomplish this.

With Java 1.5 comes generics which really for the first time make properties practical without a lot of extending of classes. So take a simple example:

public class MyTest {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

Now, this is what it might look like using Properties:

public class MyTest {
    public final Property<String> name = new Property<String>(null);
}

Properties have set(T t) and T get() methods that replace getters and setters, so a call to change the value would look like:

myTest.name.set("Testing");

Compared to:

myTest.setName("Testing");

They are about the same amount of actual code. What's great here though is that your Property object could contain much more additional functionality that you otherwise would have to inject yourself. For example if Property had the ability to addPropertyChangeListeners:

myTest.addPropertyChangeListener(myChangeListener);
myTest.name.set("Testing");    // Will now invoke myChangeListener when called

Further, you could have something like NotNullableProperty that extends Property and throws a NullPointerException if you try to call set with a null value:

public class MyTest {
    public final NotNullableProperty<String> name = new NotNullableProperty<String>("");
}

Now a call to:

myTest.name.set(null);

Will throw a NPE and thus remove the need for you to ever have to check if "name" is null. This hopefully gives a slight grasp of the benefits this begins to provide.

Now, I mentioned above the article that really got me thinking this direction, but ultimately decided to write my own Property implementation because of some of the limitations and performance problems I saw with that implementation. Further, I had a lot of additional features I wanted to provide myself...and am often accused of wanting to write everything myself anyway. :)

This post isn't meant to push people to use a specific Property API but just to consider the methodology change even if they decide to write their own. After all, it only takes a few lines of code to create the base for your own Property class:

public class Property<T> {
    private T t;

    public T get() {
        return t;
    }

    public void set(T t) {
        this.t = t;
    }
}

From there you can add any desired functionality: property bindings, value validation, property change listeners, observer/observable functionality, null checks, etc.

Though I don't want to push anyone to necessarily use a specific API, I will give reference to my own Property API for anyone interested in using it as it provides a great deal of functionality and I'm heavily using it in nearly all new programming projects these days and it supports filtering, change notification, property delegates, binding, read-only, adjusters, and much more. It is part of my xjava project:

http://xjava.googlecode.com

To see the source code for my Property API in SVN:
http://xjava.googlecode.com/svn/trunk/src/org/xjava/bean/properties/

I have been a Java developer for many years now and have always taken for granted some of the standards pushed on me from the beginning. Java standards such as basic Java Beans (aka POJOs) are supposed to make life easier by providing simple getters/setters that work with the private fields of your Object. For years I have neglected to challenge this as it seemed perfectly natural, and when I started to use Eclipse and could simply tell Eclipse to generate the getters and setters for my beans for me it made it that much easier to simply ignore all the extra code being created.

Unfortunately, over the years there have been some additional frustrations that have resulted from this approach as I wrote more code and attempted to do more complex things in my projects. As a developer trying to write more efficient and more elegant code these things have been a constant reminder that no language nor methodology is ever perfect.

The first frustration which I found myself struggling with as a new developer not using an IDE (that happily writes code for me) is the many lines of code to simply modify a variable. For example:

public class SimpleBean {
   private String name;

   public String getName() {
       return name;
   }

   public void setName(String name) {
       this.name = name;
   }
}

Notice that it takes up seven lines of actual code put a simple String into my bean and that's not counting the whitespace added to "pretty it up". Sure, as a noob coder it's tempting to do something like this:

public class SimpleBean {
   public String name;
}

and be done with it. However, as a serious developer that's really not practical as it creates additional problems down the road when you want to add validation, remove the setter so it's a read-only field, notify something internally when the value changes, etc.

The next frustration I have with Java Beans is the fact absolutely EVERYTHING is a manual coding exercise. Take Java's Observer/Observable pattern for example. When I was beginning to learn Java I ran into the problem that I wanted to be notified when a value changed in one of my beans and stumbled upon a Observer/Observable tutorial and at first glance I thought, "Wow, this is really great and exactly what I want", until I realized in amazement they expect me to extend Observable and add an additional line of code to EVERY SINGLE setter call that I want to monitor. Come on, I was looking for abstraction to keep my beans dumb and simple, I don't want to add a bunch of extra lines of code to every method. Also, what if I'm already extending another class that I can't change? I'm sure many people might read this and think I'm just being nitpicky, and yes, I am, but I care a great deal about elegance in code and I was hoping for some sort of feature on my Field to "addChangeListener(...)" or something. Besides, every additional line of code is an added line that has to be filtered through when trying to read and debug and thus makes your code more error-prone and harder to manage.

Extending upon the previous frustration is bindings. There have been many a rant on the topic of bindings in Java and though there are many APIs and even a JSR set to solve the problem I have yet to see one do a good job. I myself tried to solve this with my MagicBeans project. There were many iterations of it, but the most elegant required AspectJ to monitor pointcuts on setter methods and notified listeners. It was a complete and elegant abstraction, but required your projects to be compiled with AspectJ which ultimately I abandoned as not worth the added pain.

Ultimately the Java Bean paradigm raises issues primarily in its requirement of the onus being on the developer to write any and all functionality. It disallows you to easily extend or reuse functionality in an Object-Oriented way because they are methods with statically typed fields they represent and though you can accomplish everything you might need to with beans they require a much greater commitment to custom code than should otherwise be expected of the developer in my opinion.

It is these things that have led me to believe there's a better solution, and I've settled on what I believe is the better choice, to which I will explain in-depth in my next post. :)

If you're like me and have been really excited by all the hype of JMC, but think of yourself as a Java developer and not a fly being beckoned to the newest scripting framework with its bright and illuminating glow (JavaFX that is) then JMC comes as something of a disappointment. After all, every article on the web referencing JMC seems to inseparably link JavaFX and JMC as if they absolutely *MUST* go together.

However, this is not the case. I've blogged before about the evils of JavaFX and how Java developers can leverage the functionality without selling your soul to the scripting demons:

http://www.matthicks.com/2009/02/i-hate-javafx-i-love-javafx.html

Someone else has taken this another step by taking the same approach for JMC:

http://nishimotz.com/2009/03/10/using-jmc-from-java/

Now, though what Takuya wrote is fully functional, I hate the idea of having to include JavaFX just to use JMC. After a bit of digging I have come to find what seems to be a hidden feature (maybe Sun just thinks the idea of someone using it outside of JavaFX is ridiculous and not worth mentioning?), the jmc.jar file you get with JavaFX has some interesting classes in it that you can take advantage of in your own Swing applications without any hackery at all:

package test;

import java.io.File;

import javax.swing.JFrame;

import com.sun.media.jmc.JMediaPlayer;

public class TestJMC {
 public static void main(String[] args) throws Exception {
  JFrame frame = new JFrame("Testing JMC"); {
   frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   frame.setSize(800, 600);
   
   JMediaPlayer player = new JMediaPlayer(new File("trailer_1080p.mov").toURI()); {
    frame.add(player);
   }
   
   frame.setVisible(true);
  }
 }
}

I hate it when people give references like this and don't give any mention of a test file that can be used along with it, so to let you know what I used, I simply grabbed the trailer for "Big Buck Bunny" here:

http://www.bigbuckbunny.org/index.php/trailer-page/

What's awesome is that any one of them should work fine. Now, the player controls kind of suck, but in that same package there are other, probably more useful Swing classes: JMediaPane and JMediaView.

One last note. You need to include the jmc.dll (or the correct native lib for your OS) file in your library path to be able to play or you'll get unfriendly errors.

Have fun being able to leverage full video playing in your Swing applications.

I made a post recently (I Hate JavaFX; I Love JavaFX) in which I did a preliminary investigation on the idea of using the JavaFX API directly in Java rather than relying on JavaFX Script to do the job. I used the Clock example I saw on a tutorial on Sun's site as a practical example of something already done in JavaFX that showed several of the features of JavaFX. The resulting code was rather hideous as the API was not designed to be used directly, but it did work.

My next step was to begin writing a wrapper around this ugly Java API to give an elegant API structure for developing Java applications that utilize the awesome functionality of JavaFX for those people that don't care to use the scripting language. After a few days of work I'm close to having an alpha build ready to release and decided to redo the Clock example using this wrapper to see how easily it could be done.

I give you the resulting code:

package org.jseamless.example;

import java.util.Calendar;

import org.jseamless.Container;
import org.jseamless.View;
import org.jseamless.core.HorizontalAlignment;
import org.jseamless.core.VerticalAlignment;
import org.jseamless.effect.DropShadow;
import org.jseamless.paint.Color;
import org.jseamless.resource.URLResource;
import org.jseamless.shape.Ellipse;
import org.jseamless.shape.Line;
import org.jseamless.shape.path.ArcTo;
import org.jseamless.shape.path.LineTo;
import org.jseamless.shape.path.MoveTo;
import org.jseamless.shape.path.Path;
import org.jseamless.ui.Image;
import org.jseamless.ui.Text;
import org.xjava.bean.properties.Binding;
import org.xjava.bean.properties.Property;
import org.xjava.delegates.MethodDelegate;
import org.xjava.operation.Operation;
import org.xjava.operation.OperationParser;
import org.xjava.work.DelegateWorkUnit;
import org.xjava.work.ThreadManager;

public class Clock extends Container {
 private float radius;
 private float centerX;
 private float centerY;
 
 private Calendar calendar;
 private Property hours;
 private Property minutes;
 private Property seconds;
 
 public Clock() {
  // Initial setup
  calendar = Calendar.getInstance();
  radius = 77.0f;
  centerX = 144.0f;
  centerY = 144.0f;
  
  hours = new Property(null, 0.0f);
  minutes = new Property(null, 0.0f);
  seconds = new Property(null, 0.0f);
  
  nextTick();
  
  size.fill();
  
  Image image = new Image(); {
   image.source.set(new URLResource(getClass().getClassLoader().getResource("resource/clock_background.png")));
   
   children.add(image);
  }
  
  Container face = new Container(); {
   face.translate.x.set(centerX);
   face.translate.y.set(centerY);
   
   // Every third hour
   for (int i = 3; i <= 12; i += 3) {
    Text t = new Text(); {
     t.translate.x.set(-5.0f);
     t.translate.y.set(5.0f);
     t.fontSize.set(16);
     t.text.set(String.valueOf(i));
     
     float x = radius * ((i + 0) % 2 * (2 - i / 3));
     float y = radius * ((i + 1) % 2 * (3 - i / 3));
     t.location.set(x, y);
     
     face.children.add(t);
    }
   }
   
   // Black circle for the rest of the hours
   for (int i = 1; i < 12; i++) {
    if (i % 3 == 0) {
     continue;  // Don't show a circle on the items that have text
    }
    
    Ellipse ellipse = new Ellipse(); {
     ellipse.rotation.set(30.0f * i);
     ellipse.location.x.set(radius);
     ellipse.location.x.align.set(HorizontalAlignment.CENTER);
     ellipse.location.y.align.set(VerticalAlignment.MIDDLE);
     ellipse.size.set(6.0f, 6.0f);
     ellipse.fill.set(Color.BLACK);
     
     face.children.add(ellipse);
    }
   }
   
   // Center circles
   Ellipse ellipse = new Ellipse(); {
    ellipse.location.x.align.set(HorizontalAlignment.CENTER);
    ellipse.location.y.align.set(VerticalAlignment.MIDDLE);
    ellipse.size.set(10.0f, 10.0f);
    ellipse.fill.set(Color.DARK_RED);
    
    face.children.add(ellipse);
   }
   ellipse = new Ellipse(); {
    ellipse.location.x.align.set(HorizontalAlignment.CENTER);
    ellipse.location.y.align.set(VerticalAlignment.MIDDLE);
    ellipse.size.set(6.0f, 6.0f);
    ellipse.fill.set(Color.RED);
    
    face.children.add(ellipse);
   }
   
   // Second hand
   Line line = new Line(); {
    DropShadow ds = new DropShadow(); {
     ds.offsetY.set(3.0f);
     
     line.effect.set(ds);
    }
    Binding b = line.rotation.bind(seconds); {
     OperationParser p = new OperationParser("(seconds * 6.0) + 90.0"); {
      p.setVariable("seconds", seconds);
     }
     Operation operation = p.generateOperation();
     b.setOperation(operation);
    }
    
    line.endX.set(-radius - 3.0f);
    line.stroke.set(Color.RED);
    line.stroke.width.set(2.0f);
    
    face.children.add(line);
   }
   
   // Hour hand
   Path path = new Path(); {
    DropShadow ds = new DropShadow(); {
     ds.offsetY.set(3.0f);
     
     path.effect.set(ds);
    }
    Binding b = path.rotation.bind(seconds); {
     OperationParser p = new OperationParser("((hours + (minutes / 60.0)) * 30.0) - 90.0"); {
      p.setVariable("hours", hours);
      p.setVariable("minutes", minutes);
     }
     Operation operation = p.generateOperation();
     b.setOperation(operation);
    }
    path.fill.set(Color.BLACK);
    
    MoveTo e1 = new MoveTo(); {
     e1.x.set(4.0f);
     e1.y.set(4.0f);
     
     path.elements.add(e1);
    }
    ArcTo e2 = new ArcTo(); {
     e2.x.set(4.0f);
     e2.y.set(-4.0f);
     e2.radiusX.set(1.0f);
     e2.radiusY.set(1.0f);
     
     path.elements.add(e2);
    }
    LineTo e3 = new LineTo(); {
     e3.x.set(radius - 15.0f);
     e3.y.set(0.0f);
     
     path.elements.add(e3);
    }
    
    face.children.add(path);
   }
   
   // Minute hand
   path = new Path(); {
    DropShadow ds = new DropShadow(); {
     ds.offsetY.set(3.0f);
     
     path.effect.set(ds);
    }
    Binding b = path.rotation.bind(seconds); {
     OperationParser p = new OperationParser("(minutes * 6.0) - 90.0"); {
      p.setVariable("minutes", minutes);
     }
     Operation operation = p.generateOperation();
     b.setOperation(operation);
    }
    
    path.fill.set(Color.BLACK);
    
    MoveTo e1 = new MoveTo(); {
     e1.x.set(4.0f);
     e1.y.set(4.0f);
     
     path.elements.add(e1);
    }
    ArcTo e2 = new ArcTo(); {
     e2.x.set(4.0f);
     e2.y.set(-4.0f);
     e2.radiusX.set(1.0f);
     e2.radiusY.set(1.0f);
     
     path.elements.add(e2);
    }
    LineTo e3 = new LineTo(); {
     e3.x.set(radius);
     e3.y.set(0.0f);
     
     path.elements.add(e3);
    }
    
    face.children.add(path);
   }
   
   children.add(face);
  }
 }
 
 public void start() throws InterruptedException {
  while (true) {
   nextTick();
   
   Thread.sleep(100);
  }
 }
 
 public void nextTick() {
  calendar.setTimeInMillis(System.currentTimeMillis());
  
  seconds.set((float)calendar.get(Calendar.SECOND));
  minutes.set((float)calendar.get(Calendar.MINUTE));
  hours.set((float)calendar.get(Calendar.HOUR));
 }
 
 public static void main(String[] args) throws Exception {
  Clock clock = new Clock();
  View view = View.createWindow(clock);
  view.title.set("jSeamless 2.0 Clock Example");
  view.size.set("800px", "600px");
  
  ThreadManager.getInstance().addWork(new DelegateWorkUnit(MethodDelegate.create(clock, "start")));
 }
}

It looks strikingly similar to the uglier direct calls, but has been cleaned up a lot. This is still just the first pass, so more will come, but there are a ton of additional features and standardization features that have been thrown in as well as work-arounds for the broken key event functionality and so on.

I will be posting more in the near future as development continues on this wrapper, but I have decided this is the next logical step for jSeamless, so jSeamless 2.0 will not end up being a true UI abstraction, but rather a powerful wrapper around JavaFX and Swing functionality with some icing on the top.

I've posted a few places and gotten into more than a few rants publicly about how awful I think it is that Sun has been pushing JavaFX to the Java community. This has not been based on what JavaFX provides, because I think that's absolutely spectacular, but rather that they created a whole new language (JavaFX Script) that they force you into using rather than Java code itself. I've heard all the well reasoned arguments for why this is from the binding support to simplified UI design concepts, but as a professional ActionScript developer as well as a professional Java developer, I believe that using a language that stinks of ActionScript is a major step backwards for the Java community. However, like I said, JavaFX has done an absolutely wonderful job of adding to the UI power of the Java arsenal though, and I want to use it. Since I know that the JavaFX Script compiles into Java byte-code, I knew there had to be some level of access to the underlying API structure directly from Java, but nobody seems to know how or where to do it. After quite a bit of digging I stumbled upon these two pages:

http://blogs.sun.com/javafx/entry/how_to_use_javafx_in

http://forums.sun.com/thread.jspa?threadID=5354921&tstart=1

They looked pretty ugly to me, but put me on the track to actually using JavaFX directly in Java without scripting. I sort of combined those two together to come up with what I think is a little bit more concise example:

package test;

import java.awt.BorderLayout;

import javax.swing.JFrame;
import javax.swing.JPanel;

import com.sun.scenario.scenegraph.JSGPanel;
import com.sun.scenario.scenegraph.SGNode;

import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;

public class TestJFX {
 public static void main(String[] args) throws Exception {
  Group group = new Group(); {
  }
  Rectangle rect = new Rectangle(); {
   rect.$width.setAsFloat(200.0f);
   rect.$height.setAsFloat(200.0f);
   rect.$fill.set(Color.$BLUE);
  }
  Text text = new Text(); {
   text.$x.setAsFloat(20.0f);
   text.$y.setAsFloat(20.0f);
   text.$content.set("Greetings Earthling!");
   text.$fill.set(Color.$WHITE);
  }
  group.$content.insert(rect);
  group.$content.insert(text);
  SGNode node = group.getSGGroup();
  JSGPanel sgPanel = new JSGPanel();
  sgPanel.setScene(node);
  
  JPanel panel = new JPanel();
  panel.setLayout(new BorderLayout());
  panel.add(sgPanel, BorderLayout.CENTER);
  
  JFrame frame = new JFrame("Test JavaFX");
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.add(panel);
  frame.setSize(800, 600);
  frame.setVisible(true);
 }
}

This isn't the prettiest or most efficient way to code, but it's a start. Next I decided that I'd like to reproduce the Clock example that JavaFX shows here:

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/

This gave me a much more practical run through JavaFX from the programmatic perspective and allowed me to verify that it is in fact possible to write a complete application using Java making calls to JavaFX:

package test;

import java.awt.BorderLayout;
import java.io.IOException;
import java.util.Calendar;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;

import com.sun.javafx.functions.Function0;
import com.sun.javafx.runtime.location.FloatBindingExpression;
import com.sun.javafx.runtime.location.FloatVariable;
import com.sun.scenario.scenegraph.JSGPanel;
import com.sun.scenario.scenegraph.SGNode;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.lang.Duration;
import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Translate;

/**
 * @author Matt Hicks (matt@matthicks.com)
 */
public class Clock {
 private float radius;
 private float centerX;
 private float centerY;
 
 private Calendar calendar;
 private int hours;
 private int minutes;
 private int seconds;
 
 private FloatVariable hoursVariable;
 private FloatVariable minutesVariable;
 private FloatVariable secondsVariable;
 
 public Clock() throws IOException {
  // Initial setup
  calendar = Calendar.getInstance();
  radius = 77;
  centerX = 144;
  centerY = 144;
  
  nextTick();
  
  // Build JavaFX clock
  Group group = new Group(); {
   ImageView imageView = new ImageView(); {
    Image image = new Image(); {
     image.$bufferedImage.set(ImageIO.read(getClass().getClassLoader().getResource("resource/clock_background.png")));
    }
    imageView.$image.set(image);
    
    group.$content.insert(imageView);
   }
   
   Group face = new Group(); {
    Translate translate = new Translate(); {
     translate.$x.setAsFloat(centerX);
     translate.$y.setAsFloat(centerY);
    }
    face.$transforms.insert(translate);
    
    // Every third hour
    for (int i = 3; i <= 12; i += 3) {
     Text text = new Text(); {
      translate = new Translate(); {
       translate.$x.setAsFloat(-5.0f);
       translate.$y.setAsFloat(5.0f);
      }
      text.$transforms.insert(translate);
      
      text.$font.set(Font.font("Arial", 16));
      
      text.$x.setAsFloat(radius * ((i + 0) % 2 * (2 - i / 3)));
      text.$y.setAsFloat(radius * ((i + 1) % 2 * (3 - i / 3)));
      text.$content.set(String.valueOf(i));
     }
     face.$content.insert(text);
    }
    
    // Black circle for the rest of the hours
    for (int i = 1; i < 12; i++) {
     if (i % 3 == 0) {
      continue; // Don't show a circle on every third hour
     }
     
     Circle circle = new Circle(); {
      Rotate rotate = new Rotate(); {
       rotate.$angle.setAsFloat(30.0f * i);
      }
      circle.$transforms.insert(rotate);
      circle.$centerX.setAsFloat(radius);
      circle.$radius.setAsFloat(3.0f);
      circle.$fill.set(Color.$BLACK);
     }
     face.$content.insert(circle);
    }
    
    // Center circles
    Circle circle = new Circle(); {
     circle.$radius.setAsFloat(5.0f);
     circle.$fill.set(Color.$DARKRED);
    }
    face.$content.insert(circle);
    circle = new Circle(); {
     circle.$radius.setAsFloat(3.0f);
     circle.$fill.set(Color.$RED);
    }
    face.$content.insert(circle);
    
    // Second hand
    Line line = new Line(); {
     Rotate rotate = new Rotate(); {
      FloatBindingExpression exp = new FloatBindingExpression() {
       public float computeValue() {
        return seconds * 6;
       }
      };
      secondsVariable = FloatVariable.make(exp);
      rotate.$angle.bind(false, secondsVariable);
     }
     line.$transforms.insert(rotate);
     
     line.$endY.setAsFloat(-radius - 3.0f);
     line.$strokeWidth.setAsFloat(2.0f);
     line.$stroke.set(Color.$RED);
    }
    face.$content.insert(line);
    
    // Hour hand
    Path path = new Path(); {
     Rotate rotate = new Rotate(); {
      FloatBindingExpression exp = new FloatBindingExpression() {
       public float computeValue() {
        return (hours + minutes / 60) * 30 - 90;
       }
      };
      hoursVariable = FloatVariable.make(exp);
      rotate.$angle.bind(false, hoursVariable);
     }
     path.$transforms.insert(rotate);
     
     path.$fill.set(Color.$BLACK);
     
     MoveTo e1 = new MoveTo(); {
      e1.$x.setAsFloat(4.0f);
      e1.$y.setAsFloat(4.0f);
     }
     path.$elements.insert(e1);
     ArcTo e2 = new ArcTo(); {
      e2.$x.setAsFloat(4.0f);
      e2.$y.setAsFloat(-4.0f);
      e2.$radiusX.setAsFloat(1.0f);
      e2.$radiusY.setAsFloat(1.0f);
     }
     path.$elements.insert(e2);
     LineTo e3 = new LineTo(); {
      e3.$x.setAsFloat(radius - 15.0f);
      e3.$y.setAsFloat(0.0f);
     }
     path.$elements.insert(e3);
    }
    face.$content.insert(path);
    
    // Minute hand
    path = new Path(); {
     Rotate rotate = new Rotate(); {
      FloatBindingExpression exp = new FloatBindingExpression() {
       public float computeValue() {
        return minutes * 6 - 90;
       }
      };
      minutesVariable = FloatVariable.make(exp);
      rotate.$angle.bind(false, minutesVariable);
     }
     path.$transforms.insert(rotate);
     
     path.$fill.set(Color.$BLACK);
     
     MoveTo e1 = new MoveTo(); {
      e1.$x.setAsFloat(4.0f);
      e1.$y.setAsFloat(4.0f);
     }
     path.$elements.insert(e1);
     ArcTo e2 = new ArcTo(); {
      e2.$x.setAsFloat(4.0f);
      e2.$y.setAsFloat(-4.0f);
      e2.$radiusX.setAsFloat(1.0f);
      e2.$radiusY.setAsFloat(1.0f);
     }
     path.$elements.insert(e2);
     LineTo e3 = new LineTo(); {
      e3.$x.setAsFloat(radius);
      e3.$y.setAsFloat(0.0f);
     }
     path.$elements.insert(e3);
    }
    face.$content.insert(path);
    
    group.$content.insert(face);
   }
  }
  
  Timeline timeline = new Timeline(); {
   timeline.$repeatCount.setAsFloat(Timeline.$INDEFINITE);
   
   KeyFrame kf = new KeyFrame(); {
    kf.$time.set(Duration.valueOf(1000.0f));
    kf.$canSkip.set(true);
    kf.$action.set(new Function0() {
     public Void invoke() {
      nextTick();
      return null;
     }
    });
   }
   timeline.$keyFrames.insert(kf);
  }
  
  // Display in Swing
  SGNode node = group.getSGGroup();
  JSGPanel sgPanel = new JSGPanel();
  sgPanel.setScene(node);
  
  JPanel panel = new JPanel();
  panel.setLayout(new BorderLayout());
  panel.add(sgPanel, BorderLayout.CENTER);
  
  JFrame frame = new JFrame("JavaFX Clock Example");
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.add(panel);
  frame.setSize(800, 600);
  frame.setVisible(true);
  
  timeline.play();
 }
 
 public void nextTick() {
  calendar.setTimeInMillis(System.currentTimeMillis());
  seconds = calendar.get(Calendar.SECOND);
  minutes = calendar.get(Calendar.MINUTE);
  hours = calendar.get(Calendar.HOUR_OF_DAY);
  
  if (secondsVariable != null) {
   secondsVariable.invalidate();
   minutesVariable.invalidate();
   hoursVariable.invalidate();
  }
 }
 
 public static void main(String[] args) throws Exception {
  new Clock();
 }
}

Now, I did make some slight alterations as the original example uses java.util.Date calls that are deprecated, so I updated to using Calendar instead. Also, I had a little trouble with the binding functionality and had to make calls to invalidate in the nextTick() method. Other than that I stayed quite true to the example and the code works quite nicely.

This is the first step in what I'm ultimately planning as a wrapper around Swing and JavaFX to make more powerful UIs without using a crappy scripting language. :)

See this re-output as an Applet:
http://captiveimagination.com/download/clock/clock.html

I've been working on an acceptable solution to display web pages within my Flex applications and as any of you know that have done any research on it will find, it's frustrating how lacking Flex is in support for this. The ideal solution would be for Flex to provide a fully functional component that renders web pages utilizing the native web browser. Alas, it would seem that it's far too complicated for them to leverage the browser they are already running in. Instead, their solution is to create components that support just enough HTML to be completely annoying since you can't get anything really useful to display well. Alright, so enough of that, like most of my posts, I try to mix rant and useful information, so lets get to the latter.

Okay, so the first thing that I discovered is that the only way to display web pages within my Flex content was to use IFrames. There are other possibilities, but after investigation with each they all come up with major flaws (primarily centered around lacking functionality) and IFrame support seems to be the best solution out of a bunch of bad solutions.

Yes, I'm sure if you've spent any time looking into this you'll already know that there are plenty of people that have already written IFrame support components in Flex and they work moderately well. However, there are some major pitfalls they have not resolved that I find unacceptable:

1. Clipping - Because IFrames float above the Flash context they float above EVERYTHING. So not only do not get proper clipping of an Alert or anything else appearing above the component, you don't get proper clipping when it's inside of a container with scrollbars. This extremely limits the usefulness of the component and makes it almost useless in many sites
2. Size and location updates. So many of these implementations of IFrame support do such an awful job of properly sizing and adjusting the frame as the Flex container is adjusted.
3. Multiple components on the same page. In many cases I would like to have several IFrames being displayed on the page at one time and very few of the implementations have support for multiple being displayed at any time.

Yes, all of those are valid, but there are solutions available for all but #1. For a while I wondered if it was even possible to solve, but have since proven otherwise. :)

The first hurdle was figuring out a way to clip IFrame content. This was actually a lot easier than I expected it to be. I simply create a DIV, use absolute positioning, overflow to hidden, and add an iframe to it using relative positioning. From there it's just a simple matter of updating the location and size of the "visible area" for the DIV and adjusting the IFrame within it to clip the relevant areas. This does leave us without a perfect solution as we can obviously only show a single rectangular clipping area, but it's a lot better than no clipping at all.

Here's the code for the webbrowser.js file:

// WebBrowser specific code
function verifyCreated(id) {
    var div = document.getElementById('div' + id);
    if (div == null) {
        div = document.createElement('div');
        div.setAttribute('id', 'div' + id);
        div.style.position = 'absolute';
        div.style.visibility = 'hidden';
        div.style.overflow = 'hidden';
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(div);
    }
    var iframe = document.getElementById('iframe' + id);
    if (iframe == null) {
        iframe = document.createElement('iframe');
        iframe.setAttribute('id', 'iframe' + id)
        iframe.style.position = 'relative';
        iframe.style.backgroundColor = 'white';
        iframe.style.borderStyle = 'none';
        iframe.setAttribute('frameborder', '0');
        div.appendChild(iframe);
    }
    return iframe;
}

function updateBrowser(id, x, y, width, height, clipX, clipY, clipWidth, clipHeight) {
    if ((width <= 0) || (height <= 0)) {
        hideBrowser(id);
        return;
    }
    var iframe = verifyCreated(id);
    iframe.style.left = -clipX;
    iframe.style.top = -clipY;
    iframe.style.width = width;
    iframe.style.height = height;
    iframe.style.display = '';
   
    var div = document.getElementById('div' + id);
    div.style.left = x + clipX;
    div.style.top = y + clipY;
    div.style.width = clipWidth;
    div.style.height = clipHeight;
    div.style.visibility = 'visible';
    div.style.display = '';
}

function loadURL(id, url) {
    var iframe = verifyCreated(id);
    iframe.src = url;
}

function hideBrowser(id) {
    var div = document.getElementById('div' + id);
    div.style.visibility = 'hidden';
    div.style.display = 'none';
}

So that solves the dilema of clipping. The next hurdle, which I was quite surprised was a hurdle at all, was the of determining the visible bounds of a Flex component. You see, I wrote a WebBrowser Flex component that represents the IFrame within Flex and receives all the events for changes to size, location, visibility, etc. and then relays them to the IFrame it manages. However, Flex seems to have absolutely no support for finding the visibles bounds on a Component. So, as my solution to most things, I wrote my own:

        public static function getVisibleBounds(component:UIComponent):Rectangle {
            var r:Rectangle = new Rectangle();
           
            var step:Number = 50;
           
            var best:Rectangle = new Rectangle();
           
            var yOffset:Number = 0;
           
            // Find largest bounding area
            do {
                nextBounds(component, yOffset, step, r);
                yOffset += r.y + r.height + step;
               
                if (r.width * r.height > best.width * best.height) {
                    best.x = r.x;
                    best.y = r.y;
                    best.width = r.width;
                    best.height = r.height;
                }
            } while (r.x != -1);
           
            // Expand bounds broadly
            expandBounds(component, best, step, step);
           
            // Expand bounds narrowly
            expandBounds(component, best, 1, step);
           
            component.graphics.clear();
            component.graphics.beginFill(0xffffff);
            component.graphics.drawRect(best.x, best.y, best.width, best.height);
            component.graphics.endFill();
           
            return best;
        }
       
        private static function expandBounds(component:UIComponent, r:Rectangle, step:int, stepJump:int):void {
            // Look up
            while (validateHorizontal(component, r.x, r.y - step, r.width, stepJump)) {
                r.y -= step;
                r.height += step;
            }
           
            // Look down
            while (validateHorizontal(component, r.x, r.y + r.height + step, r.width, stepJump)) {
                r.height += step;
            }
           
            // Look left
            while (validateVertical(component, r.x - step, r.y, r.height, stepJump)) {
                r.x -= step;
                r.width += step;
            }
           
            // Look right
            while (validateVertical(component, r.x + r.width + step, r.y, r.height, stepJump)) {
                r.width += step;
            }
        }
       
        private static function validateHorizontal(component:UIComponent, x:int, y:int, width:int, step:int):Boolean {
            for (var i:int = x; i <= width; i += step) {
                if (!isUnderPoint(component, i, y)) {
                    return false;
                }
            }
            if (isUnderPoint(component, x, y)) {
                if (isUnderPoint(component, x + width, y)) {
                    return true;
                }
            }
            return false;
        }
       
        private static function validateVertical(component:UIComponent, x:int, y:int, height:int, step:int):Boolean {
            for (var i:int = y; i <= height; i += step) {
                if (!isUnderPoint(component, x, i)) {
                    return false;
                }
            }
            if (isUnderPoint(component, x, y)) {
                if (isUnderPoint(component, x, y + height)) {
                    return true;
                }
            }
            return false;
        }
       
        private static function nextBounds(component:UIComponent, yOffset:Number, step:int, r:Rectangle):Rectangle {
            r.x = -1;
            r.y = -1;
            r.width = -1;
            r.height = 0;
           
            var p:Point = findFirstVisible(component, yOffset, step);
            if (p != null) {
                r.x = p.x;
                r.y = p.y;
                for (var y:int = p.y + step; y <= component.height; y += step) {
                    var currentWidth:Number = 0;
                    for (var x:int = p.x + step; x <= component.width; x += step) {
                        if (isUnderPoint(component, x, y)) {
                            currentWidth += step;
                        }
                    }
                    if (r.width == -1) {
                        r.width = currentWidth;
                    } else if (r.width > currentWidth) {
                        return r;
                    }
                    r.height += step;
                }
            }
           
            return r;
        }
       
        private static function findFirstVisible(component:UIComponent, yOffset:Number, step:int):Point {
            for (var y:int = yOffset; y <= component.height; y += step) {
                for (var x:int = 0; x <= component.width; x += step) {
                    if (isUnderPoint(component, x, y)) {
                        return new Point(x, y);
                    }
                }
            }
            return null;
        }
       
        private static var underPoint:Point = new Point();
        public static function isUnderPoint(component:UIComponent, localX:Number, localY:Number):Boolean {
            underPoint.x = localX + 1;
            underPoint.y = localY;
            underPoint = component.localToGlobal(underPoint);
            var a:Array = Application.application.stage.getObjectsUnderPoint(underPoint);
            for (var i:int = a.length - 1; i >= 0; i--) {
                var c:UIComponent = getComponent(a[i]);
                if (c != null) {
                    if (c.mouseEnabled) {
                        return c == component;
                    }
                }
            }
            return false;
        }
       
        public static function getComponent(obj:DisplayObject):UIComponent {
            while (obj != null) {
                if (obj is UIComponent) {
                    return UIComponent(obj);
                }
                obj = obj.parent;
            }
            return null;
        }

Yes, that's an awful lot of code, but it does work, and it works quite well. I find the largest bounding visible rectangular area for the Component and return a Rectangle representing it. I work in large steps (50 pixels at a time) to increase the performance and then make minor adjustments at the end to correct for the margin of precision loss.

The only thing still necessary to post is the WebBrowser Flex component:

    import flash.display.DisplayObjectContainer;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.external.ExternalInterface;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flash.utils.Timer;
   
    import mx.containers.Canvas;
    import mx.core.Application;
    import mx.core.UIComponent;
    import mx.events.FlexEvent;
    import mx.events.MoveEvent;
    import mx.events.ResizeEvent;
   
    public class WebBrowser extends Canvas {
        private static var ID_GENERATOR:int = 0;
   
        [Inspectable(defaultValue=null)]
        private var pageUrl:String = null;
        private var initted:Boolean = false;
       
        private var changed:Boolean;
        private var lastChanged:Number;
        private var hidden:Boolean;
       
        private var lastX:Number = -1;
        private var lastY:Number = -1;
        private var lastW:Number = -1;
        private var lastH:Number = -1;
   
        public function WebBrowser() {
            super();
            id = String(++ID_GENERATOR);
            this.addEventListener(FlexEvent.CREATION_COMPLETE, onFlex, false, 0, true);
           
            var timer:Timer = new Timer(15);
            timer.addEventListener(TimerEvent.TIMER, update);
            timer.start();
           
            setStyle('borderThickness', 0);
            clipContent = false;
           
            changed = false;
            hidden = true;
           
            lastChanged = -1;
        }
       
        private function onEvent(event:Event):void {
            if (event.target is UIComponent) {
                if (event.target.owns(this)) {
                    if (event.type == 'remove') {
                        // Hide it
                        visible = false;
                    }
                    validateWindow();
                }
            }
        }
       
        private function onFlex(event:FlexEvent):void {
            validateWindow();
            if (pageUrl != null) ExternalInterface.call('loadURL', id, pageUrl);
            systemManager.addEventListener(FlexEvent.HIDE, onEvent, true, 0, true);
            systemManager.addEventListener(FlexEvent.SHOW, onEvent, true, 0, true);
            systemManager.addEventListener(MoveEvent.MOVE, onEvent, true, 0, true);
            systemManager.addEventListener(ResizeEvent.RESIZE, onEvent, true, 0, true);
            systemManager.addEventListener(FlexEvent.REMOVE, onEvent, true, 0, true);
            systemManager.addEventListener(FlexEvent.ADD, onEvent, true, 0, true);
            initted = true;
        }
       
        private function onHide(event:FlexEvent):void {
            ExternalInterface.call('hideBrowser', id);
        }
       
        private function isVisible():Boolean {
            var obj:DisplayObjectContainer = this;
            while (obj != Application.application) {
                if (obj == null) {
                    // Removed from container
                    return false;
                }
                if (!obj.visible) {
                    return false;
                }
                obj = obj.parent;
            }
            return true;
        }
       
        public function validateWindow():void {
            if (!isVisible()) {
                onHide(null);
                return;
            }
            changed = true;
        }
       
        private function update(evt:TimerEvent):void {
            var time:Number = new Date().time;
           
            var p:Point = new Point(0, 0);
            p = localToGlobal(p);
            if ((p.x == 0) && (p.y == 0)) {
                return;
            }
            if ((lastX != p.x) || (lastY != p.y) || (lastW != width) || (lastH != height)) {
                changed = true;
            } else if (isVisible() == hidden) {
                changed = true;
            } else if ((lastChanged != -1) && (time - lastChanged > 500)) {
                changed = true;
            }
           
            if (changed) {
                changed = false;
                lastChanged = time;
               
                if (isVisible()) {
                    hidden = false;
                    lastX = p.x;
                    lastY = p.y;
                    lastW = width;
                    lastH = height;
                   
                    var rect:Rectangle = FlexUtilities.getVisibleBounds(this);
                    ExternalInterface.call('updateBrowser', id, p.x, p.y, width, height, rect.x, rect.y, rect.width, rect.height);
                } else {
                    hidden = true;
                    onHide(null);
                }
            }
        }
       
        public function set source(_pageUrl:String):void {
            pageUrl = _pageUrl;
            if (initted) {
                ExternalInterface.call('loadURL', id, pageUrl);
            }
        }
       
        [Bindable(event="changeUrl")]
        public function get source():String {
            return pageUrl;
        }
    }

Well, that does it. I hope you found this useful and proof that IFrame support can actually be done moderately well in Flex. The biggest problem I still have is that it can still be moderately slow, but that's an underlying flaw of the IFrame displaying in Flex and not something I can do anything about unfortunately.