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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +9 -0
- data/README.md +195 -167
- data/VERSION +1 -1
- data/lib/glimmer-dsl-opal.rb +24 -7
- data/lib/glimmer-dsl-opal/ext/exception.rb +5 -0
- data/lib/glimmer-dsl-opal/missing/net/http.rb +17 -0
- data/lib/glimmer-dsl-opal/missing/uri.rb +26 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_manager_presenter.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_repository.rb +24 -99
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/login.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/board.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/cell.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_browser.rb +0 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +63 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed/contact.rb +0 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +155 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +86 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_multi_selection.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_single_selection.rb +0 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_tab.rb +50 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_world.rb +29 -0
- data/lib/{jquery.js → glimmer-dsl-opal/vendor/jquery.js} +0 -0
- data/lib/glimmer/data_binding/ext/observable_model.rb +1 -1
- data/lib/glimmer/dsl/opal/async_exec_expression.rb +2 -2
- data/lib/glimmer/dsl/opal/color_expression.rb +38 -0
- data/lib/glimmer/dsl/opal/custom_widget_expression.rb +57 -0
- data/lib/glimmer/dsl/opal/dsl.rb +7 -0
- data/lib/glimmer/dsl/opal/font_expression.rb +47 -0
- data/lib/glimmer/dsl/opal/property_expression.rb +5 -2
- data/lib/glimmer/dsl/opal/rgb_expression.rb +32 -0
- data/lib/glimmer/dsl/opal/rgba_expression.rb +32 -0
- data/lib/glimmer/dsl/opal/swt_expression.rb +46 -0
- data/lib/glimmer/dsl/opal/widget_expression.rb +2 -1
- data/lib/glimmer/dsl/opal/widget_listener_expression.rb +16 -3
- data/lib/glimmer/swt.rb +499 -0
- data/lib/glimmer/swt/browser_proxy.rb +1 -1
- data/lib/glimmer/swt/button_proxy.rb +2 -2
- data/lib/glimmer/swt/color_proxy.rb +119 -0
- data/lib/glimmer/swt/combo_proxy.rb +10 -9
- data/lib/glimmer/swt/composite_proxy.rb +8 -8
- data/lib/glimmer/{opal → swt}/display_proxy.rb +3 -1
- data/lib/glimmer/swt/fill_layout_proxy.rb +84 -0
- data/lib/glimmer/swt/font_proxy.rb +79 -0
- data/lib/glimmer/swt/grid_layout_proxy.rb +34 -4
- data/lib/glimmer/swt/label_proxy.rb +7 -3
- data/lib/glimmer/swt/layout_proxy.rb +15 -13
- data/lib/glimmer/swt/list_proxy.rb +17 -12
- data/lib/glimmer/swt/message_box_proxy.rb +4 -7
- data/lib/glimmer/swt/row_layout_proxy.rb +105 -0
- data/lib/glimmer/swt/shell_proxy.rb +32 -22
- data/lib/glimmer/swt/style_constantizable.rb +154 -0
- data/lib/glimmer/swt/swt_proxy.rb +53 -0
- data/lib/glimmer/swt/tab_folder_proxy.rb +8 -8
- data/lib/glimmer/swt/tab_item_proxy.rb +15 -32
- data/lib/glimmer/swt/table_proxy.rb +0 -18
- data/lib/glimmer/swt/widget_proxy.rb +140 -39
- data/lib/glimmer/ui/custom_shell.rb +73 -0
- data/lib/glimmer/ui/custom_widget.rb +290 -0
- data/lib/glimmer/util/proc_tracker.rb +39 -0
- metadata +88 -57
- data/lib/glimmer/opal/element_proxy.rb +0 -312
- data/lib/samples/elaborate/launch +0 -6
- data/lib/samples/hello/hello_combo.rb +0 -34
- data/lib/samples/hello/hello_tab.rb +0 -24
- data/lib/samples/hello/hello_world.rb +0 -8
- data/lib/samples/hello/launch +0 -10
- data/lib/samples/launch +0 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4149153253dd59829bf590c406ff2e5b18c11a62cbbaf7130877f2046a04d2a1
|
4
|
+
data.tar.gz: f82f4d9c0bff2625f1f4ef8bef4be2703789a72aed847d4c851697d916cf48c4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 202c4686ab1a2bf31377cbe4ee6f173c92318460e0758cb74356132323c571b381f3bd69d0d47933ac44c54a79fd24520ce7c2e1ffa1412db903ae2c27ce259b
|
7
|
+
data.tar.gz: 182085ad652639b3d83b9853bf993702839cb8066074b92e5377b5b8aa1998d659d925ef0d1f5cac0c659241bd97cf7fe109d2008142e0f5b34165f49e93bc67
|
data/CHANGELOG.md
CHANGED
@@ -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
|
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
|
-
|
5
|
+
### You can finally live in pure Ruby land even on the web!
|
6
6
|
|
7
|
-
Glimmer DSL for Opal
|
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
|
-
|
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
|
-
|
51
|
-
|
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
|
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.
|
89
|
+
gem 'opal-async', '~> 1.1.1'
|
79
90
|
gem 'opal-jquery', '~> 0.4.4'
|
80
|
-
gem 'glimmer-dsl-opal', '~> 0.
|
81
|
-
gem 'glimmer-dsl-xml', '~>
|
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
|
107
|
+
require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
|
96
108
|
```
|
97
109
|
|
98
|
-
|
110
|
+
Run:
|
99
111
|
|
100
|
-
|
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
|
-
|
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
|
-
#
|
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=[
|
166
|
-
|
193
|
+
self.country_options = ['', 'Canada', 'US', 'Mexico']
|
194
|
+
reset_country
|
167
195
|
end
|
168
196
|
|
169
197
|
def reset_country
|
170
|
-
self.country =
|
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
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
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 ||
|
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
|