glimmer-dsl-opal 0.7.2 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a9e35ef70d7e6aae911e0b4be468617f0efd5c5ee2b31ad9b6aef191b52681f
-  data.tar.gz: 3a7624376ee038d5419b993911d6f0ec59f94780425c10306f5c7928572ad4de
+  metadata.gz: 5f0f0793d8e8128a47664c70eefee97fb797f61cbb8026937c3f88e00004a3b2
+  data.tar.gz: 7482911470d0ea4c87273622642b0d544f94bd0154913d2836e81e07e6d27da9
 SHA512:
-  metadata.gz: 8a98ce6e0b97501d3f78b5e589ada5e65d31c94d75ddcfa7e7f1abee3aa15e03bd51d7c3167f395778b458fd1a55e6fb630704aae33ea7ef633d1a7e603f952a
-  data.tar.gz: 9c602827b6d2da600ac68ad77b2f9d5faa01f29f9b7f0a0b843878950579836de0f2eb1f35a6e7d8681b63dc14afc429cdd0c0420d01a561683b600d13e07e4a
+  metadata.gz: 0c6dd0b2de545158edfac2173cf7793415ad6046c650650b6b371a4e0704cd7de2cb78fc11ec05d653b266856c676350a224752417954a304ef9a2a95186439f
+  data.tar.gz: a3bb54ba72e3d55f9352e4ea660d14497212c058cd7f463464dacef05093d74dfabbcee2997d150c00b64923a1a71f592ae706e4155a57280a9f12dfb9fb8d9c

data/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Change Log
 
+## 0.9.0
+
+- Support `menu_bar`
+- Hello, Menu Bar! Sample
+- Remove the need to call Document.ready? before opening a Glimmer shell
+- Support opening a message_box before creating a shell
+
+## 0.8.0
+
+- Hello, Pop Up Context Menu! Sample
+- Hello Message Box!
+- Update hello list samples
+- Support context menus `menu`/`menu_item` directly under a widget (using jQuery UI)
+- Support generating new lines when entering `label` `text` with \n (auto-converting to <br />)
+- Support generating new lines when entering `message_box` `message` with \n (auto-converting to <br />)
+- Support having any widget contribute static CSS to ShellProxy
+- Add Kernel#include_package shim to allow running JRuby include_package from Glimmer DSL for SWT without failing
+- Add WidgetProxy#swt_widget to allow running include_package from Glimmer DSL for SWT without failing
+
+## 0.7.5
+
+- Update login sample from Glimmer DSL for SWT's latest changes
+- Update contact_manager sample from Glimmer DSL for SWT's latest changes
+- Fixed issue regarding unavailable localStorage data when accessed by custom_widget_expression in hello_checkbox_group, hello_radio_group, and hello_custom_widget
+
+## 0.7.4
+
+- Hello, Button! Sample
+- Fix issue with aligning label as :left, :center, or :right via style style when fill_layout is used
+- Fix Hello, Browser sample by accessing https ssl website
+- Fix issue with filling space horizontally when using grid layout
+- Fix broken embedded `calendar` widget data-binding for hello_date_time.rb sample
+- Fix broken message_box after opening multiple shells
+- Fix issue with opening custom shells in new tabs/windows when CustomShell subclass is required conditionally
+
+## 0.7.3
+
+- Refactor to use to_collection gem
+- Fix issue with breaking `date`/`date_drop_down` data-binding as table editor on focus lost
+- Fix issue with requiring OS, File, and Display class after they've been extracted out
+
 ## 0.7.2
 
 - `date_drop_down` `table_column` `editor`

data/README.md

@@ -1,10 +1,10 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Opal 0.7.2 (Pure Ruby Web GUI)
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Opal 0.9.0 (Pure Ruby Web GUI)
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 ### You can finally live in pure Ruby land on the web!
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an alpha [gem](https://rubygems.org/gems/glimmer-dsl-opal) that enables building web GUI in pure Ruby via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/).
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an **alpha** [gem](https://rubygems.org/gems/glimmer-dsl-opal) that enables building web GUI in pure Ruby via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/).
 
 Use in one of two ways:
 - **Direct:** build the GUI of web apps with the same friendly desktop GUI Ruby syntax as [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt), thus requiring a lot less code than web technologies that is in pure Ruby and avoiding opaque web concepts like 'render' and 'reactive'. No HTML/JS/CSS skills are even required. Web designers may be involved with CSS styling only if needed.
@@ -20,7 +20,7 @@ Add the following require statement to `app/assets/javascripts/application.rb` i
 require 'glimmer-dsl-opal/samples/elaborate/tic_tac_toe'
 ```
 
-Glimmer GUI code from [glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb](glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb):
+Glimmer GUI code from [glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb](lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb):
 
 ```ruby
 # ...
@@ -52,15 +52,17 @@ Tic Tac Toe on the web (using the [glimmer-dsl-opal](https://rubygems.org/gems/g
 ![Glimmer DSL for Opal Tic Tac Toe In Progress](images/glimmer-dsl-opal-tic-tac-toe-in-progress.png)
 ![Glimmer DSL for Opal Tic Tac Toe Game Over](images/glimmer-dsl-opal-tic-tac-toe-game-over.png)
 
-Tic Tac Toe on the desktop with the same exact code (using the [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+Tic Tac Toe on the desktop with the same exact code (using the [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
 ![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe.png)
 ![Glimmer DSL for SWT Tic Tac Toe In Progress](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe-in-progress.png)
 ![Glimmer DSL for SWT Tic Tac Toe Game Over](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe-game-over.png)
 
-NOTE: Alpha Version 0.7.2 only supports bare-minimum capabilities for the following [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) [samples](https://github.com/AndyObtiva/glimmer#samples):
+NOTE: Glimmer DSL for Opal is an alpha project. Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
 
-Hello:
+**Alpha Version** 0.9.0 only supports bare-minimum capabilities for the following [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written in [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt)):
+
+[Hello samples](#hello-samples):
 
 - [Hello, World!](#hello-world)
 - [Hello, Combo!](#hello-combo)
@@ -78,8 +80,12 @@ Hello:
 - [Hello, Checkbox Group!](#hello-checkbox-group)
 - [Hello, Date Time!](#hello-date-time)
 - [Hello, Table!](#hello-table)
+- [Hello, Button!](#hello-button)
+- [Hello, Message Box!](#hello-message-box)
+- [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu)
+- [Hello, Menu Bar!](#hello-menu-bar)
 
-Elaborate:
+[Elaborate samples](#elaborate-samples):
 
 - [Login](#login)
 - [Tic Tac Toe](#tic-tac-toe)
@@ -100,17 +106,32 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
 The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
 
 Widgets:
-- `shell`
-- `label`
-- `combo`
 - `button`
-- `text`
+- `browser`
+- `calendar`
+- `checkbox`
+- `checkbox_group`
+- `combo`
 - `composite`
-- `list` & `list(:multi)`
+- `date`
+- `date_drop_down`
+- `group`
+- `label`
+- `list` (w/ optional `:multi` SWT style)
+- `menu`
+- `menu_bar`
+- `menu_item`
+- `message_box`
+- `radio`
+- `radio_group`
+- `scrolled_composite`
+- `shell`
 - `tab_folder`
 - `tab_item`
 - `table`
 - `table_column`
+- `text`
+- `time`
 - `message_box`
 - Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget
 - Glimmer::UI::CustomShell: ability to define any keyword as a custom shell (aka custom window) that opens in a new browser window (tab) automatically unless there is no shell open in the current browser window (tab)
@@ -121,20 +142,34 @@ Layouts:
 - `fill_layout`
 - `layout_data`
 
-Graphics:
+Graphics/Style:
 - `color`
 - `font`
+- `Point` class used in setting location on widgets
+- `swt` and `SWT` class to set SWT styles on widgets
 
 Data-Binding/Observers:
 - `bind`
 - `observe`
 - `on_widget_selected`
 - `on_modify_text`
+- `on_key_pressed` (and SWT alias `on_swt_keydown`)
+- `on_key_released` (and SWT alias `on_swt_keyup`)
+- `on_mouse_down` (and SWT alias `on_swt_mousedown`)
+- `on_mouse_up` (and SWT alias `on_swt_mouseup`)
 
 Event loop:
 - `display`
 - `async_exec`
 
+## Principles
+
+- **Live purely in Rubyland via the Glimmer GUI DSL**, completely oblivious to web browser technologies.
+- **Forget Routers!** Glimmer DSL for Opal supports auto-routing of custom shells (windows), which are opened as separate tabs in a web browser with automatically generated routes and bookmarkable URLs.
+- **HTML is strictly made for creating documents not interactive applications**. As such, software engineers can avoid it and focus on creating web applications more productively with Glimmer DSL for Opal in pure Ruby instead (just like they do in desktop development) while content creators and web designers can be the ones responsible for creating HTML documents for web content purposes only as HTML was originally intended. That way, Glimmer web GUI is used and embedded in web pages when providing users with applications while the rest of the web pages are maintained by non-engineers as pure HTML. This achieves a correct separation of responsibilities and better productivity and maintainability.
+- **Approximate styles by developers via the Glimmer GUI DSL. Perfect styles by designers via pure CSS**. Developers can simply build GUI with approximate styling similar to desktop GUI without worrying about pixel-perfect aethetics. Web designers can take styling further with pure CSS since every HTML element auto-generated by Glimmer DSL for Opal has a predictable ID and CSS class. This achieves a proper separation of responsibilities between developers and designers.
+- **Web servers are used just like servers in traditional client/server architecture**, meaning they simply provide RMI services to enable centralizing some of the application logic and data in the cloud to make available everywhere and enable data-sharing with others.
+
 ## Background
 
 The original idea behind Glimmer DSL for Opal was that you start by having a [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) desktop app that communicates with a Rails API for any web/cloud concerns. The pure Ruby [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) is very simple, so it is more productive to build GUI in it since it does not go through a server/client request/response cycle and can be iterated on locally with a much shorter feedback cycle. Once the GUI and the rest of the app is built. You simply embed it in a Rails app as a one line require statement after adding the Glimmer DSL for Opal gem, and BOOM, it just works on the web inside a web browser with the same server/client communication you had in the desktop app (I am working on adding minimal support for net/http in Opal so that desktop apps that use it continue to work in a web browser. Until then, just use [Opal-jQuery](https://github.com/opal/opal-jquery) http support). That way, you get two apps for one: desktop and web.
@@ -155,7 +190,7 @@ Alternatively, web developers may directly use [Glimmer DSL for Opal](https://ru
 
 ## Setup
 
-(NOTE: if you run into issues, keep in mind this is a very early experimental and incomplete alpha. Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
+(NOTE: Keep in mind this is a very early experimental and incomplete **alpha**. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-opal/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
 
 The [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem is a Rails Engine gem that includes assets.
 
@@ -179,7 +214,7 @@ Add the following to `Gemfile`:
 gem 'opal-rails', '~> 1.1.2'
 gem 'opal-async', '~> 1.2.0'
 gem 'opal-jquery', '~> 0.4.4'
-gem 'glimmer-dsl-opal', '~> 0.7.2'
+gem 'glimmer-dsl-opal', '~> 0.9.0'
 gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
 gem 'glimmer-dsl-css', '~> 1.1.0', require: false
 
@@ -248,11 +283,19 @@ end
 
 Follow the instructions below to try out [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) samples webified via [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal)
 
-Also, this external sample app contains all the samples mentioned below configured inside a Rails 5 [Opal](https://opalrb.com/) app with all the pre-requisites ready to go for convenience:
+The [Hello samples](#hello-samples) demonstrate tiny building blocks (widgets) for building full fledged applications.
 
-[https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
+The [Elaborate samples](#elaborate-samples) demonstrate more advanced sample applications that assemble multiple building blocks.
 
-Some of the screenshots might be out of date with updates done to samples in both [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) and [glimmer-dsl-opal](https://github.com/AndyObtiva/glimmer-dsl-opal).
+This external sample app contains all the samples mentioned below configured inside a Rails [Opal](https://opalrb.com/) app with all the pre-requisites ready to go for convenience:
+
+[https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails-app)
+
+You may visit a Heroku hosted version at:
+
+https://sample-glimmer-dsl-opal-app.herokuapp.com/
+
+Note: Some of the screenshots might be out of date with updates done to samples in both [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) and [glimmer-dsl-opal](https://github.com/AndyObtiva/glimmer-dsl-opal).
 
 ### Hello Samples
 
@@ -559,44 +602,53 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
 Or add the Glimmer code directly if you prefer to play around with it:
 
 ```ruby
-class Person
-  attr_accessor :provinces, :provinces_options
-
-  def initialize
-    self.provinces_options=[
-      "",
-      "Quebec",
-      "Ontario",
-      "Manitoba",
-      "Saskatchewan",
-      "Alberta",
-      "British Columbia",
-      "Nova Skotia",
-      "Newfoundland"
-    ]
-    self.provinces = ["Quebec", "Manitoba", "Alberta"]
-  end
-
-  def reset_provinces
-    self.provinces = ["Quebec", "Manitoba", "Alberta"]
-  end
-end
-
 class HelloListMultiSelection
+  class Person
+    attr_accessor :provinces, :provinces_options
+  
+    def initialize
+      self.provinces_options = [
+        '',
+        'Alberta',
+        'British Columbia',
+        'Manitoba',
+        'New Brunswick',
+        'Newfoundland and Labrador',
+        'Northwest Territories',
+        'Nova Scotia',
+        'Nunavut',
+        'Ontario',
+        'Prince Edward Island',
+        'Quebec',
+        'Saskatchewan',
+        'Yukon'
+      ]
+      reset_provinces
+    end
+  
+    def reset_provinces
+      self.provinces = ['Quebec', 'Manitoba', 'Alberta']
+    end
+  end
+  
   include Glimmer
+  
   def launch
     person = Person.new
+    
     shell {
-      composite {
-        list(:multi) {
-          selection bind(person, :provinces)
-        }
-        button {
-          text "Reset"
-          on_widget_selected do
-            person.reset_provinces
-          end
-        }
+      grid_layout
+      
+      text 'Hello, List Multi Selection!'
+      
+      list(:multi) {
+        selection bind(person, :provinces)
+      }
+      
+      button {
+        text 'Reset Selections To Default Values'
+        
+        on_widget_selected { person.reset_provinces }
       }
     }.open
   end
@@ -809,6 +861,10 @@ You should see "Hello, Custom Widget!"
 
 #### Hello, Custom Shell!
 
+This sample demonstrates Glimmer DSL for Opal's ability to open multiple shells (windows) as web browser tabs.
+
+It automatically handles routing so that tab URLs are bookmarkable. Web developers do not have to do any routing configuration manually.
+
 Add the following require statement to `app/assets/javascripts/application.rb`
 
 ```ruby
@@ -1539,7 +1595,7 @@ You should see "Hello, Date Time!"
 
 #### Hello, Table!
 
-Note: This [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) sample has near-complete support, but is missing table context menus and table editing at the moment.
+Note: This [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) sample has near-complete support, but is missing table context menus at the moment.
 
 Add the following require statement to `app/assets/javascripts/application.rb`
 
@@ -1738,23 +1794,28 @@ class HelloTable
           text 'Game Date'
           width 150
           sort_property :date # ensure sorting by real date value (not `game_date` string specified in items below)
+          editor :date_drop_down, property: :date_time
         }
         table_column {
           text 'Game Time'
           width 150
           sort_property :time # ensure sorting by real time value (not `game_time` string specified in items below)
+          editor :time, property: :date_time
         }
         table_column {
           text 'Ballpark'
           width 180
+          editor :none
         }
         table_column {
           text 'Home Team'
           width 150
+          editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
         }
         table_column {
           text 'Away Team'
           width 150
+          editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
         }
         table_column {
           text 'Promotion'
@@ -1803,6 +1864,39 @@ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObt
 
 ![Glimmer DSL for SWT Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table.png)
 
+Hello, Table! Editing Game Date
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-editing-game-date.png)
+
+Hello, Table! Editing Game Time
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-editing-game-time.png)
+
+Hello, Table! Editing Home Team
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-editing-home-team.png)
+
+Hello, Table! Sorted Game Date Ascending
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-sorted-game-date-ascending.png)
+
+Hello, Table! Sorted Game Date Descending
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-sorted-game-date-descending.png)
+
+Hello, Table! Playoff Type Combo
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-playoff-type-combo.png)
+
+Hello, Table! Playoff Type Changed
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-playoff-type-changed.png)
+
+Hello, Table! Game Booked
+
+![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-game-booked.png)
+
+
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
 Start the Rails server:
@@ -1816,6 +1910,532 @@ You should see "Hello, Date Time!"
 
 ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table.png)
 
+Hello, Table! Editing Game Date
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-game-date.png)
+
+Hello, Table! Editing Game Time
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-game-time.png)
+
+Hello, Table! Editing Home Team
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-home-team.png)
+
+Hello, Table! Sorted Game Date Ascending
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-sorted-game-date-ascending.png)
+
+Hello, Table! Sorted Game Date Descending
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-sorted-game-date-descending.png)
+
+Hello, Table! Playoff Type Combo
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-playoff-type-combo.png)
+
+Hello, Table! Playoff Type Changed
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-playoff-type-changed.png)
+
+Hello, Table! Game Booked
+
+![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-game-booked.png)
+
+#### Hello, Button!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_button'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+class HelloButton
+  include Glimmer
+  
+  attr_accessor :count
+  
+  def initialize
+    @count = 0
+  end
+  
+  def launch
+    shell {
+      text 'Hello, Button!'
+      
+      button {
+        text bind(self, :count) {|value| "Click To Increment: #{value}  "}
+        
+        on_widget_selected {
+          self.count += 1
+        }
+      }
+    }.open
+  end
+end
+
+HelloButton.new.launch
+```
+
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Button](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-button.png)
+![Glimmer DSL for SWT Hello Button](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-button-incremented.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, Button!"
+
+![Glimmer DSL for Opal Hello Button](images/glimmer-dsl-opal-hello-button.png)
+![Glimmer DSL for Opal Hello Button](images/glimmer-dsl-opal-hello-button-incremented.png)
+
+#### Hello, Message Box!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_message_box'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+include Glimmer
+
+shell {
+  text 'Hello, Message Box!'
+  
+  button {
+    text 'Please Click To Win a Surprise'
+    
+    on_widget_selected {
+      message_box {
+        text 'Surprise'
+        message "Congratulations!\n\nYou won $1,000,000!"
+      }.open
+    }
+  }
+}.open
+```
+
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Message Box](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-message-box.png)
+![Glimmer DSL for SWT Message Box Dialog](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-message-box-dialog.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, Message Box!"
+
+![Glimmer DSL for Opal Hello Message Box](images/glimmer-dsl-opal-hello-message-box.png)
+![Glimmer DSL for Opal Hello Message Box Dialog](images/glimmer-dsl-opal-hello-message-box-dialog.png)
+
+#### Hello, Pop Up Context Menu!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_pop_up_context_menu'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+include Glimmer
+
+shell {
+  grid_layout {
+    margin_width 0
+    margin_height 0
+  }
+  
+  text 'Hello, Pop Up Context Menu!'
+  
+  label {
+    text "Right-Click on the Text to\nPop Up a Context Menu"
+    font height: 50
+    
+    menu {
+      menu {
+        text '&History'
+        menu {
+          text '&Recent'
+          menu_item {
+            text 'File 1'
+            on_widget_selected {
+              message_box {
+                text 'File 1'
+                message 'File 1 Contents'
+              }.open
+            }
+          }
+          menu_item {
+            text 'File 2'
+            on_widget_selected {
+              message_box {
+                text 'File 2'
+                message 'File 2 Contents'
+              }.open
+            }
+          }
+        }
+        menu {
+          text '&Archived'
+          menu_item {
+            text 'File 3'
+            on_widget_selected {
+              message_box {
+                text 'File 3'
+                message 'File 3 Contents'
+              }.open
+            }
+          }
+          menu_item {
+            text 'File 4'
+            on_widget_selected {
+              message_box {
+                text 'File 4'
+                message 'File 4 Contents'
+              }.open
+            }
+          }
+        }
+      }
+    }
+  }
+}.open
+```
+
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Pop Up Context Menu Popped Up](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-pop-up-context-menu.png)
+![Glimmer DSL for SWT Hello Pop Up Context Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-pop-up-context-menu-popped-up.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, Pop Up Context Menu!"
+
+![Glimmer DSL for Opal Hello Pop Up Context Menu](images/glimmer-dsl-opal-hello-pop-up-context-menu.png)
+![Glimmer DSL for Opal Hello Pop Up Context Menu Popped Up](images/glimmer-dsl-opal-hello-pop-up-context-menu-popped-up.png)
+
+#### Hello, Menu Bar!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_menu_bar'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+include Glimmer
+
+COLORS = [:white, :red, :yellow, :green, :blue, :magenta, :gray, :black]
+
+shell {
+  grid_layout {
+    margin_width 0
+    margin_height 0
+  }
+  
+  text 'Hello, Menu Bar!'
+  
+  @label = label(:center) {
+    font height: 50
+    text 'Check Out The Menu Bar Above!'
+  }
+  
+  menu_bar {
+    menu {
+      text '&File'
+      menu_item {
+        text '&New'
+        accelerator :command, :N
+
+        on_widget_selected {
+          message_box {
+            text 'New'
+            message 'New file created.'
+          }.open
+        }
+      }
+      menu_item {
+        text '&Open...'
+        accelerator :command, :O
+
+        on_widget_selected {
+          message_box {
+            text 'Open'
+            message 'Opening File...'
+          }.open
+        }
+      }
+      menu {
+        text 'Open &Recent'
+        menu_item {
+          text 'File 1'
+          on_widget_selected {
+            message_box {
+              text 'File 1'
+              message 'File 1 Contents'
+            }.open
+          }
+        }
+        menu_item {
+          text 'File 2'
+          on_widget_selected {
+            message_box {
+              text 'File 2'
+              message 'File 2 Contents'
+            }.open
+          }
+        }
+      }
+      menu_item(:separator)
+      menu_item {
+        text 'E&xit'
+
+        on_widget_selected {
+          exit(0)
+        }
+      }
+    }
+    menu {
+      text '&Edit'
+      menu_item {
+        text 'Cut'
+        accelerator :command, :X
+      }
+      menu_item {
+        text 'Copy'
+        accelerator :command, :C
+      }
+      menu_item {
+        text 'Paste'
+        accelerator :command, :V
+      }
+    }
+    menu {
+      text '&Options'
+
+      menu_item(:radio) {
+        text '&Enabled'
+
+        on_widget_selected {
+          @select_one_menu.enabled = true
+          @select_multiple_menu.enabled = true
+        }
+      }
+      @select_one_menu = menu {
+        text '&Select One'
+        enabled false
+
+        menu_item(:radio) {
+          text 'Option 1'
+        }
+        menu_item(:radio) {
+          text 'Option 2'
+        }
+        menu_item(:radio) {
+          text 'Option 3'
+        }
+      }
+      @select_multiple_menu = menu {
+        text '&Select Multiple'
+        enabled false
+
+        menu_item(:check) {
+          text 'Option 4'
+        }
+        menu_item(:check) {
+          text 'Option 5'
+        }
+        menu_item(:check) {
+          text 'Option 6'
+        }
+      }
+    }
+    menu {
+      text '&Format'
+      menu {
+        text '&Background Color'
+        COLORS.each { |color_style|
+          menu_item(:radio) {
+            text color_style.to_s.split('_').map(&:capitalize).join(' ')
+
+            on_widget_selected {
+              @label.background = color_style
+            }
+          }
+        }
+      }
+      menu {
+        text 'Foreground &Color'
+        COLORS.each { |color_style|
+          menu_item(:radio) {
+            text color_style.to_s.split('_').map(&:capitalize).join(' ')
+
+            on_widget_selected {
+              @label.foreground = color_style
+            }
+          }
+        }
+      }
+    }
+    menu {
+      text '&View'
+      menu_item(:radio) {
+        text 'Small'
+
+        on_widget_selected {
+          @label.font = {height: 25}
+          @label.parent.pack
+        }
+      }
+      menu_item(:radio) {
+        text 'Medium'
+        selection true
+
+        on_widget_selected {
+          @label.font = {height: 50}
+          @label.parent.pack
+        }
+      }
+      menu_item(:radio) {
+        text 'Large'
+
+        on_widget_selected {
+          @label.font = {height: 75}
+          @label.parent.pack
+        }
+      }
+    }
+    menu {
+      text '&Help'
+      menu_item {
+        text '&Manual'
+        accelerator :command, :shift, :M
+
+        on_widget_selected {
+          message_box {
+            text 'Manual'
+            message 'Manual Contents'
+          }.open
+        }
+      }
+      menu_item {
+        text '&Tutorial'
+        accelerator :command, :shift, :T
+
+        on_widget_selected {
+          message_box {
+            text 'Tutorial'
+            message 'Tutorial Contents'
+          }.open
+        }
+      }
+      menu_item(:separator)
+      menu_item {
+        text '&Report an Issue...'
+
+        on_widget_selected {
+          message_box {
+            text 'Report an Issue'
+            message 'Reporting an issue...'
+          }.open
+        }
+      }
+    }
+  }
+}.open
+```
+
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Hello Menu Bar](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar.png)
+
+![Hello Menu Bar File Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-file-menu.png)
+
+![Hello Menu Bar Edit Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-edit-menu.png)
+
+![Hello Menu Bar Options Menu Disabled](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-disabled.png)
+
+![Hello Menu Bar Options Menu Select One](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-select-one.png)
+
+![Hello Menu Bar Options Menu Select Multiple](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-select-multiple.png)
+
+![Hello Menu Bar Format Menu Background Color](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-format-menu-background-color.png)
+
+![Hello Menu Bar Format Menu Foreground Color](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-format-menu-foreground-color.png)
+
+![Hello Menu Bar View Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-menu.png)
+
+![Hello Menu Bar View Small](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-small.png)
+
+![Hello Menu Bar View Large](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-large.png)
+
+![Hello Menu Bar Help Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-help-menu.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, Menu Bar!"
+
+![Hello Menu Bar](images/glimmer-dsl-opal-hello-menu-bar.png)
+
+![Hello Menu Bar File Menu](images/glimmer-dsl-opal-hello-menu-bar-file-menu.png)
+
+![Hello Menu Bar Edit Menu](images/glimmer-dsl-opal-hello-menu-bar-edit-menu.png)
+
+![Hello Menu Bar Options Menu Disabled](images/glimmer-dsl-opal-hello-menu-bar-options-menu-disabled.png)
+
+![Hello Menu Bar Options Menu Select One](images/glimmer-dsl-opal-hello-menu-bar-options-menu-select-one.png)
+
+![Hello Menu Bar Options Menu Select Multiple](images/glimmer-dsl-opal-hello-menu-bar-options-menu-select-multiple.png)
+
+![Hello Menu Bar Format Menu Background Color](images/glimmer-dsl-opal-hello-menu-bar-format-menu-background-color.png)
+
+![Hello Menu Bar Format Menu Foreground Color](images/glimmer-dsl-opal-hello-menu-bar-format-menu-foreground-color.png)
+
+![Hello Menu Bar View Menu](images/glimmer-dsl-opal-hello-menu-bar-view-menu.png)
+
+![Hello Menu Bar View Small](images/glimmer-dsl-opal-hello-menu-bar-view-small.png)
+
+![Hello Menu Bar View Large](images/glimmer-dsl-opal-hello-menu-bar-view-large.png)
+
+![Hello Menu Bar Help Menu](images/glimmer-dsl-opal-hello-menu-bar-help-menu.png)
+
 ### Elaborate Samples
 
 #### Login
@@ -1831,7 +2451,6 @@ Or add the Glimmer code directly if you prefer to play around with it:
 ```ruby
 require "observer"
 
-#Presents login screen data
 class LoginPresenter
 
   attr_accessor :user_name
@@ -1847,10 +2466,13 @@ class LoginPresenter
   def status=(status)
     @status = status
 
-    #TODO add feature to bind dependent properties to master property (2017-07-25 nested data binding)
     notify_observers("logged_in")
     notify_observers("logged_out")
   end
+  
+  def valid?
+    !@user_name.to_s.strip.empty? && !@password.to_s.strip.empty?
+  end
 
   def logged_in
     self.status == "Logged In"
@@ -1861,6 +2483,7 @@ class LoginPresenter
   end
 
   def login
+    return unless valid?
     self.status = "Logged In"
   end
 
@@ -1872,7 +2495,6 @@ class LoginPresenter
 
 end
 
-#Login screen
 class Login
   include Glimmer
 
@@ -1884,15 +2506,21 @@ class Login
         grid_layout 2, false #two columns with differing widths
 
         label { text "Username:" } # goes in column 1
-        text {                     # goes in column 2
+        @user_name_text = text {   # goes in column 2
           text bind(presenter, :user_name)
           enabled bind(presenter, :logged_out)
+          on_key_pressed { |event|
+            @password_text.set_focus if event.keyCode == swt(:cr)
+          }
         }
 
         label { text "Password:" }
-        text(:password, :border) {
+        @password_text = text(:password, :border) {
           text bind(presenter, :password)
           enabled bind(presenter, :logged_out)
+          on_key_pressed { |event|
+            presenter.login if event.keyCode == swt(:cr)
+          }
         }
 
         label { text "Status:" }
@@ -1902,12 +2530,21 @@ class Login
           text "Login"
           enabled bind(presenter, :logged_out)
           on_widget_selected { presenter.login }
+          on_key_pressed { |event|
+            presenter.login if event.keyCode == swt(:cr)
+          }
         }
 
         button {
           text "Logout"
           enabled bind(presenter, :logged_in)
           on_widget_selected { presenter.logout }
+          on_key_pressed { |event|
+            if event.keyCode == swt(:cr)
+              presenter.logout
+              @user_name_text.set_focus
+            end
+          }
         }
       }
     }
@@ -2390,41 +3027,76 @@ class ContactManager
     shell {
       text "Contact Manager"
       composite {
-        composite {
-          grid_layout 2, false
-          label {text "First &Name: "}
+        group {
+          grid_layout(2, false) {
+            margin_width 0
+            margin_height 0
+          }
+          layout_data :fill, :center, true, false
+          text 'Lookup Contacts'
+          font height: 24
+          
+          label {
+            layout_data :right, :center, false, false
+            text "First &Name: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :first_name)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
-          label {text "&Last Name: "}
+          
+          label {
+            layout_data :right, :center, false, false
+            text "&Last Name: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :last_name)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
-          label {text "&Email: "}
+          
+          label {
+            layout_data :right, :center, false, false
+            text "&Email: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :email)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
+          
           composite {
-            grid_layout 2, false
+            row_layout {
+              margin_width 0
+              margin_height 0
+            }
+            layout_data(:right, :center, false, false) {
+              horizontal_span 2
+            }
+            
             button {
               text "&Find"
-              on_widget_selected {
-                @contact_manager_presenter.find
+              on_widget_selected { @contact_manager_presenter.find }
+              on_key_pressed {|key_event|
+                @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
               }
             }
+            
             button {
               text "&List All"
-              on_widget_selected {
-                @contact_manager_presenter.list
+              on_widget_selected { @contact_manager_presenter.list }
+              on_key_pressed {|key_event|
+                @contact_manager_presenter.list if key_event.keyCode == swt(:cr)
               }
             }
           }
@@ -2441,26 +3113,18 @@ class ContactManager
           table_column {
             text "First Name"
             width 80
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:first_name)
-            }
           }
           table_column {
             text "Last Name"
             width 80
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:last_name)
-            }
           }
           table_column {
             text "Email"
             width 200
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:email)
-            }
           }
-          items bind(@contact_manager_presenter, :results), column_properties(:first_name, :last_name, :email)
-          on_mouse_down { |event|
+          items bind(@contact_manager_presenter, :results),
+          column_properties(:first_name, :last_name, :email)
+          on_mouse_up { |event|
             table_proxy.edit_table_item(event.table_item, event.column_index)
           }
         }
@@ -2470,7 +3134,6 @@ class ContactManager
 end
 
 ContactManager.new.launch
-
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):