glimmer-dsl-opal 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 97eeea7b6d32426394bf3cb88a2a3cf8d7e8559913bda30fd70e002ea99ec803
-  data.tar.gz: 3a23091312b5279776f5c287554de323007c72a5e4f754fe6d0716090777e8c8
+  metadata.gz: 5f0f0793d8e8128a47664c70eefee97fb797f61cbb8026937c3f88e00004a3b2
+  data.tar.gz: 7482911470d0ea4c87273622642b0d544f94bd0154913d2836e81e07e6d27da9
 SHA512:
-  metadata.gz: 1b6b902e2e66ef6c65ef4c007acaf812e3cfb10f20b5ef4e1d72e995dc252a809c892eb22d24b83e95d5587ab9b6b135a6e92e748869905abcf02915a224ab29
-  data.tar.gz: 1cbee2b67c0d8b3fcb18a95dbe0db665b8c179fb1561c3c0c1f404b4f66bc5e7a46e1c7553e62099f88b8ef3f68dca7512f20cb2be744c4f137beda6294bed77
+  metadata.gz: 0c6dd0b2de545158edfac2173cf7793415ad6046c650650b6b371a4e0704cd7de2cb78fc11ec05d653b266856c676350a224752417954a304ef9a2a95186439f
+  data.tar.gz: a3bb54ba72e3d55f9352e4ea660d14497212c058cd7f463464dacef05093d74dfabbcee2997d150c00b64923a1a71f592ae706e4155a57280a9f12dfb9fb8d9c

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.9.0
+
+- Support `menu_bar`
+- Hello, Menu Bar! Sample
+- Remove the need to call Document.ready? before opening a Glimmer shell
+- Support opening a message_box before creating a shell
+
 ## 0.8.0
 
 - Hello, Pop Up Context Menu! 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.8.0 (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.9.0 (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)
 
@@ -60,7 +60,7 @@ Tic Tac Toe on the desktop with the same exact code (using the [glimmer-dsl-swt]
 
 NOTE: Glimmer DSL for Opal is an alpha project. Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
 
-**Alpha Version** 0.8.0 only supports bare-minimum capabilities for the following [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written in [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt)):
+**Alpha Version** 0.9.0 only supports bare-minimum capabilities for the following [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written in [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt)):
 
 [Hello samples](#hello-samples):
 
@@ -83,6 +83,7 @@ NOTE: Glimmer DSL for Opal is an alpha project. Please help make better by contr
 - [Hello, Button!](#hello-button)
 - [Hello, Message Box!](#hello-message-box)
 - [Hello, Pop Up Context Menu!](#hello-pop-up-context-menu)
+- [Hello, Menu Bar!](#hello-menu-bar)
 
 [Elaborate samples](#elaborate-samples):
 
@@ -118,6 +119,7 @@ Widgets:
 - `label`
 - `list` (w/ optional `:multi` SWT style)
 - `menu`
+- `menu_bar`
 - `menu_item`
 - `message_box`
 - `radio`
@@ -162,7 +164,7 @@ Event loop:
 
 ## Principles
 
-- **Live purely in Rubyland via the Glimmer GUI DSL**, completely oblivious to inferior web browser technologies.
+- **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 instead (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. That way, Glimmer web GUI is used and embedded in web pages when providing users with applications while the rest of the web pages are maintained by non-engineers as pure HTML. This achieves a correct separation of responsibilities and better productivity and maintainability.
 - **Approximate styles by developers via the Glimmer GUI DSL. Perfect styles by designers via pure CSS**. Developers can simply build GUI with approximate styling similar to desktop GUI without worrying about pixel-perfect aethetics. Web designers can take styling further with pure CSS since every HTML element auto-generated by Glimmer DSL for Opal has a predictable ID and CSS class. This achieves a proper separation of responsibilities between developers and designers.
@@ -212,7 +214,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.8.0'
+gem 'glimmer-dsl-opal', '~> 0.9.0'
 gem 'glimmer-dsl-xml', '~> 1.1.0', require: false
 gem 'glimmer-dsl-css', '~> 1.1.0', require: false
 
@@ -600,44 +602,53 @@ require 'glimmer-dsl-opal/samples/hello/hello_list_multi_selection'
 Or add the Glimmer code directly if you prefer to play around with it:
 
 ```ruby
-class Person
-  attr_accessor :provinces, :provinces_options
-
-  def initialize
-    self.provinces_options=[
-      "",
-      "Quebec",
-      "Ontario",
-      "Manitoba",
-      "Saskatchewan",
-      "Alberta",
-      "British Columbia",
-      "Nova Skotia",
-      "Newfoundland"
-    ]
-    self.provinces = ["Quebec", "Manitoba", "Alberta"]
-  end
-
-  def reset_provinces
-    self.provinces = ["Quebec", "Manitoba", "Alberta"]
-  end
-end
-
 class HelloListMultiSelection
+  class Person
+    attr_accessor :provinces, :provinces_options
+  
+    def initialize
+      self.provinces_options = [
+        '',
+        'Alberta',
+        'British Columbia',
+        'Manitoba',
+        'New Brunswick',
+        'Newfoundland and Labrador',
+        'Northwest Territories',
+        'Nova Scotia',
+        'Nunavut',
+        'Ontario',
+        'Prince Edward Island',
+        'Quebec',
+        'Saskatchewan',
+        'Yukon'
+      ]
+      reset_provinces
+    end
+  
+    def reset_provinces
+      self.provinces = ['Quebec', 'Manitoba', 'Alberta']
+    end
+  end
+  
   include Glimmer
+  
   def launch
     person = Person.new
+    
     shell {
-      composite {
-        list(:multi) {
-          selection bind(person, :provinces)
-        }
-        button {
-          text "Reset"
-          on_widget_selected do
-            person.reset_provinces
-          end
-        }
+      grid_layout
+      
+      text 'Hello, List Multi Selection!'
+      
+      list(:multi) {
+        selection bind(person, :provinces)
+      }
+      
+      button {
+        text 'Reset Selections To Default Values'
+        
+        on_widget_selected { person.reset_provinces }
       }
     }.open
   end
@@ -2131,6 +2142,299 @@ You should see "Hello, Pop Up Context Menu!"
 ![Glimmer DSL for Opal Hello Pop Up Context Menu](images/glimmer-dsl-opal-hello-pop-up-context-menu.png)
 ![Glimmer DSL for Opal Hello Pop Up Context Menu Popped Up](images/glimmer-dsl-opal-hello-pop-up-context-menu-popped-up.png)
 
+#### Hello, Menu Bar!
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/hello/hello_menu_bar'
+```
+
+Or add the Glimmer code directly if you prefer to play around with it:
+
+```ruby
+include Glimmer
+
+COLORS = [:white, :red, :yellow, :green, :blue, :magenta, :gray, :black]
+
+shell {
+  grid_layout {
+    margin_width 0
+    margin_height 0
+  }
+  
+  text 'Hello, Menu Bar!'
+  
+  @label = label(:center) {
+    font height: 50
+    text 'Check Out The Menu Bar Above!'
+  }
+  
+  menu_bar {
+    menu {
+      text '&File'
+      menu_item {
+        text '&New'
+        accelerator :command, :N
+
+        on_widget_selected {
+          message_box {
+            text 'New'
+            message 'New file created.'
+          }.open
+        }
+      }
+      menu_item {
+        text '&Open...'
+        accelerator :command, :O
+
+        on_widget_selected {
+          message_box {
+            text 'Open'
+            message 'Opening File...'
+          }.open
+        }
+      }
+      menu {
+        text 'Open &Recent'
+        menu_item {
+          text 'File 1'
+          on_widget_selected {
+            message_box {
+              text 'File 1'
+              message 'File 1 Contents'
+            }.open
+          }
+        }
+        menu_item {
+          text 'File 2'
+          on_widget_selected {
+            message_box {
+              text 'File 2'
+              message 'File 2 Contents'
+            }.open
+          }
+        }
+      }
+      menu_item(:separator)
+      menu_item {
+        text 'E&xit'
+
+        on_widget_selected {
+          exit(0)
+        }
+      }
+    }
+    menu {
+      text '&Edit'
+      menu_item {
+        text 'Cut'
+        accelerator :command, :X
+      }
+      menu_item {
+        text 'Copy'
+        accelerator :command, :C
+      }
+      menu_item {
+        text 'Paste'
+        accelerator :command, :V
+      }
+    }
+    menu {
+      text '&Options'
+
+      menu_item(:radio) {
+        text '&Enabled'
+
+        on_widget_selected {
+          @select_one_menu.enabled = true
+          @select_multiple_menu.enabled = true
+        }
+      }
+      @select_one_menu = menu {
+        text '&Select One'
+        enabled false
+
+        menu_item(:radio) {
+          text 'Option 1'
+        }
+        menu_item(:radio) {
+          text 'Option 2'
+        }
+        menu_item(:radio) {
+          text 'Option 3'
+        }
+      }
+      @select_multiple_menu = menu {
+        text '&Select Multiple'
+        enabled false
+
+        menu_item(:check) {
+          text 'Option 4'
+        }
+        menu_item(:check) {
+          text 'Option 5'
+        }
+        menu_item(:check) {
+          text 'Option 6'
+        }
+      }
+    }
+    menu {
+      text '&Format'
+      menu {
+        text '&Background Color'
+        COLORS.each { |color_style|
+          menu_item(:radio) {
+            text color_style.to_s.split('_').map(&:capitalize).join(' ')
+
+            on_widget_selected {
+              @label.background = color_style
+            }
+          }
+        }
+      }
+      menu {
+        text 'Foreground &Color'
+        COLORS.each { |color_style|
+          menu_item(:radio) {
+            text color_style.to_s.split('_').map(&:capitalize).join(' ')
+
+            on_widget_selected {
+              @label.foreground = color_style
+            }
+          }
+        }
+      }
+    }
+    menu {
+      text '&View'
+      menu_item(:radio) {
+        text 'Small'
+
+        on_widget_selected {
+          @label.font = {height: 25}
+          @label.parent.pack
+        }
+      }
+      menu_item(:radio) {
+        text 'Medium'
+        selection true
+
+        on_widget_selected {
+          @label.font = {height: 50}
+          @label.parent.pack
+        }
+      }
+      menu_item(:radio) {
+        text 'Large'
+
+        on_widget_selected {
+          @label.font = {height: 75}
+          @label.parent.pack
+        }
+      }
+    }
+    menu {
+      text '&Help'
+      menu_item {
+        text '&Manual'
+        accelerator :command, :shift, :M
+
+        on_widget_selected {
+          message_box {
+            text 'Manual'
+            message 'Manual Contents'
+          }.open
+        }
+      }
+      menu_item {
+        text '&Tutorial'
+        accelerator :command, :shift, :T
+
+        on_widget_selected {
+          message_box {
+            text 'Tutorial'
+            message 'Tutorial Contents'
+          }.open
+        }
+      }
+      menu_item(:separator)
+      menu_item {
+        text '&Report an Issue...'
+
+        on_widget_selected {
+          message_box {
+            text 'Report an Issue'
+            message 'Reporting an issue...'
+          }.open
+        }
+      }
+    }
+  }
+}.open
+```
+
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Hello Menu Bar](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar.png)
+
+![Hello Menu Bar File Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-file-menu.png)
+
+![Hello Menu Bar Edit Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-edit-menu.png)
+
+![Hello Menu Bar Options Menu Disabled](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-disabled.png)
+
+![Hello Menu Bar Options Menu Select One](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-select-one.png)
+
+![Hello Menu Bar Options Menu Select Multiple](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-options-menu-select-multiple.png)
+
+![Hello Menu Bar Format Menu Background Color](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-format-menu-background-color.png)
+
+![Hello Menu Bar Format Menu Foreground Color](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-format-menu-foreground-color.png)
+
+![Hello Menu Bar View Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-menu.png)
+
+![Hello Menu Bar View Small](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-small.png)
+
+![Hello Menu Bar View Large](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-view-large.png)
+
+![Hello Menu Bar Help Menu](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-hello-menu-bar-help-menu.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Hello, Menu Bar!"
+
+![Hello Menu Bar](images/glimmer-dsl-opal-hello-menu-bar.png)
+
+![Hello Menu Bar File Menu](images/glimmer-dsl-opal-hello-menu-bar-file-menu.png)
+
+![Hello Menu Bar Edit Menu](images/glimmer-dsl-opal-hello-menu-bar-edit-menu.png)
+
+![Hello Menu Bar Options Menu Disabled](images/glimmer-dsl-opal-hello-menu-bar-options-menu-disabled.png)
+
+![Hello Menu Bar Options Menu Select One](images/glimmer-dsl-opal-hello-menu-bar-options-menu-select-one.png)
+
+![Hello Menu Bar Options Menu Select Multiple](images/glimmer-dsl-opal-hello-menu-bar-options-menu-select-multiple.png)
+
+![Hello Menu Bar Format Menu Background Color](images/glimmer-dsl-opal-hello-menu-bar-format-menu-background-color.png)
+
+![Hello Menu Bar Format Menu Foreground Color](images/glimmer-dsl-opal-hello-menu-bar-format-menu-foreground-color.png)
+
+![Hello Menu Bar View Menu](images/glimmer-dsl-opal-hello-menu-bar-view-menu.png)
+
+![Hello Menu Bar View Small](images/glimmer-dsl-opal-hello-menu-bar-view-small.png)
+
+![Hello Menu Bar View Large](images/glimmer-dsl-opal-hello-menu-bar-view-large.png)
+
+![Hello Menu Bar Help Menu](images/glimmer-dsl-opal-hello-menu-bar-help-menu.png)
 
 ### Elaborate Samples
 

data/VERSION

@@ -1 +1 @@
-0.8.0
+0.9.0

data/lib/glimmer-dsl-opal.rb

@@ -63,8 +63,9 @@ if RUBY_ENGINE == 'opal'
   require 'glimmer'
   require 'glimmer-dsl-opal/ext/exception'
   require 'glimmer-dsl-opal/ext/date'
+  require 'glimmer-dsl-opal/ext/glimmer/dsl/engine'
   require 'uri'
-
+  
   # Spiking async logging
 #   logger = Glimmer::Config.logger
 #   original_add_method = logger.class.instance_method(:add)

data/lib/glimmer-dsl-opal/ext/glimmer/dsl/engine.rb

@@ -0,0 +1,30 @@
+require 'glimmer/swt/latest_message_box_proxy'
+
+module Glimmer
+  module DSL
+    class Engine
+      class << self
+        def interpret_expression(expression, keyword, *args, &block)
+          work = lambda do
+            expression.interpret(parent, keyword, *args, &block).tap do |ui_object|
+              add_content(ui_object, expression, &block)
+              dsl_stack.pop
+            end
+          end
+          if keyword == 'shell'
+            Document.ready?(&work)
+          elsif keyword == 'message_box'
+            if Glimmer::SWT::DisplayProxy.instance.shells.empty?
+              Document.ready?(&work)
+              Glimmer::SWT::LatestMessageBoxProxy.new
+            else
+              work.call
+            end
+          else
+            work.call
+          end
+        end
+      end
+    end
+  end
+end

data/lib/glimmer-dsl-opal/samples/hello/hello_menu_bar.rb

@@ -0,0 +1,241 @@
+# Copyright (c) 2007-2020 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+include Glimmer
+
+COLORS = [:white, :red, :yellow, :green, :blue, :magenta, :gray, :black]
+
+shell {
+  grid_layout {
+    margin_width 0
+    margin_height 0
+  }
+  
+  text 'Hello, Menu Bar!'
+  
+  @label = label(:center) {
+    font height: 50
+    text 'Check Out The Menu Bar Above!'
+  }
+  
+  menu_bar {
+    menu {
+      text '&File'
+      menu_item {
+        text '&New'
+        accelerator :command, :N
+
+        on_widget_selected {
+          message_box {
+            text 'New'
+            message 'New file created.'
+          }.open
+        }
+      }
+      menu_item {
+        text '&Open...'
+        accelerator :command, :O
+
+        on_widget_selected {
+          message_box {
+            text 'Open'
+            message 'Opening File...'
+          }.open
+        }
+      }
+      menu {
+        text 'Open &Recent'
+        menu_item {
+          text 'File 1'
+          on_widget_selected {
+            message_box {
+              text 'File 1'
+              message 'File 1 Contents'
+            }.open
+          }
+        }
+        menu_item {
+          text 'File 2'
+          on_widget_selected {
+            message_box {
+              text 'File 2'
+              message 'File 2 Contents'
+            }.open
+          }
+        }
+      }
+      menu_item(:separator)
+      menu_item {
+        text 'E&xit'
+
+        on_widget_selected {
+          exit(0)
+        }
+      }
+    }
+    menu {
+      text '&Edit'
+      menu_item {
+        text 'Cut'
+        accelerator :command, :X
+      }
+      menu_item {
+        text 'Copy'
+        accelerator :command, :C
+      }
+      menu_item {
+        text 'Paste'
+        accelerator :command, :V
+      }
+    }
+    menu {
+      text '&Options'
+
+      menu_item(:radio) {
+        text '&Enabled'
+
+        on_widget_selected {
+          @select_one_menu.enabled = true
+          @select_multiple_menu.enabled = true
+        }
+      }
+      @select_one_menu = menu {
+        text '&Select One'
+        enabled false
+
+        menu_item(:radio) {
+          text 'Option 1'
+        }
+        menu_item(:radio) {
+          text 'Option 2'
+        }
+        menu_item(:radio) {
+          text 'Option 3'
+        }
+      }
+      @select_multiple_menu = menu {
+        text '&Select Multiple'
+        enabled false
+
+        menu_item(:check) {
+          text 'Option 4'
+        }
+        menu_item(:check) {
+          text 'Option 5'
+        }
+        menu_item(:check) {
+          text 'Option 6'
+        }
+      }
+    }
+    menu {
+      text '&Format'
+      menu {
+        text '&Background Color'
+        COLORS.each { |color_style|
+          menu_item(:radio) {
+            text color_style.to_s.split('_').map(&:capitalize).join(' ')
+
+            on_widget_selected {
+              @label.background = color_style
+            }
+          }
+        }
+      }
+      menu {
+        text 'Foreground &Color'
+        COLORS.each { |color_style|
+          menu_item(:radio) {
+            text color_style.to_s.split('_').map(&:capitalize).join(' ')
+
+            on_widget_selected {
+              @label.foreground = color_style
+            }
+          }
+        }
+      }
+    }
+    menu {
+      text '&View'
+      menu_item(:radio) {
+        text 'Small'
+
+        on_widget_selected {
+          @label.font = {height: 25}
+          @label.parent.pack
+        }
+      }
+      menu_item(:radio) {
+        text 'Medium'
+        selection true
+
+        on_widget_selected {
+          @label.font = {height: 50}
+          @label.parent.pack
+        }
+      }
+      menu_item(:radio) {
+        text 'Large'
+
+        on_widget_selected {
+          @label.font = {height: 75}
+          @label.parent.pack
+        }
+      }
+    }
+    menu {
+      text '&Help'
+      menu_item {
+        text '&Manual'
+        accelerator :command, :shift, :M
+
+        on_widget_selected {
+          message_box {
+            text 'Manual'
+            message 'Manual Contents'
+          }.open
+        }
+      }
+      menu_item {
+        text '&Tutorial'
+        accelerator :command, :shift, :T
+
+        on_widget_selected {
+          message_box {
+            text 'Tutorial'
+            message 'Tutorial Contents'
+          }.open
+        }
+      }
+      menu_item(:separator)
+      menu_item {
+        text '&Report an Issue...'
+
+        on_widget_selected {
+          message_box {
+            text 'Report an Issue'
+            message 'Reporting an issue...'
+          }.open
+        }
+      }
+    }
+  }
+}.open

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

@@ -27,10 +27,6 @@ module Glimmer
           end
         end
         
-        def add_content(parent, &content)
-          content.call(parent) if parent.is_a?(Glimmer::SWT::ShellProxy)
-        end
-
         def add_content(parent, &block)
           super(parent, &block)
           parent.post_add_content

data/lib/glimmer/swt/display_proxy.rb

@@ -28,6 +28,10 @@ module Glimmer
         @shells ||= []
       end
       
+      def message_boxes
+        @message_boxes ||= []
+      end
+      
       def render
         # No rendering as body is rendered as part of ShellProxy.. this class only serves as an SWT Display utility
       end
@@ -74,10 +78,6 @@ module Glimmer
           ]
         }
       end
-      
-      def shells
-        @shells ||= []
-      end
     end
   end
 end

data/lib/glimmer/swt/latest_message_box_proxy.rb

@@ -0,0 +1,20 @@
+module Glimmer
+  module SWT
+    class LatestMessageBoxProxy #< MessageBoxProxy
+      # TODO consider overriding all methods from MessageBoxProxy and proxying to them
+      
+      def initialize(parent, args, block)
+        # No Op
+      end
+      
+      def open
+        Document.ready? do
+          DisplayProxy.instance.message_boxes.last&.open
+        end
+      end
+
+    end
+    
+  end
+  
+end

data/lib/glimmer/swt/list_proxy.rb

@@ -13,24 +13,6 @@ module Glimmer
           padding-left: 10px;
           padding-right: 10px;
         }
-        li.menu-item {
-          padding-left: initial;
-          padding-right: initial;
-        }
-        .ui-menu {
-          /* TODO consider auto-sizing in the future */
-          font-size: initial;
-          width: 150px;
-          border-radius: 5px;
-        }
-        .ui-menu-item:first-child > .ui-menu-item-wrapper {
-          border-top-left-radius: 5px;
-          border-top-right-radius: 5px;
-        }
-        .ui-menu-item:last-child > .ui-menu-item-wrapper {
-          border-bottom-left-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
         li.empty-list-item {
           color: transparent;
         }

data/lib/glimmer/swt/menu_item_proxy.rb

@@ -30,20 +30,98 @@ module Glimmer
     # Follows the Proxy Design Pattern since it's a proxy for an HTML based menu
     # Follows the Adapter Design Pattern since it's adapting a Glimmer DSL for SWT widget
     class MenuItemProxy < WidgetProxy
+      STYLE = <<~CSS
+        .menu-item.disabled {
+          background-color: lightgrey;
+          color: grey;
+        }
+        .menu-item.disabled .menu, .menu-item.disabled .menu * {
+          display: none;
+          opacity: 0;
+        }
+      CSS
+      
+      attr_accessor :accelerator # TODO consider doing something with it
+    
+      def initialize(parent, args)
+        args.push(:push) if args.empty?
+        super(parent, args)
+        # TODO do not add the following event till post_add_content to avoid adding if already one on_widget_selected event existed
+        on_widget_selected {
+          # No Op, just trigger selection
+        }
+      end
+      
       def post_initialize_child(child)
         @children << child
       end
       
+      def cascade?
+        args.include?(:cascade)
+      end
+      
+      def push?
+        args.include?(:push)
+      end
+      
+      def radio?
+        args.include?(:radio)
+      end
+      
+      def check?
+        args.include?(:check)
+      end
+      
+      def separator?
+        args.include?(:separator)
+      end
+      
       def text
         @text
       end
       
       def text=(value)
         @text = value
-        dom_element.html(html {div {value}}.to_s)
+        dom_element.find('.menu-item-text').html(@text)
         @text
       end
       
+      def selection
+        @selection
+      end
+      
+      def selection=(value)
+        @selection = value
+        icon_suffix = check? ? 'check' : 'bullet'
+        dom_element.find('.menu-item-selection').toggle_class("ui-icon ui-icon-#{icon_suffix}", @selection)
+        @selection
+      end
+      
+      def toggle_selection!
+        self.selection = !selection
+      end
+      
+      def enabled=(value)
+        @enabled = value
+        dom_element.toggle_class('disabled', !@enabled)
+        @enabled
+      end
+      
+      def div_content
+        div_attributes = {}
+        icon_suffix = check? ? 'check' : 'bullet'
+        div(div_attributes) {
+          unless separator? # empty content automatically gets a separator style in jQuery-UI
+            span(class: "menu-item-selection #{"ui-icon ui-icon-#{icon_suffix}" if selection}") {}
+            span(class: 'ui-menu-icon ui-icon ui-icon-caret-1-e') {} if cascade? && !parent.bar?
+            span(class: 'menu-item-text') {
+              @text
+            }
+            ''
+          end
+        }
+      end
+      
       def root_menu
         the_menu = parent
         the_menu = the_menu.parent_menu until the_menu.root_menu?
@@ -60,9 +138,19 @@ module Glimmer
             event: 'mouseup',
             event_handler: -> (event_listener) {
               -> (event) {
-                remove_event_listener_proxies
-                root_menu.close
-                event_listener.call(event)
+                if enabled && (push? || radio? || check?)
+                  if check?
+                    self.toggle_selection!
+                  elsif radio? && !selection
+                    parent.children.detect(&:selection)&.selection = false
+                    self.selection = true
+                  end
+                  if !root_menu.bar?
+                    remove_event_listener_proxies
+                    root_menu.close
+                  end
+                  event_listener.call(event)
+                end
               }
             },
           },
@@ -74,11 +162,10 @@ module Glimmer
       end
       
       def dom
+        # TODO support rendering image
         @dom ||= html {
-          li(id: id, class: name) {
-            div {
-              @text
-            }
+          li(id: id, class: "#{name} #{'disabled' unless enabled}") {
+            div_content
           }
         }.to_s
       end

data/lib/glimmer/swt/menu_proxy.rb

@@ -45,33 +45,85 @@ module Glimmer
     #
     # Follows the Proxy Design Pattern
     class MenuProxy < WidgetProxy
+      STYLE = <<~CSS
+        .menu.menu-bar {
+          position: absolute;
+          top: -30px;
+          border-radius: 0;
+          width: 100%;
+        }
+        .menu.menu-bar .menu {
+          border-radius: 0;
+        }
+        .menu-bar .menu-item {
+          width: 180px;
+        }
+        .menu-bar > .menu-item {
+          display: inline-block;
+          width: 150px;
+        }
+        li.menu-item {
+          padding-left: initial;
+          padding-right: initial;
+        }
+        .menu {
+          /* TODO consider auto-sizing in the future */
+          font-size: initial;
+          border-radius: 5px;
+        }
+        .menu:not(.menu-bar) {
+          width: 150px;
+        }
+        .menu-bar .ui-menu:not(.menu-bar) {
+          width: 180px;
+        }
+        .ui-menu-item:first-child > .ui-menu-item-wrapper {
+          border-top-left-radius: 5px;
+          border-top-right-radius: 5px;
+        }
+        .ui-menu-item:last-child > .ui-menu-item-wrapper {
+          border-bottom-left-radius: 5px;
+          border-bottom-right-radius: 5px;
+        }
+        .menu-bar .ui-menu-item:first-child > .ui-menu-item-wrapper {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+        .menu-bar .ui-menu-item:last-child > .ui-menu-item-wrapper {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        
+      CSS
+      
       attr_reader :menu_item_proxy, :menu_parent
 
       def initialize(parent, args)
-        # TODO handle :bar swt style
-        # TODO handle :pop_up swt style
-        # TODO handle :cascade swt style
+        # TODO refactor/simplify code below
         @children = []
         index = args.delete(args.last) if args.last.is_a?(Numeric)
-        styles = args.map(&:to_sym)
-        if !styles.include?(:bar) && !parent.is_a?(MenuProxy)
-          styles = styles.unshift(:pop_up)
+        args = args.map {|arg| arg.is_a?(String) ? arg.to_sym : arg}
+        if parent.is_a?(ShellProxy)
+          args = args.unshift(:bar)
+        elsif parent.is_a?(MenuProxy)
+          args = args.unshift(:drop_down)
+        else
+          args = args.unshift(:pop_up)
         end
-
         if parent.is_a?(MenuProxy)
           @menu_item_proxy = SWT::WidgetProxy.for('menu_item', parent, [:cascade] + [index].compact)
-          super(@menu_item_proxy)
+          super(@menu_item_proxy, args)
           @menu_item_proxy.menu = self
         elsif parent.is_a?(ShellProxy)
-          super(parent, style('menu', styles))
-        else
-          super(parent)
+          super(parent, args)
+        else # widget pop up
+          super(parent, args)
         end
 
-        if styles.include?(:bar)
+        if bar?
           # Assumes a parent shell
           parent.menu_bar = self
-        elsif styles.include?(:pop_up)
+        elsif pop_up?
           parent.menu = self
         end
         # TODO IMPLEMENT PROPERLY
@@ -80,6 +132,18 @@ module Glimmer
 #         }
       end
       
+      def bar?
+        args.include?(:bar)
+      end
+      
+      def pop_up?
+        args.include?(:pop_up)
+      end
+      
+      def drop_down?
+        args.include?(:drop_down)
+      end
+      
       def text
         @menu_item_proxy&.text
       end
@@ -88,6 +152,20 @@ module Glimmer
         @menu_item_proxy&.text = text_value
       end
       
+      def enabled
+        if drop_down?
+          menu_item_proxy.enabled
+        else
+          true
+        end
+      end
+      
+      def enabled=(value)
+        if drop_down?
+          menu_item_proxy.enabled = value
+        end
+      end
+      
       def can_handle_observation_request?(observation_request, super_only: false)
         super_result = super(observation_request)
         if observation_request.start_with?('on_') && !super_result && !super_only
@@ -115,21 +193,42 @@ module Glimmer
         end
       end
       
-      def render
+      def post_add_content
+        if bar?
+          # delay this till all children rendered (perhaps post_add_content block)
+          parent_dom_element.css('position', 'relative')
+          parent_dom_element.css('margin-top', '30px')
+          redraw
+          `$(#{path}).menu({
+            position: { my: "top", at: "bottom" },
+            icons: { submenu: "ui-icon-blank" }
+          });`
+          the_element = dom_element
+          the_element.on('mouseover') { |event|
+            if event.page_x.between?(the_element.offset.left, the_element.offset.left + the_element.width) and
+               event.page_y.between?(the_element.offset.top, the_element.offset.top + the_element.height)
+              `$(#{path}).menu('option', 'position', { my: 'left top', at: 'left bottom' });`
+            end
+          }
+          the_element.on('menublur') {
+            `$(#{path}).menu('option', 'position', { my: 'left top', at: 'right top' });`
+          }
+          minimum_width = children.to_a.map(&:dom_element).map(&:width).reduce(:+)
+          the_element.css('min-width', minimum_width)
+        end
+      end
+      
+      def render(custom_parent_dom_element: nil, brand_new: false)
         # TODO attach to top nav bar if parent is shell
         # TODO attach listener to parent to display on right click
-        if parent.is_a?(MenuProxy) || parent.is_a?(MenuItemProxy) || parent.menu_requested?
-          super
-          if root_menu?
-            id_css = "##{id}"
-            `$(#{id_css}).menu();`
+        if parent.is_a?(MenuProxy) || parent.is_a?(MenuItemProxy) || parent.menu_requested? || parent.is_a?(ShellProxy)
+          super(custom_parent_dom_element: custom_parent_dom_element, brand_new: brand_new)
+          if root_menu? && !bar?
+            `$(#{path}).menu();`
             @close_event_handler = lambda do |event|
-              if event.target.parents('.ui-menu').empty?
-                close
-              end
+              close if event.target.parents('.ui-menu').empty?
             end
             Element['body'].on('click', &@close_event_handler)
-            @menu_initialized = true
           end
         end
       end
@@ -143,6 +242,12 @@ module Glimmer
         !parent.is_a?(MenuProxy) && !parent.is_a?(MenuItemProxy)
       end
       
+      def root_menu
+        the_menu = self
+        the_menu = the_menu.parent_menu until the_menu.root_menu?
+        the_menu
+      end
+      
       def parent_menu
         parent.parent unless root_menu?
       end
@@ -152,11 +257,17 @@ module Glimmer
       end
       
       def dom
+        css_class = name
+        css_class += ' menu-bar' if bar?
+        css_class += ' menu-drop-down' if drop_down?
+        css_class += ' menu-pop-up' if pop_up?
         @dom ||= html {
-          ul(id: id, class: name) {
+          ul(id: id, class: css_class) {
           }
         }.to_s
       end
     end
+    
+    MenuBarProxy = MenuProxy
   end
 end

data/lib/glimmer/swt/message_box_proxy.rb

@@ -51,16 +51,15 @@ module Glimmer
       
       def initialize(parent, args, block)
         i = 0
-        @parent = parent || DisplayProxy.instance.shells.last
+        @parent = parent || DisplayProxy.instance.shells.last || ShellProxy.new([])
         @args = args
         @block = block
         @children = Set.new
         @enabled = true
-        content do
-          on_widget_selected {
-            hide
-          }
-        end
+        on_widget_selected {
+          hide
+        }
+        DisplayProxy.instance.message_boxes << self
       end
       
       def text=(txt)

data/lib/glimmer/swt/shell_proxy.rb

@@ -28,7 +28,7 @@ module Glimmer
     
       # TODO consider renaming to ShellProxy to match SWT API
       attr_reader :minimum_size
-      attr_accessor :menu_bar # TODO implement menu bar rendering
+      attr_accessor :menu_bar
     
       WIDTH_MIN = 130
       HEIGHT_MIN = 0
@@ -36,7 +36,7 @@ module Glimmer
       def initialize(args)
         @args = args
         @children = []
-#         Document.ready? do end # TODO consider embedding this jQuery call in so outside consumers don't have to use it
+        # TODO consider the implication of emptying the body
         Document.find('body').empty unless ENV['RUBY_ENV'] == 'test'
         render
         @layout = FillLayoutProxy.new(self, [])
@@ -106,7 +106,7 @@ module Glimmer
       def open
         # TODO consider the idea of delaying rendering till the open method
         # TODO make it start as hidden and show shell upon open
-        Glimmer::SWT::DisplayProxy.instance.shells << self
+#         DisplayProxy.instance.shells << self
       end
     end
   end

data/lib/glimmer/swt/widget_proxy.rb

@@ -191,6 +191,14 @@ module Glimmer
       def element
         'div'
       end
+      
+      def pack(*args)
+        # No Op (just a shim) TODO consider if it should be implemented
+      end
+
+      def layout(*args)
+        # No Op (just a shim) TODO consider if it should be implemented
+      end
 
       def enabled=(value)
         @enabled = value
@@ -198,11 +206,13 @@ module Glimmer
       end
       
       def foreground=(value)
+        value = ColorProxy.new(value) if value.is_a?(String)
         @foreground = value
         dom_element.css('color', foreground.to_css) unless foreground.nil?
       end
       
       def background=(value)
+        value = ColorProxy.new(value) if value.is_a?(String)
         @background = value
         dom_element.css('background-color', background.to_css) unless background.nil?
       end
@@ -239,9 +249,10 @@ module Glimmer
         brand_new = @dom.nil? || old_element.empty? || brand_new
         build_dom(layout: !custom_parent_dom_element) # TODO handle custom parent layout by passing parent instead of parent dom element
         if brand_new
-          the_parent_dom_element.append(@dom)
+          the_parent_dom_element.append(@dom) # TODO make a method attach to allow subclasses to override if needed
         else
           old_element.replace_with(@dom)
+          old_element.replace_with(@dom)
         end
         observation_requests&.each do |keyword, event_listener_set|
           event_listener_set.each do |event_listener|

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-opal
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - AndyMaleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-17 00:00:00.000000000 Z
+date: 2020-12-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -249,6 +249,7 @@ files:
 - lib/glimmer-dsl-opal/ext/date.rb
 - lib/glimmer-dsl-opal/ext/exception.rb
 - lib/glimmer-dsl-opal/ext/file.rb
+- lib/glimmer-dsl-opal/ext/glimmer/dsl/engine.rb
 - lib/glimmer-dsl-opal/ext/struct.rb
 - lib/glimmer-dsl-opal/samples/elaborate/contact_manager.rb
 - lib/glimmer-dsl-opal/samples/elaborate/contact_manager/contact.rb
@@ -271,6 +272,7 @@ files:
 - lib/glimmer-dsl-opal/samples/hello/hello_group.rb
 - lib/glimmer-dsl-opal/samples/hello/hello_list_multi_selection.rb
 - lib/glimmer-dsl-opal/samples/hello/hello_list_single_selection.rb
+- lib/glimmer-dsl-opal/samples/hello/hello_menu_bar.rb
 - lib/glimmer-dsl-opal/samples/hello/hello_message_box.rb
 - lib/glimmer-dsl-opal/samples/hello/hello_pop_up_context_menu.rb
 - lib/glimmer-dsl-opal/samples/hello/hello_radio.rb
@@ -352,6 +354,7 @@ files:
 - lib/glimmer/swt/grid_layout_proxy.rb
 - lib/glimmer/swt/group_proxy.rb
 - lib/glimmer/swt/label_proxy.rb
+- lib/glimmer/swt/latest_message_box_proxy.rb
 - lib/glimmer/swt/layout_data_proxy.rb
 - lib/glimmer/swt/layout_proxy.rb
 - lib/glimmer/swt/list_proxy.rb