glimmer-dsl-opal 0.8.0 → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +30 -0
  3. data/LICENSE.txt +1 -1
  4. data/README.md +640 -186
  5. data/VERSION +1 -1
  6. data/lib/display.rb +1 -1
  7. data/lib/glimmer-dsl-opal.rb +10 -5
  8. data/lib/glimmer-dsl-opal/ext/file.rb +1 -1
  9. data/lib/glimmer-dsl-opal/ext/glimmer/dsl/engine.rb +47 -0
  10. data/lib/glimmer-dsl-opal/samples/elaborate/contact_manager/contact_repository.rb +4 -4
  11. data/lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb +2 -2
  12. data/lib/glimmer-dsl-opal/samples/hello/hello_browser.rb +1 -1
  13. data/lib/glimmer-dsl-opal/samples/hello/hello_button.rb +1 -1
  14. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox.rb +1 -1
  15. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox_group.rb +1 -1
  16. data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +1 -1
  17. data/lib/glimmer-dsl-opal/samples/hello/hello_computed.rb +1 -1
  18. data/lib/glimmer-dsl-opal/samples/hello/hello_computed/contact.rb +21 -0
  19. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +1 -1
  20. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +1 -1
  21. data/lib/glimmer-dsl-opal/samples/hello/hello_date_time.rb +1 -1
  22. data/lib/glimmer-dsl-opal/samples/hello/hello_dialog.rb +78 -0
  23. data/lib/glimmer-dsl-opal/samples/hello/hello_group.rb +1 -1
  24. data/lib/glimmer-dsl-opal/samples/hello/hello_list_multi_selection.rb +1 -1
  25. data/lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb +1 -1
  26. data/lib/glimmer-dsl-opal/samples/hello/hello_menu_bar.rb +241 -0
  27. data/lib/glimmer-dsl-opal/samples/hello/hello_message_box.rb +1 -1
  28. data/lib/glimmer-dsl-opal/samples/hello/hello_pop_up_context_menu.rb +1 -1
  29. data/lib/glimmer-dsl-opal/samples/hello/hello_radio.rb +1 -1
  30. data/lib/glimmer-dsl-opal/samples/hello/hello_radio_group.rb +1 -1
  31. data/lib/glimmer-dsl-opal/samples/hello/hello_tab.rb +1 -1
  32. data/lib/glimmer-dsl-opal/samples/hello/hello_table.rb +1 -1
  33. data/lib/glimmer-dsl-opal/samples/hello/hello_world.rb +4 -4
  34. data/lib/glimmer-dsl-swt.rb +1 -1
  35. data/lib/glimmer/config/opal_logger.rb +16 -0
  36. data/lib/glimmer/dsl/opal/async_exec_expression.rb +1 -1
  37. data/lib/glimmer/dsl/opal/block_property_expression.rb +1 -1
  38. data/lib/glimmer/dsl/opal/checkbox_group_selection_data_binding_expression.rb +1 -1
  39. data/lib/glimmer/dsl/opal/color_expression.rb +1 -1
  40. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +1 -1
  41. data/lib/glimmer/dsl/opal/dialog_expression.rb +20 -0
  42. data/lib/glimmer/dsl/opal/display_expression.rb +1 -1
  43. data/lib/glimmer/dsl/opal/dsl.rb +1 -1
  44. data/lib/glimmer/dsl/opal/exec_expression.rb +1 -1
  45. data/lib/glimmer/dsl/opal/font_expression.rb +1 -1
  46. data/lib/glimmer/dsl/opal/menu_bar_expression.rb +1 -1
  47. data/lib/glimmer/dsl/opal/menu_expression.rb +1 -1
  48. data/lib/glimmer/dsl/opal/radio_group_selection_data_binding_expression.rb +1 -1
  49. data/lib/glimmer/dsl/opal/rgb_expression.rb +1 -1
  50. data/lib/glimmer/dsl/opal/rgba_expression.rb +1 -1
  51. data/lib/glimmer/dsl/opal/shell_expression.rb +0 -4
  52. data/lib/glimmer/dsl/opal/swt_expression.rb +4 -4
  53. data/lib/glimmer/dsl/opal/sync_exec_expression.rb +1 -1
  54. data/lib/glimmer/swt.rb +1 -1
  55. data/lib/glimmer/swt/color_proxy.rb +1 -1
  56. data/lib/glimmer/swt/control_editor.rb +1 -1
  57. data/lib/glimmer/swt/custom/checkbox_group.rb +1 -1
  58. data/lib/glimmer/swt/custom/radio_group.rb +1 -1
  59. data/lib/glimmer/swt/dialog_proxy.rb +173 -0
  60. data/lib/glimmer/swt/display_proxy.rb +8 -4
  61. data/lib/glimmer/swt/font_proxy.rb +1 -1
  62. data/lib/glimmer/swt/label_proxy.rb +22 -1
  63. data/lib/{glimmer-dsl-opal/ext/struct.rb → glimmer/swt/latest_dialog_proxy.rb} +17 -12
  64. data/lib/glimmer/swt/latest_message_box_proxy.rb +42 -0
  65. data/lib/glimmer/swt/latest_shell_proxy.rb +55 -0
  66. data/lib/glimmer/swt/layout_data_proxy.rb +4 -0
  67. data/lib/glimmer/swt/list_proxy.rb +0 -18
  68. data/lib/glimmer/swt/make_shift_shell_proxy.rb +1 -1
  69. data/lib/glimmer/swt/menu_item_proxy.rb +96 -9
  70. data/lib/glimmer/swt/menu_proxy.rb +136 -25
  71. data/lib/glimmer/swt/message_box_proxy.rb +31 -13
  72. data/lib/glimmer/swt/row_layout_proxy.rb +22 -2
  73. data/lib/glimmer/swt/shell_proxy.rb +16 -4
  74. data/lib/glimmer/swt/style_constantizable.rb +1 -1
  75. data/lib/glimmer/swt/swt_proxy.rb +1 -1
  76. data/lib/glimmer/swt/tab_folder_proxy.rb +1 -1
  77. data/lib/glimmer/swt/table_editor.rb +1 -1
  78. data/lib/glimmer/swt/table_item_proxy.rb +1 -1
  79. data/lib/glimmer/swt/table_proxy.rb +1 -1
  80. data/lib/glimmer/swt/widget_proxy.rb +14 -2
  81. data/lib/glimmer/ui/custom_shell.rb +2 -2
  82. data/lib/glimmer/ui/custom_widget.rb +1 -1
  83. data/lib/glimmer/util/proc_tracker.rb +1 -1
  84. data/lib/net/http.rb +30 -2
  85. data/lib/os.rb +1 -1
  86. metadata +33 -5
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 97eeea7b6d32426394bf3cb88a2a3cf8d7e8559913bda30fd70e002ea99ec803
4
- data.tar.gz: 3a23091312b5279776f5c287554de323007c72a5e4f754fe6d0716090777e8c8
3
+ metadata.gz: 5cf10a8e6a840bef3b7a757f55dec62651a334bce49f52d2ebac77ef6d68d0a3
4
+ data.tar.gz: 02c7196499a96d53a3cc00d761af4cda2c6baa90a7d3587faee4d67b6d0e2615
5
5
  SHA512:
6
- metadata.gz: 1b6b902e2e66ef6c65ef4c007acaf812e3cfb10f20b5ef4e1d72e995dc252a809c892eb22d24b83e95d5587ab9b6b135a6e92e748869905abcf02915a224ab29
7
- data.tar.gz: 1cbee2b67c0d8b3fcb18a95dbe0db665b8c179fb1561c3c0c1f404b4f66bc5e7a46e1c7553e62099f88b8ef3f68dca7512f20cb2be744c4f137beda6294bed77
6
+ metadata.gz: 8dab1f9539fa2be9a6ae67e485011ebb3ab2f3322a35f3d266e2a1bb1b64bc408ffb47f4e3ddd3f67b103b21c2ce68de154b4bfd77736f8bf12a18b0dc611161
7
+ data.tar.gz: 9651ec109a222fd805ef90e82c1898329648399a92c1008ac884b69b3e39bca3d119769169f52ae913fe8e523c72fcafdf0c82f6f066e80255e208414f11f5e6
data/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.10.0
4
+
5
+ - Hello, Dialog! Sample
6
+ - Support `dialog` widget
7
+ - Support `width` and `height` on `layout_data` for `row_layout`
8
+ - Support `center` for `row_layout`
9
+
10
+ ## 0.9.3
11
+
12
+ - Extracted pure Ruby Struct to pure-struct gem (since it's also used by YASL)
13
+ - Alpha experimental incomplete implementation of Net::HTTP.post_form
14
+ - Fixed issue with not being able to interact with a shell proxy (LatestShellProxy) after opening (made class autoupgradable to attached ShellProxy after document ready)
15
+
16
+ ## 0.9.2
17
+
18
+ - Fixed issue with opening message_box after internalizing the Document.ready? block
19
+ - Fixed issue with replacing newlines with HTML newlines in `label` and `message_box` text
20
+
21
+ ## 0.9.1
22
+
23
+ - Log errors to error stream ($stderr) instead of standard out (STDOUT)
24
+ - Fixed issue with opening shell caused by internalizing the Document.ready? block
25
+
26
+ ## 0.9.0
27
+
28
+ - Support `menu_bar`
29
+ - Hello, Menu Bar! Sample
30
+ - Remove the need to call Document.ready? before opening a Glimmer shell
31
+ - Support opening a message_box before creating a shell
32
+
3
33
  ## 0.8.0
4
34
 
5
35
  - Hello, Pop Up Context Menu! Sample
data/LICENSE.txt CHANGED
@@ -1,4 +1,4 @@
1
- Copyright (c) 2020 Andy Maleh
1
+ Copyright (c) 2020-2021 Andy Maleh
2
2
 
3
3
  Permission is hereby granted, free of charge, to any person obtaining
4
4
  a copy of this software and associated documentation files (the
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.8.0 (Pure Ruby Web GUI)
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.0 (Pure Ruby Web GUI)
2
2
  [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
3
3
  [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4
4
 
@@ -12,165 +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
- #### Tic Tac Toe Sample
15
+ #### Hello, Table! Sample
16
16
 
17
- Add the following require statement to `app/assets/javascripts/application.rb` in a [Glimmer setup](#setup) Rails app:
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
- @shell = shell {
28
- text "Tic-Tac-Toe"
29
- minimum_size 150, 178
30
- composite {
31
- grid_layout 3, true
32
- (1..3).each { |row|
33
- (1..3).each { |column|
34
- button {
35
- layout_data :fill, :fill, true, true
36
- text bind(@tic_tac_toe_board[row, column], :sign)
37
- enabled bind(@tic_tac_toe_board[row, column], :empty)
38
- font style: :bold, height: 20
39
- on_widget_selected {
40
- @tic_tac_toe_board.mark(row, column)
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
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
46
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
- ![Glimmer DSL for Opal Tic Tac Toe](images/glimmer-dsl-opal-tic-tac-toe.png)
52
- ![Glimmer DSL for Opal Tic Tac Toe In Progress](images/glimmer-dsl-opal-tic-tac-toe-in-progress.png)
53
- ![Glimmer DSL for Opal Tic Tac Toe Game Over](images/glimmer-dsl-opal-tic-tac-toe-game-over.png)
102
+ **Hello, Table! originally running on the desktop (using the [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):**
54
103
 
55
- Tic Tac Toe on the desktop with the same exact code (using the [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
104
+ ![Glimmer DSL for SWT Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table.png)
56
105
 
57
- ![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe.png)
58
- ![Glimmer DSL for SWT Tic Tac Toe In Progress](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe-in-progress.png)
59
- ![Glimmer DSL for SWT Tic Tac Toe Game Over](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe-game-over.png)
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
- 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.
108
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table.png)
62
109
 
63
- **Alpha Version** 0.8.0 only supports bare-minimum capabilities for the following [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written in [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt)):
110
+ Hello, Table! Editing Game Date
64
111
 
65
- [Hello samples](#hello-samples):
112
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-game-date.png)
66
113
 
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)
114
+ Hello, Table! Editing Game Time
86
115
 
87
- [Elaborate samples](#elaborate-samples):
116
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-game-time.png)
88
117
 
89
- - [Login](#login)
90
- - [Tic Tac Toe](#tic-tac-toe)
91
- - [Contact Manager](#contact-manager)
118
+ Hello, Table! Editing Home Team
92
119
 
93
- External:
120
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-home-team.png)
94
121
 
95
- - [Glimmer Calculator](#glimmer-calculator)
122
+ Hello, Table! Sorted Game Date Ascending
96
123
 
97
- Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
98
- - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
99
- - [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
100
- - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
101
- - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
124
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-sorted-game-date-ascending.png)
102
125
 
103
- ## Supported Glimmer DSL Keywords
126
+ Hello, Table! Sorted Game Date Descending
104
127
 
105
- The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
128
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-sorted-game-date-descending.png)
106
129
 
107
- Widgets:
108
- - `button`
109
- - `browser`
110
- - `calendar`
111
- - `checkbox`
112
- - `checkbox_group`
113
- - `combo`
114
- - `composite`
115
- - `date`
116
- - `date_drop_down`
117
- - `group`
118
- - `label`
119
- - `list` (w/ optional `:multi` SWT style)
120
- - `menu`
121
- - `menu_item`
122
- - `message_box`
123
- - `radio`
124
- - `radio_group`
125
- - `scrolled_composite`
126
- - `shell`
127
- - `tab_folder`
128
- - `tab_item`
129
- - `table`
130
- - `table_column`
131
- - `text`
132
- - `time`
133
- - `message_box`
134
- - Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget
135
- - 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)
130
+ Hello, Table! Playoff Type Combo
136
131
 
137
- Layouts:
138
- - `grid_layout`
139
- - `row_layout`
140
- - `fill_layout`
141
- - `layout_data`
132
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-playoff-type-combo.png)
142
133
 
143
- Graphics/Style:
144
- - `color`
145
- - `font`
146
- - `Point` class used in setting location on widgets
147
- - `swt` and `SWT` class to set SWT styles on widgets
134
+ Hello, Table! Playoff Type Changed
148
135
 
149
- Data-Binding/Observers:
150
- - `bind`
151
- - `observe`
152
- - `on_widget_selected`
153
- - `on_modify_text`
154
- - `on_key_pressed` (and SWT alias `on_swt_keydown`)
155
- - `on_key_released` (and SWT alias `on_swt_keyup`)
156
- - `on_mouse_down` (and SWT alias `on_swt_mousedown`)
157
- - `on_mouse_up` (and SWT alias `on_swt_mouseup`)
136
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-playoff-type-changed.png)
158
137
 
159
- Event loop:
160
- - `display`
161
- - `async_exec`
138
+ Hello, Table! Game Booked
139
+
140
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-game-booked.png)
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.0 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.0 (Pure Ruby Web GUI)](#-glimmer-dsl-for-opal-0100-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)
162
199
 
163
200
  ## Principles
164
201
 
165
- - **Live purely in Rubyland via the Glimmer GUI DSL**, completely oblivious to inferior 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/).
166
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.
167
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.
168
- - **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 aethetics. 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.
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.
169
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.
170
207
 
171
208
  ## Background
172
209
 
173
- 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 after adding the Glimmer DSL for Opal gem, and BOOM, it just works on the web inside a web browser with the same server/client communication you had in the desktop app (I am working on adding minimal support for net/http in Opal so that desktop apps that use it continue to work in a web browser. 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.
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.
174
211
 
175
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.
176
213
 
@@ -212,7 +249,7 @@ Add the following to `Gemfile`:
212
249
  gem 'opal-rails', '~> 1.1.2'
213
250
  gem 'opal-async', '~> 1.2.0'
214
251
  gem 'opal-jquery', '~> 0.4.4'
215
- gem 'glimmer-dsl-opal', '~> 0.8.0'
252
+ gem 'glimmer-dsl-opal', '~> 0.10.0'
216
253
  gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
217
254
  gem 'glimmer-dsl-css', '~> 1.1.0', require: false
218
255
 
@@ -237,12 +274,6 @@ Modify `config/routes.rb`:
237
274
  root to: 'welcomes#index'
238
275
  ```
239
276
 
240
- Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
241
-
242
- ```ruby
243
- require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
244
- ```
245
-
246
277
  Edit `app/views/layouts/application.html.erb` and add the following below other `stylesheet_link_tag` declarations:
247
278
 
248
279
  ```erb
@@ -251,32 +282,93 @@ Edit `app/views/layouts/application.html.erb` and add the following below other
251
282
 
252
283
  Clear the file `app/views/welcomes/index.html.erb` from any content.
253
284
 
254
- Open `app/assets/javascripts/application.rb`, add a `Document.ready?` block, and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
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.
255
286
 
256
287
  ```ruby
257
- Document.ready? do
258
- # require-statement/code goes here.
259
- end
288
+ require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
289
+
290
+ # require-statement/code goes here.
260
291
  ```
261
292
 
262
293
  Example to confirm setup is working:
263
294
 
264
295
  ```ruby
265
- Document.ready? do
266
- include Glimmer
267
-
268
- shell {
269
- fill_layout
270
- text 'Example to confirm setup is working'
271
- label {
272
- text "Welcome to Glimmer DSL for Opal!"
273
- foreground :red
274
- font height: 24
275
- }
276
- }.open
277
- end
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
278
309
  ```
279
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
+
280
372
  ## Samples
281
373
 
282
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)
@@ -600,44 +692,53 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
600
692
  Or add the Glimmer code directly if you prefer to play around with it:
601
693
 
602
694
  ```ruby
603
- class Person
604
- attr_accessor :provinces, :provinces_options
605
-
606
- def initialize
607
- self.provinces_options=[
608
- "",
609
- "Quebec",
610
- "Ontario",
611
- "Manitoba",
612
- "Saskatchewan",
613
- "Alberta",
614
- "British Columbia",
615
- "Nova Skotia",
616
- "Newfoundland"
617
- ]
618
- self.provinces = ["Quebec", "Manitoba", "Alberta"]
619
- end
620
-
621
- def reset_provinces
622
- self.provinces = ["Quebec", "Manitoba", "Alberta"]
623
- end
624
- end
625
-
626
695
  class HelloListMultiSelection
696
+ class Person
697
+ attr_accessor :provinces, :provinces_options
698
+
699
+ def initialize
700
+ self.provinces_options = [
701
+ '',
702
+ 'Alberta',
703
+ 'British Columbia',
704
+ 'Manitoba',
705
+ 'New Brunswick',
706
+ 'Newfoundland and Labrador',
707
+ 'Northwest Territories',
708
+ 'Nova Scotia',
709
+ 'Nunavut',
710
+ 'Ontario',
711
+ 'Prince Edward Island',
712
+ 'Quebec',
713
+ 'Saskatchewan',
714
+ 'Yukon'
715
+ ]
716
+ reset_provinces
717
+ end
718
+
719
+ def reset_provinces
720
+ self.provinces = ['Quebec', 'Manitoba', 'Alberta']
721
+ end
722
+ end
723
+
627
724
  include Glimmer
725
+
628
726
  def launch
629
727
  person = Person.new
728
+
630
729
  shell {
631
- composite {
632
- list(:multi) {
633
- selection bind(person, :provinces)
634
- }
635
- button {
636
- text "Reset"
637
- on_widget_selected do
638
- person.reset_provinces
639
- end
640
- }
730
+ grid_layout
731
+
732
+ text 'Hello, List Multi Selection!'
733
+
734
+ list(:multi) {
735
+ selection bind(person, :provinces)
736
+ }
737
+
738
+ button {
739
+ text 'Reset Selections To Default Values'
740
+
741
+ on_widget_selected { person.reset_provinces }
641
742
  }
642
743
  }.open
643
744
  end
@@ -2131,6 +2232,345 @@ You should see "Hello, Pop Up Context Menu!"
2131
2232
  ![Glimmer DSL for Opal Hello Pop Up Context Menu](images/glimmer-dsl-opal-hello-pop-up-context-menu.png)
2132
2233
  ![Glimmer DSL for Opal Hello Pop Up Context Menu Popped Up](images/glimmer-dsl-opal-hello-pop-up-context-menu-popped-up.png)
2133
2234
 
2235
+ #### Hello, Menu Bar!
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
+
2245
+ Add the following require statement to `app/assets/javascripts/application.rb`
2246
+
2247
+ ```ruby
2248
+ require 'glimmer-dsl-opal/samples/hello/hello_menu_bar'
2249
+ ```
2250
+
2251
+ Or add the Glimmer code directly if you prefer to play around with it:
2252
+
2253
+ ```ruby
2254
+ include Glimmer
2255
+
2256
+ COLORS = [:white, :red, :yellow, :green, :blue, :magenta, :gray, :black]
2257
+
2258
+ shell {
2259
+ grid_layout {
2260
+ margin_width 0
2261
+ margin_height 0
2262
+ }
2263
+
2264
+ text 'Hello, Menu Bar!'
2265
+
2266
+ @label = label(:center) {
2267
+ font height: 50
2268
+ text 'Check Out The Menu Bar Above!'
2269
+ }
2270
+
2271
+ menu_bar {
2272
+ menu {
2273
+ text '&File'
2274
+ menu_item {
2275
+ text '&New'
2276
+ accelerator :command, :N
2277
+
2278
+ on_widget_selected {
2279
+ message_box {
2280
+ text 'New'
2281
+ message 'New file created.'
2282
+ }.open
2283
+ }
2284
+ }
2285
+ menu_item {
2286
+ text '&Open...'
2287
+ accelerator :command, :O
2288
+
2289
+ on_widget_selected {
2290
+ message_box {
2291
+ text 'Open'
2292
+ message 'Opening File...'
2293
+ }.open
2294
+ }
2295
+ }
2296
+ menu {
2297
+ text 'Open &Recent'
2298
+ menu_item {
2299
+ text 'File 1'
2300
+ on_widget_selected {
2301
+ message_box {
2302
+ text 'File 1'
2303
+ message 'File 1 Contents'
2304
+ }.open
2305
+ }
2306
+ }
2307
+ menu_item {
2308
+ text 'File 2'
2309
+ on_widget_selected {
2310
+ message_box {
2311
+ text 'File 2'
2312
+ message 'File 2 Contents'
2313
+ }.open
2314
+ }
2315
+ }
2316
+ }
2317
+ menu_item(:separator)
2318
+ menu_item {
2319
+ text 'E&xit'
2320
+
2321
+ on_widget_selected {
2322
+ exit(0)
2323
+ }
2324
+ }
2325
+ }
2326
+ menu {
2327
+ text '&Edit'
2328
+ menu_item {
2329
+ text 'Cut'
2330
+ accelerator :command, :X
2331
+ }
2332
+ menu_item {
2333
+ text 'Copy'
2334
+ accelerator :command, :C
2335
+ }
2336
+ menu_item {
2337
+ text 'Paste'
2338
+ accelerator :command, :V
2339
+ }
2340
+ }
2341
+ menu {
2342
+ text '&Options'
2343
+
2344
+ menu_item(:radio) {
2345
+ text '&Enabled'
2346
+
2347
+ on_widget_selected {
2348
+ @select_one_menu.enabled = true
2349
+ @select_multiple_menu.enabled = true
2350
+ }
2351
+ }
2352
+ @select_one_menu = menu {
2353
+ text '&Select One'
2354
+ enabled false
2355
+
2356
+ menu_item(:radio) {
2357
+ text 'Option 1'
2358
+ }
2359
+ menu_item(:radio) {
2360
+ text 'Option 2'
2361
+ }
2362
+ menu_item(:radio) {
2363
+ text 'Option 3'
2364
+ }
2365
+ }
2366
+ @select_multiple_menu = menu {
2367
+ text '&Select Multiple'
2368
+ enabled false
2369
+
2370
+ menu_item(:check) {
2371
+ text 'Option 4'
2372
+ }
2373
+ menu_item(:check) {
2374
+ text 'Option 5'
2375
+ }
2376
+ menu_item(:check) {
2377
+ text 'Option 6'
2378
+ }
2379
+ }
2380
+ }
2381
+ menu {
2382
+ text '&Format'
2383
+ menu {
2384
+ text '&Background Color'
2385
+ COLORS.each { |color_style|
2386
+ menu_item(:radio) {
2387
+ text color_style.to_s.split('_').map(&:capitalize).join(' ')
2388
+
2389
+ on_widget_selected {
2390
+ @label.background = color_style
2391
+ }
2392
+ }
2393
+ }
2394
+ }
2395
+ menu {
2396
+ text 'Foreground &Color'
2397
+ COLORS.each { |color_style|
2398
+ menu_item(:radio) {
2399
+ text color_style.to_s.split('_').map(&:capitalize).join(' ')
2400
+
2401
+ on_widget_selected {
2402
+ @label.foreground = color_style
2403
+ }
2404
+ }
2405
+ }
2406
+ }
2407
+ }
2408
+ menu {
2409
+ text '&View'
2410
+ menu_item(:radio) {
2411
+ text 'Small'
2412
+
2413
+ on_widget_selected {
2414
+ @label.font = {height: 25}
2415
+ @label.parent.pack
2416
+ }
2417
+ }
2418
+ menu_item(:radio) {
2419
+ text 'Medium'
2420
+ selection true
2421
+
2422
+ on_widget_selected {
2423
+ @label.font = {height: 50}
2424
+ @label.parent.pack
2425
+ }
2426
+ }
2427
+ menu_item(:radio) {
2428
+ text 'Large'
2429
+
2430
+ on_widget_selected {
2431
+ @label.font = {height: 75}
2432
+ @label.parent.pack
2433
+ }
2434
+ }
2435
+ }
2436
+ menu {
2437
+ text '&Help'
2438
+ menu_item {
2439
+ text '&Manual'
2440
+ accelerator :command, :shift, :M
2441
+
2442
+ on_widget_selected {
2443
+ message_box {
2444
+ text 'Manual'
2445
+ message 'Manual Contents'
2446
+ }.open
2447
+ }
2448
+ }
2449
+ menu_item {
2450
+ text '&Tutorial'
2451
+ accelerator :command, :shift, :T
2452
+
2453
+ on_widget_selected {
2454
+ message_box {
2455
+ text 'Tutorial'
2456
+ message 'Tutorial Contents'
2457
+ }.open
2458
+ }
2459
+ }
2460
+ menu_item(:separator)
2461
+ menu_item {
2462
+ text '&Report an Issue...'
2463
+
2464
+ on_widget_selected {
2465
+ message_box {
2466
+ text 'Report an Issue'
2467
+ message 'Reporting an issue...'
2468
+ }.open
2469
+ }
2470
+ }
2471
+ }
2472
+ }
2473
+ }.open
2474
+ ```
2475
+
2476
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2477
+
2478
+ ![Hello Menu Bar](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar.png)
2479
+
2480
+ ![Hello Menu Bar File Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-file-menu.png)
2481
+
2482
+ ![Hello Menu Bar Edit Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-edit-menu.png)
2483
+
2484
+ ![Hello Menu Bar Options Menu Disabled](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-disabled.png)
2485
+
2486
+ ![Hello Menu Bar Options Menu Select One](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-select-one.png)
2487
+
2488
+ ![Hello Menu Bar Options Menu Select Multiple](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-select-multiple.png)
2489
+
2490
+ ![Hello Menu Bar Format Menu Background Color](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-format-menu-background-color.png)
2491
+
2492
+ ![Hello Menu Bar Format Menu Foreground Color](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-format-menu-foreground-color.png)
2493
+
2494
+ ![Hello Menu Bar View Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-menu.png)
2495
+
2496
+ ![Hello Menu Bar View Small](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-small.png)
2497
+
2498
+ ![Hello Menu Bar View Large](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-large.png)
2499
+
2500
+ ![Hello Menu Bar Help Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-help-menu.png)
2501
+
2502
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
2503
+
2504
+ Start the Rails server:
2505
+ ```
2506
+ rails s
2507
+ ```
2508
+
2509
+ Visit `http://localhost:3000`
2510
+
2511
+ You should see "Hello, Menu Bar!"
2512
+
2513
+ ![Hello Menu Bar](images/glimmer-dsl-opal-hello-menu-bar.png)
2514
+
2515
+ ![Hello Menu Bar File Menu](images/glimmer-dsl-opal-hello-menu-bar-file-menu.png)
2516
+
2517
+ ![Hello Menu Bar Edit Menu](images/glimmer-dsl-opal-hello-menu-bar-edit-menu.png)
2518
+
2519
+ ![Hello Menu Bar Options Menu Disabled](images/glimmer-dsl-opal-hello-menu-bar-options-menu-disabled.png)
2520
+
2521
+ ![Hello Menu Bar Options Menu Select One](images/glimmer-dsl-opal-hello-menu-bar-options-menu-select-one.png)
2522
+
2523
+ ![Hello Menu Bar Options Menu Select Multiple](images/glimmer-dsl-opal-hello-menu-bar-options-menu-select-multiple.png)
2524
+
2525
+ ![Hello Menu Bar Format Menu Background Color](images/glimmer-dsl-opal-hello-menu-bar-format-menu-background-color.png)
2526
+
2527
+ ![Hello Menu Bar Format Menu Foreground Color](images/glimmer-dsl-opal-hello-menu-bar-format-menu-foreground-color.png)
2528
+
2529
+ ![Hello Menu Bar View Menu](images/glimmer-dsl-opal-hello-menu-bar-view-menu.png)
2530
+
2531
+ ![Hello Menu Bar View Small](images/glimmer-dsl-opal-hello-menu-bar-view-small.png)
2532
+
2533
+ ![Hello Menu Bar View Large](images/glimmer-dsl-opal-hello-menu-bar-view-large.png)
2534
+
2535
+ ![Hello Menu Bar Help Menu](images/glimmer-dsl-opal-hello-menu-bar-help-menu.png)
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
+
2551
+
2552
+ ```
2553
+
2554
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2555
+
2556
+ ![Hello Dialog](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-dialog.png)
2557
+
2558
+ ![Hello Dialog Open Dialog](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-dialog-open-dialog.png)
2559
+
2560
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
2561
+
2562
+ Start the Rails server:
2563
+ ```
2564
+ rails s
2565
+ ```
2566
+
2567
+ Visit `http://localhost:3000`
2568
+
2569
+ You should see "Hello, Dialog!"
2570
+
2571
+ ![Hello Dialog](images/glimmer-dsl-opal-hello-dialog.png)
2572
+
2573
+ ![Hello Dialog Open Dialog](images/glimmer-dsl-opal-hello-dialog-open-dialog.png)
2134
2574
 
2135
2575
  ### Elaborate Samples
2136
2576
 
@@ -2926,13 +3366,27 @@ You should see "Apple Calculator Theme"
2926
3366
 
2927
3367
  [![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)](http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple)
2928
3368
 
3369
+ ## Glimmer Supporting Libraries
3370
+
3371
+ Here is a list of notable 3rd party gems used by Glimmer DSL for Opal:
3372
+ - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML & HTML in pure Ruby.
3373
+ - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets) in pure Ruby.
3374
+ - [opal-async](https://github.com/AndyObtiva/opal-async): Non-blocking tasks and enumerators for Opal.
3375
+ - [to_collection](https://github.com/AndyObtiva/to_collection): Treat an array of objects and a singular object uniformly as a collection of objects.
3376
+
3377
+ ## Glimmer Process
3378
+
3379
+ [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.
3380
+
3381
+ Learn more by reading the [GPG](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) (Glimmer Process Guidelines)
3382
+
2929
3383
  ## Help
2930
3384
 
2931
3385
  ### Issues
2932
3386
 
2933
- You may submit [issues](https://github.com/AndyObtiva/glimmer/issues) on [GitHub](https://github.com/AndyObtiva/glimmer/issues).
3387
+ You may submit [issues](https://github.com/AndyObtiva/glimmer-dsl-opal/issues) on [GitHub](https://github.com/AndyObtiva/glimmer-dsl-opal/issues).
2934
3388
 
2935
- [Click here to submit an issue.](https://github.com/AndyObtiva/glimmer/issues)
3389
+ [Click here to submit an issue.](https://github.com/AndyObtiva/glimmer-dsl-opal/issues)
2936
3390
 
2937
3391
  ### Chat
2938
3392
 
@@ -2962,9 +3416,9 @@ These features have been suggested. You might see them in a future version of Gl
2962
3416
 
2963
3417
  [MIT](https://opensource.org/licenses/MIT)
2964
3418
 
2965
- Copyright (c) 2020 - Andy Maleh.
3419
+ Copyright (c) 2020-2021 - Andy Maleh.
2966
3420
  See [LICENSE.txt](LICENSE.txt) for further details.
2967
3421
 
2968
3422
  --
2969
3423
 
2970
- [<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) (Ruby Desktop Development GUI Library).
3424
+ [<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).