Meet Microsoft Popfly: Part I - Mashup App Creator Built On Silverlight

NOTE: Microsoft Popfly is currently in Alpha release, and is only available to users who have been invited to join. You can request an invitation here. I saw on the forums, the Popfly Team is sending out a thousand invitations a day. This is on first come, first served basis.

Introduction

Microsoft Popfly is a website that allows users to create web pages, program snippets, and mashups using Microsoft Silverlight and the set of online tools provided. Popfly supports both Mozilla Firefox 2.0, and Internet Explorer 6.0 or higher.

Popfly Home Page

From the Popfly Home page, users have three main options:

1. meet other users
2. create a web page
3. create a mashup

The Popfly Community

Popfly Space	Join the Community

Popfly has been created with the online community at its center, and as its focus. Known as the Popfly Space, creators can host, share, rate, comment, and even "remix" creations from other Popfly users.

Popfly is almost an entirely online experience. It doesn't matter whether you are interested in participating with the Popfly community, or want to develop a new Popfly mashup, or if you would like to see what has already being created, you can do all of these things from the Popfly site itself.

Community Features

• Join the Community
  The Popfly community is a very active community with thousands and thousands of users.
• Find Users
  You can find Popfly users directly either by username or by rating, or indirectly by looking at who created something.
  MSDN Popfly Forums - Popfly General Discussion, Popfly Bugs and Suggestions, and Popfly Explorer
• The Popfly Team does a great job of answering questions and providing guidance, plus user involvement is high.
• Help
  Popfly's Help has almost everything thing the Popfly newcomer will need to get started and take off.
• See It
  All shared user created content listed on the Popfly site always has a "See It" link that can be used to view the creation.
• Rip It
  All shared user created content listed on the Popfly site also always has a "Rip It" link that can be used to copy the creation.
• Hot Mashups
  The three highest rated mashups on Popfly are always listed on the Popfly users Home page.
• My Account
  The three highest rated mashups on Popfly are always listed on the Popfly users Home page.
• My Popfly Page
  Your Popfly Page is your personal space on Popfly. It has your list of friends, and projects, and some basic profile information.
• My Profile
  This is where you can edit your page's title, avatar picture, tag line, RSS feed, and banner picture.
• My RSS Feed
  This feature isn't currently enabled in the alpha version of Popfly, but it will allow an RSS feed to be listed.
• My Developer Keys
  Some blocks need developer keys to be saved in order to function. For example, fickr requires you to register before using.
• Invite a Friend
  Popfly has support to allow users to send out invites to their friends to join Popfly during the initial Alpha release.

Popfly Web Page Creator

Popfly Web Page Creator	Create a Web Page

• This allows users to create their Popfly Web pages for their Popfly Web site usually to hold their Popfly mashups, but it doesn't have to be.
• Popfly's Web page creator's is a powerful graphical editor so users do not need to have any HTML knowledge, plus the editor has built in tutorial support with step through wizards, examples, and videos.
• The Web page creator has the following features: font type, font size, font color, font effects, paragraph options, images, mashups, tables, hyperlinks, advanced layout editor, page style editor, themes, styles, navigation, color, and page settings.

Popfly Mashup Creator

In the past, most programming IDE's, Integrated Development Environments, have required users to first learn a programming language, like C#, in order to be able to create their own programs. Popfly has taken a step away from this position, and decided to make its IDE a fully visual IDE, with the option to use a programming language, in this case JavaScript, when the user either needs to or wants to.

Popfly Mashup Creator	Create a Mashup

Creating a Mashup with the Popfly Mashup Creator is a snap, literally. One drags the needed blocks from the block list on the left of the screen to the design surface in the middle of the screen. From there a user wires up the blocks. For example, by connecting the User Input Block, to the Digg Block, and then to the PhotoTiles Block, it is possible with a little configuring to create a "Who's Digging You?" mashup.

User Input Block	Digg Block	PhotoTiles Block

Each Popfly block can bring up an operations dialog where users can configure and modify settings as need for their mashups.

The Popfly Mashup Creator also has integrated tutorials that will walk a user through tutorials, example projects, and several videos. This along with the ability to copy any existing shared mashup makes it easy to learn and get started creating your own mashups.

Users are also able to fully customizable the HTML of the page that the Popfly mashup will be hosted on. This allows advanced users to do some really impressive customizations and modifications to their mashups.

Popfly Block Creator

Popfly Block Creator

The Popfly Block Creator allows users to create their own blocks either from scratch, or by modifying an existing block which could be either an official Popfly block or another user created block.

Popfly blocks each have an XML definition file which contains any metadata needed to fully describe the Popfly block. This contains input output type definitions, icon URLs, and other required IntelliSence information.

Popfly blocks also contain a JavaScript code file which contains any custom code, mostly functions, that will be executed by the block when used inside Popfly mashups.

The Microsoft Popfly Blocks Cheat Sheet

Popfly comes with a ton of official blocks right out of the box. There are over 50 Popfly blocks, and over twice as many more user created blocks. All of these can be used to create mashups directly, or as a starting place to build new and improved blocks that do even more.

I've taken the 50 or so official Popfly blocks and listed them along with all of their operations below so that readers can get a feel for what is available to work with.

// BLaugh Block
getRandomComics()
getComic()

// Block Inspector Block
getOperations ()
getAllowedValues()

// Calculator Block
getRandomWholeNumber()
getRandomNumber()
getMaximum()
getMinimum()
round()
add()
subtract()
multiply()
divide()

// Carousel Block
addImage()
setFrameColor()
setAttribution()

// Combine Block
combineTwoLists()
combineThreeLists()

// Conversation Block
addMessage()

// Digg Block
GetStories()
GetPopularStories()
GetUpcomingStories()
GetStoriesByContainer()
GetPopularStoriesByContainer()
GetUpcomingStoriesByContainer()
GetStoriesByTopic()
GetPopularStoriesByTopic()
GetUpcomingStoriesByTopic()
GetStoryByStoryId()
GetStoriesByUser()
GetTopics()
GetTopicByName()
GetUsers()
GetUser()
GetUserFriends()
GetUserFans()

// Digital Podcast Block
Search()

// Facebook Block
getFriends()
getUserInfo()
getPhotosOfMe()
getPhotos()
getPhotoAlbums()
getGroups()

// Filter Block
filter()
truncate()

// flickr Block
getGeotaggedPhotos()
getPhotos()
getTags()
getUserPhotos()
getPhotoset()

// Gauge Block
setValue()
increaseValue()

// GameTrailers Block
getFeeds()
getTrailers()

// GeoNames Block
getLatitudeAndLongitude()
lookupOnPlaceName()
lookupOnLatitudeLongitude()
lookupOnZipCode()
lookupOnCityState()

// Image Scaper Block
getImages()
getUniqueImages()

// Image Comment Block
comment()

// Indeed Jobs Block
search()

// Live Spaces Block
getPhotos()
getFriends()
getLists()

// MSN Horoscopes
getMonthlyHoroscope()
getWeeklyHoroscope()
getDailyHoroscope()

// MSN News Feeds
TopBoxOffice()
JimJubekMoneyCentralColumn()
LizPulliamMoneyCentralColumn()
InCarNation()
TopCelebrities()
TopMovieRentals()
InTheaters()
ComingSoon()
TopStories()

// My Live Contacts Block
getContacts()

// News Reader Block
addNewsItem()

// Page Turner Block
addNewsItem()

// PhotoFlip Block
addImage()

// PhotoSphere Block
addImage()

// PhotoStack Block
addImage()

//PhotoTiles Block
addImage()

//RegExp Block
getMatches()
isMatch()
isWholeNumber()

// RSS Block
getItems()
getFeed()

// SeattlePublicLibrary Block
getBooks()

// Slideshow Block
addImage()

// Snipshot Block
editImage()

// SoapBox Block
search()
getFeaturedVideos()

// Sort Block
sort()

// Stock Quotes
getStockGraph()
getQuote()

// Text Helper Block
getSubstring()
append()
skipFirstCharacters()
split()

// Timer Block
tick()

// Trynt Block
calculateLoveFactor()

// Twitter Block
getLatestPosts()
getFriendsPosts()

// Upcoming Block
findEvents()

// User Input Block
getText()
getTwoTextValues()
getThreeTextValues()
getChoiceFromDropdown()
getTwoChoicesFromDropdowns()
getThreeChoicesFromDropdowns()
getTextAndChoice()

// Video Player Block
findEvents()

// Virtual Earth Block
addPushpin()
setMapView()
drawLine()
deleteAllPushpins()

// Whack-A-Mole Block
addImage()

// Yahoo! Answers Block
getAnswers()

// Yahoo! Images Block
search()

// Yahoo! News Block
search()

// Yahoo! Term Extraction Block
getTerm()

// Yahoo! Traffic Block
getTrafficForAddress()
getTrafficForZipCode()
getTrafficForCoordinates()

// Yahoo! Video Block
search()

// XBox Live Block
getGamerCard()
getLastPlayedGames()
getPlayerPresence()

Points of Interest

If you want more information on Microsoft Popfly, I maintain a large collection of links on my blog: Microsoft Popfly Links.

This article is intended to be a brief introduction into Microsoft Popfly. It is meant to help readers see what tools are available and how they might use them to build their own creations. I intend to write two more articles. One will be on how to create custom Popfly mashups. And the other will be on how to create Popfly blocks of your own.

History

• 2007.06.02 Uploaded original article