Navigation

• Main Page

• Getting Started
• How To Guides
• Game Creator
• Blocks
• List Of Popfly Blocks
• Popfly Explorer
• Silverlight
• About This Wiki

• Browse Categories
• Browse All Pages

Edit

Introduction

So you’ve created an account on Popfly and want to create a mashup but you’re not sure what a mashup is or how you create one? Then this is the document for you! Popfly Mashups are all about letting you take data and media from different sources and combining them to make web sites the way you want. These mashups can then be embedded in other places such as your blog or Facebook profile and even downloaded as a Windows Vista Sidebar gadget.


Edit

Overview

Popfly is a web site and all you need to use it is a browser like Internet Explorer or Firefox. To create mashups you’ll also need to install Silverlight (http://www.silverlight.net).

The mashup editor in Popfly is a graphical programming environment where mashups are built by connecting blocks together. In Popfly a block is basically something that does something. That means that a block can do anything. So a block could add two numbers together, or it could fetch some photos from Facebook and another block could then display those photos. Really what a block is depends on the block, in the Popfly mashup editor you can find out more about what a block does by hovering over it in the block search list on the right hand side.

Or you can add the block to design surface and click on the ’I’ icon to see the details page.

If there is no description on the block you can leave a comment for the owner to add one.

You can experiment with blocks by adding them to the design surface and zooming in on them. Once zoomed in you can select a function that looks like it could do what you want, such as the Facebook getFriends function. Once you’ve chosen a function zoom back out and then click the preview button and bingo the block should run and you should see some results. It’s easy! Experiment with a few blocks just to get the feel of what they do. You might want to try with the blocks we made (they have the ‘M’ logo next to their name). As you try other blocks that users have made you might see that some of them don’t work, if that’s the case you can always leave a comment on the block so the author knows you care.




Edit

The Principle

In Popfly to make a mashup all you really need to do is connect blocks to other blocks. In the simplest form one block could get some photos of your holiday in Hawaii and then a second block would display these in a carousel or such. You would connect these blocks together by drawing a line between the two of them. On the first block, Live Image, click on the blue circle on the right hand side of the block then click on the left hand side blue circle of the Carousel block. Like so:

image search to carousel

If you zoom into the blocks (click the wrench) you will see that two operations have been automatically selected.

live image search zoomed in

If you zoom back out by clicking on the wrench again, you’ll be in a position to try out your mashup.

carousel zoomed in

When you click the preview button (top left hand side), the mashup designer surface will go away and your mashup will run. In this case the “Live Image Search” block will make a call to Live Image and will get a set of images. For each of those images it will call the “Carousel” blocks “addImage” operation which will add an image to the carousel.

preview button

That mashup was generated just by drawing a line between two blocks. Luckily it worked well, but that was just because the default operations happened to work together. Essentially what the line tells the mashup designer is that you want to invoke the operation of the block once for every result from the first block. In essence piping the data from the first block to the second block. When you zoom in on the second block you can see the “addImage” operation and a list of inputs that the operation takes. As you can see by default the designer tried to map these inputs to outputs from the “Live Image Search” block. You can select where these inputs come from by selecting a block from the left hand side drop down and then selecting a field from the block on the right hand side. Or you can select “[custom]” and enter some text that will be used. You’ll see that some of the inputs are in bold with a “*” this means that they are required, so you can’t use the operation unless you set them.

So that’s the basics covered. For more details on the mashup editor have a read of the section below or if you’re feeling brave read ahead to the section on “Advanced Mode”, you’ll need some knowledge of JavaScript though.

 


Edit

The Mashup Editor

the mashup editor

Edit

Searching Blocks

The first thing you’re going to need to do is find some blocks to use. The block list is on the left hand side and by default it is expanded. You can collapse it by clicking on the button with the two chevrons ‘<<’ to expand it click on the ‘>>’ button again.

You can find blocks by either typing in the text box which will search all Popfly blocks for the text you type, looking in the name, tags and description fields for blocks.

Alternatively you can browse the block list by expanding one of the categories, just click on the text to expand the category. Only one category can be expanded at a time and clicking on another will collapse the previous category.


Edit

Adding Blocks

To add a block to the mashup design surface you can either click on a block in the block search list or you can drag the block to the design surface. To drag click on the block and then keeping the mouse button down move the mouse over to the design surface finally releasing the mouse button where you want the block.


Edit

Deleting Blocks

To delete the block simply click on the ‘x’ on the tool strip in the top right side of the block.


Edit

Connecting Blocks

Connecting blocks is how you build mashups. To connect two blocks click on one block and then click on the block you want to invoke with the 1st block. When blocks are added to the design surface they have a default operation when you connect it Popfly tries to map the outputs of the 1st block with the inputs of the 2nd block. When you connect two blocks to one block Popfly will make them both available as inputs for the single block. E.g. in the following mashup:

facebook to geonames to virtual earth

In the mashup above when you zoom into Virtual Earth you will see that the drop down next to the input names for the operation have the choice of either Geonames or Facebook as their source.

What Popfly has done is say that as the first output of Facebook will invoke Geonames and subsequently the output from Geonames will correspond with the first output of Facebook. Sounds a bit confusing, but basically what’s doing is combining the results from Facebook and Geonames. So you can fetch data from another service using a block based upon something you know about the friend from Facebook.


Edit

Zooming in on Blocks

Edit

Zoomed In

In order to choose which function of the block you want to use you need to zoom on the block, to do this click in on the wrench.


Edit

Selecting the Function

Once you’re zoomed in you can see a drop down box containing a list of all the functions available for the block. Below the drop down box you can see a list of parameters for the function. This is the information that will be passed to the function when the mashup is run. The information passed to the block can either be from a previous block connected to this block (dynamic values) or it can be a value you type in (static values).


Edit

Dynamic Values

Edit

Static Values

Edit

Zoom Out

You can zoom out again by clicking on the wrench.


Edit

Blocks Details

On the tool strip for a block on the design surface you can see an ‘I’ icon, clicking on this icon will bring up information about the block. The information you see is written by the creator of the block so it could be empty, if it is you can always leave the author a comment asking him or her to write something! At the moment you won’t see this information for Microsoft blocks – sorry. We welcome your comments in the forums (http://forums.microsoft.com/MSDN/default.aspx?ForumGroupID=434&SiteID=1). If you like a block feel free to comment on it and rate it that way the block author knows that people are liking, or not liking, their block.


Edit

Block Suggestions

If you are not sure what blocks go well together you can trying using the suggest feature, simply click on the light bulb and you should see the list of blocks on the left shortened to just blocks that go well with that block. If there aren’t any suggestions for a block the light bulb icon will be grayed out and unlit. One more thing, the suggested blocks could be either input or output blocks – it’s up to you to experiment and find what works.


Edit

Panning

Sometimes your mashup can get rather complex with lots of blocks that don’t fit on the screen or you could open up a project from someone who had a lot bigger screen than you which means the blocks can’t fit on your screen.

If there are any blocks in the mashup that aren’t currently visible on the screen you will see arrows around the edge of the designer pointing to them. To go to the off screen blocks you can either click on the arrow or you can pan by clicking and holding on white space in the designer, the cursor will change to a grabbing hand, and then drag the mouse in the direction you want the screen to move.

If you’ve run out of space on the design surface you can pan to new space by clicking and holding on the white space and then move the cursor in the direction where you want to add blocks.


Edit

Saving

You can save your work at any time by clicking on the save icon on the top right of the page. If you want others to view your mashup it would be great if you could take a minute to fill in the description text box so that others know what your mashup is about.

You can open any of your saved projects by going to “My Projects” on the “My Stuff” menu on the top navigation menu.


Edit

When You’re Finished

So you’re happy with what you’ve got. Congratulations! Now you probably want others to see it. If you do then you need to go to the details page for the mashup. You can do this by going to your saved projects by going to “My Projects” on the “My Stuff” menu on the top navigation menu, then in the list of projects click “Project Details” for the mashup that you’re interested in. Or from the mashup designer you can click on the “I” icon in the top. From the project details page you’ll need to share your mashup to be able to allow others to see it. One word of warning though when you click that share button anyone on the internet will be able to see your mashup. At any point you can go back to the project details page and unshare your mashup. For more information on the options once you’ve shared your mashup take a look at the project details page section later on.  


Edit

Advanced View

Popfly is pretty flexible without even getting in to the advanced topics. However, there are certain limitations which might prevent you from perfecting your mashup. And for this, we have the advanced view within the mashup editor. Armed with just a bit of JavaScript knowledge you can do some powerful stuff in here.

Advanced mode is per block. To get to it, zoom into the block’s control panel (click the little wrench). At the top of this control panel there is a button, “Switch to an advanced view”. Click that.

Phototiles advanced view

You’ll now be faced with a JavaScript editor:

calculator advanced view

Here you can see the guts of how Popfly is calling the Calculator block. You can enter any valid JavaScript to manipulate both the input and the output of the Calculator block.

If you would like to return to the simple mode, click the “Go back to the simple view” button at the top. Note that any changes made to the JavaScript will be lost if you switch back to the simple view. You can learn a lot about how Popfly generates the JavaScript by switching back and forth.

The generated JavaScript follows a couple of different patterns depending on the inputs and the outputs. In the simplest case, shown in the above screenshot, an unconnected block gets called and the result gets ouput:



JavaScript:

calculator.__reserved.pendingCalls = 1;
var result = calculator.getRandomWholeNumber(10);
data["Calculator"] = result;
environment.output(result);

(The first line is just some internal goo that Popfly needs, you can safely ignore it.)

Here in this example you can see the calculator block is used to get a random whole number from 0 to 10. Next, the result of this is put in the data dictionary so all other blocks can reference the results of this call. And finally the result is output to the mashup display.

Popfly’s block creator documentation gives more information on special Popfly functions that you can call from within this advanced mode (such as environment.output)



 


Edit

Custom HTML

You might have noticed the link “Custom HTML” next to “Clear” on the top actions bar in the mashup designer. If you pressed it you would have seen a rather large text box slide into view replacing the mashup designer. In this text box you can add any HTML that you want, including JavaScript and CSS. Whatever you enter there will be included in the output of your mashup.

If you add HTML that is a say <h1>Title!</h1> you’ll see the text “Title” big and bold at the top of your mashup. Any HTML you enter here will be placed before the JavaScript/html for your mashup. Everything you type is in a body (<body>) tag so you don’t need to add that. This also means that you can’t add any HTML for elements that would normally appear inside the head (<head>) tag.

The use of this is really meant for advanced users who want to add some custom JavaScript that will only run once when the mashup loads (unlike advanced code for a block which is ran every time the block is called).

For more information on JavaScript and HTML take a look at the tutorials on www.w3schools.com.