glimmer-dsl-opal 0.9.0 → 0.10.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +28 -0
- data/LICENSE.txt +1 -1
- data/README.md +366 -161
- data/VERSION +1 -1
- data/lib/display.rb +1 -1
- data/lib/glimmer-dsl-opal.rb +8 -4
- data/lib/glimmer-dsl-opal/ext/file.rb +1 -1
- data/lib/glimmer-dsl-opal/ext/glimmer/dsl/engine.rb +28 -8
- data/lib/glimmer-dsl-opal/samples/elaborate/contact_manager/contact_repository.rb +4 -4
- data/lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb +2 -2
- data/lib/glimmer-dsl-opal/samples/hello/hello_browser.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_button.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox_group.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_computed.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_computed/contact.rb +21 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_date_time.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_dialog.rb +78 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_group.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_list_multi_selection.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_menu_bar.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_message_box.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_pop_up_context_menu.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_radio.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_radio_group.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_tab.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_table.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_world.rb +4 -4
- data/lib/glimmer-dsl-swt.rb +1 -1
- data/lib/glimmer/config/opal_logger.rb +16 -0
- data/lib/glimmer/dsl/opal/async_exec_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/block_property_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/checkbox_group_selection_data_binding_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/color_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/custom_widget_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/dialog_expression.rb +20 -0
- data/lib/glimmer/dsl/opal/display_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/dsl.rb +1 -1
- data/lib/glimmer/dsl/opal/exec_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/font_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/menu_bar_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/menu_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/message_box_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/radio_group_selection_data_binding_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/rgb_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/rgba_expression.rb +1 -1
- data/lib/glimmer/dsl/opal/swt_expression.rb +4 -4
- data/lib/glimmer/dsl/opal/sync_exec_expression.rb +1 -1
- data/lib/glimmer/swt.rb +1 -1
- data/lib/glimmer/swt/color_proxy.rb +1 -1
- data/lib/glimmer/swt/composite_proxy.rb +16 -2
- data/lib/glimmer/swt/control_editor.rb +1 -1
- data/lib/glimmer/swt/custom/checkbox_group.rb +1 -1
- data/lib/glimmer/swt/custom/radio_group.rb +1 -1
- data/lib/glimmer/swt/dialog_proxy.rb +191 -0
- data/lib/glimmer/swt/display_proxy.rb +34 -5
- data/lib/glimmer/swt/font_proxy.rb +1 -1
- data/lib/glimmer/swt/grid_layout_proxy.rb +11 -16
- data/lib/glimmer/swt/label_proxy.rb +22 -1
- data/lib/{glimmer-dsl-opal/ext/struct.rb → glimmer/swt/latest_dialog_proxy.rb} +19 -12
- data/lib/glimmer/swt/latest_message_box_proxy.rb +25 -1
- data/lib/glimmer/swt/latest_shell_proxy.rb +59 -0
- data/lib/glimmer/swt/layout_data_proxy.rb +4 -0
- data/lib/glimmer/swt/layout_proxy.rb +9 -6
- data/lib/glimmer/swt/make_shift_shell_proxy.rb +1 -1
- data/lib/glimmer/swt/menu_item_proxy.rb +1 -1
- data/lib/glimmer/swt/menu_proxy.rb +3 -3
- data/lib/glimmer/swt/message_box_proxy.rb +45 -16
- data/lib/glimmer/swt/row_layout_proxy.rb +24 -6
- data/lib/glimmer/swt/shell_proxy.rb +43 -9
- data/lib/glimmer/swt/style_constantizable.rb +1 -1
- data/lib/glimmer/swt/swt_proxy.rb +1 -1
- data/lib/glimmer/swt/tab_folder_proxy.rb +1 -1
- data/lib/glimmer/swt/table_editor.rb +1 -1
- data/lib/glimmer/swt/table_item_proxy.rb +1 -1
- data/lib/glimmer/swt/table_proxy.rb +1 -1
- data/lib/glimmer/swt/widget_proxy.rb +50 -17
- data/lib/glimmer/ui/custom_shell.rb +1 -1
- data/lib/glimmer/ui/custom_widget.rb +1 -1
- data/lib/glimmer/util/proc_tracker.rb +15 -6
- data/lib/net/http.rb +30 -2
- data/lib/os.rb +1 -1
- metadata +30 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a69a60c500b662de0e458896e7da698a769ed5823c924d591825d3bfd5845605
|
|
4
|
+
data.tar.gz: 223e76c5d758d5caecfa9843a491acb23302f9c1f1b3cf592af830bfefa4c114
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 79b96f5af0774f9bf5e508af1a67aa6a80cb061f818b295b178dd01e65561003fb573b394f5c21fc03440cfb2f834f95260ae03e5558fb1c24ac9261520fa275
|
|
7
|
+
data.tar.gz: c9c643cd2043e1a62db4f7487f2c2a7a447b09ebc7f33d8d255c1cb6daf2ed78b19aab3be25f1efef7408df02ca61f757f455b69552b9ec4f8ac9c7e35b97291
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 0.10.1
|
|
4
|
+
|
|
5
|
+
- Delaying shell rendering till `#open` method is called as per the right expectation
|
|
6
|
+
- When nesting dialogs on top of each other, disable all previously opened ones leaving only the top-most dialog active
|
|
7
|
+
|
|
8
|
+
## 0.10.0
|
|
9
|
+
|
|
10
|
+
- Hello, Dialog! Sample
|
|
11
|
+
- Support `dialog` widget
|
|
12
|
+
- Support `width` and `height` on `layout_data` for `row_layout`
|
|
13
|
+
- Support `center` for `row_layout`
|
|
14
|
+
|
|
15
|
+
## 0.9.3
|
|
16
|
+
|
|
17
|
+
- Extracted pure Ruby Struct to pure-struct gem (since it's also used by YASL)
|
|
18
|
+
- Alpha experimental incomplete implementation of Net::HTTP.post_form
|
|
19
|
+
- Fixed issue with not being able to interact with a shell proxy (LatestShellProxy) after opening (made class autoupgradable to attached ShellProxy after document ready)
|
|
20
|
+
|
|
21
|
+
## 0.9.2
|
|
22
|
+
|
|
23
|
+
- Fixed issue with opening message_box after internalizing the Document.ready? block
|
|
24
|
+
- Fixed issue with replacing newlines with HTML newlines in `label` and `message_box` text
|
|
25
|
+
|
|
26
|
+
## 0.9.1
|
|
27
|
+
|
|
28
|
+
- Log errors to error stream ($stderr) instead of standard out (STDOUT)
|
|
29
|
+
- Fixed issue with opening shell caused by internalizing the Document.ready? block
|
|
30
|
+
|
|
3
31
|
## 0.9.0
|
|
4
32
|
|
|
5
33
|
- Support `menu_bar`
|
data/LICENSE.txt
CHANGED
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 Opal 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.10.1 (Pure Ruby Web GUI)
|
|
2
2
|
[](http://badge.fury.io/rb/glimmer-dsl-opal)
|
|
3
3
|
[](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
|
4
4
|
|
|
@@ -12,167 +12,202 @@ Use in one of two ways:
|
|
|
12
12
|
|
|
13
13
|
Glimmer DSL for Opal successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal Ruby](https://opalrb.com/) inside a web browser, and as such inherits the full range of powerful Glimmer desktop [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities for the web.
|
|
14
14
|
|
|
15
|
-
####
|
|
15
|
+
#### Hello, Table! Sample
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
```ruby
|
|
20
|
-
require 'glimmer-dsl-opal/samples/elaborate/tic_tac_toe'
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Glimmer GUI code from [glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb](lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb):
|
|
17
|
+
Glimmer GUI code from [glimmer-dsl-opal/samples/hello/hello_table.rb](lib/glimmer-dsl-opal/samples/hello/hello_table.rb):
|
|
24
18
|
|
|
25
19
|
```ruby
|
|
26
20
|
# ...
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
21
|
+
shell {
|
|
22
|
+
grid_layout
|
|
23
|
+
|
|
24
|
+
text 'Hello, Table!'
|
|
25
|
+
|
|
26
|
+
label {
|
|
27
|
+
layout_data :center, :center, true, false
|
|
28
|
+
|
|
29
|
+
text 'Baseball Playoff Schedule'
|
|
30
|
+
font height: 30, style: :bold
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
combo(:read_only) {
|
|
34
|
+
layout_data :center, :center, true, false
|
|
35
|
+
selection bind(BaseballGame, :playoff_type)
|
|
36
|
+
font height: 16
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
table(:editable) { |table_proxy|
|
|
40
|
+
layout_data :fill, :fill, true, true
|
|
41
|
+
|
|
42
|
+
table_column {
|
|
43
|
+
text 'Game Date'
|
|
44
|
+
width 150
|
|
45
|
+
sort_property :date # ensure sorting by real date value (not `game_date` string specified in items below)
|
|
46
|
+
editor :date_drop_down, property: :date_time
|
|
46
47
|
}
|
|
48
|
+
table_column {
|
|
49
|
+
text 'Game Time'
|
|
50
|
+
width 150
|
|
51
|
+
sort_property :time # ensure sorting by real time value (not `game_time` string specified in items below)
|
|
52
|
+
editor :time, property: :date_time
|
|
53
|
+
}
|
|
54
|
+
table_column {
|
|
55
|
+
text 'Ballpark'
|
|
56
|
+
width 180
|
|
57
|
+
editor :none
|
|
58
|
+
}
|
|
59
|
+
table_column {
|
|
60
|
+
text 'Home Team'
|
|
61
|
+
width 150
|
|
62
|
+
editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
|
|
63
|
+
}
|
|
64
|
+
table_column {
|
|
65
|
+
text 'Away Team'
|
|
66
|
+
width 150
|
|
67
|
+
editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
|
|
68
|
+
}
|
|
69
|
+
table_column {
|
|
70
|
+
text 'Promotion'
|
|
71
|
+
width 150
|
|
72
|
+
# default text editor is used here
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
# Data-bind table items (rows) to a model collection property, specifying column properties ordering per nested model
|
|
76
|
+
items bind(BaseballGame, :schedule), column_properties(:game_date, :game_time, :ballpark, :home_team, :away_team, :promotion)
|
|
77
|
+
|
|
78
|
+
# Data-bind table selection
|
|
79
|
+
selection bind(BaseballGame, :selected_game)
|
|
80
|
+
|
|
81
|
+
# Default initial sort property
|
|
82
|
+
sort_property :date
|
|
83
|
+
|
|
84
|
+
# Sort by these additional properties after handling sort by the column the user clicked
|
|
85
|
+
additional_sort_properties :date, :time, :home_team, :away_team, :ballpark, :promotion
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
button {
|
|
89
|
+
text 'Book Selected Game'
|
|
90
|
+
layout_data :center, :center, true, false
|
|
91
|
+
font height: 16
|
|
92
|
+
enabled bind(BaseballGame, :selected_game)
|
|
93
|
+
|
|
94
|
+
on_widget_selected {
|
|
95
|
+
book_selected_game
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}.open
|
|
47
99
|
# ...
|
|
48
100
|
```
|
|
49
|
-
Tic Tac Toe on the web (using the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem):
|
|
50
101
|
|
|
51
|
-
!
|
|
52
|
-
|
|
53
|
-
|
|
102
|
+
**Hello, Table! originally running on the desktop (using the [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):**
|
|
54
103
|
|
|
55
|
-
|
|
104
|
+
|
|
56
105
|
|
|
57
|
-
!
|
|
58
|
-
|
|
59
|
-
|
|
106
|
+
**Hello, Table! (same code) running on the web via Opal on Rails (using the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem):**
|
|
60
107
|
|
|
61
|
-
|
|
108
|
+
|
|
62
109
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
[Hello samples](#hello-samples):
|
|
66
|
-
|
|
67
|
-
- [Hello, World!](#hello-world)
|
|
68
|
-
- [Hello, Combo!](#hello-combo)
|
|
69
|
-
- [Hello, Computed!](#hello-computed)
|
|
70
|
-
- [Hello, List Single Selection!](#hello-list-single-selection)
|
|
71
|
-
- [Hello, List Multi Selection!](#hello-list-multi-selection)
|
|
72
|
-
- [Hello, Browser!](#hello-browser)
|
|
73
|
-
- [Hello, Tab!](#hello-tab)
|
|
74
|
-
- [Hello, Custom Widget!](#hello-custom-widget)
|
|
75
|
-
- [Hello, Custom Shell!](#hello-custom-shell)
|
|
76
|
-
- [Hello, Radio!](#hello-radio)
|
|
77
|
-
- [Hello, Radio Group!](#hello-radio-group)
|
|
78
|
-
- [Hello, Group!](#hello-group)
|
|
79
|
-
- [Hello, Checkbox!](#hello-checkbox)
|
|
80
|
-
- [Hello, Checkbox Group!](#hello-checkbox-group)
|
|
81
|
-
- [Hello, Date Time!](#hello-date-time)
|
|
82
|
-
- [Hello, Table!](#hello-table)
|
|
83
|
-
- [Hello, Button!](#hello-button)
|
|
84
|
-
- [Hello, Message Box!](#hello-message-box)
|
|
85
|
-
- [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu)
|
|
86
|
-
- [Hello, Menu Bar!](#hello-menu-bar)
|
|
87
|
-
|
|
88
|
-
[Elaborate samples](#elaborate-samples):
|
|
89
|
-
|
|
90
|
-
- [Login](#login)
|
|
91
|
-
- [Tic Tac Toe](#tic-tac-toe)
|
|
92
|
-
- [Contact Manager](#contact-manager)
|
|
93
|
-
|
|
94
|
-
External:
|
|
95
|
-
|
|
96
|
-
- [Glimmer Calculator](#glimmer-calculator)
|
|
110
|
+
Hello, Table! Editing Game Date
|
|
97
111
|
|
|
98
|
-
|
|
99
|
-
- [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
|
|
100
|
-
- [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
|
|
101
|
-
- [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
|
|
102
|
-
- [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
|
|
112
|
+
|
|
103
113
|
|
|
104
|
-
|
|
114
|
+
Hello, Table! Editing Game Time
|
|
105
115
|
|
|
106
|
-
|
|
116
|
+
|
|
107
117
|
|
|
108
|
-
|
|
109
|
-
- `button`
|
|
110
|
-
- `browser`
|
|
111
|
-
- `calendar`
|
|
112
|
-
- `checkbox`
|
|
113
|
-
- `checkbox_group`
|
|
114
|
-
- `combo`
|
|
115
|
-
- `composite`
|
|
116
|
-
- `date`
|
|
117
|
-
- `date_drop_down`
|
|
118
|
-
- `group`
|
|
119
|
-
- `label`
|
|
120
|
-
- `list` (w/ optional `:multi` SWT style)
|
|
121
|
-
- `menu`
|
|
122
|
-
- `menu_bar`
|
|
123
|
-
- `menu_item`
|
|
124
|
-
- `message_box`
|
|
125
|
-
- `radio`
|
|
126
|
-
- `radio_group`
|
|
127
|
-
- `scrolled_composite`
|
|
128
|
-
- `shell`
|
|
129
|
-
- `tab_folder`
|
|
130
|
-
- `tab_item`
|
|
131
|
-
- `table`
|
|
132
|
-
- `table_column`
|
|
133
|
-
- `text`
|
|
134
|
-
- `time`
|
|
135
|
-
- `message_box`
|
|
136
|
-
- Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget
|
|
137
|
-
- Glimmer::UI::CustomShell: ability to define any keyword as a custom shell (aka custom window) that opens in a new browser window (tab) automatically unless there is no shell open in the current browser window (tab)
|
|
118
|
+
Hello, Table! Editing Home Team
|
|
138
119
|
|
|
139
|
-
|
|
140
|
-
- `grid_layout`
|
|
141
|
-
- `row_layout`
|
|
142
|
-
- `fill_layout`
|
|
143
|
-
- `layout_data`
|
|
120
|
+
|
|
144
121
|
|
|
145
|
-
|
|
146
|
-
- `color`
|
|
147
|
-
- `font`
|
|
148
|
-
- `Point` class used in setting location on widgets
|
|
149
|
-
- `swt` and `SWT` class to set SWT styles on widgets
|
|
122
|
+
Hello, Table! Sorted Game Date Ascending
|
|
150
123
|
|
|
151
|
-
|
|
152
|
-
- `bind`
|
|
153
|
-
- `observe`
|
|
154
|
-
- `on_widget_selected`
|
|
155
|
-
- `on_modify_text`
|
|
156
|
-
- `on_key_pressed` (and SWT alias `on_swt_keydown`)
|
|
157
|
-
- `on_key_released` (and SWT alias `on_swt_keyup`)
|
|
158
|
-
- `on_mouse_down` (and SWT alias `on_swt_mousedown`)
|
|
159
|
-
- `on_mouse_up` (and SWT alias `on_swt_mouseup`)
|
|
124
|
+
|
|
160
125
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
-
|
|
126
|
+
Hello, Table! Sorted Game Date Descending
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
Hello, Table! Playoff Type Combo
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
Hello, Table! Playoff Type Changed
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
Hello, Table! Game Booked
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
NOTE: Glimmer DSL for Opal is an alpha project. Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
|
|
143
|
+
|
|
144
|
+
**Alpha Version** 0.10.1 only supports bare-minimum capabilities for the included [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written for [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt))
|
|
145
|
+
|
|
146
|
+
Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
|
|
147
|
+
- [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)
|
|
148
|
+
- [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
|
|
149
|
+
- [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
|
|
150
|
+
- [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
|
|
151
|
+
|
|
152
|
+
## Table of Contents
|
|
153
|
+
|
|
154
|
+
- [Glimmer DSL for Opal 0.10.1 (Pure Ruby Web GUI)](#-glimmer-dsl-for-opal-0101-pure-ruby-web-gui)
|
|
155
|
+
- [Principles](#principles)
|
|
156
|
+
- [Background](#background)
|
|
157
|
+
- [Pre-requisites](#pre-requisites)
|
|
158
|
+
- [Setup](#setup)
|
|
159
|
+
- [Supported Glimmer DSL Keywords](#supported-glimmer-dsl-keywords)
|
|
160
|
+
- [Samples](#samples)
|
|
161
|
+
- [Hello Samples](#hello-samples)
|
|
162
|
+
- [Hello, World!](#hello-world)
|
|
163
|
+
- [Hello, Combo!](#hello-combo)
|
|
164
|
+
- [Hello, Computed!](#hello-computed)
|
|
165
|
+
- [Hello, List Single Selection!](#hello-list-single-selection)
|
|
166
|
+
- [Hello, List Multi Selection!](#hello-list-multi-selection)
|
|
167
|
+
- [Hello, Browser!](#hello-browser)
|
|
168
|
+
- [Hello, Tab!](#hello-tab)
|
|
169
|
+
- [Hello, Custom Widget!](#hello-custom-widget)
|
|
170
|
+
- [Hello, Custom Shell!](#hello-custom-shell)
|
|
171
|
+
- [Hello, Radio!](#hello-radio)
|
|
172
|
+
- [Hello, Radio Group!](#hello-radio-group)
|
|
173
|
+
- [Hello, Group!](#hello-group)
|
|
174
|
+
- [Hello, Checkbox!](#hello-checkbox)
|
|
175
|
+
- [Hello, Checkbox Group!](#hello-checkbox-group)
|
|
176
|
+
- [Hello, Date Time!](#hello-date-time)
|
|
177
|
+
- [Hello, Table!](#hello-table)
|
|
178
|
+
- [Hello, Button!](#hello-button)
|
|
179
|
+
- [Hello, Message Box!](#hello-message-box)
|
|
180
|
+
- [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu)
|
|
181
|
+
- [Hello, Menu Bar!](#hello-menu-bar)
|
|
182
|
+
- [Hello, Dialog!](#hello-dialog)
|
|
183
|
+
- [Elaborate Samples](#elaborate-samples)
|
|
184
|
+
- [Login](#login)
|
|
185
|
+
- [Tic Tac Toe](#tic-tac-toe)
|
|
186
|
+
- [Contact Manager](#contact-manager)
|
|
187
|
+
- [External Samples](#external-samples)
|
|
188
|
+
- [Glimmer Calculator](#glimmer-calculator)
|
|
189
|
+
- [Glimmer Supporting Libraries](#glimmer-supporting-libraries)
|
|
190
|
+
- [Glimmer Process](#glimmer-process)
|
|
191
|
+
- [Help](#help)
|
|
192
|
+
- [Issues](#issues)
|
|
193
|
+
- [Chat](#chat)
|
|
194
|
+
- [Feature Suggestions](#feature-suggestions)
|
|
195
|
+
- [Change Log](#change-log)
|
|
196
|
+
- [Contributing](#contributing)
|
|
197
|
+
- [Contributors](#contributors)
|
|
198
|
+
- [License](#license)
|
|
164
199
|
|
|
165
200
|
## Principles
|
|
166
201
|
|
|
167
|
-
- **Live purely in Rubyland via the Glimmer GUI DSL**, completely oblivious to web browser technologies.
|
|
202
|
+
- **Live purely in Rubyland via the Glimmer GUI DSL**, completely oblivious to web browser technologies, thanks to [Opal](https://opalrb.com/).
|
|
168
203
|
- **Forget Routers!** Glimmer DSL for Opal supports auto-routing of custom shells (windows), which are opened as separate tabs in a web browser with automatically generated routes and bookmarkable URLs.
|
|
169
204
|
- **HTML is strictly made for creating documents not interactive applications**. As such, software engineers can avoid it and focus on creating web applications more productively with Glimmer DSL for Opal in pure Ruby instead (just like they do in desktop development) while content creators and web designers can be the ones responsible for creating HTML documents for web content purposes only as HTML was originally intended. That way, Glimmer web GUI is used and embedded in web pages when providing users with applications while the rest of the web pages are maintained by non-engineers as pure HTML. This achieves a correct separation of responsibilities and better productivity and maintainability.
|
|
170
|
-
- **Approximate styles by developers via the Glimmer GUI DSL. Perfect styles by designers via pure CSS**. Developers can simply build GUI with approximate styling similar to desktop GUI without worrying about pixel-perfect
|
|
205
|
+
- **Approximate styles by developers via the Glimmer GUI DSL. Perfect styles by designers via pure CSS**. Developers can simply build GUI with approximate styling similar to desktop GUI and mockups without worrying about pixel-perfect aesthetics. Web designers can take styling further with pure CSS since every HTML element auto-generated by Glimmer DSL for Opal has a predictable ID and CSS class. This achieves a proper separation of responsibilities between developers and designers.
|
|
171
206
|
- **Web servers are used just like servers in traditional client/server architecture**, meaning they simply provide RMI services to enable centralizing some of the application logic and data in the cloud to make available everywhere and enable data-sharing with others.
|
|
172
207
|
|
|
173
208
|
## Background
|
|
174
209
|
|
|
175
|
-
The original idea behind Glimmer DSL for Opal was that you start by having a [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) desktop app that communicates with a Rails API for any web/cloud concerns. The pure Ruby [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) is very simple, so it is more productive to build GUI in it since it does not go through a server/client request/response cycle and can be iterated on locally with a much shorter feedback cycle. Once the GUI and the rest of the app is built. You simply embed it in a Rails app as a one line require statement
|
|
210
|
+
The original idea behind Glimmer DSL for Opal (which later evolved) was that you start by having a [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) desktop app that communicates with a Rails API for any web/cloud concerns. The pure Ruby [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) is very simple, so it is more productive to build GUI in it since it does not go through a server/client request/response cycle and can be iterated on locally with a much shorter feedback cycle. Once the GUI and the rest of the app is built. You simply embed it in a Rails app as a one line require statement, and BOOM, it just works on the web inside a web browser with the same server/client communication you had in the desktop app (I am working on adding minimal support for net/http in Opal so that desktop apps that use it continue to work in a web browser. Until then, just use [Opal-jQuery](https://github.com/opal/opal-jquery) http support). That way, you get two apps for one: desktop and web.
|
|
176
211
|
|
|
177
212
|
Part of the idea is that web browsers just render GUI widgets similar to those of a desktop app (after all a web browser is a desktop app), so whether you run your GUI on the desktop or on the web should just be a low-level concern, hopefully automated completely with Glimmer DSL for Opal.
|
|
178
213
|
|
|
@@ -214,7 +249,7 @@ Add the following to `Gemfile`:
|
|
|
214
249
|
gem 'opal-rails', '~> 1.1.2'
|
|
215
250
|
gem 'opal-async', '~> 1.2.0'
|
|
216
251
|
gem 'opal-jquery', '~> 0.4.4'
|
|
217
|
-
gem 'glimmer-dsl-opal', '~> 0.
|
|
252
|
+
gem 'glimmer-dsl-opal', '~> 0.10.1'
|
|
218
253
|
gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
|
|
219
254
|
gem 'glimmer-dsl-css', '~> 1.1.0', require: false
|
|
220
255
|
|
|
@@ -239,12 +274,6 @@ Modify `config/routes.rb`:
|
|
|
239
274
|
root to: 'welcomes#index'
|
|
240
275
|
```
|
|
241
276
|
|
|
242
|
-
Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
|
|
243
|
-
|
|
244
|
-
```ruby
|
|
245
|
-
require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
|
|
246
|
-
```
|
|
247
|
-
|
|
248
277
|
Edit `app/views/layouts/application.html.erb` and add the following below other `stylesheet_link_tag` declarations:
|
|
249
278
|
|
|
250
279
|
```erb
|
|
@@ -253,32 +282,93 @@ Edit `app/views/layouts/application.html.erb` and add the following below other
|
|
|
253
282
|
|
|
254
283
|
Clear the file `app/views/welcomes/index.html.erb` from any content.
|
|
255
284
|
|
|
256
|
-
|
|
285
|
+
Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`), and add Glimmer GUI DSL code or a require statement for one of the samples below.
|
|
257
286
|
|
|
258
287
|
```ruby
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
288
|
+
require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
|
|
289
|
+
|
|
290
|
+
# require-statement/code goes here.
|
|
262
291
|
```
|
|
263
292
|
|
|
264
293
|
Example to confirm setup is working:
|
|
265
294
|
|
|
266
295
|
```ruby
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
}
|
|
279
|
-
|
|
296
|
+
require 'glimmer-dsl-opal'
|
|
297
|
+
|
|
298
|
+
include Glimmer
|
|
299
|
+
|
|
300
|
+
shell {
|
|
301
|
+
fill_layout
|
|
302
|
+
text 'Example to confirm setup is working'
|
|
303
|
+
label {
|
|
304
|
+
text "Welcome to Glimmer DSL for Opal!"
|
|
305
|
+
foreground :red
|
|
306
|
+
font height: 24
|
|
307
|
+
}
|
|
308
|
+
}.open
|
|
280
309
|
```
|
|
281
310
|
|
|
311
|
+
## Supported Glimmer DSL Keywords
|
|
312
|
+
|
|
313
|
+
The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
|
|
314
|
+
|
|
315
|
+
Widgets:
|
|
316
|
+
- `button`: featured in [Hello, Checkbox!](#hello-checkbox) / [Hello, Button!](#hello-button) / [Hello, Table!](#hello-table) / [Hello, Radio Group!](#hello-radio-group) / [Hello, Radio!](#hello-radio) / [Hello, Message Box!](#hello-message-box) / [Hello, List Single Selection!](#hello-list-single-selection) / [Hello, List Multi Selection!](#hello-list-multi-selection) / [Hello, Group!](#hello-group) / [Hello, Combo!](#hello-combo) / [Hello, Checkbox Group!](#hello-checkbox-group) / [Contact Manager](#contact-manager) / [Tic Tac Toe](#tic-tac-toe) / [Login](#login)
|
|
317
|
+
- `browser`: featured in [Hello, Browser!](#hello-browser)
|
|
318
|
+
- `calendar`: featured in [Hello, Date Time!](#hello-date-time)
|
|
319
|
+
- `checkbox`: featured in [Hello, Checkbox Group!](#hello-checkbox-group) / [Hello, Checkbox!](#hello-checkbox)
|
|
320
|
+
- `checkbox_group`: featured in [Hello, Checkbox Group!](#hello-checkbox-group)
|
|
321
|
+
- `combo`: featured in [Hello, Table!](#hello-table) / [Hello, Combo!](#hello-combo)
|
|
322
|
+
- `composite`: featured in [Hello, Radio!](#hello-radio) / [Hello, Computed!](#hello-computed) / [Hello, Checkbox!](#hello-checkbox) / [Tic Tac Toe](#tic-tac-toe) / [Login](#login) / [Contact Manager](#contact-manager)
|
|
323
|
+
- `date`: featured in [Hello, Table!](#hello-table) / [Hello, Date Time!](#hello-date-time) / [Hello, Custom Shell!](#hello-custom-shell) / [Tic Tac Toe](#tic-tac-toe)
|
|
324
|
+
- `date_drop_down`: featured in [Hello, Table!](#hello-table) / [Hello, Date Time!](#hello-date-time)
|
|
325
|
+
- `dialog`: featured in [Hello, Dialog!](#hello-dialog)
|
|
326
|
+
- `group`: featured in [Hello, Group!](#hello-group) / [Contact Manager](#contact-manager)
|
|
327
|
+
- `label`: featured in [Hello, Computed!](#hello-computed) / [Hello, Checkbox Group!](#hello-checkbox-group) / [Hello, Checkbox!](#hello-checkbox) / [Hello, World!](#hello-world) / [Hello, Table!](#hello-table) / [Hello, Tab!](#hello-tab) / [Hello, Radio Group!](#hello-radio-group) / [Hello, Radio!](#hello-radio) / [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu) / [Hello, Menu Bar!](#hello-menu-bar) / [Hello, Date Time!](#hello-date-time) / [Hello, Custom Widget!](#hello-custom-widget) / [Hello, Custom Shell!](#hello-custom-shell) / [Contact Manager](#contact-manager) / [Login](#login)
|
|
328
|
+
- `list` (w/ optional `:multi` SWT style): featured in [Hello, List Single Selection!](#hello-list-single-selection) / [Hello, List Multi Selection!](#hello-list-multi-selection) / [Contact Manager](#contact-manager)
|
|
329
|
+
- `menu`: featured in [Hello, Menu Bar!](#hello-menu-bar) / [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu) / [Hello, Table!](#hello-table)
|
|
330
|
+
- `menu_bar`: featured in [Hello, Menu Bar!](#hello-menu-bar)
|
|
331
|
+
- `menu_item`: featured in [Hello, Table!](#hello-table) / [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu) / [Hello, Menu Bar!](#hello-menu-bar)
|
|
332
|
+
- `message_box`: featured in [Hello, Table!](#hello-table) / [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu) / [Hello, Message Box!](#hello-message-box) / [Hello, Menu Bar!](#hello-menu-bar)
|
|
333
|
+
- `radio`: featured in [Hello, Radio!](#hello-radio) / [Hello, Group!](#hello-group)
|
|
334
|
+
- `radio_group`: featured in [Hello, Radio Group!](#hello-radio-group)
|
|
335
|
+
- `scrolled_composite`
|
|
336
|
+
- `shell`: featured in [Hello, Checkbox!](#hello-checkbox) / [Hello, Button!](#hello-button) / [Hello, Table!](#hello-table) / [Hello, Tab!](#hello-tab) / [Hello, Radio Group!](#hello-radio-group) / [Hello, Radio!](#hello-radio) / [Hello, List Single Selection!](#hello-list-single-selection) / [Hello, List Multi Selection!](#hello-list-multi-selection) / [Hello, Group!](#hello-group) / [Hello, Date Time!](#hello-date-time) / [Hello, Custom Shell!](#hello-custom-shell) / [Hello, Computed!](#hello-computed) / [Hello, Combo!](#hello-combo) / [Hello, Checkbox Group!](#hello-checkbox-group) / [Contact Manager](#contact-manager) / [Tic Tac Toe](#tic-tac-toe) / [Login](#login)
|
|
337
|
+
- `tab_folder`: featured in [Hello, Tab!](#hello-tab)
|
|
338
|
+
- `tab_item`: featured in [Hello, Tab!](#hello-tab)
|
|
339
|
+
- `table`: featured in [Hello, Custom Shell!](#hello-custom-shell) / [Hello, Table!](#hello-table) / [Contact Manager](#contact-manager)
|
|
340
|
+
- `table_column`: featured in [Hello, Table!](#hello-table) / [Hello, Custom Shell!](#hello-custom-shell) / [Contact Manager](#contact-manager)
|
|
341
|
+
- `text`: featured in [Hello, Computed!](#hello-computed) / [Login](#login) / [Contact Manager](#contact-manager)
|
|
342
|
+
- `time`: featured in [Hello, Table!](#hello-table) / [Hello, Date Time!](#hello-date-time)
|
|
343
|
+
- Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget - featured in [Hello, Custom Widget!](#hello-custom-widget)
|
|
344
|
+
- Glimmer::UI::CustomShell: ability to define any keyword as a custom shell (aka custom window) that opens in a new browser window (tab) automatically unless there is no shell open in the current browser window (tab) - featured in [Hello, Custom Shell!](#hello-custom-shell)
|
|
345
|
+
|
|
346
|
+
Layouts:
|
|
347
|
+
- `grid_layout`: featured in [Hello, Custom Shell!](#hello-custom-shell) / [Hello, Computed!](#hello-computed) / [Hello, Table!](#hello-table) / [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu) / [Hello, Menu Bar!](#hello-menu-bar) / [Hello, List Single Selection!](#hello-list-single-selection) / [Hello, List Multi Selection!](#hello-list-multi-selection) / [Contact Manager](#contact-manager) / [Login](#login) / [Tic Tac Toe](#tic-tac-toe)
|
|
348
|
+
- `row_layout`: featured in [Hello, Radio Group!](#hello-radio-group) / [Hello, Radio!](#hello-radio) / [Hello, Group!](#hello-group) / [Hello, Date Time!](#hello-date-time) / [Hello, Combo!](#hello-combo) / [Hello, Checkbox Group!](#hello-checkbox-group) / [Hello, Checkbox!](#hello-checkbox) / [Contact Manager](#contact-manager)
|
|
349
|
+
- `fill_layout`: featured in [Hello, Custom Widget!](#hello-custom-widget)
|
|
350
|
+
- `layout_data`: featured in [Hello, Table!](#hello-table) / [Hello, Custom Shell!](#hello-custom-shell) / [Hello, Computed!](#hello-computed) / [Tic Tac Toe](#tic-tac-toe) / [Contact Manager](#contact-manager)
|
|
351
|
+
|
|
352
|
+
Graphics/Style:
|
|
353
|
+
- `color`: featured in [Hello, Custom Widget!](#hello-custom-widget) / [Hello, Menu Bar!](#hello-menu-bar)
|
|
354
|
+
- `font`: featured in [Hello, Checkbox Group!](#hello-checkbox-group) / [Hello, Checkbox!](#hello-checkbox) / [Hello, Table!](#hello-table) / [Hello, Radio Group!](#hello-radio-group) / [Hello, Radio!](#hello-radio) / [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu) / [Hello, Menu Bar!](#hello-menu-bar) / [Hello, Group!](#hello-group) / [Hello, Date Time!](#hello-date-time) / [Hello, Custom Widget!](#hello-custom-widget) / [Hello, Custom Shell!](#hello-custom-shell) / [Contact Manager](#contact-manager) / [Tic Tac Toe](#tic-tac-toe)
|
|
355
|
+
- `Point` class used in setting location on widgets
|
|
356
|
+
- `swt` and `SWT` class to set SWT styles on widgets - featured in [Hello, Custom Shell!](#hello-custom-shell) / [Login](#login) / [Contact Manager](#contact-manager)
|
|
357
|
+
|
|
358
|
+
Data-Binding/Observers:
|
|
359
|
+
- `bind`: featured in [Hello, Computed!](#hello-computed) / [Hello, Combo!](#hello-combo) / [Hello, Checkbox Group!](#hello-checkbox-group) / [Hello, Checkbox!](#hello-checkbox) / [Hello, Button!](#hello-button) / [Hello, Table!](#hello-table) / [Hello, Radio Group!](#hello-radio-group) / [Hello, Radio!](#hello-radio) / [Hello, List Single Selection!](#hello-list-single-selection) / [Hello, List Multi Selection!](#hello-list-multi-selection) / [Hello, Group!](#hello-group) / [Hello, Date Time!](#hello-date-time) / [Hello, Custom Widget!](#hello-custom-widget) / [Hello, Custom Shell!](#hello-custom-shell) / [Login](#login) / [Contact Manager](#contact-manager) / [Tic Tac Toe](#tic-tac-toe)
|
|
360
|
+
- `observe`: featured in [Hello, Table!](#hello-table) / [Tic Tac Toe](#tic-tac-toe)
|
|
361
|
+
- `on_widget_selected`: featured in [Hello, Combo!](#hello-combo) / [Hello, Checkbox Group!](#hello-checkbox-group) / [Hello, Checkbox!](#hello-checkbox) / [Hello, Button!](#hello-button) / [Hello, Table!](#hello-table) / [Hello, Radio Group!](#hello-radio-group) / [Hello, Radio!](#hello-radio) / [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu) / [Hello, Message Box!](#hello-message-box) / [Hello, Menu Bar!](#hello-menu-bar) / [Hello, List Single Selection!](#hello-list-single-selection) / [Hello, List Multi Selection!](#hello-list-multi-selection) / [Hello, Group!](#hello-group) / [Contact Manager](#contact-manager) / [Login](#login) / [Tic Tac Toe](#tic-tac-toe)
|
|
362
|
+
- `on_modify_text`
|
|
363
|
+
- `on_key_pressed` (and SWT alias `on_swt_keydown`) - featured in [Login](#login) / [Contact Manager](#contact-manager)
|
|
364
|
+
- `on_key_released` (and SWT alias `on_swt_keyup`)
|
|
365
|
+
- `on_mouse_down` (and SWT alias `on_swt_mousedown`)
|
|
366
|
+
- `on_mouse_up` (and SWT alias `on_swt_mouseup`) - featured in [Hello, Custom Shell!](#hello-custom-shell) / [Contact Manager](#contact-manager)
|
|
367
|
+
|
|
368
|
+
Event loop:
|
|
369
|
+
- `display`: featured in [Tic Tac Toe](#tic-tac-toe)
|
|
370
|
+
- `async_exec`: featured in [Hello, Custom Widget!](#hello-custom-widget) / [Hello, Custom Shell!](#hello-custom-shell)
|
|
371
|
+
|
|
282
372
|
## Samples
|
|
283
373
|
|
|
284
374
|
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)
|
|
@@ -2144,6 +2234,14 @@ You should see "Hello, Pop Up Context Menu!"
|
|
|
2144
2234
|
|
|
2145
2235
|
#### Hello, Menu Bar!
|
|
2146
2236
|
|
|
2237
|
+
This sample demonstrates a menu bar similar to the File menu bar you see at the top of desktop applications.
|
|
2238
|
+
|
|
2239
|
+
In web applications, it is typically used to provide website information architecture by denoting things like Products, News, Careers, and About.
|
|
2240
|
+
|
|
2241
|
+
In web applications, it is also typically styled by CSS with margin/padding around every menu, distancing it from the top.
|
|
2242
|
+
|
|
2243
|
+
When auto-webifying a pre-existing desktop application, the menu bar can be hidden with CSS if not needed, or simply shown on hover only. Web designers could decide these things to their heart's content with pure CSS independently of the developers' code.
|
|
2244
|
+
|
|
2147
2245
|
Add the following require statement to `app/assets/javascripts/application.rb`
|
|
2148
2246
|
|
|
2149
2247
|
```ruby
|
|
@@ -2436,6 +2534,99 @@ You should see "Hello, Menu Bar!"
|
|
|
2436
2534
|
|
|
2437
2535
|
|
|
2438
2536
|
|
|
2537
|
+
#### Hello, Dialog!
|
|
2538
|
+
|
|
2539
|
+
This sample demonstrates a modal dialog similar to message_box, but allows adding arbitrary widgets, not just a message.
|
|
2540
|
+
|
|
2541
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
|
2542
|
+
|
|
2543
|
+
```ruby
|
|
2544
|
+
require 'glimmer-dsl-opal/samples/hello/hello_dialog'
|
|
2545
|
+
```
|
|
2546
|
+
|
|
2547
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
|
2548
|
+
|
|
2549
|
+
```ruby
|
|
2550
|
+
include Glimmer
|
|
2551
|
+
|
|
2552
|
+
shell {
|
|
2553
|
+
row_layout :vertical
|
|
2554
|
+
|
|
2555
|
+
text 'Hello, Dialog!'
|
|
2556
|
+
|
|
2557
|
+
7.times { |n|
|
|
2558
|
+
dialog_number = n + 1
|
|
2559
|
+
|
|
2560
|
+
button {
|
|
2561
|
+
layout_data {
|
|
2562
|
+
width 200
|
|
2563
|
+
height 50
|
|
2564
|
+
}
|
|
2565
|
+
text "Dialog #{dialog_number}"
|
|
2566
|
+
|
|
2567
|
+
on_widget_selected {
|
|
2568
|
+
dialog { |dialog_proxy|
|
|
2569
|
+
row_layout(:vertical) {
|
|
2570
|
+
center true
|
|
2571
|
+
}
|
|
2572
|
+
|
|
2573
|
+
text "Dialog #{dialog_number}"
|
|
2574
|
+
|
|
2575
|
+
label {
|
|
2576
|
+
text "Given `dialog` is modal, you cannot interact with the main window till the dialog is closed."
|
|
2577
|
+
}
|
|
2578
|
+
composite {
|
|
2579
|
+
row_layout {
|
|
2580
|
+
margin_height 0
|
|
2581
|
+
margin_top 0
|
|
2582
|
+
margin_bottom 0
|
|
2583
|
+
}
|
|
2584
|
+
|
|
2585
|
+
label {
|
|
2586
|
+
text "Unlike `message_box`, `dialog` can contain arbitrary widgets:"
|
|
2587
|
+
}
|
|
2588
|
+
radio {
|
|
2589
|
+
text 'Radio'
|
|
2590
|
+
}
|
|
2591
|
+
checkbox {
|
|
2592
|
+
text 'Checkbox'
|
|
2593
|
+
}
|
|
2594
|
+
}
|
|
2595
|
+
button {
|
|
2596
|
+
text 'Close'
|
|
2597
|
+
|
|
2598
|
+
on_widget_selected {
|
|
2599
|
+
dialog_proxy.close
|
|
2600
|
+
}
|
|
2601
|
+
}
|
|
2602
|
+
}.open
|
|
2603
|
+
}
|
|
2604
|
+
}
|
|
2605
|
+
}
|
|
2606
|
+
}.open
|
|
2607
|
+
```
|
|
2608
|
+
|
|
2609
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
|
2610
|
+
|
|
2611
|
+
|
|
2612
|
+
|
|
2613
|
+
|
|
2614
|
+
|
|
2615
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
|
2616
|
+
|
|
2617
|
+
Start the Rails server:
|
|
2618
|
+
```
|
|
2619
|
+
rails s
|
|
2620
|
+
```
|
|
2621
|
+
|
|
2622
|
+
Visit `http://localhost:3000`
|
|
2623
|
+
|
|
2624
|
+
You should see "Hello, Dialog!"
|
|
2625
|
+
|
|
2626
|
+
|
|
2627
|
+
|
|
2628
|
+
|
|
2629
|
+
|
|
2439
2630
|
### Elaborate Samples
|
|
2440
2631
|
|
|
2441
2632
|
#### Login
|
|
@@ -3230,13 +3421,27 @@ You should see "Apple Calculator Theme"
|
|
|
3230
3421
|
|
|
3231
3422
|
[](http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple)
|
|
3232
3423
|
|
|
3424
|
+
## Glimmer Supporting Libraries
|
|
3425
|
+
|
|
3426
|
+
Here is a list of notable 3rd party gems used by Glimmer DSL for Opal:
|
|
3427
|
+
- [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML & HTML in pure Ruby.
|
|
3428
|
+
- [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets) in pure Ruby.
|
|
3429
|
+
- [opal-async](https://github.com/AndyObtiva/opal-async): Non-blocking tasks and enumerators for Opal.
|
|
3430
|
+
- [to_collection](https://github.com/AndyObtiva/to_collection): Treat an array of objects and a singular object uniformly as a collection of objects.
|
|
3431
|
+
|
|
3432
|
+
## Glimmer Process
|
|
3433
|
+
|
|
3434
|
+
[Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) is the lightweight software development process used for building Glimmer libraries and Glimmer apps, which goes beyond Agile, rendering all Agile processes obsolete. [Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) is simply made up of 7 guidelines to pick and choose as necessary until software development needs are satisfied.
|
|
3435
|
+
|
|
3436
|
+
Learn more by reading the [GPG](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) (Glimmer Process Guidelines)
|
|
3437
|
+
|
|
3233
3438
|
## Help
|
|
3234
3439
|
|
|
3235
3440
|
### Issues
|
|
3236
3441
|
|
|
3237
|
-
You may submit [issues](https://github.com/AndyObtiva/glimmer/issues) on [GitHub](https://github.com/AndyObtiva/glimmer/issues).
|
|
3442
|
+
You may submit [issues](https://github.com/AndyObtiva/glimmer-dsl-opal/issues) on [GitHub](https://github.com/AndyObtiva/glimmer-dsl-opal/issues).
|
|
3238
3443
|
|
|
3239
|
-
[Click here to submit an issue.](https://github.com/AndyObtiva/glimmer/issues)
|
|
3444
|
+
[Click here to submit an issue.](https://github.com/AndyObtiva/glimmer-dsl-opal/issues)
|
|
3240
3445
|
|
|
3241
3446
|
### Chat
|
|
3242
3447
|
|
|
@@ -3266,9 +3471,9 @@ These features have been suggested. You might see them in a future version of Gl
|
|
|
3266
3471
|
|
|
3267
3472
|
[MIT](https://opensource.org/licenses/MIT)
|
|
3268
3473
|
|
|
3269
|
-
Copyright (c) 2020 - Andy Maleh.
|
|
3474
|
+
Copyright (c) 2020-2021 - Andy Maleh.
|
|
3270
3475
|
See [LICENSE.txt](LICENSE.txt) for further details.
|
|
3271
3476
|
|
|
3272
3477
|
--
|
|
3273
3478
|
|
|
3274
|
-
[<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=40 />](https://github.com/AndyObtiva/glimmer) Built for [Glimmer](https://github.com/AndyObtiva/glimmer) (
|
|
3479
|
+
[<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=40 />](https://github.com/AndyObtiva/glimmer) Built for [Glimmer](https://github.com/AndyObtiva/glimmer) (DSL Framework).
|