glimmer-dsl-opal 0.2.0 → 0.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (94) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +47 -0
  3. data/README.md +1022 -190
  4. data/VERSION +1 -1
  5. data/app/assets/images/glimmer/images/calendar.gif +0 -0
  6. data/app/assets/images/glimmer/images/ui-icons_222222_256x240.png +0 -0
  7. data/app/assets/images/glimmer/images/ui-icons_444444_256x240.png +0 -0
  8. data/app/assets/images/glimmer/images/ui-icons_555555_256x240.png +0 -0
  9. data/app/assets/images/glimmer/images/ui-icons_777620_256x240.png +0 -0
  10. data/app/assets/images/glimmer/images/ui-icons_777777_256x240.png +0 -0
  11. data/app/assets/images/glimmer/images/ui-icons_cc0000_256x240.png +0 -0
  12. data/app/assets/images/glimmer/images/ui-icons_ffffff_256x240.png +0 -0
  13. data/app/assets/stylesheets/glimmer.css +15 -0
  14. data/app/assets/stylesheets/glimmer/jquery-ui.css +1312 -0
  15. data/app/assets/stylesheets/glimmer/jquery-ui.structure.css +886 -0
  16. data/app/assets/stylesheets/glimmer/jquery-ui.theme.css +443 -0
  17. data/app/assets/stylesheets/glimmer/jquery.ui.timepicker.css +57 -0
  18. data/lib/glimmer-dsl-opal.rb +23 -8
  19. data/lib/glimmer-dsl-opal/ext/date.rb +48 -0
  20. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox.rb +85 -0
  21. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox_group.rb +68 -0
  22. data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +5 -5
  23. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +3 -3
  24. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +3 -3
  25. data/lib/glimmer-dsl-opal/samples/hello/hello_date_time.rb +63 -0
  26. data/lib/glimmer-dsl-opal/samples/hello/hello_group.rb +104 -0
  27. data/lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb +1 -1
  28. data/lib/glimmer-dsl-opal/samples/hello/hello_radio.rb +108 -0
  29. data/lib/glimmer-dsl-opal/samples/hello/hello_radio_group.rb +84 -0
  30. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/GPL-LICENSE.txt +278 -0
  31. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/MIT-LICENSE.txt +20 -0
  32. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/jquery.ui.timepicker.css +57 -0
  33. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/jquery.ui.timepicker.js +1496 -0
  34. data/lib/glimmer-dsl-opal/vendor/jquery-ui/AUTHORS.txt +333 -0
  35. data/lib/glimmer-dsl-opal/vendor/jquery-ui/LICENSE.txt +43 -0
  36. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_444444_256x240.png +0 -0
  37. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_555555_256x240.png +0 -0
  38. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_777620_256x240.png +0 -0
  39. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_777777_256x240.png +0 -0
  40. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_cc0000_256x240.png +0 -0
  41. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png +0 -0
  42. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.min.css +7 -0
  43. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.min.js +13 -0
  44. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.structure.min.css +5 -0
  45. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.theme.min.css +5 -0
  46. data/lib/glimmer-dsl-opal/vendor/jquery-ui/package.json +74 -0
  47. data/lib/glimmer-dsl-swt.rb +37 -0
  48. data/lib/glimmer/data_binding/element_binding.rb +2 -1
  49. data/lib/glimmer/dsl/opal/async_exec_expression.rb +23 -7
  50. data/lib/glimmer/dsl/opal/checkbox_group_selection_data_binding_expression.rb +61 -0
  51. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +42 -5
  52. data/lib/glimmer/dsl/opal/display_expression.rb +40 -0
  53. data/lib/glimmer/dsl/opal/dsl.rb +7 -0
  54. data/lib/glimmer/dsl/opal/exec_expression.rb +55 -0
  55. data/lib/glimmer/dsl/opal/layout_expression.rb +1 -1
  56. data/lib/glimmer/dsl/opal/property_expression.rb +4 -3
  57. data/lib/glimmer/dsl/opal/radio_group_selection_data_binding_expression.rb +61 -0
  58. data/lib/glimmer/dsl/opal/shell_expression.rb +23 -1
  59. data/lib/glimmer/dsl/opal/swt_expression.rb +1 -1
  60. data/lib/glimmer/dsl/opal/sync_exec_expression.rb +33 -0
  61. data/lib/glimmer/dsl/opal/widget_expression.rb +5 -0
  62. data/lib/glimmer/engine.rb +9 -0
  63. data/lib/glimmer/swt.rb +3 -3
  64. data/lib/glimmer/swt/button_proxy.rb +15 -1
  65. data/lib/glimmer/swt/checkbox_proxy.rb +81 -0
  66. data/lib/glimmer/swt/combo_proxy.rb +4 -4
  67. data/lib/glimmer/swt/custom/checkbox_group.rb +142 -0
  68. data/lib/glimmer/swt/custom/radio_group.rb +143 -0
  69. data/lib/glimmer/swt/date_time_proxy.rb +144 -0
  70. data/lib/glimmer/swt/display_proxy.rb +55 -1
  71. data/lib/glimmer/swt/fill_layout_proxy.rb +2 -2
  72. data/lib/glimmer/swt/grid_layout_proxy.rb +21 -10
  73. data/lib/glimmer/swt/group_proxy.rb +38 -0
  74. data/lib/glimmer/swt/label_proxy.rb +27 -7
  75. data/lib/glimmer/swt/layout_data_proxy.rb +59 -6
  76. data/lib/glimmer/swt/layout_proxy.rb +2 -1
  77. data/lib/glimmer/swt/list_proxy.rb +2 -2
  78. data/lib/glimmer/swt/make_shift_shell_proxy.rb +38 -0
  79. data/lib/glimmer/swt/message_box_proxy.rb +7 -7
  80. data/lib/glimmer/swt/radio_proxy.rb +82 -0
  81. data/lib/glimmer/swt/row_layout_proxy.rb +35 -12
  82. data/lib/glimmer/swt/scrolled_composite_proxy.rb +20 -0
  83. data/lib/glimmer/swt/shell_proxy.rb +25 -10
  84. data/lib/glimmer/swt/styled_text_proxy.rb +44 -0
  85. data/lib/glimmer/swt/tab_folder_proxy.rb +3 -3
  86. data/lib/glimmer/swt/table_proxy.rb +10 -10
  87. data/lib/glimmer/swt/text_proxy.rb +2 -2
  88. data/lib/glimmer/swt/widget_proxy.rb +67 -33
  89. data/lib/glimmer/ui/custom_shell.rb +21 -2
  90. data/lib/glimmer/ui/custom_widget.rb +3 -1
  91. data/lib/{glimmer-dsl-opal/missing/net → net}/http.rb +0 -0
  92. data/lib/uri.rb +64 -0
  93. metadata +57 -4
  94. data/lib/glimmer-dsl-opal/missing/uri.rb +0 -26
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4149153253dd59829bf590c406ff2e5b18c11a62cbbaf7130877f2046a04d2a1
4
- data.tar.gz: f82f4d9c0bff2625f1f4ef8bef4be2703789a72aed847d4c851697d916cf48c4
3
+ metadata.gz: c73ae51d66f5e2955bd4c4c8b639d6081a8445594699d4a2f2b71244903d3277
4
+ data.tar.gz: bff8c03439d137acd926baece557b609e0805adbf28b822984cd70f7b63666fc
5
5
  SHA512:
6
- metadata.gz: 202c4686ab1a2bf31377cbe4ee6f173c92318460e0758cb74356132323c571b381f3bd69d0d47933ac44c54a79fd24520ce7c2e1ffa1412db903ae2c27ce259b
7
- data.tar.gz: 182085ad652639b3d83b9853bf993702839cb8066074b92e5377b5b8aa1998d659d925ef0d1f5cac0c659241bd97cf7fe109d2008142e0f5b34165f49e93bc67
6
+ metadata.gz: 1bfba5a1bc6d5f6267e0622d3376d1567c40b5c06a7fcb49a8e7f3c5845a8b66214eaa897b2ebf9a8cb68d2a5cfbf5a83d3c4870250e6d9d901c39bbe9bf7d59
7
+ data.tar.gz: 285627b7e3d843d9c3f54ef169d96463e4abe3047580a92eacb314d0b302675e9b5799b92e2be02c73f8af039743f35610b4d25ce84cabf4c60d826c797dd150
@@ -1,5 +1,52 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.6.0
4
+
5
+ - Hello, Date Time! Sample
6
+ - Support `date_time`, `date`, `date_drop_down`, `time`, `calendar` keywords
7
+ - Format Date/Time correctly as per SWT implementation by default
8
+ - Make glimmer-dsl-opal gem into a Rails engine to support importing default static assets like CSS styles and images
9
+ - Show drop down icon next to `date_drop_down` and `time`
10
+
11
+ ## 0.5.1
12
+
13
+ - Fixed issue with Hello, Combo!, Hello, List...! samples
14
+
15
+ ## 0.5.0
16
+
17
+ - Add `margin_top`, `margin_right`, `margin_bottom`, and `margin_left` to RowLayoutProxy
18
+ - `radio`
19
+ - Hello, Radio! Sample
20
+ - `radio_group`
21
+ - Hello, Radio Group! Sample
22
+ - `checkbox`
23
+ - Hello, Checkbox! Sample
24
+ - `checkbox_group`
25
+ - Fix issue with `label` `alignment` property
26
+ - Fix issues with default `composite` `grid_layout` not getting its styles removed when setting `row_layout`
27
+ - `button(:radio)` alias for `radio`
28
+ - `check` alias for `checkbox`
29
+ - `button(:check)` alias for `checkbox`
30
+ - Hello, Group! Sample
31
+ - Group widget
32
+
33
+ ## 0.4.0
34
+
35
+ - Support `display` keyword representing an SWT Display
36
+ - Support display `on_swt_keydown` event listener (display-wide widget observer)
37
+ - Support `DisplayProxy#shells` method keeping track of open shell
38
+ - Make a custom shell open in the same window if there is no shell open already
39
+ - Support `sync_exec` keyword as just an alias to `async_exec`
40
+ - Provide a makeshift require for 'glimmer-dsl-swt' that requires 'glimmer-dsl-opal' instead
41
+ - Fake APIs on the web for OS.os?, File.read, Display.setAppName, Display.setAppVersion
42
+ - Provide a minimal URI class that supports URI::encode_www_form_component and URI::decode_www_form_component from Ruby
43
+
44
+ ## 0.3.0
45
+
46
+ - Support opening a custom shell in a browser tab/window by passing in query parameters to URL (e.g. ?custom_shell=keyword+option1=value1 etc...)
47
+ - Make custom shells automatically open in a new tab/window (while standard shells continue to open in the same window by replacing its content)
48
+ - Hello, Custom Shell! Sample
49
+
3
50
  ## 0.2.0
4
51
 
5
52
  - Color support
data/README.md CHANGED
@@ -1,14 +1,17 @@
1
- # [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Opal 0.2.0 (Webify Desktop Apps)
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.6.0 (Auto-Webify Desktop Apps)
2
2
  [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
3
3
  [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4
4
 
5
- ### You can finally live in pure Ruby land even on the web!
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 experimental proof-of-concept web GUI adapter for [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps (i.e. apps built with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt)). It webifies them via [Rails](https://rubyonrails.org/), allowing Ruby desktop apps to run on the web via [Opal Ruby](https://opalrb.com/) without changing a line of code. Apps may then be custom-styled for the web with standard CSS by web designers.
7
+ [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an experimental proof-of-concept web GUI adapter for [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps (i.e. apps built with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt)). It webifies them via [Rails](https://rubyonrails.org/), allowing Ruby desktop apps to run on the web via [Opal Ruby](https://opalrb.com/) without changing a line of code. Apps may then be custom-styled by web designers for the web with standard CSS.
8
8
 
9
- Glimmer DSL for Opal webifier successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal Ruby](https://opalrb.com/) inside a web browser, and as such inherits the full range of powerful Glimmer desktop [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities for the web.
9
+ 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.
10
+
11
+ NOTE: Alpha Version 0.6.0 only supports bare-minimum capabilities for the following [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) [samples](https://github.com/AndyObtiva/glimmer#samples):
12
+
13
+ Hello:
10
14
 
11
- NOTE: Alpha Version 0.2.0 only supports bare-minimum capabilities for the following [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) [samples](https://github.com/AndyObtiva/glimmer#samples):
12
15
  - [Hello, World!](#hello-world)
13
16
  - [Hello, Combo!](#hello-combo)
14
17
  - [Hello, Computed!](#hello-computed)
@@ -17,16 +20,38 @@ NOTE: Alpha Version 0.2.0 only supports bare-minimum capabilities for the follow
17
20
  - [Hello, Browser!](#hello-browser)
18
21
  - [Hello, Tab!](#hello-tab)
19
22
  - [Hello, Custom Widget!](#hello-custom-widget)
23
+ - [Hello, Custom Shell!](#hello-custom-shell)
24
+ - [Hello, Radio!](#hello-radio)
25
+ - [Hello, Radio Group!](#hello-radio-group)
26
+ - [Hello, Group!](#hello-group)
27
+ - [Hello, Checkbox!](#hello-checkbox)
28
+ - [Hello, Checkbox Group!](#hello-checkbox-group)
29
+ - [Hello, Date Time!](#hello-date-time)
30
+
31
+ Elaborate:
32
+
20
33
  - [Login](#login)
21
34
  - [Tic Tac Toe](#tic-tac-toe)
22
35
  - [Contact Manager](#contact-manager)
23
36
 
37
+ External:
38
+
39
+ - [Glimmer Calculator](#glimmer-calculator)
40
+
24
41
  Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
25
42
  - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
26
43
  - [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
27
44
  - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
28
45
  - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
29
46
 
47
+ ## Background
48
+
49
+ The idea behind Glimmer DSL for Opal is 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 GUI DSL is very simple in Glimmer DSL for SWT. Once 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).
50
+
51
+ 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.
52
+
53
+ Last but not least, you would likely want some special branding on the web, so you can push that off to a web designer who would be more than happy to do the web graphic design and customize the look and feel with pure CSS (no need for programming with Ruby or JavaScript). This enables a clean separation of concerns and distribution of tasks among developers and designers, let alone saving effort on the web GUI by reusing the desktop GUI as a base right off the bat.
54
+
30
55
  ## Supported Glimmer DSL Keywords
31
56
 
32
57
  The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
@@ -44,10 +69,8 @@ Widgets:
44
69
  - `table`
45
70
  - `table_column`
46
71
  - `message_box`
47
-
48
- Graphics:
49
- - `color`
50
- - `font`
72
+ - Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget
73
+ - 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)
51
74
 
52
75
  Layouts:
53
76
  - `grid_layout`
@@ -55,6 +78,10 @@ Layouts:
55
78
  - `fill_layout`
56
79
  - `layout_data`
57
80
 
81
+ Graphics:
82
+ - `color`
83
+ - `font`
84
+
58
85
  Data-Binding/Observers:
59
86
  - `bind`
60
87
  - `observe`
@@ -62,6 +89,7 @@ Data-Binding/Observers:
62
89
  - `on_modify_text`
63
90
 
64
91
  Event loop:
92
+ - `display`
65
93
  - `async_exec`
66
94
 
67
95
  ## Pre-requisites
@@ -69,28 +97,34 @@ Event loop:
69
97
  - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
70
98
  - Opal 1: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
71
99
  - jQuery 3: [https://code.jquery.com/](https://code.jquery.com/) (jQuery 3.5.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
100
+ - jQuery-UI 1.12: [https://code.jquery.com/](https://jqueryui.com/) (jQuery-UI 1.12.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
101
+ - jQuery-UI Timepicker 0.3: [https://code.jquery.com/](https://fgelinas.com/code/timepicker/) (jQuery-UI Timepicker 0.3.3 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
72
102
 
73
103
  ## Setup
74
104
 
75
105
  (NOTE: if you run into issues, keep in mind this is a very early experimental and incomplete alpha. Also, there is a slight chance issues you encounter are fixed in master or some other branch that you could check out instead)
76
106
 
77
- Please install a Rails 5 gem (e.g. `gem install rails -v5.2.4.3` )
107
+ Please install a Rails 5 gem:
108
+
109
+ ```
110
+ gem install rails -v5.2.4.4
111
+ ```
78
112
 
79
113
  Start a new Rails 5 app:
80
114
 
81
115
  ```
82
- rails new glimmer_app
116
+ rails new glimmer_app_server
83
117
  ```
84
118
 
85
119
  Add the following to `Gemfile`:
86
120
 
87
121
  ```
88
122
  gem 'opal-rails', '~> 1.1.2'
89
- gem 'opal-async', '~> 1.1.1'
123
+ gem 'opal-async', '~> 1.2.0'
90
124
  gem 'opal-jquery', '~> 0.4.4'
91
- gem 'glimmer-dsl-opal', '~> 0.2.0', require: false
92
- gem 'glimmer-dsl-xml', '~> 1.0.0', require: false
93
- gem 'glimmer-dsl-css', '~> 1.0.0', require: false
125
+ gem 'glimmer-dsl-opal', '~> 0.6.0'
126
+ gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
127
+ gem 'glimmer-dsl-css', '~> 1.1.0', require: false
94
128
 
95
129
  ```
96
130
 
@@ -101,29 +135,53 @@ Edit `config/initializers/assets.rb` and add the following at the bottom:
101
135
  Opal.use_gem 'glimmer-dsl-opal'
102
136
  ```
103
137
 
138
+ Run:
139
+
140
+ ```
141
+ rails g scaffold welcome
142
+ ```
143
+
144
+ Modify `config/routes.rb`:
145
+
146
+ ```ruby
147
+ root to: 'welcomes#index'
148
+ ```
149
+
104
150
  Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
105
151
 
106
152
  ```ruby
107
153
  require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
108
154
  ```
109
155
 
110
- Run:
156
+ Edit `app/views/layouts/application.html.erb` and add the following below other `stylesheet_link_tag` declarations:
111
157
 
112
- ```
113
- rails g scaffold welcome
158
+ ```erb
159
+ <%= stylesheet_link_tag 'glimmer', media: 'all', 'data-turbolinks-track': 'reload' %>
114
160
  ```
115
161
 
116
- Modify `config/routes.rb`:
162
+ Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
117
163
 
118
164
  ```ruby
119
- root to: 'welcome#index'
165
+ Document.ready? do
166
+ # require-statement/code goes here.
167
+ end
120
168
  ```
121
169
 
122
- Add more code to `app/assets/javascripts/application.rb` inside a `Document.ready?` block from one of the samples below or a [Glimmer](https://github.com/AndyObtiva/glimmer) [app](https://github.com/AndyObtiva/glimmer#app)/[custom-shell gem](https://github.com/AndyObtiva/glimmer#custom-shell-gem).
170
+ Example to confirm setup is working:
123
171
 
124
172
  ```ruby
125
173
  Document.ready? do
126
- # require-statement/code goes here.
174
+ include Glimmer
175
+
176
+ shell {
177
+ fill_layout
178
+ text 'Example to confirm setup is working'
179
+ label {
180
+ text "Welcome to Glimmer DSL for Opal!"
181
+ foreground :red
182
+ font height: 24
183
+ }
184
+ }.open
127
185
  end
128
186
  ```
129
187
 
@@ -135,6 +193,8 @@ Also, this external sample app contains all the samples mentioned below configur
135
193
 
136
194
  [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
137
195
 
196
+ 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).
197
+
138
198
  ### Hello Samples
139
199
 
140
200
  #### Hello, World!
@@ -208,9 +268,9 @@ class HelloCombo
208
268
  shell {
209
269
  row_layout(:vertical) {
210
270
  pack false
211
- }
271
+ }
212
272
 
213
- text 'Hello, Combo!'
273
+ text 'Hello, Combo!'
214
274
 
215
275
  combo(:read_only) {
216
276
  selection bind(person, :country)
@@ -377,7 +437,7 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
377
437
  Or add the Glimmer code directly if you prefer to play around with it:
378
438
 
379
439
  ```ruby
380
- class Person
440
+ class Person
381
441
  attr_accessor :country, :country_options
382
442
 
383
443
  def initialize
@@ -410,11 +470,759 @@ class HelloListSingleSelection
410
470
  end
411
471
  end
412
472
 
413
- HelloListSingleSelection.new.launch
473
+ HelloListSingleSelection.new.launch
474
+ ```
475
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
476
+
477
+ ![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-single-selection.png)
478
+
479
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
480
+
481
+ Start the Rails server:
482
+ ```
483
+ rails s
484
+ ```
485
+
486
+ Visit `http://localhost:3000`
487
+
488
+ You should see "Hello, List Single Selection!"
489
+
490
+ ![Glimmer DSL for Opal Hello List Single Selection](images/glimmer-dsl-opal-hello-list-single-selection.png)
491
+
492
+ #### Hello, List Multi Selection!
493
+
494
+ Add the following require statement to `app/assets/javascripts/application.rb`
495
+
496
+ ```ruby
497
+ require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
498
+ ```
499
+
500
+ Or add the Glimmer code directly if you prefer to play around with it:
501
+
502
+ ```ruby
503
+ class Person
504
+ attr_accessor :provinces, :provinces_options
505
+
506
+ def initialize
507
+ self.provinces_options=[
508
+ "",
509
+ "Quebec",
510
+ "Ontario",
511
+ "Manitoba",
512
+ "Saskatchewan",
513
+ "Alberta",
514
+ "British Columbia",
515
+ "Nova Skotia",
516
+ "Newfoundland"
517
+ ]
518
+ self.provinces = ["Quebec", "Manitoba", "Alberta"]
519
+ end
520
+
521
+ def reset_provinces
522
+ self.provinces = ["Quebec", "Manitoba", "Alberta"]
523
+ end
524
+ end
525
+
526
+ class HelloListMultiSelection
527
+ include Glimmer
528
+ def launch
529
+ person = Person.new
530
+ shell {
531
+ composite {
532
+ list(:multi) {
533
+ selection bind(person, :provinces)
534
+ }
535
+ button {
536
+ text "Reset"
537
+ on_widget_selected do
538
+ person.reset_provinces
539
+ end
540
+ }
541
+ }
542
+ }.open
543
+ end
544
+ end
545
+
546
+ HelloListMultiSelection.new.launch
547
+ ```
548
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
549
+
550
+ ![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-multi-selection.png)
551
+
552
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
553
+
554
+ Start the Rails server:
555
+ ```
556
+ rails s
557
+ ```
558
+
559
+ Visit `http://localhost:3000`
560
+
561
+ You should see "Hello, List Multi Selection!"
562
+
563
+ ![Glimmer DSL for Opal Hello List Multi Selection](images/glimmer-dsl-opal-hello-list-multi-selection.png)
564
+
565
+ #### Hello, Browser!
566
+
567
+ Add the following require statement to `app/assets/javascripts/application.rb`
568
+
569
+ ```ruby
570
+ require 'glimmer-dsl-opal/samples/hello/hello_browser'
571
+ ```
572
+
573
+ Or add the Glimmer code directly if you prefer to play around with it:
574
+
575
+ ```ruby
576
+ include Glimmer
577
+
578
+ shell {
579
+ minimum_size 1024, 860
580
+ browser {
581
+ url 'http://brightonresort.com/about'
582
+ }
583
+ }.open
584
+ ```
585
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
586
+
587
+ ![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-browser.png)
588
+
589
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
590
+
591
+ Start the Rails server:
592
+ ```
593
+ rails s
594
+ ```
595
+
596
+ Visit `http://localhost:3000`
597
+
598
+ You should see "Hello, Browser!"
599
+
600
+ ![Glimmer DSL for Opal Hello Browser](images/glimmer-dsl-opal-hello-browser.png)
601
+
602
+ #### Hello, Tab!
603
+
604
+ Add the following require statement to `app/assets/javascripts/application.rb`
605
+
606
+ ```ruby
607
+ require 'glimmer-dsl-opal/samples/hello/hello_tab'
608
+ ```
609
+
610
+ Or add the Glimmer code directly if you prefer to play around with it:
611
+
612
+ ```ruby
613
+ class HelloTab
614
+ include Glimmer
615
+ def launch
616
+ shell {
617
+ text "Hello, Tab!"
618
+ tab_folder {
619
+ tab_item {
620
+ text "English"
621
+ label {
622
+ text "Hello, World!"
623
+ }
624
+ }
625
+ tab_item {
626
+ text "French"
627
+ label {
628
+ text "Bonjour, Univers!"
629
+ }
630
+ }
631
+ }
632
+ }.open
633
+ end
634
+ end
635
+
636
+ HelloTab.new.launch
637
+ ```
638
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
639
+
640
+ ![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-english.png)
641
+ ![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-french.png)
642
+
643
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
644
+
645
+ Start the Rails server:
646
+ ```
647
+ rails s
648
+ ```
649
+
650
+ Visit `http://localhost:3000`
651
+
652
+ You should see "Hello, Tab!"
653
+
654
+ ![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
655
+ ![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
656
+
657
+ #### Hello, Custom Widget!
658
+
659
+ Add the following require statement to `app/assets/javascripts/application.rb`
660
+
661
+ ```ruby
662
+ require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
663
+ ```
664
+
665
+ Or add the Glimmer code directly if you prefer to play around with it:
666
+
667
+ ```ruby
668
+ # This class declares a `greeting_label` custom widget (by convention)
669
+ class GreetingLabel
670
+ include Glimmer::UI::CustomWidget
671
+
672
+ # multiple options without default values
673
+ options :name, :colors
674
+
675
+ # single option with default value
676
+ option :greeting, default: 'Hello'
677
+
678
+ # internal attribute (not a custom widget option)
679
+ attr_accessor :color
680
+
681
+ before_body {
682
+ @font = {height: 24, style: :bold}
683
+ @color = :black
684
+ }
685
+
686
+ after_body {
687
+ return if colors.nil?
688
+
689
+ Thread.new {
690
+ colors.cycle { |color|
691
+ async_exec {
692
+ self.color = color
693
+ }
694
+ sleep(1)
695
+ }
696
+ }
697
+ }
698
+
699
+ body {
700
+ # pass received swt_style through to label to customize (e.g. :center to center text)
701
+ label(swt_style) {
702
+ text "#{greeting}, #{name}!"
703
+ font @font
704
+ foreground bind(self, :color)
705
+ }
706
+ }
707
+
708
+ end
709
+
710
+ # including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `greeting_label` custom widget
711
+ include Glimmer
712
+
713
+ shell {
714
+ fill_layout :vertical
715
+
716
+ minimum_size 215, 215
717
+ text 'Hello, Custom Widget!'
718
+
719
+ # custom widget options are passed in a hash
720
+ greeting_label(name: 'Sean')
721
+
722
+ # pass :center SWT style followed by custom widget options hash
723
+ greeting_label(:center, name: 'Laura', greeting: 'Aloha') #
724
+
725
+ greeting_label(:right, name: 'Rick') {
726
+ # you can nest attributes under custom widgets just like any standard widget
727
+ foreground :red
728
+ }
729
+
730
+ # the colors option cycles between colors for the label foreground every second
731
+ greeting_label(:center, name: 'Mary', greeting: 'Aloha', colors: [:red, :dark_green, :blue])
732
+ }.open
733
+ ```
734
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
735
+
736
+ ![Glimmer DSL for SWT Hello Custom Widget](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-widget.gif)
737
+
738
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
739
+
740
+ Start the Rails server:
741
+ ```
742
+ rails s
743
+ ```
744
+
745
+ Visit `http://localhost:3000`
746
+
747
+ You should see "Hello, Custom Widget!"
748
+
749
+ ![Glimmer DSL for Opal Hello Custom Widget](images/glimmer-dsl-opal-hello-custom-widget.gif)
750
+
751
+ #### Hello, Custom Shell!
752
+
753
+ Add the following require statement to `app/assets/javascripts/application.rb`
754
+
755
+ ```ruby
756
+ require 'glimmer-dsl-opal/samples/hello/hello_custom_shell'
757
+ ```
758
+
759
+ Or add the Glimmer code directly if you prefer to play around with it:
760
+
761
+ ```ruby
762
+ require 'date'
763
+
764
+ # This class declares an `email_shell` custom shell, aka custom window (by convention)
765
+ # Used to view an email message
766
+ class EmailShell
767
+ include Glimmer::UI::CustomShell
768
+
769
+ # multiple options without default values
770
+ options :date, :subject, :from, :message
771
+
772
+ # single option with default value
773
+ option :to, default: '"John Irwin" <john.irwin@example.com>'
774
+
775
+ before_body {
776
+ @swt_style |= swt(:shell_trim, :modeless)
777
+ }
778
+
779
+ body {
780
+ # pass received swt_style through to shell to customize it (e.g. :dialog_trim for a blocking shell)
781
+ shell(swt_style) {
782
+ grid_layout(2, false)
783
+
784
+ text subject
785
+
786
+ label {
787
+ text 'Date:'
788
+ }
789
+ label {
790
+ text date
791
+ }
792
+
793
+ label {
794
+ text 'From:'
795
+ }
796
+ label {
797
+ text from
798
+ }
799
+
800
+ label {
801
+ text 'To:'
802
+ }
803
+ label {
804
+ text to
805
+ }
806
+
807
+ label {
808
+ text 'Subject:'
809
+ }
810
+ label {
811
+ text subject
812
+ }
813
+
814
+ label {
815
+ layout_data(:fill, :fill, true, true) {
816
+ horizontal_span 2 #TODO implement
817
+ vertical_indent 10
818
+ }
819
+
820
+ background :white
821
+ text message
822
+ }
823
+ }
824
+ }
825
+
826
+ end
827
+
828
+ class HelloCustomShell
829
+ # including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `email_shell` custom widget
830
+ include Glimmer
831
+
832
+ Email = Struct.new(:date, :subject, :from, :message, keyword_init: true)
833
+ EmailSystem = Struct.new(:emails, keyword_init: true)
834
+
835
+ def initialize
836
+ @email_system = EmailSystem.new(
837
+ emails: [
838
+ Email.new(date: DateTime.new(2029, 10, 22, 11, 3, 0).strftime('%F %I:%M %p'), subject: '3rd Week Report', from: '"Dianne Tux" <dianne.tux@example.com>', message: "Hello,\n\nI was wondering if you'd like to go over the weekly report sometime this afternoon.\n\nDianne"),
839
+ Email.new(date: DateTime.new(2029, 10, 21, 8, 1, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v100.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 100.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
840
+ Email.new(date: DateTime.new(2029, 10, 19, 16, 58, 0).strftime('%F %I:%M %p'), subject: 'Christmas Party', from: '"Lisa Ferreira" <lisa.ferreira@example.com>', message: "Merry Christmas,\n\nAll office Christmas Party arrangements have been set\n\nMake sure to bring a Secret Santa gift\n\nBest regards,\n\nLisa Ferreira"),
841
+ Email.new(date: DateTime.new(2029, 10, 16, 9, 43, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v99.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 99.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
842
+ Email.new(date: DateTime.new(2029, 10, 15, 11, 2, 0).strftime('%F %I:%M %p'), subject: '2nd Week Report', from: '"Dianne Tux" <dianne.tux@example.com>', message: "Hello,\n\nI was wondering if you'd like to go over the weekly report sometime this afternoon.\n\nDianne"),
843
+ Email.new(date: DateTime.new(2029, 10, 2, 10, 34, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v98.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 98.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
844
+ ]
845
+ )
846
+ end
847
+
848
+ def launch
849
+ shell {
850
+ grid_layout
851
+
852
+ text 'Hello, Custom Shell!'
853
+
854
+ label {
855
+ font height: 24, style: :bold
856
+ text 'Emails:'
857
+ }
858
+
859
+ label {
860
+ font height: 18
861
+ text 'Click an email to view its message'
862
+ }
863
+
864
+ table {
865
+ layout_data :fill, :fill, true, true
866
+
867
+ table_column {
868
+ text 'Date:'
869
+ width 180
870
+ }
871
+ table_column {
872
+ text 'Subject:'
873
+ width 180
874
+ }
875
+ table_column {
876
+ text 'From:'
877
+ width 360
878
+ }
879
+
880
+ items bind(@email_system, :emails), column_properties(:date, :subject, :from)
881
+
882
+ on_mouse_up { |event|
883
+ email = event.table_item.get_data
884
+ Thread.new do
885
+ async_exec {
886
+ email_shell(date: email.date, subject: email.subject, from: email.from, message: email.message).open
887
+ }
888
+ end
889
+ }
890
+ }
891
+ }.open
892
+ end
893
+ end
894
+
895
+ HelloCustomShell.new.launch
896
+ ```
897
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
898
+
899
+ ![Glimmer DSL for SWT Hello Custom Shell](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell.png)
900
+ ![Glimmer DSL for SWT Hello Custom Shell Email1](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email1.png)
901
+ ![Glimmer DSL for SWT Hello Custom Shell Email2](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email2.png)
902
+ ![Glimmer DSL for SWT Hello Custom Shell Email3](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email3.png)
903
+
904
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
905
+
906
+ Start the Rails server:
907
+ ```
908
+ rails s
909
+ ```
910
+
911
+ Visit `http://localhost:3000`
912
+
913
+ You should see "Hello, Custom Widget!"
914
+
915
+ ![Glimmer DSL for Opal Hello Custom Shell](images/glimmer-dsl-opal-hello-custom-shell.png)
916
+ ![Glimmer DSL for Opal Hello Custom Shell Email1](images/glimmer-dsl-opal-hello-custom-shell-email1.png)
917
+ ![Glimmer DSL for Opal Hello Custom Shell Email2](images/glimmer-dsl-opal-hello-custom-shell-email2.png)
918
+ ![Glimmer DSL for Opal Hello Custom Shell Email3](images/glimmer-dsl-opal-hello-custom-shell-email3.png)
919
+
920
+ #### Hello, Radio!
921
+
922
+ Add the following require statement to `app/assets/javascripts/application.rb`
923
+
924
+ ```ruby
925
+ require 'glimmer-dsl-opal/samples/hello/hello_radio'
926
+ ```
927
+
928
+ Or add the Glimmer code directly if you prefer to play around with it:
929
+
930
+ ```ruby
931
+ class HelloRadio
932
+ class Person
933
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
934
+
935
+ def initialize
936
+ reset
937
+ end
938
+
939
+ def reset
940
+ self.male = nil
941
+ self.female = nil
942
+ self.child = nil
943
+ self.teen = nil
944
+ self.adult = true
945
+ self.senior = nil
946
+ end
947
+ end
948
+
949
+ include Glimmer
950
+
951
+ def launch
952
+ person = Person.new
953
+
954
+ shell {
955
+ text 'Hello, Radio!'
956
+ row_layout :vertical
957
+
958
+ label {
959
+ text 'Gender:'
960
+ font style: :bold
961
+ }
962
+
963
+ composite {
964
+ row_layout
965
+
966
+ radio {
967
+ text 'Male'
968
+ selection bind(person, :male)
969
+ }
970
+
971
+ radio {
972
+ text 'Female'
973
+ selection bind(person, :female)
974
+ }
975
+ }
976
+
977
+ label {
978
+ text 'Age Group:'
979
+ font style: :bold
980
+ }
981
+
982
+ composite {
983
+ row_layout
984
+
985
+ radio {
986
+ text 'Child'
987
+ selection bind(person, :child)
988
+ }
989
+
990
+ radio {
991
+ text 'Teen'
992
+ selection bind(person, :teen)
993
+ }
994
+
995
+ radio {
996
+ text 'Adult'
997
+ selection bind(person, :adult)
998
+ }
999
+
1000
+ radio {
1001
+ text 'Senior'
1002
+ selection bind(person, :senior)
1003
+ }
1004
+ }
1005
+
1006
+ button {
1007
+ text 'Reset'
1008
+
1009
+ on_widget_selected do
1010
+ person.reset
1011
+ end
1012
+ }
1013
+ }.open
1014
+ end
1015
+ end
1016
+
1017
+ HelloRadio.new.launch
1018
+ ```
1019
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1020
+
1021
+ ![Glimmer DSL for SWT Hello Radio](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio.png)
1022
+
1023
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1024
+
1025
+ Start the Rails server:
1026
+ ```
1027
+ rails s
1028
+ ```
1029
+
1030
+ Visit `http://localhost:3000`
1031
+
1032
+ You should see "Hello, Radio!"
1033
+
1034
+ ![Glimmer DSL for Opal Hello Radio](images/glimmer-dsl-opal-hello-radio.png)
1035
+
1036
+ #### Hello, Radio Group!
1037
+
1038
+ Add the following require statement to `app/assets/javascripts/application.rb`
1039
+
1040
+ ```ruby
1041
+ require 'glimmer-dsl-opal/samples/hello/hello_radio_group'
1042
+ ```
1043
+
1044
+ Or add the Glimmer code directly if you prefer to play around with it:
1045
+
1046
+ ```ruby
1047
+ class HelloRadioGroup
1048
+ class Person
1049
+ attr_accessor :gender, :age_group
1050
+
1051
+ def initialize
1052
+ reset
1053
+ end
1054
+
1055
+ def gender_options
1056
+ ['Male', 'Female']
1057
+ end
1058
+
1059
+ def age_group_options
1060
+ ['Child', 'Teen', 'Adult', 'Senior']
1061
+ end
1062
+
1063
+ def reset
1064
+ self.gender = nil
1065
+ self.age_group = 'Adult'
1066
+ end
1067
+ end
1068
+
1069
+ include Glimmer
1070
+
1071
+ def launch
1072
+ person = Person.new
1073
+
1074
+ shell {
1075
+ text 'Hello, Radio Group!'
1076
+ row_layout :vertical
1077
+
1078
+ label {
1079
+ text 'Gender:'
1080
+ font style: :bold
1081
+ }
1082
+
1083
+ radio_group {
1084
+ row_layout :horizontal
1085
+ selection bind(person, :gender)
1086
+ }
1087
+
1088
+ label {
1089
+ text 'Age Group:'
1090
+ font style: :bold
1091
+ }
1092
+
1093
+ radio_group {
1094
+ row_layout :horizontal
1095
+ selection bind(person, :age_group)
1096
+ }
1097
+
1098
+ button {
1099
+ text 'Reset'
1100
+
1101
+ on_widget_selected do
1102
+ person.reset
1103
+ end
1104
+ }
1105
+ }.open
1106
+ end
1107
+ end
1108
+
1109
+ HelloRadioGroup.new.launch
1110
+ ```
1111
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1112
+
1113
+ ![Glimmer DSL for SWT Hello Radio Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio-group.png)
1114
+
1115
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1116
+
1117
+ Start the Rails server:
1118
+ ```
1119
+ rails s
1120
+ ```
1121
+
1122
+ Visit `http://localhost:3000`
1123
+
1124
+ You should see "Hello, Radio Group!"
1125
+
1126
+ ![Glimmer DSL for Opal Hello Radio Group](images/glimmer-dsl-opal-hello-radio-group.png)
1127
+
1128
+ #### Hello, Group!
1129
+
1130
+ Add the following require statement to `app/assets/javascripts/application.rb`
1131
+
1132
+ ```ruby
1133
+ require 'glimmer-dsl-opal/samples/hello/hello_group'
1134
+ ```
1135
+
1136
+ Or add the Glimmer code directly if you prefer to play around with it:
1137
+
1138
+ ```ruby
1139
+ class HelloGroup
1140
+ class Person
1141
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
1142
+
1143
+ def initialize
1144
+ reset
1145
+ end
1146
+
1147
+ def reset
1148
+ self.male = nil
1149
+ self.female = nil
1150
+ self.child = nil
1151
+ self.teen = nil
1152
+ self.adult = true
1153
+ self.senior = nil
1154
+ end
1155
+ end
1156
+
1157
+ include Glimmer
1158
+
1159
+ def launch
1160
+ person = Person.new
1161
+
1162
+ shell {
1163
+ text 'Hello, Group!'
1164
+ row_layout :vertical
1165
+
1166
+ group {
1167
+ row_layout
1168
+
1169
+ text 'Gender'
1170
+ font style: :bold
1171
+
1172
+ radio {
1173
+ text 'Male'
1174
+ selection bind(person, :male)
1175
+ }
1176
+
1177
+ radio {
1178
+ text 'Female'
1179
+ selection bind(person, :female)
1180
+ }
1181
+ }
1182
+
1183
+ group {
1184
+ row_layout
1185
+
1186
+ text 'Age Group'
1187
+ font style: :bold
1188
+
1189
+ radio {
1190
+ text 'Child'
1191
+ selection bind(person, :child)
1192
+ }
1193
+
1194
+ radio {
1195
+ text 'Teen'
1196
+ selection bind(person, :teen)
1197
+ }
1198
+
1199
+ radio {
1200
+ text 'Adult'
1201
+ selection bind(person, :adult)
1202
+ }
1203
+
1204
+ radio {
1205
+ text 'Senior'
1206
+ selection bind(person, :senior)
1207
+ }
1208
+ }
1209
+
1210
+ button {
1211
+ text 'Reset'
1212
+
1213
+ on_widget_selected do
1214
+ person.reset
1215
+ end
1216
+ }
1217
+ }.open
1218
+ end
1219
+ end
1220
+
1221
+ HelloGroup.new.launch
414
1222
  ```
415
1223
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
416
1224
 
417
- ![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-single-selection.png)
1225
+ ![Glimmer DSL for SWT Hello Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-group.png)
418
1226
 
419
1227
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
420
1228
 
@@ -425,106 +1233,89 @@ rails s
425
1233
 
426
1234
  Visit `http://localhost:3000`
427
1235
 
428
- You should see "Hello, List Single Selection!"
1236
+ You should see "Hello, Group!"
429
1237
 
430
- ![Glimmer DSL for Opal Hello List Single Selection](images/glimmer-dsl-opal-hello-list-single-selection.png)
1238
+ ![Glimmer DSL for Opal Hello Group](images/glimmer-dsl-opal-hello-group.png)
431
1239
 
432
- #### Hello, List Multi Selection!
1240
+ #### Hello, Checkbox!
433
1241
 
434
1242
  Add the following require statement to `app/assets/javascripts/application.rb`
435
1243
 
436
1244
  ```ruby
437
- require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
1245
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox'
438
1246
  ```
439
1247
 
440
1248
  Or add the Glimmer code directly if you prefer to play around with it:
441
1249
 
442
1250
  ```ruby
443
- class Person
444
- attr_accessor :provinces, :provinces_options
445
-
446
- def initialize
447
- self.provinces_options=[
448
- "",
449
- "Quebec",
450
- "Ontario",
451
- "Manitoba",
452
- "Saskatchewan",
453
- "Alberta",
454
- "British Columbia",
455
- "Nova Skotia",
456
- "Newfoundland"
457
- ]
458
- self.provinces = ["Quebec", "Manitoba", "Alberta"]
459
- end
460
-
461
- def reset_provinces
462
- self.provinces = ["Quebec", "Manitoba", "Alberta"]
1251
+ class HelloCheckbox
1252
+ class Person
1253
+ attr_accessor :skiing, :snowboarding, :snowmobiling, :snowshoeing
1254
+
1255
+ def initialize
1256
+ reset_activities
1257
+ end
1258
+
1259
+ def reset_activities
1260
+ self.skiing = false
1261
+ self.snowboarding = true
1262
+ self.snowmobiling = false
1263
+ self.snowshoeing = false
1264
+ end
463
1265
  end
464
- end
465
-
466
- class HelloListMultiSelection
1266
+
467
1267
  include Glimmer
1268
+
468
1269
  def launch
469
1270
  person = Person.new
1271
+
470
1272
  shell {
1273
+ text 'Hello, Checkbox!'
1274
+ row_layout :vertical
1275
+
1276
+ label {
1277
+ text 'Check all snow activities you are interested in:'
1278
+ font style: :bold
1279
+ }
1280
+
471
1281
  composite {
472
- list(:multi) {
473
- selection bind(person, :provinces)
1282
+ checkbox {
1283
+ text 'Skiing'
1284
+ selection bind(person, :skiing)
474
1285
  }
475
- button {
476
- text "Reset"
477
- on_widget_selected do
478
- person.reset_provinces
479
- end
1286
+
1287
+ checkbox {
1288
+ text 'Snowboarding'
1289
+ selection bind(person, :snowboarding)
1290
+ }
1291
+
1292
+ checkbox {
1293
+ text 'Snowmobiling'
1294
+ selection bind(person, :snowmobiling)
1295
+ }
1296
+
1297
+ checkbox {
1298
+ text 'Snowshoeing'
1299
+ selection bind(person, :snowshoeing)
480
1300
  }
481
1301
  }
1302
+
1303
+ button {
1304
+ text 'Reset Activities'
1305
+
1306
+ on_widget_selected do
1307
+ person.reset_activities
1308
+ end
1309
+ }
482
1310
  }.open
483
1311
  end
484
1312
  end
485
1313
 
486
- HelloListMultiSelection.new.launch
487
- ```
488
- Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
489
-
490
- ![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-multi-selection.png)
491
-
492
- Glimmer app on the web (using `glimmer-dsl-opal` gem):
493
-
494
- Start the Rails server:
495
- ```
496
- rails s
497
- ```
498
-
499
- Visit `http://localhost:3000`
500
-
501
- You should see "Hello, List Multi Selection!"
502
-
503
- ![Glimmer DSL for Opal Hello List Multi Selection](images/glimmer-dsl-opal-hello-list-multi-selection.png)
504
-
505
- #### Hello, Browser!
506
-
507
- Add the following require statement to `app/assets/javascripts/application.rb`
508
-
509
- ```ruby
510
- require 'glimmer-dsl-opal/samples/hello/hello_browser'
511
- ```
512
-
513
- Or add the Glimmer code directly if you prefer to play around with it:
514
-
515
- ```ruby
516
- include Glimmer
517
-
518
- shell {
519
- minimum_size 1024, 860
520
- browser {
521
- url 'http://brightonresort.com/about'
522
- }
523
- }.open
1314
+ HelloCheckbox.new.launch
524
1315
  ```
525
1316
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
526
1317
 
527
- ![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-browser.png)
1318
+ ![Glimmer DSL for SWT Hello Checkbox](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox.png)
528
1319
 
529
1320
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
530
1321
 
@@ -535,50 +1326,72 @@ rails s
535
1326
 
536
1327
  Visit `http://localhost:3000`
537
1328
 
538
- You should see "Hello, Browser!"
1329
+ You should see "Hello, Checkbox!"
539
1330
 
540
- ![Glimmer DSL for Opal Hello Browser](images/glimmer-dsl-opal-hello-browser.png)
1331
+ ![Glimmer DSL for Opal Hello Checkbox](images/glimmer-dsl-opal-hello-checkbox.png)
541
1332
 
542
- #### Hello, Tab!
1333
+ #### Hello, Checkbox Group!
543
1334
 
544
1335
  Add the following require statement to `app/assets/javascripts/application.rb`
545
1336
 
546
1337
  ```ruby
547
- require 'glimmer-dsl-opal/samples/hello/hello_tab'
1338
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox_group'
548
1339
  ```
549
1340
 
550
1341
  Or add the Glimmer code directly if you prefer to play around with it:
551
1342
 
552
1343
  ```ruby
553
- class HelloTab
1344
+ class HelloCheckboxGroup
1345
+ class Person
1346
+ attr_accessor :activities
1347
+
1348
+ def initialize
1349
+ reset_activities
1350
+ end
1351
+
1352
+ def activities_options
1353
+ ['Skiing', 'Snowboarding', 'Snowmobiling', 'Snowshoeing']
1354
+ end
1355
+
1356
+ def reset_activities
1357
+ self.activities = ['Snowboarding']
1358
+ end
1359
+ end
1360
+
554
1361
  include Glimmer
1362
+
555
1363
  def launch
1364
+ person = Person.new
1365
+
556
1366
  shell {
557
- text "Hello, Tab!"
558
- tab_folder {
559
- tab_item {
560
- text "English"
561
- label {
562
- text "Hello, World!"
563
- }
564
- }
565
- tab_item {
566
- text "French"
567
- label {
568
- text "Bonjour, Univers!"
569
- }
570
- }
1367
+ text 'Hello, Checkbox Group!'
1368
+ row_layout :vertical
1369
+
1370
+ label {
1371
+ text 'Check all snow activities you are interested in:'
1372
+ font style: :bold
1373
+ }
1374
+
1375
+ checkbox_group {
1376
+ selection bind(person, :activities)
1377
+ }
1378
+
1379
+ button {
1380
+ text 'Reset Activities'
1381
+
1382
+ on_widget_selected do
1383
+ person.reset_activities
1384
+ end
571
1385
  }
572
1386
  }.open
573
1387
  end
574
1388
  end
575
1389
 
576
- HelloTab.new.launch
1390
+ HelloCheckboxGroup.new.launch
577
1391
  ```
578
1392
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
579
1393
 
580
- ![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-english.png)
581
- ![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-french.png)
1394
+ ![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox-group.png)
582
1395
 
583
1396
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
584
1397
 
@@ -589,91 +1402,68 @@ rails s
589
1402
 
590
1403
  Visit `http://localhost:3000`
591
1404
 
592
- You should see "Hello, Tab!"
1405
+ You should see "Hello, Checkbox Group!"
593
1406
 
594
- ![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
595
- ![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
1407
+ ![Glimmer DSL for Opal Hello Checkbox Group](images/glimmer-dsl-opal-hello-checkbox-group.png)
596
1408
 
597
- #### Hello, Custom Widget!
1409
+ #### Hello, Date Time!
598
1410
 
599
1411
  Add the following require statement to `app/assets/javascripts/application.rb`
600
1412
 
601
1413
  ```ruby
602
- require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
1414
+ require 'glimmer-dsl-opal/samples/hello/hello_date_time'
603
1415
  ```
604
1416
 
605
1417
  Or add the Glimmer code directly if you prefer to play around with it:
606
1418
 
607
1419
  ```ruby
608
- # This class declares a `greeting_label` custom widget (by convention)
609
- class GreetingLabel
610
- include Glimmer::UI::CustomWidget
611
-
612
- # multiple options without default values
613
- options :name, :colors
614
-
615
- # single option with default value
616
- option :greeting, default: 'Hello'
617
-
618
- # internal attribute (not a custom widget option)
619
- attr_accessor :color
1420
+ class HelloDateTime
1421
+ class Person
1422
+ attr_accessor :date_of_birth
1423
+ end
620
1424
 
621
- before_body {
622
- @font = {height: 24, style: :bold}
623
- @color = :black
624
- }
1425
+ include Glimmer
625
1426
 
626
- after_body {
627
- return if colors.nil?
1427
+ def launch
1428
+ person = Person.new
1429
+ person.date_of_birth = DateTime.new(2013, 7, 12, 18, 37, 23)
628
1430
 
629
- Thread.new {
630
- colors.cycle { |color|
631
- async_exec {
632
- self.color = color
633
- }
634
- sleep(1)
1431
+ shell {
1432
+ row_layout :vertical
1433
+
1434
+ text 'Hello, Date Time!'
1435
+ minimum_size 180, 180
1436
+
1437
+ label {
1438
+ text 'Date of Birth'
1439
+ font height: 16, style: :bold
635
1440
  }
636
- }
637
- }
638
-
639
- body {
640
- # pass received swt_style through to label to customize (e.g. :center to center text)
641
- label(swt_style) {
642
- text "#{greeting}, #{name}!"
643
- font @font
644
- foreground bind(self, :color)
645
- }
646
- }
647
-
1441
+
1442
+ date { # alias for date_time(:date)
1443
+ date_time bind(person, :date_of_birth)
1444
+ }
1445
+
1446
+ date_drop_down { # alias for date_time(:date, :drop_down)
1447
+ date_time bind(person, :date_of_birth)
1448
+ }
1449
+
1450
+ time { # alias for date_time(:time)
1451
+ date_time bind(person, :date_of_birth)
1452
+ }
1453
+
1454
+ calendar { # alias for date_time(:calendar)
1455
+ date_time bind(person, :date_of_birth)
1456
+ }
1457
+ }.open
1458
+ end
648
1459
  end
649
1460
 
650
- # including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `greeting_label` custom widget
651
- include Glimmer
652
-
653
- shell {
654
- fill_layout :vertical
655
-
656
- minimum_size 215, 215
657
- text 'Hello, Custom Widget!'
658
-
659
- # custom widget options are passed in a hash
660
- greeting_label(name: 'Sean')
661
-
662
- # pass :center SWT style followed by custom widget options hash
663
- greeting_label(:center, name: 'Laura', greeting: 'Aloha') #
664
-
665
- greeting_label(:right, name: 'Rick') {
666
- # you can nest attributes under custom widgets just like any standard widget
667
- foreground :red
668
- }
669
-
670
- # the colors option cycles between colors for the label foreground every second
671
- greeting_label(:center, name: 'Mary', greeting: 'Aloha', colors: [:red, :dark_green, :blue])
672
- }.open
1461
+ HelloDateTime.new.launch
673
1462
  ```
1463
+
674
1464
  Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
675
1465
 
676
- ![Glimmer DSL for SWT Hello Custom Widget](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-widget.gif)
1466
+ ![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-date-time.png)
677
1467
 
678
1468
  Glimmer app on the web (using `glimmer-dsl-opal` gem):
679
1469
 
@@ -684,9 +1474,9 @@ rails s
684
1474
 
685
1475
  Visit `http://localhost:3000`
686
1476
 
687
- You should see "Hello, Custom Widget!"
1477
+ You should see "Hello, Date Time!"
688
1478
 
689
- ![Glimmer DSL for Opal Hello Custom Widget](images/glimmer-dsl-opal-hello-custom-widget.gif)
1479
+ ![Glimmer DSL for Opal Hello Date Time](images/glimmer-dsl-opal-hello-date-time.png)
690
1480
 
691
1481
  ### Elaborate Samples
692
1482
 
@@ -1395,6 +2185,48 @@ Glimmer DSL for Opal Contact Manager Edit Done
1395
2185
 
1396
2186
  ![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
1397
2187
 
2188
+ ### External Samples
2189
+
2190
+ #### Glimmer Calculator
2191
+
2192
+ Add the [glimmer-cs-calculator](https://github.com/AndyObtiva/glimmer-cs-calculator) gem to `Gemfile` (without requiring):
2193
+
2194
+ ```
2195
+ gem 'glimmer-cs-calculator', require: false
2196
+ ```
2197
+
2198
+ Add the following require statement to `app/assets/javascripts/application.rb`
2199
+
2200
+ ```ruby
2201
+ require 'glimmer-cs-calculator/launch'
2202
+ ```
2203
+
2204
+ Glimmer app on the desktop (using the [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2205
+
2206
+ ![Glimmer Calculator Linux](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-linux.png)
2207
+
2208
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
2209
+
2210
+ Start the Rails server:
2211
+ ```
2212
+ rails s
2213
+ ```
2214
+
2215
+ Visit `http://localhost:3000`
2216
+ (or visit: http://glimmer-cs-calculator-server.herokuapp.com)
2217
+
2218
+ You should see "Glimmer Calculator"
2219
+
2220
+ ![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
2221
+
2222
+ Here is an Apple Calculator CSS themed version (with [CSS only](https://github.com/AndyObtiva/glimmer-cs-calculator/blob/master/server/glimmer-cs-calculator-server/app/assets/stylesheets/welcomes_apple.scss), no app code changes):
2223
+
2224
+ Visit http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple
2225
+
2226
+ You should see "Apple Calculator Theme"
2227
+
2228
+ ![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)
2229
+
1398
2230
  ## Help
1399
2231
 
1400
2232
  ### Issues
@@ -1431,7 +2263,7 @@ These features have been suggested. You might see them in a future version of Gl
1431
2263
 
1432
2264
  [MIT](https://opensource.org/licenses/MIT)
1433
2265
 
1434
- Copyright (c) 2020 - Andy Maleh.
2266
+ Copyright (c) 2020 - Andy Maleh.
1435
2267
  See [LICENSE.txt](LICENSE.txt) for further details.
1436
2268
 
1437
2269
  --