glimmer-dsl-opal 0.1.0 → 0.5.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +48 -0
  3. data/README.md +948 -169
  4. data/VERSION +1 -1
  5. data/lib/glimmer-dsl-opal.rb +31 -7
  6. data/lib/glimmer-dsl-opal/ext/date.rb +13 -0
  7. data/lib/glimmer-dsl-opal/ext/exception.rb +5 -0
  8. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager.rb +0 -0
  9. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact.rb +0 -0
  10. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_manager_presenter.rb +0 -0
  11. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_repository.rb +24 -99
  12. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/login.rb +0 -0
  13. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe.rb +0 -0
  14. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/board.rb +0 -0
  15. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/cell.rb +0 -0
  16. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_browser.rb +0 -0
  17. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox.rb +85 -0
  18. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox_group.rb +68 -0
  19. data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +63 -0
  20. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed.rb +0 -0
  21. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed/contact.rb +0 -0
  22. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +155 -0
  23. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +86 -0
  24. data/lib/glimmer-dsl-opal/samples/hello/hello_group.rb +104 -0
  25. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_multi_selection.rb +0 -0
  26. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_single_selection.rb +1 -1
  27. data/lib/glimmer-dsl-opal/samples/hello/hello_radio.rb +108 -0
  28. data/lib/glimmer-dsl-opal/samples/hello/hello_radio_group.rb +84 -0
  29. data/lib/glimmer-dsl-opal/samples/hello/hello_tab.rb +50 -0
  30. data/lib/glimmer-dsl-opal/samples/hello/hello_world.rb +29 -0
  31. data/lib/{jquery.js → glimmer-dsl-opal/vendor/jquery.js} +0 -0
  32. data/lib/glimmer-dsl-swt.rb +37 -0
  33. data/lib/glimmer/data_binding/element_binding.rb +2 -1
  34. data/lib/glimmer/data_binding/ext/observable_model.rb +1 -1
  35. data/lib/glimmer/dsl/opal/async_exec_expression.rb +23 -7
  36. data/lib/glimmer/dsl/opal/checkbox_group_selection_data_binding_expression.rb +61 -0
  37. data/lib/glimmer/dsl/opal/color_expression.rb +38 -0
  38. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +94 -0
  39. data/lib/glimmer/dsl/opal/display_expression.rb +40 -0
  40. data/lib/glimmer/dsl/opal/dsl.rb +14 -0
  41. data/lib/glimmer/dsl/opal/exec_expression.rb +55 -0
  42. data/lib/glimmer/dsl/opal/font_expression.rb +47 -0
  43. data/lib/glimmer/dsl/opal/layout_expression.rb +1 -1
  44. data/lib/glimmer/dsl/opal/property_expression.rb +6 -2
  45. data/lib/glimmer/dsl/opal/radio_group_selection_data_binding_expression.rb +61 -0
  46. data/lib/glimmer/dsl/opal/rgb_expression.rb +32 -0
  47. data/lib/glimmer/dsl/opal/rgba_expression.rb +32 -0
  48. data/lib/glimmer/dsl/opal/shell_expression.rb +19 -2
  49. data/lib/glimmer/dsl/opal/swt_expression.rb +46 -0
  50. data/lib/glimmer/dsl/opal/sync_exec_expression.rb +33 -0
  51. data/lib/glimmer/dsl/opal/widget_expression.rb +2 -1
  52. data/lib/glimmer/dsl/opal/widget_listener_expression.rb +16 -3
  53. data/lib/glimmer/swt.rb +499 -0
  54. data/lib/glimmer/swt/browser_proxy.rb +1 -1
  55. data/lib/glimmer/swt/button_proxy.rb +17 -3
  56. data/lib/glimmer/swt/checkbox_proxy.rb +80 -0
  57. data/lib/glimmer/swt/color_proxy.rb +119 -0
  58. data/lib/glimmer/swt/combo_proxy.rb +13 -12
  59. data/lib/glimmer/swt/composite_proxy.rb +8 -8
  60. data/lib/glimmer/swt/custom/checkbox_group.rb +142 -0
  61. data/lib/glimmer/swt/custom/radio_group.rb +143 -0
  62. data/lib/glimmer/swt/display_proxy.rb +79 -0
  63. data/lib/glimmer/swt/fill_layout_proxy.rb +84 -0
  64. data/lib/glimmer/swt/font_proxy.rb +79 -0
  65. data/lib/glimmer/swt/grid_layout_proxy.rb +45 -4
  66. data/lib/glimmer/swt/group_proxy.rb +38 -0
  67. data/lib/glimmer/swt/label_proxy.rb +28 -4
  68. data/lib/glimmer/swt/layout_data_proxy.rb +59 -6
  69. data/lib/glimmer/swt/layout_proxy.rb +17 -14
  70. data/lib/glimmer/swt/list_proxy.rb +19 -14
  71. data/lib/glimmer/swt/make_shift_shell_proxy.rb +38 -0
  72. data/lib/glimmer/swt/message_box_proxy.rb +5 -8
  73. data/lib/glimmer/swt/radio_proxy.rb +81 -0
  74. data/lib/glimmer/swt/row_layout_proxy.rb +128 -0
  75. data/lib/glimmer/swt/scrolled_composite_proxy.rb +20 -0
  76. data/lib/glimmer/swt/shell_proxy.rb +51 -26
  77. data/lib/glimmer/swt/style_constantizable.rb +154 -0
  78. data/lib/glimmer/swt/styled_text_proxy.rb +44 -0
  79. data/lib/glimmer/swt/swt_proxy.rb +53 -0
  80. data/lib/glimmer/swt/tab_folder_proxy.rb +8 -8
  81. data/lib/glimmer/swt/tab_item_proxy.rb +15 -32
  82. data/lib/glimmer/swt/table_proxy.rb +0 -18
  83. data/lib/glimmer/swt/widget_proxy.rb +173 -54
  84. data/lib/glimmer/ui/custom_shell.rb +92 -0
  85. data/lib/glimmer/ui/custom_widget.rb +292 -0
  86. data/lib/glimmer/util/proc_tracker.rb +39 -0
  87. data/lib/net/http.rb +17 -0
  88. data/lib/uri.rb +64 -0
  89. metadata +108 -57
  90. data/lib/glimmer/opal/display_proxy.rb +0 -23
  91. data/lib/glimmer/opal/element_proxy.rb +0 -312
  92. data/lib/samples/elaborate/launch +0 -6
  93. data/lib/samples/hello/hello_combo.rb +0 -34
  94. data/lib/samples/hello/hello_tab.rb +0 -24
  95. data/lib/samples/hello/hello_world.rb +0 -8
  96. data/lib/samples/hello/launch +0 -10
  97. data/lib/samples/launch +0 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b86a4ab59fb47c8fd2e21c3f88d790942b19461e159b613edab602c250c0d9e7
4
- data.tar.gz: 121b3220b1bdb4848ce065564f108bc03f0d8145a2e35d07936ed69f66d52e8a
3
+ metadata.gz: f61cb014521b4590b70cfebc52264117af31b9d7e234d940988695d03925c2be
4
+ data.tar.gz: 9b13c946b176527cc7d6f6ff7b946994da3c64dd19c9bac205539edfe80ef8e4
5
5
  SHA512:
6
- metadata.gz: e5a6fd8bb27c826ffbfa8baf5a0ab006f5756125eae25cea4fd08911c65736899520c8bbe1fafa6e1e9941ad1902dc90a62630170a2c0afec9f0420e4ec3911c
7
- data.tar.gz: dfb9b7195d02486125efff51d9abb1c3c14ba62e9450f597d1508418155962eef0e00a7e2149f501de0f5fdf589fc4c71038392b743c42a43b9c83e914264462
6
+ metadata.gz: fb7d7f17cd91c006417cb2a396298bc2b165f5d57bf685a4867e5bc3868f54589d8b3c7387fc3b242fd874265336874c7ea0fb35734f4e1980a6cab8ce13afd6
7
+ data.tar.gz: 0da099a76842cbcd97e44bcf756afced145283f40901a611eb7a711d6ad5c1585ef92f49e4af289fd43b35e81595d3b348c4ccd5da5174efbcc98448095452f4
@@ -1,5 +1,53 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.5.1
4
+
5
+ - Fixed issue with Hello, Combo!, Hello, List...! samples
6
+
7
+ ## 0.5.0
8
+
9
+ - Add `margin_top`, `margin_right`, `margin_bottom`, and `margin_left` to RowLayoutProxy
10
+ - `radio`
11
+ - Hello, Radio! Sample
12
+ - `radio_group`
13
+ - Hello, Radio Group! Sample
14
+ - `checkbox`
15
+ - Hello, Checkbox! Sample
16
+ - `checkbox_group`
17
+ - Fix issue with `label` `alignment` property
18
+ - Fix issues with default `composite` `grid_layout` not getting its styles removed when setting `row_layout`
19
+ - `button(:radio)` alias for `radio`
20
+ - `check` alias for `checkbox`
21
+ - `button(:check)` alias for `checkbox`
22
+ - Hello, Group! Sample
23
+ - Group widget
24
+
25
+ ## 0.4.0
26
+
27
+ - Support `display` keyword representing an SWT Display
28
+ - Support display `on_swt_keydown` event listener (display-wide widget observer)
29
+ - Support `DisplayProxy#shells` method keeping track of open shell
30
+ - Make a custom shell open in the same window if there is no shell open already
31
+ - Support `sync_exec` keyword as just an alias to `async_exec`
32
+ - Provide a makeshift require for 'glimmer-dsl-swt' that requires 'glimmer-dsl-opal' instead
33
+ - Fake APIs on the web for OS.os?, File.read, Display.setAppName, Display.setAppVersion
34
+ - Provide a minimal URI class that supports URI::encode_www_form_component and URI::decode_www_form_component from Ruby
35
+
36
+ ## 0.3.0
37
+
38
+ - 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...)
39
+ - Make custom shells automatically open in a new tab/window (while standard shells continue to open in the same window by replacing its content)
40
+ - Hello, Custom Shell! Sample
41
+
42
+ ## 0.2.0
43
+
44
+ - Color support
45
+ - Font support
46
+ - Custom Widget Support
47
+ - Hello, Custom Widget! sample
48
+ - Updated Hello, Combo! sample to match the latest changes in Glimmer DSL for SWT
49
+ - `SWT` full re-implementation in Opal as `Glimmer::SWT` with all the `SWT` style constants
50
+
3
51
  ## 0.1.0
4
52
 
5
53
  - Code redesign to better match the glimmer-dsl-swt APIs
data/README.md CHANGED
@@ -1,18 +1,17 @@
1
- # [<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.0.9 (Webify Desktop Apps)
1
+ # [<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.5.1 (Webify Desktop Apps)
2
2
  [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
3
3
  [![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)
4
4
 
5
- [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an experimental proof-of-concept web GUI adaptor 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/) and [Opal](https://opalrb.com/), allowing Ruby desktop apps to run on the web without changing a line of code. Apps may then be custom-styled for the web via standard CSS.
5
+ ### You can finally live in pure Ruby land on the web!
6
6
 
7
- Glimmer DSL for Opal successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal](https://opalrb.com/) Ruby, and as such inherits the full range of powerful Glimmer DSL [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities, such as:
8
- - `bind(model, property)` basic data-binding
9
- - `bind(model, property, computed_by: procs)` computed data-binding
10
- - `bind(model, property, on_read:, on_write:)` data-binding converters
11
- - `bind(model, property), column_properties(columns)` `table` data-binding
12
- - Automatically inferred `property_options` for `list` and `combo` data-binding
13
- - `observe(model, property)` free-form observing
7
+ [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.
8
+
9
+ 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.
10
+
11
+ NOTE: Alpha Version 0.5.1 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):
12
+
13
+ Hello:
14
14
 
15
- NOTE: Alpha Version 0.1.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):
16
15
  - [Hello, World!](#hello-world)
17
16
  - [Hello, Combo!](#hello-combo)
18
17
  - [Hello, Computed!](#hello-computed)
@@ -20,19 +19,43 @@ NOTE: Alpha Version 0.1.0 only supports bare-minimum capabilities for the follow
20
19
  - [Hello, List Multi Selection!](#hello-list-multi-selection)
21
20
  - [Hello, Browser!](#hello-browser)
22
21
  - [Hello, Tab!](#hello-tab)
22
+ - [Hello, Custom Widget!](#hello-custom-widget)
23
+ - [Hello, Custom Shell!](#hello-custom-shell)
24
+ - [Hello, Radio!](#hello-radio)
25
+ - [Hello, Radio Group!](#hello-radio-group)
26
+ - [Hello, Group!](#hello-group)
27
+ - [Hello, Checkbox!](#hello-checkbox)
28
+ - [Hello, Checkbox Group!](#hello-checkbox-group)
29
+
30
+ Elaborate:
31
+
23
32
  - [Login](#login)
24
33
  - [Tic Tac Toe](#tic-tac-toe)
25
34
  - [Contact Manager](#contact-manager)
26
35
 
36
+ External:
37
+
38
+ - [Glimmer Calculator](#glimmer-calculator)
39
+
27
40
  Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
28
- - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (Desktop GUI)
41
+ - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
42
+ - [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
29
43
  - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
30
44
  - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
31
45
 
46
+ ## Background
47
+
48
+ 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).
49
+
50
+ 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.
51
+
52
+ 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.
53
+
32
54
  ## Supported Glimmer DSL Keywords
33
55
 
34
56
  The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
35
57
 
58
+ Widgets:
36
59
  - `shell`
37
60
  - `label`
38
61
  - `combo`
@@ -45,40 +68,60 @@ The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glim
45
68
  - `table`
46
69
  - `table_column`
47
70
  - `message_box`
71
+ - Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget
72
+ - 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)
73
+
74
+ Layouts:
75
+ - `grid_layout`
76
+ - `row_layout`
77
+ - `fill_layout`
78
+ - `layout_data`
79
+
80
+ Graphics:
81
+ - `color`
82
+ - `font`
83
+
84
+ Data-Binding/Observers:
85
+ - `bind`
86
+ - `observe`
48
87
  - `on_widget_selected`
49
88
  - `on_modify_text`
50
- - `observe`
51
- - `bind`
89
+
90
+ Event loop:
91
+ - `display`
52
92
  - `async_exec`
53
- - `grid_layout`
54
- - `layout_data`
55
93
 
56
94
  ## Pre-requisites
57
95
 
58
96
  - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
59
97
  - Opal 1: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
60
- - jQuery 3: [https://code.jquery.com/](https://code.jquery.com/) (jQuery 3.5.1 is included in the glimmer-dsl-opal rubygem)
98
+ - 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)
61
99
 
62
100
  ## Setup
63
101
 
64
102
  (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)
65
103
 
66
- Please install a Rails 5 gem (e.g. `gem install rails -v5.2.4.3` )
104
+ Please install a Rails 5 gem:
105
+
106
+ ```
107
+ gem install rails -v5.2.4.4
108
+ ```
67
109
 
68
110
  Start a new Rails 5 app:
69
111
 
70
112
  ```
71
- rails new glimmer_app
113
+ rails new glimmer_app_server
72
114
  ```
73
115
 
74
116
  Add the following to `Gemfile`:
75
117
 
76
118
  ```
77
119
  gem 'opal-rails', '~> 1.1.2'
78
- gem 'opal-async', '~> 1.1.0'
120
+ gem 'opal-async', '~> 1.2.0'
79
121
  gem 'opal-jquery', '~> 0.4.4'
80
- gem 'glimmer-dsl-opal', '~> 0.1.0', require: false
81
- gem 'glimmer-dsl-xml', '~> 0.1.0', require: false
122
+ gem 'glimmer-dsl-opal', '~> 0.5.1', require: false
123
+ gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
124
+ gem 'glimmer-dsl-css', '~> 1.1.0', require: false
82
125
 
83
126
  ```
84
127
 
@@ -89,24 +132,60 @@ Edit `config/initializers/assets.rb` and add the following at the bottom:
89
132
  Opal.use_gem 'glimmer-dsl-opal'
90
133
  ```
91
134
 
135
+ Run:
136
+
137
+ ```
138
+ rails g scaffold welcome
139
+ ```
140
+
141
+ Modify `config/routes.rb`:
142
+
143
+ ```ruby
144
+ root to: 'welcomes#index'
145
+ ```
146
+
92
147
  Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
93
148
 
94
149
  ```ruby
95
- require 'glimmer-dsl-opal' # brings opal and opal browser too
150
+ require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
96
151
  ```
97
152
 
98
- Add more code to `app/assets/javascripts/application.rb` inside `Document.ready? do; end` block from one of the samples below or require a [Glimmer](https://github.com/AndyObtiva/glimmer) app/[custom-shell](https://github.com/AndyObtiva/glimmer#custom-shell-gem) gem.
153
+ Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
99
154
 
100
- ## Samples
155
+ ```ruby
156
+ Document.ready? do
157
+ # require-statement/code goes here.
158
+ end
159
+ ```
101
160
 
102
- Make sure to add any `require` statements or code below inside:
161
+ Example to confirm setup is working:
103
162
 
104
163
  ```ruby
105
164
  Document.ready? do
106
- # Code goes here.
165
+ include Glimmer
166
+
167
+ shell {
168
+ fill_layout
169
+ text 'Example to confirm setup is working'
170
+ label {
171
+ text "Welcome to Glimmer DSL for Opal!"
172
+ foreground :red
173
+ font height: 24
174
+ }
175
+ }.open
107
176
  end
108
177
  ```
109
178
 
179
+ ## Samples
180
+
181
+ 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)
182
+
183
+ 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:
184
+
185
+ [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
186
+
187
+ 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).
188
+
110
189
  ### Hello Samples
111
190
 
112
191
  #### Hello, World!
@@ -114,7 +193,7 @@ end
114
193
  Add the following require statement to `app/assets/javascripts/application.rb`
115
194
 
116
195
  ```ruby
117
- require 'samples/hello/hello_world'
196
+ require 'glimmer-dsl-opal/samples/hello/hello_world'
118
197
  ```
119
198
 
120
199
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -152,7 +231,7 @@ You should see "Hello, World!"
152
231
  Add the following require statement to `app/assets/javascripts/application.rb`
153
232
 
154
233
  ```ruby
155
- require 'samples/hello/hello_combo'
234
+ require 'glimmer-dsl-opal/samples/hello/hello_combo'
156
235
  ```
157
236
 
158
237
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -160,32 +239,40 @@ Or add the Glimmer code directly if you prefer to play around with it:
160
239
  ```ruby
161
240
  class Person
162
241
  attr_accessor :country, :country_options
163
-
242
+
164
243
  def initialize
165
- self.country_options=["", "Canada", "US", "Mexico"]
166
- self.country = "Canada"
244
+ self.country_options = ['', 'Canada', 'US', 'Mexico']
245
+ reset_country
167
246
  end
168
247
 
169
248
  def reset_country
170
- self.country = "Canada"
249
+ self.country = 'Canada'
171
250
  end
172
251
  end
173
252
 
174
253
  class HelloCombo
175
254
  include Glimmer
255
+
176
256
  def launch
177
257
  person = Person.new
258
+
178
259
  shell {
179
- composite {
180
- combo(:read_only) {
181
- selection bind(person, :country)
182
- }
183
- button {
184
- text "Reset"
185
- on_widget_selected do
186
- person.reset_country
187
- end
188
- }
260
+ row_layout(:vertical) {
261
+ pack false
262
+ }
263
+
264
+ text 'Hello, Combo!'
265
+
266
+ combo(:read_only) {
267
+ selection bind(person, :country)
268
+ }
269
+
270
+ button {
271
+ text 'Reset Selection'
272
+
273
+ on_widget_selected do
274
+ person.reset_country
275
+ end
189
276
  }
190
277
  }.open
191
278
  end
@@ -216,7 +303,7 @@ Add the following require statement to `app/assets/javascripts/application.rb`
216
303
 
217
304
 
218
305
  ```ruby
219
- require 'samples/hello/hello_computed'
306
+ require 'glimmer-dsl-opal/samples/hello/hello_computed'
220
307
  ```
221
308
 
222
309
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -335,13 +422,13 @@ Add the following require statement to `app/assets/javascripts/application.rb`
335
422
 
336
423
 
337
424
  ```ruby
338
- require 'samples/hello/hello_list_single_selection'
425
+ require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
339
426
  ```
340
427
 
341
428
  Or add the Glimmer code directly if you prefer to play around with it:
342
429
 
343
430
  ```ruby
344
- class Person
431
+ class Person
345
432
  attr_accessor :country, :country_options
346
433
 
347
434
  def initialize
@@ -378,7 +465,7 @@ HelloListSingleSelection.new.launch
378
465
  ```
379
466
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
380
467
 
381
- ![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-single-selection.png)
468
+ ![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-single-selection.png)
382
469
 
383
470
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
384
471
 
@@ -398,7 +485,7 @@ You should see "Hello, List Single Selection!"
398
485
  Add the following require statement to `app/assets/javascripts/application.rb`
399
486
 
400
487
  ```ruby
401
- require 'samples/hello/hello_list_multi_selection'
488
+ require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
402
489
  ```
403
490
 
404
491
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -451,7 +538,7 @@ HelloListMultiSelection.new.launch
451
538
  ```
452
539
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
453
540
 
454
- ![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-multi-selection.png)
541
+ ![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-multi-selection.png)
455
542
 
456
543
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
457
544
 
@@ -471,7 +558,7 @@ You should see "Hello, List Multi Selection!"
471
558
  Add the following require statement to `app/assets/javascripts/application.rb`
472
559
 
473
560
  ```ruby
474
- require 'samples/hello/hello_browser'
561
+ require 'glimmer-dsl-opal/samples/hello/hello_browser'
475
562
  ```
476
563
 
477
564
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -488,7 +575,7 @@ shell {
488
575
  ```
489
576
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
490
577
 
491
- ![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-browser.png)
578
+ ![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-browser.png)
492
579
 
493
580
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
494
581
 
@@ -508,7 +595,7 @@ You should see "Hello, Browser!"
508
595
  Add the following require statement to `app/assets/javascripts/application.rb`
509
596
 
510
597
  ```ruby
511
- require 'samples/hello/hello_tab'
598
+ require 'glimmer-dsl-opal/samples/hello/hello_tab'
512
599
  ```
513
600
 
514
601
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -541,8 +628,8 @@ HelloTab.new.launch
541
628
  ```
542
629
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
543
630
 
544
- ![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-tab-english.png)
545
- ![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-tab-french.png)
631
+ ![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-english.png)
632
+ ![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-french.png)
546
633
 
547
634
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
548
635
 
@@ -558,6 +645,758 @@ You should see "Hello, Tab!"
558
645
  ![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
559
646
  ![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
560
647
 
648
+ #### Hello, Custom Widget!
649
+
650
+ Add the following require statement to `app/assets/javascripts/application.rb`
651
+
652
+ ```ruby
653
+ require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
654
+ ```
655
+
656
+ Or add the Glimmer code directly if you prefer to play around with it:
657
+
658
+ ```ruby
659
+ # This class declares a `greeting_label` custom widget (by convention)
660
+ class GreetingLabel
661
+ include Glimmer::UI::CustomWidget
662
+
663
+ # multiple options without default values
664
+ options :name, :colors
665
+
666
+ # single option with default value
667
+ option :greeting, default: 'Hello'
668
+
669
+ # internal attribute (not a custom widget option)
670
+ attr_accessor :color
671
+
672
+ before_body {
673
+ @font = {height: 24, style: :bold}
674
+ @color = :black
675
+ }
676
+
677
+ after_body {
678
+ return if colors.nil?
679
+
680
+ Thread.new {
681
+ colors.cycle { |color|
682
+ async_exec {
683
+ self.color = color
684
+ }
685
+ sleep(1)
686
+ }
687
+ }
688
+ }
689
+
690
+ body {
691
+ # pass received swt_style through to label to customize (e.g. :center to center text)
692
+ label(swt_style) {
693
+ text "#{greeting}, #{name}!"
694
+ font @font
695
+ foreground bind(self, :color)
696
+ }
697
+ }
698
+
699
+ end
700
+
701
+ # including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `greeting_label` custom widget
702
+ include Glimmer
703
+
704
+ shell {
705
+ fill_layout :vertical
706
+
707
+ minimum_size 215, 215
708
+ text 'Hello, Custom Widget!'
709
+
710
+ # custom widget options are passed in a hash
711
+ greeting_label(name: 'Sean')
712
+
713
+ # pass :center SWT style followed by custom widget options hash
714
+ greeting_label(:center, name: 'Laura', greeting: 'Aloha') #
715
+
716
+ greeting_label(:right, name: 'Rick') {
717
+ # you can nest attributes under custom widgets just like any standard widget
718
+ foreground :red
719
+ }
720
+
721
+ # the colors option cycles between colors for the label foreground every second
722
+ greeting_label(:center, name: 'Mary', greeting: 'Aloha', colors: [:red, :dark_green, :blue])
723
+ }.open
724
+ ```
725
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
726
+
727
+ ![Glimmer DSL for SWT Hello Custom Widget](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-widget.gif)
728
+
729
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
730
+
731
+ Start the Rails server:
732
+ ```
733
+ rails s
734
+ ```
735
+
736
+ Visit `http://localhost:3000`
737
+
738
+ You should see "Hello, Custom Widget!"
739
+
740
+ ![Glimmer DSL for Opal Hello Custom Widget](images/glimmer-dsl-opal-hello-custom-widget.gif)
741
+
742
+ #### Hello, Custom Shell!
743
+
744
+ Add the following require statement to `app/assets/javascripts/application.rb`
745
+
746
+ ```ruby
747
+ require 'glimmer-dsl-opal/samples/hello/hello_custom_shell'
748
+ ```
749
+
750
+ Or add the Glimmer code directly if you prefer to play around with it:
751
+
752
+ ```ruby
753
+ require 'date'
754
+
755
+ # This class declares an `email_shell` custom shell, aka custom window (by convention)
756
+ # Used to view an email message
757
+ class EmailShell
758
+ include Glimmer::UI::CustomShell
759
+
760
+ # multiple options without default values
761
+ options :date, :subject, :from, :message
762
+
763
+ # single option with default value
764
+ option :to, default: '"John Irwin" <john.irwin@example.com>'
765
+
766
+ before_body {
767
+ @swt_style |= swt(:shell_trim, :modeless)
768
+ }
769
+
770
+ body {
771
+ # pass received swt_style through to shell to customize it (e.g. :dialog_trim for a blocking shell)
772
+ shell(swt_style) {
773
+ grid_layout(2, false)
774
+
775
+ text subject
776
+
777
+ label {
778
+ text 'Date:'
779
+ }
780
+ label {
781
+ text date
782
+ }
783
+
784
+ label {
785
+ text 'From:'
786
+ }
787
+ label {
788
+ text from
789
+ }
790
+
791
+ label {
792
+ text 'To:'
793
+ }
794
+ label {
795
+ text to
796
+ }
797
+
798
+ label {
799
+ text 'Subject:'
800
+ }
801
+ label {
802
+ text subject
803
+ }
804
+
805
+ label {
806
+ layout_data(:fill, :fill, true, true) {
807
+ horizontal_span 2 #TODO implement
808
+ vertical_indent 10
809
+ }
810
+
811
+ background :white
812
+ text message
813
+ }
814
+ }
815
+ }
816
+
817
+ end
818
+
819
+ class HelloCustomShell
820
+ # including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `email_shell` custom widget
821
+ include Glimmer
822
+
823
+ Email = Struct.new(:date, :subject, :from, :message, keyword_init: true)
824
+ EmailSystem = Struct.new(:emails, keyword_init: true)
825
+
826
+ def initialize
827
+ @email_system = EmailSystem.new(
828
+ emails: [
829
+ 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"),
830
+ 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"),
831
+ 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"),
832
+ 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"),
833
+ 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"),
834
+ 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"),
835
+ ]
836
+ )
837
+ end
838
+
839
+ def launch
840
+ shell {
841
+ grid_layout
842
+
843
+ text 'Hello, Custom Shell!'
844
+
845
+ label {
846
+ font height: 24, style: :bold
847
+ text 'Emails:'
848
+ }
849
+
850
+ label {
851
+ font height: 18
852
+ text 'Click an email to view its message'
853
+ }
854
+
855
+ table {
856
+ layout_data :fill, :fill, true, true
857
+
858
+ table_column {
859
+ text 'Date:'
860
+ width 180
861
+ }
862
+ table_column {
863
+ text 'Subject:'
864
+ width 180
865
+ }
866
+ table_column {
867
+ text 'From:'
868
+ width 360
869
+ }
870
+
871
+ items bind(@email_system, :emails), column_properties(:date, :subject, :from)
872
+
873
+ on_mouse_up { |event|
874
+ email = event.table_item.get_data
875
+ Thread.new do
876
+ async_exec {
877
+ email_shell(date: email.date, subject: email.subject, from: email.from, message: email.message).open
878
+ }
879
+ end
880
+ }
881
+ }
882
+ }.open
883
+ end
884
+ end
885
+
886
+ HelloCustomShell.new.launch
887
+ ```
888
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
889
+
890
+ ![Glimmer DSL for SWT Hello Custom Shell](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell.png)
891
+ ![Glimmer DSL for SWT Hello Custom Shell Email1](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email1.png)
892
+ ![Glimmer DSL for SWT Hello Custom Shell Email2](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email2.png)
893
+ ![Glimmer DSL for SWT Hello Custom Shell Email3](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email3.png)
894
+
895
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
896
+
897
+ Start the Rails server:
898
+ ```
899
+ rails s
900
+ ```
901
+
902
+ Visit `http://localhost:3000`
903
+
904
+ You should see "Hello, Custom Widget!"
905
+
906
+ ![Glimmer DSL for Opal Hello Custom Shell](images/glimmer-dsl-opal-hello-custom-shell.png)
907
+ ![Glimmer DSL for Opal Hello Custom Shell Email1](images/glimmer-dsl-opal-hello-custom-shell-email1.png)
908
+ ![Glimmer DSL for Opal Hello Custom Shell Email2](images/glimmer-dsl-opal-hello-custom-shell-email2.png)
909
+ ![Glimmer DSL for Opal Hello Custom Shell Email3](images/glimmer-dsl-opal-hello-custom-shell-email3.png)
910
+
911
+ #### Hello, Radio!
912
+
913
+ Add the following require statement to `app/assets/javascripts/application.rb`
914
+
915
+ ```ruby
916
+ require 'glimmer-dsl-opal/samples/hello/hello_radio'
917
+ ```
918
+
919
+ Or add the Glimmer code directly if you prefer to play around with it:
920
+
921
+ ```ruby
922
+ class HelloRadio
923
+ class Person
924
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
925
+
926
+ def initialize
927
+ reset
928
+ end
929
+
930
+ def reset
931
+ self.male = nil
932
+ self.female = nil
933
+ self.child = nil
934
+ self.teen = nil
935
+ self.adult = true
936
+ self.senior = nil
937
+ end
938
+ end
939
+
940
+ include Glimmer
941
+
942
+ def launch
943
+ person = Person.new
944
+
945
+ shell {
946
+ text 'Hello, Radio!'
947
+ row_layout :vertical
948
+
949
+ label {
950
+ text 'Gender:'
951
+ font style: :bold
952
+ }
953
+
954
+ composite {
955
+ row_layout
956
+
957
+ radio {
958
+ text 'Male'
959
+ selection bind(person, :male)
960
+ }
961
+
962
+ radio {
963
+ text 'Female'
964
+ selection bind(person, :female)
965
+ }
966
+ }
967
+
968
+ label {
969
+ text 'Age Group:'
970
+ font style: :bold
971
+ }
972
+
973
+ composite {
974
+ row_layout
975
+
976
+ radio {
977
+ text 'Child'
978
+ selection bind(person, :child)
979
+ }
980
+
981
+ radio {
982
+ text 'Teen'
983
+ selection bind(person, :teen)
984
+ }
985
+
986
+ radio {
987
+ text 'Adult'
988
+ selection bind(person, :adult)
989
+ }
990
+
991
+ radio {
992
+ text 'Senior'
993
+ selection bind(person, :senior)
994
+ }
995
+ }
996
+
997
+ button {
998
+ text 'Reset'
999
+
1000
+ on_widget_selected do
1001
+ person.reset
1002
+ end
1003
+ }
1004
+ }.open
1005
+ end
1006
+ end
1007
+
1008
+ HelloRadio.new.launch
1009
+ ```
1010
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1011
+
1012
+ ![Glimmer DSL for SWT Hello Radio](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio.png)
1013
+
1014
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1015
+
1016
+ Start the Rails server:
1017
+ ```
1018
+ rails s
1019
+ ```
1020
+
1021
+ Visit `http://localhost:3000`
1022
+
1023
+ You should see "Hello, Radio!"
1024
+
1025
+ ![Glimmer DSL for Opal Hello Radio](images/glimmer-dsl-opal-hello-radio.png)
1026
+
1027
+ #### Hello, Radio Group!
1028
+
1029
+ Add the following require statement to `app/assets/javascripts/application.rb`
1030
+
1031
+ ```ruby
1032
+ require 'glimmer-dsl-opal/samples/hello/hello_radio_group'
1033
+ ```
1034
+
1035
+ Or add the Glimmer code directly if you prefer to play around with it:
1036
+
1037
+ ```ruby
1038
+ class HelloRadioGroup
1039
+ class Person
1040
+ attr_accessor :gender, :age_group
1041
+
1042
+ def initialize
1043
+ reset
1044
+ end
1045
+
1046
+ def gender_options
1047
+ ['Male', 'Female']
1048
+ end
1049
+
1050
+ def age_group_options
1051
+ ['Child', 'Teen', 'Adult', 'Senior']
1052
+ end
1053
+
1054
+ def reset
1055
+ self.gender = nil
1056
+ self.age_group = 'Adult'
1057
+ end
1058
+ end
1059
+
1060
+ include Glimmer
1061
+
1062
+ def launch
1063
+ person = Person.new
1064
+
1065
+ shell {
1066
+ text 'Hello, Radio Group!'
1067
+ row_layout :vertical
1068
+
1069
+ label {
1070
+ text 'Gender:'
1071
+ font style: :bold
1072
+ }
1073
+
1074
+ radio_group {
1075
+ row_layout :horizontal
1076
+ selection bind(person, :gender)
1077
+ }
1078
+
1079
+ label {
1080
+ text 'Age Group:'
1081
+ font style: :bold
1082
+ }
1083
+
1084
+ radio_group {
1085
+ row_layout :horizontal
1086
+ selection bind(person, :age_group)
1087
+ }
1088
+
1089
+ button {
1090
+ text 'Reset'
1091
+
1092
+ on_widget_selected do
1093
+ person.reset
1094
+ end
1095
+ }
1096
+ }.open
1097
+ end
1098
+ end
1099
+
1100
+ HelloRadioGroup.new.launch
1101
+ ```
1102
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1103
+
1104
+ ![Glimmer DSL for SWT Hello Radio Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio-group.png)
1105
+
1106
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1107
+
1108
+ Start the Rails server:
1109
+ ```
1110
+ rails s
1111
+ ```
1112
+
1113
+ Visit `http://localhost:3000`
1114
+
1115
+ You should see "Hello, Radio Group!"
1116
+
1117
+ ![Glimmer DSL for Opal Hello Radio Group](images/glimmer-dsl-opal-hello-radio-group.png)
1118
+
1119
+ #### Hello, Group!
1120
+
1121
+ Add the following require statement to `app/assets/javascripts/application.rb`
1122
+
1123
+ ```ruby
1124
+ require 'glimmer-dsl-opal/samples/hello/hello_group'
1125
+ ```
1126
+
1127
+ Or add the Glimmer code directly if you prefer to play around with it:
1128
+
1129
+ ```ruby
1130
+ class HelloGroup
1131
+ class Person
1132
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
1133
+
1134
+ def initialize
1135
+ reset
1136
+ end
1137
+
1138
+ def reset
1139
+ self.male = nil
1140
+ self.female = nil
1141
+ self.child = nil
1142
+ self.teen = nil
1143
+ self.adult = true
1144
+ self.senior = nil
1145
+ end
1146
+ end
1147
+
1148
+ include Glimmer
1149
+
1150
+ def launch
1151
+ person = Person.new
1152
+
1153
+ shell {
1154
+ text 'Hello, Group!'
1155
+ row_layout :vertical
1156
+
1157
+ group {
1158
+ row_layout
1159
+
1160
+ text 'Gender'
1161
+ font style: :bold
1162
+
1163
+ radio {
1164
+ text 'Male'
1165
+ selection bind(person, :male)
1166
+ }
1167
+
1168
+ radio {
1169
+ text 'Female'
1170
+ selection bind(person, :female)
1171
+ }
1172
+ }
1173
+
1174
+ group {
1175
+ row_layout
1176
+
1177
+ text 'Age Group'
1178
+ font style: :bold
1179
+
1180
+ radio {
1181
+ text 'Child'
1182
+ selection bind(person, :child)
1183
+ }
1184
+
1185
+ radio {
1186
+ text 'Teen'
1187
+ selection bind(person, :teen)
1188
+ }
1189
+
1190
+ radio {
1191
+ text 'Adult'
1192
+ selection bind(person, :adult)
1193
+ }
1194
+
1195
+ radio {
1196
+ text 'Senior'
1197
+ selection bind(person, :senior)
1198
+ }
1199
+ }
1200
+
1201
+ button {
1202
+ text 'Reset'
1203
+
1204
+ on_widget_selected do
1205
+ person.reset
1206
+ end
1207
+ }
1208
+ }.open
1209
+ end
1210
+ end
1211
+
1212
+ HelloGroup.new.launch
1213
+ ```
1214
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1215
+
1216
+ ![Glimmer DSL for SWT Hello Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-group.png)
1217
+
1218
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1219
+
1220
+ Start the Rails server:
1221
+ ```
1222
+ rails s
1223
+ ```
1224
+
1225
+ Visit `http://localhost:3000`
1226
+
1227
+ You should see "Hello, Group!"
1228
+
1229
+ ![Glimmer DSL for Opal Hello Group](images/glimmer-dsl-opal-hello-group.png)
1230
+
1231
+ #### Hello, Checkbox!
1232
+
1233
+ Add the following require statement to `app/assets/javascripts/application.rb`
1234
+
1235
+ ```ruby
1236
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox'
1237
+ ```
1238
+
1239
+ Or add the Glimmer code directly if you prefer to play around with it:
1240
+
1241
+ ```ruby
1242
+ class HelloCheckbox
1243
+ class Person
1244
+ attr_accessor :skiing, :snowboarding, :snowmobiling, :snowshoeing
1245
+
1246
+ def initialize
1247
+ reset_activities
1248
+ end
1249
+
1250
+ def reset_activities
1251
+ self.skiing = false
1252
+ self.snowboarding = true
1253
+ self.snowmobiling = false
1254
+ self.snowshoeing = false
1255
+ end
1256
+ end
1257
+
1258
+ include Glimmer
1259
+
1260
+ def launch
1261
+ person = Person.new
1262
+
1263
+ shell {
1264
+ text 'Hello, Checkbox!'
1265
+ row_layout :vertical
1266
+
1267
+ label {
1268
+ text 'Check all snow activities you are interested in:'
1269
+ font style: :bold
1270
+ }
1271
+
1272
+ composite {
1273
+ checkbox {
1274
+ text 'Skiing'
1275
+ selection bind(person, :skiing)
1276
+ }
1277
+
1278
+ checkbox {
1279
+ text 'Snowboarding'
1280
+ selection bind(person, :snowboarding)
1281
+ }
1282
+
1283
+ checkbox {
1284
+ text 'Snowmobiling'
1285
+ selection bind(person, :snowmobiling)
1286
+ }
1287
+
1288
+ checkbox {
1289
+ text 'Snowshoeing'
1290
+ selection bind(person, :snowshoeing)
1291
+ }
1292
+ }
1293
+
1294
+ button {
1295
+ text 'Reset Activities'
1296
+
1297
+ on_widget_selected do
1298
+ person.reset_activities
1299
+ end
1300
+ }
1301
+ }.open
1302
+ end
1303
+ end
1304
+
1305
+ HelloCheckbox.new.launch
1306
+ ```
1307
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1308
+
1309
+ ![Glimmer DSL for SWT Hello Checkbox](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox.png)
1310
+
1311
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1312
+
1313
+ Start the Rails server:
1314
+ ```
1315
+ rails s
1316
+ ```
1317
+
1318
+ Visit `http://localhost:3000`
1319
+
1320
+ You should see "Hello, Checkbox!"
1321
+
1322
+ ![Glimmer DSL for Opal Hello Checkbox](images/glimmer-dsl-opal-hello-checkbox.png)
1323
+
1324
+ #### Hello, Checkbox Group!
1325
+
1326
+ Add the following require statement to `app/assets/javascripts/application.rb`
1327
+
1328
+ ```ruby
1329
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox_group'
1330
+ ```
1331
+
1332
+ Or add the Glimmer code directly if you prefer to play around with it:
1333
+
1334
+ ```ruby
1335
+ class HelloCheckboxGroup
1336
+ class Person
1337
+ attr_accessor :activities
1338
+
1339
+ def initialize
1340
+ reset_activities
1341
+ end
1342
+
1343
+ def activities_options
1344
+ ['Skiing', 'Snowboarding', 'Snowmobiling', 'Snowshoeing']
1345
+ end
1346
+
1347
+ def reset_activities
1348
+ self.activities = ['Snowboarding']
1349
+ end
1350
+ end
1351
+
1352
+ include Glimmer
1353
+
1354
+ def launch
1355
+ person = Person.new
1356
+
1357
+ shell {
1358
+ text 'Hello, Checkbox Group!'
1359
+ row_layout :vertical
1360
+
1361
+ label {
1362
+ text 'Check all snow activities you are interested in:'
1363
+ font style: :bold
1364
+ }
1365
+
1366
+ checkbox_group {
1367
+ selection bind(person, :activities)
1368
+ }
1369
+
1370
+ button {
1371
+ text 'Reset Activities'
1372
+
1373
+ on_widget_selected do
1374
+ person.reset_activities
1375
+ end
1376
+ }
1377
+ }.open
1378
+ end
1379
+ end
1380
+
1381
+ HelloCheckboxGroup.new.launch
1382
+ ```
1383
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1384
+
1385
+ ![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox-group.png)
1386
+
1387
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1388
+
1389
+ Start the Rails server:
1390
+ ```
1391
+ rails s
1392
+ ```
1393
+
1394
+ Visit `http://localhost:3000`
1395
+
1396
+ You should see "Hello, Checkbox Group!"
1397
+
1398
+ ![Glimmer DSL for Opal Hello Checkbox Group](images/glimmer-dsl-opal-hello-checkbox-group.png)
1399
+
561
1400
  ### Elaborate Samples
562
1401
 
563
1402
  #### Login
@@ -565,7 +1404,7 @@ You should see "Hello, Tab!"
565
1404
  Add the following require statement to `app/assets/javascripts/application.rb`
566
1405
 
567
1406
  ```ruby
568
- require 'samples/elaborate/login'
1407
+ require 'glimmer-dsl-opal/samples/elaborate/login'
569
1408
  ```
570
1409
 
571
1410
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -661,9 +1500,9 @@ Login.new.launch
661
1500
  ```
662
1501
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
663
1502
 
664
- ![Glimmer DSL for SWT Login](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login.png)
665
- ![Glimmer DSL for SWT Login Filled In](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login-filled-in.png)
666
- ![Glimmer DSL for SWT Login Logged In](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login-logged-in.png)
1503
+ ![Glimmer DSL for SWT Login](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login.png)
1504
+ ![Glimmer DSL for SWT Login Filled In](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login-filled-in.png)
1505
+ ![Glimmer DSL for SWT Login Logged In](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login-logged-in.png)
667
1506
 
668
1507
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
669
1508
 
@@ -685,7 +1524,7 @@ You should see "Login" dialog
685
1524
  Add the following require statement to `app/assets/javascripts/application.rb`
686
1525
 
687
1526
  ```ruby
688
- require 'samples/elaborate/tic_tac_toe'
1527
+ require 'glimmer-dsl-opal/samples/elaborate/tic_tac_toe'
689
1528
  ```
690
1529
 
691
1530
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -896,9 +1735,9 @@ TicTacToe.new.open
896
1735
  ```
897
1736
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
898
1737
 
899
- ![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe.png)
900
- ![Glimmer DSL for SWT Tic Tac Toe In Progress](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe-in-progress.png)
901
- ![Glimmer DSL for SWT Tic Tac Toe Game Over](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe-game-over.png)
1738
+ ![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe.png)
1739
+ ![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)
1740
+ ![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)
902
1741
 
903
1742
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
904
1743
 
@@ -920,7 +1759,7 @@ You should see "Tic Tac Toe"
920
1759
  Add the following require statement to `app/assets/javascripts/application.rb`
921
1760
 
922
1761
  ```ruby
923
- require 'samples/elaborate/contact_manager'
1762
+ require 'glimmer-dsl-opal/samples/elaborate/contact_manager'
924
1763
  ```
925
1764
 
926
1765
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -1041,104 +1880,6 @@ class ContactManager
1041
1880
  Jason
1042
1881
  Emma
1043
1882
  Olivia
1044
- Ava
1045
- Isabella
1046
- Sophia
1047
- Charlotte
1048
- Mia
1049
- Amelia
1050
- Harper
1051
- Evelyn
1052
- Abigail
1053
- Emily
1054
- Elizabeth
1055
- Mila
1056
- Ella
1057
- Avery
1058
- Sofia
1059
- Camila
1060
- Aria
1061
- Scarlett
1062
- Victoria
1063
- Madison
1064
- Luna
1065
- Grace
1066
- Chloe
1067
- Penelope
1068
- Layla
1069
- Riley
1070
- Zoey
1071
- Nora
1072
- Lily
1073
- Eleanor
1074
- Hannah
1075
- Lillian
1076
- Addison
1077
- Aubrey
1078
- Ellie
1079
- Stella
1080
- Natalie
1081
- Zoe
1082
- Leah
1083
- Hazel
1084
- Violet
1085
- Aurora
1086
- Savannah
1087
- Audrey
1088
- Brooklyn
1089
- Bella
1090
- Claire
1091
- Skylar
1092
- Lucy
1093
- Paisley
1094
- Everly
1095
- Anna
1096
- Caroline
1097
- Nova
1098
- Genesis
1099
- Emilia
1100
- Kennedy
1101
- Samantha
1102
- Maya
1103
- Willow
1104
- Kinsley
1105
- Naomi
1106
- Aaliyah
1107
- Elena
1108
- Sarah
1109
- Ariana
1110
- Allison
1111
- Gabriella
1112
- Alice
1113
- Madelyn
1114
- Cora
1115
- Ruby
1116
- Eva
1117
- Serenity
1118
- Autumn
1119
- Adeline
1120
- Hailey
1121
- Gianna
1122
- Valentina
1123
- Isla
1124
- Eliana
1125
- Quinn
1126
- Nevaeh
1127
- Ivy
1128
- Sadie
1129
- Piper
1130
- Lydia
1131
- Alexa
1132
- Josephine
1133
- Emery
1134
- Julia
1135
- Delilah
1136
- Arianna
1137
- Vivian
1138
- Kaylee
1139
- Sophie
1140
- Brielle
1141
- Madeline
1142
1883
  ]
1143
1884
  NAMES_LAST = %w[
1144
1885
  Smith
@@ -1153,7 +1894,7 @@ class ContactManager
1153
1894
  Taylor
1154
1895
  ]
1155
1896
  def initialize(contacts = nil)
1156
- @contacts = contacts || 1000.times.map do |n|
1897
+ @contacts = contacts || 100.times.map do |n|
1157
1898
  random_first_name_index = (rand*NAMES_FIRST.size).to_i
1158
1899
  random_last_name_index = (rand*NAMES_LAST.size).to_i
1159
1900
  first_name = NAMES_FIRST[random_first_name_index]
@@ -1314,23 +2055,23 @@ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObt
1314
2055
 
1315
2056
  Glimmer DSL for SWT Contact Manager
1316
2057
 
1317
- ![Glimmer DSL for SWT Contact Manager](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager.png)
2058
+ ![Glimmer DSL for SWT Contact Manager](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager.png)
1318
2059
 
1319
2060
  Glimmer DSL for SWT Contact Manager Find
1320
2061
 
1321
- ![Glimmer DSL for SWT Contact Manager Find](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-find.png)
2062
+ ![Glimmer DSL for SWT Contact Manager Find](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-find.png)
1322
2063
 
1323
2064
  Glimmer DSL for SWT Contact Manager Edit Started
1324
2065
 
1325
- ![Glimmer DSL for SWT Contact Manager Edit Started](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-started.png)
2066
+ ![Glimmer DSL for SWT Contact Manager Edit Started](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-edit-started.png)
1326
2067
 
1327
2068
  Glimmer DSL for SWT Contact Manager Edit In Progress
1328
2069
 
1329
- ![Glimmer DSL for SWT Contact Manager Edit In Progress](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-in-progress.png)
2070
+ ![Glimmer DSL for SWT Contact Manager Edit In Progress](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-edit-in-progress.png)
1330
2071
 
1331
2072
  Glimmer DSL for SWT Contact Manager Edit Done
1332
2073
 
1333
- ![Glimmer DSL for SWT Contact Manager Edit Done](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-done.png)
2074
+ ![Glimmer DSL for SWT Contact Manager Edit Done](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-edit-done.png)
1334
2075
 
1335
2076
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
1336
2077
 
@@ -1363,9 +2104,47 @@ Glimmer DSL for Opal Contact Manager Edit Done
1363
2104
 
1364
2105
  ![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
1365
2106
 
1366
- ## Sample App
2107
+ ### External Samples
1367
2108
 
1368
- [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
2109
+ #### Glimmer Calculator
2110
+
2111
+ Add the [glimmer-cs-calculator](https://github.com/AndyObtiva/glimmer-cs-calculator) gem to `Gemfile` (without requiring):
2112
+
2113
+ ```
2114
+ gem 'glimmer-cs-calculator', require: false
2115
+ ```
2116
+
2117
+ Add the following require statement to `app/assets/javascripts/application.rb`
2118
+
2119
+ ```ruby
2120
+ require 'glimmer-cs-calculator/launch'
2121
+ ```
2122
+
2123
+ Glimmer app on the desktop (using the [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2124
+
2125
+ ![Glimmer Calculator Linux](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-linux.png)
2126
+
2127
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
2128
+
2129
+ Start the Rails server:
2130
+ ```
2131
+ rails s
2132
+ ```
2133
+
2134
+ Visit `http://localhost:3000`
2135
+ (or visit: http://glimmer-cs-calculator-server.herokuapp.com)
2136
+
2137
+ You should see "Glimmer Calculator"
2138
+
2139
+ ![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
2140
+
2141
+ 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):
2142
+
2143
+ Visit http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple
2144
+
2145
+ You should see "Apple Calculator Theme"
2146
+
2147
+ ![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)
1369
2148
 
1370
2149
  ## Help
1371
2150
 
@@ -1403,7 +2182,7 @@ These features have been suggested. You might see them in a future version of Gl
1403
2182
 
1404
2183
  [MIT](https://opensource.org/licenses/MIT)
1405
2184
 
1406
- Copyright (c) 2020 - Andy Maleh.
2185
+ Copyright (c) 2020 - Andy Maleh.
1407
2186
  See [LICENSE.txt](LICENSE.txt) for further details.
1408
2187
 
1409
2188
  --