Popfly and Silverlight make it easy to show your pictures from many places in slick little gadgets. It's easy, and fun to make these "display blocks". I wanted to do a little walkthrough of creating a display block. The examples herein are actual Popfly mashups. They do use Silverlight, so make sure you get that installed.

This first blog entry will go over a couple of simple examples. But the next entry will show how to build a moving slideshow like this:

Getting Started

To follow along, you'll need:

Hello, World!

Let's look at this lame Hello World example to get some boilerplate out of the way. Here's the entire JavaScript code for it:

function HelloWorld()
{
  HelloWorld.initializeBase(this);
}

HelloWorld.prototype.getXaml = function()
{
     return "<TextBlock>Hello World!</TextBlock>";
};

HelloWorld.prototype.Hello = function()
{
     // Nothing to do!
};

HelloWorld.registerClass('HelloWorld', Popfly.Blocks.SilverBase);

Figure 1 - HelloSilverlight-1 Code

Pretty easy! The initializeBase and registerClass functions are important, they say that you are writing a display block and want to use “SilverBase”. SilverBase takes care of creating the Silverlight control, centering, stretching, loading images, and a lot more so you can just do the good stuff!

The only other thing needed is the block description. For Hello World, it looks like this:

<?xml version="1.0"?>
<block xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="http://www.popfly.com/schemas/blockschema.xsd"
  class="HelloWorld" hasInitialize="true" type="display">
  <operations>
    <operation name="Hello">
      <description>Display Hello World Text</description>
    </operation>
  </operations>
  <objects/>
</block>

Figure 2 - HelloSilverlight-1 Description

Images

Showing an image:

The entire code for this simple display is as follows:

function HelloWorld()
{
  HelloWorld.initializeBase(this);
}

HelloWorld.prototype.addImage = function(url)
{
  this.addPendingImage(url);
};

HelloWorld.prototype.imageLoaded = function(image)
{
  this.root.children.add(image);
};

HelloWorld.registerClass('HelloWorld', Popfly.Blocks.SilverBase);

Figure 3 - HelloSilverlight-2 Code

We added an operation, "addImage". It takes an image URL as a parameter and adds that as a "pending image" to SilverBase. When the image has been completely loaded, SilverBase calls your function, “imageLoaded” with the actual loaded image. So then we add it as a child to the root canvas. Done!

Run this and you’ll see a picture in the upper left. You can easily move it around by setting image["Canvas.Left"] and image["Canvas.Top"]. This and both of tomorrow's examples will use the same block description xml as show below.

<?xml version="1.0"?>
<block xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="http://www.popfly.com/schemas/blockschema.xsd"
  class="HelloWorld" hasInitialize="true" type="display">
  <operations>
    <operation name="addImage">
      <description>Add an image</description>
      <inputs>
        <input name="url" required="true" type="imageUrl">
          <description>A URL pointing to an image</description>
          <defaultValue>http://www.popfly.ms/Images/community_globe.jpg</defaultValue>
        </input>
      </inputs>
    </operation>
  </operations>
  <objects/>
</block>

Figure 4 - HelloSilverlight-2..4 Description

So far, so good? In my next blog entry we'll see how to make simple slideshows. You can get a preview of these by editing the mashup at the top of this entry.