glimmer-dsl-opal 0.7.1 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +45 -0
  3. data/README.md +453 -48
  4. data/VERSION +1 -1
  5. data/lib/display.rb +31 -0
  6. data/lib/glimmer-dsl-opal.rb +15 -36
  7. data/lib/glimmer-dsl-opal/ext/class.rb +10 -0
  8. data/lib/glimmer-dsl-opal/ext/file.rb +29 -0
  9. data/lib/glimmer-dsl-opal/ext/struct.rb +37 -0
  10. data/lib/glimmer-dsl-opal/samples/elaborate/contact_manager.rb +50 -23
  11. data/lib/glimmer-dsl-opal/samples/elaborate/login.rb +22 -5
  12. data/lib/glimmer-dsl-opal/samples/hello/hello_browser.rb +24 -1
  13. data/lib/glimmer-dsl-opal/samples/hello/hello_button.rb +46 -0
  14. data/lib/glimmer-dsl-opal/samples/hello/hello_computed.rb +27 -0
  15. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +7 -7
  16. data/lib/glimmer-dsl-opal/samples/hello/hello_list_multi_selection.rb +62 -32
  17. data/lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb +47 -22
  18. data/lib/glimmer-dsl-opal/samples/hello/hello_message_box.rb +37 -0
  19. data/lib/glimmer-dsl-opal/samples/hello/hello_pop_up_context_menu.rb +84 -0
  20. data/lib/glimmer-dsl-opal/samples/hello/hello_table.rb +2 -2
  21. data/lib/glimmer/data_binding/observable_element.rb +1 -1
  22. data/lib/glimmer/data_binding/table_items_binding.rb +3 -3
  23. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +6 -0
  24. data/lib/glimmer/dsl/opal/dsl.rb +2 -0
  25. data/lib/glimmer/dsl/opal/menu_bar_expression.rb +54 -0
  26. data/lib/glimmer/dsl/opal/menu_expression.rb +61 -0
  27. data/lib/glimmer/dsl/opal/widget_expression.rb +3 -2
  28. data/lib/glimmer/dsl/opal/widget_listener_expression.rb +2 -2
  29. data/lib/glimmer/swt/combo_proxy.rb +40 -1
  30. data/lib/glimmer/swt/control_editor.rb +2 -1
  31. data/lib/glimmer/swt/custom/checkbox_group.rb +2 -2
  32. data/lib/glimmer/swt/custom/radio_group.rb +2 -2
  33. data/lib/glimmer/swt/date_time_proxy.rb +66 -1
  34. data/lib/glimmer/swt/event_listener_proxy.rb +14 -4
  35. data/lib/glimmer/swt/font_proxy.rb +4 -4
  36. data/lib/glimmer/swt/grid_layout_proxy.rb +21 -12
  37. data/lib/glimmer/swt/label_proxy.rb +17 -6
  38. data/lib/glimmer/swt/layout_data_proxy.rb +10 -7
  39. data/lib/glimmer/swt/list_proxy.rb +33 -0
  40. data/lib/glimmer/swt/menu_item_proxy.rb +87 -0
  41. data/lib/glimmer/swt/menu_proxy.rb +162 -0
  42. data/lib/glimmer/swt/message_box_proxy.rb +53 -67
  43. data/lib/glimmer/swt/property_owner.rb +2 -0
  44. data/lib/glimmer/swt/radio_proxy.rb +1 -1
  45. data/lib/glimmer/swt/shell_proxy.rb +32 -187
  46. data/lib/glimmer/swt/tab_folder_proxy.rb +43 -0
  47. data/lib/glimmer/swt/table_column_proxy.rb +4 -3
  48. data/lib/glimmer/swt/table_editor.rb +2 -2
  49. data/lib/glimmer/swt/table_item_proxy.rb +15 -5
  50. data/lib/glimmer/swt/table_proxy.rb +34 -12
  51. data/lib/glimmer/swt/text_proxy.rb +1 -1
  52. data/lib/glimmer/swt/widget_proxy.rb +335 -38
  53. data/lib/glimmer/ui/custom_shell.rb +9 -7
  54. data/lib/glimmer/ui/custom_widget.rb +3 -3
  55. data/lib/os.rb +36 -0
  56. metadata +36 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b4e81c8aae870295468f5c0e573da962daa58837efda4742c9855313ae29f42a
4
- data.tar.gz: 40df246c27977d3fa862a452cdfb2dd99ad0b506374408c69e25666b3fc7fa50
3
+ metadata.gz: 97eeea7b6d32426394bf3cb88a2a3cf8d7e8559913bda30fd70e002ea99ec803
4
+ data.tar.gz: 3a23091312b5279776f5c287554de323007c72a5e4f754fe6d0716090777e8c8
5
5
  SHA512:
6
- metadata.gz: c46c3bdfcc129557ac54640d2d905cb7495f010ff1b81422c5b55529a01ecb67c698b4724029b62b9cbc6bcb46727763185ba1b4469c0355259d16acd1f228f1
7
- data.tar.gz: 803c487121b4092f024fabca666e359fcdfeca87482b95a391e6b857b19dca28f46a845fc46e6c189e73254c1aa3a1f53d8cbe51c113f425be5019544a353913
6
+ metadata.gz: 1b6b902e2e66ef6c65ef4c007acaf812e3cfb10f20b5ef4e1d72e995dc252a809c892eb22d24b83e95d5587ab9b6b135a6e92e748869905abcf02915a224ab29
7
+ data.tar.gz: 1cbee2b67c0d8b3fcb18a95dbe0db665b8c179fb1561c3c0c1f404b4f66bc5e7a46e1c7553e62099f88b8ef3f68dca7512f20cb2be744c4f137beda6294bed77
@@ -1,5 +1,50 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.8.0
4
+
5
+ - Hello, Pop Up Context Menu! Sample
6
+ - Hello Message Box!
7
+ - Update hello list samples
8
+ - Support context menus `menu`/`menu_item` directly under a widget (using jQuery UI)
9
+ - Support generating new lines when entering `label` `text` with \n (auto-converting to <br />)
10
+ - Support generating new lines when entering `message_box` `message` with \n (auto-converting to <br />)
11
+ - Support having any widget contribute static CSS to ShellProxy
12
+ - Add Kernel#include_package shim to allow running JRuby include_package from Glimmer DSL for SWT without failing
13
+ - Add WidgetProxy#swt_widget to allow running include_package from Glimmer DSL for SWT without failing
14
+
15
+ ## 0.7.5
16
+
17
+ - Update login sample from Glimmer DSL for SWT's latest changes
18
+ - Update contact_manager sample from Glimmer DSL for SWT's latest changes
19
+ - Fixed issue regarding unavailable localStorage data when accessed by custom_widget_expression in hello_checkbox_group, hello_radio_group, and hello_custom_widget
20
+
21
+ ## 0.7.4
22
+
23
+ - Hello, Button! Sample
24
+ - Fix issue with aligning label as :left, :center, or :right via style style when fill_layout is used
25
+ - Fix Hello, Browser sample by accessing https ssl website
26
+ - Fix issue with filling space horizontally when using grid layout
27
+ - Fix broken embedded `calendar` widget data-binding for hello_date_time.rb sample
28
+ - Fix broken message_box after opening multiple shells
29
+ - Fix issue with opening custom shells in new tabs/windows when CustomShell subclass is required conditionally
30
+
31
+ ## 0.7.3
32
+
33
+ - Refactor to use to_collection gem
34
+ - Fix issue with breaking `date`/`date_drop_down` data-binding as table editor on focus lost
35
+ - Fix issue with requiring OS, File, and Display class after they've been extracted out
36
+
37
+ ## 0.7.2
38
+
39
+ - `date_drop_down` `table_column` `editor`
40
+ - `date` `table_column` `editor`
41
+ - `time` `table_column` `editor`
42
+ - Implement `on_focus_gained`, `on_focus_lost` universally on all widgets
43
+ - Add support for Struct keyword_init to Opal
44
+ - Fix issue with hello_table button/combo not being centered (yet stretched)
45
+ - Fix issue with table item selection for booking not working after editing has been added
46
+ - Fix escape keyboard event handling for combo table editor
47
+
3
48
  ## 0.7.1
4
49
 
5
50
  - Combo table editor (enabled in Hello, Table! sample)
data/README.md CHANGED
@@ -1,10 +1,10 @@
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.7.1 (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.8.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
 
5
5
  ### You can finally live in pure Ruby land on the web!
6
6
 
7
- [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an alpha [gem](https://rubygems.org/gems/glimmer-dsl-opal) that enables building web GUI in pure Ruby via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/).
7
+ [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an **alpha** [gem](https://rubygems.org/gems/glimmer-dsl-opal) that enables building web GUI in pure Ruby via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/).
8
8
 
9
9
  Use in one of two ways:
10
10
  - **Direct:** build the GUI of web apps with the same friendly desktop GUI Ruby syntax as [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt), thus requiring a lot less code than web technologies that is in pure Ruby and avoiding opaque web concepts like 'render' and 'reactive'. No HTML/JS/CSS skills are even required. Web designers may be involved with CSS styling only if needed.
@@ -12,9 +12,57 @@ 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
- NOTE: Alpha Version 0.7.1 only supports bare-minimum capabilities for the following [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) [samples](https://github.com/AndyObtiva/glimmer#samples):
15
+ #### Tic Tac Toe Sample
16
16
 
17
- Hello:
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):
24
+
25
+ ```ruby
26
+ # ...
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
+ }
46
+ }
47
+ # ...
48
+ ```
49
+ Tic Tac Toe on the web (using the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem):
50
+
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)
54
+
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):
56
+
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)
60
+
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.
62
+
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)):
64
+
65
+ [Hello samples](#hello-samples):
18
66
 
19
67
  - [Hello, World!](#hello-world)
20
68
  - [Hello, Combo!](#hello-combo)
@@ -32,8 +80,11 @@ Hello:
32
80
  - [Hello, Checkbox Group!](#hello-checkbox-group)
33
81
  - [Hello, Date Time!](#hello-date-time)
34
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)
35
86
 
36
- Elaborate:
87
+ [Elaborate samples](#elaborate-samples):
37
88
 
38
89
  - [Login](#login)
39
90
  - [Tic Tac Toe](#tic-tac-toe)
@@ -54,17 +105,31 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
54
105
  The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
55
106
 
56
107
  Widgets:
57
- - `shell`
58
- - `label`
59
- - `combo`
60
108
  - `button`
61
- - `text`
109
+ - `browser`
110
+ - `calendar`
111
+ - `checkbox`
112
+ - `checkbox_group`
113
+ - `combo`
62
114
  - `composite`
63
- - `list` & `list(:multi)`
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`
64
127
  - `tab_folder`
65
128
  - `tab_item`
66
129
  - `table`
67
130
  - `table_column`
131
+ - `text`
132
+ - `time`
68
133
  - `message_box`
69
134
  - Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget
70
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)
@@ -75,20 +140,34 @@ Layouts:
75
140
  - `fill_layout`
76
141
  - `layout_data`
77
142
 
78
- Graphics:
143
+ Graphics/Style:
79
144
  - `color`
80
145
  - `font`
146
+ - `Point` class used in setting location on widgets
147
+ - `swt` and `SWT` class to set SWT styles on widgets
81
148
 
82
149
  Data-Binding/Observers:
83
150
  - `bind`
84
151
  - `observe`
85
152
  - `on_widget_selected`
86
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`)
87
158
 
88
159
  Event loop:
89
160
  - `display`
90
161
  - `async_exec`
91
162
 
163
+ ## Principles
164
+
165
+ - **Live purely in Rubyland via the Glimmer GUI DSL**, completely oblivious to inferior web browser technologies.
166
+ - **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
+ - **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.
169
+ - **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
+
92
171
  ## Background
93
172
 
94
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.
@@ -109,7 +188,7 @@ Alternatively, web developers may directly use [Glimmer DSL for Opal](https://ru
109
188
 
110
189
  ## Setup
111
190
 
112
- (NOTE: if you run into issues, keep in mind this is a very early experimental and incomplete alpha. Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
191
+ (NOTE: Keep in mind this is a very early experimental and incomplete **alpha**. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-opal/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
113
192
 
114
193
  The [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem is a Rails Engine gem that includes assets.
115
194
 
@@ -133,7 +212,7 @@ Add the following to `Gemfile`:
133
212
  gem 'opal-rails', '~> 1.1.2'
134
213
  gem 'opal-async', '~> 1.2.0'
135
214
  gem 'opal-jquery', '~> 0.4.4'
136
- gem 'glimmer-dsl-opal', '~> 0.7.1'
215
+ gem 'glimmer-dsl-opal', '~> 0.8.0'
137
216
  gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
138
217
  gem 'glimmer-dsl-css', '~> 1.1.0', require: false
139
218
 
@@ -172,7 +251,7 @@ Edit `app/views/layouts/application.html.erb` and add the following below other
172
251
 
173
252
  Clear the file `app/views/welcomes/index.html.erb` from any content.
174
253
 
175
- Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
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.
176
255
 
177
256
  ```ruby
178
257
  Document.ready? do
@@ -202,11 +281,19 @@ end
202
281
 
203
282
  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)
204
283
 
205
- Also, this external sample app contains all the samples mentioned below configured inside a Rails 5 [Opal](https://opalrb.com/) app with all the pre-requisites ready to go for convenience:
284
+ The [Hello samples](#hello-samples) demonstrate tiny building blocks (widgets) for building full fledged applications.
285
+
286
+ The [Elaborate samples](#elaborate-samples) demonstrate more advanced sample applications that assemble multiple building blocks.
287
+
288
+ This external sample app contains all the samples mentioned below configured inside a Rails [Opal](https://opalrb.com/) app with all the pre-requisites ready to go for convenience:
289
+
290
+ [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails-app)
206
291
 
207
- [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
292
+ You may visit a Heroku hosted version at:
208
293
 
209
- Some of the screenshots might be out of date with updates done to samples in both [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) and [glimmer-dsl-opal](https://github.com/AndyObtiva/glimmer-dsl-opal).
294
+ https://sample-glimmer-dsl-opal-app.herokuapp.com/
295
+
296
+ Note: Some of the screenshots might be out of date with updates done to samples in both [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) and [glimmer-dsl-opal](https://github.com/AndyObtiva/glimmer-dsl-opal).
210
297
 
211
298
  ### Hello Samples
212
299
 
@@ -763,6 +850,10 @@ You should see "Hello, Custom Widget!"
763
850
 
764
851
  #### Hello, Custom Shell!
765
852
 
853
+ This sample demonstrates Glimmer DSL for Opal's ability to open multiple shells (windows) as web browser tabs.
854
+
855
+ It automatically handles routing so that tab URLs are bookmarkable. Web developers do not have to do any routing configuration manually.
856
+
766
857
  Add the following require statement to `app/assets/javascripts/application.rb`
767
858
 
768
859
  ```ruby
@@ -1493,7 +1584,7 @@ You should see "Hello, Date Time!"
1493
1584
 
1494
1585
  #### Hello, Table!
1495
1586
 
1496
- Note: This [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) sample has near-complete support, but is missing table context menus and table editing at the moment.
1587
+ Note: This [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) sample has near-complete support, but is missing table context menus at the moment.
1497
1588
 
1498
1589
  Add the following require statement to `app/assets/javascripts/application.rb`
1499
1590
 
@@ -1692,23 +1783,28 @@ class HelloTable
1692
1783
  text 'Game Date'
1693
1784
  width 150
1694
1785
  sort_property :date # ensure sorting by real date value (not `game_date` string specified in items below)
1786
+ editor :date_drop_down, property: :date_time
1695
1787
  }
1696
1788
  table_column {
1697
1789
  text 'Game Time'
1698
1790
  width 150
1699
1791
  sort_property :time # ensure sorting by real time value (not `game_time` string specified in items below)
1792
+ editor :time, property: :date_time
1700
1793
  }
1701
1794
  table_column {
1702
1795
  text 'Ballpark'
1703
1796
  width 180
1797
+ editor :none
1704
1798
  }
1705
1799
  table_column {
1706
1800
  text 'Home Team'
1707
1801
  width 150
1802
+ editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
1708
1803
  }
1709
1804
  table_column {
1710
1805
  text 'Away Team'
1711
1806
  width 150
1807
+ editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
1712
1808
  }
1713
1809
  table_column {
1714
1810
  text 'Promotion'
@@ -1757,6 +1853,39 @@ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObt
1757
1853
 
1758
1854
  ![Glimmer DSL for SWT Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table.png)
1759
1855
 
1856
+ Hello, Table! Editing Game Date
1857
+
1858
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-editing-game-date.png)
1859
+
1860
+ Hello, Table! Editing Game Time
1861
+
1862
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-editing-game-time.png)
1863
+
1864
+ Hello, Table! Editing Home Team
1865
+
1866
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-editing-home-team.png)
1867
+
1868
+ Hello, Table! Sorted Game Date Ascending
1869
+
1870
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-sorted-game-date-ascending.png)
1871
+
1872
+ Hello, Table! Sorted Game Date Descending
1873
+
1874
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-sorted-game-date-descending.png)
1875
+
1876
+ Hello, Table! Playoff Type Combo
1877
+
1878
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-playoff-type-combo.png)
1879
+
1880
+ Hello, Table! Playoff Type Changed
1881
+
1882
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-playoff-type-changed.png)
1883
+
1884
+ Hello, Table! Game Booked
1885
+
1886
+ ![Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table-game-booked.png)
1887
+
1888
+
1760
1889
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
1761
1890
 
1762
1891
  Start the Rails server:
@@ -1770,6 +1899,239 @@ You should see "Hello, Date Time!"
1770
1899
 
1771
1900
  ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table.png)
1772
1901
 
1902
+ Hello, Table! Editing Game Date
1903
+
1904
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-game-date.png)
1905
+
1906
+ Hello, Table! Editing Game Time
1907
+
1908
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-game-time.png)
1909
+
1910
+ Hello, Table! Editing Home Team
1911
+
1912
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-editing-home-team.png)
1913
+
1914
+ Hello, Table! Sorted Game Date Ascending
1915
+
1916
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-sorted-game-date-ascending.png)
1917
+
1918
+ Hello, Table! Sorted Game Date Descending
1919
+
1920
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-sorted-game-date-descending.png)
1921
+
1922
+ Hello, Table! Playoff Type Combo
1923
+
1924
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-playoff-type-combo.png)
1925
+
1926
+ Hello, Table! Playoff Type Changed
1927
+
1928
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-playoff-type-changed.png)
1929
+
1930
+ Hello, Table! Game Booked
1931
+
1932
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table-game-booked.png)
1933
+
1934
+ #### Hello, Button!
1935
+
1936
+ Add the following require statement to `app/assets/javascripts/application.rb`
1937
+
1938
+ ```ruby
1939
+ require 'glimmer-dsl-opal/samples/hello/hello_button'
1940
+ ```
1941
+
1942
+ Or add the Glimmer code directly if you prefer to play around with it:
1943
+
1944
+ ```ruby
1945
+ class HelloButton
1946
+ include Glimmer
1947
+
1948
+ attr_accessor :count
1949
+
1950
+ def initialize
1951
+ @count = 0
1952
+ end
1953
+
1954
+ def launch
1955
+ shell {
1956
+ text 'Hello, Button!'
1957
+
1958
+ button {
1959
+ text bind(self, :count) {|value| "Click To Increment: #{value} "}
1960
+
1961
+ on_widget_selected {
1962
+ self.count += 1
1963
+ }
1964
+ }
1965
+ }.open
1966
+ end
1967
+ end
1968
+
1969
+ HelloButton.new.launch
1970
+ ```
1971
+
1972
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1973
+
1974
+ ![Glimmer DSL for SWT Hello Button](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-button.png)
1975
+ ![Glimmer DSL for SWT Hello Button](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-button-incremented.png)
1976
+
1977
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1978
+
1979
+ Start the Rails server:
1980
+ ```
1981
+ rails s
1982
+ ```
1983
+
1984
+ Visit `http://localhost:3000`
1985
+
1986
+ You should see "Hello, Button!"
1987
+
1988
+ ![Glimmer DSL for Opal Hello Button](images/glimmer-dsl-opal-hello-button.png)
1989
+ ![Glimmer DSL for Opal Hello Button](images/glimmer-dsl-opal-hello-button-incremented.png)
1990
+
1991
+ #### Hello, Message Box!
1992
+
1993
+ Add the following require statement to `app/assets/javascripts/application.rb`
1994
+
1995
+ ```ruby
1996
+ require 'glimmer-dsl-opal/samples/hello/hello_message_box'
1997
+ ```
1998
+
1999
+ Or add the Glimmer code directly if you prefer to play around with it:
2000
+
2001
+ ```ruby
2002
+ include Glimmer
2003
+
2004
+ shell {
2005
+ text 'Hello, Message Box!'
2006
+
2007
+ button {
2008
+ text 'Please Click To Win a Surprise'
2009
+
2010
+ on_widget_selected {
2011
+ message_box {
2012
+ text 'Surprise'
2013
+ message "Congratulations!\n\nYou won $1,000,000!"
2014
+ }.open
2015
+ }
2016
+ }
2017
+ }.open
2018
+ ```
2019
+
2020
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2021
+
2022
+ ![Glimmer DSL for SWT Message Box](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-message-box.png)
2023
+ ![Glimmer DSL for SWT Message Box Dialog](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-message-box-dialog.png)
2024
+
2025
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
2026
+
2027
+ Start the Rails server:
2028
+ ```
2029
+ rails s
2030
+ ```
2031
+
2032
+ Visit `http://localhost:3000`
2033
+
2034
+ You should see "Hello, Message Box!"
2035
+
2036
+ ![Glimmer DSL for Opal Hello Message Box](images/glimmer-dsl-opal-hello-message-box.png)
2037
+ ![Glimmer DSL for Opal Hello Message Box Dialog](images/glimmer-dsl-opal-hello-message-box-dialog.png)
2038
+
2039
+ #### Hello, Pop Up Context Menu!
2040
+
2041
+ Add the following require statement to `app/assets/javascripts/application.rb`
2042
+
2043
+ ```ruby
2044
+ require 'glimmer-dsl-opal/samples/hello/hello_pop_up_context_menu'
2045
+ ```
2046
+
2047
+ Or add the Glimmer code directly if you prefer to play around with it:
2048
+
2049
+ ```ruby
2050
+ include Glimmer
2051
+
2052
+ shell {
2053
+ grid_layout {
2054
+ margin_width 0
2055
+ margin_height 0
2056
+ }
2057
+
2058
+ text 'Hello, Pop Up Context Menu!'
2059
+
2060
+ label {
2061
+ text "Right-Click on the Text to\nPop Up a Context Menu"
2062
+ font height: 50
2063
+
2064
+ menu {
2065
+ menu {
2066
+ text '&History'
2067
+ menu {
2068
+ text '&Recent'
2069
+ menu_item {
2070
+ text 'File 1'
2071
+ on_widget_selected {
2072
+ message_box {
2073
+ text 'File 1'
2074
+ message 'File 1 Contents'
2075
+ }.open
2076
+ }
2077
+ }
2078
+ menu_item {
2079
+ text 'File 2'
2080
+ on_widget_selected {
2081
+ message_box {
2082
+ text 'File 2'
2083
+ message 'File 2 Contents'
2084
+ }.open
2085
+ }
2086
+ }
2087
+ }
2088
+ menu {
2089
+ text '&Archived'
2090
+ menu_item {
2091
+ text 'File 3'
2092
+ on_widget_selected {
2093
+ message_box {
2094
+ text 'File 3'
2095
+ message 'File 3 Contents'
2096
+ }.open
2097
+ }
2098
+ }
2099
+ menu_item {
2100
+ text 'File 4'
2101
+ on_widget_selected {
2102
+ message_box {
2103
+ text 'File 4'
2104
+ message 'File 4 Contents'
2105
+ }.open
2106
+ }
2107
+ }
2108
+ }
2109
+ }
2110
+ }
2111
+ }
2112
+ }.open
2113
+ ```
2114
+
2115
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2116
+
2117
+ ![Glimmer DSL for SWT Hello Pop Up Context Menu Popped Up](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-pop-up-context-menu.png)
2118
+ ![Glimmer DSL for SWT Hello Pop Up Context Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-pop-up-context-menu-popped-up.png)
2119
+
2120
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
2121
+
2122
+ Start the Rails server:
2123
+ ```
2124
+ rails s
2125
+ ```
2126
+
2127
+ Visit `http://localhost:3000`
2128
+
2129
+ You should see "Hello, Pop Up Context Menu!"
2130
+
2131
+ ![Glimmer DSL for Opal Hello Pop Up Context Menu](images/glimmer-dsl-opal-hello-pop-up-context-menu.png)
2132
+ ![Glimmer DSL for Opal Hello Pop Up Context Menu Popped Up](images/glimmer-dsl-opal-hello-pop-up-context-menu-popped-up.png)
2133
+
2134
+
1773
2135
  ### Elaborate Samples
1774
2136
 
1775
2137
  #### Login
@@ -1785,7 +2147,6 @@ Or add the Glimmer code directly if you prefer to play around with it:
1785
2147
  ```ruby
1786
2148
  require "observer"
1787
2149
 
1788
- #Presents login screen data
1789
2150
  class LoginPresenter
1790
2151
 
1791
2152
  attr_accessor :user_name
@@ -1801,10 +2162,13 @@ class LoginPresenter
1801
2162
  def status=(status)
1802
2163
  @status = status
1803
2164
 
1804
- #TODO add feature to bind dependent properties to master property (2017-07-25 nested data binding)
1805
2165
  notify_observers("logged_in")
1806
2166
  notify_observers("logged_out")
1807
2167
  end
2168
+
2169
+ def valid?
2170
+ !@user_name.to_s.strip.empty? && !@password.to_s.strip.empty?
2171
+ end
1808
2172
 
1809
2173
  def logged_in
1810
2174
  self.status == "Logged In"
@@ -1815,6 +2179,7 @@ class LoginPresenter
1815
2179
  end
1816
2180
 
1817
2181
  def login
2182
+ return unless valid?
1818
2183
  self.status = "Logged In"
1819
2184
  end
1820
2185
 
@@ -1826,7 +2191,6 @@ class LoginPresenter
1826
2191
 
1827
2192
  end
1828
2193
 
1829
- #Login screen
1830
2194
  class Login
1831
2195
  include Glimmer
1832
2196
 
@@ -1838,15 +2202,21 @@ class Login
1838
2202
  grid_layout 2, false #two columns with differing widths
1839
2203
 
1840
2204
  label { text "Username:" } # goes in column 1
1841
- text { # goes in column 2
2205
+ @user_name_text = text { # goes in column 2
1842
2206
  text bind(presenter, :user_name)
1843
2207
  enabled bind(presenter, :logged_out)
2208
+ on_key_pressed { |event|
2209
+ @password_text.set_focus if event.keyCode == swt(:cr)
2210
+ }
1844
2211
  }
1845
2212
 
1846
2213
  label { text "Password:" }
1847
- text(:password, :border) {
2214
+ @password_text = text(:password, :border) {
1848
2215
  text bind(presenter, :password)
1849
2216
  enabled bind(presenter, :logged_out)
2217
+ on_key_pressed { |event|
2218
+ presenter.login if event.keyCode == swt(:cr)
2219
+ }
1850
2220
  }
1851
2221
 
1852
2222
  label { text "Status:" }
@@ -1856,12 +2226,21 @@ class Login
1856
2226
  text "Login"
1857
2227
  enabled bind(presenter, :logged_out)
1858
2228
  on_widget_selected { presenter.login }
2229
+ on_key_pressed { |event|
2230
+ presenter.login if event.keyCode == swt(:cr)
2231
+ }
1859
2232
  }
1860
2233
 
1861
2234
  button {
1862
2235
  text "Logout"
1863
2236
  enabled bind(presenter, :logged_in)
1864
2237
  on_widget_selected { presenter.logout }
2238
+ on_key_pressed { |event|
2239
+ if event.keyCode == swt(:cr)
2240
+ presenter.logout
2241
+ @user_name_text.set_focus
2242
+ end
2243
+ }
1865
2244
  }
1866
2245
  }
1867
2246
  }
@@ -2344,41 +2723,76 @@ class ContactManager
2344
2723
  shell {
2345
2724
  text "Contact Manager"
2346
2725
  composite {
2347
- composite {
2348
- grid_layout 2, false
2349
- label {text "First &Name: "}
2726
+ group {
2727
+ grid_layout(2, false) {
2728
+ margin_width 0
2729
+ margin_height 0
2730
+ }
2731
+ layout_data :fill, :center, true, false
2732
+ text 'Lookup Contacts'
2733
+ font height: 24
2734
+
2735
+ label {
2736
+ layout_data :right, :center, false, false
2737
+ text "First &Name: "
2738
+ font height: 16
2739
+ }
2350
2740
  text {
2741
+ layout_data :fill, :center, true, false
2351
2742
  text bind(@contact_manager_presenter, :first_name)
2352
2743
  on_key_pressed {|key_event|
2353
- @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
2744
+ @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
2354
2745
  }
2355
2746
  }
2356
- label {text "&Last Name: "}
2747
+
2748
+ label {
2749
+ layout_data :right, :center, false, false
2750
+ text "&Last Name: "
2751
+ font height: 16
2752
+ }
2357
2753
  text {
2754
+ layout_data :fill, :center, true, false
2358
2755
  text bind(@contact_manager_presenter, :last_name)
2359
2756
  on_key_pressed {|key_event|
2360
- @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
2757
+ @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
2361
2758
  }
2362
2759
  }
2363
- label {text "&Email: "}
2760
+
2761
+ label {
2762
+ layout_data :right, :center, false, false
2763
+ text "&Email: "
2764
+ font height: 16
2765
+ }
2364
2766
  text {
2767
+ layout_data :fill, :center, true, false
2365
2768
  text bind(@contact_manager_presenter, :email)
2366
2769
  on_key_pressed {|key_event|
2367
- @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
2770
+ @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
2368
2771
  }
2369
2772
  }
2773
+
2370
2774
  composite {
2371
- grid_layout 2, false
2775
+ row_layout {
2776
+ margin_width 0
2777
+ margin_height 0
2778
+ }
2779
+ layout_data(:right, :center, false, false) {
2780
+ horizontal_span 2
2781
+ }
2782
+
2372
2783
  button {
2373
2784
  text "&Find"
2374
- on_widget_selected {
2375
- @contact_manager_presenter.find
2785
+ on_widget_selected { @contact_manager_presenter.find }
2786
+ on_key_pressed {|key_event|
2787
+ @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
2376
2788
  }
2377
2789
  }
2790
+
2378
2791
  button {
2379
2792
  text "&List All"
2380
- on_widget_selected {
2381
- @contact_manager_presenter.list
2793
+ on_widget_selected { @contact_manager_presenter.list }
2794
+ on_key_pressed {|key_event|
2795
+ @contact_manager_presenter.list if key_event.keyCode == swt(:cr)
2382
2796
  }
2383
2797
  }
2384
2798
  }
@@ -2395,26 +2809,18 @@ class ContactManager
2395
2809
  table_column {
2396
2810
  text "First Name"
2397
2811
  width 80
2398
- on_widget_selected {
2399
- @contact_manager_presenter.toggle_sort(:first_name)
2400
- }
2401
2812
  }
2402
2813
  table_column {
2403
2814
  text "Last Name"
2404
2815
  width 80
2405
- on_widget_selected {
2406
- @contact_manager_presenter.toggle_sort(:last_name)
2407
- }
2408
2816
  }
2409
2817
  table_column {
2410
2818
  text "Email"
2411
2819
  width 200
2412
- on_widget_selected {
2413
- @contact_manager_presenter.toggle_sort(:email)
2414
- }
2415
2820
  }
2416
- items bind(@contact_manager_presenter, :results), column_properties(:first_name, :last_name, :email)
2417
- on_mouse_down { |event|
2821
+ items bind(@contact_manager_presenter, :results),
2822
+ column_properties(:first_name, :last_name, :email)
2823
+ on_mouse_up { |event|
2418
2824
  table_proxy.edit_table_item(event.table_item, event.column_index)
2419
2825
  }
2420
2826
  }
@@ -2424,7 +2830,6 @@ class ContactManager
2424
2830
  end
2425
2831
 
2426
2832
  ContactManager.new.launch
2427
-
2428
2833
  ```
2429
2834
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2430
2835