Monday, 14 January 2008

Creating a Popfly Block with Popfly Explorer

On Friday we released a new version of Popfly Explorer which includes support for Popfly Block creation. You can now create, debug, and publish Popfly blocks directly from Visual Studio. This is a huge advance for our block creators since you can use the powerful Visual Studio JavaScript and XML editor rather than the Popfly block editor. The underlying walkthrough illustrates how to create and debug a block on Popfly Explorer. You can download Popfly Explorer here.


Walkthrough: Creating a Block with Popfly Explorer

This walkthrough illustrates how to use Popfly Explorer to create a Popfly block named Calculator.

Tasks illustrated in this walkthrough include:

·         Creating a Popfly Block project using Visual Web Developer

·         Writing the block description

·         Writing the block code

·         Debugging the block

·         Sharing the block

·         Useful resources


To complete this walkthrough, you need:

·         A Popfly account.

·         Popfly Explorer. You can download Popfly Explorer here.

·         Visual Web Developer or Visual Studio. You can download Visual Web Developer here.

What is a Popfly Block?

Information from a web site can be accessed through a Popfly block. A block can also be a useful set of operations, like a timer or calculator, or it can display things like photos or videos. A Popfly mashup is a web application that combines the functionality of two or more web sites or sources: when you combine blocks, you create a mashup.

A Popfly block consists of the block description and the block code. The block description is used to define what the block is about: description, keywords, logos, and the definition of what methods can be called, and the parameters for these methods.  The block code contains the methods that are invoked when the block is used in a mashup.

Create a Popfly block

1.       Launch Visual Web Developer.

2.       On the File menu, click New Web Site…

The New Web Site dialog appears.

3.       Select the Popfly Block project type and name your project Calculator.

You have now created a local Popfly Block Visual Studio project.

4.       On the Popfly menu, click Show Popfly Explorer

The Popfly Explorer window is now visible.

5.       Enter your Windows Live ID login information in the Popfly Explorer window and click the Sign In button.

Popfly Explorer will show you a list of your projects and friends on Popfly.

6.       On the Popfly menu, click Save Calculator to Popfly.

Popfly Explorer will prompt you that a local copy of your project will be stored under the Popfly Explorer projects directory and will be reloaded from that location.

7.       Click on Save to Popfly in the Save Project dialog box.

Your calculator block is now saved to Popfly.

Write the Block Description

1.       Open the default.xml file from within the Solution Explorer window.

2.      Change the name of the block class to CalculatorClass in the block element.

3.       Open the default.xml file from within the Solution Explorer window.


This is the class that we will define when we are writing the block code.

4.       Remove the hello operation.

5.       Add an AddNumbers operation element as a child to the operations element.


    <operation name="AddNumbers">     

      <description>Add 2 numbers</description>


        <input name="number1" required ="true" type="integer">

          <description>First Number</description>



        <input name="number2" required ="true" type="integer">

          <description>Second Number</description>





        <output isArray="false" type="integer"/>




The operation has 2 required integer parameters with a default value of 0: number1 and number2.



More information on modifying the block description can be found in the block building guide.

Write the Block Code

1.       Open the default.js file from within the Solution Explorer window.

2.       Change the name of the HelloWorld class definition to CalculatorClass

Remove the hello method.

3.       Add the AddNumbers method.

The AddNumbers method first defines the result variable and calculates its value. Second, it writes the parameters and result to the console window in the Popfly mashup editor.

CalculatorClass.prototype.AddNumbers = function(number1, number2) {

    var result;

    console.write(String.format ("Calling Add ({0}, {1})", number1, number2));

    result = number1 + number2;

    console.write(String.format ("Result: ({0})", number1));

    return result;



More information on writing block code can be found in the block building guide.

Debug the Block

1.       Right click on the result = number1 + number2 line. On the pop-up menu, click on BreakPoint and then Insert Breakpoint.

A breakpoint was added to the result = number1 + number2 line. When the AddNumbers method executes, Visual Studio will now stop the block execution at this line.

2.       On the Debug menu, click on Start Debugging.

Your block is saved to Popfly and the mashup editor will load with your block.

3.       Click on the wrench to zoom in and start editing the parameters of the Calculator block.

4.       Type in the following values for the parameters:

Choose 4 for the Number1 parameter and 5 for Number2 parameter.

5.       Click on the wrench to zoom out again.

The mashup editor will show your block again.

6.       Click on Preview in the mashup editor to see the result of the AddNumbers method.

By clicking on preview you execute the AddNumbers method you just wrote. Visual Web Developer got the focus and stopped at the breakpoint that you added in step 1.

7.       Right click on the result variable in the default.js file and click on Add Watch.

The result variable is now added to the watch window. Notice that the value for the result variable is still undefined.

8.       On the Debug menu, click Step Over..

Notice that the value of the result variable has now changed to 9 in the watch window.

9.       On the Debug menu, click Continue.

Internet Explorer has received the focus again and you can see the value of the result variable on the preview page.

Share the Block

1.       Select the Calculator project in the Popfly Explorer window.

2.       On the View menu, click Properties Window.

The properties for the Calculator project in Popfly are shown in the Properties Window.

3.       Change the value for Sharing Level from Not Shared to All Popfly Users.

Your project is now shared with all other Popfly users.

Useful Resources

·        More detailed information on writing block code can be found in the block building guide.

·         Information on how to build mashups in Popfly can be found in the mashup building guide.


01/14/2008 20:59:30 UTC  #  Comments [3] 
03/08/2008 06:57:58 UTC
Cool, the post.

Thanks for the information.
08/23/2008 02:52:33 UTC
iphone downloads
02/20/2009 11:22:31 UTC
That is really amazing site and info i see on your pages i must say that i will return after my exams.Keep it up
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):