glimmer-dsl-opal 0.7.0 → 0.7.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 15339e6707f761011f074d030dc58a41733c3ea249da444745c1c6696ab90468
-  data.tar.gz: 440722c63a85a92c02dac9a0955bcb5b26d620be1338727521674d63a3d5c9b6
+  metadata.gz: c18e541c8e9442edb881c4a2209b920ec5891c770901cd4474d93875d6a9d785
+  data.tar.gz: aadee7ddedd9a598e32784105d408b619c8503ef7aeb58d18253d1a505115e8a
 SHA512:
-  metadata.gz: 7daddcebb68f6d612c011f2d99c3af01073f3740a3fb82bd9a4a1bd96c748db358c61c6d3ad1502aa23f5061fb8041921c680a729bf39d0fa971cfa55059e4d7
-  data.tar.gz: 15cea650eacfb8dbb05dc4892754b160cd0ad5ec0d5e5c0a5c87636e1fbc69f43d9a3fcc250edd3c9febc2bae1ab0a3ecf9fe47f295363de9b13cc47e86debc3
+  metadata.gz: 3d0efad3abf372c53a9f214fe6e9ad2a9b4a4f18413acded585411742f1eb0fdd3dff3939bb2e64e905f55c59c5c0c686e7715fd2f01ed70c7f6a4005e67ac3a
+  data.tar.gz: 247c8c74ca777009bee85b89eb8ba137d5a389a55cb6f845f70d49b6b331184e625196c9dd1b07797730bc1c853ba87f7eae437356ef2e56fa26240854d5c706

data/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Change Log
 
+## 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`
+- `date` `table_column` `editor`
+- `time` `table_column` `editor`
+- Implement `on_focus_gained`, `on_focus_lost` universally on all widgets
+- Add support for Struct keyword_init to Opal
+- Fix issue with hello_table button/combo not being centered (yet stretched)
+- Fix issue with table item selection for booking not working after editing has been added
+- Fix escape keyboard event handling for combo table editor
+
+## 0.7.1
+
+- Combo table editor (enabled in Hello, Table! sample)
+- Fix issue with table cell selection for editing not working
+- Remove widget from parent upon dispose
+- Remove listeners upon widget dispose
+
 ## 0.7.0
 
 - Hello, Table! Sample
@@ -127,3 +167,4 @@
 
 - Initial support for webifying Glimmer SWT apps
 - Support for Shell and Label widgets (text property only).
+- Hello, World! sample support

data/README.md

@@ -1,20 +1,66 @@
-# [<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.0 (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.7.5 (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.
-- **Adapter:** Auto-webify [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps (i.e. apps built with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt)) via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/) without changing a line of code. Apps may then be custom-styled by web designers for the web with standard CSS.
+- **Adapter:** auto-webify [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps (i.e. apps built with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt)) via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/) without changing a line of code. Just insert them as a single require statement in a Rails app, and BOOM! They're running on the web! Apps may then optionally be custom-styled for the web by web designers with standard CSS if needed.
 
 Glimmer DSL for Opal successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal Ruby](https://opalrb.com/) inside a web browser, and as such inherits the full range of powerful Glimmer desktop [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities for the web.
 
-NOTE: Alpha Version 0.7.0 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):
+#### Tic Tac Toe Sample
 
-Hello:
+Add the following require statement to `app/assets/javascripts/application.rb` in a [Glimmer setup](#setup) Rails app:
+
+```ruby
+require 'glimmer-dsl-opal/samples/elaborate/tic_tac_toe'
+```
+
+Glimmer GUI code from [glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb](lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb):
+
+```ruby
+# ...
+    @shell = shell {
+      text "Tic-Tac-Toe"
+      minimum_size 150, 178
+      composite {
+        grid_layout 3, true
+        (1..3).each { |row|
+          (1..3).each { |column|
+            button {
+              layout_data :fill, :fill, true, true
+              text        bind(@tic_tac_toe_board[row, column], :sign)
+              enabled     bind(@tic_tac_toe_board[row, column], :empty)
+              font        style: :bold, height: 20
+              on_widget_selected {
+                @tic_tac_toe_board.mark(row, column)
+              }
+            }
+          }
+        }
+      }
+    }
+# ...
+```
+Tic Tac Toe on the web (using the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem):
+
+![Glimmer DSL for Opal Tic Tac Toe](images/glimmer-dsl-opal-tic-tac-toe.png)
+![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):
+
+![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.5 only supports bare-minimum capabilities for the following [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally made for [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt)):
+
+[Hello samples](#hello-samples):
 
 - [Hello, World!](#hello-world)
 - [Hello, Combo!](#hello-combo)
@@ -32,8 +78,9 @@ Hello:
 - [Hello, Checkbox Group!](#hello-checkbox-group)
 - [Hello, Date Time!](#hello-date-time)
 - [Hello, Table!](#hello-table)
+- [Hello, Button!](#hello-button)
 
-Elaborate:
+[Elaborate samples](#elaborate-samples):
 
 - [Login](#login)
 - [Tic Tac Toe](#tic-tac-toe)
@@ -49,16 +96,6 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
 - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
 - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
 
-## 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 GUI DSL is very simple in Glimmer DSL for SWT. Once 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).
-
-Part of the idea is that web browsers just render GUI widgets similar to those of a desktop app (after all a web browser is a desktop app), so whether you run your GUI on the desktop or on the web should just be a low-level concern, hopefully automated completely with Glimmer DSL for Opal.
-
-Last but not least, you would likely want some special branding on the web, so you can push that off to a web designer who would be more than happy to do the web graphic design and customize the look and feel with pure CSS (no need for programming with Ruby or JavaScript). This enables a clean separation of concerns and distribution of tasks among developers and designers, let alone saving effort on the web GUI by reusing the desktop GUI as a base right off the bat.
-
-Alternatively, web developers may directly use [Glimmer DSL for Opal](https://rubygems.org/gems/glimmer-dsl-opal) to build the GUI of web apps since it is as simple as desktop development, thus requiring a lot less code that is in pure Ruby only (as demonstrated in examples below) and avoiding opaque web concepts like 'render' and 'reactive' due to treating GUI as persistent just like desktop apps do. No HTML/JS/CSS skills are even required. Still, web designers may be involved with CSS only if needed, thanks to the clean semantic markup [Glimmer DSL for Opal](https://rubygems.org/gems/glimmer-dsl-opal) produces.
-
 ## Supported Glimmer DSL Keywords
 
 The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
@@ -99,6 +136,23 @@ 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 (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. Web designers may also style Glimmer DSL for Opal applications since they auto-generate symantic markup. That way, Glimmer web GUI is used and embedded in web pages that provide users with applications while the rest of the web pages are maintained by non-engineers. This achieves a correct separation of responsibilities and better productivity and maintainability.
+- **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.
+
+Part of the idea is that web browsers just render GUI widgets similar to those of a desktop app (after all a web browser is a desktop app), so whether you run your GUI on the desktop or on the web should just be a low-level concern, hopefully automated completely with Glimmer DSL for Opal.
+
+Last but not least, you would likely want some special branding on the web, so you can push that off to a web designer who would be more than happy to do the web graphic design and customize the look and feel with pure CSS (no need for programming with Ruby or JavaScript). This enables a clean separation of concerns and distribution of tasks among developers and designers, let alone saving effort on the web GUI by reusing the desktop GUI as a base right off the bat.
+
+Alternatively, web developers may directly use [Glimmer DSL for Opal](https://rubygems.org/gems/glimmer-dsl-opal) to build the GUI of web apps since it is as simple as desktop development, thus requiring a lot less code that is in pure Ruby only (as demonstrated in examples below) and avoiding opaque web concepts like 'render' and 'reactive' due to treating GUI as persistent just like desktop apps do. No HTML/JS/CSS skills are even required. Still, web designers may be involved with CSS only if needed, thanks to the clean semantic markup [Glimmer DSL for Opal](https://rubygems.org/gems/glimmer-dsl-opal) automatically produces.
+
 ## Pre-requisites
 
 - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
@@ -109,7 +163,7 @@ Event loop:
 
 ## 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.
 
@@ -133,7 +187,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.0'
+gem 'glimmer-dsl-opal', '~> 0.7.5'
 gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
 gem 'glimmer-dsl-css', '~> 1.1.0', require: false
 
@@ -170,7 +224,9 @@ Edit `app/views/layouts/application.html.erb` and add the following below other
 <%= stylesheet_link_tag    'glimmer/glimmer', media: 'all', 'data-turbolinks-track': 'reload' %>
 ```
 
-Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
+Clear the file `app/views/welcomes/index.html.erb` from any content.
+
+Open `app/assets/javascripts/application.rb`, add a `Document.ready?` block, and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
 
 ```ruby
 Document.ready? do
@@ -200,11 +256,17 @@ 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 for building full fledged applications. The [Elaborate samples](#elaborate-samples) demonstrate more advanced sample applications that assemble multiple building blocks.
+
+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)
 
-[https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
+You may visit a Heroku hosted version at:
 
-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).
+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
 
@@ -761,6 +823,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
@@ -1491,7 +1557,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`
 
@@ -1690,23 +1756,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'
@@ -1755,6 +1826,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:
@@ -1768,6 +1872,96 @@ 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)
+
+
 ### Elaborate Samples
 
 #### Login
@@ -1783,7 +1977,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
@@ -1799,10 +1992,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"
@@ -1813,6 +2009,7 @@ class LoginPresenter
   end
 
   def login
+    return unless valid?
     self.status = "Logged In"
   end
 
@@ -1824,7 +2021,6 @@ class LoginPresenter
 
 end
 
-#Login screen
 class Login
   include Glimmer
 
@@ -1836,15 +2032,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:" }
@@ -1854,12 +2056,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
+          }
         }
       }
     }
@@ -2342,41 +2553,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)
               }
             }
           }
@@ -2393,26 +2639,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)
           }
         }
@@ -2422,7 +2660,6 @@ class ContactManager
 end
 
 ContactManager.new.launch
-
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):