| 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.
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
|
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.