glimmer-dsl-swt 4.18.3.5 → 4.18.4.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 +14 -0
- data/README.md +651 -615
- data/VERSION +1 -1
- data/glimmer-dsl-swt.gemspec +5 -3
- data/lib/glimmer/data_binding/widget_binding.rb +1 -1
- data/lib/glimmer/swt/custom/code_text.rb +114 -91
- data/lib/glimmer/swt/custom/drawable.rb +1 -4
- data/lib/glimmer/swt/custom/shape.rb +50 -6
- data/lib/glimmer/swt/display_proxy.rb +11 -0
- data/lib/glimmer/swt/image_proxy.rb +11 -0
- data/lib/glimmer/swt/shell_proxy.rb +3 -0
- data/lib/glimmer/swt/widget_proxy.rb +5 -0
- data/samples/elaborate/meta_sample.rb +1 -1
- data/samples/elaborate/meta_sample/meta_sample_logo.png +0 -0
- data/samples/elaborate/tetris/model/game.rb +1 -1
- data/samples/hello/hello_canvas.rb +7 -6
- data/samples/hello/hello_canvas_animation.rb +2 -2
- data/samples/hello/hello_code_text.rb +24 -16
- data/samples/hello/hello_table.rb +6 -4
- data/samples/hello/hello_table/baseball_park.png +0 -0
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e3d59d0d54c7528a521c07263fa47768f172e49ea2d5bee86c376d0425b8a5f8
|
|
4
|
+
data.tar.gz: 0da445293890975f23fbf5cce1af49ea4e8b54e2d86a99b6d0f4cfa7fe6559bd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a51c136d719ebe688209fa1a3bf8509dee32f1c90d535b06c08b6f5d835a0872c9487f437f06c7985007c210bf7aef3ecb29c6a11819e9ee48ffed77ea5ee40f
|
|
7
|
+
data.tar.gz: 8c285b55812b44969dbe3ab527b1ad1d5cc2325d2455cdf676412bfdc41f1094ce7402c3f0f5181546be9d539299f5c669de553c0b04339c3ffa3ef5c81c3fbb
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
### 4.18.4.0
|
|
4
|
+
|
|
5
|
+
- Extract line numbers part of text_editor widget from Gladiator into Glimmer code_text and make it an option (e.g. lines: true or lines: {width: 4})
|
|
6
|
+
- code_text support select all via CMD+A
|
|
7
|
+
- code_text support end of line via CTRL+E and beginning of line via CTRL+A
|
|
8
|
+
- Support automatic inferrence of Canvas Shape DSL gradient option (just like fill option)
|
|
9
|
+
- Support automatic inferrence of Canvas Shape DSL round option (just like fill option)
|
|
10
|
+
- Add a background image to Hello, Table! Sample + font/color changes
|
|
11
|
+
- Make Canvas patterns auto-reused and auto-disposed when canvas is disposed
|
|
12
|
+
- Make Canvas images auto-dispose themselves when canvas is disposed
|
|
13
|
+
- Update Hello, Code Text!
|
|
14
|
+
- Change Glimmer Tetris Sample up arrow default to rotate left
|
|
15
|
+
- Fix issue with "undefined method lex for nil:NilClass" in `code_text`
|
|
16
|
+
|
|
3
17
|
### 4.18.3.5
|
|
4
18
|
|
|
5
19
|
- Add `write_on_cancel: true` option for TableProxy#edit_table_item to make cancel behave just like save for special cases where you cannot cancel except the edit mode itself
|
data/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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 SWT 4.18.
|
|
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 SWT 4.18.4.0
|
|
2
2
|
## JRuby Desktop Development GUI Framework
|
|
3
3
|
[](http://badge.fury.io/rb/glimmer-dsl-swt)
|
|
4
4
|
[](https://travis-ci.com/github/AndyObtiva/glimmer-dsl-swt)
|
|
@@ -28,9 +28,10 @@ Glimmer DSL gems:
|
|
|
28
28
|
|
|
29
29
|
## Examples
|
|
30
30
|
|
|
31
|
-
### Hello, World!
|
|
31
|
+
### Hello, World! Sample
|
|
32
|
+
|
|
33
|
+
Glimmer GUI DSL code (from [samples/hello/hello_world.rb](samples/hello/hello_world.rb)):
|
|
32
34
|
|
|
33
|
-
Glimmer code (from [samples/hello/hello_world.rb](samples/hello/hello_world.rb)):
|
|
34
35
|
```ruby
|
|
35
36
|
include Glimmer
|
|
36
37
|
|
|
@@ -52,169 +53,163 @@ Glimmer app:
|
|
|
52
53
|
|
|
53
54
|
|
|
54
55
|
|
|
55
|
-
|
|
56
|
+
Learn more about [Hello, World!](#hello-world).
|
|
57
|
+
|
|
58
|
+
### Hello, Table! Sample
|
|
56
59
|
|
|
57
|
-
Glimmer code (from [samples/
|
|
60
|
+
Glimmer GUI DSL code (from [samples/hello/hello_table.rb](samples/hello/hello_table.rb)):
|
|
58
61
|
|
|
59
62
|
```ruby
|
|
60
|
-
# ...
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
63
|
+
# ... model code precedes
|
|
64
|
+
shell {
|
|
65
|
+
grid_layout
|
|
66
|
+
|
|
67
|
+
text 'Hello, Table!'
|
|
68
|
+
background_image File.expand_path('hello_table/baseball_park.png', __dir__)
|
|
69
|
+
|
|
70
|
+
label {
|
|
71
|
+
layout_data :center, :center, true, false
|
|
72
|
+
|
|
73
|
+
text 'BASEBALL PLAYOFF SCHEDULE'
|
|
74
|
+
foreground rgb(94, 107, 103)
|
|
75
|
+
font name: 'Optima', height: 38, style: :bold
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
combo(:read_only) {
|
|
79
|
+
layout_data :center, :center, true, false
|
|
80
|
+
selection bind(BaseballGame, :playoff_type)
|
|
81
|
+
font height: 14
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
table(:editable) { |table_proxy|
|
|
85
|
+
layout_data :fill, :fill, true, true
|
|
86
|
+
|
|
87
|
+
table_column {
|
|
88
|
+
text 'Game Date'
|
|
89
|
+
width 150
|
|
90
|
+
sort_property :date # ensure sorting by real date value (not `game_date` string specified in items below)
|
|
91
|
+
editor :date_drop_down, property: :date_time
|
|
92
|
+
}
|
|
93
|
+
table_column {
|
|
94
|
+
text 'Game Time'
|
|
95
|
+
width 150
|
|
96
|
+
sort_property :time # ensure sorting by real time value (not `game_time` string specified in items below)
|
|
97
|
+
editor :time, property: :date_time
|
|
98
|
+
}
|
|
99
|
+
table_column {
|
|
100
|
+
text 'Ballpark'
|
|
101
|
+
width 180
|
|
102
|
+
editor :none
|
|
103
|
+
}
|
|
104
|
+
table_column {
|
|
105
|
+
text 'Home Team'
|
|
106
|
+
width 150
|
|
107
|
+
editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
|
|
108
|
+
}
|
|
109
|
+
table_column {
|
|
110
|
+
text 'Away Team'
|
|
111
|
+
width 150
|
|
112
|
+
editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
|
|
113
|
+
}
|
|
114
|
+
table_column {
|
|
115
|
+
text 'Promotion'
|
|
116
|
+
width 150
|
|
117
|
+
# default text editor is used here
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
# Data-bind table items (rows) to a model collection property, specifying column properties ordering per nested model
|
|
121
|
+
items bind(BaseballGame, :schedule), column_properties(:game_date, :game_time, :ballpark, :home_team, :away_team, :promotion)
|
|
122
|
+
|
|
123
|
+
# Data-bind table selection
|
|
124
|
+
selection bind(BaseballGame, :selected_game)
|
|
125
|
+
|
|
126
|
+
# Default initial sort property
|
|
127
|
+
sort_property :date
|
|
128
|
+
|
|
129
|
+
# Sort by these additional properties after handling sort by the column the user clicked
|
|
130
|
+
additional_sort_properties :date, :time, :home_team, :away_team, :ballpark, :promotion
|
|
131
|
+
|
|
132
|
+
menu {
|
|
133
|
+
menu_item {
|
|
134
|
+
text 'Book'
|
|
135
|
+
|
|
136
|
+
on_widget_selected {
|
|
137
|
+
book_selected_game
|
|
78
138
|
}
|
|
79
139
|
}
|
|
80
140
|
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
button {
|
|
144
|
+
text 'Book Selected Game'
|
|
145
|
+
layout_data :center, :center, true, false
|
|
146
|
+
font height: 14
|
|
147
|
+
enabled bind(BaseballGame, :selected_game)
|
|
148
|
+
|
|
149
|
+
on_widget_selected {
|
|
150
|
+
book_selected_game
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}.open
|
|
81
154
|
# ...
|
|
82
155
|
```
|
|
83
156
|
|
|
84
157
|
Run via `glimmer samples` or directly:
|
|
85
158
|
|
|
86
159
|
```
|
|
87
|
-
glimmer samples/
|
|
160
|
+
glimmer samples/hello/hello_table.rb
|
|
88
161
|
```
|
|
89
162
|
|
|
90
|
-
Glimmer
|
|
163
|
+
Glimmer App:
|
|
91
164
|
|
|
92
|
-
|
|
166
|
+
|
|
167
|
+
Learn more about [Hello, Table!](#hello-table).
|
|
93
168
|
|
|
94
|
-
###
|
|
169
|
+
### Tetris
|
|
95
170
|
|
|
96
|
-
Glimmer code (from [samples/elaborate/
|
|
171
|
+
Glimmer GUI DSL code (from [samples/elaborate/tetris.rb](samples/elaborate/tetris.rb)):
|
|
97
172
|
|
|
98
173
|
```ruby
|
|
99
|
-
# ...
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
label {
|
|
113
|
-
layout_data :right, :center, false, false
|
|
114
|
-
text "First &Name: "
|
|
115
|
-
font height: 16
|
|
116
|
-
}
|
|
117
|
-
text {
|
|
118
|
-
layout_data :fill, :center, true, false
|
|
119
|
-
text bind(@contact_manager_presenter, :first_name)
|
|
120
|
-
on_key_pressed {|key_event|
|
|
121
|
-
@contact_manager_presenter.find if key_event.keyCode == swt(:cr)
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
label {
|
|
126
|
-
layout_data :right, :center, false, false
|
|
127
|
-
text "&Last Name: "
|
|
128
|
-
font height: 16
|
|
129
|
-
}
|
|
130
|
-
text {
|
|
131
|
-
layout_data :fill, :center, true, false
|
|
132
|
-
text bind(@contact_manager_presenter, :last_name)
|
|
133
|
-
on_key_pressed {|key_event|
|
|
134
|
-
@contact_manager_presenter.find if key_event.keyCode == swt(:cr)
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
label {
|
|
139
|
-
layout_data :right, :center, false, false
|
|
140
|
-
text "&Email: "
|
|
141
|
-
font height: 16
|
|
142
|
-
}
|
|
143
|
-
text {
|
|
144
|
-
layout_data :fill, :center, true, false
|
|
145
|
-
text bind(@contact_manager_presenter, :email)
|
|
146
|
-
on_key_pressed {|key_event|
|
|
147
|
-
@contact_manager_presenter.find if key_event.keyCode == swt(:cr)
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
composite {
|
|
152
|
-
row_layout {
|
|
153
|
-
margin_width 0
|
|
154
|
-
margin_height 0
|
|
155
|
-
}
|
|
156
|
-
layout_data(:right, :center, false, false) {
|
|
157
|
-
horizontal_span 2
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
button {
|
|
161
|
-
text "&Find"
|
|
162
|
-
on_widget_selected { @contact_manager_presenter.find }
|
|
163
|
-
on_key_pressed {|key_event|
|
|
164
|
-
@contact_manager_presenter.find if key_event.keyCode == swt(:cr)
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
button {
|
|
169
|
-
text "&List All"
|
|
170
|
-
on_widget_selected { @contact_manager_presenter.list }
|
|
171
|
-
on_key_pressed {|key_event|
|
|
172
|
-
@contact_manager_presenter.list if key_event.keyCode == swt(:cr)
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}
|
|
174
|
+
# ... more code resides in other files (navigate sample files to learn more)
|
|
175
|
+
shell(:no_resize) {
|
|
176
|
+
grid_layout {
|
|
177
|
+
num_columns 2
|
|
178
|
+
make_columns_equal_width false
|
|
179
|
+
margin_width 0
|
|
180
|
+
margin_height 0
|
|
181
|
+
horizontal_spacing 0
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
text 'Glimmer Tetris'
|
|
185
|
+
minimum_size 475, 500
|
|
186
|
+
image tetris_icon
|
|
177
187
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
table_column {
|
|
191
|
-
text "Last Name"
|
|
192
|
-
width 80
|
|
193
|
-
}
|
|
194
|
-
table_column {
|
|
195
|
-
text "Email"
|
|
196
|
-
width 200
|
|
197
|
-
}
|
|
198
|
-
items bind(@contact_manager_presenter, :results),
|
|
199
|
-
column_properties(:first_name, :last_name, :email)
|
|
200
|
-
on_mouse_up { |event|
|
|
201
|
-
table_proxy.edit_table_item(event.table_item, event.column_index)
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
}.open
|
|
188
|
+
tetris_menu_bar(game: game)
|
|
189
|
+
|
|
190
|
+
playfield(game_playfield: game.playfield, playfield_width: playfield_width, playfield_height: playfield_height, block_size: BLOCK_SIZE)
|
|
191
|
+
|
|
192
|
+
score_lane(game: game, block_size: BLOCK_SIZE) {
|
|
193
|
+
layout_data(:fill, :fill, true, true)
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
on_widget_disposed {
|
|
197
|
+
deregister_observers
|
|
198
|
+
}
|
|
199
|
+
}
|
|
206
200
|
# ...
|
|
207
201
|
```
|
|
208
202
|
|
|
209
203
|
Run via `glimmer samples` or directly:
|
|
210
204
|
|
|
211
205
|
```
|
|
212
|
-
glimmer samples/elaborate/
|
|
206
|
+
glimmer samples/elaborate/tetris.rb
|
|
213
207
|
```
|
|
214
208
|
|
|
215
|
-
Glimmer
|
|
209
|
+
Glimmer app:
|
|
210
|
+
|
|
211
|
+
|
|
216
212
|
|
|
217
|
-
|
|
218
213
|
|
|
219
214
|
### Desktop Apps Built with Glimmer DSL for SWT
|
|
220
215
|
|
|
@@ -235,9 +230,9 @@ If you see anything that needs to be improved, please do not hesitate to contact
|
|
|
235
230
|
|
|
236
231
|
- [Glimmer (JRuby Desktop Development GUI Framework)](#jruby-desktop-development-gui-framework)
|
|
237
232
|
- [Examples](#examples)
|
|
238
|
-
- [Hello, World!](#hello-world)
|
|
239
|
-
- [
|
|
240
|
-
- [
|
|
233
|
+
- [Hello, World! Sample](#hello-world-sample)
|
|
234
|
+
- [Hello, Table! Sample](#hello-table-sample)
|
|
235
|
+
- [Tetris](#tetris)
|
|
241
236
|
- [Desktop Apps Built with Glimmer DSL for SWT](#desktop-apps-built-with-glimmer-dsl-for-swt)
|
|
242
237
|
- [Table of contents](#table-of-contents)
|
|
243
238
|
- [Background](#background)
|
|
@@ -276,6 +271,8 @@ If you see anything that needs to be improved, please do not hesitate to contact
|
|
|
276
271
|
- [Multi-Threading](#multi-threading)
|
|
277
272
|
- [Menus](#menus)
|
|
278
273
|
- [ScrolledComposite](#scrolledcomposite)
|
|
274
|
+
- [Sash Form Widget](#sash-form-widget)
|
|
275
|
+
- [Browser Widget](#browser-widget)
|
|
279
276
|
- [Widget Styles](#widget-styles)
|
|
280
277
|
- [Explicit SWT Style Bit](#explicit-swt-style-bit)
|
|
281
278
|
- [Negative SWT Style Bits](#negative-swt-style-bits)
|
|
@@ -307,7 +304,12 @@ If you see anything that needs to be improved, please do not hesitate to contact
|
|
|
307
304
|
- [Lifecycle Hooks Example](#lifecycle-hooks-example)
|
|
308
305
|
- [Custom Widget API](#custom-widget-api)
|
|
309
306
|
- [Content/Options Example](#contentoptions-example)
|
|
310
|
-
- [
|
|
307
|
+
- [Custom Widget Gotchas](#custom-widget-gotchas)
|
|
308
|
+
- [Built-In Custom Widgets](#built-in-custom-widgets)
|
|
309
|
+
- [Checkbox Group Custom Widget](#checkbox-group-custom-widget)
|
|
310
|
+
- [Radio Group Custom Widget](#radio-group-custom-widget)
|
|
311
|
+
- [Code Text Custom Widget](#code-text-custom-widget)
|
|
312
|
+
- [Video Custom Widget](#video-custom-widget)
|
|
311
313
|
- [Custom Widget Final Notes](#custom-widget-final-notes)
|
|
312
314
|
- [Custom Shells](#custom-shells)
|
|
313
315
|
- [Drag and Drop](#drag-and-drop)
|
|
@@ -315,12 +317,6 @@ If you see anything that needs to be improved, please do not hesitate to contact
|
|
|
315
317
|
- [Multi-DSL Support](#multi-dsl-support)
|
|
316
318
|
- [Application Menu Items (About/Preferences)](#application-menu-items-aboutpreferences)
|
|
317
319
|
- [App Name and Version](#app-name-and-version)
|
|
318
|
-
- [Checkbox Group Widget](#checkbox-group-widget)
|
|
319
|
-
- [Radio Group Widget](#radio-group-widget)
|
|
320
|
-
- [Code Text Widget](#code-text-widget)
|
|
321
|
-
- [Video Widget](#video-widget)
|
|
322
|
-
- [Sash Form Widget](#sash-form-widget)
|
|
323
|
-
- [Browser Widget](#browser-widget)
|
|
324
320
|
- [Glimmer Configuration](#glimmer-configuration)
|
|
325
321
|
- [logger](#logger)
|
|
326
322
|
- [logging_devices](#loggingdevices)
|
|
@@ -370,9 +366,9 @@ If you see anything that needs to be improved, please do not hesitate to contact
|
|
|
370
366
|
- [Elaborate Samples](#elaborate-samples)
|
|
371
367
|
- [User Profile](#user-profile)
|
|
372
368
|
- [Login](#login)
|
|
373
|
-
- [Tic Tac Toe Sample](#tic-tac-toe
|
|
374
|
-
- [Contact Manager Sample](#contact-manager
|
|
375
|
-
- [Tetris](#tetris)
|
|
369
|
+
- [Tic Tac Toe Sample](#tic-tac-toe)
|
|
370
|
+
- [Contact Manager Sample](#contact-manager)
|
|
371
|
+
- [Glimmer Tetris](#glimmer-tetris)
|
|
376
372
|
- [External Samples](#external-samples)
|
|
377
373
|
- [Glimmer Calculator](#glimmer-calculator)
|
|
378
374
|
- [Gladiator](#gladiator)
|
|
@@ -493,7 +489,7 @@ jgem install glimmer-dsl-swt
|
|
|
493
489
|
|
|
494
490
|
Or this command if you want a specific version:
|
|
495
491
|
```
|
|
496
|
-
jgem install glimmer-dsl-swt -v 4.18.
|
|
492
|
+
jgem install glimmer-dsl-swt -v 4.18.4.0
|
|
497
493
|
|
|
498
494
|
|
|
499
495
|
```
|
|
@@ -513,7 +509,7 @@ Note: if you're using activerecord or activesupport, keep in mind that Glimmer u
|
|
|
513
509
|
|
|
514
510
|
Add the following to `Gemfile`:
|
|
515
511
|
```
|
|
516
|
-
gem 'glimmer-dsl-swt', '~> 4.18.
|
|
512
|
+
gem 'glimmer-dsl-swt', '~> 4.18.4.0
|
|
517
513
|
'
|
|
518
514
|
```
|
|
519
515
|
|
|
@@ -572,7 +568,7 @@ bin/glimmer samples
|
|
|
572
568
|
Below are the full usage instructions that come up when running `glimmer` without args.
|
|
573
569
|
|
|
574
570
|
```
|
|
575
|
-
Glimmer (JRuby Desktop Development GUI Framework) - JRuby Gem: glimmer-dsl-swt v4.18.
|
|
571
|
+
Glimmer (JRuby Desktop Development GUI Framework) - JRuby Gem: glimmer-dsl-swt v4.18.4.0
|
|
576
572
|
|
|
577
573
|
|
|
578
574
|
|
|
@@ -1053,7 +1049,7 @@ Output:
|
|
|
1053
1049
|
|
|
1054
1050
|
Css glimmer-dsl-css 1.1.0 AndyMaleh Glimmer DSL for CSS
|
|
1055
1051
|
Opal glimmer-dsl-opal 0.10.2 AndyMaleh Glimmer DSL for Opal
|
|
1056
|
-
Swt glimmer-dsl-swt 4.18.
|
|
1052
|
+
Swt glimmer-dsl-swt 4.18.4.0
|
|
1057
1053
|
|
|
1058
1054
|
AndyMaleh Glimmer DSL for SWT
|
|
1059
1055
|
Tk glimmer-dsl-tk 0.0.6 AndyMaleh Glimmer DSL for Tk
|
|
@@ -1895,6 +1891,79 @@ Glimmer provides smart defaults for the `scrolled_composite` widget by:
|
|
|
1895
1891
|
- Automatically setting the :h_scroll and :v_scroll SWT styles (can be set manually if only one of either :h_scroll or :v_scroll is desired )
|
|
1896
1892
|
- Automatically setting the expand horizontal and expand vertical SWT properties to `true`
|
|
1897
1893
|
|
|
1894
|
+
#### Sash Form Widget
|
|
1895
|
+
|
|
1896
|
+
`sash_form` is an SWT built-in custom widget that provides a resizable sash that splits a window area into two or more panes.
|
|
1897
|
+
|
|
1898
|
+
It can be customized with the `weights` attribute by setting initial weights to size the panes at first display.
|
|
1899
|
+
|
|
1900
|
+
One noteworthy thing about the Glimmer implementation is that, unlike behavior in SWT, it allows declaring `weights` before the content of the `sash_form`, thus providing more natural and convenient syntax (Glimmer automatically takes care of sending that declaration to SWT at the end of declaring `sash_form` content as per the SWT requirements)
|
|
1901
|
+
|
|
1902
|
+
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
1903
|
+
|
|
1904
|
+
```ruby
|
|
1905
|
+
shell {
|
|
1906
|
+
text 'Sash Form Example'
|
|
1907
|
+
sash_form {
|
|
1908
|
+
label {
|
|
1909
|
+
text '(resize >>)'
|
|
1910
|
+
background :dark_green
|
|
1911
|
+
foreground :white
|
|
1912
|
+
font height: 20
|
|
1913
|
+
}
|
|
1914
|
+
label {
|
|
1915
|
+
text '(<< resize)'
|
|
1916
|
+
background :red
|
|
1917
|
+
foreground :white
|
|
1918
|
+
font height: 20
|
|
1919
|
+
}
|
|
1920
|
+
weights 1, 2
|
|
1921
|
+
}
|
|
1922
|
+
}.open
|
|
1923
|
+
```
|
|
1924
|
+
|
|
1925
|
+
You may check out a more full-fledged example in [Hello, Sash Form!](#hello-sash-form)
|
|
1926
|
+
|
|
1927
|
+
|
|
1928
|
+
|
|
1929
|
+
#### Browser Widget
|
|
1930
|
+
|
|
1931
|
+
|
|
1932
|
+
|
|
1933
|
+
Glimmer supports the SWT Browser widget, which can load URLs or render HTML. It can even be instrumented with JavaScript when needed (though highly discouraged since it defeats the purpose of using Ruby except in very rare cases like leveraging a pre-existing web codebase in a desktop app).
|
|
1934
|
+
|
|
1935
|
+
Example loading a URL (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
1936
|
+
|
|
1937
|
+
```ruby
|
|
1938
|
+
shell {
|
|
1939
|
+
minimum_size 1024, 860
|
|
1940
|
+
browser {
|
|
1941
|
+
url 'http://brightonresort.com/about'
|
|
1942
|
+
}
|
|
1943
|
+
}.open
|
|
1944
|
+
```
|
|
1945
|
+
|
|
1946
|
+
Example rendering HTML with JavaScript on document ready (you may copy/paste in [`girb`](#girb-glimmer-irb-command) provided you install and require [glimmer-dsl-xml gem](https://github.com/AndyObtiva/glimmer-dsl-xml)):
|
|
1947
|
+
|
|
1948
|
+
```ruby
|
|
1949
|
+
shell {
|
|
1950
|
+
minimum_size 130, 130
|
|
1951
|
+
@browser = browser {
|
|
1952
|
+
text html {
|
|
1953
|
+
head {
|
|
1954
|
+
meta(name: "viewport", content: "width=device-width, initial-scale=2.0")
|
|
1955
|
+
}
|
|
1956
|
+
body {
|
|
1957
|
+
h1 { "Hello, World!" }
|
|
1958
|
+
}
|
|
1959
|
+
}
|
|
1960
|
+
on_completed { # on load of the page execute this JavaScript
|
|
1961
|
+
@browser.swt_widget.execute("alert('Hello, World!');")
|
|
1962
|
+
}
|
|
1963
|
+
}
|
|
1964
|
+
}.open
|
|
1965
|
+
```
|
|
1966
|
+
|
|
1898
1967
|
### Widget Styles
|
|
1899
1968
|
|
|
1900
1969
|
SWT widgets receive `SWT` styles in their constructor as per this guide:
|
|
@@ -2358,6 +2427,7 @@ Shape keywords and their args (including defaults) are listed below (they basica
|
|
|
2358
2427
|
- `text(string, x, y, flags = nil)` text with optional flags (flag format is `swt(comma_separated_flags)` where flags can be :draw_delimiter (i.e. new lines), :draw_tab, :draw_mnemonic, and :draw_transparent as explained in [GC API](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/graphics/GC.html))
|
|
2359
2428
|
|
|
2360
2429
|
Shape keywords that can be filled with color can take an keyword argument `fill: true`. Defaults to false when not specified unless background is set with no foreground (or foreground is set with no background), in which case a smart default is applied.
|
|
2430
|
+
Smart defaults can be applied to automatically infer `gradient: true` (rectangle with both foreground and background) and `round: true` (rectangle with more than 4 args, the extra args are numeric) as well.
|
|
2361
2431
|
|
|
2362
2432
|
Optionally, a shape keyword takes a block that can set any attributes from [org.eclipse.swt.graphics.GC](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/graphics/GC.html) (methods starting with `set`), which enable setting the `background` for filling and `foreground` for drawing.
|
|
2363
2433
|
|
|
@@ -2381,6 +2451,8 @@ Here is a list of supported attributes nestable within a block under shapes:
|
|
|
2381
2451
|
- `text_anti_alias` enables text antialiasing (SWT style value of `:default`, `:off`, `:on` whereby `:default` applies OS default, which varies per OS)
|
|
2382
2452
|
- `transform` sets transform object using [Canvas Transform DSL](#canvas-transform-dsl) syntax
|
|
2383
2453
|
|
|
2454
|
+
Keep in mind that ordering of shapes matters as it is followed in painting. For example, it is recommended you paint filled shapes first and then drawn ones.
|
|
2455
|
+
|
|
2384
2456
|
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
2385
2457
|
|
|
2386
2458
|
```ruby
|
|
@@ -2709,6 +2781,12 @@ Learn more at the [Hello, Canvas Animation! Sample](#hello-canvas-animation).
|
|
|
2709
2781
|
|
|
2710
2782
|
If there is anything missing you would like added to the Glimmer Animation DSL that you saw available in the SWT APIs, you may [report an issue](https://github.com/AndyObtiva/glimmer-dsl-swt/issues) or implement yourself and [contribute](#contributing) via a Pull Request.
|
|
2711
2783
|
|
|
2784
|
+
#### Animation via Data-Binding
|
|
2785
|
+
|
|
2786
|
+
Animation could be alternatively implemented without the `animation` keyword through a loop that invokes model methods inside `sync_exec {}` (or `async_exec {}`), which indirectly cause updates to the GUI via data-binding.
|
|
2787
|
+
|
|
2788
|
+
The [Glimmer Tetris](#glimmer-tetris) sample provides a good example of that.
|
|
2789
|
+
|
|
2712
2790
|
### Data-Binding
|
|
2713
2791
|
|
|
2714
2792
|
Data-binding is done with `bind` command following widget property to bind and taking model and bindable attribute as arguments.
|
|
@@ -3526,7 +3604,7 @@ shell {
|
|
|
3526
3604
|
|
|
3527
3605
|
Notice how `:no_focus` was the `swt_style` value, followed by the `options` hash `{orientation: :horizontal, bg_color: :white}`, and finally the `content` block containing the label with `'SANDWICH CONTENT'`
|
|
3528
3606
|
|
|
3529
|
-
####
|
|
3607
|
+
#### Custom Widget Gotchas
|
|
3530
3608
|
|
|
3531
3609
|
Beware of defining a custom attribute that is a common SWT widget property name.
|
|
3532
3610
|
For example, if you define `text=` and `text` methods to accept a custom text and then later you write this body:
|
|
@@ -3556,424 +3634,35 @@ body {
|
|
|
3556
3634
|
|
|
3557
3635
|
The `text` method invoked in the custom widget body will call the one you defined above it. To avoid this gotcha, simply name the text property above something else, like `custom_text`.
|
|
3558
3636
|
|
|
3559
|
-
#### Custom
|
|
3637
|
+
#### Built-In Custom Widgets
|
|
3560
3638
|
|
|
3561
|
-
|
|
3562
|
-
[https://www.eclipse.org/articles/Article-Writing%20Your%20Own%20Widget/Writing%20Your%20Own%20Widget.htm](https://www.eclipse.org/articles/Article-Writing%20Your%20Own%20Widget/Writing%20Your%20Own%20Widget.htm)
|
|
3639
|
+
##### Checkbox Group Custom Widget
|
|
3563
3640
|
|
|
3564
|
-
|
|
3641
|
+
`checkbox_group` (or alias `check_group`) is a Glimmer built-in custom widget that displays a list of `checkbox` buttons (`button(:check)`) based on its `items` property.
|
|
3565
3642
|
|
|
3566
|
-
|
|
3643
|
+
`checkbox_group` consists of a root `composite` (with `grid_layout 1, false` by default) that holds nested `checkbox` (`button(:check)`) widgets.
|
|
3567
3644
|
|
|
3568
|
-
|
|
3645
|
+
The `selection` property determines which `checkbox` buttons are checked. It expects an `Array` of `String` objects
|
|
3646
|
+
The `selection_indices` property determines which `checkbox` button indices are checked. It expects an `Array` of index `Integer` objects that are zero-based.
|
|
3647
|
+
The `checkboxes` property returns the list of nested `checkbox` widgets.
|
|
3569
3648
|
|
|
3570
|
-
|
|
3649
|
+
When data-binding `selection`, the model property should have a matching property with `_options` suffix (e.g. `activities_options` for `activities`) to provide an `Array` of `String` objects for `checkbox` buttons.
|
|
3571
3650
|
|
|
3572
|
-
You
|
|
3651
|
+
You may see an example at the [Hello, Checkbox Group!](#hello-checkbox-group) sample.
|
|
3573
3652
|
|
|
3574
|
-
|
|
3653
|
+
|
|
3575
3654
|
|
|
3576
|
-
|
|
3577
|
-
class WizardStep
|
|
3578
|
-
include Glimmer::UI::CustomShell
|
|
3655
|
+
##### Radio Group Custom Widget
|
|
3579
3656
|
|
|
3580
|
-
|
|
3657
|
+
`radio_group` is a Glimmer built-in custom widget that displays a list of `radio` buttons (`button(:radio)`) based on its `items` property, which expects an `Array` of `String` objects.
|
|
3581
3658
|
|
|
3582
|
-
|
|
3583
|
-
@title = "Step #{number}"
|
|
3584
|
-
}
|
|
3659
|
+
`radio_group` consists of a root `composite` (with `grid_layout 1, false` by default) that holds nested `radio` widgets.
|
|
3585
3660
|
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
minimum_size 200, 100
|
|
3590
|
-
fill_layout :vertical
|
|
3591
|
-
label(:center) {
|
|
3592
|
-
text @title
|
|
3593
|
-
font height: 30
|
|
3594
|
-
}
|
|
3595
|
-
if number < step_count
|
|
3596
|
-
button {
|
|
3597
|
-
text "Go To Next Step"
|
|
3598
|
-
on_widget_selected {
|
|
3599
|
-
body_root.hide
|
|
3600
|
-
}
|
|
3601
|
-
}
|
|
3602
|
-
end
|
|
3603
|
-
}
|
|
3604
|
-
}
|
|
3605
|
-
end
|
|
3661
|
+
The `selection` property determines which `radio` button is selected. It expects a `String`
|
|
3662
|
+
The `selection_index` property determines which `radio` button index is selected. It expects an index integer that is zero-based.
|
|
3663
|
+
The `radios` property returns the list of nested `radio` widgets.
|
|
3606
3664
|
|
|
3607
|
-
|
|
3608
|
-
text "Wizard"
|
|
3609
|
-
minimum_size 200, 100
|
|
3610
|
-
@current_step_number = 1
|
|
3611
|
-
@wizard_steps = 5.times.map { |n|
|
|
3612
|
-
wizard_step(number: n+1, step_count: 5) {
|
|
3613
|
-
on_swt_hide {
|
|
3614
|
-
if @current_step_number < 5
|
|
3615
|
-
@current_step_number += 1
|
|
3616
|
-
app_shell.hide
|
|
3617
|
-
@wizard_steps[@current_step_number - 1].open
|
|
3618
|
-
end
|
|
3619
|
-
}
|
|
3620
|
-
}
|
|
3621
|
-
}
|
|
3622
|
-
button {
|
|
3623
|
-
text "Start"
|
|
3624
|
-
font height: 40
|
|
3625
|
-
on_widget_selected {
|
|
3626
|
-
app_shell.hide
|
|
3627
|
-
@wizard_steps[@current_step_number - 1].open
|
|
3628
|
-
}
|
|
3629
|
-
}
|
|
3630
|
-
}.open
|
|
3631
|
-
```
|
|
3632
|
-
|
|
3633
|
-
If you use a Custom Shell as the top-level app shell, you may invoke the class method `::launch` instead to avoid building an app class yourself or including Glimmer into the top-level namespace (e.g. `Tetris.launch` instead of `include Glimmer; tetris.open`)
|
|
3634
|
-
|
|
3635
|
-
You may check out [Hello, Custom Shell!](#hello-custom-shell) for another example.
|
|
3636
|
-
|
|
3637
|
-
### Drag and Drop
|
|
3638
|
-
|
|
3639
|
-
Glimmer s Drag and Drop support, thanks to [SWT](https://www.eclipse.org/swt/) and Glimmer's lightweight [DSL syntax](#glimmer-dsl-syntax).
|
|
3640
|
-
|
|
3641
|
-
You may learn more about SWT Drag and Drop support over here: [https://www.eclipse.org/articles/Article-SWT-DND/DND-in-SWT.html](https://www.eclipse.org/articles/Article-SWT-DND/DND-in-SWT.html)
|
|
3642
|
-
|
|
3643
|
-
To get started, simply follow these steps:
|
|
3644
|
-
1. On the drag source widget, add `on_drag_set_data` [DragSourceListener](https://help.eclipse.org/2020-03/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DragSourceListener.html) event handler block at minimum (you may also add `on_drag_start` and `on_drag_finished` if needed)
|
|
3645
|
-
1. Set `event.data` to transfer via drag and drop inside the `on_drag_set_data` event handler block (defaults to `transfer` type of `:text`, as in a Ruby String)
|
|
3646
|
-
1. On the drop target widget, add `on_drop` [DropTargetListener](https://help.eclipse.org/2020-03/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DropTargetListener.html) event handler block at minimum (you may also add `on_drag_enter` [must set [`event.detail`](https://help.eclipse.org/2020-06/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DropTargetEvent.html#detail) if added], `on_drag_over`, `on_drag_leave`, `on_drag_operation_changed` and `on_drop_accept` if needed)
|
|
3647
|
-
1. Read `event.data` and consume it (e.g. change widget text) inside the `on_drop` event handler block.
|
|
3648
|
-
|
|
3649
|
-
Example (taken from [samples/hello/hello_drag_and_drop.rb](#hello-drag-and-drop) / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3650
|
-
|
|
3651
|
-
```ruby
|
|
3652
|
-
class Location
|
|
3653
|
-
attr_accessor :country
|
|
3654
|
-
|
|
3655
|
-
def country_options
|
|
3656
|
-
%w[USA Canada Mexico Columbia UK Australia Germany Italy Spain]
|
|
3657
|
-
end
|
|
3658
|
-
end
|
|
3659
|
-
|
|
3660
|
-
@location = Location.new
|
|
3661
|
-
|
|
3662
|
-
include Glimmer
|
|
3663
|
-
|
|
3664
|
-
shell {
|
|
3665
|
-
text 'Hello, Drag and Drop!'
|
|
3666
|
-
list {
|
|
3667
|
-
selection bind(@location, :country)
|
|
3668
|
-
on_drag_set_data { |event|
|
|
3669
|
-
list = event.widget.getControl
|
|
3670
|
-
event.data = list.getSelection.first
|
|
3671
|
-
}
|
|
3672
|
-
}
|
|
3673
|
-
label(:center) {
|
|
3674
|
-
text 'Drag a country here!'
|
|
3675
|
-
font height: 20
|
|
3676
|
-
on_drop { |event|
|
|
3677
|
-
event.widget.getControl.setText(event.data)
|
|
3678
|
-
}
|
|
3679
|
-
}
|
|
3680
|
-
}.open
|
|
3681
|
-
```
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3685
|
-
Optional steps:
|
|
3686
|
-
- Set a `transfer` property (defaults to `:text`). Values may be: :text (default), :html :image, :rtf, :url, and :file, or an array of multiple values. The `transfer` property will automatically convert your option into a [Transfer](https://help.eclipse.org/2020-03/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/Transfer.html) object as per the SWT API.
|
|
3687
|
-
- Specify `drag_source_style` operation (may be: :drop_copy (default), :drop_link, :drop_move, :drop_none, or an array of multiple operations)
|
|
3688
|
-
- Specify `drag_source_effect` (Check [DragSourceEffect](https://help.eclipse.org/2020-06/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DragSourceEffect.html) SWT API for details)
|
|
3689
|
-
- Specify `drop_target_style` operation (may be: :drop_copy (default), :drop_link, :drop_move, :drop_none, or an array of multiple operations)
|
|
3690
|
-
- Specify `drop_target_effect` (Check [DropTargetEffect](https://help.eclipse.org/2020-06/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DropTargetEffect.html) SWT API for details)
|
|
3691
|
-
- Set drag operation in `event.detail` (e.g. DND::DROP_COPY) inside `on_drag_enter`
|
|
3692
|
-
|
|
3693
|
-
### Miscellaneous
|
|
3694
|
-
|
|
3695
|
-
#### Multi-DSL Support
|
|
3696
|
-
|
|
3697
|
-
Glimmer is a DSL engine that supports multiple DSLs (Domain Specific Languages):
|
|
3698
|
-
- [SWT](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (Desktop GUI)
|
|
3699
|
-
- [Opal](https://github.com/AndyObtiva/glimmer-dsl-opal): Glimmer DSL for Opal (Web GUI Adapter for Desktop Apps)
|
|
3700
|
-
- [XML](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML) - Useful with [SWT Browser Widget](#browser-widget)
|
|
3701
|
-
- [CSS](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets) - Useful with [SWT Browser Widget](#browser-widget)
|
|
3702
|
-
|
|
3703
|
-
Glimmer automatically recognizes top-level keywords in each DSL and activates DSL accordingly. Glimmer allows mixing DSLs, which comes in handy when doing things like using the SWT Browser widget with XML and CSS. Once done processing a nested DSL top-level keyword, Glimmer switches back to the prior DSL automatically.
|
|
3704
|
-
|
|
3705
|
-
##### SWT
|
|
3706
|
-
|
|
3707
|
-
The SWT DSL was already covered in detail. However, for the sake of mixing DSLs, you need to know that the SWT DSL has the following top-level keywords:
|
|
3708
|
-
- `shell`
|
|
3709
|
-
- `display`
|
|
3710
|
-
- `color`
|
|
3711
|
-
- `observe`
|
|
3712
|
-
- `async_exec`
|
|
3713
|
-
- `sync_exec`
|
|
3714
|
-
|
|
3715
|
-
##### Opal
|
|
3716
|
-
|
|
3717
|
-
Full instructions are found in the [Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) DSL page.
|
|
3718
|
-
|
|
3719
|
-
The [Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) DSL is simply a web GUI adapter for desktop apps written in Glimmer. As such, it supports all the DSL keywords of the SWT DSL and shares the same top-level keywords.
|
|
3720
|
-
|
|
3721
|
-
##### XML
|
|
3722
|
-
|
|
3723
|
-
Simply start with `html` keyword and add HTML inside its block using Glimmer DSL syntax.
|
|
3724
|
-
Once done, you may call `to_s`, `to_xml`, or `to_html` to get the formatted HTML output.
|
|
3725
|
-
|
|
3726
|
-
Here are all the Glimmer XML DSL top-level keywords:
|
|
3727
|
-
- `html`
|
|
3728
|
-
- `tag`: enables custom tag creation for exceptional cases by passing tag name as '_name' attribute
|
|
3729
|
-
- `name_space`: enables namespacing html tags
|
|
3730
|
-
|
|
3731
|
-
Element properties are typically passed as a key/value hash (e.g. `section(id: 'main', class: 'accordion')`) . However, for properties like "selected" or "checked", you must leave value `nil` or otherwise pass in front of the hash (e.g. `input(:checked, type: 'checkbox')` )
|
|
3732
|
-
|
|
3733
|
-
Example (basic HTML / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3734
|
-
|
|
3735
|
-
```ruby
|
|
3736
|
-
@xml = html {
|
|
3737
|
-
head {
|
|
3738
|
-
meta(name: "viewport", content: "width=device-width, initial-scale=2.0")
|
|
3739
|
-
}
|
|
3740
|
-
body {
|
|
3741
|
-
h1 { "Hello, World!" }
|
|
3742
|
-
}
|
|
3743
|
-
}
|
|
3744
|
-
puts @xml
|
|
3745
|
-
```
|
|
3746
|
-
|
|
3747
|
-
Output:
|
|
3748
|
-
|
|
3749
|
-
```
|
|
3750
|
-
<html><head><meta name="viewport" content="width=device-width, initial-scale=2.0" /></head><body><h1>Hello, World!</h1></body></html>
|
|
3751
|
-
```
|
|
3752
|
-
|
|
3753
|
-
Example (explicit XML tag / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3754
|
-
|
|
3755
|
-
```ruby
|
|
3756
|
-
puts tag(:_name => "DOCUMENT")
|
|
3757
|
-
```
|
|
3758
|
-
|
|
3759
|
-
Output:
|
|
3760
|
-
|
|
3761
|
-
```
|
|
3762
|
-
<DOCUMENT/>
|
|
3763
|
-
```
|
|
3764
|
-
|
|
3765
|
-
Example (XML namespaces using `name_space` keyword / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3766
|
-
|
|
3767
|
-
```ruby
|
|
3768
|
-
@xml = name_space(:w3c) {
|
|
3769
|
-
html(:id => "thesis", :class => "document") {
|
|
3770
|
-
body(:id => "main") {
|
|
3771
|
-
}
|
|
3772
|
-
}
|
|
3773
|
-
}
|
|
3774
|
-
puts @xml
|
|
3775
|
-
```
|
|
3776
|
-
|
|
3777
|
-
Output:
|
|
3778
|
-
|
|
3779
|
-
```
|
|
3780
|
-
<w3c:html id="thesis" class="document"><w3c:body id="main"></w3c:body></w3c:html>
|
|
3781
|
-
```
|
|
3782
|
-
|
|
3783
|
-
Example (XML namespaces using dot operator / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3784
|
-
|
|
3785
|
-
```ruby
|
|
3786
|
-
@xml = tag(:_name => "DOCUMENT") {
|
|
3787
|
-
document.body(document.id => "main") {
|
|
3788
|
-
}
|
|
3789
|
-
}
|
|
3790
|
-
puts @xml
|
|
3791
|
-
```
|
|
3792
|
-
|
|
3793
|
-
Output:
|
|
3794
|
-
|
|
3795
|
-
```
|
|
3796
|
-
<DOCUMENT><document:body document:id="main"></document:body></DOCUMENT>
|
|
3797
|
-
```
|
|
3798
|
-
|
|
3799
|
-
##### CSS
|
|
3800
|
-
|
|
3801
|
-
Simply start with `css` keyword and add stylesheet rule sets inside its block using Glimmer DSL syntax.
|
|
3802
|
-
Once done, you may call `to_s` or `to_css` to get the formatted CSS output.
|
|
3803
|
-
|
|
3804
|
-
`css` is the only top-level keyword in the Glimmer CSS DSL
|
|
3805
|
-
|
|
3806
|
-
Selectors may be specified by `s` keyword or HTML element keyword directly (e.g. `body`)
|
|
3807
|
-
Rule property values may be specified by `pv` keyword or underscored property name directly (e.g. `font_size`)
|
|
3808
|
-
|
|
3809
|
-
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3810
|
-
|
|
3811
|
-
```ruby
|
|
3812
|
-
@css = css {
|
|
3813
|
-
body {
|
|
3814
|
-
font_size '1.1em'
|
|
3815
|
-
pv 'background', 'white'
|
|
3816
|
-
}
|
|
3817
|
-
|
|
3818
|
-
s('body > h1') {
|
|
3819
|
-
background_color :red
|
|
3820
|
-
pv 'font-size', '2em'
|
|
3821
|
-
}
|
|
3822
|
-
}
|
|
3823
|
-
puts @css
|
|
3824
|
-
```
|
|
3825
|
-
|
|
3826
|
-
##### Listing / Enabling / Disabling DSLs
|
|
3827
|
-
|
|
3828
|
-
Glimmer provides a number of methods on Glimmer::DSL::Engine to configure DSL support or inquire about it:
|
|
3829
|
-
- `Glimmer::DSL::Engine.dsls`: Lists available Glimmer DSLs
|
|
3830
|
-
- `Glimmer::DSL::Engine.disable_dsl(dsl_name)`: Disables a specific DSL. Useful when there is no need for certain DSLs in a certain application.
|
|
3831
|
-
- `Glimmer::DSL::Engine.disabled_dsls': Lists disabled DSLs
|
|
3832
|
-
- `Glimmer::DSL::Engine.enable_dsl(dsl_name)`: Re-enables disabled DSL
|
|
3833
|
-
- `Glimmer::DSL::Engine.enabled_dsls=(dsl_names)`: Disables all DSLs except the ones specified.
|
|
3834
|
-
|
|
3835
|
-
#### Application Menu Items (About/Preferences)
|
|
3836
|
-
|
|
3837
|
-
Mac applications always have About and Preferences menu items. Glimmer provides widget observer hooks for them on the `display`:
|
|
3838
|
-
- `on_about`: executes code when user selects App Name -> About
|
|
3839
|
-
- `on_preferences`: executes code when user selects App Name -> Preferences or hits 'CMD+,' on the Mac
|
|
3840
|
-
|
|
3841
|
-
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3842
|
-
|
|
3843
|
-
```ruby
|
|
3844
|
-
class Example
|
|
3845
|
-
def initialize
|
|
3846
|
-
display {
|
|
3847
|
-
on_about {
|
|
3848
|
-
message_box(@shell_proxy) {
|
|
3849
|
-
text 'About'
|
|
3850
|
-
message 'About Application'
|
|
3851
|
-
}.open
|
|
3852
|
-
}
|
|
3853
|
-
on_preferences {
|
|
3854
|
-
preferences_dialog = dialog {
|
|
3855
|
-
text 'Preferences'
|
|
3856
|
-
row_layout {
|
|
3857
|
-
type :vertical
|
|
3858
|
-
margin_left 15
|
|
3859
|
-
margin_top 15
|
|
3860
|
-
margin_right 15
|
|
3861
|
-
margin_bottom 15
|
|
3862
|
-
}
|
|
3863
|
-
label {
|
|
3864
|
-
text 'Check one of these options:'
|
|
3865
|
-
}
|
|
3866
|
-
button(:radio) {
|
|
3867
|
-
text 'Option 1'
|
|
3868
|
-
}
|
|
3869
|
-
button(:radio) {
|
|
3870
|
-
text 'Option 2'
|
|
3871
|
-
}
|
|
3872
|
-
}
|
|
3873
|
-
preferences_dialog.open
|
|
3874
|
-
}
|
|
3875
|
-
}
|
|
3876
|
-
@shell_proxy = shell {
|
|
3877
|
-
text 'Application Menu Items'
|
|
3878
|
-
fill_layout {
|
|
3879
|
-
margin_width 15
|
|
3880
|
-
margin_height 15
|
|
3881
|
-
}
|
|
3882
|
-
label {
|
|
3883
|
-
text 'Application Menu Items'
|
|
3884
|
-
font height: 30
|
|
3885
|
-
}
|
|
3886
|
-
}
|
|
3887
|
-
@shell_proxy.open
|
|
3888
|
-
end
|
|
3889
|
-
end
|
|
3890
|
-
|
|
3891
|
-
Example.new
|
|
3892
|
-
```
|
|
3893
|
-
|
|
3894
|
-
#### App Name and Version
|
|
3895
|
-
|
|
3896
|
-
Application name (shows up on the Mac in top menu bar) and version may be specified upon [packaging](#packaging--distribution) by specifying "-Bmac.CFBundleName" and "-Bmac.CFBundleVersion" options.
|
|
3897
|
-
|
|
3898
|
-
Still, if you would like proper application name to show up on the Mac top menu bar during development, you may do so by invoking the SWT `Display.app_name=` method before any Display object has been instantiated (i.e. before any Glimmer widget like shell has been declared).
|
|
3899
|
-
|
|
3900
|
-
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3901
|
-
|
|
3902
|
-
```ruby
|
|
3903
|
-
Display.app_name = 'Glimmer Demo'
|
|
3904
|
-
|
|
3905
|
-
shell(:no_resize) {
|
|
3906
|
-
text "Glimmer"
|
|
3907
|
-
label {
|
|
3908
|
-
text "Hello, World!"
|
|
3909
|
-
}
|
|
3910
|
-
}.open
|
|
3911
|
-
```
|
|
3912
|
-
|
|
3913
|
-
Also, you may invoke `Display.app_version = '1.0.0'` if needed for OS app version identification reasons during development, replacing `'1.0.0'` with your application version.
|
|
3914
|
-
|
|
3915
|
-
#### Performance Profiling
|
|
3916
|
-
|
|
3917
|
-
JRuby comes with built-in support for performance profiling via the `--profile` option (with some code shown below), which can be accepted by the `glimmer` command too:
|
|
3918
|
-
|
|
3919
|
-
`glimmer --profile path_to_glimmer_app.rb`
|
|
3920
|
-
|
|
3921
|
-
Additionally, add this code to monitor Glimmer app performance around its launch method:
|
|
3922
|
-
|
|
3923
|
-
```ruby
|
|
3924
|
-
require 'jruby/profiler'
|
|
3925
|
-
profile_data = JRuby::Profiler.profile do
|
|
3926
|
-
SomeGlimmerApp.launch
|
|
3927
|
-
end
|
|
3928
|
-
|
|
3929
|
-
profile_printer = JRuby::Profiler::HtmlProfilePrinter.new(profile_data)
|
|
3930
|
-
ps = java.io.PrintStream.new(STDOUT.to_outputstream)
|
|
3931
|
-
```
|
|
3932
|
-
|
|
3933
|
-
When monitoring app startup time performance, make sure to add a hook to the top-level `shell` `on_swt_show` event that exits the app as soon as the shell shows up to end performance profiling and get the results.
|
|
3934
|
-
|
|
3935
|
-
Example:
|
|
3936
|
-
|
|
3937
|
-
```ruby
|
|
3938
|
-
shell {
|
|
3939
|
-
# some code
|
|
3940
|
-
on_swt_show {
|
|
3941
|
-
exit(0)
|
|
3942
|
-
}
|
|
3943
|
-
}
|
|
3944
|
-
```
|
|
3945
|
-
|
|
3946
|
-
You may run `glimmer` with the `--profile.graph` instead for a more detailed output.
|
|
3947
|
-
|
|
3948
|
-
Learn more at the [JRuby Performance Profile WIKI page](https://github.com/jruby/jruby/wiki/Profiling-JRuby).
|
|
3949
|
-
|
|
3950
|
-
#### Checkbox Group Widget
|
|
3951
|
-
|
|
3952
|
-
`checkbox_group` (or alias `check_group`) is a Glimmer built-in custom widget that displays a list of `checkbox` buttons (`button(:check)`) based on its `items` property.
|
|
3953
|
-
|
|
3954
|
-
`checkbox_group` consists of a root `composite` (with `grid_layout 1, false` by default) that holds nested `checkbox` (`button(:check)`) widgets.
|
|
3955
|
-
|
|
3956
|
-
The `selection` property determines which `checkbox` buttons are checked. It expects an `Array` of `String` objects
|
|
3957
|
-
The `selection_indices` property determines which `checkbox` button indices are checked. It expects an `Array` of index `Integer` objects that are zero-based.
|
|
3958
|
-
The `checkboxes` property returns the list of nested `checkbox` widgets.
|
|
3959
|
-
|
|
3960
|
-
When data-binding `selection`, the model property should have a matching property with `_options` suffix (e.g. `activities_options` for `activities`) to provide an `Array` of `String` objects for `checkbox` buttons.
|
|
3961
|
-
|
|
3962
|
-
You may see an example at the [Hello, Checkbox Group!](#hello-checkbox-group) sample.
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
#### Radio Group Widget
|
|
3967
|
-
|
|
3968
|
-
`radio_group` is a Glimmer built-in custom widget that displays a list of `radio` buttons (`button(:radio)`) based on its `items` property, which expects an `Array` of `String` objects.
|
|
3969
|
-
|
|
3970
|
-
`radio_group` consists of a root `composite` (with `grid_layout 1, false` by default) that holds nested `radio` widgets.
|
|
3971
|
-
|
|
3972
|
-
The `selection` property determines which `radio` button is selected. It expects a `String`
|
|
3973
|
-
The `selection_index` property determines which `radio` button index is selected. It expects an index integer that is zero-based.
|
|
3974
|
-
The `radios` property returns the list of nested `radio` widgets.
|
|
3975
|
-
|
|
3976
|
-
When data-binding `selection`, the model property should have a matching property with `_options` suffix (e.g. `country_options` for `country`) to provide text for `radio` buttons.
|
|
3665
|
+
When data-binding `selection`, the model property should have a matching property with `_options` suffix (e.g. `country_options` for `country`) to provide text for `radio` buttons.
|
|
3977
3666
|
|
|
3978
3667
|
This custom widget is used in the [Glimmer Meta-Sample (The Sample of Samples)](#samples):
|
|
3979
3668
|
|
|
@@ -3996,7 +3685,7 @@ radio_group { |radio_group_proxy|
|
|
|
3996
3685
|
|
|
3997
3686
|
You may see another example at the [Hello, Radio Group!](#hello-radio-group) sample.
|
|
3998
3687
|
|
|
3999
|
-
|
|
3688
|
+
##### Code Text Custom Widget
|
|
4000
3689
|
|
|
4001
3690
|
`code_text` is a Glimmer built-in custom widget that displays syntax highlighted Ruby code in a customized SWT [StyledText](https://help.eclipse.org/2020-09/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/custom/StyledText.html) widget.
|
|
4002
3691
|
|
|
@@ -4017,7 +3706,14 @@ Glimmer Meta-Sample Code Example:
|
|
|
4017
3706
|
|
|
4018
3707
|
To use, simply use `code_text` in place of the `text` or `styled_text` widget. If you set its `text` value to Ruby code, it automatically styles it with syntax highlighting.
|
|
4019
3708
|
|
|
4020
|
-
|
|
3709
|
+
###### Options
|
|
3710
|
+
|
|
3711
|
+
**lines**
|
|
3712
|
+
(default: false)
|
|
3713
|
+
|
|
3714
|
+
Shows line numbers when set to true.
|
|
3715
|
+
|
|
3716
|
+
If set to a hash like `{width: 4}`, it sets the width of the line numbers lane in character count (default: 4)
|
|
4021
3717
|
|
|
4022
3718
|
**theme**
|
|
4023
3719
|
(default: 'glimmer')
|
|
@@ -4030,7 +3726,7 @@ Changes syntax color highlighting theme. Can be one of the following:
|
|
|
4030
3726
|
**language**
|
|
4031
3727
|
(default: `'ruby'`)
|
|
4032
3728
|
|
|
4033
|
-
Sets the code language, which can be one of the following
|
|
3729
|
+
Sets the code language, which can be one of the following [rouge gem](#https://rubygems.org/gems/rouge) supported languages:
|
|
4034
3730
|
- abap
|
|
4035
3731
|
- actionscript
|
|
4036
3732
|
- ada
|
|
@@ -4236,87 +3932,407 @@ Sets the code language, which can be one of the following supported rouge gem la
|
|
|
4236
3932
|
- yang
|
|
4237
3933
|
- zig
|
|
4238
3934
|
|
|
4239
|
-
|
|
3935
|
+
Learn more at [Hello, Code Text!](#hello-code-text)
|
|
3936
|
+
|
|
3937
|
+
##### Video Custom Custom Widget
|
|
3938
|
+
|
|
3939
|
+
[](https://github.com/AndyObtiva/glimmer-cw-video)
|
|
3940
|
+
|
|
3941
|
+
Glimmer supports a [video custom widget](https://github.com/AndyObtiva/glimmer-cw-video) not in SWT, which was originally a Glimmer built-in custom widget, but has been later extracted into its own [Ruby gem](https://rubygems.org/gems/glimmer-cw-video).
|
|
3942
|
+
|
|
3943
|
+
Simply install the [glimmer-cw-video](https://rubygems.org/gems/glimmer-cw-video) gem.
|
|
3944
|
+
|
|
3945
|
+
#### Custom Widget Final Notes
|
|
3946
|
+
|
|
3947
|
+
This [Eclipse guide](https://www.eclipse.org/articles/Article-Writing%20Your%20Own%20Widget/Writing%20Your%20Own%20Widget.htm) for how to write custom SWT widgets is also applicable to Glimmer Custom Widgets written in Ruby. I recommend reading it:
|
|
3948
|
+
[https://www.eclipse.org/articles/Article-Writing%20Your%20Own%20Widget/Writing%20Your%20Own%20Widget.htm](https://www.eclipse.org/articles/Article-Writing%20Your%20Own%20Widget/Writing%20Your%20Own%20Widget.htm)
|
|
3949
|
+
|
|
3950
|
+
Also, you may check out [Hello, Custom Widget!](#hello-custom-widget) for another example.
|
|
3951
|
+
|
|
3952
|
+
### Custom Shells
|
|
3953
|
+
|
|
3954
|
+
Custom shells are a kind of custom widgets that have shells only as the body root. They can be self-contained applications that may be opened and hidden/closed independently of the main app.
|
|
3955
|
+
|
|
3956
|
+
They may also be chained in a wizard fashion.
|
|
3957
|
+
|
|
3958
|
+
You can find out about [published Glimmer Custom Shells](https://github.com/AndyObtiva/glimmer-dsl-swt#gem-listing) by running the `glimmer list:gems:customshell` command
|
|
3959
|
+
|
|
3960
|
+
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
3961
|
+
|
|
3962
|
+
```ruby
|
|
3963
|
+
class WizardStep
|
|
3964
|
+
include Glimmer::UI::CustomShell
|
|
3965
|
+
|
|
3966
|
+
options :number, :step_count
|
|
3967
|
+
|
|
3968
|
+
before_body {
|
|
3969
|
+
@title = "Step #{number}"
|
|
3970
|
+
}
|
|
3971
|
+
|
|
3972
|
+
body {
|
|
3973
|
+
shell {
|
|
3974
|
+
text "Wizard - #{@title}"
|
|
3975
|
+
minimum_size 200, 100
|
|
3976
|
+
fill_layout :vertical
|
|
3977
|
+
label(:center) {
|
|
3978
|
+
text @title
|
|
3979
|
+
font height: 30
|
|
3980
|
+
}
|
|
3981
|
+
if number < step_count
|
|
3982
|
+
button {
|
|
3983
|
+
text "Go To Next Step"
|
|
3984
|
+
on_widget_selected {
|
|
3985
|
+
body_root.hide
|
|
3986
|
+
}
|
|
3987
|
+
}
|
|
3988
|
+
end
|
|
3989
|
+
}
|
|
3990
|
+
}
|
|
3991
|
+
end
|
|
3992
|
+
|
|
3993
|
+
shell { |app_shell|
|
|
3994
|
+
text "Wizard"
|
|
3995
|
+
minimum_size 200, 100
|
|
3996
|
+
@current_step_number = 1
|
|
3997
|
+
@wizard_steps = 5.times.map { |n|
|
|
3998
|
+
wizard_step(number: n+1, step_count: 5) {
|
|
3999
|
+
on_swt_hide {
|
|
4000
|
+
if @current_step_number < 5
|
|
4001
|
+
@current_step_number += 1
|
|
4002
|
+
app_shell.hide
|
|
4003
|
+
@wizard_steps[@current_step_number - 1].open
|
|
4004
|
+
end
|
|
4005
|
+
}
|
|
4006
|
+
}
|
|
4007
|
+
}
|
|
4008
|
+
button {
|
|
4009
|
+
text "Start"
|
|
4010
|
+
font height: 40
|
|
4011
|
+
on_widget_selected {
|
|
4012
|
+
app_shell.hide
|
|
4013
|
+
@wizard_steps[@current_step_number - 1].open
|
|
4014
|
+
}
|
|
4015
|
+
}
|
|
4016
|
+
}.open
|
|
4017
|
+
```
|
|
4018
|
+
|
|
4019
|
+
If you use a Custom Shell as the top-level app shell, you may invoke the class method `::launch` instead to avoid building an app class yourself or including Glimmer into the top-level namespace (e.g. `Tetris.launch` instead of `include Glimmer; tetris.open`)
|
|
4020
|
+
|
|
4021
|
+
You may check out [Hello, Custom Shell!](#hello-custom-shell) for another example.
|
|
4022
|
+
|
|
4023
|
+
### Drag and Drop
|
|
4024
|
+
|
|
4025
|
+
Glimmer s Drag and Drop support, thanks to [SWT](https://www.eclipse.org/swt/) and Glimmer's lightweight [DSL syntax](#glimmer-dsl-syntax).
|
|
4026
|
+
|
|
4027
|
+
You may learn more about SWT Drag and Drop support over here: [https://www.eclipse.org/articles/Article-SWT-DND/DND-in-SWT.html](https://www.eclipse.org/articles/Article-SWT-DND/DND-in-SWT.html)
|
|
4028
|
+
|
|
4029
|
+
To get started, simply follow these steps:
|
|
4030
|
+
1. On the drag source widget, add `on_drag_set_data` [DragSourceListener](https://help.eclipse.org/2020-03/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DragSourceListener.html) event handler block at minimum (you may also add `on_drag_start` and `on_drag_finished` if needed)
|
|
4031
|
+
1. Set `event.data` to transfer via drag and drop inside the `on_drag_set_data` event handler block (defaults to `transfer` type of `:text`, as in a Ruby String)
|
|
4032
|
+
1. On the drop target widget, add `on_drop` [DropTargetListener](https://help.eclipse.org/2020-03/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DropTargetListener.html) event handler block at minimum (you may also add `on_drag_enter` [must set [`event.detail`](https://help.eclipse.org/2020-06/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DropTargetEvent.html#detail) if added], `on_drag_over`, `on_drag_leave`, `on_drag_operation_changed` and `on_drop_accept` if needed)
|
|
4033
|
+
1. Read `event.data` and consume it (e.g. change widget text) inside the `on_drop` event handler block.
|
|
4034
|
+
|
|
4035
|
+
Example (taken from [samples/hello/hello_drag_and_drop.rb](#hello-drag-and-drop) / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4036
|
+
|
|
4037
|
+
```ruby
|
|
4038
|
+
class Location
|
|
4039
|
+
attr_accessor :country
|
|
4040
|
+
|
|
4041
|
+
def country_options
|
|
4042
|
+
%w[USA Canada Mexico Columbia UK Australia Germany Italy Spain]
|
|
4043
|
+
end
|
|
4044
|
+
end
|
|
4045
|
+
|
|
4046
|
+
@location = Location.new
|
|
4047
|
+
|
|
4048
|
+
include Glimmer
|
|
4049
|
+
|
|
4050
|
+
shell {
|
|
4051
|
+
text 'Hello, Drag and Drop!'
|
|
4052
|
+
list {
|
|
4053
|
+
selection bind(@location, :country)
|
|
4054
|
+
on_drag_set_data { |event|
|
|
4055
|
+
list = event.widget.getControl
|
|
4056
|
+
event.data = list.getSelection.first
|
|
4057
|
+
}
|
|
4058
|
+
}
|
|
4059
|
+
label(:center) {
|
|
4060
|
+
text 'Drag a country here!'
|
|
4061
|
+
font height: 20
|
|
4062
|
+
on_drop { |event|
|
|
4063
|
+
event.widget.getControl.setText(event.data)
|
|
4064
|
+
}
|
|
4065
|
+
}
|
|
4066
|
+
}.open
|
|
4067
|
+
```
|
|
4068
|
+
|
|
4069
|
+
|
|
4070
|
+
|
|
4071
|
+
Optional steps:
|
|
4072
|
+
- Set a `transfer` property (defaults to `:text`). Values may be: :text (default), :html :image, :rtf, :url, and :file, or an array of multiple values. The `transfer` property will automatically convert your option into a [Transfer](https://help.eclipse.org/2020-03/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/Transfer.html) object as per the SWT API.
|
|
4073
|
+
- Specify `drag_source_style` operation (may be: :drop_copy (default), :drop_link, :drop_move, :drop_none, or an array of multiple operations)
|
|
4074
|
+
- Specify `drag_source_effect` (Check [DragSourceEffect](https://help.eclipse.org/2020-06/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DragSourceEffect.html) SWT API for details)
|
|
4075
|
+
- Specify `drop_target_style` operation (may be: :drop_copy (default), :drop_link, :drop_move, :drop_none, or an array of multiple operations)
|
|
4076
|
+
- Specify `drop_target_effect` (Check [DropTargetEffect](https://help.eclipse.org/2020-06/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/dnd/DropTargetEffect.html) SWT API for details)
|
|
4077
|
+
- Set drag operation in `event.detail` (e.g. DND::DROP_COPY) inside `on_drag_enter`
|
|
4078
|
+
|
|
4079
|
+
### Miscellaneous
|
|
4080
|
+
|
|
4081
|
+
#### Multi-DSL Support
|
|
4082
|
+
|
|
4083
|
+
Glimmer is a DSL engine that supports multiple DSLs (Domain Specific Languages):
|
|
4084
|
+
- [SWT](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (Desktop GUI)
|
|
4085
|
+
- [Opal](https://github.com/AndyObtiva/glimmer-dsl-opal): Glimmer DSL for Opal (Web GUI Adapter for Desktop Apps)
|
|
4086
|
+
- [XML](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML) - Useful with [SWT Browser Widget](#browser-widget)
|
|
4087
|
+
- [CSS](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets) - Useful with [SWT Browser Widget](#browser-widget)
|
|
4088
|
+
|
|
4089
|
+
Glimmer automatically recognizes top-level keywords in each DSL and activates DSL accordingly. Glimmer allows mixing DSLs, which comes in handy when doing things like using the SWT Browser widget with XML and CSS. Once done processing a nested DSL top-level keyword, Glimmer switches back to the prior DSL automatically.
|
|
4090
|
+
|
|
4091
|
+
##### SWT
|
|
4092
|
+
|
|
4093
|
+
The SWT DSL was already covered in detail. However, for the sake of mixing DSLs, you need to know that the SWT DSL has the following top-level keywords:
|
|
4094
|
+
- `shell`
|
|
4095
|
+
- `display`
|
|
4096
|
+
- `color`
|
|
4097
|
+
- `observe`
|
|
4098
|
+
- `async_exec`
|
|
4099
|
+
- `sync_exec`
|
|
4100
|
+
|
|
4101
|
+
##### Opal
|
|
4240
4102
|
|
|
4241
|
-
[
|
|
4103
|
+
Full instructions are found in the [Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) DSL page.
|
|
4242
4104
|
|
|
4243
|
-
|
|
4105
|
+
The [Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) DSL is simply a web GUI adapter for desktop apps written in Glimmer. As such, it supports all the DSL keywords of the SWT DSL and shares the same top-level keywords.
|
|
4244
4106
|
|
|
4245
|
-
|
|
4107
|
+
##### XML
|
|
4246
4108
|
|
|
4247
|
-
|
|
4109
|
+
Simply start with `html` keyword and add HTML inside its block using Glimmer DSL syntax.
|
|
4110
|
+
Once done, you may call `to_s`, `to_xml`, or `to_html` to get the formatted HTML output.
|
|
4248
4111
|
|
|
4249
|
-
|
|
4112
|
+
Here are all the Glimmer XML DSL top-level keywords:
|
|
4113
|
+
- `html`
|
|
4114
|
+
- `tag`: enables custom tag creation for exceptional cases by passing tag name as '_name' attribute
|
|
4115
|
+
- `name_space`: enables namespacing html tags
|
|
4250
4116
|
|
|
4251
|
-
|
|
4117
|
+
Element properties are typically passed as a key/value hash (e.g. `section(id: 'main', class: 'accordion')`) . However, for properties like "selected" or "checked", you must leave value `nil` or otherwise pass in front of the hash (e.g. `input(:checked, type: 'checkbox')` )
|
|
4252
4118
|
|
|
4253
|
-
|
|
4119
|
+
Example (basic HTML / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4254
4120
|
|
|
4255
|
-
|
|
4121
|
+
```ruby
|
|
4122
|
+
@xml = html {
|
|
4123
|
+
head {
|
|
4124
|
+
meta(name: "viewport", content: "width=device-width, initial-scale=2.0")
|
|
4125
|
+
}
|
|
4126
|
+
body {
|
|
4127
|
+
h1 { "Hello, World!" }
|
|
4128
|
+
}
|
|
4129
|
+
}
|
|
4130
|
+
puts @xml
|
|
4131
|
+
```
|
|
4132
|
+
|
|
4133
|
+
Output:
|
|
4134
|
+
|
|
4135
|
+
```
|
|
4136
|
+
<html><head><meta name="viewport" content="width=device-width, initial-scale=2.0" /></head><body><h1>Hello, World!</h1></body></html>
|
|
4137
|
+
```
|
|
4138
|
+
|
|
4139
|
+
Example (explicit XML tag / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4256
4140
|
|
|
4257
4141
|
```ruby
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4265
|
-
|
|
4266
|
-
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4142
|
+
puts tag(:_name => "DOCUMENT")
|
|
4143
|
+
```
|
|
4144
|
+
|
|
4145
|
+
Output:
|
|
4146
|
+
|
|
4147
|
+
```
|
|
4148
|
+
<DOCUMENT/>
|
|
4149
|
+
```
|
|
4150
|
+
|
|
4151
|
+
Example (XML namespaces using `name_space` keyword / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4152
|
+
|
|
4153
|
+
```ruby
|
|
4154
|
+
@xml = name_space(:w3c) {
|
|
4155
|
+
html(:id => "thesis", :class => "document") {
|
|
4156
|
+
body(:id => "main") {
|
|
4272
4157
|
}
|
|
4273
|
-
weights 1, 2
|
|
4274
4158
|
}
|
|
4275
|
-
}
|
|
4159
|
+
}
|
|
4160
|
+
puts @xml
|
|
4276
4161
|
```
|
|
4277
4162
|
|
|
4278
|
-
|
|
4163
|
+
Output:
|
|
4279
4164
|
|
|
4280
|
-
|
|
4165
|
+
```
|
|
4166
|
+
<w3c:html id="thesis" class="document"><w3c:body id="main"></w3c:body></w3c:html>
|
|
4167
|
+
```
|
|
4281
4168
|
|
|
4282
|
-
|
|
4169
|
+
Example (XML namespaces using dot operator / you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4283
4170
|
|
|
4284
|
-
|
|
4171
|
+
```ruby
|
|
4172
|
+
@xml = tag(:_name => "DOCUMENT") {
|
|
4173
|
+
document.body(document.id => "main") {
|
|
4174
|
+
}
|
|
4175
|
+
}
|
|
4176
|
+
puts @xml
|
|
4177
|
+
```
|
|
4285
4178
|
|
|
4286
|
-
|
|
4179
|
+
Output:
|
|
4287
4180
|
|
|
4288
|
-
|
|
4181
|
+
```
|
|
4182
|
+
<DOCUMENT><document:body document:id="main"></document:body></DOCUMENT>
|
|
4183
|
+
```
|
|
4184
|
+
|
|
4185
|
+
##### CSS
|
|
4186
|
+
|
|
4187
|
+
Simply start with `css` keyword and add stylesheet rule sets inside its block using Glimmer DSL syntax.
|
|
4188
|
+
Once done, you may call `to_s` or `to_css` to get the formatted CSS output.
|
|
4189
|
+
|
|
4190
|
+
`css` is the only top-level keyword in the Glimmer CSS DSL
|
|
4191
|
+
|
|
4192
|
+
Selectors may be specified by `s` keyword or HTML element keyword directly (e.g. `body`)
|
|
4193
|
+
Rule property values may be specified by `pv` keyword or underscored property name directly (e.g. `font_size`)
|
|
4194
|
+
|
|
4195
|
+
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4289
4196
|
|
|
4290
4197
|
```ruby
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
|
|
4294
|
-
|
|
4198
|
+
@css = css {
|
|
4199
|
+
body {
|
|
4200
|
+
font_size '1.1em'
|
|
4201
|
+
pv 'background', 'white'
|
|
4295
4202
|
}
|
|
4296
|
-
|
|
4203
|
+
|
|
4204
|
+
s('body > h1') {
|
|
4205
|
+
background_color :red
|
|
4206
|
+
pv 'font-size', '2em'
|
|
4207
|
+
}
|
|
4208
|
+
}
|
|
4209
|
+
puts @css
|
|
4297
4210
|
```
|
|
4298
4211
|
|
|
4299
|
-
|
|
4212
|
+
##### Listing / Enabling / Disabling DSLs
|
|
4213
|
+
|
|
4214
|
+
Glimmer provides a number of methods on Glimmer::DSL::Engine to configure DSL support or inquire about it:
|
|
4215
|
+
- `Glimmer::DSL::Engine.dsls`: Lists available Glimmer DSLs
|
|
4216
|
+
- `Glimmer::DSL::Engine.disable_dsl(dsl_name)`: Disables a specific DSL. Useful when there is no need for certain DSLs in a certain application.
|
|
4217
|
+
- `Glimmer::DSL::Engine.disabled_dsls': Lists disabled DSLs
|
|
4218
|
+
- `Glimmer::DSL::Engine.enable_dsl(dsl_name)`: Re-enables disabled DSL
|
|
4219
|
+
- `Glimmer::DSL::Engine.enabled_dsls=(dsl_names)`: Disables all DSLs except the ones specified.
|
|
4220
|
+
|
|
4221
|
+
#### Application Menu Items (About/Preferences)
|
|
4222
|
+
|
|
4223
|
+
Mac applications always have About and Preferences menu items. Glimmer provides widget observer hooks for them on the `display`:
|
|
4224
|
+
- `on_about`: executes code when user selects App Name -> About
|
|
4225
|
+
- `on_preferences`: executes code when user selects App Name -> Preferences or hits 'CMD+,' on the Mac
|
|
4226
|
+
|
|
4227
|
+
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4300
4228
|
|
|
4301
4229
|
```ruby
|
|
4302
|
-
|
|
4303
|
-
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4230
|
+
class Example
|
|
4231
|
+
def initialize
|
|
4232
|
+
display {
|
|
4233
|
+
on_about {
|
|
4234
|
+
message_box(@shell_proxy) {
|
|
4235
|
+
text 'About'
|
|
4236
|
+
message 'About Application'
|
|
4237
|
+
}.open
|
|
4308
4238
|
}
|
|
4309
|
-
|
|
4310
|
-
|
|
4239
|
+
on_preferences {
|
|
4240
|
+
preferences_dialog = dialog {
|
|
4241
|
+
text 'Preferences'
|
|
4242
|
+
row_layout {
|
|
4243
|
+
type :vertical
|
|
4244
|
+
margin_left 15
|
|
4245
|
+
margin_top 15
|
|
4246
|
+
margin_right 15
|
|
4247
|
+
margin_bottom 15
|
|
4248
|
+
}
|
|
4249
|
+
label {
|
|
4250
|
+
text 'Check one of these options:'
|
|
4251
|
+
}
|
|
4252
|
+
button(:radio) {
|
|
4253
|
+
text 'Option 1'
|
|
4254
|
+
}
|
|
4255
|
+
button(:radio) {
|
|
4256
|
+
text 'Option 2'
|
|
4257
|
+
}
|
|
4258
|
+
}
|
|
4259
|
+
preferences_dialog.open
|
|
4311
4260
|
}
|
|
4312
4261
|
}
|
|
4313
|
-
|
|
4314
|
-
|
|
4262
|
+
@shell_proxy = shell {
|
|
4263
|
+
text 'Application Menu Items'
|
|
4264
|
+
fill_layout {
|
|
4265
|
+
margin_width 15
|
|
4266
|
+
margin_height 15
|
|
4267
|
+
}
|
|
4268
|
+
label {
|
|
4269
|
+
text 'Application Menu Items'
|
|
4270
|
+
font height: 30
|
|
4271
|
+
}
|
|
4315
4272
|
}
|
|
4273
|
+
@shell_proxy.open
|
|
4274
|
+
end
|
|
4275
|
+
end
|
|
4276
|
+
|
|
4277
|
+
Example.new
|
|
4278
|
+
```
|
|
4279
|
+
|
|
4280
|
+
#### App Name and Version
|
|
4281
|
+
|
|
4282
|
+
Application name (shows up on the Mac in top menu bar) and version may be specified upon [packaging](#packaging--distribution) by specifying "-Bmac.CFBundleName" and "-Bmac.CFBundleVersion" options.
|
|
4283
|
+
|
|
4284
|
+
Still, if you would like proper application name to show up on the Mac top menu bar during development, you may do so by invoking the SWT `Display.app_name=` method before any Display object has been instantiated (i.e. before any Glimmer widget like shell has been declared).
|
|
4285
|
+
|
|
4286
|
+
Example (you may copy/paste in [`girb`](#girb-glimmer-irb-command)):
|
|
4287
|
+
|
|
4288
|
+
```ruby
|
|
4289
|
+
Display.app_name = 'Glimmer Demo'
|
|
4290
|
+
|
|
4291
|
+
shell(:no_resize) {
|
|
4292
|
+
text "Glimmer"
|
|
4293
|
+
label {
|
|
4294
|
+
text "Hello, World!"
|
|
4316
4295
|
}
|
|
4317
4296
|
}.open
|
|
4318
4297
|
```
|
|
4319
4298
|
|
|
4299
|
+
Also, you may invoke `Display.app_version = '1.0.0'` if needed for OS app version identification reasons during development, replacing `'1.0.0'` with your application version.
|
|
4300
|
+
|
|
4301
|
+
#### Performance Profiling
|
|
4302
|
+
|
|
4303
|
+
JRuby comes with built-in support for performance profiling via the `--profile` option (with some code shown below), which can be accepted by the `glimmer` command too:
|
|
4304
|
+
|
|
4305
|
+
`glimmer --profile path_to_glimmer_app.rb`
|
|
4306
|
+
|
|
4307
|
+
Additionally, add this code to monitor Glimmer app performance around its launch method:
|
|
4308
|
+
|
|
4309
|
+
```ruby
|
|
4310
|
+
require 'jruby/profiler'
|
|
4311
|
+
profile_data = JRuby::Profiler.profile do
|
|
4312
|
+
SomeGlimmerApp.launch
|
|
4313
|
+
end
|
|
4314
|
+
|
|
4315
|
+
profile_printer = JRuby::Profiler::HtmlProfilePrinter.new(profile_data)
|
|
4316
|
+
ps = java.io.PrintStream.new(STDOUT.to_outputstream)
|
|
4317
|
+
```
|
|
4318
|
+
|
|
4319
|
+
When monitoring app startup time performance, make sure to add a hook to the top-level `shell` `on_swt_show` event that exits the app as soon as the shell shows up to end performance profiling and get the results.
|
|
4320
|
+
|
|
4321
|
+
Example:
|
|
4322
|
+
|
|
4323
|
+
```ruby
|
|
4324
|
+
shell {
|
|
4325
|
+
# some code
|
|
4326
|
+
on_swt_show {
|
|
4327
|
+
exit(0)
|
|
4328
|
+
}
|
|
4329
|
+
}
|
|
4330
|
+
```
|
|
4331
|
+
|
|
4332
|
+
You may run `glimmer` with the `--profile.graph` instead for a more detailed output.
|
|
4333
|
+
|
|
4334
|
+
Learn more at the [JRuby Performance Profile WIKI page](https://github.com/jruby/jruby/wiki/Profiling-JRuby).
|
|
4335
|
+
|
|
4320
4336
|
##### SWT Browser Style Options
|
|
4321
4337
|
|
|
4322
4338
|
The `browser` widget can use a particular desktop browser by setting the SWT Style to:
|
|
@@ -4599,7 +4615,7 @@ bin/glimmer samples/hello/hello_canvas_transform.rb
|
|
|
4599
4615
|
|
|
4600
4616
|
For hello-type simple samples, check the following.
|
|
4601
4617
|
|
|
4602
|
-
#### Hello, World!
|
|
4618
|
+
#### Hello, World!
|
|
4603
4619
|
|
|
4604
4620
|
Code:
|
|
4605
4621
|
|
|
@@ -5054,6 +5070,26 @@ Hello, Dialog! Open Dialog
|
|
|
5054
5070
|
|
|
5055
5071
|
|
|
5056
5072
|
|
|
5073
|
+
#### Hello, Code Text!
|
|
5074
|
+
|
|
5075
|
+
This sample demonstrates the Glimmer Built-In [Code Text Custom Widget](#code-text-custom-widget).
|
|
5076
|
+
|
|
5077
|
+
Code:
|
|
5078
|
+
|
|
5079
|
+
[samples/hello/hello_code_text.rb](samples/hello/hello_code_text.rb)
|
|
5080
|
+
|
|
5081
|
+
Hello, Code Text! Ruby Language / Glimmer Theme / Show Line Numbers (default width of 4)
|
|
5082
|
+
|
|
5083
|
+
|
|
5084
|
+
|
|
5085
|
+
Hello, Code Text! JavaScript Language / Pastie Theme / Show Line Numbers (custom width of 2)
|
|
5086
|
+
|
|
5087
|
+
|
|
5088
|
+
|
|
5089
|
+
Hello, Code Text! HTML Language / GitHub Theme / No Line Numbers
|
|
5090
|
+
|
|
5091
|
+
|
|
5092
|
+
|
|
5057
5093
|
#### Hello, Canvas!
|
|
5058
5094
|
|
|
5059
5095
|
This sample demonstrates the use of the `canvas` widget and [Shape DSL](#canvas-shape-dsl) in Glimmer.
|
|
@@ -5123,7 +5159,7 @@ Code:
|
|
|
5123
5159
|
|
|
5124
5160
|
|
|
5125
5161
|
|
|
5126
|
-
#### Tic Tac Toe
|
|
5162
|
+
#### Tic Tac Toe
|
|
5127
5163
|
|
|
5128
5164
|
This sample demonstrates a full MVC application, including GUI layout, text and enablement data-binding, and test-driven development (has [specs](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/spec/samples/elaborate/tic_tac_toe/board_spec.rb)).
|
|
5129
5165
|
|
|
@@ -5137,7 +5173,7 @@ Code:
|
|
|
5137
5173
|
|
|
5138
5174
|
|
|
5139
5175
|
|
|
5140
|
-
#### Contact Manager
|
|
5176
|
+
#### Contact Manager
|
|
5141
5177
|
|
|
5142
5178
|
This sample demonstrates table data-binding, sorting, filtering, GUI layout, MVP pattern, and test-driven development (has [specs](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/spec/samples/elaborate/contact_manager/contact_manager_presenter_spec.rb)).
|
|
5143
5179
|
|
|
@@ -5165,7 +5201,7 @@ Contact Manager - Edit Done
|
|
|
5165
5201
|
|
|
5166
5202
|
|
|
5167
5203
|
|
|
5168
|
-
#### Tetris
|
|
5204
|
+
#### Glimmer Tetris
|
|
5169
5205
|
|
|
5170
5206
|
This sample demonstrates how to build an interactive animated game with MVC architecture, custom-shell/custom-widgets, multi-threading, asynchronous programming, data-binding, canvas shape graphic decorations, canvas shape icon image generation, and keyboard events/shortcuts.
|
|
5171
5207
|
|