Friday, November 21, 2008

SproutCore Javascript UI Framework vs. Yui or Fluid Javascript UI Controls

Jeremy just told me about SproutCore which has some neat stuff. My first understanding of SproutCore was that it was just to assist with UI controls. However, it is really a client-side javascript-based MVC framework that includes several UI controls that help you develop applications faster. The primary platform it is intended to be used with is Ruby, however there are a few others that it works with. However, you probably won't find many examples of using it with Java. SproutCore's UI controls are snazzy.: * The buttons are nice. They contain text which is selectable, but they don't highlight when you select them, and you can click anywhere on the button as you'd expect). * Their image collection supports drag and drop organization. * Their collections/list stuff looks neat. * The dialog and panel are neat. The only bad part about it (for me) is that it is Ruby-centric, whereas stuff like YUI and Fluid components javascript UI stuff can be applied to any web technology. If you want similar dialog and panel functionality to SproutCore, but you aren't using Ruby, you can do it in javascript (with a background fade to boot) by using YUI with SimpleDialog and a fade effect. Ren Provey wrote the following as part of the CSUM plugin to show a dialog and fade out the background when you delete a group (you'd need to correct the YUI includes to use, but it is just an example):
<!-- the following was written by Ren Provey in 2007 as part of the Confluence Space User Management (CSUM) Plugin
http://confluence.atlassian.com/display/CONFEXT/Custom+Space+User+Management+Plugin
source:
http://svn.atlassian.com/svn/public/contrib/confluence/custom-space-user-management/tags/2.0.2/src/main/resources/templates/permissionmgmt/display.vm
http://svn.atlassian.com/svn/public/contrib/confluence/custom-space-user-management/tags/2.0.2/src/main/resources/templates/permissionmgmt/manage-users-basic.vm

Copyright (c) 2007, Custom Space User Management Plugin Development Team
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of the Custom Space User Management Plugin Development Team
nor the names of its contributors may be used to endorse or promote
products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.

...
@author Ren Provey
...  

(note: small modifications made 11/27/2008)
-->
        ...

  <script type="text/javascript" src="./yahoo-dom-event.js"></script>
  <script type="text/javascript" src="./element-beta-min.js"></script>        
  <script type="text/javascript" src="./container-min.js"></script>
  ...
  
  <script>
  YAHOO.namespace("myNamespace");

  var trashLinkInterception = function(e) {
   YAHOO.util.Event.preventDefault(e);
                        var targetLink = document.getElementById("trashGroup").href

   groupTrashDialog = new YAHOO.widget.SimpleDialog("dlg", { 
    width: "25em", 
    //effect:[{effect:YAHOO.widget.ContainerEffect.FADE, 
    //  duration:0.25}],
    fixedcenter:true,
    modal:true,
    draggable:false } );
   groupTrashDialog.setHeader("Confirm Group Deletion");
   groupTrashDialog.setBody("Are you sure you want to delete this group?");

   var handleYes = function() {
    window.location = targetLink;
    this.hide();
   };

   var handleNo = function() {
    //user cancels item deletion
    this.hide();
   };

   var trashButtons = [ { text:"Yes", handler:handleYes },
         { text:"Cancel", handler:handleNo, isDefault:true } 
       ];

   groupTrashDialog.cfg.queueProperty("buttons", trashButtons);
   groupTrashDialog.render(document.body);
  };
  
  ...
  
  YAHOO.util.Event.addListener("trashGroup", "click", trashLinkInterception);
  YAHOO.util.Event.addListener(window, "load", YAHOO.myNamespace.init);
  </script>
        ...  
  <a id="trashGroup" href="some_relative_url_here"><img src="trash_icon.png" />delete_text_preferably_i18n'd</a>
A screenshot comparison of SproutCore vs. this example YUI dialog: SproutCore's confirmation dialog Ren's CSUM YUI group delete confirmation dialog

1 comment:

okito said...

SproutCore only uses ruby to help you build your HTML/JavaScript. It does not exist in production code at all, so you can use it with any backend technology you like