Building UI Popfly blocks has proven somewhat of a challenge for me. As of late Popfly has no ability to add Silverlight XAML, Images, or any kind of ‘development’ tool functionality for programming like Visual Studio and only supports the 1.0 Silverlight Beta Framework. Don’t get me wrong though I think Popfly is the coolest thing since sliced bread. In theory Popfly is the programming environment for the average Joe and for heaven’s sakes its only in Alpha so just the chance to work on it is a good plan in my mind. I know the guys working on Popfly have a lot of cool stuff planed and what is important for me is the model of making programming like playing with Lego’s.
So building blocks for has been challenging in the following areas in particular the class structure in how it is related to Popfly and in the relationship with Silverlight Xaml. At first I built the blocks entirely in Silverlight and then tried to port them and it was a disaster. I ended up building them to a build of Silverlight the Popfly guys sent me which turned out to not be supported in Popfly by the time I got the blocks ready and then the controls ended up having to be ported. You might see these blocks as core Popfly blocks such as the Graph Block or the Photo-show or the Straw-pole blocks or one of the media players. Anyway so now since these blocks had Xaml added to the system by the Popfly dev’s I decided I would use those controls Xaml as a reference for building blocks. So here is how to build a UI Popfly block in the current version of Popfly. So this technique might be out moded by further developments in the system this method is simple straight forward and well best of all it works…
One thing I saw in the Block SDK is this rule “Rule 1: Make classes, not scripts”. A lot of JavaScript developers do just create Scripts so I am all for this rule. The problem is JavaScript does not enforce this and so it has to be done on purpose by the developer through discipline. Granted there are a number of ways to-do this and my way is not necessarily the right way or the best way but again… it works and works well. Step 1 in building a Popfly Block is to define the class in JavaScript like this:
Function BarGraph()
{
// some code
}
You will note a departure from most JavaScript examples you might find on the web in my curly braces… So since I do C# among other things and grew up as a developer in C++ I tend to like my curly braces this way as to maintain consistency which is the more important issue.
Now in the SDK they define functions or method for their class like this:
BarGraphClass.prototype.search = function() {
// some code
}
I like to encapsulate the code more like you might see in C# or a like C type language. Granted the technique above is better then declaring the function and then assigning it or something like that and they are using an anonymous function but I think it is cleaner to-do this, not to mentioned using a technique like this or the one above keeps functions from floating around as references in the scripting engines global look up table.:
Function BarGraph()
{
this.somemembershere = “”;
this.method1 = function()
{
// some code
}
}
This method will look suspiciously like C# a real manly language. Also note that at first I was using whatever class name I wanted but I found when reference the Xaml of other controls as if it where mine Popfly was getting up set and was through some ‘wrapper’ class error so for the time being I’m using a known block name that has its own wrapper defined by Popfly so that it all works. I’m sure this issue will go away but for the time being this makes it work.
Due to reference issues I create a reference object that can be used by methods that get assigned anonymously to events etc so that they can always find the instance or instantiated class as needed. In this case right before the class definition I add this code, remember this is outside the ‘class’ definition.
var BlockRef = null;
so from here lets now look at the initial or basic members needed for a block to work and I will refer to other members only as needed in those methods. With one exception and that is creating a unique global variable for a given block and an instance identifier with in Popfly and is used for reference counting basically for those old COM dev’s. This actually looks like this:
function BarGraph()
{
if(!window.BlankBlockCnt)
{
this.BlankBlockCnt = 0;
}
this.InstanceNamePrefix = “foobar”;
this.instanceIdentifier = this.InstanceNamePrefix + (this.BlankBlockCnt++);
window[this.instanceIdentifier] = this;
// other code and methods
}
So this makes our class play nice. Now we can add a few key methods. The first is the initialize method which is sort of like a pre-constructor. In my block inside the class definition we add the method like this:
this.initialize = function()
{
document.body.style.backgroundColor = this.BackgroundColor;
var instanceIdentifier = this.instanceIdentifier;
Environment.addHtmlWithScript( ‘some code ehre…’);
};
Note that I took out all the HTML from the method but you can check out my ‘blank block’ on Popfly and or just download the attached project for the blank block with its unit test harness.
The next method is our ‘createSilverlightControl’ method. This method does just that, it creates the reference to our class and our Xaml and defines our core method and our constructor and error handling etc. Popfly class this method to actually create a block. If you are family with Silverlight 1.0 beta then you will know about what this method does as it is the same as the method of the same name used in all the beta Silverlight samples you see everywhere. So here it is:
this.createSilverlightControl = function()
{
Sys.Silverlight.createObjectEx( { source: "/Content/Components/Resources/BarGraph/xaml/BarGraph.xaml.txt",
parentElement: document.getElementById("SilverlightBlankBlockControl"), id: "BlankBlockSilverlightControl",
properties: { width: this.ControlWidth, height: this.ControlHeight, version: this.version, framerate: this.framerate, inplaceInstallPrompt: this.InplaceInstallPrompt, background: this.PageBackgroundColor, isWindowless:"true" },
events:
{
onLoad: delegate(this, this.onLoaded),
onError:"onSilverlightError"
}
} );
};
So the key here is the first part where you set the properties and then the next where we create events and most importantly where we create our delegate to our ‘onLoaded’ method that is our ‘constructor’ for all intents and purposes.
When our ‘onLoaded’ event is called there are three parameters that are passed in. The first is a reference to our control instance, the second is a user context and then a reference to the root element of our Xaml. That means the signature is this:
This.onLoaded = function( Control, UserContext, RootElement) { };
So remember that JavaScript treats all variables as variants as it is not a ‘strongly’ typed language such as C#. So let’s take look at my implementation on the insides:
this.Control = control;
this.UserContext = userContext;
if( this.RootElement == null )
{
this.RootElement = rootElement;
}
BlockRef = this;
if( this.BackgroundImage != "" )
{
this.AddToControl( this.GetBgImageCanvas() );
}
else
{
this.AddToControl( this.ReturnBackground( "BG2", "bgGradient2", "bgGlow2" ) );
}
if( this.ShowTitle )
{
this.AddToControl( this.GetTitleCanvas() );
}
this.BlockCanvasElement = this.RootElement.GetHost().content.CreateFromXaml( this.GetBlockCanvas(), true);
this.RootElement.children.add( this.BlockCanvasElement );
this.CenterX = this.Width / 2;
this.CenterY = this.Height / 2;
this.BuildBlockUI();
So first our ‘constructor’ creates a reference to the control (Silverlight control) as a member of our block then it creates a reference to the UserContext as a member of our block and then we check to see if the root element member is null. If the root element member of our class is null then we save the reference that was passed in. Then here is where we actually save the reference to the block we created earlier outside the context of the block for use by members of our class when assigned anonymously for example as event handlers. All of my blocks have a feature to use a background image or to use a default background effect built in Xaml. How the background structure works is determined by if the background image member is empty or not. If the background image member is not null then we use another method called ‘AddToControl’ that takes the Xaml out-put from our ‘GetBgImageCanvas’ and puts it on to our control UI or Xaml. So since we are using the ‘BarGraph’ Xaml we basically use this ‘AddToControl’ to over right our Xaml onto the base Xaml from the BarGraph control.
If we are not adding a background image we then add the default Xaml background from ‘ReturnBackground’ and use the ‘AddToControl’ method to ad that to our UI. Granted this is the same effect as the base BarGraph Xaml but when we can move away from this hack I want to make sure the controls are ready so that is why this is left in the control. The next bit in our constructor is to see if the control needs a title displayed. If the ShowTitle member is true then we add this to the control using the same method as earlier. Note a lot of these members we will not cover specifically but you can see them in the source. Lastly we add the our ‘block’ canvas over the top of the BarGraph control and keep a local reference to this element and then we calculate the center point of the control for dynamically building UI later and at the very end we call a method called ‘BuildBlockUI’ which is where we do whatever it is our control does as far as building UI and then our block is up and running.
The next method we create in our class is the ‘Preview’ method that is used by Popfly to initialize our control so people can see a demo of it. So in this method you might call some method to add data to the control before the constructor is called ‘onLoaded’.
The blank block as a lot of other members that are built in but they are primarily all support so starting from this base makes it easy to build blocks even now with Popfly’s current state of affairs. So in the blank block there is a method called ‘method2’ that is where you would overwrite or change the name for the specific method you want. They way you want to built exposed methods that add data to the control before the constructor is called. Another thing to note is that we use a lot of ‘string’ concatenation for our Xaml. I know this is bad but you really can’t get around this using JavaScript and Popfly currently and it works well. Just remember not to-do things like this:
var Foo = “”;
Foo += “asdf”;
Foo += “asdf”;
As opposed to doing it like thid:
var foo = “” +
“asdf” +
“asdf”;
If you do it the first way you force the scripting engine to recalculate the string every time you touch the string where as the second method only does the string calculations once which is much more efficient.