glimmer-dsl-opal 0.5.0 → 0.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +46 -0
  3. data/README.md +390 -29
  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 +73 -8
  19. data/lib/glimmer-dsl-opal/ext/date.rb +49 -3
  20. data/lib/glimmer-dsl-opal/samples/elaborate/tic_tac_toe.rb +23 -0
  21. data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +5 -5
  22. data/lib/glimmer-dsl-opal/samples/hello/hello_date_time.rb +63 -0
  23. data/lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb +1 -1
  24. data/lib/glimmer-dsl-opal/samples/hello/hello_table.rb +283 -0
  25. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/GPL-LICENSE.txt +278 -0
  26. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/MIT-LICENSE.txt +20 -0
  27. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/jquery.ui.timepicker.css +57 -0
  28. data/lib/glimmer-dsl-opal/vendor/jquery-ui-timepicker/jquery.ui.timepicker.js +1496 -0
  29. data/lib/glimmer-dsl-opal/vendor/jquery-ui/AUTHORS.txt +333 -0
  30. data/lib/glimmer-dsl-opal/vendor/jquery-ui/LICENSE.txt +43 -0
  31. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_444444_256x240.png +0 -0
  32. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_555555_256x240.png +0 -0
  33. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_777620_256x240.png +0 -0
  34. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_777777_256x240.png +0 -0
  35. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_cc0000_256x240.png +0 -0
  36. data/lib/glimmer-dsl-opal/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png +0 -0
  37. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.min.css +7 -0
  38. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.min.js +13 -0
  39. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.structure.min.css +5 -0
  40. data/lib/glimmer-dsl-opal/vendor/jquery-ui/jquery-ui.theme.min.css +5 -0
  41. data/lib/glimmer-dsl-opal/vendor/jquery-ui/package.json +74 -0
  42. data/lib/glimmer-dsl-swt.rb +20 -35
  43. data/lib/glimmer/data_binding/table_items_binding.rb +31 -18
  44. data/lib/glimmer/dsl/opal/block_property_expression.rb +41 -0
  45. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +1 -1
  46. data/lib/glimmer/dsl/opal/dsl.rb +2 -0
  47. data/lib/glimmer/dsl/opal/shell_expression.rb +7 -2
  48. data/lib/glimmer/dsl/opal/widget_expression.rb +10 -1
  49. data/lib/glimmer/engine.rb +9 -0
  50. data/lib/glimmer/swt.rb +3 -3
  51. data/lib/glimmer/swt/button_proxy.rb +5 -5
  52. data/lib/glimmer/swt/checkbox_proxy.rb +1 -0
  53. data/lib/glimmer/swt/color_proxy.rb +45 -45
  54. data/lib/glimmer/swt/combo_proxy.rb +2 -2
  55. data/lib/glimmer/swt/composite_proxy.rb +7 -3
  56. data/lib/glimmer/swt/control_editor.rb +53 -0
  57. data/lib/glimmer/swt/date_time_proxy.rb +145 -0
  58. data/lib/glimmer/swt/display_proxy.rb +6 -2
  59. data/lib/glimmer/swt/fill_layout_proxy.rb +1 -1
  60. data/lib/glimmer/swt/label_proxy.rb +2 -2
  61. data/lib/glimmer/swt/layout_data_proxy.rb +8 -8
  62. data/lib/glimmer/swt/layout_proxy.rb +5 -5
  63. data/lib/glimmer/swt/list_proxy.rb +2 -2
  64. data/lib/glimmer/swt/make_shift_shell_proxy.rb +4 -4
  65. data/lib/glimmer/swt/message_box_proxy.rb +10 -8
  66. data/lib/glimmer/swt/property_owner.rb +2 -2
  67. data/lib/glimmer/swt/radio_proxy.rb +1 -0
  68. data/lib/glimmer/swt/row_layout_proxy.rb +1 -1
  69. data/lib/glimmer/swt/shell_proxy.rb +8 -0
  70. data/lib/glimmer/swt/tab_folder_proxy.rb +5 -5
  71. data/lib/glimmer/swt/tab_item_proxy.rb +7 -7
  72. data/lib/glimmer/swt/table_column_proxy.rb +71 -12
  73. data/lib/glimmer/swt/table_editor.rb +65 -0
  74. data/lib/glimmer/swt/table_item_proxy.rb +42 -7
  75. data/lib/glimmer/swt/table_proxy.rb +575 -20
  76. data/lib/glimmer/swt/text_proxy.rb +50 -2
  77. data/lib/glimmer/swt/widget_proxy.rb +120 -23
  78. data/lib/glimmer/ui/custom_widget.rb +8 -8
  79. data/lib/net/http.rb +1 -5
  80. data/lib/uri.rb +3 -3
  81. metadata +45 -9
  82. 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: ee0609b6cdf6300f68c5558c9341240e6db0a176dd1e8ed687042eeafd5fc5bc
4
- data.tar.gz: 2d829b17f2f51266bbface2fb65d18875cb046e2168e4182f2cbc25b81f802af
3
+ metadata.gz: b4e81c8aae870295468f5c0e573da962daa58837efda4742c9855313ae29f42a
4
+ data.tar.gz: 40df246c27977d3fa862a452cdfb2dd99ad0b506374408c69e25666b3fc7fa50
5
5
  SHA512:
6
- metadata.gz: b059c3db373177f98347631429fe74c573e49ded0497dd9ead80f88e77eb8331a7484e58239da7b063ab46ec351a38e463a9ae5c64bad78f5101b351dc32fe9d
7
- data.tar.gz: db311a5065bd972a6a4b4968cfce227439978a9e42cf0be0fc2692b400f2dcd6c53e1cdff0ce59f43551bf1b0c6fc64523280f04e51c72abca1cd0c98f490223
6
+ metadata.gz: c46c3bdfcc129557ac54640d2d905cb7495f010ff1b81422c5b55529a01ecb67c698b4724029b62b9cbc6bcb46727763185ba1b4469c0355259d16acd1f228f1
7
+ data.tar.gz: 803c487121b4092f024fabca666e359fcdfeca87482b95a391e6b857b19dca28f46a845fc46e6c189e73254c1aa3a1f53d8cbe51c113f425be5019544a353913
@@ -1,5 +1,50 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.7.1
4
+
5
+ - Combo table editor (enabled in Hello, Table! sample)
6
+ - Fix issue with table cell selection for editing not working
7
+ - Remove widget from parent upon dispose
8
+ - Remove listeners upon widget dispose
9
+
10
+ ## 0.7.0
11
+
12
+ - Hello, Table! Sample
13
+ - `table` :editable style to enable auto-editing
14
+ - `table` `header_visible` property to hide header when false
15
+ - `table` `item_count` property to set minimum item count (fill empty rows when below in table items)
16
+ - `table` selection data-binding
17
+ - `table` built-in sorting support
18
+ - `table_column` left text alignment and padding of 5px by default
19
+ - `table` sort property and direction in GUI
20
+ - `table_column` sort_property
21
+ - `table_column` sort_by block
22
+ - `table_column` sort block
23
+ - `table` default sort via property, compare block, and property block
24
+ - `table` additional sort properties
25
+ - Prevent `table` unnecessary updates by comparing data to previous data and not updating when it's the same
26
+ - Contact Manager sample support for on_key_pressed in text widgets upon hitting ENTER
27
+ - Fix issue with edit table item error on sorting table
28
+
29
+ ## 0.6.1
30
+
31
+ - Fix issue with rendering date_time without a block
32
+ - Made listener event handling async to improve performance when triggering multiple events
33
+ - Brought Tic Tac Toe sample up-to-date with changes in Glimmer DSL for SWT
34
+ - Fixed silent error encountered in rendering custom widgets
35
+
36
+ ## 0.6.0
37
+
38
+ - Hello, Date Time! Sample
39
+ - Support `date_time`, `date`, `date_drop_down`, `time`, `calendar` keywords
40
+ - Format Date/Time correctly as per SWT implementation by default
41
+ - Make glimmer-dsl-opal gem into a Rails engine to support importing default static assets like CSS styles and images
42
+ - Show drop down icon next to `date_drop_down` and `time`
43
+
44
+ ## 0.5.1
45
+
46
+ - Fixed issue with Hello, Combo!, Hello, List...! samples
47
+
3
48
  ## 0.5.0
4
49
 
5
50
  - Add `margin_top`, `margin_right`, `margin_bottom`, and `margin_left` to RowLayoutProxy
@@ -89,3 +134,4 @@
89
134
 
90
135
  - Initial support for webifying Glimmer SWT apps
91
136
  - Support for Shell and Label widgets (text property only).
137
+ - Hello, World! sample support
data/README.md CHANGED
@@ -1,28 +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.5.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.7.1 (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 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.
7
+ [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [Opal](https://opalrb.com/) is an alpha [gem](https://rubygems.org/gems/glimmer-dsl-opal) that enables building web GUI in pure Ruby via [Opal](https://opalrb.com/) on [Rails](https://rubyonrails.org/).
8
8
 
9
- 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)
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. Just insert them as a single require statement in a Rails app, and BOOM! They're running on the web! Apps may then optionally be custom-styled for the web by web designers with standard CSS if needed.
22
12
 
23
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.
24
14
 
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):
15
+ NOTE: Alpha Version 0.7.1 only supports bare-minimum capabilities for the following [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) [samples](https://github.com/AndyObtiva/glimmer#samples):
26
16
 
27
17
  Hello:
28
18
 
@@ -40,6 +30,8 @@ Hello:
40
30
  - [Hello, Group!](#hello-group)
41
31
  - [Hello, Checkbox!](#hello-checkbox)
42
32
  - [Hello, Checkbox Group!](#hello-checkbox-group)
33
+ - [Hello, Date Time!](#hello-date-time)
34
+ - [Hello, Table!](#hello-table)
43
35
 
44
36
  Elaborate:
45
37
 
@@ -57,14 +49,6 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
57
49
  - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
58
50
  - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
59
51
 
60
- ## Background
61
-
62
- 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).
63
-
64
- 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.
65
-
66
- 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.
67
-
68
52
  ## Supported Glimmer DSL Keywords
69
53
 
70
54
  The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
@@ -105,17 +89,33 @@ Event loop:
105
89
  - `display`
106
90
  - `async_exec`
107
91
 
92
+ ## Background
93
+
94
+ The original idea behind Glimmer DSL for Opal was that you start by having a [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) desktop app that communicates with a Rails API for any web/cloud concerns. The pure Ruby [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) is very simple, so it is more productive to build GUI in it since it does not go through a server/client request/response cycle and can be iterated on locally with a much shorter feedback cycle. Once the GUI and the rest of the app is built. You simply embed it in a Rails app as a one line require statement after adding the Glimmer DSL for Opal gem, and BOOM, it just works on the web inside a web browser with the same server/client communication you had in the desktop app (I am working on adding minimal support for net/http in Opal so that desktop apps that use it continue to work in a web browser. Until then, just use [Opal-jQuery](https://github.com/opal/opal-jquery) http support). That way, you get two apps for one: desktop and web.
95
+
96
+ 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.
97
+
98
+ 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.
99
+
100
+ 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) automatically produces.
101
+
108
102
  ## Pre-requisites
109
103
 
110
104
  - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
111
105
  - Opal 1: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
112
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)
113
109
 
114
110
  ## Setup
115
111
 
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)
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)
117
113
 
118
- Please install a Rails 5 gem:
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.
117
+
118
+ Install a Rails 5 gem:
119
119
 
120
120
  ```
121
121
  gem install rails -v5.2.4.4
@@ -133,7 +133,7 @@ Add the following to `Gemfile`:
133
133
  gem 'opal-rails', '~> 1.1.2'
134
134
  gem 'opal-async', '~> 1.2.0'
135
135
  gem 'opal-jquery', '~> 0.4.4'
136
- gem 'glimmer-dsl-opal', '~> 0.5.0', require: false
136
+ gem 'glimmer-dsl-opal', '~> 0.7.1'
137
137
  gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
138
138
  gem 'glimmer-dsl-css', '~> 1.1.0', require: false
139
139
 
@@ -164,6 +164,14 @@ Add the following line to the top of an empty `app/assets/javascripts/applicatio
164
164
  require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
165
165
  ```
166
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
+
173
+ Clear the file `app/views/welcomes/index.html.erb` from any content.
174
+
167
175
  Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
168
176
 
169
177
  ```ruby
@@ -1411,6 +1419,357 @@ You should see "Hello, Checkbox Group!"
1411
1419
 
1412
1420
  ![Glimmer DSL for Opal Hello Checkbox Group](images/glimmer-dsl-opal-hello-checkbox-group.png)
1413
1421
 
1422
+ #### Hello, Date Time!
1423
+
1424
+ Add the following require statement to `app/assets/javascripts/application.rb`
1425
+
1426
+ ```ruby
1427
+ require 'glimmer-dsl-opal/samples/hello/hello_date_time'
1428
+ ```
1429
+
1430
+ Or add the Glimmer code directly if you prefer to play around with it:
1431
+
1432
+ ```ruby
1433
+ class HelloDateTime
1434
+ class Person
1435
+ attr_accessor :date_of_birth
1436
+ end
1437
+
1438
+ include Glimmer
1439
+
1440
+ def launch
1441
+ person = Person.new
1442
+ person.date_of_birth = DateTime.new(2013, 7, 12, 18, 37, 23)
1443
+
1444
+ shell {
1445
+ row_layout :vertical
1446
+
1447
+ text 'Hello, Date Time!'
1448
+ minimum_size 180, 180
1449
+
1450
+ label {
1451
+ text 'Date of Birth'
1452
+ font height: 16, style: :bold
1453
+ }
1454
+
1455
+ date { # alias for date_time(:date)
1456
+ date_time bind(person, :date_of_birth)
1457
+ }
1458
+
1459
+ date_drop_down { # alias for date_time(:date, :drop_down)
1460
+ date_time bind(person, :date_of_birth)
1461
+ }
1462
+
1463
+ time { # alias for date_time(:time)
1464
+ date_time bind(person, :date_of_birth)
1465
+ }
1466
+
1467
+ calendar { # alias for date_time(:calendar)
1468
+ date_time bind(person, :date_of_birth)
1469
+ }
1470
+ }.open
1471
+ end
1472
+ end
1473
+
1474
+ HelloDateTime.new.launch
1475
+ ```
1476
+
1477
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1478
+
1479
+ ![Glimmer DSL for SWT Hello Checkbox Group](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-date-time.png)
1480
+
1481
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1482
+
1483
+ Start the Rails server:
1484
+ ```
1485
+ rails s
1486
+ ```
1487
+
1488
+ Visit `http://localhost:3000`
1489
+
1490
+ You should see "Hello, Date Time!"
1491
+
1492
+ ![Glimmer DSL for Opal Hello Date Time](images/glimmer-dsl-opal-hello-date-time.png)
1493
+
1494
+ #### Hello, Table!
1495
+
1496
+ Note: This [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) sample has near-complete support, but is missing table context menus and table editing at the moment.
1497
+
1498
+ Add the following require statement to `app/assets/javascripts/application.rb`
1499
+
1500
+ ```ruby
1501
+ require 'glimmer-dsl-opal/samples/hello/hello_table'
1502
+ ```
1503
+
1504
+ Or add the Glimmer code directly if you prefer to play around with it:
1505
+
1506
+ ```ruby
1507
+ class HelloTable
1508
+ class BaseballGame
1509
+ class << self
1510
+ attr_accessor :selected_game
1511
+
1512
+ def all_playoff_games
1513
+ @all_playoff_games ||= {
1514
+ 'NLDS' => [
1515
+ new(Time.new(2037, 10, 6, 12, 0), 'Chicago Cubs', 'Milwaukee Brewers', 'Free Bobblehead'),
1516
+ new(Time.new(2037, 10, 7, 12, 0), 'Chicago Cubs', 'Milwaukee Brewers'),
1517
+ new(Time.new(2037, 10, 8, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs'),
1518
+ new(Time.new(2037, 10, 9, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs'),
1519
+ new(Time.new(2037, 10, 10, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs', 'Free Umbrella'),
1520
+ new(Time.new(2037, 10, 6, 18, 0), 'Cincinnati Reds', 'St Louis Cardinals', 'Free Bobblehead'),
1521
+ new(Time.new(2037, 10, 7, 18, 0), 'Cincinnati Reds', 'St Louis Cardinals'),
1522
+ new(Time.new(2037, 10, 8, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds'),
1523
+ new(Time.new(2037, 10, 9, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds'),
1524
+ new(Time.new(2037, 10, 10, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds', 'Free Umbrella'),
1525
+ ],
1526
+ 'ALDS' => [
1527
+ new(Time.new(2037, 10, 6, 12, 0), 'New York Yankees', 'Boston Red Sox', 'Free Bobblehead'),
1528
+ new(Time.new(2037, 10, 7, 12, 0), 'New York Yankees', 'Boston Red Sox'),
1529
+ new(Time.new(2037, 10, 8, 12, 0), 'Boston Red Sox', 'New York Yankees'),
1530
+ new(Time.new(2037, 10, 9, 12, 0), 'Boston Red Sox', 'New York Yankees'),
1531
+ new(Time.new(2037, 10, 10, 12, 0), 'Boston Red Sox', 'New York Yankees', 'Free Umbrella'),
1532
+ new(Time.new(2037, 10, 6, 18, 0), 'Houston Astros', 'Cleveland Indians', 'Free Bobblehead'),
1533
+ new(Time.new(2037, 10, 7, 18, 0), 'Houston Astros', 'Cleveland Indians'),
1534
+ new(Time.new(2037, 10, 8, 18, 0), 'Cleveland Indians', 'Houston Astros'),
1535
+ new(Time.new(2037, 10, 9, 18, 0), 'Cleveland Indians', 'Houston Astros'),
1536
+ new(Time.new(2037, 10, 10, 18, 0), 'Cleveland Indians', 'Houston Astros', 'Free Umbrella'),
1537
+ ],
1538
+ 'NLCS' => [
1539
+ new(Time.new(2037, 10, 12, 12, 0), 'Chicago Cubs', 'Cincinnati Reds', 'Free Towel'),
1540
+ new(Time.new(2037, 10, 13, 12, 0), 'Chicago Cubs', 'Cincinnati Reds'),
1541
+ new(Time.new(2037, 10, 14, 12, 0), 'Cincinnati Reds', 'Chicago Cubs'),
1542
+ new(Time.new(2037, 10, 15, 18, 0), 'Cincinnati Reds', 'Chicago Cubs'),
1543
+ new(Time.new(2037, 10, 16, 18, 0), 'Cincinnati Reds', 'Chicago Cubs'),
1544
+ new(Time.new(2037, 10, 17, 18, 0), 'Chicago Cubs', 'Cincinnati Reds'),
1545
+ new(Time.new(2037, 10, 18, 12, 0), 'Chicago Cubs', 'Cincinnati Reds', 'Free Poncho'),
1546
+ ],
1547
+ 'ALCS' => [
1548
+ new(Time.new(2037, 10, 12, 12, 0), 'Houston Astros', 'Boston Red Sox', 'Free Towel'),
1549
+ new(Time.new(2037, 10, 13, 12, 0), 'Houston Astros', 'Boston Red Sox'),
1550
+ new(Time.new(2037, 10, 14, 12, 0), 'Boston Red Sox', 'Houston Astros'),
1551
+ new(Time.new(2037, 10, 15, 18, 0), 'Boston Red Sox', 'Houston Astros'),
1552
+ new(Time.new(2037, 10, 16, 18, 0), 'Boston Red Sox', 'Houston Astros'),
1553
+ new(Time.new(2037, 10, 17, 18, 0), 'Houston Astros', 'Boston Red Sox'),
1554
+ new(Time.new(2037, 10, 18, 12, 0), 'Houston Astros', 'Boston Red Sox', 'Free Poncho'),
1555
+ ],
1556
+ 'World Series' => [
1557
+ new(Time.new(2037, 10, 20, 18, 0), 'Chicago Cubs', 'Boston Red Sox', 'Free Baseball Cap'),
1558
+ new(Time.new(2037, 10, 21, 18, 0), 'Chicago Cubs', 'Boston Red Sox'),
1559
+ new(Time.new(2037, 10, 22, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
1560
+ new(Time.new(2037, 10, 23, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
1561
+ new(Time.new(2037, 10, 24, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
1562
+ new(Time.new(2037, 10, 25, 18, 0), 'Chicago Cubs', 'Boston Red Sox'),
1563
+ new(Time.new(2037, 10, 26, 18, 0), 'Chicago Cubs', 'Boston Red Sox', 'Free World Series Polo'),
1564
+ ]
1565
+ }
1566
+ end
1567
+
1568
+ def playoff_type
1569
+ @playoff_type ||= 'World Series'
1570
+ end
1571
+
1572
+ def playoff_type=(new_playoff_type)
1573
+ @playoff_type = new_playoff_type
1574
+ self.schedule=(all_playoff_games[@playoff_type])
1575
+ end
1576
+
1577
+ def playoff_type_options
1578
+ all_playoff_games.keys
1579
+ end
1580
+
1581
+ def schedule
1582
+ @schedule ||= all_playoff_games[playoff_type]
1583
+ end
1584
+
1585
+ def schedule=(new_schedule)
1586
+ @schedule = new_schedule
1587
+ end
1588
+ end
1589
+
1590
+ include Glimmer
1591
+ include Glimmer::DataBinding::ObservableModel
1592
+
1593
+ TEAM_BALLPARKS = {
1594
+ 'Boston Red Sox' => 'Fenway Park',
1595
+ 'Chicago Cubs' => 'Wrigley Field',
1596
+ 'Cincinnati Reds' => 'Great American Ball Park',
1597
+ 'Cleveland Indians' => 'Progressive Field',
1598
+ 'Houston Astros' => 'Minute Maid Park',
1599
+ 'Milwaukee Brewers' => 'Miller Park',
1600
+ 'New York Yankees' => 'Yankee Stadium',
1601
+ 'St Louis Cardinals' => 'Busch Stadium',
1602
+ }
1603
+
1604
+ attr_accessor :date_time, :home_team, :away_team, :ballpark, :promotion
1605
+
1606
+ def initialize(date_time, home_team, away_team, promotion = 'N/A')
1607
+ self.date_time = date_time
1608
+ self.home_team = home_team
1609
+ self.away_team = away_team
1610
+ self.promotion = promotion
1611
+ observe(self, :date_time) do |new_value|
1612
+ notify_observers(:game_date)
1613
+ notify_observers(:game_time)
1614
+ end
1615
+ end
1616
+
1617
+ def home_team=(home_team_value)
1618
+ if home_team_value != away_team
1619
+ @home_team = home_team_value
1620
+ self.ballpark = TEAM_BALLPARKS[@home_team]
1621
+ end
1622
+ end
1623
+
1624
+ def away_team=(away_team_value)
1625
+ if away_team_value != home_team
1626
+ @away_team = away_team_value
1627
+ end
1628
+ end
1629
+
1630
+ def date
1631
+ Date.new(date_time.year, date_time.month, date_time.day)
1632
+ end
1633
+
1634
+ def time
1635
+ Time.new(0, 1, 1, date_time.hour, date_time.min, date_time.sec, '+00:00')
1636
+ end
1637
+
1638
+ def game_date
1639
+ date_time.strftime("%m/%d/%Y")
1640
+ end
1641
+
1642
+ def game_time
1643
+ date_time.strftime("%I:%M %p")
1644
+ end
1645
+
1646
+ def home_team_options
1647
+ TEAM_BALLPARKS.keys
1648
+ end
1649
+
1650
+ def away_team_options
1651
+ TEAM_BALLPARKS.keys
1652
+ end
1653
+
1654
+ def ballpark_options
1655
+ [TEAM_BALLPARKS[@home_team], TEAM_BALLPARKS[@away_team]]
1656
+ end
1657
+
1658
+ def to_s
1659
+ "#{home_team} vs #{away_team} at #{ballpark} on #{game_date} #{game_time}"
1660
+ end
1661
+
1662
+ def book!
1663
+ "Thank you for booking #{to_s}"
1664
+ end
1665
+ end
1666
+
1667
+ include Glimmer
1668
+
1669
+ def launch
1670
+ shell {
1671
+ grid_layout
1672
+
1673
+ text 'Hello, Table!'
1674
+
1675
+ label {
1676
+ layout_data :center, :center, true, false
1677
+
1678
+ text 'Baseball Playoff Schedule'
1679
+ font height: 30, style: :bold
1680
+ }
1681
+
1682
+ combo(:read_only) {
1683
+ layout_data :center, :center, true, false
1684
+ selection bind(BaseballGame, :playoff_type)
1685
+ font height: 16
1686
+ }
1687
+
1688
+ table(:editable) { |table_proxy|
1689
+ layout_data :fill, :fill, true, true
1690
+
1691
+ table_column {
1692
+ text 'Game Date'
1693
+ width 150
1694
+ sort_property :date # ensure sorting by real date value (not `game_date` string specified in items below)
1695
+ }
1696
+ table_column {
1697
+ text 'Game Time'
1698
+ width 150
1699
+ sort_property :time # ensure sorting by real time value (not `game_time` string specified in items below)
1700
+ }
1701
+ table_column {
1702
+ text 'Ballpark'
1703
+ width 180
1704
+ }
1705
+ table_column {
1706
+ text 'Home Team'
1707
+ width 150
1708
+ }
1709
+ table_column {
1710
+ text 'Away Team'
1711
+ width 150
1712
+ }
1713
+ table_column {
1714
+ text 'Promotion'
1715
+ width 150
1716
+ # default text editor is used here
1717
+ }
1718
+
1719
+ # Data-bind table items (rows) to a model collection property, specifying column properties ordering per nested model
1720
+ items bind(BaseballGame, :schedule), column_properties(:game_date, :game_time, :ballpark, :home_team, :away_team, :promotion)
1721
+
1722
+ # Data-bind table selection
1723
+ selection bind(BaseballGame, :selected_game)
1724
+
1725
+ # Default initial sort property
1726
+ sort_property :date
1727
+
1728
+ # Sort by these additional properties after handling sort by the column the user clicked
1729
+ additional_sort_properties :date, :time, :home_team, :away_team, :ballpark, :promotion
1730
+ }
1731
+
1732
+ button {
1733
+ text 'Book Selected Game'
1734
+ layout_data :center, :center, true, false
1735
+ font height: 16
1736
+ enabled bind(BaseballGame, :selected_game)
1737
+
1738
+ on_widget_selected {
1739
+ book_selected_game
1740
+ }
1741
+ }
1742
+ }.open
1743
+ end
1744
+
1745
+ def book_selected_game
1746
+ message_box {
1747
+ text 'Baseball Game Booked!'
1748
+ message BaseballGame.selected_game.book!
1749
+ }.open
1750
+ end
1751
+ end
1752
+
1753
+ HelloTable.new.launch
1754
+ ```
1755
+
1756
+ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
1757
+
1758
+ ![Glimmer DSL for SWT Hello Table](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-table.png)
1759
+
1760
+ Glimmer app on the web (using `glimmer-dsl-opal` gem):
1761
+
1762
+ Start the Rails server:
1763
+ ```
1764
+ rails s
1765
+ ```
1766
+
1767
+ Visit `http://localhost:3000`
1768
+
1769
+ You should see "Hello, Date Time!"
1770
+
1771
+ ![Glimmer DSL for Opal Hello Table](images/glimmer-dsl-opal-hello-table.png)
1772
+
1414
1773
  ### Elaborate Samples
1415
1774
 
1416
1775
  #### Login
@@ -1702,6 +2061,7 @@ class TicTacToe
1702
2061
  @tic_tac_toe_board = Board.new
1703
2062
  @shell = shell {
1704
2063
  text "Tic-Tac-Toe"
2064
+ minimum_size 150, 178
1705
2065
  composite {
1706
2066
  grid_layout 3, true
1707
2067
  (1..3).each { |row|
@@ -1710,6 +2070,7 @@ class TicTacToe
1710
2070
  layout_data :fill, :fill, true, true
1711
2071
  text bind(@tic_tac_toe_board[row, column], :sign)
1712
2072
  enabled bind(@tic_tac_toe_board[row, column], :empty)
2073
+ font style: :bold, height: 20
1713
2074
  on_widget_selected {
1714
2075
  @tic_tac_toe_board.mark(row, column)
1715
2076
  }
@@ -2150,7 +2511,7 @@ Visit `http://localhost:3000`
2150
2511
 
2151
2512
  You should see "Glimmer Calculator"
2152
2513
 
2153
- ![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
2514
+ [![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)
2154
2515
 
2155
2516
  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
2517
 
@@ -2158,7 +2519,7 @@ Visit http://glimmer-cs-calculator-server.herokuapp.com/welcomes/apple
2158
2519
 
2159
2520
  You should see "Apple Calculator Theme"
2160
2521
 
2161
- ![Glimmer Calculator Opal Apple Calculator Theme](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal-apple.png)
2522
+ [![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)
2162
2523
 
2163
2524
  ## Help
2164
2525