glimmer-dsl-opal 0.7.3 → 0.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +40 -0
  3. data/README.md +847 -158
  4. data/VERSION +1 -1
  5. data/lib/glimmer-dsl-opal.rb +15 -3
  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 +25 -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-dsl-opal/samples/hello/hello_world.rb +3 -3
  21. data/lib/glimmer/config/opal_logger.rb +16 -0
  22. data/lib/glimmer/data_binding/observable_element.rb +1 -1
  23. data/lib/glimmer/dsl/opal/custom_widget_expression.rb +6 -0
  24. data/lib/glimmer/dsl/opal/dsl.rb +2 -0
  25. data/lib/glimmer/dsl/opal/menu_bar_expression.rb +54 -0
  26. data/lib/glimmer/dsl/opal/menu_expression.rb +61 -0
  27. data/lib/glimmer/dsl/opal/shell_expression.rb +0 -4
  28. data/lib/glimmer/dsl/opal/widget_expression.rb +3 -2
  29. data/lib/glimmer/dsl/opal/widget_listener_expression.rb +2 -2
  30. data/lib/glimmer/swt/custom/checkbox_group.rb +2 -2
  31. data/lib/glimmer/swt/custom/radio_group.rb +2 -2
  32. data/lib/glimmer/swt/date_time_proxy.rb +1 -1
  33. data/lib/glimmer/swt/display_proxy.rb +5 -4
  34. data/lib/glimmer/swt/event_listener_proxy.rb +14 -4
  35. data/lib/glimmer/swt/grid_layout_proxy.rb +21 -12
  36. data/lib/glimmer/swt/label_proxy.rb +17 -6
  37. data/lib/glimmer/swt/latest_message_box_proxy.rb +20 -0
  38. data/lib/glimmer/swt/latest_shell_proxy.rb +20 -0
  39. data/lib/glimmer/swt/layout_data_proxy.rb +6 -6
  40. data/lib/glimmer/swt/list_proxy.rb +15 -0
  41. data/lib/glimmer/swt/menu_item_proxy.rb +174 -0
  42. data/lib/glimmer/swt/menu_proxy.rb +273 -0
  43. data/lib/glimmer/swt/message_box_proxy.rb +57 -72
  44. data/lib/glimmer/swt/property_owner.rb +2 -0
  45. data/lib/glimmer/swt/radio_proxy.rb +1 -1
  46. data/lib/glimmer/swt/shell_proxy.rb +34 -189
  47. data/lib/glimmer/swt/tab_folder_proxy.rb +43 -0
  48. data/lib/glimmer/swt/table_column_proxy.rb +3 -2
  49. data/lib/glimmer/swt/table_editor.rb +1 -1
  50. data/lib/glimmer/swt/table_item_proxy.rb +7 -5
  51. data/lib/glimmer/swt/table_proxy.rb +10 -0
  52. data/lib/glimmer/swt/widget_proxy.rb +325 -31
  53. data/lib/glimmer/ui/custom_shell.rb +9 -7
  54. data/lib/glimmer/ui/custom_widget.rb +3 -3
  55. metadata +26 -6
@@ -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