glimmer-dsl-opal 0.4.0 → 0.7.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +56 -0
- data/README.md +892 -16
- data/VERSION +1 -1
- data/app/assets/images/glimmer/images/calendar.gif +0 -0
- data/app/assets/images/glimmer/images/ui-icons_222222_256x240.png +0 -0
- data/app/assets/images/glimmer/images/ui-icons_444444_256x240.png +0 -0
- data/app/assets/images/glimmer/images/ui-icons_555555_256x240.png +0 -0
- data/app/assets/images/glimmer/images/ui-icons_777620_256x240.png +0 -0
- data/app/assets/images/glimmer/images/ui-icons_777777_256x240.png +0 -0
- data/app/assets/images/glimmer/images/ui-icons_cc0000_256x240.png +0 -0
- data/app/assets/images/glimmer/images/ui-icons_ffffff_256x240.png +0 -0
- data/app/assets/stylesheets/glimmer/glimmer.css +15 -0
- data/app/assets/stylesheets/glimmer/jquery-ui.css +1312 -0
- data/app/assets/stylesheets/glimmer/jquery-ui.structure.css +886 -0
- data/app/assets/stylesheets/glimmer/jquery-ui.theme.css +443 -0
- data/app/assets/stylesheets/glimmer/jquery.ui.timepicker.css +57 -0
- data/lib/glimmer-dsl-opal.rb +16 -9
- data/lib/glimmer-dsl-opal/ext/date.rb +49 -3
- data/lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb +23 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox.rb +85 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_checkbox_group.rb +68 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +5 -5
- data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +3 -3
- data/lib/glimmer-dsl-opal/samples/hello/hello_date_time.rb +63 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_group.rb +104 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb +1 -1
- data/lib/glimmer-dsl-opal/samples/hello/hello_radio.rb +108 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_radio_group.rb +84 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_table.rb +283 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/GPL-LICENSE.txt +278 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/MIT-LICENSE.txt +20 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/jquery.ui.timepicker.css +57 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/jquery.ui.timepicker.js +1496 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/AUTHORS.txt +333 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/LICENSE.txt +43 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_444444_256x240.png +0 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_555555_256x240.png +0 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_777620_256x240.png +0 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_777777_256x240.png +0 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_cc0000_256x240.png +0 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png +0 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.min.css +7 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.min.js +13 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.structure.min.css +5 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.theme.min.css +5 -0
- data/lib/glimmer-dsl-opal/vendor/jquery-ui/package.json +74 -0
- data/lib/glimmer-dsl-swt.rb +1 -0
- data/lib/glimmer/data_binding/element_binding.rb +2 -1
- data/lib/glimmer/data_binding/table_items_binding.rb +29 -18
- data/lib/glimmer/dsl/opal/block_property_expression.rb +41 -0
- data/lib/glimmer/dsl/opal/checkbox_group_selection_data_binding_expression.rb +61 -0
- data/lib/glimmer/dsl/opal/custom_widget_expression.rb +8 -6
- data/lib/glimmer/dsl/opal/dsl.rb +6 -0
- data/lib/glimmer/dsl/opal/property_expression.rb +4 -3
- data/lib/glimmer/dsl/opal/radio_group_selection_data_binding_expression.rb +61 -0
- data/lib/glimmer/dsl/opal/shell_expression.rb +7 -2
- data/lib/glimmer/dsl/opal/widget_expression.rb +6 -1
- data/lib/glimmer/engine.rb +9 -0
- data/lib/glimmer/swt.rb +3 -3
- data/lib/glimmer/swt/button_proxy.rb +16 -2
- data/lib/glimmer/swt/checkbox_proxy.rb +81 -0
- data/lib/glimmer/swt/color_proxy.rb +45 -45
- data/lib/glimmer/swt/combo_proxy.rb +6 -6
- data/lib/glimmer/swt/composite_proxy.rb +2 -2
- data/lib/glimmer/swt/custom/checkbox_group.rb +142 -0
- data/lib/glimmer/swt/custom/radio_group.rb +143 -0
- data/lib/glimmer/swt/date_time_proxy.rb +145 -0
- data/lib/glimmer/swt/display_proxy.rb +6 -2
- data/lib/glimmer/swt/fill_layout_proxy.rb +1 -1
- data/lib/glimmer/swt/grid_layout_proxy.rb +19 -8
- data/lib/glimmer/swt/group_proxy.rb +38 -0
- data/lib/glimmer/swt/label_proxy.rb +27 -7
- data/lib/glimmer/swt/layout_data_proxy.rb +39 -21
- data/lib/glimmer/swt/layout_proxy.rb +4 -4
- data/lib/glimmer/swt/list_proxy.rb +3 -3
- data/lib/glimmer/swt/make_shift_shell_proxy.rb +4 -4
- data/lib/glimmer/swt/message_box_proxy.rb +10 -8
- data/lib/glimmer/swt/property_owner.rb +2 -2
- data/lib/glimmer/swt/radio_proxy.rb +82 -0
- data/lib/glimmer/swt/row_layout_proxy.rb +33 -10
- data/lib/glimmer/swt/scrolled_composite_proxy.rb +20 -0
- data/lib/glimmer/swt/shell_proxy.rb +29 -9
- data/lib/glimmer/swt/tab_folder_proxy.rb +5 -5
- data/lib/glimmer/swt/tab_item_proxy.rb +7 -7
- data/lib/glimmer/swt/table_column_proxy.rb +62 -12
- data/lib/glimmer/swt/table_item_proxy.rb +14 -7
- data/lib/glimmer/swt/table_proxy.rb +225 -16
- data/lib/glimmer/swt/text_proxy.rb +50 -2
- data/lib/glimmer/swt/widget_proxy.rb +88 -39
- data/lib/glimmer/ui/custom_widget.rb +8 -8
- data/lib/net/http.rb +1 -5
- data/lib/uri.rb +3 -3
- metadata +56 -9
- data/lib/glimmer/data_binding/ext/observable_model.rb +0 -40
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 15339e6707f761011f074d030dc58a41733c3ea249da444745c1c6696ab90468
|
4
|
+
data.tar.gz: 440722c63a85a92c02dac9a0955bcb5b26d620be1338727521674d63a3d5c9b6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7daddcebb68f6d612c011f2d99c3af01073f3740a3fb82bd9a4a1bd96c748db358c61c6d3ad1502aa23f5061fb8041921c680a729bf39d0fa971cfa55059e4d7
|
7
|
+
data.tar.gz: 15cea650eacfb8dbb05dc4892754b160cd0ad5ec0d5e5c0a5c87636e1fbc69f43d9a3fcc250edd3c9febc2bae1ab0a3ecf9fe47f295363de9b13cc47e86debc3
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,61 @@
|
|
1
1
|
# Change Log
|
2
2
|
|
3
|
+
## 0.7.0
|
4
|
+
|
5
|
+
- Hello, Table! Sample
|
6
|
+
- `table` :editable style to enable auto-editing
|
7
|
+
- `table` `header_visible` property to hide header when false
|
8
|
+
- `table` `item_count` property to set minimum item count (fill empty rows when below in table items)
|
9
|
+
- `table` selection data-binding
|
10
|
+
- `table` built-in sorting support
|
11
|
+
- `table_column` left text alignment and padding of 5px by default
|
12
|
+
- `table` sort property and direction in GUI
|
13
|
+
- `table_column` sort_property
|
14
|
+
- `table_column` sort_by block
|
15
|
+
- `table_column` sort block
|
16
|
+
- `table` default sort via property, compare block, and property block
|
17
|
+
- `table` additional sort properties
|
18
|
+
- Prevent `table` unnecessary updates by comparing data to previous data and not updating when it's the same
|
19
|
+
- Contact Manager sample support for on_key_pressed in text widgets upon hitting ENTER
|
20
|
+
- Fix issue with edit table item error on sorting table
|
21
|
+
|
22
|
+
## 0.6.1
|
23
|
+
|
24
|
+
- Fix issue with rendering date_time without a block
|
25
|
+
- Made listener event handling async to improve performance when triggering multiple events
|
26
|
+
- Brought Tic Tac Toe sample up-to-date with changes in Glimmer DSL for SWT
|
27
|
+
- Fixed silent error encountered in rendering custom widgets
|
28
|
+
|
29
|
+
## 0.6.0
|
30
|
+
|
31
|
+
- Hello, Date Time! Sample
|
32
|
+
- Support `date_time`, `date`, `date_drop_down`, `time`, `calendar` keywords
|
33
|
+
- Format Date/Time correctly as per SWT implementation by default
|
34
|
+
- Make glimmer-dsl-opal gem into a Rails engine to support importing default static assets like CSS styles and images
|
35
|
+
- Show drop down icon next to `date_drop_down` and `time`
|
36
|
+
|
37
|
+
## 0.5.1
|
38
|
+
|
39
|
+
- Fixed issue with Hello, Combo!, Hello, List...! samples
|
40
|
+
|
41
|
+
## 0.5.0
|
42
|
+
|
43
|
+
- Add `margin_top`, `margin_right`, `margin_bottom`, and `margin_left` to RowLayoutProxy
|
44
|
+
- `radio`
|
45
|
+
- Hello, Radio! Sample
|
46
|
+
- `radio_group`
|
47
|
+
- Hello, Radio Group! Sample
|
48
|
+
- `checkbox`
|
49
|
+
- Hello, Checkbox! Sample
|
50
|
+
- `checkbox_group`
|
51
|
+
- Fix issue with `label` `alignment` property
|
52
|
+
- Fix issues with default `composite` `grid_layout` not getting its styles removed when setting `row_layout`
|
53
|
+
- `button(:radio)` alias for `radio`
|
54
|
+
- `check` alias for `checkbox`
|
55
|
+
- `button(:check)` alias for `checkbox`
|
56
|
+
- Hello, Group! Sample
|
57
|
+
- Group widget
|
58
|
+
|
3
59
|
## 0.4.0
|
4
60
|
|
5
61
|
- Support `display` keyword representing an SWT Display
|
data/README.md
CHANGED
@@ -1,14 +1,18 @@
|
|
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.
|
1
|
+
# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Opal 0.7.0 (Pure Ruby Web GUI)
|
2
2
|
[![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
|
3
3
|
[![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
4
4
|
|
5
5
|
### You can finally live in pure Ruby land on the web!
|
6
6
|
|
7
|
-
[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an
|
7
|
+
[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an alpha [gem](https://rubygems.org/gems/glimmer-dsl-opal) that enables building web GUI in pure Ruby via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/).
|
8
|
+
|
9
|
+
Use in one of two ways:
|
10
|
+
- **Direct:** build the GUI of web apps with the same friendly desktop GUI Ruby syntax as [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt), thus requiring a lot less code than web technologies that is in pure Ruby and avoiding opaque web concepts like 'render' and 'reactive'. No HTML/JS/CSS skills are even required. Web designers may be involved with CSS styling only if needed.
|
11
|
+
- **Adapter:** Auto-webify [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps (i.e. apps built with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt)) via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/) without changing a line of code. Apps may then be custom-styled by web designers for the web with standard CSS.
|
8
12
|
|
9
13
|
Glimmer DSL for Opal successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal Ruby](https://opalrb.com/) inside a web browser, and as such inherits the full range of powerful Glimmer desktop [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities for the web.
|
10
14
|
|
11
|
-
NOTE: Alpha Version 0.
|
15
|
+
NOTE: Alpha Version 0.7.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
16
|
|
13
17
|
Hello:
|
14
18
|
|
@@ -21,6 +25,13 @@ Hello:
|
|
21
25
|
- [Hello, Tab!](#hello-tab)
|
22
26
|
- [Hello, Custom Widget!](#hello-custom-widget)
|
23
27
|
- [Hello, Custom Shell!](#hello-custom-shell)
|
28
|
+
- [Hello, Radio!](#hello-radio)
|
29
|
+
- [Hello, Radio Group!](#hello-radio-group)
|
30
|
+
- [Hello, Group!](#hello-group)
|
31
|
+
- [Hello, Checkbox!](#hello-checkbox)
|
32
|
+
- [Hello, Checkbox Group!](#hello-checkbox-group)
|
33
|
+
- [Hello, Date Time!](#hello-date-time)
|
34
|
+
- [Hello, Table!](#hello-table)
|
24
35
|
|
25
36
|
Elaborate:
|
26
37
|
|
@@ -40,12 +51,14 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
|
|
40
51
|
|
41
52
|
## Background
|
42
53
|
|
43
|
-
The idea behind Glimmer DSL for Opal
|
54
|
+
The original idea behind Glimmer DSL for Opal was that you start by having a [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) desktop app that communicates with a Rails API for any web/cloud concerns. The 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).
|
44
55
|
|
45
56
|
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.
|
46
57
|
|
47
58
|
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.
|
48
59
|
|
60
|
+
Alternatively, web developers may directly use [Glimmer DSL for Opal](https://rubygems.org/gems/glimmer-dsl-opal) to build the GUI of web apps since it is as simple as desktop development, thus requiring a lot less code that is in pure Ruby only (as demonstrated in examples below) and avoiding opaque web concepts like 'render' and 'reactive' due to treating GUI as persistent just like desktop apps do. No HTML/JS/CSS skills are even required. Still, web designers may be involved with CSS only if needed, thanks to the clean semantic markup [Glimmer DSL for Opal](https://rubygems.org/gems/glimmer-dsl-opal) produces.
|
61
|
+
|
49
62
|
## Supported Glimmer DSL Keywords
|
50
63
|
|
51
64
|
The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
|
@@ -91,12 +104,18 @@ Event loop:
|
|
91
104
|
- Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
|
92
105
|
- Opal 1: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
|
93
106
|
- 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)
|
107
|
+
- 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)
|
108
|
+
- 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)
|
94
109
|
|
95
110
|
## Setup
|
96
111
|
|
97
|
-
(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)
|
112
|
+
(NOTE: if you run into issues, keep in mind this is a very early experimental and incomplete alpha. Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
|
113
|
+
|
114
|
+
The [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem is a Rails Engine gem that includes assets.
|
115
|
+
|
116
|
+
Please follow the following steps to setup.
|
98
117
|
|
99
|
-
|
118
|
+
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.
|
136
|
+
gem 'glimmer-dsl-opal', '~> 0.7.0'
|
118
137
|
gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
|
119
138
|
gem 'glimmer-dsl-css', '~> 1.1.0', require: false
|
120
139
|
|
@@ -145,6 +164,12 @@ Add the following line to the top of an empty `app/assets/javascripts/applicatio
|
|
145
164
|
require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
|
146
165
|
```
|
147
166
|
|
167
|
+
Edit `app/views/layouts/application.html.erb` and add the following below other `stylesheet_link_tag` declarations:
|
168
|
+
|
169
|
+
```erb
|
170
|
+
<%= stylesheet_link_tag 'glimmer/glimmer', media: 'all', 'data-turbolinks-track': 'reload' %>
|
171
|
+
```
|
172
|
+
|
148
173
|
Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
|
149
174
|
|
150
175
|
```ruby
|
@@ -254,9 +279,9 @@ class HelloCombo
|
|
254
279
|
shell {
|
255
280
|
row_layout(:vertical) {
|
256
281
|
pack false
|
257
|
-
}
|
282
|
+
}
|
258
283
|
|
259
|
-
text 'Hello, Combo!'
|
284
|
+
text 'Hello, Combo!'
|
260
285
|
|
261
286
|
combo(:read_only) {
|
262
287
|
selection bind(person, :country)
|
@@ -423,7 +448,7 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
|
|
423
448
|
Or add the Glimmer code directly if you prefer to play around with it:
|
424
449
|
|
425
450
|
```ruby
|
426
|
-
class Person
|
451
|
+
class Person
|
427
452
|
attr_accessor :country, :country_options
|
428
453
|
|
429
454
|
def initialize
|
@@ -752,7 +777,7 @@ require 'date'
|
|
752
777
|
class EmailShell
|
753
778
|
include Glimmer::UI::CustomShell
|
754
779
|
|
755
|
-
# multiple options without default values
|
780
|
+
# multiple options without default values
|
756
781
|
options :date, :subject, :from, :message
|
757
782
|
|
758
783
|
# single option with default value
|
@@ -767,7 +792,7 @@ class EmailShell
|
|
767
792
|
shell(swt_style) {
|
768
793
|
grid_layout(2, false)
|
769
794
|
|
770
|
-
text subject
|
795
|
+
text subject
|
771
796
|
|
772
797
|
label {
|
773
798
|
text 'Date:'
|
@@ -804,7 +829,7 @@ class EmailShell
|
|
804
829
|
}
|
805
830
|
|
806
831
|
background :white
|
807
|
-
text message
|
832
|
+
text message
|
808
833
|
}
|
809
834
|
}
|
810
835
|
}
|
@@ -875,7 +900,7 @@ class HelloCustomShell
|
|
875
900
|
}
|
876
901
|
}
|
877
902
|
}.open
|
878
|
-
end
|
903
|
+
end
|
879
904
|
end
|
880
905
|
|
881
906
|
HelloCustomShell.new.launch
|
@@ -903,6 +928,846 @@ You should see "Hello, Custom Widget!"
|
|
903
928
|
![Glimmer DSL for Opal Hello Custom Shell Email2](images/glimmer-dsl-opal-hello-custom-shell-email2.png)
|
904
929
|
![Glimmer DSL for Opal Hello Custom Shell Email3](images/glimmer-dsl-opal-hello-custom-shell-email3.png)
|
905
930
|
|
931
|
+
#### Hello, Radio!
|
932
|
+
|
933
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
934
|
+
|
935
|
+
```ruby
|
936
|
+
require 'glimmer-dsl-opal/samples/hello/hello_radio'
|
937
|
+
```
|
938
|
+
|
939
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
940
|
+
|
941
|
+
```ruby
|
942
|
+
class HelloRadio
|
943
|
+
class Person
|
944
|
+
attr_accessor :male, :female, :child, :teen, :adult, :senior
|
945
|
+
|
946
|
+
def initialize
|
947
|
+
reset
|
948
|
+
end
|
949
|
+
|
950
|
+
def reset
|
951
|
+
self.male = nil
|
952
|
+
self.female = nil
|
953
|
+
self.child = nil
|
954
|
+
self.teen = nil
|
955
|
+
self.adult = true
|
956
|
+
self.senior = nil
|
957
|
+
end
|
958
|
+
end
|
959
|
+
|
960
|
+
include Glimmer
|
961
|
+
|
962
|
+
def launch
|
963
|
+
person = Person.new
|
964
|
+
|
965
|
+
shell {
|
966
|
+
text 'Hello, Radio!'
|
967
|
+
row_layout :vertical
|
968
|
+
|
969
|
+
label {
|
970
|
+
text 'Gender:'
|
971
|
+
font style: :bold
|
972
|
+
}
|
973
|
+
|
974
|
+
composite {
|
975
|
+
row_layout
|
976
|
+
|
977
|
+
radio {
|
978
|
+
text 'Male'
|
979
|
+
selection bind(person, :male)
|
980
|
+
}
|
981
|
+
|
982
|
+
radio {
|
983
|
+
text 'Female'
|
984
|
+
selection bind(person, :female)
|
985
|
+
}
|
986
|
+
}
|
987
|
+
|
988
|
+
label {
|
989
|
+
text 'Age Group:'
|
990
|
+
font style: :bold
|
991
|
+
}
|
992
|
+
|
993
|
+
composite {
|
994
|
+
row_layout
|
995
|
+
|
996
|
+
radio {
|
997
|
+
text 'Child'
|
998
|
+
selection bind(person, :child)
|
999
|
+
}
|
1000
|
+
|
1001
|
+
radio {
|
1002
|
+
text 'Teen'
|
1003
|
+
selection bind(person, :teen)
|
1004
|
+
}
|
1005
|
+
|
1006
|
+
radio {
|
1007
|
+
text 'Adult'
|
1008
|
+
selection bind(person, :adult)
|
1009
|
+
}
|
1010
|
+
|
1011
|
+
radio {
|
1012
|
+
text 'Senior'
|
1013
|
+
selection bind(person, :senior)
|
1014
|
+
}
|
1015
|
+
}
|
1016
|
+
|
1017
|
+
button {
|
1018
|
+
text 'Reset'
|
1019
|
+
|
1020
|
+
on_widget_selected do
|
1021
|
+
person.reset
|
1022
|
+
end
|
1023
|
+
}
|
1024
|
+
}.open
|
1025
|
+
end
|
1026
|
+
end
|
1027
|
+
|
1028
|
+
HelloRadio.new.launch
|
1029
|
+
```
|
1030
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1031
|
+
|
1032
|
+
![Glimmer DSL for SWT Hello Radio](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio.png)
|
1033
|
+
|
1034
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1035
|
+
|
1036
|
+
Start the Rails server:
|
1037
|
+
```
|
1038
|
+
rails s
|
1039
|
+
```
|
1040
|
+
|
1041
|
+
Visit `http://localhost:3000`
|
1042
|
+
|
1043
|
+
You should see "Hello, Radio!"
|
1044
|
+
|
1045
|
+
![Glimmer DSL for Opal Hello Radio](images/glimmer-dsl-opal-hello-radio.png)
|
1046
|
+
|
1047
|
+
#### Hello, Radio Group!
|
1048
|
+
|
1049
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1050
|
+
|
1051
|
+
```ruby
|
1052
|
+
require 'glimmer-dsl-opal/samples/hello/hello_radio_group'
|
1053
|
+
```
|
1054
|
+
|
1055
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
1056
|
+
|
1057
|
+
```ruby
|
1058
|
+
class HelloRadioGroup
|
1059
|
+
class Person
|
1060
|
+
attr_accessor :gender, :age_group
|
1061
|
+
|
1062
|
+
def initialize
|
1063
|
+
reset
|
1064
|
+
end
|
1065
|
+
|
1066
|
+
def gender_options
|
1067
|
+
['Male', 'Female']
|
1068
|
+
end
|
1069
|
+
|
1070
|
+
def age_group_options
|
1071
|
+
['Child', 'Teen', 'Adult', 'Senior']
|
1072
|
+
end
|
1073
|
+
|
1074
|
+
def reset
|
1075
|
+
self.gender = nil
|
1076
|
+
self.age_group = 'Adult'
|
1077
|
+
end
|
1078
|
+
end
|
1079
|
+
|
1080
|
+
include Glimmer
|
1081
|
+
|
1082
|
+
def launch
|
1083
|
+
person = Person.new
|
1084
|
+
|
1085
|
+
shell {
|
1086
|
+
text 'Hello, Radio Group!'
|
1087
|
+
row_layout :vertical
|
1088
|
+
|
1089
|
+
label {
|
1090
|
+
text 'Gender:'
|
1091
|
+
font style: :bold
|
1092
|
+
}
|
1093
|
+
|
1094
|
+
radio_group {
|
1095
|
+
row_layout :horizontal
|
1096
|
+
selection bind(person, :gender)
|
1097
|
+
}
|
1098
|
+
|
1099
|
+
label {
|
1100
|
+
text 'Age Group:'
|
1101
|
+
font style: :bold
|
1102
|
+
}
|
1103
|
+
|
1104
|
+
radio_group {
|
1105
|
+
row_layout :horizontal
|
1106
|
+
selection bind(person, :age_group)
|
1107
|
+
}
|
1108
|
+
|
1109
|
+
button {
|
1110
|
+
text 'Reset'
|
1111
|
+
|
1112
|
+
on_widget_selected do
|
1113
|
+
person.reset
|
1114
|
+
end
|
1115
|
+
}
|
1116
|
+
}.open
|
1117
|
+
end
|
1118
|
+
end
|
1119
|
+
|
1120
|
+
HelloRadioGroup.new.launch
|
1121
|
+
```
|
1122
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1123
|
+
|
1124
|
+
![Glimmer DSL for SWT Hello Radio Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-radio-group.png)
|
1125
|
+
|
1126
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1127
|
+
|
1128
|
+
Start the Rails server:
|
1129
|
+
```
|
1130
|
+
rails s
|
1131
|
+
```
|
1132
|
+
|
1133
|
+
Visit `http://localhost:3000`
|
1134
|
+
|
1135
|
+
You should see "Hello, Radio Group!"
|
1136
|
+
|
1137
|
+
![Glimmer DSL for Opal Hello Radio Group](images/glimmer-dsl-opal-hello-radio-group.png)
|
1138
|
+
|
1139
|
+
#### Hello, Group!
|
1140
|
+
|
1141
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1142
|
+
|
1143
|
+
```ruby
|
1144
|
+
require 'glimmer-dsl-opal/samples/hello/hello_group'
|
1145
|
+
```
|
1146
|
+
|
1147
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
1148
|
+
|
1149
|
+
```ruby
|
1150
|
+
class HelloGroup
|
1151
|
+
class Person
|
1152
|
+
attr_accessor :male, :female, :child, :teen, :adult, :senior
|
1153
|
+
|
1154
|
+
def initialize
|
1155
|
+
reset
|
1156
|
+
end
|
1157
|
+
|
1158
|
+
def reset
|
1159
|
+
self.male = nil
|
1160
|
+
self.female = nil
|
1161
|
+
self.child = nil
|
1162
|
+
self.teen = nil
|
1163
|
+
self.adult = true
|
1164
|
+
self.senior = nil
|
1165
|
+
end
|
1166
|
+
end
|
1167
|
+
|
1168
|
+
include Glimmer
|
1169
|
+
|
1170
|
+
def launch
|
1171
|
+
person = Person.new
|
1172
|
+
|
1173
|
+
shell {
|
1174
|
+
text 'Hello, Group!'
|
1175
|
+
row_layout :vertical
|
1176
|
+
|
1177
|
+
group {
|
1178
|
+
row_layout
|
1179
|
+
|
1180
|
+
text 'Gender'
|
1181
|
+
font style: :bold
|
1182
|
+
|
1183
|
+
radio {
|
1184
|
+
text 'Male'
|
1185
|
+
selection bind(person, :male)
|
1186
|
+
}
|
1187
|
+
|
1188
|
+
radio {
|
1189
|
+
text 'Female'
|
1190
|
+
selection bind(person, :female)
|
1191
|
+
}
|
1192
|
+
}
|
1193
|
+
|
1194
|
+
group {
|
1195
|
+
row_layout
|
1196
|
+
|
1197
|
+
text 'Age Group'
|
1198
|
+
font style: :bold
|
1199
|
+
|
1200
|
+
radio {
|
1201
|
+
text 'Child'
|
1202
|
+
selection bind(person, :child)
|
1203
|
+
}
|
1204
|
+
|
1205
|
+
radio {
|
1206
|
+
text 'Teen'
|
1207
|
+
selection bind(person, :teen)
|
1208
|
+
}
|
1209
|
+
|
1210
|
+
radio {
|
1211
|
+
text 'Adult'
|
1212
|
+
selection bind(person, :adult)
|
1213
|
+
}
|
1214
|
+
|
1215
|
+
radio {
|
1216
|
+
text 'Senior'
|
1217
|
+
selection bind(person, :senior)
|
1218
|
+
}
|
1219
|
+
}
|
1220
|
+
|
1221
|
+
button {
|
1222
|
+
text 'Reset'
|
1223
|
+
|
1224
|
+
on_widget_selected do
|
1225
|
+
person.reset
|
1226
|
+
end
|
1227
|
+
}
|
1228
|
+
}.open
|
1229
|
+
end
|
1230
|
+
end
|
1231
|
+
|
1232
|
+
HelloGroup.new.launch
|
1233
|
+
```
|
1234
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1235
|
+
|
1236
|
+
![Glimmer DSL for SWT Hello Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-group.png)
|
1237
|
+
|
1238
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1239
|
+
|
1240
|
+
Start the Rails server:
|
1241
|
+
```
|
1242
|
+
rails s
|
1243
|
+
```
|
1244
|
+
|
1245
|
+
Visit `http://localhost:3000`
|
1246
|
+
|
1247
|
+
You should see "Hello, Group!"
|
1248
|
+
|
1249
|
+
![Glimmer DSL for Opal Hello Group](images/glimmer-dsl-opal-hello-group.png)
|
1250
|
+
|
1251
|
+
#### Hello, Checkbox!
|
1252
|
+
|
1253
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1254
|
+
|
1255
|
+
```ruby
|
1256
|
+
require 'glimmer-dsl-opal/samples/hello/hello_checkbox'
|
1257
|
+
```
|
1258
|
+
|
1259
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
1260
|
+
|
1261
|
+
```ruby
|
1262
|
+
class HelloCheckbox
|
1263
|
+
class Person
|
1264
|
+
attr_accessor :skiing, :snowboarding, :snowmobiling, :snowshoeing
|
1265
|
+
|
1266
|
+
def initialize
|
1267
|
+
reset_activities
|
1268
|
+
end
|
1269
|
+
|
1270
|
+
def reset_activities
|
1271
|
+
self.skiing = false
|
1272
|
+
self.snowboarding = true
|
1273
|
+
self.snowmobiling = false
|
1274
|
+
self.snowshoeing = false
|
1275
|
+
end
|
1276
|
+
end
|
1277
|
+
|
1278
|
+
include Glimmer
|
1279
|
+
|
1280
|
+
def launch
|
1281
|
+
person = Person.new
|
1282
|
+
|
1283
|
+
shell {
|
1284
|
+
text 'Hello, Checkbox!'
|
1285
|
+
row_layout :vertical
|
1286
|
+
|
1287
|
+
label {
|
1288
|
+
text 'Check all snow activities you are interested in:'
|
1289
|
+
font style: :bold
|
1290
|
+
}
|
1291
|
+
|
1292
|
+
composite {
|
1293
|
+
checkbox {
|
1294
|
+
text 'Skiing'
|
1295
|
+
selection bind(person, :skiing)
|
1296
|
+
}
|
1297
|
+
|
1298
|
+
checkbox {
|
1299
|
+
text 'Snowboarding'
|
1300
|
+
selection bind(person, :snowboarding)
|
1301
|
+
}
|
1302
|
+
|
1303
|
+
checkbox {
|
1304
|
+
text 'Snowmobiling'
|
1305
|
+
selection bind(person, :snowmobiling)
|
1306
|
+
}
|
1307
|
+
|
1308
|
+
checkbox {
|
1309
|
+
text 'Snowshoeing'
|
1310
|
+
selection bind(person, :snowshoeing)
|
1311
|
+
}
|
1312
|
+
}
|
1313
|
+
|
1314
|
+
button {
|
1315
|
+
text 'Reset Activities'
|
1316
|
+
|
1317
|
+
on_widget_selected do
|
1318
|
+
person.reset_activities
|
1319
|
+
end
|
1320
|
+
}
|
1321
|
+
}.open
|
1322
|
+
end
|
1323
|
+
end
|
1324
|
+
|
1325
|
+
HelloCheckbox.new.launch
|
1326
|
+
```
|
1327
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1328
|
+
|
1329
|
+
![Glimmer DSL for SWT Hello Checkbox](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox.png)
|
1330
|
+
|
1331
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1332
|
+
|
1333
|
+
Start the Rails server:
|
1334
|
+
```
|
1335
|
+
rails s
|
1336
|
+
```
|
1337
|
+
|
1338
|
+
Visit `http://localhost:3000`
|
1339
|
+
|
1340
|
+
You should see "Hello, Checkbox!"
|
1341
|
+
|
1342
|
+
![Glimmer DSL for Opal Hello Checkbox](images/glimmer-dsl-opal-hello-checkbox.png)
|
1343
|
+
|
1344
|
+
#### Hello, Checkbox Group!
|
1345
|
+
|
1346
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1347
|
+
|
1348
|
+
```ruby
|
1349
|
+
require 'glimmer-dsl-opal/samples/hello/hello_checkbox_group'
|
1350
|
+
```
|
1351
|
+
|
1352
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
1353
|
+
|
1354
|
+
```ruby
|
1355
|
+
class HelloCheckboxGroup
|
1356
|
+
class Person
|
1357
|
+
attr_accessor :activities
|
1358
|
+
|
1359
|
+
def initialize
|
1360
|
+
reset_activities
|
1361
|
+
end
|
1362
|
+
|
1363
|
+
def activities_options
|
1364
|
+
['Skiing', 'Snowboarding', 'Snowmobiling', 'Snowshoeing']
|
1365
|
+
end
|
1366
|
+
|
1367
|
+
def reset_activities
|
1368
|
+
self.activities = ['Snowboarding']
|
1369
|
+
end
|
1370
|
+
end
|
1371
|
+
|
1372
|
+
include Glimmer
|
1373
|
+
|
1374
|
+
def launch
|
1375
|
+
person = Person.new
|
1376
|
+
|
1377
|
+
shell {
|
1378
|
+
text 'Hello, Checkbox Group!'
|
1379
|
+
row_layout :vertical
|
1380
|
+
|
1381
|
+
label {
|
1382
|
+
text 'Check all snow activities you are interested in:'
|
1383
|
+
font style: :bold
|
1384
|
+
}
|
1385
|
+
|
1386
|
+
checkbox_group {
|
1387
|
+
selection bind(person, :activities)
|
1388
|
+
}
|
1389
|
+
|
1390
|
+
button {
|
1391
|
+
text 'Reset Activities'
|
1392
|
+
|
1393
|
+
on_widget_selected do
|
1394
|
+
person.reset_activities
|
1395
|
+
end
|
1396
|
+
}
|
1397
|
+
}.open
|
1398
|
+
end
|
1399
|
+
end
|
1400
|
+
|
1401
|
+
HelloCheckboxGroup.new.launch
|
1402
|
+
```
|
1403
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1404
|
+
|
1405
|
+
![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-checkbox-group.png)
|
1406
|
+
|
1407
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1408
|
+
|
1409
|
+
Start the Rails server:
|
1410
|
+
```
|
1411
|
+
rails s
|
1412
|
+
```
|
1413
|
+
|
1414
|
+
Visit `http://localhost:3000`
|
1415
|
+
|
1416
|
+
You should see "Hello, Checkbox Group!"
|
1417
|
+
|
1418
|
+
![Glimmer DSL for Opal Hello Checkbox Group](images/glimmer-dsl-opal-hello-checkbox-group.png)
|
1419
|
+
|
1420
|
+
#### Hello, Date Time!
|
1421
|
+
|
1422
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1423
|
+
|
1424
|
+
```ruby
|
1425
|
+
require 'glimmer-dsl-opal/samples/hello/hello_date_time'
|
1426
|
+
```
|
1427
|
+
|
1428
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
1429
|
+
|
1430
|
+
```ruby
|
1431
|
+
class HelloDateTime
|
1432
|
+
class Person
|
1433
|
+
attr_accessor :date_of_birth
|
1434
|
+
end
|
1435
|
+
|
1436
|
+
include Glimmer
|
1437
|
+
|
1438
|
+
def launch
|
1439
|
+
person = Person.new
|
1440
|
+
person.date_of_birth = DateTime.new(2013, 7, 12, 18, 37, 23)
|
1441
|
+
|
1442
|
+
shell {
|
1443
|
+
row_layout :vertical
|
1444
|
+
|
1445
|
+
text 'Hello, Date Time!'
|
1446
|
+
minimum_size 180, 180
|
1447
|
+
|
1448
|
+
label {
|
1449
|
+
text 'Date of Birth'
|
1450
|
+
font height: 16, style: :bold
|
1451
|
+
}
|
1452
|
+
|
1453
|
+
date { # alias for date_time(:date)
|
1454
|
+
date_time bind(person, :date_of_birth)
|
1455
|
+
}
|
1456
|
+
|
1457
|
+
date_drop_down { # alias for date_time(:date, :drop_down)
|
1458
|
+
date_time bind(person, :date_of_birth)
|
1459
|
+
}
|
1460
|
+
|
1461
|
+
time { # alias for date_time(:time)
|
1462
|
+
date_time bind(person, :date_of_birth)
|
1463
|
+
}
|
1464
|
+
|
1465
|
+
calendar { # alias for date_time(:calendar)
|
1466
|
+
date_time bind(person, :date_of_birth)
|
1467
|
+
}
|
1468
|
+
}.open
|
1469
|
+
end
|
1470
|
+
end
|
1471
|
+
|
1472
|
+
HelloDateTime.new.launch
|
1473
|
+
```
|
1474
|
+
|
1475
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1476
|
+
|
1477
|
+
![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-date-time.png)
|
1478
|
+
|
1479
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1480
|
+
|
1481
|
+
Start the Rails server:
|
1482
|
+
```
|
1483
|
+
rails s
|
1484
|
+
```
|
1485
|
+
|
1486
|
+
Visit `http://localhost:3000`
|
1487
|
+
|
1488
|
+
You should see "Hello, Date Time!"
|
1489
|
+
|
1490
|
+
![Glimmer DSL for Opal Hello Date Time](images/glimmer-dsl-opal-hello-date-time.png)
|
1491
|
+
|
1492
|
+
#### Hello, Table!
|
1493
|
+
|
1494
|
+
Note: This [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) sample has near-complete support, but is missing table context menus and table editing at the moment.
|
1495
|
+
|
1496
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1497
|
+
|
1498
|
+
```ruby
|
1499
|
+
require 'glimmer-dsl-opal/samples/hello/hello_table'
|
1500
|
+
```
|
1501
|
+
|
1502
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
1503
|
+
|
1504
|
+
```ruby
|
1505
|
+
class HelloTable
|
1506
|
+
class BaseballGame
|
1507
|
+
class << self
|
1508
|
+
attr_accessor :selected_game
|
1509
|
+
|
1510
|
+
def all_playoff_games
|
1511
|
+
@all_playoff_games ||= {
|
1512
|
+
'NLDS' => [
|
1513
|
+
new(Time.new(2037, 10, 6, 12, 0), 'Chicago Cubs', 'Milwaukee Brewers', 'Free Bobblehead'),
|
1514
|
+
new(Time.new(2037, 10, 7, 12, 0), 'Chicago Cubs', 'Milwaukee Brewers'),
|
1515
|
+
new(Time.new(2037, 10, 8, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs'),
|
1516
|
+
new(Time.new(2037, 10, 9, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs'),
|
1517
|
+
new(Time.new(2037, 10, 10, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs', 'Free Umbrella'),
|
1518
|
+
new(Time.new(2037, 10, 6, 18, 0), 'Cincinnati Reds', 'St Louis Cardinals', 'Free Bobblehead'),
|
1519
|
+
new(Time.new(2037, 10, 7, 18, 0), 'Cincinnati Reds', 'St Louis Cardinals'),
|
1520
|
+
new(Time.new(2037, 10, 8, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds'),
|
1521
|
+
new(Time.new(2037, 10, 9, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds'),
|
1522
|
+
new(Time.new(2037, 10, 10, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds', 'Free Umbrella'),
|
1523
|
+
],
|
1524
|
+
'ALDS' => [
|
1525
|
+
new(Time.new(2037, 10, 6, 12, 0), 'New York Yankees', 'Boston Red Sox', 'Free Bobblehead'),
|
1526
|
+
new(Time.new(2037, 10, 7, 12, 0), 'New York Yankees', 'Boston Red Sox'),
|
1527
|
+
new(Time.new(2037, 10, 8, 12, 0), 'Boston Red Sox', 'New York Yankees'),
|
1528
|
+
new(Time.new(2037, 10, 9, 12, 0), 'Boston Red Sox', 'New York Yankees'),
|
1529
|
+
new(Time.new(2037, 10, 10, 12, 0), 'Boston Red Sox', 'New York Yankees', 'Free Umbrella'),
|
1530
|
+
new(Time.new(2037, 10, 6, 18, 0), 'Houston Astros', 'Cleveland Indians', 'Free Bobblehead'),
|
1531
|
+
new(Time.new(2037, 10, 7, 18, 0), 'Houston Astros', 'Cleveland Indians'),
|
1532
|
+
new(Time.new(2037, 10, 8, 18, 0), 'Cleveland Indians', 'Houston Astros'),
|
1533
|
+
new(Time.new(2037, 10, 9, 18, 0), 'Cleveland Indians', 'Houston Astros'),
|
1534
|
+
new(Time.new(2037, 10, 10, 18, 0), 'Cleveland Indians', 'Houston Astros', 'Free Umbrella'),
|
1535
|
+
],
|
1536
|
+
'NLCS' => [
|
1537
|
+
new(Time.new(2037, 10, 12, 12, 0), 'Chicago Cubs', 'Cincinnati Reds', 'Free Towel'),
|
1538
|
+
new(Time.new(2037, 10, 13, 12, 0), 'Chicago Cubs', 'Cincinnati Reds'),
|
1539
|
+
new(Time.new(2037, 10, 14, 12, 0), 'Cincinnati Reds', 'Chicago Cubs'),
|
1540
|
+
new(Time.new(2037, 10, 15, 18, 0), 'Cincinnati Reds', 'Chicago Cubs'),
|
1541
|
+
new(Time.new(2037, 10, 16, 18, 0), 'Cincinnati Reds', 'Chicago Cubs'),
|
1542
|
+
new(Time.new(2037, 10, 17, 18, 0), 'Chicago Cubs', 'Cincinnati Reds'),
|
1543
|
+
new(Time.new(2037, 10, 18, 12, 0), 'Chicago Cubs', 'Cincinnati Reds', 'Free Poncho'),
|
1544
|
+
],
|
1545
|
+
'ALCS' => [
|
1546
|
+
new(Time.new(2037, 10, 12, 12, 0), 'Houston Astros', 'Boston Red Sox', 'Free Towel'),
|
1547
|
+
new(Time.new(2037, 10, 13, 12, 0), 'Houston Astros', 'Boston Red Sox'),
|
1548
|
+
new(Time.new(2037, 10, 14, 12, 0), 'Boston Red Sox', 'Houston Astros'),
|
1549
|
+
new(Time.new(2037, 10, 15, 18, 0), 'Boston Red Sox', 'Houston Astros'),
|
1550
|
+
new(Time.new(2037, 10, 16, 18, 0), 'Boston Red Sox', 'Houston Astros'),
|
1551
|
+
new(Time.new(2037, 10, 17, 18, 0), 'Houston Astros', 'Boston Red Sox'),
|
1552
|
+
new(Time.new(2037, 10, 18, 12, 0), 'Houston Astros', 'Boston Red Sox', 'Free Poncho'),
|
1553
|
+
],
|
1554
|
+
'World Series' => [
|
1555
|
+
new(Time.new(2037, 10, 20, 18, 0), 'Chicago Cubs', 'Boston Red Sox', 'Free Baseball Cap'),
|
1556
|
+
new(Time.new(2037, 10, 21, 18, 0), 'Chicago Cubs', 'Boston Red Sox'),
|
1557
|
+
new(Time.new(2037, 10, 22, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
|
1558
|
+
new(Time.new(2037, 10, 23, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
|
1559
|
+
new(Time.new(2037, 10, 24, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
|
1560
|
+
new(Time.new(2037, 10, 25, 18, 0), 'Chicago Cubs', 'Boston Red Sox'),
|
1561
|
+
new(Time.new(2037, 10, 26, 18, 0), 'Chicago Cubs', 'Boston Red Sox', 'Free World Series Polo'),
|
1562
|
+
]
|
1563
|
+
}
|
1564
|
+
end
|
1565
|
+
|
1566
|
+
def playoff_type
|
1567
|
+
@playoff_type ||= 'World Series'
|
1568
|
+
end
|
1569
|
+
|
1570
|
+
def playoff_type=(new_playoff_type)
|
1571
|
+
@playoff_type = new_playoff_type
|
1572
|
+
self.schedule=(all_playoff_games[@playoff_type])
|
1573
|
+
end
|
1574
|
+
|
1575
|
+
def playoff_type_options
|
1576
|
+
all_playoff_games.keys
|
1577
|
+
end
|
1578
|
+
|
1579
|
+
def schedule
|
1580
|
+
@schedule ||= all_playoff_games[playoff_type]
|
1581
|
+
end
|
1582
|
+
|
1583
|
+
def schedule=(new_schedule)
|
1584
|
+
@schedule = new_schedule
|
1585
|
+
end
|
1586
|
+
end
|
1587
|
+
|
1588
|
+
include Glimmer
|
1589
|
+
include Glimmer::DataBinding::ObservableModel
|
1590
|
+
|
1591
|
+
TEAM_BALLPARKS = {
|
1592
|
+
'Boston Red Sox' => 'Fenway Park',
|
1593
|
+
'Chicago Cubs' => 'Wrigley Field',
|
1594
|
+
'Cincinnati Reds' => 'Great American Ball Park',
|
1595
|
+
'Cleveland Indians' => 'Progressive Field',
|
1596
|
+
'Houston Astros' => 'Minute Maid Park',
|
1597
|
+
'Milwaukee Brewers' => 'Miller Park',
|
1598
|
+
'New York Yankees' => 'Yankee Stadium',
|
1599
|
+
'St Louis Cardinals' => 'Busch Stadium',
|
1600
|
+
}
|
1601
|
+
|
1602
|
+
attr_accessor :date_time, :home_team, :away_team, :ballpark, :promotion
|
1603
|
+
|
1604
|
+
def initialize(date_time, home_team, away_team, promotion = 'N/A')
|
1605
|
+
self.date_time = date_time
|
1606
|
+
self.home_team = home_team
|
1607
|
+
self.away_team = away_team
|
1608
|
+
self.promotion = promotion
|
1609
|
+
observe(self, :date_time) do |new_value|
|
1610
|
+
notify_observers(:game_date)
|
1611
|
+
notify_observers(:game_time)
|
1612
|
+
end
|
1613
|
+
end
|
1614
|
+
|
1615
|
+
def home_team=(home_team_value)
|
1616
|
+
if home_team_value != away_team
|
1617
|
+
@home_team = home_team_value
|
1618
|
+
self.ballpark = TEAM_BALLPARKS[@home_team]
|
1619
|
+
end
|
1620
|
+
end
|
1621
|
+
|
1622
|
+
def away_team=(away_team_value)
|
1623
|
+
if away_team_value != home_team
|
1624
|
+
@away_team = away_team_value
|
1625
|
+
end
|
1626
|
+
end
|
1627
|
+
|
1628
|
+
def date
|
1629
|
+
Date.new(date_time.year, date_time.month, date_time.day)
|
1630
|
+
end
|
1631
|
+
|
1632
|
+
def time
|
1633
|
+
Time.new(0, 1, 1, date_time.hour, date_time.min, date_time.sec, '+00:00')
|
1634
|
+
end
|
1635
|
+
|
1636
|
+
def game_date
|
1637
|
+
date_time.strftime("%m/%d/%Y")
|
1638
|
+
end
|
1639
|
+
|
1640
|
+
def game_time
|
1641
|
+
date_time.strftime("%I:%M %p")
|
1642
|
+
end
|
1643
|
+
|
1644
|
+
def home_team_options
|
1645
|
+
TEAM_BALLPARKS.keys
|
1646
|
+
end
|
1647
|
+
|
1648
|
+
def away_team_options
|
1649
|
+
TEAM_BALLPARKS.keys
|
1650
|
+
end
|
1651
|
+
|
1652
|
+
def ballpark_options
|
1653
|
+
[TEAM_BALLPARKS[@home_team], TEAM_BALLPARKS[@away_team]]
|
1654
|
+
end
|
1655
|
+
|
1656
|
+
def to_s
|
1657
|
+
"#{home_team} vs #{away_team} at #{ballpark} on #{game_date} #{game_time}"
|
1658
|
+
end
|
1659
|
+
|
1660
|
+
def book!
|
1661
|
+
"Thank you for booking #{to_s}"
|
1662
|
+
end
|
1663
|
+
end
|
1664
|
+
|
1665
|
+
include Glimmer
|
1666
|
+
|
1667
|
+
def launch
|
1668
|
+
shell {
|
1669
|
+
grid_layout
|
1670
|
+
|
1671
|
+
text 'Hello, Table!'
|
1672
|
+
|
1673
|
+
label {
|
1674
|
+
layout_data :center, :center, true, false
|
1675
|
+
|
1676
|
+
text 'Baseball Playoff Schedule'
|
1677
|
+
font height: 30, style: :bold
|
1678
|
+
}
|
1679
|
+
|
1680
|
+
combo(:read_only) {
|
1681
|
+
layout_data :center, :center, true, false
|
1682
|
+
selection bind(BaseballGame, :playoff_type)
|
1683
|
+
font height: 16
|
1684
|
+
}
|
1685
|
+
|
1686
|
+
table(:editable) { |table_proxy|
|
1687
|
+
layout_data :fill, :fill, true, true
|
1688
|
+
|
1689
|
+
table_column {
|
1690
|
+
text 'Game Date'
|
1691
|
+
width 150
|
1692
|
+
sort_property :date # ensure sorting by real date value (not `game_date` string specified in items below)
|
1693
|
+
}
|
1694
|
+
table_column {
|
1695
|
+
text 'Game Time'
|
1696
|
+
width 150
|
1697
|
+
sort_property :time # ensure sorting by real time value (not `game_time` string specified in items below)
|
1698
|
+
}
|
1699
|
+
table_column {
|
1700
|
+
text 'Ballpark'
|
1701
|
+
width 180
|
1702
|
+
}
|
1703
|
+
table_column {
|
1704
|
+
text 'Home Team'
|
1705
|
+
width 150
|
1706
|
+
}
|
1707
|
+
table_column {
|
1708
|
+
text 'Away Team'
|
1709
|
+
width 150
|
1710
|
+
}
|
1711
|
+
table_column {
|
1712
|
+
text 'Promotion'
|
1713
|
+
width 150
|
1714
|
+
# default text editor is used here
|
1715
|
+
}
|
1716
|
+
|
1717
|
+
# Data-bind table items (rows) to a model collection property, specifying column properties ordering per nested model
|
1718
|
+
items bind(BaseballGame, :schedule), column_properties(:game_date, :game_time, :ballpark, :home_team, :away_team, :promotion)
|
1719
|
+
|
1720
|
+
# Data-bind table selection
|
1721
|
+
selection bind(BaseballGame, :selected_game)
|
1722
|
+
|
1723
|
+
# Default initial sort property
|
1724
|
+
sort_property :date
|
1725
|
+
|
1726
|
+
# Sort by these additional properties after handling sort by the column the user clicked
|
1727
|
+
additional_sort_properties :date, :time, :home_team, :away_team, :ballpark, :promotion
|
1728
|
+
}
|
1729
|
+
|
1730
|
+
button {
|
1731
|
+
text 'Book Selected Game'
|
1732
|
+
layout_data :center, :center, true, false
|
1733
|
+
font height: 16
|
1734
|
+
enabled bind(BaseballGame, :selected_game)
|
1735
|
+
|
1736
|
+
on_widget_selected {
|
1737
|
+
book_selected_game
|
1738
|
+
}
|
1739
|
+
}
|
1740
|
+
}.open
|
1741
|
+
end
|
1742
|
+
|
1743
|
+
def book_selected_game
|
1744
|
+
message_box {
|
1745
|
+
text 'Baseball Game Booked!'
|
1746
|
+
message BaseballGame.selected_game.book!
|
1747
|
+
}.open
|
1748
|
+
end
|
1749
|
+
end
|
1750
|
+
|
1751
|
+
HelloTable.new.launch
|
1752
|
+
```
|
1753
|
+
|
1754
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1755
|
+
|
1756
|
+
![Glimmer DSL for SWT Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table.png)
|
1757
|
+
|
1758
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1759
|
+
|
1760
|
+
Start the Rails server:
|
1761
|
+
```
|
1762
|
+
rails s
|
1763
|
+
```
|
1764
|
+
|
1765
|
+
Visit `http://localhost:3000`
|
1766
|
+
|
1767
|
+
You should see "Hello, Date Time!"
|
1768
|
+
|
1769
|
+
![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table.png)
|
1770
|
+
|
906
1771
|
### Elaborate Samples
|
907
1772
|
|
908
1773
|
#### Login
|
@@ -1194,6 +2059,7 @@ class TicTacToe
|
|
1194
2059
|
@tic_tac_toe_board = Board.new
|
1195
2060
|
@shell = shell {
|
1196
2061
|
text "Tic-Tac-Toe"
|
2062
|
+
minimum_size 150, 178
|
1197
2063
|
composite {
|
1198
2064
|
grid_layout 3, true
|
1199
2065
|
(1..3).each { |row|
|
@@ -1202,6 +2068,7 @@ class TicTacToe
|
|
1202
2068
|
layout_data :fill, :fill, true, true
|
1203
2069
|
text bind(@tic_tac_toe_board[row, column], :sign)
|
1204
2070
|
enabled bind(@tic_tac_toe_board[row, column], :empty)
|
2071
|
+
font style: :bold, height: 20
|
1205
2072
|
on_widget_selected {
|
1206
2073
|
@tic_tac_toe_board.mark(row, column)
|
1207
2074
|
}
|
@@ -1638,10 +2505,19 @@ rails s
|
|
1638
2505
|
```
|
1639
2506
|
|
1640
2507
|
Visit `http://localhost:3000`
|
2508
|
+
(or visit: http://glimmer-cs-calculator-server.herokuapp.com)
|
1641
2509
|
|
1642
2510
|
You should see "Glimmer Calculator"
|
1643
2511
|
|
1644
|
-
![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
|
2512
|
+
[![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)](http://glimmer-cs-calculator-server.herokuapp.com)
|
2513
|
+
|
2514
|
+
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):
|
2515
|
+
|
2516
|
+
Visit http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple
|
2517
|
+
|
2518
|
+
You should see "Apple Calculator Theme"
|
2519
|
+
|
2520
|
+
[![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)](http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple)
|
1645
2521
|
|
1646
2522
|
## Help
|
1647
2523
|
|
@@ -1679,7 +2555,7 @@ These features have been suggested. You might see them in a future version of Gl
|
|
1679
2555
|
|
1680
2556
|
[MIT](https://opensource.org/licenses/MIT)
|
1681
2557
|
|
1682
|
-
Copyright (c) 2020 - Andy Maleh.
|
2558
|
+
Copyright (c) 2020 - Andy Maleh.
|
1683
2559
|
See [LICENSE.txt](LICENSE.txt) for further details.
|
1684
2560
|
|
1685
2561
|
--
|