SocialSprout: Using SproutCore in OpenSocial Apps Step by Step

sudo gem install sproutcore

sproutcore socialsprout

sc-gen model socialsprout/friend_icon

sc-gen controller socialsprout/master

// ==========================================================================
// Socialsprout.FriendIcon Fixtures
// ==========================================================================

require('core') ;

Socialsprout.FIXTURES = Socialsprout.FIXTURES.concat([

  { guid: 1,
     type: 'FriendIcon',
     url: 'http://farm4.static.flickr.com/3267/2591718129_04945449fb_m.jpg'
   },
  
   { guid: 2,
     type: 'FriendIcon',
     url: "http://farm4.static.flickr.com/3194/2591717747_c4b0fa9690_m.jpg"
   },
  
   { guid: 3,
     type: 'FriendIcon',
     url: "http://farm4.static.flickr.com/3157/2563126707_79db7ea0b3_m.jpg"
   },
  
   { guid: 4,
     type: 'FriendIcon',
     url: "http://farm4.static.flickr.com/3008/2563069825_7090454788_m.jpg"
   },
  
   { guid: 5,
     type: 'FriendIcon',
     url: "http://farm4.static.flickr.com/3101/2563894088_2b83235b3c_m.jpg"
   }

]);

<% content_for('body') do %>

<% view :main do %>  
  <div style="margin-top: 20px">
  <h1>Social Friends are Really Just Social Sprouts</h1>
  </div>
  <% scroll_view :grid_scroll_view, :outlet => true do %>
    <%= grid_view :grid_view, :outlet => true,
        :example_view => 'SC.ImageCellView',
        :content_value_key => 'url',
        :can_reorder_content => true,
        :row_height => 120,
        :column_width => 160,
        :bind => {
          :content => 'Socialsprout.masterController.arrangedObjects',
          :selection => 'Socialsprout.masterController.selection'
        } %>
  <% end %>
  
  50
  <%= slider_view :outlet => true,
    :minimum => 50,
    :maximum => 320,
    :step => 10,
    :bind => { :value => 'Socialsprout.masterController.friendIconSize' }
  %>
  320
<% end %>
by <a href="http://springenwerk.com">Johannes Fahrenkrug</a> in the Year of the Sprout

<% end %>

.grid_scroll_view {
  height: 200px;
}

.main {
  height: 300px;
}

// ==========================================================================
// Socialsprout.MasterController
// ==========================================================================

require('core');


Socialsprout.masterController = SC.ArrayController.create(
/** @scope Socialsprout.masterController */ {

  friendIconSize: 150,
  
  friendIconSizeObserver: function() {
    if (this._friendIconSizeDidChangeTimer && this._friendIconSizeDidChangeTimer.get('isValid')) return ;

    this._friendIconSizeDidChangeTimer = this.invokeLater('friendIconSizeDidChange') ;
  }.observes('friendIconSize'),

  /**
    This is the actual method that updates the grid view with the new
    icon size.  It computes an ideal row and column width based on the
    friendIconSize property and sets them.  Then it calls updateChildren(true),
    which will force the collection view to relayout all of its children.

    Most of the time collection views will notice anytime a property affecting
    their content has changed and update accordingly.  However if you change
    some shared properties such as this one that effect all layout, you may
    sometimes need to call updateChildren() manually.
  */
  friendIconSizeDidChange: function() {
    // clear the timer..
    this._friendIconSizeDidChangeTimer = null ;

    // get the friendIconSize and compute the new row and colum width
    var friendIconSize = this.get('friendIconSize') ;
    var columnWidth = friendIconSize ;
    var rowHeight = Math.floor((friendIconSize * 120) / 160) ; // ratio

    var view = SC.page.getPath('main.gridScrollView.gridView') ;
    if (view && ((view.get('columnWidth') != columnWidth) || (view.get('rowHeight') != rowHeight))) {
      view.beginPropertyChanges() ;
      view.set('rowHeight', rowHeight) ;
      view.set('columnWidth', columnWidth) ;
      view.endPropertyChanges() ;
      view.updateChildren(true) ;
    }
  },

}) ;

// ==========================================================================
// Socialsprout
// ==========================================================================

// This is the function that will start your app running.  The default
// implementation will load any fixtures you have created then instantiate
// your controllers and awake the elements on your page.
//
// As you develop your application you will probably want to override this.
// See comments for some pointers on what to do next.
//
function main() {

  Socialsprout.server.preload(Socialsprout.FIXTURES) ;
  Socialsprout.awakeApp();
  //Socialsprout.loadFriends();

} ;

Socialsprout.loadFriends = function() {
    var req=opensocial.newDataRequest();

    var friends_params = {};
    //friends_params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;
    friends_params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS]=[opensocial.Person.Field.GENDER, opensocial.Person.Field.PROFILE_URL];
    //TODO make sure we get all the friends, there might be a 20 friends limit
    //params[opensocial.DataRequest.PeopleRequestFields.MAX]=10;

    req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS, friends_params), 'owner_friends');
    
    req.send(Socialsprout.loadFriendsCallback);
}


Socialsprout.loadFriendsCallback = function(data) {
    if (data.hadError()) {
        //I know this is ugly, but it's just a PoC, so c'mon...
        alert('error getting opensocial friends');
    } else {
        var owner_friends = data.get('owner_friends').getData();
        
        if (owner_friends.size() > 0) {
            friends_array = owner_friends.asArray();
            for (i = 0; i < friends_array.length; i += 1) {
                // create CS records
                var thumb_url = friends_array[i].getField(opensocial.Person.Field.THUMBNAIL_URL);
                console.log(thumb_url);
                SC.Store.addRecord( Socialsprout.FriendIcon.create({ 'url': thumb_url }) );
            }
        }
    }
    
    Socialsprout.awakeApp();
}

Socialsprout.awakeApp = function() {
    SC.page.awake() ;

    var icons = Socialsprout.FriendIcon.findAll();
    Socialsprout.masterController.set('content',icons);

    SC.page.get('main'); 
}

sc-server

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="SocialSprout"
        description="Test to see if sproutcore and opensocial work together"
        author="Johannes Fahrenkrug"
        author_link="http://springenwerk.com"
        height="300">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      
      <% # 
        # This line should appear in your head area to include the stylesheets
        # generated by your client.  If you need to include your own
        # stylesheets, you don't need to change it here.  Instead, use the
        # :requires option in routes.rb. 
      -%>
          <%= stylesheets_for_client(nil, :include_method => :import) %>
      <%= @content_for_page_styles %>

      
<div class="sc-theme focus">
    <!-- Main Page Body -->
    <%= @content_for_body %>
</div>

<% # 
   # This is where the resources you delcare will appear.  You must
   # include the following three lines verbatim for the resources you
   # declare to be properly used.
-%>
    <!-- Resources to be removed from DOM on page load -->
    <div id="resources" style="display:none; visibility: hidden;">
      <%= @content_for_resources -%>
    </div>

<% #
   # This line should appear at the bottom of your page to include your
   # generated JavaScript and any libraries you reference.  If you need
   # to include other javascripts, add them to the :requires option of
   # your client in routes.rb instead of changing it here.
-%>
    <!-- Include Site Javascript -->
    <%= javascripts_for_client %>
<%= @content_for_page_javascript %>

<% #
   # The following lines to the closing body tag must be included at the
   # very end of your file.  This will actually setup the JavaScript 
   # views on your page and register SproutCore to start on page load.
-%>
<!-- Render Page Views -->
<%= render_page_views %>

    <!-- Start SproutCore on Page Load -->
    <script type="text/javascript">gadgets.util.registerOnLoadHandler(SC.didLoad);</script>
<%= @content_for_final %>
    ]]>
  </Content>
</Module>

  c[:resources_relative] = true
  c[:url_prefix] = 'http://socialsprout.googlecode.com/svn/trunk/tmp/build'
  c[:layout] = 'index.rhtml'

function main() {

  //Socialsprout.server.preload(Socialsprout.FIXTURES) ;
  //Socialsprout.awakeApp();
  Socialsprout.loadFriends();

} ;

sc-build sproutcore
sc-build prototype
sc-build socialsprout