Tip of the Day – Popfly

Mix is fast upon us, and to be perfectly honest, I'm preparing frantically. That means that I've been behind in my Tip of the Day. Rather than closing it down, I want to take the three weeks between now and Mix and really focus on some areas of Silverlight 1.0 that I've not been paying enough attention to.

We know that Silverlight 2 is just around the corner; while we've not announced its release date, we've said it will be in Q1, which means a matter of weeks. Let me assure you that will many of my Tips of the Day and blog posts will be on Silverlight 2, which after all will be new and exciting (and amazing) it will also be Beta, while SL 1 is a released product, and so will not be neglected.

One of the areas that I personally have been meaning to pay more attention to is Popfly.  With the attention it has been given by my publisher, I thoght this might be a good time to start.


I decided to start with the Popfly videos. I watched the 30 second video and based my starter app on that. To begin, I grabbed the Twitter block and set its properties to my Twitter account.


Clicking on the wrench (see arrow) opens the block for you to set its properties,




I added some arrows to the image above to make pointing out the pieces a bit easier.

The three black arrows point to the three properties for this block..

The first, set by a drop down, lets you decide which operation you want the block to perform (I chose getFriendsPosts).

The second asks for your Twitter user name, and the third asks  how many posts you want to get at a time.

The blue arrow (near the top)  points to a button that lets you see the actual JavaScript code that implements this Popfly control,



As noted in the highlighted area, you are free to edit the Javascript directly if you can't help yourself, but Popfly is designed to work wihtout your having to write any code at all.

At any time, you can click preview to see the results of your work so far; in this case, my one Popfly block running alone.

When I click preview, the block goes out to Twitter, finds the account and returns my Twitter notification


This isn't quite what I wanted, but that is not a problem. I click on Customize and  the block comes back. Click on the wrench, the edit block comes back.

I can edit the properties and I can count on tooltips to help me determine the meaning of the properties.


Each small change is easy to test by clicking on preview



Adding a 2nd Block 

When I have the block working the way I want, I can add a second block, and most important, I can "mash them up" by clicking first on one and then on the second. If the output of the first is meaningful to the input of the second… voila!

In this case, I'll drag on a news reader as my second block.


The News Reader block  is happy to take the output of the Twitter block as its input.

To create the connection, click on the source (Twitter) and then the receiver (NewsReader) and the popfly editor creates the link


To see the link at work, just hit preview.


The console output (visible at the bottom of the page) makes the interaction explicit:

twitter: Calling getLatestFriendsPosts("jesseliberty", 10)...
Getting data from http://twitter.com/statuses/friends_timeline/jesseliberty.xml?nocache=
Tue Feb 12 14:05:35 2008... The call to http://twitter.com/statuses/friends_timeline/jesseliberty.xml?nocache=
Tue Feb 12 14:05:35 2008 returned with status 200.
News Reader:
newsReader: Calling addNewsItem("SilverlightNews", "Tue Feb 12 18:59:06 +0000 2008", 
"Tip of the Day - Getting Ready for Silverlight 2 - http://ittyurl.net/5UIG",
That's it. Save and I've got my first working Popfly Mashup.
More to come.

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives and tagged . Bookmark the permalink.