http://blogs.msdn.com/jijia/archive/tags/Gadget/default.aspxTags: Gadgeten-USCommunityServer 2.1 SP1 (Build: 61025.2)http://blogs.msdn.com/jijia/archive/2007/05/27/popfly.aspxSun, 27 May 2007 08:33:00 GMT91d46819-8472-40ad-a661-2c78acb4018c:2909923jijia0http://blogs.msdn.com/jijia/comments/2909923.aspxhttp://blogs.msdn.com/jijia/commentrss.aspx?PostID=2909923<P mce_keep="true">&nbsp;</P> <P><STRONG><FONT color=#ffff00>· 什么是Popfly?</FONT></STRONG> <P>Popfly是一个基于Web的可视化工具，Popfly利用了微软今年4月30日发布的Silverlight技术。Popfly可以帮助我们建立和分享网站、Mashup、Gadget，以及更加丰富的在线用户体验的工具。 Popfly Alpha提供给用户25M存储空间。 <P><STRONG><FONT color=#ffff00>· Popfly包括什么？</FONT></STRONG> <P>Popfly主要分为两个部分，一个是Popfly Space，类似于一个社交圈，你可以增加好友，和好友共享项目，共享Mashup，Block，另一个是Popfly Creator，主要用来创建页面，Gadget，Mushup和Block。 <P><FONT color=#ffff00><STRONG>· 如何建立一个简单的Live Space照片浏览Mashup？</STRONG></FONT> <P>1. 创建一个Mashup(create a mashup) <P>登陆后，选择Create a Mashup，显示如下工作区(基于Silverlight实现)： <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image015.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image015.png"></A><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image042.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image042.png"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=248 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb14.png" width=400 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb14.png"></A> <P>A区相当于一个Toolbox，里面集成了两大类Block一类是Popfly提供的公用Block，另一类是Popfly Space中其他用户共享的Block。可以通过上面的Search box来快速选择使用Block。 <P>B区是Popfly的工作区，创建Mashup的内容。 <P>C区是快速帮助。 <P>D区是快速导航和用户信息面板。 <P>2. 加入"Live Sapces" Blcok <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image030.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image030.png"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=237 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb10.png" width=400 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb10.png"></A> <P>3. 设置Live Space参数username，以及获取照片最大数 <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image029.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image029.png"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=325 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb9.png" width=400 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb9.png"></A> <P>4. 加入并链接“Sildeshow"block <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image033.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image033.png"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=286 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb11.png" width=400 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb11.png"></A> <P>5. 选择Preview预览Mashup <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image036.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image036.png"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=243 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb12.png" width=400 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb12.png"></A> <P>另外，也可以在Mashup中加入Annotation涂鸦版。 <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image041.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image041.png"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=246 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb13.png" width=400 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb13.png"></A> <P>6. 通过iframe引用mashup <P><FONT face=Calibri>&lt;iframe style='width:100%; height:100%;' src='http://www.popfly.ms/users/[username]/[mashup project name].small' frameborder='no'&gt;&lt;/iframe&gt;</FONT> <P><FONT face=Calibri>更多iframe相关属性查找，请访问 <A href="http://msdn2.microsoft.com/en-us/library/ms535258.aspx" mce_href="http://msdn2.microsoft.com/en-us/library/ms535258.aspx">这里</A></FONT> <P><FONT color=#ffff00><STRONG>· 如何应用Visual Studio插件开发Popfly？</STRONG></FONT> <P>安装<A href="http://www.popfly.ms/Overview/Explorer.aspx" mce_href="http://www.popfly.ms/Overview/Explorer.aspx"><FONT color=#ffffff>Visual Studio Popfly Add-on</FONT></A>后，可以通过Visual Studio编辑项目、管理好友等操作。 <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image045.png" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image045.png"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=516 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb15.png" width=400 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/image0_thumb15.png"></A>&nbsp; <P><STRONG><FONT color=#ffff00>· Cookies？</FONT></STRONG> <P>下载Popfly桌面，请点击<A href="http://www.popfly.ms/Overview/Desktop.aspx" mce_href="http://www.popfly.ms/Overview/Desktop.aspx">这里</A> <P>下载Popfly 提供的Visual Studio插件下载，请点击<A href="http://www.popfly.ms/Overview/Explorer.aspx" mce_href="http://www.popfly.ms/Overview/Explorer.aspx">这里</A> <P>三分钟应用Popfly创建Mashup，请点击<A href="http://popflycreator.ms/content/demos/ThreeMinuteMashup.wmv" mce_href="http://popflycreator.ms/content/demos/ThreeMinuteMashup.wmv">这里</A> <P><A href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/wish3.jpg" atomicselection="true" mce_href="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/wish3.jpg"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height=180 src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/wish2.jpg" width=240 border=0 mce_src="http://blogs.msdn.com/blogfiles/jijia/WindowsLiveWriter/10d3d086bf44_96B3/wish2.jpg"></A></P> <DIV class=wlWriterSmartContent id=0767317B-992E-4b12-91E0-4F059A8CECA8:efc685bd-a10c-4580-90b8-8a9f3701e5fc contentEditable=false style="PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">Technorati tags: <A href="http://technorati.com/tags/Popfly" rel=tag mce_href="http://technorati.com/tags/Popfly">Popfly</A>, <A href="http://technorati.com/tags/Mashup" rel=tag mce_href="http://technorati.com/tags/Mashup">Mashup</A></DIV><img src="http://blogs.msdn.com/aggbug.aspx?PostID=2909923" width="1" height="1">popflyGadgetMashup