Extending creativity to the web!
Sign-in | Join Now | Tour | Explore | AllStars | Contact | Help | Home
faq | business | developers | hosting | press | terms


Current version:2.1.03 BETA build #1021
Release date:December 31, 2010
 
Client language:HTML, XML, FBML, JavaScript
Server language:FGL, XML
Object database:db|FGL
Window library:xWinLib v
Facebook interface:objFacebook|FGL
OpenID:JanRain RPX + FGL
 
Written by:Steve Repetti
 
Special thanks to:Angie, Mike, Lisa, Kim, Amy, Jon, Nick, Derek, and Cosmo. Also, thanks to Stephen M., Lisa H., Chilly, Rockin' Grandma, Serita G., Mike H., Dave Jag, and Ian H.
 
Comments:Drop us a note...

The Technology of Scrapplet:

In addition to the application itself, Scrapplet utilizes a variety of advanced technologies in innovative ways. These combine to provide a seamless creative environment for Scrapplet users.

The client-side of Scrapplet uses industry standard HTML and JavaScript combined with Facebook’s markup language: FBML. Custom JavaScript classes were created to encapsulate the Scrapplet functionality and to provide enhanced customization for the client-side windowing library, xWinLib.

Client-side includes:

0001  <link rel='stylesheet' type='text/css' href='/scrappletlib_xxx.css'>
0002  <script type='text/javascript' src='/scrappletlib_xxx.js'></script>
0003  
0004  <!--// where "xxx" is the current release version number -->

All of the advanced interface components and user interactions within the browser are accomplished through the use of the xWinLib windowing library or localized enhancements to the library. This includes windowing, drag and drop, messaging, ajax, dynamic page manipulation, animation, and more.

The next generation cross-browser windowing, event, ajax, drag/drop, data portability, and Web 2.0 library for advanced websites and web-based applications. Click for additional information.

A custom window handler was created to provide styling for the windows, popups, and dialog boxes so they would match the look and feel of traditional Facebook components.

Custom Window Handler:

0001  function theme_Facebook( name, content, IsExternal, opts ) {
0002  	var w, UseButtons=1, trans=0;
0003  	
0004  	if ( opts ) {
0005  		UseButtons = opts.UseButtons == null ? UseButtons : opts.UseButtons;
0006  		trans = opts.trans == null ? trans : opts.trans;
0007  	}
0008  
0009  	w = new xWindow( name );
0010  	w.theme = "Facebook";
0011  
0012  	w.style = WS_NORMAL | WS_TRANSPARENT | WS_MAXIMIZABLE | WS_CLOSE | WS_MOVEABLE | WS_RESIZABLE | WS_HEADER | WS_FOOTER | WS_ALWAYSONTOP;
0013  	if ( IsExternal ) { w.style |= WS_EXTERNAL; }
0014  
0015  	w.transLevel = 100;
0016  	w.hdrHeight = 32;
0017  	w.funcHeader = function( w ) {
0018  		var s = "<table border=0 cellspacing=0 cellpadding=0 height=32 class=smtxtw width='100%'><tr valign=bottom>" +
0019  			"<td width=8 background='" + xWinThemesDir +"/fb_tl.png'></td>" +
0020  			"<td style='padding:5;' background='" + xWinThemesDir +"/fb_tc.png'><b>" + w.header + "</b></td>" +
0021  			"<td align=right style='padding:5; text-align:right;' nowrap background='" + xWinThemesDir +"/fb_tc.png'>";
0022  
0023  		if ( w.style & WS_MINIMIZABLE ) {
0024  			s += "<img src='" + xWinThemesDir +"/fb_min.png' width=18 height=14 border=0 style='cursor:pointer; position:relative; top:1;' onmouseover=\"domImageSet(this,'" + xWinThemesDir +"/fb_minOn.png');\" onmouseout=\"domImageSet(this,'" + xWinThemesDir +"/fb_min.png');\" ondragstart='return false;' onClick=\"xWin('" + w.name + "').minimize();\" title='Minimize'>";
0025  		}
0026  		if ( w.style & WS_MAXIMIZABLE ) {
0027  			s += "<img src='" + xWinThemesDir +"/fb_max.png' width=18 height=14 border=0 style='cursor:pointer; position:relative; top:1;' onmouseover=\"domImageSet(this,'" + xWinThemesDir +"/fb_maxOn.png');\" onmouseout=\"domImageSet(this,'" + xWinThemesDir +"/fb_max.png');\" ondragstart='return false;' onClick=\"xWin('" + w.name + "').maximize();\" title='Maximize'>";
0028  		}
0029  		if ( w.style & WS_CLOSE ) {
0030  			s += "<img src='" + xWinThemesDir +"/fb_close.png' width=18 height=14 border=0 style='cursor:pointer; position:relative; top:1;' onmouseover=\"domImageSet(this,'" + xWinThemesDir +"/fb_closeOn.png');\" onmouseout=\"domImageSet(this,'" + xWinThemesDir +"/fb_close.png');\" ondragstart='return false;' onClick=\"xWin('" + w.name + "').destroy();\" title='Close'>";
0031  		}
0032  
0033  		s += "<td width=8 background='" + xWinThemesDir +"/fb_tr.png'></td></tr></table>";
0034  		return( s );
0035  	};
0036  
0037  	w.ftrHeight = 8;
0038  	w.funcFooter = function( w ) {
0039  		var s = "<table border=0 cellspacing=0 cellpadding=0 height=8 class=smtxtw width='100%'><tr height=8 class='xtiny'>" +
0040  			"<td width=8 background='" + xWinThemesDir +"/vista_bl.png'></td>" +
0041  			"<td background='" + xWinThemesDir +"/vista_bc.png'><img src='" + xWinImageDir + "/trans.gif'></td>" +
0042  			"<td width=8 background='" + xWinThemesDir +"/vista_br.png'></td>" +
0043  			"</tr></table>";
0044  		return( s );
0045  	};
0046  
0047  	w.padding = 0;
0048  	w.overflow = "hidden";	
0049  	w.displayMode = DISP_NORMAL | DISP_NOPROGRESS;
0050  	content = IsExternal ? w.actionRenderExternal( content ) : content;
0051  	w.action = "<table border=0 cellspacing=0 cellpadding=0 class=txt width='100%' height='100%'>" + 
0052  		"<tr valign=top>" +
0053  		"<td nowrap width=8 background='" + xWinThemesDir +"/vista_lc.png'></td>" +
0054  		"<td id='" + name + "_bTheme' " + ( trans ? "" : "bgColor='#FFFFFF' " ) + "style='padding:0; border:solid 0px #A0A0A0;' class=txtw>" + content + "</td>" +
0055  		"<td nowrap width=8 background='" + xWinThemesDir +"/vista_rc.png'></td>" +
0056  		"</tr>";
0057  		
0058  	if ( UseButtons ) {
0059  		w.action += "<tr valign=center height=30>" +
0060  		"<td nowrap width=8 background='" + xWinThemesDir +"/vista_lc.png'></td>" +
0061  		"<td bgColor='#f2f2f2' style='text-align:right; padding:2; border:solid 1px #cccccc;' class=txtw>" + 
0062  		"<input type=button class=inputbutton value='Save' onClick=\"xWin('" + name + "').iframeDocument( ).processSubmit( );\"> <input type=button class='inputbutton inputaux' value='Cancel' onClick=\"xWin('" + w.name + "').destroy();\">" +
0063  		"</td>" +
0064  		"<td nowrap width=8 background='" + xWinThemesDir +"/vista_rc.png'></td>" +
0065  		"</tr>";
0066  	}
0067  
0068  	w.action += "</table>";
0069  
0070  	return( w );
0071  }

The server-side of Scrapplet includes a custom Facebook integration library written in open source FGL. This makes it easy to integrate the Scrapplet application with the resources available within Facebook.

Custom Server-side Facebook Integration:

0001  <[
0002  	LIBRARY \fgl\libs\system.flb
0003  	LIBRARY \fgl\libs\facebook.flb
0004  	LIBRARY \fgl\libs\scrapplet.flb
0005  
0006  	session = new( "session" )
0007  
0008  	// instantiate Facebook class with scrapplet configuration
0009  	fb = new( "objFacebook", "scrapplet" )
0010  	scrapplet = new( "objScrapplet", session, fb )
0011  
0012  	// require Facebook login
0013  	if ( ! scrapplet.VerifyLoggedIn( ) )
0014  	    session.response( "You must be logged in to Facebook to access this feature."
0015  	    return( 0 )
0016  	end
0017  
0018  	// get the xml list of friends from Facebook
0019  	data = fb.friends.get( )
0020  
0021  	// instantiate optimized xml object
0022  	xml = new( "objXML2Array", data )
0023  
0024  	// extract user ids from xml into a comma delimted list
0025  	uids = xml.getTags( "uid", xml.DATA_DELIMITED_COMMA )
0026  
0027  	// get xml data of specified users, re-instantiate xml object
0028  	xml.data = fb.users.getInfo( uids, "name,pic" )
0029  
0030  	// output raw xml
0031  	! xml.renderHMTL( 1 )
0032  	
0033  	// get array of tags	
0034  	atag = xml.getTags( "pic" )
0035  	cnt = len( atag )
0036  
0037  	// loop through elements
0038  	for ( i=1; i<=cnt; i++ )
0039  	    obj = xml.getParent( atag[i] )
0040  		
0041  	    id =   xml.getValue( obj, "uid"  )
0042  	    name = xml.getValue( obj, "name"  )	
0043  	    img =  xml.getValue( obj, "pic" )
0044  
0045  	    // output the individual records
0046  	    ! "User Id: " + id + "<br>"
0047  	    ! "Name:" + name + "<br>"
0048  	    ! "<img src='" + img + "'><p>"
0049  	end
0050  
0051  ]>


© Copyright 2008-2012, by RadWeb Technologies, LLC., All Rights Reserved