EditIntroduction
With Visual Web Developer and Popfly Explorer, you can create a Popfly Block in
a full-fledged IDE and enjoy JavaScript intellisense, XML Schema validation and
integrated debugging. This guide shows
you how to create a simple Popfly Block step by step.
EditPrerequisites
You need a version of Visual Web Developer (VWD). You can download
VWDExpress 2008.
Once you have VWD installed, you need to download and install
Popfly Explorer.
You also need a Windows Live ID and an account on Popfly. If you don't already have it, create one on
Popfly.
EditSign In Popfly Explorer
Launch VWDExpress 2008. Select menu Popfly -> Show Popfly Explorer. Enter your
Windows Live ID credential and click Sign In.
 Sign In Popfly Explorer |
Popfly Explorer will validate your account and load your Popfly projects and
friends if successful.
 Popfly Explorer |
EditCreate a Popfly Block Project
To create a new Popfly Block project, click menu File -> New Web Site.
Select "Popfly Block" template, and enter "Hello" as the
project name in project Location field. Click "OK".
 New Popfly Block |
VWD will display the New Popfly Block Wizard. Select "Basic Block" and click
"Finish".
 Block Wizard |
You just created a Popfly Block project with 2 files: "default.xml" for block
schema and "default.js" for block code. You can double click them in the
Solution Explorer to examine the content. The JavaScript code only defines one
class with one method.
 Default.js |
EditRun the Block Project
You may expect that the block is ready for use. That's true! Press "F5" in VWD.
Popfly Explorer will try to save the project to Popfly and then launch a page in
Internet Explorer to run the block. First you will be greeted with the dialog
box below.
 Save Block |
Click "Yes". You will then see the familiar Popfly Explorer reload local copy
dialog box.
 Reload Project |
Click "Save to Popfly". This may take a while. Popfly Explorer will save your
project to Popfly, reload a local copy, and then launch Internet Explorer and
navigate to Popfly mashup editor preloaded with the new block.
 Block in IDE |
Click "Preview" in the browser. The block works... it outputs "Hello, world!".
 Block Preview |
Close Internet Explorer and return to VWD (You may have noticed that you were
actually debugging the block project in VWD). You may see the screen below
depending on your Internet Explorer settings.
 Script Debugging Warning |
Follow the instructions to clear "Disable script debugging (Internet Explorer)"
option in Internet Explorer, so that you can debug the block code in VWD.
 IE Settings |
EditCustomize the Block
Let's change the basic block a little bit so that it greets somebody instead of
the whole world. Double click "default.js" in the Solution Explorer to open it.
Edit "default.js" and add a parameter "name" to method "hello". Change the
method body to return "Hello, " + name + "!".
 Name intellisense |
The new method looks like below.
HelloWorld.prototype.hello = function(name) {
return "Hello, " + name + "!";
};
Press "F5" to run the block. Popfly Explorer will save any changes to Popfly and
launch Popfly mashup editor in Internet Explorer again. Click "Preview". The block outputs "Hello, undefined!".
 Hello, undefined |
We didn't tell the block whom to greet. The mashup editor didn't have any
option to specify it. To tell it that we have added a parameter, we
need to update the block schema.
Close Internet Explorer and go back to VWD. Double click "default.xml" in the
Solution Explorer to open it. Add an inputs section to the "hello" operation and specify
the details of our input parameter. The new
block schema looks like 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">
<operations>
<operation name="hello">
<description>Say hello.</description>
<inputs>
<input name="name" isArray="false" type="string" required="true">
<description>The name of somebody to greet.</description>
<defaultValue>John</defaultValue>
</input>
</inputs>
<outputs>
<output isArray="false" type="string"/>
</outputs>
</operation>
</operations>
</block>
Run the block again. When the block is loaded in Popfly mashup editor, click the
block wrench to adjust settings. Now we can tell this block whom to greet.
 Block Input |
Close adjusting block settings and preview. If you use the default value, the
block output will now be "Hello, John!".
EditDebug the Block
You can take advantage of the powerful script debugger built in VWD to trouble
shoot your block code at run-time. Open "default.js", Click on the far left gray area of the
line you want to break at (or move to the line and press
"F9"). You'll set a breakpoint.
 Breakpoint |
Press "F5" to run the block and click "Preview" in the
mashup editor. Execution of the block will stop at the breakpoint, and VWD will popup with the line
highlighted. (Note: The JavaScript file currently being debugged in VWD is not
exactly the original code you were editing. It is the run-time JavaScript retrieved from
Popfly by Internet Explorer.)
 Breakpoint |
Point your mouse to "name" in the code editor.
 Breakpoint on Line 1 |
The value of "name" is unexpected. Note that the execution is not on the line of
"return" statement. It is at the beginning of the method. If you press "F10" to
step over to the next line, the execution will pass the method instead of going
to the line of "return". Here is a pitfall: with VWD script debugger, you cannot
set a breakpoint at the first line of a method. To work around this, make some
trivial changes to add a few lines to the method body and set breakpoint to
other lines, e.g.:
 Block Break Line 2 |
Run the block and preview in the mashup editor. Check the value again in VWD. It
is now correct!
 Debug |
Once the execution is at a breakpoint, you can run your code step by step and
inspect all the variables to find out if anything is wrong.
EditWhat To Do Next
With VWD and Popfly Explorer, developing a Popfly Block is easy. Try below to improve your block development skill:
- Further customize the block. Add new methods. Return html fragments. Mashup your block with other blocks.
- Try the other block templates in the New Popfly Block Wizard.
- Rip other's Popfly Block. Use Find Project... in Popfly Explorer.