UcompOS Artifact Containers

In my last post a few minutes ago on UcompOS Artifacts, we learned that an artifact can be thought of as analogous to a desktop widget.

One of the parameters of the UcompOSArtifactProxy class’s add(); method is container which is of type UcompOSArtifactContainerProxy.

If the value of container is null, then the artifact instance is simply added to the UcompOS Portal interface positioned at the specified x, y coordinates where (0,0) is the upper-left origin of the main container.

However, an artifact container lets you arrange a group of related artifacts in a specific fashion.

There are currently three types of artifact containers: HBox, VBox, and Canvas – these names obviously are throwbacks to the Flex 3 container classes of the same name.

An artifact container is positioned and styled using CSS properties

Let’s see a simple example of the code behind the creation of a UcompOS artifact container.

The first step is to create an instance of UcompOSArtifactContainerProxy:

var container:UcompOSArtifactContainerProxy = new UcompOSArtifactContainerProxy();

Then we call the UcompOSArtifactContainerProxy‘s add() method.

Let’s look at the signature of add():

add(type:String, styles:Array = null):void;

type is a String that should either be of value HBox, VBox, or Canvas.  I plan to expand this to accept other properties such as HTileBox, VTileBox, etc.

styles is an Array of style objects where each style object has two properties: styleProp and newValue where styleProp is going to be a style that is available to the HBox, VBox, and Canvas containers in the Flex 3 framework.

An important note is that even though the UcompOS Portal is a Flex 4 application, the artifact containers are based on the Halo theme in the mx package.

Let’s see an actual code-based example:

var container:UcompOSArtifactContainerProxy = new UcompOSArtifactContainerProxy();
 
container.add("HBox",[{styleProp:"backgroundImage",
                       newValue:"http://desktop.ucompass.com/someImage.png"},
                       {styleProp:"bottom",newValue:0},{styleProp:"right",newValue:0}]);

The above would create an artifact container that was given a background image of the specific URL that was positioned permanently at the far lower right of the UcompOS Portal.

Then when we create our artifacts, we can pass the UcompOSArtifactContainerProxy instance as the container parameter and the artifact will automatically be placed into the container.  For instance:

var artifact:UcompOSArtifact = new UcompOSArtifact();
 
artifact.add("My Artifact",null,"http://desktop.ucompass.com/someImage.png",0,0,false,true,{},container);

Below is a simple example of an artifact container which has a transparent type background set with the backgroundImage style property that has 4 artifact instances attached to it.  This example comes from the Educator 2 application I am building on top of the UcompOS Rich Productivity Framework:

Artifact Container

Artifact Container