glimmer-dsl-opal 0.7.2 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +41 -0
  3. data/README.md +745 -82
  4. data/VERSION +1 -1
  5. data/lib/glimmer-dsl-opal.rb +14 -1
  6. data/lib/glimmer-dsl-opal/ext/class.rb +10 -0
  7. data/lib/{file.rb → glimmer-dsl-opal/ext/file.rb} +0 -0
  8. data/lib/glimmer-dsl-opal/ext/glimmer/dsl/engine.rb +30 -0
  9. data/lib/glimmer-dsl-opal/samples/elaborate/contact_manager.rb +50 -23
  10. data/lib/glimmer-dsl-opal/samples/elaborate/login.rb +22 -5
  11. data/lib/glimmer-dsl-opal/samples/hello/hello_browser.rb +24 -1
  12. data/lib/glimmer-dsl-opal/samples/hello/hello_button.rb +46 -0
  13. data/lib/glimmer-dsl-opal/samples/hello/hello_computed.rb +27 -0
  14. data/lib/glimmer-dsl-opal/samples/hello/hello_custom_shell.rb +7 -7
  15. data/lib/glimmer-dsl-opal/samples/hello/hello_list_multi_selection.rb +62 -32
  16. data/lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb +47 -22
  17. data/lib/glimmer-dsl-opal/samples/hello/hello_menu_bar.rb +241 -0
  18. data/lib/glimmer-dsl-opal/samples/hello/hello_message_box.rb +37 -0
  19. data/lib/glimmer-dsl-opal/samples/hello/hello_pop_up_context_menu.rb +84 -0
  20. data/lib/glimmer/data_binding/observable_element.rb +1 -1
  21. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +6 -0
  22. data/lib/glimmer/dsl/opal/dsl.rb +2 -0
  23. data/lib/glimmer/dsl/opal/menu_bar_expression.rb +54 -0
  24. data/lib/glimmer/dsl/opal/menu_expression.rb +61 -0
  25. data/lib/glimmer/dsl/opal/shell_expression.rb +0 -4
  26. data/lib/glimmer/dsl/opal/widget_expression.rb +3 -2
  27. data/lib/glimmer/dsl/opal/widget_listener_expression.rb +2 -2
  28. data/lib/glimmer/swt/custom/checkbox_group.rb +2 -2
  29. data/lib/glimmer/swt/custom/radio_group.rb +2 -2
  30. data/lib/glimmer/swt/date_time_proxy.rb +5 -4
  31. data/lib/glimmer/swt/display_proxy.rb +4 -4
  32. data/lib/glimmer/swt/event_listener_proxy.rb +14 -4
  33. data/lib/glimmer/swt/font_proxy.rb +4 -4
  34. data/lib/glimmer/swt/grid_layout_proxy.rb +21 -12
  35. data/lib/glimmer/swt/label_proxy.rb +17 -6
  36. data/lib/glimmer/swt/latest_message_box_proxy.rb +20 -0
  37. data/lib/glimmer/swt/layout_data_proxy.rb +6 -6
  38. data/lib/glimmer/swt/list_proxy.rb +15 -0
  39. data/lib/glimmer/swt/menu_item_proxy.rb +174 -0
  40. data/lib/glimmer/swt/menu_proxy.rb +273 -0
  41. data/lib/glimmer/swt/message_box_proxy.rb +57 -72
  42. data/lib/glimmer/swt/property_owner.rb +2 -0
  43. data/lib/glimmer/swt/radio_proxy.rb +1 -1
  44. data/lib/glimmer/swt/shell_proxy.rb +34 -189
  45. data/lib/glimmer/swt/tab_folder_proxy.rb +43 -0
  46. data/lib/glimmer/swt/table_column_proxy.rb +3 -2
  47. data/lib/glimmer/swt/table_editor.rb +1 -1
  48. data/lib/glimmer/swt/table_item_proxy.rb +7 -5
  49. data/lib/glimmer/swt/table_proxy.rb +14 -10
  50. data/lib/glimmer/swt/widget_proxy.rb +327 -33
  51. data/lib/glimmer/ui/custom_shell.rb +9 -7
  52. data/lib/glimmer/ui/custom_widget.rb +3 -3
  53. metadata +36 -4
@@ -4,20 +4,62 @@ require 'glimmer/swt/display_proxy'
4
4
  module Glimmer
5
5
  module SWT
6
6
  class MessageBoxProxy < WidgetProxy
7
+ STYLE = <<~CSS
8
+ .modal {
9
+ position: fixed;
10
+ z-index: 1;
11
+ padding-top: 100px;
12
+ left: 0;
13
+ top: 0;
14
+ width: 100%;
15
+ height: 100%;
16
+ overflow: auto;
17
+ background-color: rgb(0,0,0);
18
+ background-color: rgba(0,0,0,0.4);
19
+ text-align: center;
20
+ }
21
+ .modal-content .text {
22
+ background: rgb(80, 116, 211);
23
+ color: white;
24
+ padding: 5px;
25
+ }
26
+ .modal-content .message {
27
+ padding: 20px;
28
+ }
29
+ .modal-content {
30
+ background-color: #fefefe;
31
+ padding-bottom: 15px;
32
+ border: 1px solid #888;
33
+ display: inline-block;
34
+ min-width: 200px;
35
+ }
36
+ CSS
37
+ # .close {
38
+ # color: #aaaaaa;
39
+ # float: right;
40
+ # font-weight: bold;
41
+ # margin: 5px;
42
+ # }
43
+ # .close:hover,
44
+ # .close:focus {
45
+ # color: #000;
46
+ # text-decoration: none;
47
+ # cursor: pointer;
48
+ # }
49
+
7
50
  attr_reader :text, :message
8
51
 
9
52
  def initialize(parent, args, block)
10
53
  i = 0
11
- @parent = parent || DisplayProxy.instance.shells.first
54
+ @parent = parent || DisplayProxy.instance.shells.last || ShellProxy.new([])
12
55
  @args = args
13
56
  @block = block
14
57
  @children = Set.new
15
58
  @enabled = true
16
- content do
17
- on_widget_selected {
18
- hide
19
- }
20
- end
59
+ on_widget_selected {
60
+ hide
61
+ }
62
+ DisplayProxy.instance.message_boxes << self
21
63
  end
22
64
 
23
65
  def text=(txt)
@@ -25,21 +67,17 @@ module Glimmer
25
67
  dom_element.find('.modal-content .text').html(@text)
26
68
  end
27
69
 
28
- def message=(msg)
29
- @message = msg
30
- dom_element.find('.modal-content .message').html(@text)
70
+ def html_message
71
+ message.gsub("\n", '<br />')
31
72
  end
32
73
 
33
- def document
34
- element = self
35
- begin
36
- element = element.parent
37
- end while(element.parent)
38
- element
74
+ def message=(msg)
75
+ @message = msg
76
+ dom_element.find('.modal-content .message').html(html_message)
39
77
  end
40
78
 
41
79
  def open
42
- document.post_initialize_child(self)
80
+ parent.post_initialize_child(self)
43
81
  end
44
82
 
45
83
  def hide
@@ -70,68 +108,15 @@ module Glimmer
70
108
  }
71
109
  end
72
110
 
73
- def style_dom_modal_css
74
- <<~CSS
75
- .modal {
76
- position: fixed;
77
- z-index: 1;
78
- padding-top: 100px;
79
- left: 0;
80
- top: 0;
81
- width: 100%;
82
- height: 100%;
83
- overflow: auto;
84
- background-color: rgb(0,0,0);
85
- background-color: rgba(0,0,0,0.4);
86
- text-align: center;
87
- }
88
- .modal-content .text {
89
- background: rgb(80, 116, 211);
90
- color: white;
91
- padding: 5px;
92
- }
93
- .modal-content .message {
94
- padding: 20px;
95
- }
96
- .modal-content {
97
- background-color: #fefefe;
98
- padding-bottom: 15px;
99
- border: 1px solid #888;
100
- display: inline-block;
101
- min-width: 200px;
102
- }
103
- CSS
104
- # .close {
105
- # color: #aaaaaa;
106
- # float: right;
107
- # font-weight: bold;
108
- # margin: 5px;
109
- # }
110
- # .close:hover,
111
- # .close:focus {
112
- # color: #000;
113
- # text-decoration: none;
114
- # cursor: pointer;
115
- # }
116
- end
117
-
118
111
  def dom
119
- modal_id = id
120
- modal_style = css
121
- modal_text = text
122
- modal_message = message
123
- modal_class = ['modal', name].join(' ')
124
112
  @dom ||= html {
125
- div(id: modal_id, style: modal_style, class: modal_class) {
126
- style(class: 'modal-style') {
127
- style_dom_modal_css #.split("\n").map(&:strip).join(' ')
128
- }
113
+ div(id: id, class: "modal #{name}") {
129
114
  div(class: 'modal-content') {
130
115
  header(class: 'text') {
131
- modal_text
116
+ text
132
117
  }
133
118
  tag(_name: 'p', id: 'message', class: 'message') {
134
- modal_message
119
+ html_message
135
120
  }
136
121
  input(type: 'button', class: 'close', autofocus: 'autofocus', value: 'OK')
137
122
  }
@@ -2,6 +2,8 @@ module Glimmer
2
2
  module SWT
3
3
  # Adapts Glimmer UI classes to SWT JavaBean property owner classes (which are now adapted to Opal)
4
4
  module PropertyOwner
5
+ # TODO consider adding has_attribute?
6
+
5
7
  def get_attribute(attribute_name)
6
8
  send(attribute_getter(attribute_name))
7
9
  end
@@ -4,7 +4,7 @@ module Glimmer
4
4
  module SWT
5
5
  class RadioProxy < WidgetProxy
6
6
  # TODO add a create method that ensures passing :radio style in if not there
7
- STYLE=<<~CSS
7
+ STYLE = <<~CSS
8
8
  .radio {
9
9
  display: inline;
10
10
  }
@@ -1,12 +1,34 @@
1
1
  require 'glimmer/swt/widget_proxy'
2
+ require 'glimmer/swt/layout_proxy'
2
3
  require 'glimmer/swt/display_proxy'
3
4
  require 'glimmer/swt/point'
4
5
 
5
6
  module Glimmer
6
7
  module SWT
7
8
  class ShellProxy < CompositeProxy
9
+ STYLE = <<~CSS
10
+ html {
11
+ width: 100%;
12
+ height: 100%;
13
+ }
14
+ body {
15
+ width: 100%;
16
+ height: 100%;
17
+ margin: 0;
18
+ }
19
+ .shell {
20
+ height: 100%;
21
+ margin: 0;
22
+ }
23
+ .shell iframe {
24
+ width: 100%;
25
+ height: 100%;
26
+ }
27
+ CSS
28
+
8
29
  # TODO consider renaming to ShellProxy to match SWT API
9
30
  attr_reader :minimum_size
31
+ attr_accessor :menu_bar
10
32
 
11
33
  WIDTH_MIN = 130
12
34
  HEIGHT_MIN = 0
@@ -14,7 +36,7 @@ module Glimmer
14
36
  def initialize(args)
15
37
  @args = args
16
38
  @children = []
17
- # Document.ready? do end # TODO consider embedding this jQuery call in so outside consumers don't have to use it
39
+ # TODO consider the implication of emptying the body
18
40
  Document.find('body').empty unless ENV['RUBY_ENV'] == 'test'
19
41
  render
20
42
  @layout = FillLayoutProxy.new(self, [])
@@ -52,208 +74,31 @@ module Glimmer
52
74
  .hide {
53
75
  display: none !important;
54
76
  }
55
- .selected, .tabs .tab.selected {
77
+ .selected {
56
78
  background: rgb(80, 116, 211);
57
79
  color: white;
58
80
  }
59
81
  CSS
60
82
  end
61
83
 
62
- def style_dom_shell_css
63
- <<~CSS
64
- html {
65
- width: 100%;
66
- height: 100%;
67
- }
68
- body {
69
- width: 100%;
70
- height: 100%;
71
- margin: 0;
72
- }
73
- .shell {
74
- height: 100%;
75
- margin: 0;
76
- }
77
- .shell iframe {
78
- width: 100%;
79
- height: 100%;
80
- }
81
- CSS
82
- end
83
-
84
- def style_dom_list_css
85
- <<~CSS
86
- ul {
87
- list-style: none;
88
- padding: 0;
89
- }
90
- li {
91
- cursor: default;
92
- padding-left: 10px;
93
- padding-right: 10px;
94
- }
95
- li.empty-list-item {
96
- color: transparent;
97
- }
98
- CSS
99
- end
100
-
101
- def style_dom_tab_css
102
- <<~CSS
103
- .tabs .tab {
104
- background-color: inherit;
105
- float: left;
106
- border: none;
107
- outline: none;
108
- cursor: pointer;
109
- padding: 14px 16px;
110
- transition: 0.3s;
111
- font-size: 17px;
112
- }
113
- .tabs {
114
- overflow: hidden;
115
- border: 1px solid #ccc;
116
- background-color: #f1f1f1;
117
- }
118
- CSS
119
- end
120
-
121
- def style_dom_tab_item_css
122
- <<~CSS
123
- /* Create an selected/current tablink class */
124
- .tabs .tab.selected {
125
- background-color: #ccc;
126
- }
127
- /* Change background color of buttons on hover */
128
- .tabs .tab:hover {
129
- background-color: #ddd;
130
- }
131
- /* Style the tab content */
132
- .tab-item {
133
- padding: 6px 12px;
134
- border: 1px solid #ccc;
135
- border-top: none;
136
- }
137
- CSS
138
- end
139
-
140
- def style_dom_modal_css
141
- <<~CSS
142
- /* The Modal (background) */
143
- .modal {
144
- position: fixed; /* Stay in place */
145
- z-index: 1; /* Sit on top */
146
- padding-top: 100px; /* Location of the box */
147
- left: 0;
148
- top: 0;
149
- width: 100%; /* Full width */
150
- height: 100%; /* Full height */
151
- overflow: auto; /* Enable scroll if needed */
152
- background-color: rgb(0,0,0); /* Fallback color */
153
- background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
154
- text-align: center;
155
- }
156
-
157
- /* Modal Content */
158
- .modal-content {
159
- background-color: #fefefe;
160
- margin: auto;
161
- border: 1px solid #888;
162
- display: inline-block;
163
- min-width: 200px;
164
- }
165
-
166
- .modal-content .text {
167
- background: rgb(80, 116, 211);
168
- color: white;
169
- padding: 5px;
170
- }
171
-
172
- .modal-content .message {
173
- padding: 20px;
174
- }
175
-
176
- /* The Close Button */
177
- .close {
178
- color: #aaaaaa;
179
- float: right;
180
- font-weight: bold;
181
- margin: 5px;
182
- }
183
-
184
- .close:hover,
185
- .close:focus {
186
- color: #000;
187
- text-decoration: none;
188
- cursor: pointer;
189
- }
190
- CSS
191
- end
192
-
193
- def style_dom_table_css
194
- <<~CSS
195
- table {
196
- border-spacing: 0;
197
- }
198
-
199
- table tr th,td {
200
- cursor: default;
201
- }
202
- CSS
203
- end
204
-
205
84
  def dom
206
85
  i = 0
207
86
  body_id = id
208
87
  body_class = ([name] + css_classes.to_a).join(' ')
209
88
  @dom ||= html {
210
89
  div(id: body_id, class: body_class) {
211
- # TODO support the idea of dynamic CSS building on close of shell that adds only as much CSS as needed for widgets that were mentioned
90
+ # TODO consider supporting the idea of dynamic CSS building on close of shell that adds only as much CSS as needed for widgets that were mentioned
212
91
  style(class: 'common-style') {
213
92
  style_dom_css
214
93
  }
215
- style(class: 'shell-style') {
216
- style_dom_shell_css
217
- }
218
- style(class: 'list-style') {
219
- style_dom_list_css
220
- }
221
- style(class: 'tab-style') {
222
- style_dom_tab_css
223
- }
224
- # style(class: 'tab-item-style') {
225
- # style_dom_tab_item_css
226
- # }
227
- # style(class: 'modal-style') {
228
- # style_dom_modal_css
229
- # }
230
- style(class: 'table-style') {
231
- style_dom_table_css
232
- }
233
- style(class: 'fill-layout-style') {
234
- Glimmer::SWT::FillLayoutProxy::STYLE
235
- }
236
- style(class: 'row-layout-style') {
237
- Glimmer::SWT::RowLayoutProxy::STYLE
238
- }
239
- style(class: 'grid-layout-style') {
240
- Glimmer::SWT::GridLayoutProxy::STYLE
241
- }
242
- style(class: 'checkbox-style') {
243
- Glimmer::SWT::CheckboxProxy::STYLE
244
- }
245
- style(class: 'radio-style') {
246
- Glimmer::SWT::RadioProxy::STYLE
247
- }
248
- style(class: 'scrolled-composite-style') {
249
- Glimmer::SWT::ScrolledCompositeProxy::STYLE
250
- }
251
- style(class: 'table-item-style') {
252
- Glimmer::SWT::TableItemProxy::STYLE
253
- }
254
- style(class: 'table-column-style') {
255
- Glimmer::SWT::TableColumnProxy::STYLE
256
- }
94
+ [LayoutProxy, WidgetProxy].map(&:descendants).reduce(:+).each do |style_class|
95
+ if style_class.constants.include?('STYLE')
96
+ style(class: "#{style_class.name.split(':').last.underscore.gsub('_', '-').sub(/-proxy$/, '')}-style") {
97
+ style_class::STYLE
98
+ }
99
+ end
100
+ end
101
+ ''
257
102
  }
258
103
  }.to_s
259
104
  end
@@ -261,7 +106,7 @@ module Glimmer
261
106
  def open
262
107
  # TODO consider the idea of delaying rendering till the open method
263
108
  # TODO make it start as hidden and show shell upon open
264
- Glimmer::SWT::DisplayProxy.instance.shells << self
109
+ # DisplayProxy.instance.shells << self
265
110
  end
266
111
  end
267
112
  end