glimmer-dsl-opal 0.7.4 → 0.7.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7eae61c6229ea57329b4ef092da209e5fb6df422c81250cb23e9b5a389a8e48
-  data.tar.gz: a88dc02904e056011e050f552735227a5dd9ebf2232875f934f39da7f0b117d6
+  metadata.gz: c18e541c8e9442edb881c4a2209b920ec5891c770901cd4474d93875d6a9d785
+  data.tar.gz: aadee7ddedd9a598e32784105d408b619c8503ef7aeb58d18253d1a505115e8a
 SHA512:
-  metadata.gz: b7d86f37ff864394d31403aa99c4af80248e389dbbe894cf5dd615c3bae6b0b8c21e6191e7d75bc3a753c8227db1cf730ccc14feaae42395c89a62af15ee573e
-  data.tar.gz: 5b0c73b30a581c883a45c832817eed87e9260cb236056718083a42d67f0c93af397d58e052e231503d59f2e8ada03287cde0b5c89bf35729be5889924b7ed2fb
+  metadata.gz: 3d0efad3abf372c53a9f214fe6e9ad2a9b4a4f18413acded585411742f1eb0fdd3dff3939bb2e64e905f55c59c5c0c686e7715fd2f01ed70c7f6a4005e67ac3a
+  data.tar.gz: 247c8c74ca777009bee85b89eb8ba137d5a389a55cb6f845f70d49b6b331184e625196c9dd1b07797730bc1c853ba87f7eae437356ef2e56fa26240854d5c706

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.7.5
+
+- Update login sample from Glimmer DSL for SWT's latest changes
+- Update contact_manager sample from Glimmer DSL for SWT's latest changes
+- Fixed issue regarding unavailable localStorage data when accessed by custom_widget_expression in hello_checkbox_group, hello_radio_group, and hello_custom_widget
+
 ## 0.7.4
 
 - Hello, Button! Sample

data/README.md

@@ -1,4 +1,4 @@
-# [<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.4 (Pure Ruby Web GUI)
+# [<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.5 (Pure Ruby Web GUI)
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-opal.svg)](http://badge.fury.io/rb/glimmer-dsl-opal)
 [![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)
 
@@ -52,15 +52,15 @@ Tic Tac Toe on the web (using the [glimmer-dsl-opal](https://rubygems.org/gems/g
 ![Glimmer DSL for Opal Tic Tac Toe In Progress](images/glimmer-dsl-opal-tic-tac-toe-in-progress.png)
 ![Glimmer DSL for Opal Tic Tac Toe Game Over](images/glimmer-dsl-opal-tic-tac-toe-game-over.png)
 
-Tic Tac Toe on the desktop with the same exact code (using the [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+Tic Tac Toe on the desktop with the same exact code (using the [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 
 ![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tic-tac-toe.png)
 ![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)
 ![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)
 
-NOTE: **Alpha Version** 0.7.4 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):
+NOTE: **Alpha Version** 0.7.5 only supports bare-minimum capabilities for the following [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally made for [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt)):
 
-Hello:
+[Hello samples](#hello-samples):
 
 - [Hello, World!](#hello-world)
 - [Hello, Combo!](#hello-combo)
@@ -80,7 +80,7 @@ Hello:
 - [Hello, Table!](#hello-table)
 - [Hello, Button!](#hello-button)
 
-Elaborate:
+[Elaborate samples](#elaborate-samples):
 
 - [Login](#login)
 - [Tic Tac Toe](#tic-tac-toe)
@@ -136,6 +136,13 @@ Event loop:
 - `display`
 - `async_exec`
 
+## Principles
+
+- **Live purely in Rubyland via the Glimmer GUI DSL**, completely oblivious to web browser technologies.
+- **Forget Routers!** Glimmer DSL for Opal supports auto-routing of custom shells (windows), which are opened as separate tabs in a web browser with automatically generated routes and bookmarkable URLs.
+- **HTML is strictly made for creating documents not interactive applications**. As such, software engineers can avoid it and focus on creating web applications more productively with Glimmer DSL for Opal in pure Ruby (just like they do in desktop development) while content creators and web designers can be the ones responsible for creating HTML documents for web content purposes only as HTML was originally intended. Web designers may also style Glimmer DSL for Opal applications since they auto-generate symantic markup. That way, Glimmer web GUI is used and embedded in web pages that provide users with applications while the rest of the web pages are maintained by non-engineers. This achieves a correct separation of responsibilities and better productivity and maintainability.
+- **Web servers are used just like servers in traditional client/server architecture**, meaning they simply provide RMI services to enable centralizing some of the application logic and data in the cloud to make available everywhere and enable data-sharing with others.
+
 ## Background
 
 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.
@@ -146,12 +153,6 @@ Last but not least, you would likely want some special branding on the web, so y
 
 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.
 
-## Principles
-
-- Live purely in Rubyland via the Glimmer GUI DSL, completely oblivious to web browser technologies.
-- Forget Routers! Glimmer DSL for Opal supports auto-routing of custom shells (windows), which are opened as separate tabs in a web browser with automatically generated routes and bookmarkable URLs.
-- HTML is strictly made for creating documents not interactive applications. As such, software engineers can avoid and focus on creating web applications with Glimmer DSL for Opal in pure Ruby while content creators and web designers are the ones responsible for creating HTML documents for content purposes only as HTML was originally intended. As such, Glimmer web GUI built by software engineers gets embedded in the body of a web page with content around it maintained by content creators and web designers. This achieves a correct separation of responsibilities and better maintainability.
-
 ## Pre-requisites
 
 - Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
@@ -186,7 +187,7 @@ Add the following to `Gemfile`:
 gem 'opal-rails', '~> 1.1.2'
 gem 'opal-async', '~> 1.2.0'
 gem 'opal-jquery', '~> 0.4.4'
-gem 'glimmer-dsl-opal', '~> 0.7.4'
+gem 'glimmer-dsl-opal', '~> 0.7.5'
 gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
 gem 'glimmer-dsl-css', '~> 1.1.0', require: false
 
@@ -255,11 +256,17 @@ end
 
 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)
 
-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:
+The [Hello samples](#hello-samples) demonstrate tiny building blocks for building full fledged applications. The [Elaborate samples](#elaborate-samples) demonstrate more advanced sample applications that assemble multiple building blocks.
+
+This external sample app contains all the samples mentioned below configured inside a Rails [Opal](https://opalrb.com/) app with all the pre-requisites ready to go for convenience:
+
+[https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails-app)
 
-[https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app](https://github.com/AndyObtiva/sample-glimmer-dsl-opal-rails5-app)
+You may visit a Heroku hosted version at:
 
-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).
+https://sample-glimmer-dsl-opal-app.herokuapp.com/
+
+Note: 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).
 
 ### Hello Samples
 
@@ -1970,7 +1977,6 @@ Or add the Glimmer code directly if you prefer to play around with it:
 ```ruby
 require "observer"
 
-#Presents login screen data
 class LoginPresenter
 
   attr_accessor :user_name
@@ -1986,10 +1992,13 @@ class LoginPresenter
   def status=(status)
     @status = status
 
-    #TODO add feature to bind dependent properties to master property (2017-07-25 nested data binding)
     notify_observers("logged_in")
     notify_observers("logged_out")
   end
+  
+  def valid?
+    !@user_name.to_s.strip.empty? && !@password.to_s.strip.empty?
+  end
 
   def logged_in
     self.status == "Logged In"
@@ -2000,6 +2009,7 @@ class LoginPresenter
   end
 
   def login
+    return unless valid?
     self.status = "Logged In"
   end
 
@@ -2011,7 +2021,6 @@ class LoginPresenter
 
 end
 
-#Login screen
 class Login
   include Glimmer
 
@@ -2023,15 +2032,21 @@ class Login
         grid_layout 2, false #two columns with differing widths
 
         label { text "Username:" } # goes in column 1
-        text {                     # goes in column 2
+        @user_name_text = text {   # goes in column 2
           text bind(presenter, :user_name)
           enabled bind(presenter, :logged_out)
+          on_key_pressed { |event|
+            @password_text.set_focus if event.keyCode == swt(:cr)
+          }
         }
 
         label { text "Password:" }
-        text(:password, :border) {
+        @password_text = text(:password, :border) {
           text bind(presenter, :password)
           enabled bind(presenter, :logged_out)
+          on_key_pressed { |event|
+            presenter.login if event.keyCode == swt(:cr)
+          }
         }
 
         label { text "Status:" }
@@ -2041,12 +2056,21 @@ class Login
           text "Login"
           enabled bind(presenter, :logged_out)
           on_widget_selected { presenter.login }
+          on_key_pressed { |event|
+            presenter.login if event.keyCode == swt(:cr)
+          }
         }
 
         button {
           text "Logout"
           enabled bind(presenter, :logged_in)
           on_widget_selected { presenter.logout }
+          on_key_pressed { |event|
+            if event.keyCode == swt(:cr)
+              presenter.logout
+              @user_name_text.set_focus
+            end
+          }
         }
       }
     }
@@ -2529,41 +2553,76 @@ class ContactManager
     shell {
       text "Contact Manager"
       composite {
-        composite {
-          grid_layout 2, false
-          label {text "First &Name: "}
+        group {
+          grid_layout(2, false) {
+            margin_width 0
+            margin_height 0
+          }
+          layout_data :fill, :center, true, false
+          text 'Lookup Contacts'
+          font height: 24
+          
+          label {
+            layout_data :right, :center, false, false
+            text "First &Name: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :first_name)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
-          label {text "&Last Name: "}
+          
+          label {
+            layout_data :right, :center, false, false
+            text "&Last Name: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :last_name)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
-          label {text "&Email: "}
+          
+          label {
+            layout_data :right, :center, false, false
+            text "&Email: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :email)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
+          
           composite {
-            grid_layout 2, false
+            row_layout {
+              margin_width 0
+              margin_height 0
+            }
+            layout_data(:right, :center, false, false) {
+              horizontal_span 2
+            }
+            
             button {
               text "&Find"
-              on_widget_selected {
-                @contact_manager_presenter.find
+              on_widget_selected { @contact_manager_presenter.find }
+              on_key_pressed {|key_event|
+                @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
               }
             }
+            
             button {
               text "&List All"
-              on_widget_selected {
-                @contact_manager_presenter.list
+              on_widget_selected { @contact_manager_presenter.list }
+              on_key_pressed {|key_event|
+                @contact_manager_presenter.list if key_event.keyCode == swt(:cr)
               }
             }
           }
@@ -2580,26 +2639,18 @@ class ContactManager
           table_column {
             text "First Name"
             width 80
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:first_name)
-            }
           }
           table_column {
             text "Last Name"
             width 80
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:last_name)
-            }
           }
           table_column {
             text "Email"
             width 200
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:email)
-            }
           }
-          items bind(@contact_manager_presenter, :results), column_properties(:first_name, :last_name, :email)
-          on_mouse_down { |event|
+          items bind(@contact_manager_presenter, :results),
+          column_properties(:first_name, :last_name, :email)
+          on_mouse_up { |event|
             table_proxy.edit_table_item(event.table_item, event.column_index)
           }
         }
@@ -2609,7 +2660,6 @@ class ContactManager
 end
 
 ContactManager.new.launch
-
 ```
 Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
 

data/VERSION

@@ -1 +1 @@
-0.7.4
+0.7.5

data/lib/glimmer-dsl-opal/samples/elaborate/contact_manager.rb

@@ -12,41 +12,76 @@ class ContactManager
     shell {
       text "Contact Manager"
       composite {
-        composite {
-          grid_layout 2, false
-          label {text "First &Name: "}
+        group {
+          grid_layout(2, false) {
+            margin_width 0
+            margin_height 0
+          }
+          layout_data :fill, :center, true, false
+          text 'Lookup Contacts'
+          font height: 24
+          
+          label {
+            layout_data :right, :center, false, false
+            text "First &Name: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :first_name)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
-          label {text "&Last Name: "}
+          
+          label {
+            layout_data :right, :center, false, false
+            text "&Last Name: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :last_name)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
-          label {text "&Email: "}
+          
+          label {
+            layout_data :right, :center, false, false
+            text "&Email: "
+            font height: 16
+          }
           text {
+            layout_data :fill, :center, true, false
             text bind(@contact_manager_presenter, :email)
             on_key_pressed {|key_event|
-              @contact_manager_presenter.find if key_event.keyCode == Glimmer::SWT::SWTProxy[:cr]
+              @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
             }
           }
+          
           composite {
-            grid_layout 2, false
+            row_layout {
+              margin_width 0
+              margin_height 0
+            }
+            layout_data(:right, :center, false, false) {
+              horizontal_span 2
+            }
+            
             button {
               text "&Find"
-              on_widget_selected {
-                @contact_manager_presenter.find
+              on_widget_selected { @contact_manager_presenter.find }
+              on_key_pressed {|key_event|
+                @contact_manager_presenter.find if key_event.keyCode == swt(:cr)
               }
             }
+            
             button {
               text "&List All"
-              on_widget_selected {
-                @contact_manager_presenter.list
+              on_widget_selected { @contact_manager_presenter.list }
+              on_key_pressed {|key_event|
+                @contact_manager_presenter.list if key_event.keyCode == swt(:cr)
               }
             }
           }
@@ -63,25 +98,17 @@ class ContactManager
           table_column {
             text "First Name"
             width 80
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:first_name)
-            }
           }
           table_column {
             text "Last Name"
             width 80
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:last_name)
-            }
           }
           table_column {
             text "Email"
             width 200
-            on_widget_selected {
-              @contact_manager_presenter.toggle_sort(:email)
-            }
           }
-          items bind(@contact_manager_presenter, :results), column_properties(:first_name, :last_name, :email)
+          items bind(@contact_manager_presenter, :results),
+          column_properties(:first_name, :last_name, :email)
           on_mouse_up { |event|
             table_proxy.edit_table_item(event.table_item, event.column_index)
           }

data/lib/glimmer-dsl-opal/samples/elaborate/login.rb

@@ -1,6 +1,5 @@
 require "observer"
 
-#Presents login screen data
 class LoginPresenter
 
   attr_accessor :user_name
@@ -16,10 +15,13 @@ class LoginPresenter
   def status=(status)
     @status = status
 
-    #TODO add feature to bind dependent properties to master property (2017-07-25 nested data binding)
     notify_observers("logged_in")
     notify_observers("logged_out")
   end
+  
+  def valid?
+    !@user_name.to_s.strip.empty? && !@password.to_s.strip.empty?
+  end
 
   def logged_in
     self.status == "Logged In"
@@ -30,6 +32,7 @@ class LoginPresenter
   end
 
   def login
+    return unless valid?
     self.status = "Logged In"
   end
 
@@ -41,7 +44,6 @@ class LoginPresenter
 
 end
 
-#Login screen
 class Login
   include Glimmer
 
@@ -53,15 +55,21 @@ class Login
         grid_layout 2, false #two columns with differing widths
 
         label { text "Username:" } # goes in column 1
-        text {                     # goes in column 2
+        @user_name_text = text {   # goes in column 2
           text bind(presenter, :user_name)
           enabled bind(presenter, :logged_out)
+          on_key_pressed { |event|
+            @password_text.set_focus if event.keyCode == swt(:cr)
+          }
         }
 
         label { text "Password:" }
-        text(:password, :border) {
+        @password_text = text(:password, :border) {
           text bind(presenter, :password)
           enabled bind(presenter, :logged_out)
+          on_key_pressed { |event|
+            presenter.login if event.keyCode == swt(:cr)
+          }
         }
 
         label { text "Status:" }
@@ -71,12 +79,21 @@ class Login
           text "Login"
           enabled bind(presenter, :logged_out)
           on_widget_selected { presenter.login }
+          on_key_pressed { |event|
+            presenter.login if event.keyCode == swt(:cr)
+          }
         }
 
         button {
           text "Logout"
           enabled bind(presenter, :logged_in)
           on_widget_selected { presenter.logout }
+          on_key_pressed { |event|
+            if event.keyCode == swt(:cr)
+              presenter.logout
+              @user_name_text.set_focus
+            end
+          }
         }
       }
     }

data/lib/glimmer/dsl/opal/custom_widget_expression.rb

@@ -43,7 +43,8 @@ module Glimmer
   
         def interpret(parent, keyword, *args, &block)
           begin
-            require `localStorage[#{keyword}]`
+            require_path = `localStorage[#{keyword}]`
+            require(require_path) if require_path
           rescue => e
             Glimmer::Config.logger.debug e.message
           end

data/lib/glimmer/swt/grid_layout_proxy.rb

@@ -17,6 +17,8 @@ module Glimmer
         super(parent, args)
         self.horizontal_spacing = 10
         self.vertical_spacing = 10
+        self.margin_width = 15
+        self.margin_height = 15
         self.num_columns = @args.first || 1
         reapply
       end
@@ -49,14 +51,18 @@ module Glimmer
       def margin_width=(pixels)
         @margin_width = pixels
         # Using padding for width since margin-right isn't getting respected with width 100%
-        @parent.dom_element.css('padding-left', @margin_width)
-        @parent.dom_element.css('padding-right', @margin_width)
+        effective_margin_width = @margin_width
+        effective_margin_width += 6 if @parent.is_a?(GroupProxy)
+        @parent.dom_element.css('padding-left', effective_margin_width)
+        @parent.dom_element.css('padding-right', effective_margin_width)
       end
       
       def margin_height=(pixels)
         @margin_height = pixels
-        @parent.dom_element.css('padding-top', @margin_height)
-        @parent.dom_element.css('padding-bottom', @margin_height)
+        effective_margin_height = @margin_height
+        effective_margin_height += 9 if @parent.is_a?(GroupProxy)
+        @parent.dom_element.css('padding-top', effective_margin_height)
+        @parent.dom_element.css('padding-bottom', effective_margin_height)
       end
             
       def reapply
@@ -70,6 +76,9 @@ module Glimmer
           layout_css.split(";").map(&:strip).map {|l| l.split(':').map(&:strip)}.each do |key, value|
             @parent.dom_element.css(key, value) unless key.nil?
           end
+          if @parent.is_a?(GroupProxy)
+            @parent.dom_element.find('legend').css('grid-column-start', "span #{@num_columns.to_i}")
+          end
         else
           layout_css.split(";").map(&:strip).map {|l| l.split(':').map(&:strip)}.each do |key, value|
             @parent.dom_element.css(key, 'initial') unless key.nil?

data/lib/glimmer/swt/layout_data_proxy.rb

@@ -45,9 +45,7 @@ module Glimmer
       def horizontal_alignment=(horizontal_alignment)
         @horizontal_alignment = horizontal_alignment
         return if @horizontal_alignment.nil?
-        if @horizontal_alignment == 'fill'
-          @parent.dom_element.css('width', '100%') if width_hint.nil?
-        else
+        if @horizontal_alignment != 'fill'
           @parent.dom_element.css('text-align', @horizontal_alignment.to_s)
           @parent.dom_element.css('place-self', @horizontal_alignment.to_s)
           @parent.dom_element.css('margin-left', 'auto') if ['right', 'center'].include?(@horizontal_alignment.to_s)
@@ -89,7 +87,6 @@ module Glimmer
       
       def grab_excess_horizontal_space=(grab_excess_horizontal_space)
         @grab_excess_horizontal_space = grab_excess_horizontal_space
-        @parent.dom_element.css('width', "100%") if @grab_excess_horizontal_space && @horizontal_alignment == 'fill' && width_hint.nil?
         @parent.dom_element.css('justify-self', @horizontal_alignment) if @grab_excess_horizontal_space && @horizontal_alignment != 'fill' && width_hint.nil?
         @parent.parent.dom_element.css('justify-content', "normal") if @grab_excess_horizontal_space
 #         reapply
@@ -98,11 +95,11 @@ module Glimmer
       def grab_excess_vertical_space=(grab_excess_vertical_space)
         @grab_excess_vertical_space = grab_excess_vertical_space
         @parent.dom_element.css('height', "100%") if @grab_excess_vertical_space && @vertical_alignment == 'fill' && height_hint.nil?
-        # TODO
 #         reapply
       end
 
       def reapply
+        # TODO remove reapply method
 #         @parent.css = <<~CSS
 #         CSS
       end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-opal
 version: !ruby/object:Gem::Version
-  version: 0.7.4
+  version: 0.7.5
 platform: ruby
 authors:
 - AndyMaleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-09 00:00:00.000000000 Z
+date: 2020-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -210,7 +210,8 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.4.4
-description: Glimmer DSL for Opal (Web GUI Adapter for Desktop Apps)
+description: Glimmer DSL for Opal (Pure Ruby Web GUI and Auto-Webifier of Desktop
+  Apps Running via Opal on Rails)
 email: andy.am@gmail.com
 executables: []
 extensions: []