One of the features which is extensively used with SharePoint 2010 is Ribbons controls. In this post we would be creating a custom ribbon and open up a application page when ribbon is clicked using client object model using javascript

//// Creating Ribbon XML

<CustomAction
   Id="CustomRibbonButton" /// Represent Unique Id of custom action
   Location="CommandUI.Ribbon.ListView" // Represent Location where Ribbon will be visible( I have kept it at List View, for other options you can try out "http://msdn.microsoft.com/en-us/library/bb802730.aspx"
   RegistrationId="0x01003E510038825141608FE2D66FF6804EDD" // Guid of Element specified in Registration type, make sure it is all capital letters, i have seen issues with lowercase letters"
   Rights="EditListItems" // Represent security rights i.e. users who has edit list items will only see this ribbon
   RegistrationType="ContentType"> // Type for which ribbon is attached for e.g. list,content type
    <CommandUIExtension> // Tag for user Interface
      <CommandUIDefinitions> // Represent commands for user interface
        <CommandUIDefinition
         Location="Ribbon.ListItem.Actions.Controls._children"> // Location of RIbbon Tab{ For this example it is under actions tab of list item}
          <Button
           Id="Ribbon.ListItem.Manage.Controls.TestButton"
           Command="ShowAlert" // The command to execute When Button is clicked
           LabelText="Sample Ribbon"// The label to be shown under ribbon
           Image32by32="/_layouts/images/menupersonalize.gif"//The image to shown as ribbon icon
           TemplateAlias="o2" //The TemplateAlias attribute is used to size and position controls within a group when a template is applied to the group. This is used when we have created Group tab and sections for showing ribbons
           Sequence="501" /> // Represent order of placement among other ribbons
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers> // Represent Commands
        <CommandUIHandler
          Command="ShowAlert" // Name should match Command attribute of Button
          CommandAction ="javascript:CustomCommandAction('{SiteUrl}', 'mybutton');" // Javascript function to execute when command(click event of button in this case as defined in button control)
          EnabledScript="javascript:EnableOnSingleItemSelection();" > // Javascript function to execute to enable/disable the ribbon
        </CommandUIHandler>
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>

// Custom Action to Specify the JS File
<CustomAction
    Id="CustomRibbonButton.Script"
    Location="ScriptLink"
    ScriptSrc ="/_layouts/SampleFolder/js/CustomRibbon.js"/>
</Elements>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Javascript functions in CustomRibbon.js

var listItem;
var buttonpressed;
var siteURL;

function EnableOnSingleItemSelection() {
    var items = SP.ListOperation.Selection.getSelectedItems();
    var itemsCount = CountDictionary(items);
    return (itemsCount == 1)
}

function CustomCommandAction(siteurl, buttonpressed) {
this.buttonpressed = buttonpressed;  
this.currentSiteUrl = siteurl;
var ctx = SP.ClientContext.get_current();// get client context
    var web = context.get_web();
    var selectedItems = SP.ListOperation.Selection.getSelectedItems(); // Get selected List items
     var listItm = selectedItems[0]; // this will only return ID of list item, to get list object server call has to be mad
      this.listItem = sdlist.getItemById(listItm.id);
        this.spContext.load(this.listItem);// Load listitem in spcontext to fetch all properties of listitem
        this.spContext.load(this.spContext.get_site());// To fetch site properties
        this.spContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

/// spContext.executeQueryAsync make asyncronous call to server and return the requested objects, two delegates are attached to handle success(onQuerySucceeded) and faliure(onQueryFailed) operations

function onQuerySucceeded(sender, args) {

 
    var title = this.listItem.get_item('Title');    // get the selected item title
    var options = SP.UI.$create_DialogOptions();
    var siteguid = spContext.get_site().get_id(); // get current site guid
    var itemid = this.listItem.get_item('ID'); // get the selected item id
    var appUrl;  
    appUrl = this.currentSiteUrl + "/_layouts/SampleFolder/SamplePage.aspx?title=" + title + "&siteguid=" + siteguid;// To redirect to SamplePage.aspx with query string parameter as selected item title and current siteguid
  

    options.url = appUrl;
    options.height = 600;
    options.width = 800;  
    options.dialogReturnValueCallback=Function.createDelegate(null, DialogClosedCallback);
    SP.UI.ModalDialog.showModalDialog(options); // To Open Page in Model Dialogue
}
function DialogClosedCallback() {SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);} // To refresh the parent  page after model dialogue closes

function onQueryFailed(sender, args) {
    alert('failed ' + args.toString());
}