glimmer-dsl-opal 0.3.0 → 0.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +48 -0
  3. data/README.md +690 -24
  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/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 +22 -10
  19. data/lib/glimmer-dsl-opal/ext/date.rb +38 -3
  20. data/lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb +23 -0
  21. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox.rb +85 -0
  22. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox_group.rb +68 -0
  23. data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +5 -5
  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 +33 -16
  52. data/lib/glimmer/dsl/opal/display_expression.rb +40 -0
  53. data/lib/glimmer/dsl/opal/dsl.rb +6 -0
  54. data/lib/glimmer/dsl/opal/exec_expression.rb +55 -0
  55. data/lib/glimmer/dsl/opal/property_expression.rb +4 -3
  56. data/lib/glimmer/dsl/opal/radio_group_selection_data_binding_expression.rb +61 -0
  57. data/lib/glimmer/dsl/opal/shell_expression.rb +7 -1
  58. data/lib/glimmer/dsl/opal/sync_exec_expression.rb +33 -0
  59. data/lib/glimmer/dsl/opal/widget_expression.rb +6 -1
  60. data/lib/glimmer/engine.rb +9 -0
  61. data/lib/glimmer/swt.rb +3 -3
  62. data/lib/glimmer/swt/button_proxy.rb +16 -2
  63. data/lib/glimmer/swt/checkbox_proxy.rb +81 -0
  64. data/lib/glimmer/swt/color_proxy.rb +45 -45
  65. data/lib/glimmer/swt/combo_proxy.rb +6 -6
  66. data/lib/glimmer/swt/composite_proxy.rb +2 -2
  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 +145 -0
  70. data/lib/glimmer/swt/display_proxy.rb +55 -1
  71. data/lib/glimmer/swt/fill_layout_proxy.rb +3 -3
  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 +40 -22
  76. data/lib/glimmer/swt/layout_proxy.rb +4 -4
  77. data/lib/glimmer/swt/list_proxy.rb +3 -3
  78. data/lib/glimmer/swt/make_shift_shell_proxy.rb +38 -0
  79. data/lib/glimmer/swt/message_box_proxy.rb +8 -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 +23 -9
  84. data/lib/glimmer/swt/styled_text_proxy.rb +44 -0
  85. data/lib/glimmer/swt/tab_folder_proxy.rb +5 -5
  86. data/lib/glimmer/swt/tab_item_proxy.rb +7 -7
  87. data/lib/glimmer/swt/table_item_proxy.rb +6 -6
  88. data/lib/glimmer/swt/table_proxy.rb +12 -12
  89. data/lib/glimmer/swt/text_proxy.rb +2 -2
  90. data/lib/glimmer/swt/widget_proxy.rb +79 -36
  91. data/lib/glimmer/ui/custom_shell.rb +2 -1
  92. data/lib/glimmer/ui/custom_widget.rb +10 -9
  93. data/lib/{glimmer-dsl-opal/missing/net → net}/http.rb +0 -0
  94. data/lib/{glimmer-dsl-opal/missing/uri.rb → uri.rb} +2 -2
  95. metadata +56 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 321f0f4121858de374edacf81772b65ff3bd0ee1e155531b5a04681c1e7f5fa0
4
- data.tar.gz: 5bfab859f5b96458ca452444253a8fb1fefe5274e2bdbc892e574ab6fcd74ed0
3
+ metadata.gz: 2989fcd48ddac2b782271cebca14b5a7615926251c14f2aef3fe878d177f7e41
4
+ data.tar.gz: 7001fa83285f8e16bf5ba5a86004963324f271a5a795c6c45b0aa71c5fd53a3c
5
5
  SHA512:
6
- metadata.gz: 58ee88fda2ed5729f1c3b58035d6aa252fbb23ac2a12b120e88040aa485d7e34bf9f337c1a8e6f289c73c23528aec4dd735a00c0542c4c120c9499141815cc38
7
- data.tar.gz: d70d728a4beb4ff5bff63c68b823155ab39b014163698fe875ffacbba09c2e18b91fc3b11fd529876857187fe7aae5e331ecf32b06f4d417a0615bd38d64877a
6
+ metadata.gz: e24b36f65ca89e2e4880b81ae6ac6fba81c4a1ae2c832a87e43a6401ee6f90b2014a223cac2c218374dc895cfece65c5c145ed9a637256310f1b3a7fac9e3e2b
7
+ data.tar.gz: d0f249102835911d3eb48f15ac87303376c935b54f17dd4f94ff5ab4db0d8ac6f780ea49ed8cd3c98e52d11c5dbad6975f34635f33f9064f26adca1dee47166e
@@ -1,5 +1,53 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.6.1
4
+
5
+ - Fix issue with rendering date_time without a block
6
+ - Made listener event handling async to improve performance when triggering multiple events
7
+ - Brought Tic Tac Toe sample up-to-date with changes in Glimmer DSL for SWT
8
+ - Fixed silent error encountered in rendering custom widgets
9
+
10
+ ## 0.6.0
11
+
12
+ - Hello, Date Time! Sample
13
+ - Support `date_time`, `date`, `date_drop_down`, `time`, `calendar` keywords
14
+ - Format Date/Time correctly as per SWT implementation by default
15
+ - Make glimmer-dsl-opal gem into a Rails engine to support importing default static assets like CSS styles and images
16
+ - Show drop down icon next to `date_drop_down` and `time`
17
+
18
+ ## 0.5.1
19
+
20
+ - Fixed issue with Hello, Combo!, Hello, List...! samples
21
+
22
+ ## 0.5.0
23
+
24
+ - Add `margin_top`, `margin_right`, `margin_bottom`, and `margin_left` to RowLayoutProxy
25
+ - `radio`
26
+ - Hello, Radio! Sample
27
+ - `radio_group`
28
+ - Hello, Radio Group! Sample
29
+ - `checkbox`
30
+ - Hello, Checkbox! Sample
31
+ - `checkbox_group`
32
+ - Fix issue with `label` `alignment` property
33
+ - Fix issues with default `composite` `grid_layout` not getting its styles removed when setting `row_layout`
34
+ - `button(:radio)` alias for `radio`
35
+ - `check` alias for `checkbox`
36
+ - `button(:check)` alias for `checkbox`
37
+ - Hello, Group! Sample
38
+ - Group widget
39
+
40
+ ## 0.4.0
41
+
42
+ - Support `display` keyword representing an SWT Display
43
+ - Support display `on_swt_keydown` event listener (display-wide widget observer)
44
+ - Support `DisplayProxy#shells` method keeping track of open shell
45
+ - Make a custom shell open in the same window if there is no shell open already
46
+ - Support `sync_exec` keyword as just an alias to `async_exec`
47
+ - Provide a makeshift require for 'glimmer-dsl-swt' that requires 'glimmer-dsl-opal' instead
48
+ - Fake APIs on the web for OS.os?, File.read, Display.setAppName, Display.setAppVersion
49
+ - Provide a minimal URI class that supports URI::encode_www_form_component and URI::decode_www_form_component from Ruby
50
+
3
51
  ## 0.3.0
4
52
 
5
53
  - 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...)
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.3.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 (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
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
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
10
 
11
- NOTE: Alpha Version 0.3.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):
11
+ NOTE: Alpha Version 0.6.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):
12
+
13
+ Hello:
14
+
12
15
  - [Hello, World!](#hello-world)
13
16
  - [Hello, Combo!](#hello-combo)
14
17
  - [Hello, Computed!](#hello-computed)
@@ -18,16 +21,37 @@ NOTE: Alpha Version 0.3.0 only supports bare-minimum capabilities for the follow
18
21
  - [Hello, Tab!](#hello-tab)
19
22
  - [Hello, Custom Widget!](#hello-custom-widget)
20
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
+
21
33
  - [Login](#login)
22
34
  - [Tic Tac Toe](#tic-tac-toe)
23
35
  - [Contact Manager](#contact-manager)
24
36
 
37
+ External:
38
+
39
+ - [Glimmer Calculator](#glimmer-calculator)
40
+
25
41
  Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
26
42
  - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
27
43
  - [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
28
44
  - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
29
45
  - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
30
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
+
31
55
  ## Supported Glimmer DSL Keywords
32
56
 
33
57
  The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
@@ -45,8 +69,8 @@ Widgets:
45
69
  - `table`
46
70
  - `table_column`
47
71
  - `message_box`
48
- - CustomWidget (ability to define any keyword as a custom widget)
49
- - CustomShell (ability to define any keyword as a custom shell (aka custom window) that opens in a new browser window)
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)
50
74
 
51
75
  Layouts:
52
76
  - `grid_layout`
@@ -65,6 +89,7 @@ Data-Binding/Observers:
65
89
  - `on_modify_text`
66
90
 
67
91
  Event loop:
92
+ - `display`
68
93
  - `async_exec`
69
94
 
70
95
  ## Pre-requisites
@@ -72,17 +97,27 @@ Event loop:
72
97
  - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
73
98
  - Opal 1: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
74
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)
75
102
 
76
103
  ## Setup
77
104
 
78
- (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)
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 any issues you encounter are fixed in master or some other branch that you could check out instead)
106
+
107
+ The [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem is a Rails Engine gem that includes assets.
79
108
 
80
- Please install a Rails 5 gem (e.g. `gem install rails -v5.2.4.3` )
109
+ Please follow the following steps to setup.
110
+
111
+ Install a Rails 5 gem:
112
+
113
+ ```
114
+ gem install rails -v5.2.4.4
115
+ ```
81
116
 
82
117
  Start a new Rails 5 app:
83
118
 
84
119
  ```
85
- rails new glimmer_app
120
+ rails new glimmer_app_server
86
121
  ```
87
122
 
88
123
  Add the following to `Gemfile`:
@@ -91,7 +126,7 @@ Add the following to `Gemfile`:
91
126
  gem 'opal-rails', '~> 1.1.2'
92
127
  gem 'opal-async', '~> 1.2.0'
93
128
  gem 'opal-jquery', '~> 0.4.4'
94
- gem 'glimmer-dsl-opal', '~> 0.3.0', require: false
129
+ gem 'glimmer-dsl-opal', '~> 0.6.1'
95
130
  gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
96
131
  gem 'glimmer-dsl-css', '~> 1.1.0', require: false
97
132
 
@@ -104,29 +139,53 @@ Edit `config/initializers/assets.rb` and add the following at the bottom:
104
139
  Opal.use_gem 'glimmer-dsl-opal'
105
140
  ```
106
141
 
142
+ Run:
143
+
144
+ ```
145
+ rails g scaffold welcome
146
+ ```
147
+
148
+ Modify `config/routes.rb`:
149
+
150
+ ```ruby
151
+ root to: 'welcomes#index'
152
+ ```
153
+
107
154
  Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
108
155
 
109
156
  ```ruby
110
157
  require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
111
158
  ```
112
159
 
113
- Run:
160
+ Edit `app/views/layouts/application.html.erb` and add the following below other `stylesheet_link_tag` declarations:
114
161
 
115
- ```
116
- rails g scaffold welcome
162
+ ```erb
163
+ <%= stylesheet_link_tag 'glimmer/glimmer', media: 'all', 'data-turbolinks-track': 'reload' %>
117
164
  ```
118
165
 
119
- Modify `config/routes.rb`:
166
+ Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
120
167
 
121
168
  ```ruby
122
- root to: 'welcome#index'
169
+ Document.ready? do
170
+ # require-statement/code goes here.
171
+ end
123
172
  ```
124
173
 
125
- 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).
174
+ Example to confirm setup is working:
126
175
 
127
176
  ```ruby
128
177
  Document.ready? do
129
- # require-statement/code goes here.
178
+ include Glimmer
179
+
180
+ shell {
181
+ fill_layout
182
+ text 'Example to confirm setup is working'
183
+ label {
184
+ text "Welcome to Glimmer DSL for Opal!"
185
+ foreground :red
186
+ font height: 24
187
+ }
188
+ }.open
130
189
  end
131
190
  ```
132
191
 
@@ -138,6 +197,8 @@ Also, this external sample app contains all the samples mentioned below configur
138
197
 
139
198
  [https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
140
199
 
200
+ 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).
201
+
141
202
  ### Hello Samples
142
203
 
143
204
  #### Hello, World!
@@ -211,9 +272,9 @@ class HelloCombo
211
272
  shell {
212
273
  row_layout(:vertical) {
213
274
  pack false
214
- }
275
+ }
215
276
 
216
- text 'Hello, Combo!'
277
+ text 'Hello, Combo!'
217
278
 
218
279
  combo(:read_only) {
219
280
  selection bind(person, :country)
@@ -380,7 +441,7 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
380
441
  Or add the Glimmer code directly if you prefer to play around with it:
381
442
 
382
443
  ```ruby
383
- class Person
444
+ class Person
384
445
  attr_accessor :country, :country_options
385
446
 
386
447
  def initialize
@@ -709,7 +770,7 @@ require 'date'
709
770
  class EmailShell
710
771
  include Glimmer::UI::CustomShell
711
772
 
712
- # multiple options without default values
773
+ # multiple options without default values
713
774
  options :date, :subject, :from, :message
714
775
 
715
776
  # single option with default value
@@ -724,7 +785,7 @@ class EmailShell
724
785
  shell(swt_style) {
725
786
  grid_layout(2, false)
726
787
 
727
- text subject
788
+ text subject
728
789
 
729
790
  label {
730
791
  text 'Date:'
@@ -761,7 +822,7 @@ class EmailShell
761
822
  }
762
823
 
763
824
  background :white
764
- text message
825
+ text message
765
826
  }
766
827
  }
767
828
  }
@@ -832,7 +893,7 @@ class HelloCustomShell
832
893
  }
833
894
  }
834
895
  }.open
835
- end
896
+ end
836
897
  end
837
898
 
838
899
  HelloCustomShell.new.launch
@@ -860,6 +921,567 @@ You should see "Hello, Custom Widget!"
860
921
  ![Glimmer DSL for Opal Hello Custom Shell Email2](images/glimmer-dsl-opal-hello-custom-shell-email2.png)
861
922
  ![Glimmer DSL for Opal Hello Custom Shell Email3](images/glimmer-dsl-opal-hello-custom-shell-email3.png)
862
923
 
924
+ #### Hello, Radio!
925
+
926
+ Add the following require statement to `app/assets/javascripts/application.rb`
927
+
928
+ ```ruby
929
+ require 'glimmer-dsl-opal/samples/hello/hello_radio'
930
+ ```
931
+
932
+ Or add the Glimmer code directly if you prefer to play around with it:
933
+
934
+ ```ruby
935
+ class HelloRadio
936
+ class Person
937
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
938
+
939
+ def initialize
940
+ reset
941
+ end
942
+
943
+ def reset
944
+ self.male = nil
945
+ self.female = nil
946
+ self.child = nil
947
+ self.teen = nil
948
+ self.adult = true
949
+ self.senior = nil
950
+ end
951
+ end
952
+
953
+ include Glimmer
954
+
955
+ def launch
956
+ person = Person.new
957
+
958
+ shell {
959
+ text 'Hello, Radio!'
960
+ row_layout :vertical
961
+
962
+ label {
963
+ text 'Gender:'
964
+ font style: :bold
965
+ }
966
+
967
+ composite {
968
+ row_layout
969
+
970
+ radio {
971
+ text 'Male'
972
+ selection bind(person, :male)
973
+ }
974
+
975
+ radio {
976
+ text 'Female'
977
+ selection bind(person, :female)
978
+ }
979
+ }
980
+
981
+ label {
982
+ text 'Age Group:'
983
+ font style: :bold
984
+ }
985
+
986
+ composite {
987
+ row_layout
988
+
989
+ radio {
990
+ text 'Child'
991
+ selection bind(person, :child)
992
+ }
993
+
994
+ radio {
995
+ text 'Teen'
996
+ selection bind(person, :teen)
997
+ }
998
+
999
+ radio {
1000
+ text 'Adult'
1001
+ selection bind(person, :adult)
1002
+ }
1003
+
1004
+ radio {
1005
+ text 'Senior'
1006
+ selection bind(person, :senior)
1007
+ }
1008
+ }
1009
+
1010
+ button {
1011
+ text 'Reset'
1012
+
1013
+ on_widget_selected do
1014
+ person.reset
1015
+ end
1016
+ }
1017
+ }.open
1018
+ end
1019
+ end
1020
+
1021
+ HelloRadio.new.launch
1022
+ ```
1023
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1024
+
1025
+ ![Glimmer DSL for SWT Hello Radio](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio.png)
1026
+
1027
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1028
+
1029
+ Start the Rails server:
1030
+ ```
1031
+ rails s
1032
+ ```
1033
+
1034
+ Visit `http://localhost:3000`
1035
+
1036
+ You should see "Hello, Radio!"
1037
+
1038
+ ![Glimmer DSL for Opal Hello Radio](images/glimmer-dsl-opal-hello-radio.png)
1039
+
1040
+ #### Hello, Radio Group!
1041
+
1042
+ Add the following require statement to `app/assets/javascripts/application.rb`
1043
+
1044
+ ```ruby
1045
+ require 'glimmer-dsl-opal/samples/hello/hello_radio_group'
1046
+ ```
1047
+
1048
+ Or add the Glimmer code directly if you prefer to play around with it:
1049
+
1050
+ ```ruby
1051
+ class HelloRadioGroup
1052
+ class Person
1053
+ attr_accessor :gender, :age_group
1054
+
1055
+ def initialize
1056
+ reset
1057
+ end
1058
+
1059
+ def gender_options
1060
+ ['Male', 'Female']
1061
+ end
1062
+
1063
+ def age_group_options
1064
+ ['Child', 'Teen', 'Adult', 'Senior']
1065
+ end
1066
+
1067
+ def reset
1068
+ self.gender = nil
1069
+ self.age_group = 'Adult'
1070
+ end
1071
+ end
1072
+
1073
+ include Glimmer
1074
+
1075
+ def launch
1076
+ person = Person.new
1077
+
1078
+ shell {
1079
+ text 'Hello, Radio Group!'
1080
+ row_layout :vertical
1081
+
1082
+ label {
1083
+ text 'Gender:'
1084
+ font style: :bold
1085
+ }
1086
+
1087
+ radio_group {
1088
+ row_layout :horizontal
1089
+ selection bind(person, :gender)
1090
+ }
1091
+
1092
+ label {
1093
+ text 'Age Group:'
1094
+ font style: :bold
1095
+ }
1096
+
1097
+ radio_group {
1098
+ row_layout :horizontal
1099
+ selection bind(person, :age_group)
1100
+ }
1101
+
1102
+ button {
1103
+ text 'Reset'
1104
+
1105
+ on_widget_selected do
1106
+ person.reset
1107
+ end
1108
+ }
1109
+ }.open
1110
+ end
1111
+ end
1112
+
1113
+ HelloRadioGroup.new.launch
1114
+ ```
1115
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1116
+
1117
+ ![Glimmer DSL for SWT Hello Radio Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio-group.png)
1118
+
1119
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1120
+
1121
+ Start the Rails server:
1122
+ ```
1123
+ rails s
1124
+ ```
1125
+
1126
+ Visit `http://localhost:3000`
1127
+
1128
+ You should see "Hello, Radio Group!"
1129
+
1130
+ ![Glimmer DSL for Opal Hello Radio Group](images/glimmer-dsl-opal-hello-radio-group.png)
1131
+
1132
+ #### Hello, Group!
1133
+
1134
+ Add the following require statement to `app/assets/javascripts/application.rb`
1135
+
1136
+ ```ruby
1137
+ require 'glimmer-dsl-opal/samples/hello/hello_group'
1138
+ ```
1139
+
1140
+ Or add the Glimmer code directly if you prefer to play around with it:
1141
+
1142
+ ```ruby
1143
+ class HelloGroup
1144
+ class Person
1145
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
1146
+
1147
+ def initialize
1148
+ reset
1149
+ end
1150
+
1151
+ def reset
1152
+ self.male = nil
1153
+ self.female = nil
1154
+ self.child = nil
1155
+ self.teen = nil
1156
+ self.adult = true
1157
+ self.senior = nil
1158
+ end
1159
+ end
1160
+
1161
+ include Glimmer
1162
+
1163
+ def launch
1164
+ person = Person.new
1165
+
1166
+ shell {
1167
+ text 'Hello, Group!'
1168
+ row_layout :vertical
1169
+
1170
+ group {
1171
+ row_layout
1172
+
1173
+ text 'Gender'
1174
+ font style: :bold
1175
+
1176
+ radio {
1177
+ text 'Male'
1178
+ selection bind(person, :male)
1179
+ }
1180
+
1181
+ radio {
1182
+ text 'Female'
1183
+ selection bind(person, :female)
1184
+ }
1185
+ }
1186
+
1187
+ group {
1188
+ row_layout
1189
+
1190
+ text 'Age Group'
1191
+ font style: :bold
1192
+
1193
+ radio {
1194
+ text 'Child'
1195
+ selection bind(person, :child)
1196
+ }
1197
+
1198
+ radio {
1199
+ text 'Teen'
1200
+ selection bind(person, :teen)
1201
+ }
1202
+
1203
+ radio {
1204
+ text 'Adult'
1205
+ selection bind(person, :adult)
1206
+ }
1207
+
1208
+ radio {
1209
+ text 'Senior'
1210
+ selection bind(person, :senior)
1211
+ }
1212
+ }
1213
+
1214
+ button {
1215
+ text 'Reset'
1216
+
1217
+ on_widget_selected do
1218
+ person.reset
1219
+ end
1220
+ }
1221
+ }.open
1222
+ end
1223
+ end
1224
+
1225
+ HelloGroup.new.launch
1226
+ ```
1227
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1228
+
1229
+ ![Glimmer DSL for SWT Hello Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-group.png)
1230
+
1231
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1232
+
1233
+ Start the Rails server:
1234
+ ```
1235
+ rails s
1236
+ ```
1237
+
1238
+ Visit `http://localhost:3000`
1239
+
1240
+ You should see "Hello, Group!"
1241
+
1242
+ ![Glimmer DSL for Opal Hello Group](images/glimmer-dsl-opal-hello-group.png)
1243
+
1244
+ #### Hello, Checkbox!
1245
+
1246
+ Add the following require statement to `app/assets/javascripts/application.rb`
1247
+
1248
+ ```ruby
1249
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox'
1250
+ ```
1251
+
1252
+ Or add the Glimmer code directly if you prefer to play around with it:
1253
+
1254
+ ```ruby
1255
+ class HelloCheckbox
1256
+ class Person
1257
+ attr_accessor :skiing, :snowboarding, :snowmobiling, :snowshoeing
1258
+
1259
+ def initialize
1260
+ reset_activities
1261
+ end
1262
+
1263
+ def reset_activities
1264
+ self.skiing = false
1265
+ self.snowboarding = true
1266
+ self.snowmobiling = false
1267
+ self.snowshoeing = false
1268
+ end
1269
+ end
1270
+
1271
+ include Glimmer
1272
+
1273
+ def launch
1274
+ person = Person.new
1275
+
1276
+ shell {
1277
+ text 'Hello, Checkbox!'
1278
+ row_layout :vertical
1279
+
1280
+ label {
1281
+ text 'Check all snow activities you are interested in:'
1282
+ font style: :bold
1283
+ }
1284
+
1285
+ composite {
1286
+ checkbox {
1287
+ text 'Skiing'
1288
+ selection bind(person, :skiing)
1289
+ }
1290
+
1291
+ checkbox {
1292
+ text 'Snowboarding'
1293
+ selection bind(person, :snowboarding)
1294
+ }
1295
+
1296
+ checkbox {
1297
+ text 'Snowmobiling'
1298
+ selection bind(person, :snowmobiling)
1299
+ }
1300
+
1301
+ checkbox {
1302
+ text 'Snowshoeing'
1303
+ selection bind(person, :snowshoeing)
1304
+ }
1305
+ }
1306
+
1307
+ button {
1308
+ text 'Reset Activities'
1309
+
1310
+ on_widget_selected do
1311
+ person.reset_activities
1312
+ end
1313
+ }
1314
+ }.open
1315
+ end
1316
+ end
1317
+
1318
+ HelloCheckbox.new.launch
1319
+ ```
1320
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1321
+
1322
+ ![Glimmer DSL for SWT Hello Checkbox](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox.png)
1323
+
1324
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1325
+
1326
+ Start the Rails server:
1327
+ ```
1328
+ rails s
1329
+ ```
1330
+
1331
+ Visit `http://localhost:3000`
1332
+
1333
+ You should see "Hello, Checkbox!"
1334
+
1335
+ ![Glimmer DSL for Opal Hello Checkbox](images/glimmer-dsl-opal-hello-checkbox.png)
1336
+
1337
+ #### Hello, Checkbox Group!
1338
+
1339
+ Add the following require statement to `app/assets/javascripts/application.rb`
1340
+
1341
+ ```ruby
1342
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox_group'
1343
+ ```
1344
+
1345
+ Or add the Glimmer code directly if you prefer to play around with it:
1346
+
1347
+ ```ruby
1348
+ class HelloCheckboxGroup
1349
+ class Person
1350
+ attr_accessor :activities
1351
+
1352
+ def initialize
1353
+ reset_activities
1354
+ end
1355
+
1356
+ def activities_options
1357
+ ['Skiing', 'Snowboarding', 'Snowmobiling', 'Snowshoeing']
1358
+ end
1359
+
1360
+ def reset_activities
1361
+ self.activities = ['Snowboarding']
1362
+ end
1363
+ end
1364
+
1365
+ include Glimmer
1366
+
1367
+ def launch
1368
+ person = Person.new
1369
+
1370
+ shell {
1371
+ text 'Hello, Checkbox Group!'
1372
+ row_layout :vertical
1373
+
1374
+ label {
1375
+ text 'Check all snow activities you are interested in:'
1376
+ font style: :bold
1377
+ }
1378
+
1379
+ checkbox_group {
1380
+ selection bind(person, :activities)
1381
+ }
1382
+
1383
+ button {
1384
+ text 'Reset Activities'
1385
+
1386
+ on_widget_selected do
1387
+ person.reset_activities
1388
+ end
1389
+ }
1390
+ }.open
1391
+ end
1392
+ end
1393
+
1394
+ HelloCheckboxGroup.new.launch
1395
+ ```
1396
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1397
+
1398
+ ![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox-group.png)
1399
+
1400
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1401
+
1402
+ Start the Rails server:
1403
+ ```
1404
+ rails s
1405
+ ```
1406
+
1407
+ Visit `http://localhost:3000`
1408
+
1409
+ You should see "Hello, Checkbox Group!"
1410
+
1411
+ ![Glimmer DSL for Opal Hello Checkbox Group](images/glimmer-dsl-opal-hello-checkbox-group.png)
1412
+
1413
+ #### Hello, Date Time!
1414
+
1415
+ Add the following require statement to `app/assets/javascripts/application.rb`
1416
+
1417
+ ```ruby
1418
+ require 'glimmer-dsl-opal/samples/hello/hello_date_time'
1419
+ ```
1420
+
1421
+ Or add the Glimmer code directly if you prefer to play around with it:
1422
+
1423
+ ```ruby
1424
+ class HelloDateTime
1425
+ class Person
1426
+ attr_accessor :date_of_birth
1427
+ end
1428
+
1429
+ include Glimmer
1430
+
1431
+ def launch
1432
+ person = Person.new
1433
+ person.date_of_birth = DateTime.new(2013, 7, 12, 18, 37, 23)
1434
+
1435
+ shell {
1436
+ row_layout :vertical
1437
+
1438
+ text 'Hello, Date Time!'
1439
+ minimum_size 180, 180
1440
+
1441
+ label {
1442
+ text 'Date of Birth'
1443
+ font height: 16, style: :bold
1444
+ }
1445
+
1446
+ date { # alias for date_time(:date)
1447
+ date_time bind(person, :date_of_birth)
1448
+ }
1449
+
1450
+ date_drop_down { # alias for date_time(:date, :drop_down)
1451
+ date_time bind(person, :date_of_birth)
1452
+ }
1453
+
1454
+ time { # alias for date_time(:time)
1455
+ date_time bind(person, :date_of_birth)
1456
+ }
1457
+
1458
+ calendar { # alias for date_time(:calendar)
1459
+ date_time bind(person, :date_of_birth)
1460
+ }
1461
+ }.open
1462
+ end
1463
+ end
1464
+
1465
+ HelloDateTime.new.launch
1466
+ ```
1467
+
1468
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1469
+
1470
+ ![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-date-time.png)
1471
+
1472
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1473
+
1474
+ Start the Rails server:
1475
+ ```
1476
+ rails s
1477
+ ```
1478
+
1479
+ Visit `http://localhost:3000`
1480
+
1481
+ You should see "Hello, Date Time!"
1482
+
1483
+ ![Glimmer DSL for Opal Hello Date Time](images/glimmer-dsl-opal-hello-date-time.png)
1484
+
863
1485
  ### Elaborate Samples
864
1486
 
865
1487
  #### Login
@@ -1151,6 +1773,7 @@ class TicTacToe
1151
1773
  @tic_tac_toe_board = Board.new
1152
1774
  @shell = shell {
1153
1775
  text "Tic-Tac-Toe"
1776
+ minimum_size 150, 178
1154
1777
  composite {
1155
1778
  grid_layout 3, true
1156
1779
  (1..3).each { |row|
@@ -1159,6 +1782,7 @@ class TicTacToe
1159
1782
  layout_data :fill, :fill, true, true
1160
1783
  text bind(@tic_tac_toe_board[row, column], :sign)
1161
1784
  enabled bind(@tic_tac_toe_board[row, column], :empty)
1785
+ font style: :bold, height: 20
1162
1786
  on_widget_selected {
1163
1787
  @tic_tac_toe_board.mark(row, column)
1164
1788
  }
@@ -1567,6 +2191,48 @@ Glimmer DSL for Opal Contact Manager Edit Done
1567
2191
 
1568
2192
  ![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
1569
2193
 
2194
+ ### External Samples
2195
+
2196
+ #### Glimmer Calculator
2197
+
2198
+ Add the [glimmer-cs-calculator](https://github.com/AndyObtiva/glimmer-cs-calculator) gem to `Gemfile` (without requiring):
2199
+
2200
+ ```
2201
+ gem 'glimmer-cs-calculator', require: false
2202
+ ```
2203
+
2204
+ Add the following require statement to `app/assets/javascripts/application.rb`
2205
+
2206
+ ```ruby
2207
+ require 'glimmer-cs-calculator/launch'
2208
+ ```
2209
+
2210
+ Glimmer app on the desktop (using the [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
2211
+
2212
+ ![Glimmer Calculator Linux](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-linux.png)
2213
+
2214
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
2215
+
2216
+ Start the Rails server:
2217
+ ```
2218
+ rails s
2219
+ ```
2220
+
2221
+ Visit `http://localhost:3000`
2222
+ (or visit: http://glimmer-cs-calculator-server.herokuapp.com)
2223
+
2224
+ You should see "Glimmer Calculator"
2225
+
2226
+ ![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
2227
+
2228
+ 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):
2229
+
2230
+ Visit http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple
2231
+
2232
+ You should see "Apple Calculator Theme"
2233
+
2234
+ ![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)
2235
+
1570
2236
  ## Help
1571
2237
 
1572
2238
  ### Issues
@@ -1603,7 +2269,7 @@ These features have been suggested. You might see them in a future version of Gl
1603
2269
 
1604
2270
  [MIT](https://opensource.org/licenses/MIT)
1605
2271
 
1606
- Copyright (c) 2020 - Andy Maleh.
2272
+ Copyright (c) 2020 - Andy Maleh.
1607
2273
  See [LICENSE.txt](LICENSE.txt) for further details.
1608
2274
 
1609
2275
  --