glimmer-dsl-opal 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cbf51689c9728f9af6a7670f703584c79def82be3f74085556f91cbc9f02cd51
-  data.tar.gz: e73b3c81aa113ca61e080a5c0fce7299c0812c04883aaf8864bdec5dc80fad00
+  metadata.gz: b1e27d44e69248f9febb6c2b8ce6d58d5f6a876d451b09d293769e3296e8c1ff
+  data.tar.gz: 30f77e89b509c325d8e609a2b6cda35425acb2b3e6f48ed8113c724208a1c0e9
 SHA512:
-  metadata.gz: 98c27b51a8de0e218ed4e888660fb6dbf110deda9b1444b7fd75dc72d5477a5eaa277d2a64d92f223bcf0d3b8c398bf2da369a26e000c2544c34952c9fd7f8ad
-  data.tar.gz: 05725471322ba4a5e55115360fa2a970e69c6f076c36480b3354c86968ac796e63c0e0c1250ca2639f100a329363c51fc7a0254b66a918aa7ed4130f538c2ce4
+  metadata.gz: 6ee6ca73fef3795d270cf4980fd4392beb39bc2a4f240f5a0fe10014772206aa5da1ca502559a13da2abb3191f681d5f76041003d207736c4469be2709476d73
+  data.tar.gz: 381fde33081fca87a978babb4e3048acfacf70a56de249eb5ea44be9dd0c6f60139b278601d929110eb6f687f3dd65c31287458d8c98c0fc1e31c59c3b842d71

data/README.md

@@ -1,4 +1,4 @@
-# <img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=65 /> Glimmer DSL for Opal 0.0.6 (Web GUI for Desktop Apps)
+# <img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=65 /> Glimmer DSL for Opal 0.0.7 (Web GUI for Desktop Apps)
 [![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)
 
@@ -6,7 +6,9 @@
 
 It enables running [Glimmer](https://github.com/AndyObtiva/glimmer) desktop apps on the web via [Rails](https://rubyonrails.org/) 5 and [Opal](https://opalrb.com/) 1.
 
-NOTE: Alpha Version 0.0.6 only supports Hello sample capabilities (detailed under [Examples](#examples)):
+NOTE: Alpha Version 0.0.7 only supports capabilities for the following [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt) [samples](https://github.com/AndyObtiva/glimmer#samples):
+
+Hello Samples:
 - [Hello, World!](#hello-world)
 - [Hello, Combo!](#hello-combo)
 - [Hello, Computed!](#hello-computed)
@@ -15,6 +17,10 @@ NOTE: Alpha Version 0.0.6 only supports Hello sample capabilities (detailed unde
 - [Hello, Browser!](#hello-browser)
 - [Hello, Tab!](#hello-tab)
 
+Elaborate Samples:
+- [Login](#login)
+- [Tic Tac Toe](#tic-tac-toe)
+
 Other Glimmer DSL gems:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (Desktop GUI)
 - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
@@ -57,9 +63,10 @@ Follow instructions to setup opal with a rails application: config/initializers/
 
 Add the following to `Gemfile` (NOTE: if you run into issues, they are probably fixed in master or development/wip branch, you may check out instead):
 ```
-gem 'opal-rails'
-gem 'opal-browser'
-gem 'glimmer-dsl-opal', '~> 0.0.6', require: false
+gem 'opal-rails', '~> 1.1.2'
+gem 'opal-async', '~> 1.1.0'
+gem 'opal-browser', '~> 0.2.0'
+gem 'glimmer-dsl-opal', '~> 0.0.7', require: false
 ```
 
 Edit `config/initializers/assets.rb` and add:
@@ -73,9 +80,11 @@ Add the following line to the top of an empty `app/assets/javascripts/applicatio
 require 'glimmer-dsl-opal' # brings opal and opal browser too
 ```
 
-## Examples
+## Samples
+
+### Hello Samples
 
-### Hello, World!
+#### Hello, World!
 
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
@@ -107,7 +116,7 @@ You should see "Hello, World!"
 
 ![Glimmer DSL for Opal Hello World](images/glimmer-dsl-opal-hello-world.png)
 
-### Hello, Combo!
+#### Hello, Combo!
 
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
@@ -164,7 +173,7 @@ You should see "Hello, Combo!"
 
 ![Glimmer DSL for Opal Hello Combo](images/glimmer-dsl-opal-hello-combo.png)
 
-### Hello, Computed!
+#### Hello, Computed!
 
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
@@ -276,7 +285,7 @@ You should see "Hello, Computed!"
 
 ![Glimmer DSL for Opal Hello Computed](images/glimmer-dsl-opal-hello-computed.png)
 
-### Hello, List Single Selection!
+#### Hello, List Single Selection!
 
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
@@ -333,7 +342,7 @@ You should see "Hello, List Single Selection!"
 
 ![Glimmer DSL for Opal Hello List Single Selection](images/glimmer-dsl-opal-hello-list-single-selection.png)
 
-### Hello, List Multi Selection!
+#### Hello, List Multi Selection!
 
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
@@ -400,7 +409,7 @@ You should see "Hello, List Multi Selection!"
 
 ![Glimmer DSL for Opal Hello List Multi Selection](images/glimmer-dsl-opal-hello-list-multi-selection.png)
 
-### Hello, Browser!
+#### Hello, Browser!
 
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
@@ -431,7 +440,7 @@ You should see "Hello, Browser!"
 
 ![Glimmer DSL for Opal Hello Browser](images/glimmer-dsl-opal-hello-browser.png)
 
-### Hello, Tab!
+#### Hello, Tab!
 
 Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
 
@@ -480,6 +489,351 @@ You should see "Hello, Tab!"
 ![Glimmer DSL for Opal Hello Tab English](images/glimmer-dsl-opal-hello-tab-english.png)
 ![Glimmer DSL for Opal Hello Tab French](images/glimmer-dsl-opal-hello-tab-french.png)
 
+### Elaborate Samples
+
+#### Login
+
+Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
+
+```ruby
+require "observer"
+
+#Presents login screen data
+class LoginPresenter
+
+  attr_accessor :user_name
+  attr_accessor :password
+  attr_accessor :status
+
+  def initialize
+    @user_name = ""
+    @password = ""
+    @status = "Logged Out"
+  end
+
+  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 logged_in
+    self.status == "Logged In"
+  end
+
+  def logged_out
+    !self.logged_in
+  end
+
+  def login
+    self.status = "Logged In"
+  end
+
+  def logout
+    self.user_name = ""
+    self.password = ""
+    self.status = "Logged Out"
+  end
+
+end
+
+#Login screen
+class Login
+  include Glimmer
+
+  def launch
+    presenter = LoginPresenter.new
+    @shell = shell {
+      text "Login"
+      composite {
+        grid_layout 2, false #two columns with differing widths
+
+        label { text "Username:" } # goes in column 1
+        text {                     # goes in column 2
+          text bind(presenter, :user_name)
+          enabled bind(presenter, :logged_out)
+        }
+
+        label { text "Password:" }
+        text(:password, :border) {
+          text bind(presenter, :password)
+          enabled bind(presenter, :logged_out)
+        }
+
+        label { text "Status:" }
+        label { text bind(presenter, :status) }
+
+        button {
+          text "Login"
+          enabled bind(presenter, :logged_out)
+          on_widget_selected { presenter.login }
+        }
+
+        button {
+          text "Logout"
+          enabled bind(presenter, :logged_in)
+          on_widget_selected { presenter.logout }
+        }
+      }
+    }
+    @shell.open
+  end
+end
+
+Login.new.launch
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Login](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login.png)
+![Glimmer DSL for SWT Login Filled In](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login-filled-in.png)
+![Glimmer DSL for SWT Login Logged In](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-login-logged-in.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Login" dialog
+
+![Glimmer DSL for Opal Login](images/glimmer-dsl-opal-login.png)
+![Glimmer DSL for Opal Login Filled In](images/glimmer-dsl-opal-login-filled-in.png)
+![Glimmer DSL for Opal Login Logged In](images/glimmer-dsl-opal-login-logged-in.png)
+
+#### Tic Tac Toe
+
+Add the following Glimmer code to `app/assets/javascripts/application.js.rb`
+
+```ruby
+class TicTacToe
+  class Cell
+    EMPTY = ""
+    attr_accessor :sign, :empty
+  
+    def initialize
+      reset
+    end
+  
+    def mark(sign)
+      self.sign = sign
+    end
+  
+    def reset
+      self.sign = EMPTY
+    end
+  
+    def sign=(sign_symbol)
+      @sign = sign_symbol
+      self.empty = sign == EMPTY
+    end
+  
+    def marked
+      !empty
+    end
+  end
+end
+
+class TicTacToe
+  class Board
+    DRAW = :draw
+    IN_PROGRESS = :in_progress
+    WIN = :win
+    attr :winning_sign
+    attr_accessor :game_status
+  
+    def initialize
+      @sign_state_machine = {nil => "X", "X" => "O", "O" => "X"}
+      build_grid
+      @winning_sign = Cell::EMPTY
+      @game_status = IN_PROGRESS
+    end
+  
+    #row and column numbers are 1-based
+    def mark(row, column)
+      self[row, column].mark(current_sign)
+      game_over? #updates winning sign
+    end
+  
+    def current_sign
+      @current_sign = @sign_state_machine[@current_sign]
+    end
+  
+    def [](row, column)
+      @grid[row-1][column-1]
+    end
+  
+    def game_over?
+       win? or draw?
+    end
+  
+    def win?
+      win = (row_win? or column_win? or diagonal_win?)
+      self.game_status=WIN if win
+      win
+    end
+  
+    def reset
+      (1..3).each do |row|
+        (1..3).each do |column|
+          self[row, column].reset
+        end
+      end
+      @winning_sign = Cell::EMPTY
+      @current_sign = nil
+      self.game_status=IN_PROGRESS
+    end
+  
+    private
+  
+    def build_grid
+      @grid = []
+      3.times do |row_index| #0-based
+        @grid << []
+        3.times { @grid[row_index] << Cell.new }
+      end
+    end
+  
+    def row_win?
+      (1..3).each do |row|
+        if row_has_same_sign(row)
+          @winning_sign = self[row, 1].sign
+          return true
+        end
+      end
+      false
+    end
+  
+    def column_win?
+      (1..3).each do |column|
+        if column_has_same_sign(column)
+          @winning_sign = self[1, column].sign
+          return true
+        end
+      end
+      false
+    end
+  
+    #needs refactoring if we ever decide to make the board size dynamic
+    def diagonal_win?
+      if (self[1, 1].sign == self[2, 2].sign) and (self[2, 2].sign == self[3, 3].sign) and self[1, 1].marked
+        @winning_sign = self[1, 1].sign
+        return true
+      end
+      if (self[3, 1].sign == self[2, 2].sign) and (self[2, 2].sign == self[1, 3].sign) and self[3, 1].marked
+        @winning_sign = self[3, 1].sign
+        return true
+      end
+      false
+    end
+  
+    def draw?
+      @board_full = true
+      3.times do |x|
+        3.times do |y|
+          @board_full = false if self[x, y].empty
+        end
+      end
+      self.game_status = DRAW if @board_full
+      @board_full
+    end
+  
+    def row_has_same_sign(number)
+      row_sign = self[number, 1].sign
+      [2, 3].each do |column|
+        return false unless row_sign == (self[number, column].sign)
+      end
+      true if self[number, 1].marked
+    end
+  
+    def column_has_same_sign(number)
+      column_sign = self[1, number].sign
+      [2, 3].each do |row|
+        return false unless column_sign == (self[row, number].sign)
+      end
+      true if self[1, number].marked
+    end
+  
+  end
+end
+
+class TicTacToe
+  include Glimmer
+
+  def initialize
+    @tic_tac_toe_board = Board.new
+    @shell = shell {
+      text "Tic-Tac-Toe"
+      composite {
+        grid_layout 3, true
+        (1..3).each { |row|
+          (1..3).each { |column|
+            button {
+              layout_data :fill, :fill, true, true
+              text        bind(@tic_tac_toe_board[row, column], :sign)
+              enabled     bind(@tic_tac_toe_board[row, column], :empty)
+              on_widget_selected {
+                @tic_tac_toe_board.mark(row, column)
+              }
+            }
+          }
+        }
+      }
+    }
+    observe(@tic_tac_toe_board, :game_status) { |game_status|
+      display_win_message if game_status == Board::WIN
+      display_draw_message if game_status == Board::DRAW
+    }
+  end
+
+  def display_win_message
+    display_game_over_message("Player #{@tic_tac_toe_board.winning_sign} has won!")
+  end
+
+  def display_draw_message
+    display_game_over_message("Draw!")
+  end
+
+  def display_game_over_message(message_text)
+    message_box(@shell) {
+      text 'Game Over'
+      message message_text
+    }.open
+    @tic_tac_toe_board.reset
+  end
+
+  def open
+    @shell.open
+  end
+end
+
+TicTacToe.new.open
+```
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Tic Tac Toe](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe.png)
+![Glimmer DSL for SWT Tic Tac Toe In Progress](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe-in-progress.png)
+![Glimmer DSL for SWT Tic Tac Toe Game Over](https://github.com/AndyObtiva/glimmer/raw/master/images/glimmer-tic-tac-toe-game-over.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Tic Tac Toe"
+
+![Glimmer DSL for Opal Tic Tac Toe](images/glimmer-dsl-opal-tic-tac-toe.png)
+![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)
+
 ## Help
 
 ### Issues

data/VERSION

@@ -1 +1 @@
-0.0.6
+0.0.7

data/lib/glimmer-dsl-opal.rb

@@ -1,5 +1,5 @@
 require 'opal'
-require 'opal-parser'
+require 'opal-async'
 require 'glimmer'
 
 GLIMMER_DSL_OPAL_ROOT = File.expand_path('../..', __FILE__)
@@ -7,4 +7,5 @@ GLIMMER_DSL_OPAL_LIB = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib')
 
 $LOAD_PATH.unshift(GLIMMER_DSL_OPAL_LIB)
 
-require 'glimmer/dsl/opal/dsl' 
+require 'glimmer/dsl/opal/dsl'
+require 'glimmer/data_binding/ext/observable_model'

data/lib/glimmer/data_binding/ext/observable_model.rb

@@ -0,0 +1,40 @@
+require 'glimmer/data_binding/observable'
+require 'glimmer/data_binding/observer'
+require 'glimmer/opal/display_proxy'
+
+# This ensures all data-binding events happen async and block on modal display
+
+module Glimmer
+  module DataBinding
+    # TODO prefix utility methods with double-underscore
+    module ObservableModel
+      include Observable
+      include Glimmer
+
+      def add_property_writer_observers(property_name)
+        property_writer_name = "#{property_name}="
+        method(property_writer_name)
+        ensure_array_object_observer(property_name, send(property_name))
+        begin
+          method("__original_#{property_writer_name}")
+        rescue
+          old_method = self.class.instance_method(property_writer_name)
+          define_singleton_method("__original_#{property_writer_name}", old_method)
+          define_singleton_method(property_writer_name) do |value|
+            old_value = self.send(property_name)
+            unregister_dependent_observers(property_name, old_value)
+            self.send("__original_#{property_writer_name}", value)
+            Glimmer::Opal::DisplayProxy.instance.async_exec do
+              notify_observers(property_name)
+              ensure_array_object_observer(property_name, value, old_value)
+            end
+          end
+        end
+      rescue => e
+        # ignore writing if no property writer exists
+        Glimmer::Config.logger&.debug "No need to observe property writer: #{property_writer_name}\n#{e.message}\n#{e.backtrace.join("\n")}"
+      end
+      
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/opal/display_proxy'
+
+module Glimmer
+  module DSL
+    module Opal
+      class AsyncExecExpression < StaticExpression
+        include TopLevelExpression
+
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Opal::DisplayProxy.instance.async_exec(&block)
+        end
+      end
+    end
+  end
+end

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

@@ -19,6 +19,9 @@ require 'glimmer/dsl/opal/list_expression'
 require 'glimmer/dsl/opal/browser_expression'
 require 'glimmer/dsl/opal/tab_folder_expression'
 require 'glimmer/dsl/opal/tab_item_expression'
+require 'glimmer/dsl/opal/message_box_expression'
+require 'glimmer/dsl/opal/async_exec_expression'
+require 'glimmer/dsl/opal/observe_expression'
 require 'glimmer/dsl/opal/layout_data_expression'
 require 'glimmer/dsl/opal/list_selection_data_binding_expression'
 

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

@@ -0,0 +1,20 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/dsl/parent_expression'
+require 'glimmer/opal/modal'
+
+module Glimmer
+  module DSL
+    module Opal
+      class MessageBoxExpression < StaticExpression
+        include TopLevelExpression
+        include ParentExpression
+
+        def interpret(parent, keyword, *args, &block)
+          parent = args.delete_at(0)
+          Glimmer::Opal::Modal.new(parent, args)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/data_binding/observer'
+require 'glimmer/data_binding/model_binding'
+
+module Glimmer
+  module DSL
+    module Opal
+      class ObserveExpression < StaticExpression
+        include TopLevelExpression
+
+        REGEX_NESTED_OR_INDEXED_PROPERTY = /([^\[]+)(\[[^\]]+\])?/
+  
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'observe' and
+            block_given? and
+            (args.size == 2) and
+            textual?(args[1])
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          observer = DataBinding::Observer.proc(&block)
+          if args[1].to_s.match(REGEX_NESTED_OR_INDEXED_PROPERTY)
+            observer.observe(DataBinding::ModelBinding.new(args[0], args[1]))
+          else
+            observer.observe(args[0], args[1])
+          end
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/opal/display_proxy.rb

@@ -0,0 +1,23 @@
+module Glimmer
+  module Opal
+    class DisplayProxy
+      class << self
+        def instance
+          @instance ||= new
+        end
+      end
+      
+      def async_exec(&block)
+        executer = lambda do
+          if $document.at_css('.modal')
+            sleep(0.05)
+            Async::Task.new(&executer)
+          else
+            block.call
+          end
+        end
+        Async::Task.new(&executer)
+      end
+    end
+  end
+end

data/lib/glimmer/opal/document_proxy.rb

@@ -104,6 +104,56 @@ module Glimmer
               .hide {
                 display: none !important;
               }
+                            
+              /* The Modal (background) */
+              .modal {
+                position: fixed; /* Stay in place */
+                z-index: 1; /* Sit on top */
+                padding-top: 100px; /* Location of the box */
+                left: 0;
+                top: 0;
+                width: 100%; /* Full width */
+                height: 100%; /* Full height */
+                overflow: auto; /* Enable scroll if needed */
+                background-color: rgb(0,0,0); /* Fallback color */
+                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+                text-align: center;
+              }
+              
+              /* Modal Content */
+              .modal-content {
+                background-color: #fefefe;
+                margin: auto;
+                border: 1px solid #888;
+                display: inline-block;
+                min-width: 200px;
+              }
+              
+              .modal-content .text {
+                background: rgb(80, 116, 211);
+                color: white;
+                padding: 5px;
+              }
+              
+              .modal-content .message {
+                padding: 20px;
+              }
+              
+              /* The Close Button */
+              .close {
+                color: #aaaaaa;
+                float: right;
+#                 font-size: 18px;
+                font-weight: bold;
+                margin: 5px;
+              }
+              
+              .close:hover,
+              .close:focus {
+                color: #000;
+                text-decoration: none;
+                cursor: pointer;
+              }              
             </style>
             CSS
           }

data/lib/glimmer/opal/element_proxy.rb

@@ -5,7 +5,7 @@ module Glimmer
     class ElementProxy
       include Glimmer
       include PropertyOwner
-      attr_reader :parent, :args, :css_classes, :css, :children
+      attr_reader :parent, :args, :css_classes, :css, :children, :enabled
       
       def initialize(parent, args)
         @parent = parent
@@ -13,14 +13,20 @@ module Glimmer
         @children = Set.new
         @css_classes = Set.new
         @css = ''
+        @enabled = true
         @parent.add_child(self)
       end
 
       def add_child(child)
-#         return if @children.include?(child)
+#         return if @children.include?(child) # TODO consider adding an option to enable this if needed to prevent dom repetition
         @children << child
         dom << child.dom
       end
+      
+      def enabled=(value)
+        @enabled = value
+        redraw
+      end
 
       def redraw
         if @dom
@@ -189,7 +195,7 @@ module Glimmer
 #           },
           InputProxy => {
             :text => lambda do |observer|
-              on_modify_text { |modify_event|                
+              on_modify_text { |modify_event|
                 observer.call(text)
               }
             end,

data/lib/glimmer/opal/grid_layout_proxy.rb

@@ -10,8 +10,9 @@ module Glimmer
         @parent = parent
         @args = args
         @parent.add_css_class('grid-layout')
+        @horizontal_spacing = 10
         @vertical_spacing = 10
-        @num_columns = 1
+        @num_columns = @args.first || 1        
         reapply
       end
 

data/lib/glimmer/opal/input_proxy.rb

@@ -19,8 +19,10 @@ module Glimmer
             event: 'keyup',
             event_handler: -> (event_listener) {
               -> (event) {
-                @text = event.target.value
-                event_listener.call(event)              
+                if args.last[:type] == 'text'
+                  @text = event.target.value
+                  event_listener.call(event)              
+                end
               }
             }
           }
@@ -32,8 +34,10 @@ module Glimmer
         input_id = id
         input_style = css
         input_args = @args.last
+        input_disabled = @enabled ? {} : {'disabled': 'disabled'}
+        input_args = input_args.merge(type: 'password') if has_style?(:password)        
         @dom ||= DOM {
-          input input_args.merge(id: input_id, style: input_style, value: input_text)
+          input input_args.merge(id: input_id, style: input_style, value: input_text, style: 'min-width: 27px;').merge(input_disabled)
         }
       end
     end

data/lib/glimmer/opal/modal.rb

@@ -0,0 +1,94 @@
+require 'glimmer/opal/element_proxy'
+
+module Glimmer
+  module Opal
+    class Modal < ElementProxy
+      attr_reader :text, :message
+      
+      def initialize(parent, args)
+        i = 0
+        @parent = parent
+        @args = args
+        @children = Set.new
+        @css_classes = Set.new(['modal'])
+        @css = ''
+        @enabled = true
+        content do
+          on_widget_selected {
+            hide
+          }
+        end
+      end
+      
+      def text=(txt)
+        @text = txt
+        redraw if @dom
+      end
+    
+      def message=(msg)
+        @message = msg
+        redraw if @dom
+      end
+      
+      def document
+        element = self
+        begin
+          element = element.parent
+        end while(element.parent)
+        element
+      end
+      
+      def open
+        document.add_child(self)
+      end
+      
+      def hide
+        dom.remove
+      end
+      
+      def content(&block)
+        Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Opal::MessageBoxExpression.new, &block)
+      end
+      
+      def name
+        'div'
+      end
+      
+      def selector
+        super + ' .close' 
+      end
+    
+      def observation_request_to_event_mapping
+        {
+          'on_widget_selected' => {
+            event: 'click'
+          },
+        }
+      end      
+      
+      def dom
+        modal_id = id
+        modal_style = css
+        modal_text = text
+        modal_message = message
+        modal_css_classes = css_classes
+        modal_class = modal_css_classes.to_a.join(' ')
+        @dom ||= DOM {        
+          div(id: modal_id, style: modal_style, class: modal_class) {
+            div(class: 'modal-content') {
+              header.text {
+                modal_text
+              }
+              p.message {
+                modal_message
+              }
+              input(type: 'button', class: 'close', autofocus: 'autofocus', value: 'OK')
+            }
+          }
+        }
+      end
+    end
+  end
+end
+
+require 'glimmer/dsl/opal/message_box_expression'

data/lib/samples/elaborate/login.rb

@@ -1,4 +1,3 @@
-require "java"
 require "observer"
 
 #Presents login screen data

data/lib/samples/elaborate/tic_tac_toe.rb

@@ -37,11 +37,11 @@ class TicTacToe
     display_game_over_message("Draw!")
   end
 
-  def display_game_over_message(message)
-    message_box = MessageBox.new(@shell.swt_widget)
-    message_box.setText("Game Over")
-    message_box.setMessage(message)
-    message_box.open
+  def display_game_over_message(message_text)
+    message_box(@shell) {
+      text 'Game Over'
+      message message_text
+    }.open
     @tic_tac_toe_board.reset
   end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-opal
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
 platform: ruby
 authors:
 - AndyMaleh
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-19 00:00:00.000000000 Z
+date: 2020-06-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -170,11 +170,13 @@ files:
 - lib/glimmer-dsl-opal.rb
 - lib/glimmer/config.rb
 - lib/glimmer/data_binding/element_binding.rb
+- lib/glimmer/data_binding/ext/observable_model.rb
 - lib/glimmer/data_binding/list_selection_binding.rb
 - lib/glimmer/data_binding/observable_element.rb
 - lib/glimmer/dsl/engine.rb
 - lib/glimmer/dsl/expression.rb
 - lib/glimmer/dsl/expression_handler.rb
+- lib/glimmer/dsl/opal/async_exec_expression.rb
 - lib/glimmer/dsl/opal/bind_expression.rb
 - lib/glimmer/dsl/opal/browser_expression.rb
 - lib/glimmer/dsl/opal/button_expression.rb
@@ -188,6 +190,8 @@ files:
 - lib/glimmer/dsl/opal/layout_data_expression.rb
 - lib/glimmer/dsl/opal/list_expression.rb
 - lib/glimmer/dsl/opal/list_selection_data_binding_expression.rb
+- lib/glimmer/dsl/opal/message_box_expression.rb
+- lib/glimmer/dsl/opal/observe_expression.rb
 - lib/glimmer/dsl/opal/property_expression.rb
 - lib/glimmer/dsl/opal/shell_expression.rb
 - lib/glimmer/dsl/opal/tab_folder_expression.rb
@@ -199,6 +203,7 @@ files:
 - lib/glimmer/dsl/top_level_expression.rb
 - lib/glimmer/error.rb
 - lib/glimmer/invalid_keyword_error.rb
+- lib/glimmer/opal/display_proxy.rb
 - lib/glimmer/opal/div_proxy.rb
 - lib/glimmer/opal/document_proxy.rb
 - lib/glimmer/opal/element_proxy.rb
@@ -209,6 +214,7 @@ files:
 - lib/glimmer/opal/label_proxy.rb
 - lib/glimmer/opal/layout_data_proxy.rb
 - lib/glimmer/opal/list_proxy.rb
+- lib/glimmer/opal/modal.rb
 - lib/glimmer/opal/point.rb
 - lib/glimmer/opal/property_owner.rb
 - lib/glimmer/opal/select_proxy.rb