glimmer-dsl-opal 0.2.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4149153253dd59829bf590c406ff2e5b18c11a62cbbaf7130877f2046a04d2a1
-  data.tar.gz: f82f4d9c0bff2625f1f4ef8bef4be2703789a72aed847d4c851697d916cf48c4
+  metadata.gz: c73ae51d66f5e2955bd4c4c8b639d6081a8445594699d4a2f2b71244903d3277
+  data.tar.gz: bff8c03439d137acd926baece557b609e0805adbf28b822984cd70f7b63666fc
 SHA512:
-  metadata.gz: 202c4686ab1a2bf31377cbe4ee6f173c92318460e0758cb74356132323c571b381f3bd69d0d47933ac44c54a79fd24520ce7c2e1ffa1412db903ae2c27ce259b
-  data.tar.gz: 182085ad652639b3d83b9853bf993702839cb8066074b92e5377b5b8aa1998d659d925ef0d1f5cac0c659241bd97cf7fe109d2008142e0f5b34165f49e93bc67
+  metadata.gz: 1bfba5a1bc6d5f6267e0622d3376d1567c40b5c06a7fcb49a8e7f3c5845a8b66214eaa897b2ebf9a8cb68d2a5cfbf5a83d3c4870250e6d9d901c39bbe9bf7d59
+  data.tar.gz: 285627b7e3d843d9c3f54ef169d96463e4abe3047580a92eacb314d0b302675e9b5799b92e2be02c73f8af039743f35610b4d25ce84cabf4c60d826c797dd150

data/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Change Log
 
+## 0.6.0
+
+- Hello, Date Time! Sample
+- Support `date_time`, `date`, `date_drop_down`, `time`, `calendar` keywords
+- Format Date/Time correctly as per SWT implementation by default
+- Make glimmer-dsl-opal gem into a Rails engine to support importing default static assets like CSS styles and images
+- Show drop down icon next to `date_drop_down` and `time`
+
+## 0.5.1
+
+- Fixed issue with Hello, Combo!, Hello, List...! samples
+
+## 0.5.0
+
+- Add `margin_top`, `margin_right`, `margin_bottom`, and `margin_left` to RowLayoutProxy
+- `radio`
+- Hello, Radio! Sample
+- `radio_group`
+- Hello, Radio Group! Sample
+- `checkbox`
+- Hello, Checkbox! Sample
+- `checkbox_group`
+- Fix issue with `label` `alignment` property
+- Fix issues with default `composite` `grid_layout` not getting its styles removed when setting `row_layout`
+- `button(:radio)` alias for `radio`
+- `check` alias for `checkbox`
+- `button(:check)` alias for `checkbox`
+- Hello, Group! Sample
+- Group widget
+
+## 0.4.0
+
+- Support `display` keyword representing an SWT Display
+- Support display `on_swt_keydown` event listener (display-wide widget observer)
+- Support `DisplayProxy#shells` method keeping track of open shell
+- Make a custom shell open in the same window if there is no shell open already
+- Support `sync_exec` keyword as just an alias to `async_exec`
+- Provide a makeshift require for 'glimmer-dsl-swt' that requires 'glimmer-dsl-opal' instead
+- Fake APIs on the web for OS.os?, File.read, Display.setAppName, Display.setAppVersion
+- Provide a minimal URI class that supports URI::encode_www_form_component and URI::decode_www_form_component from Ruby
+
+## 0.3.0
+
+- Support opening a custom shell in a browser tab/window by passing in query parameters to URL (e.g. ?custom_shell=keyword+option1=value1 etc...)
+- Make custom shells automatically open in a new tab/window (while standard shells continue to open in the same window by replacing its content)
+- Hello, Custom Shell! Sample
+
 ## 0.2.0
 
 - Color support

data/README.md

@@ -1,14 +1,17 @@
-# [<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.2.0 (Webify Desktop Apps)
+# [<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.6.0 (Auto-Webify Desktop Apps)
 [![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 even on the web!
+### 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 experimental proof-of-concept web GUI adapter for [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps (i.e. apps built with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt)). It webifies them via [Rails](https://rubyonrails.org/), allowing Ruby desktop apps to run on the web via [Opal Ruby](https://opalrb.com/) without changing a line of code. Apps may then be custom-styled for the web with standard CSS by web designers. 
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an experimental proof-of-concept web GUI adapter for [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps (i.e. apps built with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt)). It webifies them via [Rails](https://rubyonrails.org/), allowing Ruby desktop apps to run on the web via [Opal Ruby](https://opalrb.com/) without changing a line of code. Apps may then be custom-styled by web designers for the web with standard CSS.
 
-Glimmer DSL for Opal webifier 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.
+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.6.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):
+
+Hello:
 
-NOTE: Alpha Version 0.2.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):
 - [Hello, World!](#hello-world)
 - [Hello, Combo!](#hello-combo)
 - [Hello, Computed!](#hello-computed)
@@ -17,16 +20,38 @@ NOTE: Alpha Version 0.2.0 only supports bare-minimum capabilities for the follow
 - [Hello, Browser!](#hello-browser)
 - [Hello, Tab!](#hello-tab)
 - [Hello, Custom Widget!](#hello-custom-widget)
+- [Hello, Custom Shell!](#hello-custom-shell)
+- [Hello, Radio!](#hello-radio)
+- [Hello, Radio Group!](#hello-radio-group)
+- [Hello, Group!](#hello-group)
+- [Hello, Checkbox!](#hello-checkbox)
+- [Hello, Checkbox Group!](#hello-checkbox-group)
+- [Hello, Date Time!](#hello-date-time)
+
+Elaborate:
+
 - [Login](#login)
 - [Tic Tac Toe](#tic-tac-toe)
 - [Contact Manager](#contact-manager)
 
+External:
+
+- [Glimmer Calculator](#glimmer-calculator)
+
 Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
 - [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
 - [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 idea behind Glimmer DSL for Opal is 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.
+
 ## Supported Glimmer DSL Keywords
 
 The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
@@ -44,10 +69,8 @@ Widgets:
 - `table`
 - `table_column`
 - `message_box`
-
-Graphics:
-- `color`
-- `font`
+- 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)
 
 Layouts:
 - `grid_layout`
@@ -55,6 +78,10 @@ Layouts:
 - `fill_layout`
 - `layout_data`
 
+Graphics:
+- `color`
+- `font`
+
 Data-Binding/Observers:
 - `bind`
 - `observe`
@@ -62,6 +89,7 @@ Data-Binding/Observers:
 - `on_modify_text`
 
 Event loop:
+- `display`
 - `async_exec`
 
 ## Pre-requisites
@@ -69,28 +97,34 @@ Event loop:
 - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
 - Opal 1: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
 - jQuery 3: [https://code.jquery.com/](https://code.jquery.com/) (jQuery 3.5.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
+- jQuery-UI 1.12: [https://code.jquery.com/](https://jqueryui.com/) (jQuery-UI 1.12.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
+- jQuery-UI Timepicker 0.3: [https://code.jquery.com/](https://fgelinas.com/code/timepicker/) (jQuery-UI Timepicker 0.3.3 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
 
 ## 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 issues you encounter are fixed in master or some other branch that you could check out instead)
 
-Please install a Rails 5 gem (e.g. `gem install rails -v5.2.4.3` )
+Please install a Rails 5 gem:
+
+```
+gem install rails -v5.2.4.4
+```
 
 Start a new Rails 5 app:
 
 ```
-rails new glimmer_app
+rails new glimmer_app_server
 ```
 
 Add the following to `Gemfile`:
 
 ```
 gem 'opal-rails', '~> 1.1.2'
-gem 'opal-async', '~> 1.1.1'
+gem 'opal-async', '~> 1.2.0'
 gem 'opal-jquery', '~> 0.4.4'
-gem 'glimmer-dsl-opal', '~> 0.2.0', require: false
-gem 'glimmer-dsl-xml', '~> 1.0.0', require: false
-gem 'glimmer-dsl-css', '~> 1.0.0', require: false
+gem 'glimmer-dsl-opal', '~> 0.6.0'
+gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
+gem 'glimmer-dsl-css', '~> 1.1.0', require: false
 
 ```
 
@@ -101,29 +135,53 @@ Edit `config/initializers/assets.rb` and add the following at the bottom:
 Opal.use_gem 'glimmer-dsl-opal'
 ```
 
+Run:
+
+```
+rails g scaffold welcome
+```
+
+Modify `config/routes.rb`:
+
+```ruby
+root to: 'welcomes#index'
+```
+
 Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
 
 ```ruby
 require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
 ```
 
-Run:
+Edit `app/views/layouts/application.html.erb` and add the following below other `stylesheet_link_tag` declarations:
 
-```
-rails g scaffold welcome
+```erb
+<%= stylesheet_link_tag    'glimmer', media: 'all', 'data-turbolinks-track': 'reload' %>
 ```
 
-Modify `config/routes.rb`:
+Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
 
 ```ruby
-root to: 'welcome#index'
+Document.ready? do
+  # require-statement/code goes here.
+end
 ```
 
-Add more code to `app/assets/javascripts/application.rb` inside a `Document.ready?` block from one of the samples below or a [Glimmer](https://github.com/AndyObtiva/glimmer) [app](https://github.com/AndyObtiva/glimmer#app)/[custom-shell gem](https://github.com/AndyObtiva/glimmer#custom-shell-gem).
+Example to confirm setup is working:
 
 ```ruby
 Document.ready? do
-  # require-statement/code goes here.
+  include Glimmer
+  
+  shell {
+    fill_layout
+    text 'Example to confirm setup is working'
+    label {
+      text "Welcome to Glimmer DSL for Opal!"
+      foreground :red
+      font height: 24
+    }
+  }.open
 end
 ```
 
@@ -135,6 +193,8 @@ Also, this external sample app contains all the samples mentioned below configur
 
 [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
 
+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
 
 #### Hello, World!
@@ -208,9 +268,9 @@ class HelloCombo
     shell {
       row_layout(:vertical) {
         pack false
-      }        
+      }
       
-      text 'Hello, Combo!'      
+      text 'Hello, Combo!'
       
       combo(:read_only) {
         selection bind(person, :country)
@@ -377,7 +437,7 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
 Or add the Glimmer code directly if you prefer to play around with it:
 
 ```ruby
-class Person 
+class Person
   attr_accessor :country, :country_options
 
   def initialize
@@ -410,11 +470,759 @@ class HelloListSingleSelection
   end
 end
 
-HelloListSingleSelection.new.launch
+HelloListSingleSelection.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-single-selection.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, List Single Selection!"
+
+![Glimmer DSL for Opal Hello List Single Selection](images/glimmer-dsl-opal-hello-list-single-selection.png)
+
+#### Hello, List Multi Selection!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+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
+  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
+        }
+      }
+    }.open
+  end
+end
+
+HelloListMultiSelection.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-multi-selection.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, List Multi Selection!"
+
+![Glimmer DSL for Opal Hello List Multi Selection](images/glimmer-dsl-opal-hello-list-multi-selection.png)
+
+#### Hello, Browser!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_browser'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+include Glimmer
+
+shell {
+  minimum_size 1024, 860
+  browser {
+    url 'http://brightonresort.com/about'
+  }
+}.open
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-browser.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, Browser!"
+
+![Glimmer DSL for Opal Hello Browser](images/glimmer-dsl-opal-hello-browser.png)
+
+#### Hello, Tab!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_tab'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+class HelloTab
+  include Glimmer
+  def launch
+    shell {
+      text "Hello, Tab!"
+      tab_folder {
+        tab_item {
+          text "English"
+          label {
+            text "Hello, World!"
+          }
+        }
+        tab_item {
+          text "French"
+          label {
+            text "Bonjour, Univers!"
+          }
+        }
+      }
+    }.open
+  end
+end
+
+HelloTab.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-english.png)
+![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-french.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, Tab!"
+
+![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
+![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
+
+#### Hello, Custom Widget!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+# This class declares a `greeting_label` custom widget (by convention)
+class GreetingLabel
+  include Glimmer::UI::CustomWidget
+  
+  # multiple options without default values
+  options :name, :colors
+  
+  # single option with default value
+  option :greeting, default: 'Hello'
+  
+  # internal attribute (not a custom widget option)
+  attr_accessor :color
+  
+  before_body {
+    @font = {height: 24, style: :bold}
+    @color = :black
+  }
+  
+  after_body {
+    return if colors.nil?
+    
+    Thread.new {
+      colors.cycle { |color|
+        async_exec {
+          self.color = color
+        }
+        sleep(1)
+      }
+    }
+  }
+  
+  body {
+    # pass received swt_style through to label to customize (e.g. :center to center text)
+    label(swt_style) {
+      text "#{greeting}, #{name}!"
+      font @font
+      foreground bind(self, :color)
+    }
+  }
+  
+end
+
+# including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `greeting_label` custom widget
+include Glimmer
+
+shell {
+  fill_layout :vertical
+  
+  minimum_size 215, 215
+  text 'Hello, Custom Widget!'
+  
+  # custom widget options are passed in a hash
+  greeting_label(name: 'Sean')
+  
+  # pass :center SWT style followed by custom widget options hash
+  greeting_label(:center, name: 'Laura', greeting: 'Aloha') #
+  
+  greeting_label(:right, name: 'Rick') {
+    # you can nest attributes under custom widgets just like any standard widget
+    foreground :red
+  }
+  
+  # the colors option cycles between colors for the label foreground every second
+  greeting_label(:center, name: 'Mary', greeting: 'Aloha', colors: [:red, :dark_green, :blue])
+}.open
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Custom Widget](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-widget.gif)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, Custom Widget!"
+
+![Glimmer DSL for Opal Hello Custom Widget](images/glimmer-dsl-opal-hello-custom-widget.gif)
+
+#### Hello, Custom Shell!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_custom_shell'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+require 'date'
+
+# This class declares an `email_shell` custom shell, aka custom window (by convention)
+# Used to view an email message
+class EmailShell
+  include Glimmer::UI::CustomShell
+  
+  # multiple options without default values
+  options :date, :subject, :from, :message
+  
+  # single option with default value
+  option :to, default: '"John Irwin" <john.irwin@example.com>'
+  
+  before_body {
+    @swt_style |= swt(:shell_trim, :modeless)
+  }
+  
+  body {
+    # pass received swt_style through to shell to customize it (e.g. :dialog_trim for a blocking shell)
+    shell(swt_style) {
+      grid_layout(2, false)
+      
+      text subject
+
+      label {
+        text 'Date:'
+      }
+      label {
+        text date
+      }
+
+      label {
+        text 'From:'
+      }
+      label {
+        text from
+      }
+
+      label {
+        text 'To:'
+      }
+      label {
+        text to
+      }
+
+      label {
+        text 'Subject:'
+      }
+      label {
+        text subject
+      }
+
+      label {
+        layout_data(:fill, :fill, true, true) {
+          horizontal_span 2 #TODO implement
+          vertical_indent 10
+        }
+        
+        background :white
+        text message
+      }
+    }
+  }
+  
+end
+
+class HelloCustomShell
+  # including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `email_shell` custom widget
+  include Glimmer
+  
+  Email = Struct.new(:date, :subject, :from, :message, keyword_init: true)
+  EmailSystem = Struct.new(:emails, keyword_init: true)
+  
+  def initialize
+    @email_system = EmailSystem.new(
+      emails: [
+        Email.new(date: DateTime.new(2029, 10, 22, 11, 3, 0).strftime('%F %I:%M %p'), subject: '3rd Week Report', from: '"Dianne Tux" <dianne.tux@example.com>', message: "Hello,\n\nI was wondering if you'd like to go over the weekly report sometime this afternoon.\n\nDianne"),
+        Email.new(date: DateTime.new(2029, 10, 21, 8, 1, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v100.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 100.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
+        Email.new(date: DateTime.new(2029, 10, 19, 16, 58, 0).strftime('%F %I:%M %p'), subject: 'Christmas Party', from: '"Lisa Ferreira" <lisa.ferreira@example.com>', message: "Merry Christmas,\n\nAll office Christmas Party arrangements have been set\n\nMake sure to bring a Secret Santa gift\n\nBest regards,\n\nLisa Ferreira"),
+        Email.new(date: DateTime.new(2029, 10, 16, 9, 43, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v99.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 99.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
+        Email.new(date: DateTime.new(2029, 10, 15, 11, 2, 0).strftime('%F %I:%M %p'), subject: '2nd Week Report', from: '"Dianne Tux" <dianne.tux@example.com>', message: "Hello,\n\nI was wondering if you'd like to go over the weekly report sometime this afternoon.\n\nDianne"),
+        Email.new(date: DateTime.new(2029, 10, 2, 10, 34, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v98.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 98.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
+      ]
+    )
+  end
+  
+  def launch
+    shell {
+      grid_layout
+      
+      text 'Hello, Custom Shell!'
+      
+      label {
+        font height: 24, style: :bold
+        text 'Emails:'
+      }
+      
+      label {
+        font height: 18
+        text 'Click an email to view its message'
+      }
+      
+      table {
+        layout_data :fill, :fill, true, true
+      
+        table_column {
+          text 'Date:'
+          width 180
+        }
+        table_column {
+          text 'Subject:'
+          width 180
+        }
+        table_column {
+          text 'From:'
+          width 360
+        }
+        
+        items bind(@email_system, :emails), column_properties(:date, :subject, :from)
+        
+        on_mouse_up { |event|
+          email = event.table_item.get_data
+          Thread.new do
+            async_exec {
+              email_shell(date: email.date, subject: email.subject, from: email.from, message: email.message).open
+            }
+          end
+        }
+      }
+    }.open
+  end
+end
+
+HelloCustomShell.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Custom Shell](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell.png)
+![Glimmer DSL for SWT Hello Custom Shell Email1](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email1.png)
+![Glimmer DSL for SWT Hello Custom Shell Email2](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email2.png)
+![Glimmer DSL for SWT Hello Custom Shell Email3](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email3.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, Custom Widget!"
+
+![Glimmer DSL for Opal Hello Custom Shell](images/glimmer-dsl-opal-hello-custom-shell.png)
+![Glimmer DSL for Opal Hello Custom Shell Email1](images/glimmer-dsl-opal-hello-custom-shell-email1.png)
+![Glimmer DSL for Opal Hello Custom Shell Email2](images/glimmer-dsl-opal-hello-custom-shell-email2.png)
+![Glimmer DSL for Opal Hello Custom Shell Email3](images/glimmer-dsl-opal-hello-custom-shell-email3.png)
+
+#### Hello, Radio!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_radio'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+class HelloRadio
+  class Person
+    attr_accessor :male, :female, :child, :teen, :adult, :senior
+    
+    def initialize
+      reset
+    end
+    
+    def reset
+      self.male = nil
+      self.female = nil
+      self.child = nil
+      self.teen = nil
+      self.adult = true
+      self.senior = nil
+    end
+  end
+  
+  include Glimmer
+  
+  def launch
+    person = Person.new
+    
+    shell {
+      text 'Hello, Radio!'
+      row_layout :vertical
+      
+      label {
+        text 'Gender:'
+        font style: :bold
+      }
+      
+      composite {
+        row_layout
+        
+        radio {
+          text 'Male'
+          selection bind(person, :male)
+        }
+        
+        radio {
+          text 'Female'
+          selection bind(person, :female)
+        }
+      }
+      
+      label {
+        text 'Age Group:'
+        font style: :bold
+      }
+      
+      composite {
+        row_layout
+        
+        radio {
+          text 'Child'
+          selection bind(person, :child)
+        }
+        
+        radio {
+          text 'Teen'
+          selection bind(person, :teen)
+        }
+        
+        radio {
+          text 'Adult'
+          selection bind(person, :adult)
+        }
+        
+        radio {
+          text 'Senior'
+          selection bind(person, :senior)
+        }
+      }
+      
+      button {
+        text 'Reset'
+        
+        on_widget_selected do
+          person.reset
+        end
+      }
+    }.open
+  end
+end
+
+HelloRadio.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Radio](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio.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, Radio!"
+
+![Glimmer DSL for Opal Hello Radio](images/glimmer-dsl-opal-hello-radio.png)
+
+#### Hello, Radio Group!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_radio_group'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+class HelloRadioGroup
+  class Person
+    attr_accessor :gender, :age_group
+    
+    def initialize
+      reset
+    end
+    
+    def gender_options
+      ['Male', 'Female']
+    end
+    
+    def age_group_options
+      ['Child', 'Teen', 'Adult', 'Senior']
+    end
+    
+    def reset
+      self.gender = nil
+      self.age_group = 'Adult'
+    end
+  end
+
+  include Glimmer
+  
+  def launch
+    person = Person.new
+    
+    shell {
+      text 'Hello, Radio Group!'
+      row_layout :vertical
+      
+      label {
+        text 'Gender:'
+        font style: :bold
+      }
+      
+      radio_group {
+        row_layout :horizontal
+        selection bind(person, :gender)
+      }
+            
+      label {
+        text 'Age Group:'
+        font style: :bold
+      }
+      
+      radio_group {
+        row_layout :horizontal
+        selection bind(person, :age_group)
+      }
+      
+      button {
+        text 'Reset'
+        
+        on_widget_selected do
+          person.reset
+        end
+      }
+    }.open
+  end
+end
+
+HelloRadioGroup.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Hello Radio Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio-group.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, Radio Group!"
+
+![Glimmer DSL for Opal Hello Radio Group](images/glimmer-dsl-opal-hello-radio-group.png)
+
+#### Hello, Group!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_group'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+class HelloGroup
+  class Person
+    attr_accessor :male, :female, :child, :teen, :adult, :senior
+    
+    def initialize
+      reset
+    end
+    
+    def reset
+      self.male = nil
+      self.female = nil
+      self.child = nil
+      self.teen = nil
+      self.adult = true
+      self.senior = nil
+    end
+  end
+  
+  include Glimmer
+  
+  def launch
+    person = Person.new
+    
+    shell {
+      text 'Hello, Group!'
+      row_layout :vertical
+      
+      group {
+        row_layout
+        
+        text 'Gender'
+        font style: :bold
+        
+        radio {
+          text 'Male'
+          selection bind(person, :male)
+        }
+        
+        radio {
+          text 'Female'
+          selection bind(person, :female)
+        }
+      }
+      
+      group {
+        row_layout
+        
+        text 'Age Group'
+        font style: :bold
+        
+        radio {
+          text 'Child'
+          selection bind(person, :child)
+        }
+        
+        radio {
+          text 'Teen'
+          selection bind(person, :teen)
+        }
+        
+        radio {
+          text 'Adult'
+          selection bind(person, :adult)
+        }
+        
+        radio {
+          text 'Senior'
+          selection bind(person, :senior)
+        }
+      }
+      
+      button {
+        text 'Reset'
+        
+        on_widget_selected do
+          person.reset
+        end
+      }
+    }.open
+  end
+end
+
+HelloGroup.new.launch
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-single-selection.png)
+![Glimmer DSL for SWT Hello Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-group.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -425,106 +1233,89 @@ rails s
 
 Visit `http://localhost:3000`
 
-You should see "Hello, List Single Selection!"
+You should see "Hello, Group!"
 
-![Glimmer DSL for Opal Hello List Single Selection](images/glimmer-dsl-opal-hello-list-single-selection.png)
+![Glimmer DSL for Opal Hello Group](images/glimmer-dsl-opal-hello-group.png)
 
-#### Hello, List Multi Selection!
+#### Hello, Checkbox!
 
 Add the following require statement to `app/assets/javascripts/application.rb`
 
 ```ruby
-require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
+require 'glimmer-dsl-opal/samples/hello/hello_checkbox'
 ```
 
 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"]
+class HelloCheckbox
+  class Person
+    attr_accessor :skiing, :snowboarding, :snowmobiling, :snowshoeing
+    
+    def initialize
+      reset_activities
+    end
+    
+    def reset_activities
+      self.skiing = false
+      self.snowboarding = true
+      self.snowmobiling = false
+      self.snowshoeing = false
+    end
   end
-end
-
-class HelloListMultiSelection
+  
   include Glimmer
+  
   def launch
     person = Person.new
+    
     shell {
+      text 'Hello, Checkbox!'
+      row_layout :vertical
+      
+      label {
+        text 'Check all snow activities you are interested in:'
+        font style: :bold
+      }
+      
       composite {
-        list(:multi) {
-          selection bind(person, :provinces)
+        checkbox {
+          text 'Skiing'
+          selection bind(person, :skiing)
         }
-        button {
-          text "Reset"
-          on_widget_selected do
-            person.reset_provinces
-          end
+        
+        checkbox {
+          text 'Snowboarding'
+          selection bind(person, :snowboarding)
+        }
+        
+        checkbox {
+          text 'Snowmobiling'
+          selection bind(person, :snowmobiling)
+        }
+        
+        checkbox {
+          text 'Snowshoeing'
+          selection bind(person, :snowshoeing)
         }
       }
+      
+      button {
+        text 'Reset Activities'
+        
+        on_widget_selected do
+          person.reset_activities
+        end
+      }
     }.open
   end
 end
 
-HelloListMultiSelection.new.launch
-```
-Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
-
-![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-multi-selection.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, List Multi Selection!"
-
-![Glimmer DSL for Opal Hello List Multi Selection](images/glimmer-dsl-opal-hello-list-multi-selection.png)
-
-#### Hello, Browser!
-
-Add the following require statement to `app/assets/javascripts/application.rb`
-
-```ruby
-require 'glimmer-dsl-opal/samples/hello/hello_browser'
-```
-
-Or add the Glimmer code directly if you prefer to play around with it:
-
-```ruby
-include Glimmer
-
-shell {
-  minimum_size 1024, 860
-  browser {
-    url 'http://brightonresort.com/about'
-  }
-}.open
+HelloCheckbox.new.launch
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-browser.png)
+![Glimmer DSL for SWT Hello Checkbox](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -535,50 +1326,72 @@ rails s
 
 Visit `http://localhost:3000`
 
-You should see "Hello, Browser!"
+You should see "Hello, Checkbox!"
 
-![Glimmer DSL for Opal Hello Browser](images/glimmer-dsl-opal-hello-browser.png)
+![Glimmer DSL for Opal Hello Checkbox](images/glimmer-dsl-opal-hello-checkbox.png)
 
-#### Hello, Tab!
+#### Hello, Checkbox Group!
 
 Add the following require statement to `app/assets/javascripts/application.rb`
 
 ```ruby
-require 'glimmer-dsl-opal/samples/hello/hello_tab'
+require 'glimmer-dsl-opal/samples/hello/hello_checkbox_group'
 ```
 
 Or add the Glimmer code directly if you prefer to play around with it:
 
 ```ruby
-class HelloTab
+class HelloCheckboxGroup
+  class Person
+    attr_accessor :activities
+    
+    def initialize
+      reset_activities
+    end
+    
+    def activities_options
+      ['Skiing', 'Snowboarding', 'Snowmobiling', 'Snowshoeing']
+    end
+    
+    def reset_activities
+      self.activities = ['Snowboarding']
+    end
+  end
+  
   include Glimmer
+  
   def launch
+    person = Person.new
+    
     shell {
-      text "Hello, Tab!"
-      tab_folder {
-        tab_item {
-          text "English"
-          label {
-            text "Hello, World!"
-          }
-        }
-        tab_item {
-          text "French"
-          label {
-            text "Bonjour, Univers!"
-          }
-        }
+      text 'Hello, Checkbox Group!'
+      row_layout :vertical
+      
+      label {
+        text 'Check all snow activities you are interested in:'
+        font style: :bold
+      }
+      
+      checkbox_group {
+        selection bind(person, :activities)
+      }
+    
+      button {
+        text 'Reset Activities'
+        
+        on_widget_selected do
+          person.reset_activities
+        end
       }
     }.open
   end
 end
 
-HelloTab.new.launch
+HelloCheckboxGroup.new.launch
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-english.png)
-![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-french.png)
+![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox-group.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -589,91 +1402,68 @@ rails s
 
 Visit `http://localhost:3000`
 
-You should see "Hello, Tab!"
+You should see "Hello, Checkbox Group!"
 
-![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
-![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
+![Glimmer DSL for Opal Hello Checkbox Group](images/glimmer-dsl-opal-hello-checkbox-group.png)
 
-#### Hello, Custom Widget!
+#### Hello, Date Time!
 
 Add the following require statement to `app/assets/javascripts/application.rb`
 
 ```ruby
-require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
+require 'glimmer-dsl-opal/samples/hello/hello_date_time'
 ```
 
 Or add the Glimmer code directly if you prefer to play around with it:
 
 ```ruby
-# This class declares a `greeting_label` custom widget (by convention)
-class GreetingLabel
-  include Glimmer::UI::CustomWidget
-  
-  # multiple options without default values
-  options :name, :colors
-  
-  # single option with default value
-  option :greeting, default: 'Hello'
-  
-  # internal attribute (not a custom widget option)
-  attr_accessor :color
+class HelloDateTime
+  class Person
+    attr_accessor :date_of_birth
+  end
   
-  before_body {
-    @font = {height: 24, style: :bold}
-    @color = :black
-  }
+  include Glimmer
   
-  after_body {
-    return if colors.nil?
+  def launch
+    person = Person.new
+    person.date_of_birth = DateTime.new(2013, 7, 12, 18, 37, 23)
     
-    Thread.new {
-      colors.cycle { |color|
-        async_exec {
-          self.color = color
-        }
-        sleep(1)
+    shell {
+      row_layout :vertical
+      
+      text 'Hello, Date Time!'
+      minimum_size 180, 180
+      
+      label {
+        text 'Date of Birth'
+        font height: 16, style: :bold
       }
-    }
-  }
-  
-  body {
-    # pass received swt_style through to label to customize (e.g. :center to center text)
-    label(swt_style) {
-      text "#{greeting}, #{name}!"
-      font @font
-      foreground bind(self, :color)
-    }
-  }
-  
+      
+      date { # alias for date_time(:date)
+        date_time bind(person, :date_of_birth)
+      }
+      
+      date_drop_down { # alias for date_time(:date, :drop_down)
+        date_time bind(person, :date_of_birth)
+      }
+      
+      time { # alias for date_time(:time)
+        date_time bind(person, :date_of_birth)
+      }
+      
+      calendar { # alias for date_time(:calendar)
+        date_time bind(person, :date_of_birth)
+      }
+    }.open
+  end
 end
 
-# including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `greeting_label` custom widget
-include Glimmer
-
-shell {
-  fill_layout :vertical
-  
-  minimum_size 215, 215
-  text 'Hello, Custom Widget!'
-  
-  # custom widget options are passed in a hash
-  greeting_label(name: 'Sean')
-  
-  # pass :center SWT style followed by custom widget options hash
-  greeting_label(:center, name: 'Laura', greeting: 'Aloha') #
-  
-  greeting_label(:right, name: 'Rick') {
-    # you can nest attributes under custom widgets just like any standard widget
-    foreground :red
-  }
-  
-  # the colors option cycles between colors for the label foreground every second
-  greeting_label(:center, name: 'Mary', greeting: 'Aloha', colors: [:red, :dark_green, :blue])
-}.open
+HelloDateTime.new.launch
 ```
+
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
-![Glimmer DSL for SWT Hello Custom Widget](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-widget.gif)
+![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-date-time.png)
 
 Glimmer app on the web (using `glimmer-dsl-opal` gem):
 
@@ -684,9 +1474,9 @@ rails s
 
 Visit `http://localhost:3000`
 
-You should see "Hello, Custom Widget!"
+You should see "Hello, Date Time!"
 
-![Glimmer DSL for Opal Hello Custom Widget](images/glimmer-dsl-opal-hello-custom-widget.gif)
+![Glimmer DSL for Opal Hello Date Time](images/glimmer-dsl-opal-hello-date-time.png)
 
 ### Elaborate Samples
 
@@ -1395,6 +2185,48 @@ Glimmer DSL for Opal Contact Manager Edit Done
 
 ![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
 
+### External Samples
+
+#### Glimmer Calculator
+
+Add the [glimmer-cs-calculator](https://github.com/AndyObtiva/glimmer-cs-calculator) gem to `Gemfile` (without requiring):
+
+```
+gem 'glimmer-cs-calculator', require: false
+```
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-cs-calculator/launch'
+```
+
+Glimmer app on the desktop (using the [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer Calculator Linux](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-linux.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+(or visit: http://glimmer-cs-calculator-server.herokuapp.com)
+
+You should see "Glimmer Calculator"
+
+![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
+
+Here is an Apple Calculator CSS themed version (with [CSS only](https://github.com/AndyObtiva/glimmer-cs-calculator/blob/master/server/glimmer-cs-calculator-server/app/assets/stylesheets/welcomes_apple.scss), no app code changes):
+
+Visit http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple
+
+You should see "Apple Calculator Theme"
+
+![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)
+
 ## Help
 
 ### Issues
@@ -1431,7 +2263,7 @@ These features have been suggested. You might see them in a future version of Gl
 
 [MIT](https://opensource.org/licenses/MIT)
 
-Copyright (c) 2020 - Andy Maleh. 
+Copyright (c) 2020 - Andy Maleh.
 See [LICENSE.txt](LICENSE.txt) for further details.
 
 --