glimmer-dsl-opal 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +9 -0
  3. data/README.md +195 -167
  4. data/VERSION +1 -1
  5. data/lib/glimmer-dsl-opal.rb +24 -7
  6. data/lib/glimmer-dsl-opal/ext/exception.rb +5 -0
  7. data/lib/glimmer-dsl-opal/missing/net/http.rb +17 -0
  8. data/lib/glimmer-dsl-opal/missing/uri.rb +26 -0
  9. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager.rb +0 -0
  10. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact.rb +0 -0
  11. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_manager_presenter.rb +0 -0
  12. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_repository.rb +24 -99
  13. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/login.rb +0 -0
  14. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe.rb +0 -0
  15. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/board.rb +0 -0
  16. data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/cell.rb +0 -0
  17. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_browser.rb +0 -0
  18. data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +63 -0
  19. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed.rb +0 -0
  20. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed/contact.rb +0 -0
  21. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +155 -0
  22. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +86 -0
  23. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_multi_selection.rb +0 -0
  24. data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_single_selection.rb +0 -0
  25. data/lib/glimmer-dsl-opal/samples/hello/hello_tab.rb +50 -0
  26. data/lib/glimmer-dsl-opal/samples/hello/hello_world.rb +29 -0
  27. data/lib/{jquery.js → glimmer-dsl-opal/vendor/jquery.js} +0 -0
  28. data/lib/glimmer/data_binding/ext/observable_model.rb +1 -1
  29. data/lib/glimmer/dsl/opal/async_exec_expression.rb +2 -2
  30. data/lib/glimmer/dsl/opal/color_expression.rb +38 -0
  31. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +57 -0
  32. data/lib/glimmer/dsl/opal/dsl.rb +7 -0
  33. data/lib/glimmer/dsl/opal/font_expression.rb +47 -0
  34. data/lib/glimmer/dsl/opal/property_expression.rb +5 -2
  35. data/lib/glimmer/dsl/opal/rgb_expression.rb +32 -0
  36. data/lib/glimmer/dsl/opal/rgba_expression.rb +32 -0
  37. data/lib/glimmer/dsl/opal/swt_expression.rb +46 -0
  38. data/lib/glimmer/dsl/opal/widget_expression.rb +2 -1
  39. data/lib/glimmer/dsl/opal/widget_listener_expression.rb +16 -3
  40. data/lib/glimmer/swt.rb +499 -0
  41. data/lib/glimmer/swt/browser_proxy.rb +1 -1
  42. data/lib/glimmer/swt/button_proxy.rb +2 -2
  43. data/lib/glimmer/swt/color_proxy.rb +119 -0
  44. data/lib/glimmer/swt/combo_proxy.rb +10 -9
  45. data/lib/glimmer/swt/composite_proxy.rb +8 -8
  46. data/lib/glimmer/{opal → swt}/display_proxy.rb +3 -1
  47. data/lib/glimmer/swt/fill_layout_proxy.rb +84 -0
  48. data/lib/glimmer/swt/font_proxy.rb +79 -0
  49. data/lib/glimmer/swt/grid_layout_proxy.rb +34 -4
  50. data/lib/glimmer/swt/label_proxy.rb +7 -3
  51. data/lib/glimmer/swt/layout_proxy.rb +15 -13
  52. data/lib/glimmer/swt/list_proxy.rb +17 -12
  53. data/lib/glimmer/swt/message_box_proxy.rb +4 -7
  54. data/lib/glimmer/swt/row_layout_proxy.rb +105 -0
  55. data/lib/glimmer/swt/shell_proxy.rb +32 -22
  56. data/lib/glimmer/swt/style_constantizable.rb +154 -0
  57. data/lib/glimmer/swt/swt_proxy.rb +53 -0
  58. data/lib/glimmer/swt/tab_folder_proxy.rb +8 -8
  59. data/lib/glimmer/swt/tab_item_proxy.rb +15 -32
  60. data/lib/glimmer/swt/table_proxy.rb +0 -18
  61. data/lib/glimmer/swt/widget_proxy.rb +140 -39
  62. data/lib/glimmer/ui/custom_shell.rb +73 -0
  63. data/lib/glimmer/ui/custom_widget.rb +290 -0
  64. data/lib/glimmer/util/proc_tracker.rb +39 -0
  65. metadata +88 -57
  66. data/lib/glimmer/opal/element_proxy.rb +0 -312
  67. data/lib/samples/elaborate/launch +0 -6
  68. data/lib/samples/hello/hello_combo.rb +0 -34
  69. data/lib/samples/hello/hello_tab.rb +0 -24
  70. data/lib/samples/hello/hello_world.rb +0 -8
  71. data/lib/samples/hello/launch +0 -10
  72. 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: 4149153253dd59829bf590c406ff2e5b18c11a62cbbaf7130877f2046a04d2a1
4
+ data.tar.gz: f82f4d9c0bff2625f1f4ef8bef4be2703789a72aed847d4c851697d916cf48c4
5
5
  SHA512:
6
- metadata.gz: e5a6fd8bb27c826ffbfa8baf5a0ab006f5756125eae25cea4fd08911c65736899520c8bbe1fafa6e1e9941ad1902dc90a62630170a2c0afec9f0420e4ec3911c
7
- data.tar.gz: dfb9b7195d02486125efff51d9abb1c3c14ba62e9450f597d1508418155962eef0e00a7e2149f501de0f5fdf589fc4c71038392b743c42a43b9c83e914264462
6
+ metadata.gz: 202c4686ab1a2bf31377cbe4ee6f173c92318460e0758cb74356132323c571b381f3bd69d0d47933ac44c54a79fd24520ce7c2e1ffa1412db903ae2c27ce259b
7
+ data.tar.gz: 182085ad652639b3d83b9853bf993702839cb8066074b92e5377b5b8aa1998d659d925ef0d1f5cac0c659241bd97cf7fe109d2008142e0f5b34165f49e93bc67
@@ -1,5 +1,14 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.2.0
4
+
5
+ - Color support
6
+ - Font support
7
+ - Custom Widget Support
8
+ - Hello, Custom Widget! sample
9
+ - Updated Hello, Combo! sample to match the latest changes in Glimmer DSL for SWT
10
+ - `SWT` full re-implementation in Opal as `Glimmer::SWT` with all the `SWT` style constants
11
+
3
12
  ## 0.1.0
4
13
 
5
14
  - Code redesign to better match the glimmer-dsl-swt APIs
data/README.md CHANGED
@@ -1,18 +1,14 @@
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.2.0 (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 even 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 for the web with standard CSS by web designers.
14
8
 
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):
9
+ 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.
10
+
11
+ 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):
16
12
  - [Hello, World!](#hello-world)
17
13
  - [Hello, Combo!](#hello-combo)
18
14
  - [Hello, Computed!](#hello-computed)
@@ -20,12 +16,14 @@ NOTE: Alpha Version 0.1.0 only supports bare-minimum capabilities for the follow
20
16
  - [Hello, List Multi Selection!](#hello-list-multi-selection)
21
17
  - [Hello, Browser!](#hello-browser)
22
18
  - [Hello, Tab!](#hello-tab)
19
+ - [Hello, Custom Widget!](#hello-custom-widget)
23
20
  - [Login](#login)
24
21
  - [Tic Tac Toe](#tic-tac-toe)
25
22
  - [Contact Manager](#contact-manager)
26
23
 
27
24
  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)
25
+ - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
26
+ - [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
29
27
  - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
30
28
  - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
31
29
 
@@ -33,6 +31,7 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
33
31
 
34
32
  The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
35
33
 
34
+ Widgets:
36
35
  - `shell`
37
36
  - `label`
38
37
  - `combo`
@@ -45,19 +44,31 @@ The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glim
45
44
  - `table`
46
45
  - `table_column`
47
46
  - `message_box`
47
+
48
+ Graphics:
49
+ - `color`
50
+ - `font`
51
+
52
+ Layouts:
53
+ - `grid_layout`
54
+ - `row_layout`
55
+ - `fill_layout`
56
+ - `layout_data`
57
+
58
+ Data-Binding/Observers:
59
+ - `bind`
60
+ - `observe`
48
61
  - `on_widget_selected`
49
62
  - `on_modify_text`
50
- - `observe`
51
- - `bind`
63
+
64
+ Event loop:
52
65
  - `async_exec`
53
- - `grid_layout`
54
- - `layout_data`
55
66
 
56
67
  ## Pre-requisites
57
68
 
58
69
  - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
59
70
  - 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)
71
+ - 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
72
 
62
73
  ## Setup
63
74
 
@@ -75,10 +86,11 @@ Add the following to `Gemfile`:
75
86
 
76
87
  ```
77
88
  gem 'opal-rails', '~> 1.1.2'
78
- gem 'opal-async', '~> 1.1.0'
89
+ gem 'opal-async', '~> 1.1.1'
79
90
  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
91
+ gem 'glimmer-dsl-opal', '~> 0.2.0', require: false
92
+ gem 'glimmer-dsl-xml', '~> 1.0.0', require: false
93
+ gem 'glimmer-dsl-css', '~> 1.0.0', require: false
82
94
 
83
95
  ```
84
96
 
@@ -92,21 +104,37 @@ Opal.use_gem 'glimmer-dsl-opal'
92
104
  Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
93
105
 
94
106
  ```ruby
95
- require 'glimmer-dsl-opal' # brings opal and opal browser too
107
+ require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
96
108
  ```
97
109
 
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.
110
+ Run:
99
111
 
100
- ## Samples
112
+ ```
113
+ rails g scaffold welcome
114
+ ```
115
+
116
+ Modify `config/routes.rb`:
117
+
118
+ ```ruby
119
+ root to: 'welcome#index'
120
+ ```
101
121
 
102
- Make sure to add any `require` statements or code below inside:
122
+ 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).
103
123
 
104
124
  ```ruby
105
125
  Document.ready? do
106
- # Code goes here.
126
+ # require-statement/code goes here.
107
127
  end
108
128
  ```
109
129
 
130
+ ## Samples
131
+
132
+ 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)
133
+
134
+ 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:
135
+
136
+ [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
137
+
110
138
  ### Hello Samples
111
139
 
112
140
  #### Hello, World!
@@ -114,7 +142,7 @@ end
114
142
  Add the following require statement to `app/assets/javascripts/application.rb`
115
143
 
116
144
  ```ruby
117
- require 'samples/hello/hello_world'
145
+ require 'glimmer-dsl-opal/samples/hello/hello_world'
118
146
  ```
119
147
 
120
148
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -152,7 +180,7 @@ You should see "Hello, World!"
152
180
  Add the following require statement to `app/assets/javascripts/application.rb`
153
181
 
154
182
  ```ruby
155
- require 'samples/hello/hello_combo'
183
+ require 'glimmer-dsl-opal/samples/hello/hello_combo'
156
184
  ```
157
185
 
158
186
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -160,32 +188,40 @@ Or add the Glimmer code directly if you prefer to play around with it:
160
188
  ```ruby
161
189
  class Person
162
190
  attr_accessor :country, :country_options
163
-
191
+
164
192
  def initialize
165
- self.country_options=["", "Canada", "US", "Mexico"]
166
- self.country = "Canada"
193
+ self.country_options = ['', 'Canada', 'US', 'Mexico']
194
+ reset_country
167
195
  end
168
196
 
169
197
  def reset_country
170
- self.country = "Canada"
198
+ self.country = 'Canada'
171
199
  end
172
200
  end
173
201
 
174
202
  class HelloCombo
175
203
  include Glimmer
204
+
176
205
  def launch
177
206
  person = Person.new
207
+
178
208
  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
- }
209
+ row_layout(:vertical) {
210
+ pack false
211
+ }
212
+
213
+ text 'Hello, Combo!'
214
+
215
+ combo(:read_only) {
216
+ selection bind(person, :country)
217
+ }
218
+
219
+ button {
220
+ text 'Reset Selection'
221
+
222
+ on_widget_selected do
223
+ person.reset_country
224
+ end
189
225
  }
190
226
  }.open
191
227
  end
@@ -216,7 +252,7 @@ Add the following require statement to `app/assets/javascripts/application.rb`
216
252
 
217
253
 
218
254
  ```ruby
219
- require 'samples/hello/hello_computed'
255
+ require 'glimmer-dsl-opal/samples/hello/hello_computed'
220
256
  ```
221
257
 
222
258
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -335,7 +371,7 @@ Add the following require statement to `app/assets/javascripts/application.rb`
335
371
 
336
372
 
337
373
  ```ruby
338
- require 'samples/hello/hello_list_single_selection'
374
+ require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
339
375
  ```
340
376
 
341
377
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -378,7 +414,7 @@ HelloListSingleSelection.new.launch
378
414
  ```
379
415
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
380
416
 
381
- ![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-single-selection.png)
417
+ ![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
418
 
383
419
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
384
420
 
@@ -398,7 +434,7 @@ You should see "Hello, List Single Selection!"
398
434
  Add the following require statement to `app/assets/javascripts/application.rb`
399
435
 
400
436
  ```ruby
401
- require 'samples/hello/hello_list_multi_selection'
437
+ require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
402
438
  ```
403
439
 
404
440
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -451,7 +487,7 @@ HelloListMultiSelection.new.launch
451
487
  ```
452
488
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
453
489
 
454
- ![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-multi-selection.png)
490
+ ![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
491
 
456
492
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
457
493
 
@@ -471,7 +507,7 @@ You should see "Hello, List Multi Selection!"
471
507
  Add the following require statement to `app/assets/javascripts/application.rb`
472
508
 
473
509
  ```ruby
474
- require 'samples/hello/hello_browser'
510
+ require 'glimmer-dsl-opal/samples/hello/hello_browser'
475
511
  ```
476
512
 
477
513
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -488,7 +524,7 @@ shell {
488
524
  ```
489
525
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
490
526
 
491
- ![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-browser.png)
527
+ ![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-browser.png)
492
528
 
493
529
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
494
530
 
@@ -508,7 +544,7 @@ You should see "Hello, Browser!"
508
544
  Add the following require statement to `app/assets/javascripts/application.rb`
509
545
 
510
546
  ```ruby
511
- require 'samples/hello/hello_tab'
547
+ require 'glimmer-dsl-opal/samples/hello/hello_tab'
512
548
  ```
513
549
 
514
550
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -541,8 +577,8 @@ HelloTab.new.launch
541
577
  ```
542
578
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
543
579
 
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)
580
+ ![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-english.png)
581
+ ![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-french.png)
546
582
 
547
583
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
548
584
 
@@ -558,6 +594,100 @@ You should see "Hello, Tab!"
558
594
  ![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
559
595
  ![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
560
596
 
597
+ #### Hello, Custom Widget!
598
+
599
+ Add the following require statement to `app/assets/javascripts/application.rb`
600
+
601
+ ```ruby
602
+ require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
603
+ ```
604
+
605
+ Or add the Glimmer code directly if you prefer to play around with it:
606
+
607
+ ```ruby
608
+ # This class declares a `greeting_label` custom widget (by convention)
609
+ class GreetingLabel
610
+ include Glimmer::UI::CustomWidget
611
+
612
+ # multiple options without default values
613
+ options :name, :colors
614
+
615
+ # single option with default value
616
+ option :greeting, default: 'Hello'
617
+
618
+ # internal attribute (not a custom widget option)
619
+ attr_accessor :color
620
+
621
+ before_body {
622
+ @font = {height: 24, style: :bold}
623
+ @color = :black
624
+ }
625
+
626
+ after_body {
627
+ return if colors.nil?
628
+
629
+ Thread.new {
630
+ colors.cycle { |color|
631
+ async_exec {
632
+ self.color = color
633
+ }
634
+ sleep(1)
635
+ }
636
+ }
637
+ }
638
+
639
+ body {
640
+ # pass received swt_style through to label to customize (e.g. :center to center text)
641
+ label(swt_style) {
642
+ text "#{greeting}, #{name}!"
643
+ font @font
644
+ foreground bind(self, :color)
645
+ }
646
+ }
647
+
648
+ end
649
+
650
+ # including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `greeting_label` custom widget
651
+ include Glimmer
652
+
653
+ shell {
654
+ fill_layout :vertical
655
+
656
+ minimum_size 215, 215
657
+ text 'Hello, Custom Widget!'
658
+
659
+ # custom widget options are passed in a hash
660
+ greeting_label(name: 'Sean')
661
+
662
+ # pass :center SWT style followed by custom widget options hash
663
+ greeting_label(:center, name: 'Laura', greeting: 'Aloha') #
664
+
665
+ greeting_label(:right, name: 'Rick') {
666
+ # you can nest attributes under custom widgets just like any standard widget
667
+ foreground :red
668
+ }
669
+
670
+ # the colors option cycles between colors for the label foreground every second
671
+ greeting_label(:center, name: 'Mary', greeting: 'Aloha', colors: [:red, :dark_green, :blue])
672
+ }.open
673
+ ```
674
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
675
+
676
+ ![Glimmer DSL for SWT Hello Custom Widget](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-widget.gif)
677
+
678
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
679
+
680
+ Start the Rails server:
681
+ ```
682
+ rails s
683
+ ```
684
+
685
+ Visit `http://localhost:3000`
686
+
687
+ You should see "Hello, Custom Widget!"
688
+
689
+ ![Glimmer DSL for Opal Hello Custom Widget](images/glimmer-dsl-opal-hello-custom-widget.gif)
690
+
561
691
  ### Elaborate Samples
562
692
 
563
693
  #### Login
@@ -565,7 +695,7 @@ You should see "Hello, Tab!"
565
695
  Add the following require statement to `app/assets/javascripts/application.rb`
566
696
 
567
697
  ```ruby
568
- require 'samples/elaborate/login'
698
+ require 'glimmer-dsl-opal/samples/elaborate/login'
569
699
  ```
570
700
 
571
701
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -661,9 +791,9 @@ Login.new.launch
661
791
  ```
662
792
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
663
793
 
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)
794
+ ![Glimmer DSL for SWT Login](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login.png)
795
+ ![Glimmer DSL for SWT Login Filled In](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login-filled-in.png)
796
+ ![Glimmer DSL for SWT Login Logged In](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login-logged-in.png)
667
797
 
668
798
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
669
799
 
@@ -685,7 +815,7 @@ You should see "Login" dialog
685
815
  Add the following require statement to `app/assets/javascripts/application.rb`
686
816
 
687
817
  ```ruby
688
- require 'samples/elaborate/tic_tac_toe'
818
+ require 'glimmer-dsl-opal/samples/elaborate/tic_tac_toe'
689
819
  ```
690
820
 
691
821
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -896,9 +1026,9 @@ TicTacToe.new.open
896
1026
  ```
897
1027
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
898
1028
 
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)
1029
+ ![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe.png)
1030
+ ![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)
1031
+ ![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
1032
 
903
1033
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
904
1034
 
@@ -920,7 +1050,7 @@ You should see "Tic Tac Toe"
920
1050
  Add the following require statement to `app/assets/javascripts/application.rb`
921
1051
 
922
1052
  ```ruby
923
- require 'samples/elaborate/contact_manager'
1053
+ require 'glimmer-dsl-opal/samples/elaborate/contact_manager'
924
1054
  ```
925
1055
 
926
1056
  Or add the Glimmer code directly if you prefer to play around with it:
@@ -1041,104 +1171,6 @@ class ContactManager
1041
1171
  Jason
1042
1172
  Emma
1043
1173
  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
1174
  ]
1143
1175
  NAMES_LAST = %w[
1144
1176
  Smith
@@ -1153,7 +1185,7 @@ class ContactManager
1153
1185
  Taylor
1154
1186
  ]
1155
1187
  def initialize(contacts = nil)
1156
- @contacts = contacts || 1000.times.map do |n|
1188
+ @contacts = contacts || 100.times.map do |n|
1157
1189
  random_first_name_index = (rand*NAMES_FIRST.size).to_i
1158
1190
  random_last_name_index = (rand*NAMES_LAST.size).to_i
1159
1191
  first_name = NAMES_FIRST[random_first_name_index]
@@ -1314,23 +1346,23 @@ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObt
1314
1346
 
1315
1347
  Glimmer DSL for SWT Contact Manager
1316
1348
 
1317
- ![Glimmer DSL for SWT Contact Manager](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager.png)
1349
+ ![Glimmer DSL for SWT Contact Manager](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager.png)
1318
1350
 
1319
1351
  Glimmer DSL for SWT Contact Manager Find
1320
1352
 
1321
- ![Glimmer DSL for SWT Contact Manager Find](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-find.png)
1353
+ ![Glimmer DSL for SWT Contact Manager Find](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-find.png)
1322
1354
 
1323
1355
  Glimmer DSL for SWT Contact Manager Edit Started
1324
1356
 
1325
- ![Glimmer DSL for SWT Contact Manager Edit Started](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-started.png)
1357
+ ![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
1358
 
1327
1359
  Glimmer DSL for SWT Contact Manager Edit In Progress
1328
1360
 
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)
1361
+ ![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
1362
 
1331
1363
  Glimmer DSL for SWT Contact Manager Edit Done
1332
1364
 
1333
- ![Glimmer DSL for SWT Contact Manager Edit Done](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-done.png)
1365
+ ![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
1366
 
1335
1367
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
1336
1368
 
@@ -1363,10 +1395,6 @@ Glimmer DSL for Opal Contact Manager Edit Done
1363
1395
 
1364
1396
  ![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
1365
1397
 
1366
- ## Sample App
1367
-
1368
- [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
1369
-
1370
1398
  ## Help
1371
1399
 
1372
1400
  ### Issues