glimmer-dsl-opal 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +18 -0
  3. data/README.md +530 -13
  4. data/VERSION +1 -1
  5. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox.rb +85 -0
  6. data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox_group.rb +68 -0
  7. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +3 -3
  8. data/lib/glimmer-dsl-opal/samples/hello/hello_group.rb +104 -0
  9. data/lib/glimmer-dsl-opal/samples/hello/hello_radio.rb +108 -0
  10. data/lib/glimmer-dsl-opal/samples/hello/hello_radio_group.rb +84 -0
  11. data/lib/glimmer-dsl-swt.rb +1 -0
  12. data/lib/glimmer/data_binding/element_binding.rb +2 -1
  13. data/lib/glimmer/dsl/opal/checkbox_group_selection_data_binding_expression.rb +61 -0
  14. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +7 -5
  15. data/lib/glimmer/dsl/opal/dsl.rb +4 -0
  16. data/lib/glimmer/dsl/opal/property_expression.rb +4 -3
  17. data/lib/glimmer/dsl/opal/radio_group_selection_data_binding_expression.rb +61 -0
  18. data/lib/glimmer/swt/button_proxy.rb +15 -1
  19. data/lib/glimmer/swt/checkbox_proxy.rb +80 -0
  20. data/lib/glimmer/swt/combo_proxy.rb +4 -4
  21. data/lib/glimmer/swt/custom/checkbox_group.rb +142 -0
  22. data/lib/glimmer/swt/custom/radio_group.rb +143 -0
  23. data/lib/glimmer/swt/grid_layout_proxy.rb +19 -8
  24. data/lib/glimmer/swt/group_proxy.rb +38 -0
  25. data/lib/glimmer/swt/label_proxy.rb +27 -7
  26. data/lib/glimmer/swt/layout_data_proxy.rb +31 -13
  27. data/lib/glimmer/swt/list_proxy.rb +2 -2
  28. data/lib/glimmer/swt/radio_proxy.rb +81 -0
  29. data/lib/glimmer/swt/row_layout_proxy.rb +32 -9
  30. data/lib/glimmer/swt/scrolled_composite_proxy.rb +20 -0
  31. data/lib/glimmer/swt/shell_proxy.rb +21 -9
  32. data/lib/glimmer/swt/widget_proxy.rb +46 -30
  33. metadata +15 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1d32ed10e3cc93c0f4bde45e35265071c281d73b4371e68306dccbb3e3406e05
4
- data.tar.gz: 421daff761291fa3e118d090c450378ab5291f640ed5d81292560d1d8df8736b
3
+ metadata.gz: ee0609b6cdf6300f68c5558c9341240e6db0a176dd1e8ed687042eeafd5fc5bc
4
+ data.tar.gz: 2d829b17f2f51266bbface2fb65d18875cb046e2168e4182f2cbc25b81f802af
5
5
  SHA512:
6
- metadata.gz: 220ad6c819df436720e3756b9cef24a74ced1f6c1a14aa7ed5604b09b949a8badc99bbbfb1ce5a048b80c35bde882d0f0136e788dc07a54c9071ebaa9c72a680
7
- data.tar.gz: 80c1d6150624d0095ec7965f060e572841e1a7446b664c4741bd553302a805a051593084e495ccee472e66865e398f77443c5d91253f26fa3320b8fc9d9e168a
6
+ metadata.gz: b059c3db373177f98347631429fe74c573e49ded0497dd9ead80f88e77eb8331a7484e58239da7b063ab46ec351a38e463a9ae5c64bad78f5101b351dc32fe9d
7
+ data.tar.gz: db311a5065bd972a6a4b4968cfce227439978a9e42cf0be0fc2692b400f2dcd6c53e1cdff0ce59f43551bf1b0c6fc64523280f04e51c72abca1cd0c98f490223
@@ -1,5 +1,23 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.5.0
4
+
5
+ - Add `margin_top`, `margin_right`, `margin_bottom`, and `margin_left` to RowLayoutProxy
6
+ - `radio`
7
+ - Hello, Radio! Sample
8
+ - `radio_group`
9
+ - Hello, Radio Group! Sample
10
+ - `checkbox`
11
+ - Hello, Checkbox! Sample
12
+ - `checkbox_group`
13
+ - Fix issue with `label` `alignment` property
14
+ - Fix issues with default `composite` `grid_layout` not getting its styles removed when setting `row_layout`
15
+ - `button(:radio)` alias for `radio`
16
+ - `check` alias for `checkbox`
17
+ - `button(:check)` alias for `checkbox`
18
+ - Hello, Group! Sample
19
+ - Group widget
20
+
3
21
  ## 0.4.0
4
22
 
5
23
  - Support `display` keyword representing an SWT Display
data/README.md CHANGED
@@ -1,14 +1,28 @@
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.4.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.5.0 (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
+
9
+ Example:
10
+
11
+ [Glimmer Calculator](https://github.com/AndyObtiva/glimmer-cs-calculator) desktop GUI app running in Linux:
12
+
13
+ ![Glimmer Calculator Linux](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-linux.png)
14
+
15
+ Same exact app code running on the web with Opal (no app code changes):
16
+
17
+ ![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
18
+
19
+ Apple Calculator CSS themed version (added CSS only with no app code changes):
20
+
21
+ ![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)
8
22
 
9
23
  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
24
 
11
- NOTE: Alpha Version 0.4.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):
25
+ NOTE: Alpha Version 0.5.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
26
 
13
27
  Hello:
14
28
 
@@ -21,6 +35,11 @@ Hello:
21
35
  - [Hello, Tab!](#hello-tab)
22
36
  - [Hello, Custom Widget!](#hello-custom-widget)
23
37
  - [Hello, Custom Shell!](#hello-custom-shell)
38
+ - [Hello, Radio!](#hello-radio)
39
+ - [Hello, Radio Group!](#hello-radio-group)
40
+ - [Hello, Group!](#hello-group)
41
+ - [Hello, Checkbox!](#hello-checkbox)
42
+ - [Hello, Checkbox Group!](#hello-checkbox-group)
24
43
 
25
44
  Elaborate:
26
45
 
@@ -96,7 +115,7 @@ Event loop:
96
115
 
97
116
  (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)
98
117
 
99
- Please install a Rails 5 gem:
118
+ Please install a Rails 5 gem:
100
119
 
101
120
  ```
102
121
  gem install rails -v5.2.4.4
@@ -114,7 +133,7 @@ Add the following to `Gemfile`:
114
133
  gem 'opal-rails', '~> 1.1.2'
115
134
  gem 'opal-async', '~> 1.2.0'
116
135
  gem 'opal-jquery', '~> 0.4.4'
117
- gem 'glimmer-dsl-opal', '~> 0.4.0', require: false
136
+ gem 'glimmer-dsl-opal', '~> 0.5.0', require: false
118
137
  gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
119
138
  gem 'glimmer-dsl-css', '~> 1.1.0', require: false
120
139
 
@@ -254,9 +273,9 @@ class HelloCombo
254
273
  shell {
255
274
  row_layout(:vertical) {
256
275
  pack false
257
- }
276
+ }
258
277
 
259
- text 'Hello, Combo!'
278
+ text 'Hello, Combo!'
260
279
 
261
280
  combo(:read_only) {
262
281
  selection bind(person, :country)
@@ -423,7 +442,7 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
423
442
  Or add the Glimmer code directly if you prefer to play around with it:
424
443
 
425
444
  ```ruby
426
- class Person
445
+ class Person
427
446
  attr_accessor :country, :country_options
428
447
 
429
448
  def initialize
@@ -752,7 +771,7 @@ require 'date'
752
771
  class EmailShell
753
772
  include Glimmer::UI::CustomShell
754
773
 
755
- # multiple options without default values
774
+ # multiple options without default values
756
775
  options :date, :subject, :from, :message
757
776
 
758
777
  # single option with default value
@@ -767,7 +786,7 @@ class EmailShell
767
786
  shell(swt_style) {
768
787
  grid_layout(2, false)
769
788
 
770
- text subject
789
+ text subject
771
790
 
772
791
  label {
773
792
  text 'Date:'
@@ -804,7 +823,7 @@ class EmailShell
804
823
  }
805
824
 
806
825
  background :white
807
- text message
826
+ text message
808
827
  }
809
828
  }
810
829
  }
@@ -875,7 +894,7 @@ class HelloCustomShell
875
894
  }
876
895
  }
877
896
  }.open
878
- end
897
+ end
879
898
  end
880
899
 
881
900
  HelloCustomShell.new.launch
@@ -903,6 +922,495 @@ You should see "Hello, Custom Widget!"
903
922
  ![Glimmer DSL for Opal Hello Custom Shell Email2](images/glimmer-dsl-opal-hello-custom-shell-email2.png)
904
923
  ![Glimmer DSL for Opal Hello Custom Shell Email3](images/glimmer-dsl-opal-hello-custom-shell-email3.png)
905
924
 
925
+ #### Hello, Radio!
926
+
927
+ Add the following require statement to `app/assets/javascripts/application.rb`
928
+
929
+ ```ruby
930
+ require 'glimmer-dsl-opal/samples/hello/hello_radio'
931
+ ```
932
+
933
+ Or add the Glimmer code directly if you prefer to play around with it:
934
+
935
+ ```ruby
936
+ class HelloRadio
937
+ class Person
938
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
939
+
940
+ def initialize
941
+ reset
942
+ end
943
+
944
+ def reset
945
+ self.male = nil
946
+ self.female = nil
947
+ self.child = nil
948
+ self.teen = nil
949
+ self.adult = true
950
+ self.senior = nil
951
+ end
952
+ end
953
+
954
+ include Glimmer
955
+
956
+ def launch
957
+ person = Person.new
958
+
959
+ shell {
960
+ text 'Hello, Radio!'
961
+ row_layout :vertical
962
+
963
+ label {
964
+ text 'Gender:'
965
+ font style: :bold
966
+ }
967
+
968
+ composite {
969
+ row_layout
970
+
971
+ radio {
972
+ text 'Male'
973
+ selection bind(person, :male)
974
+ }
975
+
976
+ radio {
977
+ text 'Female'
978
+ selection bind(person, :female)
979
+ }
980
+ }
981
+
982
+ label {
983
+ text 'Age Group:'
984
+ font style: :bold
985
+ }
986
+
987
+ composite {
988
+ row_layout
989
+
990
+ radio {
991
+ text 'Child'
992
+ selection bind(person, :child)
993
+ }
994
+
995
+ radio {
996
+ text 'Teen'
997
+ selection bind(person, :teen)
998
+ }
999
+
1000
+ radio {
1001
+ text 'Adult'
1002
+ selection bind(person, :adult)
1003
+ }
1004
+
1005
+ radio {
1006
+ text 'Senior'
1007
+ selection bind(person, :senior)
1008
+ }
1009
+ }
1010
+
1011
+ button {
1012
+ text 'Reset'
1013
+
1014
+ on_widget_selected do
1015
+ person.reset
1016
+ end
1017
+ }
1018
+ }.open
1019
+ end
1020
+ end
1021
+
1022
+ HelloRadio.new.launch
1023
+ ```
1024
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1025
+
1026
+ ![Glimmer DSL for SWT Hello Radio](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio.png)
1027
+
1028
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1029
+
1030
+ Start the Rails server:
1031
+ ```
1032
+ rails s
1033
+ ```
1034
+
1035
+ Visit `http://localhost:3000`
1036
+
1037
+ You should see "Hello, Radio!"
1038
+
1039
+ ![Glimmer DSL for Opal Hello Radio](images/glimmer-dsl-opal-hello-radio.png)
1040
+
1041
+ #### Hello, Radio Group!
1042
+
1043
+ Add the following require statement to `app/assets/javascripts/application.rb`
1044
+
1045
+ ```ruby
1046
+ require 'glimmer-dsl-opal/samples/hello/hello_radio_group'
1047
+ ```
1048
+
1049
+ Or add the Glimmer code directly if you prefer to play around with it:
1050
+
1051
+ ```ruby
1052
+ class HelloRadioGroup
1053
+ class Person
1054
+ attr_accessor :gender, :age_group
1055
+
1056
+ def initialize
1057
+ reset
1058
+ end
1059
+
1060
+ def gender_options
1061
+ ['Male', 'Female']
1062
+ end
1063
+
1064
+ def age_group_options
1065
+ ['Child', 'Teen', 'Adult', 'Senior']
1066
+ end
1067
+
1068
+ def reset
1069
+ self.gender = nil
1070
+ self.age_group = 'Adult'
1071
+ end
1072
+ end
1073
+
1074
+ include Glimmer
1075
+
1076
+ def launch
1077
+ person = Person.new
1078
+
1079
+ shell {
1080
+ text 'Hello, Radio Group!'
1081
+ row_layout :vertical
1082
+
1083
+ label {
1084
+ text 'Gender:'
1085
+ font style: :bold
1086
+ }
1087
+
1088
+ radio_group {
1089
+ row_layout :horizontal
1090
+ selection bind(person, :gender)
1091
+ }
1092
+
1093
+ label {
1094
+ text 'Age Group:'
1095
+ font style: :bold
1096
+ }
1097
+
1098
+ radio_group {
1099
+ row_layout :horizontal
1100
+ selection bind(person, :age_group)
1101
+ }
1102
+
1103
+ button {
1104
+ text 'Reset'
1105
+
1106
+ on_widget_selected do
1107
+ person.reset
1108
+ end
1109
+ }
1110
+ }.open
1111
+ end
1112
+ end
1113
+
1114
+ HelloRadioGroup.new.launch
1115
+ ```
1116
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1117
+
1118
+ ![Glimmer DSL for SWT Hello Radio Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio-group.png)
1119
+
1120
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1121
+
1122
+ Start the Rails server:
1123
+ ```
1124
+ rails s
1125
+ ```
1126
+
1127
+ Visit `http://localhost:3000`
1128
+
1129
+ You should see "Hello, Radio Group!"
1130
+
1131
+ ![Glimmer DSL for Opal Hello Radio Group](images/glimmer-dsl-opal-hello-radio-group.png)
1132
+
1133
+ #### Hello, Group!
1134
+
1135
+ Add the following require statement to `app/assets/javascripts/application.rb`
1136
+
1137
+ ```ruby
1138
+ require 'glimmer-dsl-opal/samples/hello/hello_group'
1139
+ ```
1140
+
1141
+ Or add the Glimmer code directly if you prefer to play around with it:
1142
+
1143
+ ```ruby
1144
+ class HelloGroup
1145
+ class Person
1146
+ attr_accessor :male, :female, :child, :teen, :adult, :senior
1147
+
1148
+ def initialize
1149
+ reset
1150
+ end
1151
+
1152
+ def reset
1153
+ self.male = nil
1154
+ self.female = nil
1155
+ self.child = nil
1156
+ self.teen = nil
1157
+ self.adult = true
1158
+ self.senior = nil
1159
+ end
1160
+ end
1161
+
1162
+ include Glimmer
1163
+
1164
+ def launch
1165
+ person = Person.new
1166
+
1167
+ shell {
1168
+ text 'Hello, Group!'
1169
+ row_layout :vertical
1170
+
1171
+ group {
1172
+ row_layout
1173
+
1174
+ text 'Gender'
1175
+ font style: :bold
1176
+
1177
+ radio {
1178
+ text 'Male'
1179
+ selection bind(person, :male)
1180
+ }
1181
+
1182
+ radio {
1183
+ text 'Female'
1184
+ selection bind(person, :female)
1185
+ }
1186
+ }
1187
+
1188
+ group {
1189
+ row_layout
1190
+
1191
+ text 'Age Group'
1192
+ font style: :bold
1193
+
1194
+ radio {
1195
+ text 'Child'
1196
+ selection bind(person, :child)
1197
+ }
1198
+
1199
+ radio {
1200
+ text 'Teen'
1201
+ selection bind(person, :teen)
1202
+ }
1203
+
1204
+ radio {
1205
+ text 'Adult'
1206
+ selection bind(person, :adult)
1207
+ }
1208
+
1209
+ radio {
1210
+ text 'Senior'
1211
+ selection bind(person, :senior)
1212
+ }
1213
+ }
1214
+
1215
+ button {
1216
+ text 'Reset'
1217
+
1218
+ on_widget_selected do
1219
+ person.reset
1220
+ end
1221
+ }
1222
+ }.open
1223
+ end
1224
+ end
1225
+
1226
+ HelloGroup.new.launch
1227
+ ```
1228
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1229
+
1230
+ ![Glimmer DSL for SWT Hello Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-group.png)
1231
+
1232
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1233
+
1234
+ Start the Rails server:
1235
+ ```
1236
+ rails s
1237
+ ```
1238
+
1239
+ Visit `http://localhost:3000`
1240
+
1241
+ You should see "Hello, Group!"
1242
+
1243
+ ![Glimmer DSL for Opal Hello Group](images/glimmer-dsl-opal-hello-group.png)
1244
+
1245
+ #### Hello, Checkbox!
1246
+
1247
+ Add the following require statement to `app/assets/javascripts/application.rb`
1248
+
1249
+ ```ruby
1250
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox'
1251
+ ```
1252
+
1253
+ Or add the Glimmer code directly if you prefer to play around with it:
1254
+
1255
+ ```ruby
1256
+ class HelloCheckbox
1257
+ class Person
1258
+ attr_accessor :skiing, :snowboarding, :snowmobiling, :snowshoeing
1259
+
1260
+ def initialize
1261
+ reset_activities
1262
+ end
1263
+
1264
+ def reset_activities
1265
+ self.skiing = false
1266
+ self.snowboarding = true
1267
+ self.snowmobiling = false
1268
+ self.snowshoeing = false
1269
+ end
1270
+ end
1271
+
1272
+ include Glimmer
1273
+
1274
+ def launch
1275
+ person = Person.new
1276
+
1277
+ shell {
1278
+ text 'Hello, Checkbox!'
1279
+ row_layout :vertical
1280
+
1281
+ label {
1282
+ text 'Check all snow activities you are interested in:'
1283
+ font style: :bold
1284
+ }
1285
+
1286
+ composite {
1287
+ checkbox {
1288
+ text 'Skiing'
1289
+ selection bind(person, :skiing)
1290
+ }
1291
+
1292
+ checkbox {
1293
+ text 'Snowboarding'
1294
+ selection bind(person, :snowboarding)
1295
+ }
1296
+
1297
+ checkbox {
1298
+ text 'Snowmobiling'
1299
+ selection bind(person, :snowmobiling)
1300
+ }
1301
+
1302
+ checkbox {
1303
+ text 'Snowshoeing'
1304
+ selection bind(person, :snowshoeing)
1305
+ }
1306
+ }
1307
+
1308
+ button {
1309
+ text 'Reset Activities'
1310
+
1311
+ on_widget_selected do
1312
+ person.reset_activities
1313
+ end
1314
+ }
1315
+ }.open
1316
+ end
1317
+ end
1318
+
1319
+ HelloCheckbox.new.launch
1320
+ ```
1321
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1322
+
1323
+ ![Glimmer DSL for SWT Hello Checkbox](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox.png)
1324
+
1325
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1326
+
1327
+ Start the Rails server:
1328
+ ```
1329
+ rails s
1330
+ ```
1331
+
1332
+ Visit `http://localhost:3000`
1333
+
1334
+ You should see "Hello, Checkbox!"
1335
+
1336
+ ![Glimmer DSL for Opal Hello Checkbox](images/glimmer-dsl-opal-hello-checkbox.png)
1337
+
1338
+ #### Hello, Checkbox Group!
1339
+
1340
+ Add the following require statement to `app/assets/javascripts/application.rb`
1341
+
1342
+ ```ruby
1343
+ require 'glimmer-dsl-opal/samples/hello/hello_checkbox_group'
1344
+ ```
1345
+
1346
+ Or add the Glimmer code directly if you prefer to play around with it:
1347
+
1348
+ ```ruby
1349
+ class HelloCheckboxGroup
1350
+ class Person
1351
+ attr_accessor :activities
1352
+
1353
+ def initialize
1354
+ reset_activities
1355
+ end
1356
+
1357
+ def activities_options
1358
+ ['Skiing', 'Snowboarding', 'Snowmobiling', 'Snowshoeing']
1359
+ end
1360
+
1361
+ def reset_activities
1362
+ self.activities = ['Snowboarding']
1363
+ end
1364
+ end
1365
+
1366
+ include Glimmer
1367
+
1368
+ def launch
1369
+ person = Person.new
1370
+
1371
+ shell {
1372
+ text 'Hello, Checkbox Group!'
1373
+ row_layout :vertical
1374
+
1375
+ label {
1376
+ text 'Check all snow activities you are interested in:'
1377
+ font style: :bold
1378
+ }
1379
+
1380
+ checkbox_group {
1381
+ selection bind(person, :activities)
1382
+ }
1383
+
1384
+ button {
1385
+ text 'Reset Activities'
1386
+
1387
+ on_widget_selected do
1388
+ person.reset_activities
1389
+ end
1390
+ }
1391
+ }.open
1392
+ end
1393
+ end
1394
+
1395
+ HelloCheckboxGroup.new.launch
1396
+ ```
1397
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1398
+
1399
+ ![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox-group.png)
1400
+
1401
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1402
+
1403
+ Start the Rails server:
1404
+ ```
1405
+ rails s
1406
+ ```
1407
+
1408
+ Visit `http://localhost:3000`
1409
+
1410
+ You should see "Hello, Checkbox Group!"
1411
+
1412
+ ![Glimmer DSL for Opal Hello Checkbox Group](images/glimmer-dsl-opal-hello-checkbox-group.png)
1413
+
906
1414
  ### Elaborate Samples
907
1415
 
908
1416
  #### Login
@@ -1638,11 +2146,20 @@ rails s
1638
2146
  ```
1639
2147
 
1640
2148
  Visit `http://localhost:3000`
2149
+ (or visit: http://glimmer-cs-calculator-server.herokuapp.com)
1641
2150
 
1642
2151
  You should see "Glimmer Calculator"
1643
2152
 
1644
2153
  ![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
1645
2154
 
2155
+ 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):
2156
+
2157
+ Visit http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple
2158
+
2159
+ You should see "Apple Calculator Theme"
2160
+
2161
+ ![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)
2162
+
1646
2163
  ## Help
1647
2164
 
1648
2165
  ### Issues
@@ -1679,7 +2196,7 @@ These features have been suggested. You might see them in a future version of Gl
1679
2196
 
1680
2197
  [MIT](https://opensource.org/licenses/MIT)
1681
2198
 
1682
- Copyright (c) 2020 - Andy Maleh.
2199
+ Copyright (c) 2020 - Andy Maleh.
1683
2200
  See [LICENSE.txt](LICENSE.txt) for further details.
1684
2201
 
1685
2202
  --