Build and Publish Web Sites with Popfly Explorer Beta

  • Article

I'm back in Seattle after attending TechEd Europe earlier in the week. It was an absolute blast and thanks to everyone who came to the overflowed Popfly session!

Tony Goodhew and I did demos in Soma's keynote, check out Patrik and Andrew's blogs for a recap on the keynote:

In my demo, I showed off AddOn Studio for World of Warcraft (separate post on that later) and the now-available Popfly Explorer.

Popfly Explorer Beta

New with Popfly Explorer Beta for Visual Studio (works in 2005 & 2008 Express Editions-through-VSTS) is its ability publish custom Web pages as well as add Popfly mashups/gadgets to any existing Web site easily. More info here.

Everything you need to get started

 

Getting Started with Popfly Explorer

After installing (note it may take a while as it has to apply settings to every VS product you have. I have 9 Express products and two VSTS products so it took close to 10 minutes).

In VWD, select File New Project...Popfly Web Site

image

 

When you click File...New Item... in the project, you'll get a filtered list of item templates that work with Popfly. I'll choose a Style Sheet template.

image

 

When you add the page, it dumps you into the CSS editor. As I prefer a GUI for styles, simply right click and select Build Style...

image

This will display the visual style builder shown below with styles grouped in categories and a live preview of what the style will look like.

image

You can then apply that style to your Web page and design the HTML as you see fit either by hand coding HTML or using the built-in designer and HTML toolbox controls:

image

You can build HTML, forms or AJAX applications In the page below is a simple form that uses JavaScript to update an embedded Popfly Gadget that displays images from Windows Live Images.

image

In the Popfly Explorer Window, you can just drag and drop Popfly projects directly onto the Web page and it will automatically build an <iframe> for you with the project. 

image

After dragging onto your page, it creates the following HTML:

image

 

Send data from a Web page to mashup

Popfly Explorer is also a great tool for enabling mashup to Web page communication using the User Input Popfly block.

The User Input block enables you to send data from your Web page directly to a mashup by using the getQueryParameter operation.

image

With a couple of lines of code, we can update the src property of the Popfly <iframe> to pass in a query string parameter named "first. "

image

 

The finished product is a page that updates a Silverlight mashup :)

image

Saving to Popfly

To share your page(s) with the world, in the Popfly menu, select Save to Popfly.

image

You can then open your newly uploaded project by clicking View on Popfly

image

 

Play at home

Here are my projects that you can play with live

One thing to note is the only mildly annoying issue is that all files must be in the root directory, subfolders are not allowed. This isn't a killer, but it can be annoying as I like to separate content into subfolders (like "images").

Comments