glimmer-dsl-opal 0.0.8 → 0.4.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 +37 -0
- data/README.md +542 -177
- data/VERSION +1 -1
- data/lib/glimmer-dsl-opal.rb +49 -10
- data/lib/glimmer-dsl-opal/ext/date.rb +13 -0
- data/lib/glimmer-dsl-opal/ext/exception.rb +5 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager.rb +1 -1
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_manager_presenter.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/contact_manager/contact_repository.rb +24 -99
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/login.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/board.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/elaborate/tic_tac_toe/cell.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_browser.rb +0 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_combo.rb +63 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed.rb +19 -19
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_computed/contact.rb +0 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +155 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_custom_widget.rb +86 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_multi_selection.rb +0 -0
- data/lib/{samples → glimmer-dsl-opal/samples}/hello/hello_list_single_selection.rb +0 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_tab.rb +50 -0
- data/lib/glimmer-dsl-opal/samples/hello/hello_world.rb +29 -0
- data/lib/glimmer-dsl-opal/vendor/jquery.js +2 -0
- data/lib/glimmer-dsl-swt.rb +36 -0
- data/lib/glimmer/data_binding/element_binding.rb +1 -1
- data/lib/glimmer/data_binding/ext/observable_model.rb +5 -5
- data/lib/glimmer/data_binding/list_selection_binding.rb +1 -1
- data/lib/glimmer/data_binding/table_items_binding.rb +6 -3
- data/lib/glimmer/dsl/opal/async_exec_expression.rb +23 -7
- data/lib/glimmer/dsl/opal/color_expression.rb +38 -0
- data/lib/glimmer/dsl/opal/column_properties_expression.rb +2 -2
- data/lib/glimmer/dsl/opal/combo_selection_data_binding_expression.rb +2 -2
- data/lib/glimmer/dsl/opal/custom_widget_expression.rb +92 -0
- data/lib/glimmer/dsl/opal/display_expression.rb +40 -0
- data/lib/glimmer/dsl/opal/dsl.rb +14 -16
- data/lib/glimmer/dsl/opal/exec_expression.rb +55 -0
- data/lib/glimmer/dsl/opal/font_expression.rb +47 -0
- data/lib/glimmer/dsl/opal/layout_data_expression.rb +2 -2
- data/lib/glimmer/dsl/opal/layout_expression.rb +22 -0
- data/lib/glimmer/dsl/opal/list_selection_data_binding_expression.rb +2 -3
- data/lib/glimmer/dsl/opal/message_box_expression.rb +2 -2
- data/lib/glimmer/dsl/opal/property_expression.rb +5 -2
- data/lib/glimmer/dsl/opal/rgb_expression.rb +32 -0
- data/lib/glimmer/dsl/opal/rgba_expression.rb +32 -0
- data/lib/glimmer/dsl/opal/shell_expression.rb +20 -3
- data/lib/glimmer/dsl/opal/swt_expression.rb +46 -0
- data/lib/glimmer/dsl/opal/sync_exec_expression.rb +33 -0
- data/lib/glimmer/dsl/opal/table_expression.rb +2 -2
- data/lib/glimmer/dsl/opal/table_items_data_binding_expression.rb +2 -2
- data/lib/glimmer/dsl/opal/widget_expression.rb +24 -0
- data/lib/glimmer/dsl/opal/widget_listener_expression.rb +16 -3
- data/lib/glimmer/swt.rb +499 -0
- data/lib/glimmer/swt/browser_proxy.rb +27 -0
- data/lib/glimmer/swt/button_proxy.rb +40 -0
- data/lib/glimmer/swt/color_proxy.rb +119 -0
- data/lib/glimmer/{opal/select_proxy.rb → swt/combo_proxy.rb} +24 -19
- data/lib/glimmer/swt/composite_proxy.rb +31 -0
- data/lib/glimmer/swt/display_proxy.rb +79 -0
- data/lib/glimmer/{opal → swt}/event_listener_proxy.rb +1 -1
- data/lib/glimmer/swt/fill_layout_proxy.rb +84 -0
- data/lib/glimmer/swt/font_proxy.rb +79 -0
- data/lib/glimmer/swt/grid_layout_proxy.rb +71 -0
- data/lib/glimmer/swt/label_proxy.rb +34 -0
- data/lib/glimmer/{opal → swt}/layout_data_proxy.rb +38 -3
- data/lib/glimmer/swt/layout_proxy.rb +63 -0
- data/lib/glimmer/{opal → swt}/list_proxy.rb +31 -23
- data/lib/glimmer/swt/make_shift_shell_proxy.rb +38 -0
- data/lib/glimmer/swt/message_box_proxy.rb +143 -0
- data/lib/glimmer/{opal → swt}/point.rb +1 -1
- data/lib/glimmer/{opal → swt}/property_owner.rb +1 -1
- data/lib/glimmer/swt/row_layout_proxy.rb +105 -0
- data/lib/glimmer/swt/shell_proxy.rb +248 -0
- data/lib/glimmer/swt/style_constantizable.rb +154 -0
- data/lib/glimmer/swt/styled_text_proxy.rb +44 -0
- data/lib/glimmer/swt/swt_proxy.rb +53 -0
- data/lib/glimmer/{opal/tab_folder.rb → swt/tab_folder_proxy.rb} +20 -21
- data/lib/glimmer/swt/tab_item_proxy.rb +84 -0
- data/lib/glimmer/{opal/table_column.rb → swt/table_column_proxy.rb} +13 -7
- data/lib/glimmer/{opal/table_item.rb → swt/table_item_proxy.rb} +59 -48
- data/lib/glimmer/{opal → swt}/table_proxy.rb +66 -56
- data/lib/glimmer/swt/text_proxy.rb +46 -0
- data/lib/glimmer/swt/widget_proxy.rb +495 -0
- data/lib/glimmer/ui/custom_shell.rb +92 -0
- data/lib/glimmer/ui/custom_widget.rb +292 -0
- data/lib/glimmer/util/proc_tracker.rb +39 -0
- data/lib/net/http.rb +17 -0
- data/lib/uri.rb +64 -0
- metadata +129 -67
- data/lib/glimmer/dsl/opal/browser_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/button_expression.rb +0 -18
- data/lib/glimmer/dsl/opal/combo_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/composite_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/grid_layout_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/label_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/list_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/tab_folder_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/tab_item_expression.rb +0 -17
- data/lib/glimmer/dsl/opal/text_expression.rb +0 -22
- data/lib/glimmer/opal/display_proxy.rb +0 -23
- data/lib/glimmer/opal/div_proxy.rb +0 -29
- data/lib/glimmer/opal/document_proxy.rb +0 -187
- data/lib/glimmer/opal/element_proxy.rb +0 -286
- data/lib/glimmer/opal/grid_layout_proxy.rb +0 -54
- data/lib/glimmer/opal/iframe_proxy.rb +0 -23
- data/lib/glimmer/opal/input_proxy.rb +0 -45
- data/lib/glimmer/opal/label_proxy.rb +0 -25
- data/lib/glimmer/opal/modal.rb +0 -94
- data/lib/glimmer/opal/tab_item.rb +0 -98
- data/lib/samples/elaborate/launch +0 -6
- data/lib/samples/hello/hello_combo.rb +0 -34
- data/lib/samples/hello/hello_tab.rb +0 -24
- data/lib/samples/hello/hello_world.rb +0 -8
- data/lib/samples/hello/launch +0 -10
- data/lib/samples/launch +0 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1d32ed10e3cc93c0f4bde45e35265071c281d73b4371e68306dccbb3e3406e05
|
4
|
+
data.tar.gz: 421daff761291fa3e118d090c450378ab5291f640ed5d81292560d1d8df8736b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 220ad6c819df436720e3756b9cef24a74ced1f6c1a14aa7ed5604b09b949a8badc99bbbfb1ce5a048b80c35bde882d0f0136e788dc07a54c9071ebaa9c72a680
|
7
|
+
data.tar.gz: 80c1d6150624d0095ec7965f060e572841e1a7446b664c4741bd553302a805a051593084e495ccee472e66865e398f77443c5d91253f26fa3320b8fc9d9e168a
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,42 @@
|
|
1
1
|
# Change Log
|
2
2
|
|
3
|
+
## 0.4.0
|
4
|
+
|
5
|
+
- Support `display` keyword representing an SWT Display
|
6
|
+
- Support display `on_swt_keydown` event listener (display-wide widget observer)
|
7
|
+
- Support `DisplayProxy#shells` method keeping track of open shell
|
8
|
+
- Make a custom shell open in the same window if there is no shell open already
|
9
|
+
- Support `sync_exec` keyword as just an alias to `async_exec`
|
10
|
+
- Provide a makeshift require for 'glimmer-dsl-swt' that requires 'glimmer-dsl-opal' instead
|
11
|
+
- Fake APIs on the web for OS.os?, File.read, Display.setAppName, Display.setAppVersion
|
12
|
+
- Provide a minimal URI class that supports URI::encode_www_form_component and URI::decode_www_form_component from Ruby
|
13
|
+
|
14
|
+
## 0.3.0
|
15
|
+
|
16
|
+
- Support opening a custom shell in a browser tab/window by passing in query parameters to URL (e.g. ?custom_shell=keyword+option1=value1 etc...)
|
17
|
+
- Make custom shells automatically open in a new tab/window (while standard shells continue to open in the same window by replacing its content)
|
18
|
+
- Hello, Custom Shell! Sample
|
19
|
+
|
20
|
+
## 0.2.0
|
21
|
+
|
22
|
+
- Color support
|
23
|
+
- Font support
|
24
|
+
- Custom Widget Support
|
25
|
+
- Hello, Custom Widget! sample
|
26
|
+
- Updated Hello, Combo! sample to match the latest changes in Glimmer DSL for SWT
|
27
|
+
- `SWT` full re-implementation in Opal as `Glimmer::SWT` with all the `SWT` style constants
|
28
|
+
|
29
|
+
## 0.1.0
|
30
|
+
|
31
|
+
- Code redesign to better match the glimmer-dsl-swt APIs
|
32
|
+
- opal-jquery refactoring
|
33
|
+
- opal-rspec test coverage
|
34
|
+
|
35
|
+
## 0.0.9
|
36
|
+
|
37
|
+
- Upgraded to glimmer gem v0.9.3
|
38
|
+
- Fixed issue with missing Glimmer::Opal::ElementProxy#id=(value) method breaking Contact Manager sample Find feature
|
39
|
+
|
3
40
|
## 0.0.8
|
4
41
|
|
5
42
|
- Contact Manager sample support
|
data/README.md
CHANGED
@@ -1,12 +1,17 @@
|
|
1
|
-
# <img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=
|
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)
|
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
|
-
|
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.
|
8
|
+
|
9
|
+
Glimmer DSL for Opal successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal Ruby](https://opalrb.com/) inside a web browser, and as such inherits the full range of powerful Glimmer desktop [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities for the web.
|
10
|
+
|
11
|
+
NOTE: Alpha Version 0.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):
|
12
|
+
|
13
|
+
Hello:
|
8
14
|
|
9
|
-
NOTE: Alpha Version 0.0.8 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):
|
10
15
|
- [Hello, World!](#hello-world)
|
11
16
|
- [Hello, Combo!](#hello-combo)
|
12
17
|
- [Hello, Computed!](#hello-computed)
|
@@ -14,19 +19,38 @@ NOTE: Alpha Version 0.0.8 only supports bare-minimum capabilities for the follow
|
|
14
19
|
- [Hello, List Multi Selection!](#hello-list-multi-selection)
|
15
20
|
- [Hello, Browser!](#hello-browser)
|
16
21
|
- [Hello, Tab!](#hello-tab)
|
22
|
+
- [Hello, Custom Widget!](#hello-custom-widget)
|
23
|
+
- [Hello, Custom Shell!](#hello-custom-shell)
|
24
|
+
|
25
|
+
Elaborate:
|
26
|
+
|
17
27
|
- [Login](#login)
|
18
28
|
- [Tic Tac Toe](#tic-tac-toe)
|
19
29
|
- [Contact Manager](#contact-manager)
|
20
30
|
|
21
|
-
|
22
|
-
|
31
|
+
External:
|
32
|
+
|
33
|
+
- [Glimmer Calculator](#glimmer-calculator)
|
34
|
+
|
35
|
+
Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
|
36
|
+
- [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Library)
|
37
|
+
- [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (Ruby Desktop Development GUI Library)
|
23
38
|
- [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
|
24
39
|
- [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS (Cascading Style Sheets)
|
25
40
|
|
41
|
+
## Background
|
42
|
+
|
43
|
+
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).
|
44
|
+
|
45
|
+
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
|
+
|
47
|
+
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
|
+
|
26
49
|
## Supported Glimmer DSL Keywords
|
27
50
|
|
28
51
|
The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) have partial support in Opal:
|
29
52
|
|
53
|
+
Widgets:
|
30
54
|
- `shell`
|
31
55
|
- `label`
|
32
56
|
- `combo`
|
@@ -39,38 +63,61 @@ The following keywords from [glimmer-dsl-swt](https://github.com/AndyObtiva/glim
|
|
39
63
|
- `table`
|
40
64
|
- `table_column`
|
41
65
|
- `message_box`
|
66
|
+
- Glimmer::UI::CustomWidget: ability to define any keyword as a custom widget
|
67
|
+
- Glimmer::UI::CustomShell: ability to define any keyword as a custom shell (aka custom window) that opens in a new browser window (tab) automatically unless there is no shell open in the current browser window (tab)
|
68
|
+
|
69
|
+
Layouts:
|
70
|
+
- `grid_layout`
|
71
|
+
- `row_layout`
|
72
|
+
- `fill_layout`
|
73
|
+
- `layout_data`
|
74
|
+
|
75
|
+
Graphics:
|
76
|
+
- `color`
|
77
|
+
- `font`
|
78
|
+
|
79
|
+
Data-Binding/Observers:
|
80
|
+
- `bind`
|
81
|
+
- `observe`
|
42
82
|
- `on_widget_selected`
|
43
83
|
- `on_modify_text`
|
44
|
-
|
45
|
-
|
84
|
+
|
85
|
+
Event loop:
|
86
|
+
- `display`
|
46
87
|
- `async_exec`
|
47
|
-
- `grid_layout`
|
48
|
-
- `layout_data`
|
49
88
|
|
50
89
|
## Pre-requisites
|
51
90
|
|
52
91
|
- Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
|
53
92
|
- Opal 1: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
|
93
|
+
- 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)
|
54
94
|
|
55
95
|
## Setup
|
56
96
|
|
57
|
-
(NOTE: if you run into issues,
|
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)
|
58
98
|
|
59
|
-
Please install a Rails 5 gem
|
99
|
+
Please install a Rails 5 gem:
|
100
|
+
|
101
|
+
```
|
102
|
+
gem install rails -v5.2.4.4
|
103
|
+
```
|
60
104
|
|
61
105
|
Start a new Rails 5 app:
|
62
106
|
|
63
107
|
```
|
64
|
-
rails new
|
108
|
+
rails new glimmer_app_server
|
65
109
|
```
|
66
110
|
|
67
111
|
Add the following to `Gemfile`:
|
68
112
|
|
69
113
|
```
|
70
114
|
gem 'opal-rails', '~> 1.1.2'
|
71
|
-
gem 'opal-async', '~> 1.
|
72
|
-
gem 'opal-
|
73
|
-
gem 'glimmer-dsl-opal', '~> 0.0
|
115
|
+
gem 'opal-async', '~> 1.2.0'
|
116
|
+
gem 'opal-jquery', '~> 0.4.4'
|
117
|
+
gem 'glimmer-dsl-opal', '~> 0.4.0', require: false
|
118
|
+
gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
|
119
|
+
gem 'glimmer-dsl-css', '~> 1.1.0', require: false
|
120
|
+
|
74
121
|
```
|
75
122
|
|
76
123
|
Follow (opal-rails)[https://github.com/opal/opal-rails] instructions, basically the configuration of: config/initializers/assets.rb
|
@@ -80,21 +127,71 @@ Edit `config/initializers/assets.rb` and add the following at the bottom:
|
|
80
127
|
Opal.use_gem 'glimmer-dsl-opal'
|
81
128
|
```
|
82
129
|
|
130
|
+
Run:
|
131
|
+
|
132
|
+
```
|
133
|
+
rails g scaffold welcome
|
134
|
+
```
|
135
|
+
|
136
|
+
Modify `config/routes.rb`:
|
137
|
+
|
138
|
+
```ruby
|
139
|
+
root to: 'welcomes#index'
|
140
|
+
```
|
141
|
+
|
83
142
|
Add the following line to the top of an empty `app/assets/javascripts/application.rb` (replacing `application.js`)
|
84
143
|
|
85
144
|
```ruby
|
86
|
-
require 'glimmer-dsl-opal' # brings opal and
|
145
|
+
require 'glimmer-dsl-opal' # brings opal and other dependencies automatically
|
87
146
|
```
|
88
147
|
|
89
|
-
|
148
|
+
Open a `Document.ready?` block and add inside it Glimmer GUI DSL code or a require statement for one of the samples below.
|
149
|
+
|
150
|
+
```ruby
|
151
|
+
Document.ready? do
|
152
|
+
# require-statement/code goes here.
|
153
|
+
end
|
154
|
+
```
|
155
|
+
|
156
|
+
Example to confirm setup is working:
|
157
|
+
|
158
|
+
```ruby
|
159
|
+
Document.ready? do
|
160
|
+
include Glimmer
|
161
|
+
|
162
|
+
shell {
|
163
|
+
fill_layout
|
164
|
+
text 'Example to confirm setup is working'
|
165
|
+
label {
|
166
|
+
text "Welcome to Glimmer DSL for Opal!"
|
167
|
+
foreground :red
|
168
|
+
font height: 24
|
169
|
+
}
|
170
|
+
}.open
|
171
|
+
end
|
172
|
+
```
|
90
173
|
|
91
174
|
## Samples
|
92
175
|
|
176
|
+
Follow the instructions below to try out [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) samples webified via [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal)
|
177
|
+
|
178
|
+
Also, this external sample app contains all the samples mentioned below configured inside a Rails 5 [Opal](https://opalrb.com/) app with all the pre-requisites ready to go for convenience:
|
179
|
+
|
180
|
+
[https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
|
181
|
+
|
182
|
+
Some of the screenshots might be out of date with updates done to samples in both [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) and [glimmer-dsl-opal](https://github.com/AndyObtiva/glimmer-dsl-opal).
|
183
|
+
|
93
184
|
### Hello Samples
|
94
185
|
|
95
186
|
#### Hello, World!
|
96
187
|
|
97
|
-
Add the following
|
188
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
189
|
+
|
190
|
+
```ruby
|
191
|
+
require 'glimmer-dsl-opal/samples/hello/hello_world'
|
192
|
+
```
|
193
|
+
|
194
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
98
195
|
|
99
196
|
```ruby
|
100
197
|
include Glimmer
|
@@ -126,37 +223,51 @@ You should see "Hello, World!"
|
|
126
223
|
|
127
224
|
#### Hello, Combo!
|
128
225
|
|
129
|
-
Add the following
|
226
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
227
|
+
|
228
|
+
```ruby
|
229
|
+
require 'glimmer-dsl-opal/samples/hello/hello_combo'
|
230
|
+
```
|
231
|
+
|
232
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
130
233
|
|
131
234
|
```ruby
|
132
235
|
class Person
|
133
236
|
attr_accessor :country, :country_options
|
134
|
-
|
237
|
+
|
135
238
|
def initialize
|
136
|
-
self.country_options=[
|
137
|
-
|
239
|
+
self.country_options = ['', 'Canada', 'US', 'Mexico']
|
240
|
+
reset_country
|
138
241
|
end
|
139
242
|
|
140
243
|
def reset_country
|
141
|
-
self.country =
|
244
|
+
self.country = 'Canada'
|
142
245
|
end
|
143
246
|
end
|
144
247
|
|
145
248
|
class HelloCombo
|
146
249
|
include Glimmer
|
250
|
+
|
147
251
|
def launch
|
148
252
|
person = Person.new
|
253
|
+
|
149
254
|
shell {
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
255
|
+
row_layout(:vertical) {
|
256
|
+
pack false
|
257
|
+
}
|
258
|
+
|
259
|
+
text 'Hello, Combo!'
|
260
|
+
|
261
|
+
combo(:read_only) {
|
262
|
+
selection bind(person, :country)
|
263
|
+
}
|
264
|
+
|
265
|
+
button {
|
266
|
+
text 'Reset Selection'
|
267
|
+
|
268
|
+
on_widget_selected do
|
269
|
+
person.reset_country
|
270
|
+
end
|
160
271
|
}
|
161
272
|
}.open
|
162
273
|
end
|
@@ -183,7 +294,14 @@ You should see "Hello, Combo!"
|
|
183
294
|
|
184
295
|
#### Hello, Computed!
|
185
296
|
|
186
|
-
Add the following
|
297
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
298
|
+
|
299
|
+
|
300
|
+
```ruby
|
301
|
+
require 'glimmer-dsl-opal/samples/hello/hello_computed'
|
302
|
+
```
|
303
|
+
|
304
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
187
305
|
|
188
306
|
```ruby
|
189
307
|
class HelloComputed
|
@@ -213,15 +331,15 @@ class HelloComputed
|
|
213
331
|
|
214
332
|
def initialize
|
215
333
|
@contact = Contact.new(
|
216
|
-
first_name:
|
217
|
-
last_name:
|
334
|
+
first_name: 'Barry',
|
335
|
+
last_name: 'McKibbin',
|
218
336
|
year_of_birth: 1985
|
219
337
|
)
|
220
338
|
end
|
221
339
|
|
222
340
|
def launch
|
223
341
|
shell {
|
224
|
-
text
|
342
|
+
text 'Hello, Computed!'
|
225
343
|
composite {
|
226
344
|
grid_layout {
|
227
345
|
num_columns 2
|
@@ -229,44 +347,44 @@ class HelloComputed
|
|
229
347
|
horizontal_spacing 20
|
230
348
|
vertical_spacing 10
|
231
349
|
}
|
232
|
-
label {text
|
350
|
+
label {text 'First &Name: '}
|
233
351
|
text {
|
234
352
|
text bind(@contact, :first_name)
|
235
353
|
layout_data {
|
236
|
-
|
237
|
-
|
354
|
+
horizontal_alignment :fill
|
355
|
+
grab_excess_horizontal_space true
|
238
356
|
}
|
239
357
|
}
|
240
|
-
label {text
|
358
|
+
label {text '&Last Name: '}
|
241
359
|
text {
|
242
360
|
text bind(@contact, :last_name)
|
243
361
|
layout_data {
|
244
|
-
|
245
|
-
|
362
|
+
horizontal_alignment :fill
|
363
|
+
grab_excess_horizontal_space true
|
246
364
|
}
|
247
365
|
}
|
248
|
-
label {text
|
366
|
+
label {text '&Year of Birth: '}
|
249
367
|
text {
|
250
368
|
text bind(@contact, :year_of_birth)
|
251
369
|
layout_data {
|
252
|
-
|
253
|
-
|
370
|
+
horizontal_alignment :fill
|
371
|
+
grab_excess_horizontal_space true
|
254
372
|
}
|
255
373
|
}
|
256
|
-
label {text
|
374
|
+
label {text 'Name: '}
|
257
375
|
label {
|
258
376
|
text bind(@contact, :name, computed_by: [:first_name, :last_name])
|
259
377
|
layout_data {
|
260
|
-
|
261
|
-
|
378
|
+
horizontal_alignment :fill
|
379
|
+
grab_excess_horizontal_space true
|
262
380
|
}
|
263
381
|
}
|
264
|
-
label {text
|
382
|
+
label {text 'Age: '}
|
265
383
|
label {
|
266
384
|
text bind(@contact, :age, on_write: :to_i, computed_by: [:year_of_birth])
|
267
385
|
layout_data {
|
268
|
-
|
269
|
-
|
386
|
+
horizontal_alignment :fill
|
387
|
+
grab_excess_horizontal_space true
|
270
388
|
}
|
271
389
|
}
|
272
390
|
}
|
@@ -295,7 +413,14 @@ You should see "Hello, Computed!"
|
|
295
413
|
|
296
414
|
#### Hello, List Single Selection!
|
297
415
|
|
298
|
-
Add the following
|
416
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
417
|
+
|
418
|
+
|
419
|
+
```ruby
|
420
|
+
require 'glimmer-dsl-opal/samples/hello/hello_list_single_selection'
|
421
|
+
```
|
422
|
+
|
423
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
299
424
|
|
300
425
|
```ruby
|
301
426
|
class Person
|
@@ -335,7 +460,7 @@ HelloListSingleSelection.new.launch
|
|
335
460
|
```
|
336
461
|
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
337
462
|
|
338
|
-
![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-single-selection.png)
|
463
|
+
![Glimmer DSL for SWT Hello List Single Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-single-selection.png)
|
339
464
|
|
340
465
|
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
341
466
|
|
@@ -352,7 +477,13 @@ You should see "Hello, List Single Selection!"
|
|
352
477
|
|
353
478
|
#### Hello, List Multi Selection!
|
354
479
|
|
355
|
-
Add the following
|
480
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
481
|
+
|
482
|
+
```ruby
|
483
|
+
require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
|
484
|
+
```
|
485
|
+
|
486
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
356
487
|
|
357
488
|
```ruby
|
358
489
|
class Person
|
@@ -402,7 +533,7 @@ HelloListMultiSelection.new.launch
|
|
402
533
|
```
|
403
534
|
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
404
535
|
|
405
|
-
![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-list-multi-selection.png)
|
536
|
+
![Glimmer DSL for SWT Hello List Multi Selection](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-list-multi-selection.png)
|
406
537
|
|
407
538
|
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
408
539
|
|
@@ -419,7 +550,13 @@ You should see "Hello, List Multi Selection!"
|
|
419
550
|
|
420
551
|
#### Hello, Browser!
|
421
552
|
|
422
|
-
Add the following
|
553
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
554
|
+
|
555
|
+
```ruby
|
556
|
+
require 'glimmer-dsl-opal/samples/hello/hello_browser'
|
557
|
+
```
|
558
|
+
|
559
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
423
560
|
|
424
561
|
```ruby
|
425
562
|
include Glimmer
|
@@ -433,7 +570,7 @@ shell {
|
|
433
570
|
```
|
434
571
|
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
435
572
|
|
436
|
-
![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-browser.png)
|
573
|
+
![Glimmer DSL for SWT Hello Browser](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-browser.png)
|
437
574
|
|
438
575
|
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
439
576
|
|
@@ -450,7 +587,13 @@ You should see "Hello, Browser!"
|
|
450
587
|
|
451
588
|
#### Hello, Tab!
|
452
589
|
|
453
|
-
Add the following
|
590
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
591
|
+
|
592
|
+
```ruby
|
593
|
+
require 'glimmer-dsl-opal/samples/hello/hello_tab'
|
594
|
+
```
|
595
|
+
|
596
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
454
597
|
|
455
598
|
```ruby
|
456
599
|
class HelloTab
|
@@ -480,8 +623,8 @@ HelloTab.new.launch
|
|
480
623
|
```
|
481
624
|
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
482
625
|
|
483
|
-
![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-tab-english.png)
|
484
|
-
![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-hello-tab-french.png)
|
626
|
+
![Glimmer DSL for SWT Hello Tab English](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-english.png)
|
627
|
+
![Glimmer DSL for SWT Hello Tab French](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-tab-french.png)
|
485
628
|
|
486
629
|
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
487
630
|
|
@@ -497,11 +640,280 @@ You should see "Hello, Tab!"
|
|
497
640
|
![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
|
498
641
|
![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
|
499
642
|
|
643
|
+
#### Hello, Custom Widget!
|
644
|
+
|
645
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
646
|
+
|
647
|
+
```ruby
|
648
|
+
require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
|
649
|
+
```
|
650
|
+
|
651
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
652
|
+
|
653
|
+
```ruby
|
654
|
+
# This class declares a `greeting_label` custom widget (by convention)
|
655
|
+
class GreetingLabel
|
656
|
+
include Glimmer::UI::CustomWidget
|
657
|
+
|
658
|
+
# multiple options without default values
|
659
|
+
options :name, :colors
|
660
|
+
|
661
|
+
# single option with default value
|
662
|
+
option :greeting, default: 'Hello'
|
663
|
+
|
664
|
+
# internal attribute (not a custom widget option)
|
665
|
+
attr_accessor :color
|
666
|
+
|
667
|
+
before_body {
|
668
|
+
@font = {height: 24, style: :bold}
|
669
|
+
@color = :black
|
670
|
+
}
|
671
|
+
|
672
|
+
after_body {
|
673
|
+
return if colors.nil?
|
674
|
+
|
675
|
+
Thread.new {
|
676
|
+
colors.cycle { |color|
|
677
|
+
async_exec {
|
678
|
+
self.color = color
|
679
|
+
}
|
680
|
+
sleep(1)
|
681
|
+
}
|
682
|
+
}
|
683
|
+
}
|
684
|
+
|
685
|
+
body {
|
686
|
+
# pass received swt_style through to label to customize (e.g. :center to center text)
|
687
|
+
label(swt_style) {
|
688
|
+
text "#{greeting}, #{name}!"
|
689
|
+
font @font
|
690
|
+
foreground bind(self, :color)
|
691
|
+
}
|
692
|
+
}
|
693
|
+
|
694
|
+
end
|
695
|
+
|
696
|
+
# including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `greeting_label` custom widget
|
697
|
+
include Glimmer
|
698
|
+
|
699
|
+
shell {
|
700
|
+
fill_layout :vertical
|
701
|
+
|
702
|
+
minimum_size 215, 215
|
703
|
+
text 'Hello, Custom Widget!'
|
704
|
+
|
705
|
+
# custom widget options are passed in a hash
|
706
|
+
greeting_label(name: 'Sean')
|
707
|
+
|
708
|
+
# pass :center SWT style followed by custom widget options hash
|
709
|
+
greeting_label(:center, name: 'Laura', greeting: 'Aloha') #
|
710
|
+
|
711
|
+
greeting_label(:right, name: 'Rick') {
|
712
|
+
# you can nest attributes under custom widgets just like any standard widget
|
713
|
+
foreground :red
|
714
|
+
}
|
715
|
+
|
716
|
+
# the colors option cycles between colors for the label foreground every second
|
717
|
+
greeting_label(:center, name: 'Mary', greeting: 'Aloha', colors: [:red, :dark_green, :blue])
|
718
|
+
}.open
|
719
|
+
```
|
720
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
721
|
+
|
722
|
+
![Glimmer DSL for SWT Hello Custom Widget](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-widget.gif)
|
723
|
+
|
724
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
725
|
+
|
726
|
+
Start the Rails server:
|
727
|
+
```
|
728
|
+
rails s
|
729
|
+
```
|
730
|
+
|
731
|
+
Visit `http://localhost:3000`
|
732
|
+
|
733
|
+
You should see "Hello, Custom Widget!"
|
734
|
+
|
735
|
+
![Glimmer DSL for Opal Hello Custom Widget](images/glimmer-dsl-opal-hello-custom-widget.gif)
|
736
|
+
|
737
|
+
#### Hello, Custom Shell!
|
738
|
+
|
739
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
740
|
+
|
741
|
+
```ruby
|
742
|
+
require 'glimmer-dsl-opal/samples/hello/hello_custom_shell'
|
743
|
+
```
|
744
|
+
|
745
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
746
|
+
|
747
|
+
```ruby
|
748
|
+
require 'date'
|
749
|
+
|
750
|
+
# This class declares an `email_shell` custom shell, aka custom window (by convention)
|
751
|
+
# Used to view an email message
|
752
|
+
class EmailShell
|
753
|
+
include Glimmer::UI::CustomShell
|
754
|
+
|
755
|
+
# multiple options without default values
|
756
|
+
options :date, :subject, :from, :message
|
757
|
+
|
758
|
+
# single option with default value
|
759
|
+
option :to, default: '"John Irwin" <john.irwin@example.com>'
|
760
|
+
|
761
|
+
before_body {
|
762
|
+
@swt_style |= swt(:shell_trim, :modeless)
|
763
|
+
}
|
764
|
+
|
765
|
+
body {
|
766
|
+
# pass received swt_style through to shell to customize it (e.g. :dialog_trim for a blocking shell)
|
767
|
+
shell(swt_style) {
|
768
|
+
grid_layout(2, false)
|
769
|
+
|
770
|
+
text subject
|
771
|
+
|
772
|
+
label {
|
773
|
+
text 'Date:'
|
774
|
+
}
|
775
|
+
label {
|
776
|
+
text date
|
777
|
+
}
|
778
|
+
|
779
|
+
label {
|
780
|
+
text 'From:'
|
781
|
+
}
|
782
|
+
label {
|
783
|
+
text from
|
784
|
+
}
|
785
|
+
|
786
|
+
label {
|
787
|
+
text 'To:'
|
788
|
+
}
|
789
|
+
label {
|
790
|
+
text to
|
791
|
+
}
|
792
|
+
|
793
|
+
label {
|
794
|
+
text 'Subject:'
|
795
|
+
}
|
796
|
+
label {
|
797
|
+
text subject
|
798
|
+
}
|
799
|
+
|
800
|
+
label {
|
801
|
+
layout_data(:fill, :fill, true, true) {
|
802
|
+
horizontal_span 2 #TODO implement
|
803
|
+
vertical_indent 10
|
804
|
+
}
|
805
|
+
|
806
|
+
background :white
|
807
|
+
text message
|
808
|
+
}
|
809
|
+
}
|
810
|
+
}
|
811
|
+
|
812
|
+
end
|
813
|
+
|
814
|
+
class HelloCustomShell
|
815
|
+
# including Glimmer enables the Glimmer DSL syntax, including auto-discovery of the `email_shell` custom widget
|
816
|
+
include Glimmer
|
817
|
+
|
818
|
+
Email = Struct.new(:date, :subject, :from, :message, keyword_init: true)
|
819
|
+
EmailSystem = Struct.new(:emails, keyword_init: true)
|
820
|
+
|
821
|
+
def initialize
|
822
|
+
@email_system = EmailSystem.new(
|
823
|
+
emails: [
|
824
|
+
Email.new(date: DateTime.new(2029, 10, 22, 11, 3, 0).strftime('%F %I:%M %p'), subject: '3rd Week Report', from: '"Dianne Tux" <dianne.tux@example.com>', message: "Hello,\n\nI was wondering if you'd like to go over the weekly report sometime this afternoon.\n\nDianne"),
|
825
|
+
Email.new(date: DateTime.new(2029, 10, 21, 8, 1, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v100.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 100.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
|
826
|
+
Email.new(date: DateTime.new(2029, 10, 19, 16, 58, 0).strftime('%F %I:%M %p'), subject: 'Christmas Party', from: '"Lisa Ferreira" <lisa.ferreira@example.com>', message: "Merry Christmas,\n\nAll office Christmas Party arrangements have been set\n\nMake sure to bring a Secret Santa gift\n\nBest regards,\n\nLisa Ferreira"),
|
827
|
+
Email.new(date: DateTime.new(2029, 10, 16, 9, 43, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v99.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 99.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
|
828
|
+
Email.new(date: DateTime.new(2029, 10, 15, 11, 2, 0).strftime('%F %I:%M %p'), subject: '2nd Week Report', from: '"Dianne Tux" <dianne.tux@example.com>', message: "Hello,\n\nI was wondering if you'd like to go over the weekly report sometime this afternoon.\n\nDianne"),
|
829
|
+
Email.new(date: DateTime.new(2029, 10, 2, 10, 34, 0).strftime('%F %I:%M %p'), subject: 'Glimmer Upgrade v98.0', from: '"Robert McGabbins" <robert.mcgabbins@example.com>', message: "Team,\n\nWe are upgrading to Glimmer version 98.0.\n\nEveryone pull the latest code!\n\nRegards,\n\nRobert McGabbins"),
|
830
|
+
]
|
831
|
+
)
|
832
|
+
end
|
833
|
+
|
834
|
+
def launch
|
835
|
+
shell {
|
836
|
+
grid_layout
|
837
|
+
|
838
|
+
text 'Hello, Custom Shell!'
|
839
|
+
|
840
|
+
label {
|
841
|
+
font height: 24, style: :bold
|
842
|
+
text 'Emails:'
|
843
|
+
}
|
844
|
+
|
845
|
+
label {
|
846
|
+
font height: 18
|
847
|
+
text 'Click an email to view its message'
|
848
|
+
}
|
849
|
+
|
850
|
+
table {
|
851
|
+
layout_data :fill, :fill, true, true
|
852
|
+
|
853
|
+
table_column {
|
854
|
+
text 'Date:'
|
855
|
+
width 180
|
856
|
+
}
|
857
|
+
table_column {
|
858
|
+
text 'Subject:'
|
859
|
+
width 180
|
860
|
+
}
|
861
|
+
table_column {
|
862
|
+
text 'From:'
|
863
|
+
width 360
|
864
|
+
}
|
865
|
+
|
866
|
+
items bind(@email_system, :emails), column_properties(:date, :subject, :from)
|
867
|
+
|
868
|
+
on_mouse_up { |event|
|
869
|
+
email = event.table_item.get_data
|
870
|
+
Thread.new do
|
871
|
+
async_exec {
|
872
|
+
email_shell(date: email.date, subject: email.subject, from: email.from, message: email.message).open
|
873
|
+
}
|
874
|
+
end
|
875
|
+
}
|
876
|
+
}
|
877
|
+
}.open
|
878
|
+
end
|
879
|
+
end
|
880
|
+
|
881
|
+
HelloCustomShell.new.launch
|
882
|
+
```
|
883
|
+
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
884
|
+
|
885
|
+
![Glimmer DSL for SWT Hello Custom Shell](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell.png)
|
886
|
+
![Glimmer DSL for SWT Hello Custom Shell Email1](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email1.png)
|
887
|
+
![Glimmer DSL for SWT Hello Custom Shell Email2](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email2.png)
|
888
|
+
![Glimmer DSL for SWT Hello Custom Shell Email3](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-custom-shell-email3.png)
|
889
|
+
|
890
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
891
|
+
|
892
|
+
Start the Rails server:
|
893
|
+
```
|
894
|
+
rails s
|
895
|
+
```
|
896
|
+
|
897
|
+
Visit `http://localhost:3000`
|
898
|
+
|
899
|
+
You should see "Hello, Custom Widget!"
|
900
|
+
|
901
|
+
![Glimmer DSL for Opal Hello Custom Shell](images/glimmer-dsl-opal-hello-custom-shell.png)
|
902
|
+
![Glimmer DSL for Opal Hello Custom Shell Email1](images/glimmer-dsl-opal-hello-custom-shell-email1.png)
|
903
|
+
![Glimmer DSL for Opal Hello Custom Shell Email2](images/glimmer-dsl-opal-hello-custom-shell-email2.png)
|
904
|
+
![Glimmer DSL for Opal Hello Custom Shell Email3](images/glimmer-dsl-opal-hello-custom-shell-email3.png)
|
905
|
+
|
500
906
|
### Elaborate Samples
|
501
907
|
|
502
908
|
#### Login
|
503
909
|
|
504
|
-
Add the following
|
910
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
911
|
+
|
912
|
+
```ruby
|
913
|
+
require 'glimmer-dsl-opal/samples/elaborate/login'
|
914
|
+
```
|
915
|
+
|
916
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
505
917
|
|
506
918
|
```ruby
|
507
919
|
require "observer"
|
@@ -594,9 +1006,9 @@ Login.new.launch
|
|
594
1006
|
```
|
595
1007
|
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
596
1008
|
|
597
|
-
![Glimmer DSL for SWT Login](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login.png)
|
598
|
-
![Glimmer DSL for SWT Login Filled In](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login-filled-in.png)
|
599
|
-
![Glimmer DSL for SWT Login Logged In](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login-logged-in.png)
|
1009
|
+
![Glimmer DSL for SWT Login](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login.png)
|
1010
|
+
![Glimmer DSL for SWT Login Filled In](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login-filled-in.png)
|
1011
|
+
![Glimmer DSL for SWT Login Logged In](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-login-logged-in.png)
|
600
1012
|
|
601
1013
|
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
602
1014
|
|
@@ -615,7 +1027,13 @@ You should see "Login" dialog
|
|
615
1027
|
|
616
1028
|
#### Tic Tac Toe
|
617
1029
|
|
618
|
-
Add the following
|
1030
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1031
|
+
|
1032
|
+
```ruby
|
1033
|
+
require 'glimmer-dsl-opal/samples/elaborate/tic_tac_toe'
|
1034
|
+
```
|
1035
|
+
|
1036
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
619
1037
|
|
620
1038
|
```ruby
|
621
1039
|
class TicTacToe
|
@@ -823,9 +1241,9 @@ TicTacToe.new.open
|
|
823
1241
|
```
|
824
1242
|
Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
825
1243
|
|
826
|
-
![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe.png)
|
827
|
-
![Glimmer DSL for SWT Tic Tac Toe In Progress](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe-in-progress.png)
|
828
|
-
![Glimmer DSL for SWT Tic Tac Toe Game Over](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe-game-over.png)
|
1244
|
+
![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe.png)
|
1245
|
+
![Glimmer DSL for SWT Tic Tac Toe In Progress](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe-in-progress.png)
|
1246
|
+
![Glimmer DSL for SWT Tic Tac Toe Game Over](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe-game-over.png)
|
829
1247
|
|
830
1248
|
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
831
1249
|
|
@@ -844,7 +1262,13 @@ You should see "Tic Tac Toe"
|
|
844
1262
|
|
845
1263
|
#### Contact Manager
|
846
1264
|
|
847
|
-
Add the following
|
1265
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1266
|
+
|
1267
|
+
```ruby
|
1268
|
+
require 'glimmer-dsl-opal/samples/elaborate/contact_manager'
|
1269
|
+
```
|
1270
|
+
|
1271
|
+
Or add the Glimmer code directly if you prefer to play around with it:
|
848
1272
|
|
849
1273
|
```ruby
|
850
1274
|
class ContactManager
|
@@ -962,104 +1386,6 @@ class ContactManager
|
|
962
1386
|
Jason
|
963
1387
|
Emma
|
964
1388
|
Olivia
|
965
|
-
Ava
|
966
|
-
Isabella
|
967
|
-
Sophia
|
968
|
-
Charlotte
|
969
|
-
Mia
|
970
|
-
Amelia
|
971
|
-
Harper
|
972
|
-
Evelyn
|
973
|
-
Abigail
|
974
|
-
Emily
|
975
|
-
Elizabeth
|
976
|
-
Mila
|
977
|
-
Ella
|
978
|
-
Avery
|
979
|
-
Sofia
|
980
|
-
Camila
|
981
|
-
Aria
|
982
|
-
Scarlett
|
983
|
-
Victoria
|
984
|
-
Madison
|
985
|
-
Luna
|
986
|
-
Grace
|
987
|
-
Chloe
|
988
|
-
Penelope
|
989
|
-
Layla
|
990
|
-
Riley
|
991
|
-
Zoey
|
992
|
-
Nora
|
993
|
-
Lily
|
994
|
-
Eleanor
|
995
|
-
Hannah
|
996
|
-
Lillian
|
997
|
-
Addison
|
998
|
-
Aubrey
|
999
|
-
Ellie
|
1000
|
-
Stella
|
1001
|
-
Natalie
|
1002
|
-
Zoe
|
1003
|
-
Leah
|
1004
|
-
Hazel
|
1005
|
-
Violet
|
1006
|
-
Aurora
|
1007
|
-
Savannah
|
1008
|
-
Audrey
|
1009
|
-
Brooklyn
|
1010
|
-
Bella
|
1011
|
-
Claire
|
1012
|
-
Skylar
|
1013
|
-
Lucy
|
1014
|
-
Paisley
|
1015
|
-
Everly
|
1016
|
-
Anna
|
1017
|
-
Caroline
|
1018
|
-
Nova
|
1019
|
-
Genesis
|
1020
|
-
Emilia
|
1021
|
-
Kennedy
|
1022
|
-
Samantha
|
1023
|
-
Maya
|
1024
|
-
Willow
|
1025
|
-
Kinsley
|
1026
|
-
Naomi
|
1027
|
-
Aaliyah
|
1028
|
-
Elena
|
1029
|
-
Sarah
|
1030
|
-
Ariana
|
1031
|
-
Allison
|
1032
|
-
Gabriella
|
1033
|
-
Alice
|
1034
|
-
Madelyn
|
1035
|
-
Cora
|
1036
|
-
Ruby
|
1037
|
-
Eva
|
1038
|
-
Serenity
|
1039
|
-
Autumn
|
1040
|
-
Adeline
|
1041
|
-
Hailey
|
1042
|
-
Gianna
|
1043
|
-
Valentina
|
1044
|
-
Isla
|
1045
|
-
Eliana
|
1046
|
-
Quinn
|
1047
|
-
Nevaeh
|
1048
|
-
Ivy
|
1049
|
-
Sadie
|
1050
|
-
Piper
|
1051
|
-
Lydia
|
1052
|
-
Alexa
|
1053
|
-
Josephine
|
1054
|
-
Emery
|
1055
|
-
Julia
|
1056
|
-
Delilah
|
1057
|
-
Arianna
|
1058
|
-
Vivian
|
1059
|
-
Kaylee
|
1060
|
-
Sophie
|
1061
|
-
Brielle
|
1062
|
-
Madeline
|
1063
1389
|
]
|
1064
1390
|
NAMES_LAST = %w[
|
1065
1391
|
Smith
|
@@ -1074,7 +1400,7 @@ class ContactManager
|
|
1074
1400
|
Taylor
|
1075
1401
|
]
|
1076
1402
|
def initialize(contacts = nil)
|
1077
|
-
@contacts = contacts ||
|
1403
|
+
@contacts = contacts || 100.times.map do |n|
|
1078
1404
|
random_first_name_index = (rand*NAMES_FIRST.size).to_i
|
1079
1405
|
random_last_name_index = (rand*NAMES_LAST.size).to_i
|
1080
1406
|
first_name = NAMES_FIRST[random_first_name_index]
|
@@ -1235,23 +1561,23 @@ Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObt
|
|
1235
1561
|
|
1236
1562
|
Glimmer DSL for SWT Contact Manager
|
1237
1563
|
|
1238
|
-
![Glimmer DSL for SWT Contact Manager](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager.png)
|
1564
|
+
![Glimmer DSL for SWT Contact Manager](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager.png)
|
1239
1565
|
|
1240
1566
|
Glimmer DSL for SWT Contact Manager Find
|
1241
1567
|
|
1242
|
-
![Glimmer DSL for SWT Contact Manager Find](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-find.png)
|
1568
|
+
![Glimmer DSL for SWT Contact Manager Find](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-find.png)
|
1243
1569
|
|
1244
1570
|
Glimmer DSL for SWT Contact Manager Edit Started
|
1245
1571
|
|
1246
|
-
![Glimmer DSL for SWT Contact Manager Edit Started](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-started.png)
|
1572
|
+
![Glimmer DSL for SWT Contact Manager Edit Started](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-edit-started.png)
|
1247
1573
|
|
1248
1574
|
Glimmer DSL for SWT Contact Manager Edit In Progress
|
1249
1575
|
|
1250
|
-
![Glimmer DSL for SWT Contact Manager Edit In Progress](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-in-progress.png)
|
1576
|
+
![Glimmer DSL for SWT Contact Manager Edit In Progress](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-edit-in-progress.png)
|
1251
1577
|
|
1252
1578
|
Glimmer DSL for SWT Contact Manager Edit Done
|
1253
1579
|
|
1254
|
-
![Glimmer DSL for SWT Contact Manager Edit Done](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-contact-manager-edit-done.png)
|
1580
|
+
![Glimmer DSL for SWT Contact Manager Edit Done](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-contact-manager-edit-done.png)
|
1255
1581
|
|
1256
1582
|
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1257
1583
|
|
@@ -1284,6 +1610,39 @@ Glimmer DSL for Opal Contact Manager Edit Done
|
|
1284
1610
|
|
1285
1611
|
![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
|
1286
1612
|
|
1613
|
+
### External Samples
|
1614
|
+
|
1615
|
+
#### Glimmer Calculator
|
1616
|
+
|
1617
|
+
Add the [glimmer-cs-calculator](https://github.com/AndyObtiva/glimmer-cs-calculator) gem to `Gemfile` (without requiring):
|
1618
|
+
|
1619
|
+
```
|
1620
|
+
gem 'glimmer-cs-calculator', require: false
|
1621
|
+
```
|
1622
|
+
|
1623
|
+
Add the following require statement to `app/assets/javascripts/application.rb`
|
1624
|
+
|
1625
|
+
```ruby
|
1626
|
+
require 'glimmer-cs-calculator/launch'
|
1627
|
+
```
|
1628
|
+
|
1629
|
+
Glimmer app on the desktop (using the [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
|
1630
|
+
|
1631
|
+
![Glimmer Calculator Linux](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-linux.png)
|
1632
|
+
|
1633
|
+
Glimmer app on the web (using `glimmer-dsl-opal` gem):
|
1634
|
+
|
1635
|
+
Start the Rails server:
|
1636
|
+
```
|
1637
|
+
rails s
|
1638
|
+
```
|
1639
|
+
|
1640
|
+
Visit `http://localhost:3000`
|
1641
|
+
|
1642
|
+
You should see "Glimmer Calculator"
|
1643
|
+
|
1644
|
+
![Glimmer Calculator Opal](https://raw.githubusercontent.com/AndyObtiva/glimmer-cs-calculator/master/glimmer-cs-calculator-screenshot-opal.png)
|
1645
|
+
|
1287
1646
|
## Help
|
1288
1647
|
|
1289
1648
|
### Issues
|
@@ -1318,5 +1677,11 @@ These features have been suggested. You might see them in a future version of Gl
|
|
1318
1677
|
|
1319
1678
|
## License
|
1320
1679
|
|
1321
|
-
|
1322
|
-
|
1680
|
+
[MIT](https://opensource.org/licenses/MIT)
|
1681
|
+
|
1682
|
+
Copyright (c) 2020 - Andy Maleh.
|
1683
|
+
See [LICENSE.txt](LICENSE.txt) for further details.
|
1684
|
+
|
1685
|
+
--
|
1686
|
+
|
1687
|
+
[<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=40 />](https://github.com/AndyObtiva/glimmer) Built for [Glimmer](https://github.com/AndyObtiva/glimmer) (Ruby Desktop Development GUI Library).
|