about.rhtml

<% view :about, :pane => :dialog, :width => 300, :bind=>{:visible => 'ScAdmin.appController.isAboutVisible'} do %>
<h1>Sprouted Note</h1>
version: 0.6.1
<hr>

<a href=http://www.maloninc.com/cgi-bin/fswiki/wiki.cgi?page=SproutedNote target=_blank>SproutedNote Wiki</a>
<div> &copy;2008 <a href=mailto:hiroyuki@maloninc.com>Malon,Inc</a> All Rights Reserved. </div>

<div class="buttons">
  <%= button_view :outlet => true, :title => 'Close',
    :bind=>{:default => 'ScAdmin.appController.isAboutVisible'},
    :action => 'ScAdmin.appController.hideAbout' %>
</div>
<% end %>

app.js

// ==========================================================================
// ScAdmin.AppController
// ==========================================================================

require('core');

/** @class

  (Document Your View Here)

  @extends SC.Object
  @author AuthorName
  @version 0.1
  @static
*/
ScAdmin.appController = SC.Object.create(
/** @scope ScAdmin.appController */ {

  isAboutVisible: false,

  showAbout: function(){
    SC.page.get('about').set('isVisible',YES);
  },

  hideAbout: function(){
    SC.page.get('about').set('isVisible',NO);
  }

}) ;

body.haml

- content_for('body') do
  - view :header, :class => 'sc-header sc-square-theme' do
    .left.app-label{:onClick => 'ScAdmin.appController.showAbout();'}
      %img{:src => static_url('images/scadmin-logo.png')}
      = label_view :outlet => true, :tag => :span, :value => 'Administration'

body.rhtml

<% content_for('body') do %>
<% view :header, :class => 'sc-header sc-square-theme' do %>
  <div class="left app-label" onClick = 'ScAdmin.appController.showAbout();'>
    <img src="<%= static_url('images/scadmin-logo.png') %>" />
    <%= label_view :outlet => true, :tag => :span, :value => 'Administration' %>
  </div>
<% end %>
<% end %>