glimmer-dsl-opal 0.25.2 → 0.26.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98f731b5aabef981ca377d64bbd87ca7a86a5f8edd4d0de428c81aeabe8680bf
-  data.tar.gz: 7f7cc811ff007c65a15749a53e4b51b5ae194ffc06714d7e07c101d2c40c5484
+  metadata.gz: e1bec8104295a4c2f4a5b3f6d1464c9e0b0f5175092e93b7dd9508a5c4feabd0
+  data.tar.gz: 778f2026c647b7454d0586cf2310297d143d122a4b8937ec6189abdba260667d
 SHA512:
-  metadata.gz: c71b8149524cbcd0b44319f24eb22e50476a6891cf479245d2632c3a367b97828b8197132092d0dd1389b5b79e7bf1e3a2abb5b787ad18d62655663252645fce
-  data.tar.gz: 18328ff77046a9fa0fd42abffd15c9251c0a9eed4886071c048fcd2320c1828d7033237cc76abbb2548e52cdb3c4d5ed3f3e235eca66af2a49c8eadca6b0d20c
+  metadata.gz: 33e3f1b4bd51b3cfdc34d9f24403bb47d0a889c235e169232a3e8b8dae6db26617110dd55f8ed4a40d752c2e5f60569ea70c2b95db7a4435f1a2fddac25e3d7f
+  data.tar.gz: 8fafbadda7e92fcf19ac96b994e3dcb67ed25febcdd521a97e94f57a66f272312cbc6763a341c30b1f1cf46e27ff62928eaed02cf8f1aa91c72590794e6ec7ee

data/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 0.26.1
+
+- Support display on_swt_keydown event keyCode/key_code values for arrow keys and alt/shift/ctrl
+- Use arrow keys for movement in Tetris
+- Use alt/shift keys for rotate right in Tetris
+
+## 0.26.0
+
+- Tetris elaborate sample (minimal initial version of the one in Glimmer DSL for SWT)
+- Support `menu_item` `selection` attribute data-binding for `:check` and `:radio` SWT styles
+- Set 'custom_shell' data for custom shell on its body_root
+- Provide parent_proxy on custom widgets as an alternative to parent for compatibility with Glimmer DSL for SWT
+- Have custom widgets derive their parent from body root if not passed in explicitly
+
+## 0.25.4
+
+- Upgrade to opal-async 1.4.0
+- Update Hello, Custom Widget! to utilize `Array#async_cycle` instead of `Array#cycle`
+
+## 0.25.3
+
+- Fix `c_combo`'s data-binding of selection receiving model changes
+- Fix Hello, C Combo!'s reset button
+- Fix Login sample by removing unnecessary require statement at the top
+
 ## 0.25.2
 
 - Fix sizing of buttons with font height specified to fit text

data/README.md

@@ -12,6 +12,8 @@ Use in one of two ways:
 
 Glimmer DSL for Opal successfully reuses the entire [Glimmer](https://github.com/AndyObtiva/glimmer) core DSL engine in [Opal Ruby](https://opalrb.com/) inside a web browser, and as such inherits the full range of Glimmer desktop [data-binding](https://github.com/AndyObtiva/glimmer#data-binding) capabilities for the web (including Shine syntax using `<=>` and `<=` for bidirectional [two-way] and unidirectional [one-way] data-binding respectively).
 
+(note that auto-webification of desktop apps that involve multiple threads might involve extra changes to the code to utilize web async calls due to the async nature of transpiled JavaScript code)
+
 #### Hello, Table! Sample
 
 Code: [lib/glimmer-dsl-opal/samples/hello/hello_table.rb](lib/glimmer-dsl-opal/samples/hello/hello_table.rb)
@@ -143,7 +145,7 @@ Hello, Table! Game Booked
 
 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.25.1 only supports bare-minimum capabilities for the included [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written for [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt))
+**Alpha Version** 0.26.1 only supports bare-minimum capabilities for the included [samples](https://github.com/AndyObtiva/glimmer-dsl-opal#samples) (originally written for [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt))
 
 Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)
@@ -194,6 +196,7 @@ Other [Glimmer](https://github.com/AndyObtiva/glimmer) DSL gems:
     - [Elaborate Samples](#elaborate-samples)
       - [Login](#login)
       - [Contact Manager](#contact-manager)
+      - [Tetris](#tetris)
       - [Tic Tac Toe](#tic-tac-toe)
       - [User Profile](#user-profile)
       - [Weather](#weather)
@@ -232,8 +235,8 @@ Alternatively, web developers may directly use [Glimmer DSL for Opal](https://ru
 
 ## Pre-requisites
 
-- Rails 5: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
-- Opal 1.0.4: [https://github.com/opal/opal](https://github.com/opal/opal)
+- Rails 5.2: [https://github.com/rails/rails/tree/5-2-stable](https://github.com/rails/rails/tree/5-2-stable)
+- Opal 1.0.5: [https://github.com/opal/opal](https://github.com/opal/opal)
 - Opal-Rails 1.1.2: [https://github.com/opal/opal-rails](https://github.com/opal/opal-rails)
 - jQuery 3: [https://code.jquery.com/](https://code.jquery.com/) (jQuery 3.5.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
 - jQuery-UI 1.12: [https://code.jquery.com/](https://jqueryui.com/) (jQuery-UI 1.12.1 is included in the [glimmer-dsl-opal](https://rubygems.org/gems/glimmer-dsl-opal) gem)
@@ -250,7 +253,7 @@ Please follow the following steps to setup.
 Install a Rails 5 gem:
 
 ```
-gem install rails -v5.2.4.4
+gem install rails -v5.2.6
 ```
 
 Start a new Rails 5 app:
@@ -262,11 +265,11 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'opal', '1.0.4'
+gem 'opal', '1.0.5'
 gem 'opal-rails', '1.1.2'
-gem 'opal-async', '~> 1.3.0'
+gem 'opal-async', '~> 1.4.0'
 gem 'opal-jquery', '~> 0.4.4'
-gem 'glimmer-dsl-opal', '~> 0.25.1'
+gem 'glimmer-dsl-opal', '~> 0.26.1'
 gem 'glimmer-dsl-xml', '~> 1.2.0', require: false
 gem 'glimmer-dsl-css', '~> 1.2.0', require: false
 
@@ -1035,7 +1038,7 @@ Add the following require statement to `app/assets/javascripts/application.rb`
 require 'glimmer-dsl-opal/samples/hello/hello_custom_widget'
 ```
 
-Or add the Glimmer code directly if you prefer to play around with it:
+Or add the Glimmer code directly if you prefer to play around with it (note that the Opal version needs `Array#async_cycle` from the opal-async gem instead of `Array#cycle` due to the async nature of JavaScript):
 
 ```ruby
 # This class declares a `greeting_label` custom widget (by convention)
@@ -1060,7 +1063,7 @@ class GreetingLabel
     return if colors.nil?
     
     Thread.new { # imported from Glimmer DSL for SWT. In Opal, avoid Threads and sleep to avoid blocking GUI.
-      colors.cycle { |color|
+      colors.async_cycle { |color|
         async_exec {
           self.color = color
         }
@@ -2582,6 +2585,40 @@ Glimmer DSL for Opal Contact Manager Edit Done
 
 ![Glimmer DSL for Opal Contact Manager Edit Done](images/glimmer-dsl-opal-contact-manager-edit-done.png)
 
+#### Tetris
+
+This is a minimal initial version of the [Tetris seen in Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#glimmer-tetris).
+
+Note that while the Glimmer GUI DSL code is mostly the same, some of the behavioral code around threads is changed
+into async Opal code via the [opal-async](https://github.com/AndyObtiva/opal-async) gem due to the async nature of transpiled JavaScript.
+
+Still, this sample has done the remarkable feat of reusing all of the Tetris model/view logic from Glimmer DSL for SWT mostly unchanged.
+
+Add the following require statement to `app/assets/javascripts/application.rb`
+
+```ruby
+require 'glimmer-dsl-opal/samples/elaborate/tetris'
+```
+
+Glimmer app on the desktop (using [`glimmer-dsl-swt`](https://github.com/AndyObtiva/glimmer-dsl-swt) gem):
+
+![Glimmer DSL for SWT Tetris](https://github.com/AndyObtiva/glimmer-dsl-swt/raw/master/images/glimmer-tetris.png)
+
+Glimmer app on the web (using `glimmer-dsl-opal` gem):
+
+Start the Rails server:
+```
+rails s
+```
+
+Visit `http://localhost:3000`
+
+You should see "Tetris" (a minimal version of the one in Glimmer DSL for SWT)
+
+![Glimmer DSL for Opal Tetris](images/glimmer-dsl-opal-tetris.png)
+
+![Glimmer DSL for Opal Tetris Video](images/glimmer-dsl-opal-tetris.gif)
+
 #### Tic Tac Toe
 
 Add the following require statement to `app/assets/javascripts/application.rb`

data/VERSION

@@ -1 +1 @@
-0.25.2
+0.26.1

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

@@ -6,17 +6,17 @@ require 'glimmer/swt/combo_proxy'
 module Glimmer
   module DSL
     module Opal
-      class ComboSelectionDataBindingExpression < Expression  
+      class ComboSelectionDataBindingExpression < Expression
         def can_interpret?(parent, keyword, *args, &block)
           keyword == 'selection' and
             block.nil? and
-            parent.is_a?(Glimmer::SWT::ComboProxy) and
+            (parent.is_a?(Glimmer::SWT::ComboProxy) || parent.is_a?(Glimmer::SWT::CComboProxy)) and
             args.size == 1 and
             args[0].is_a?(DataBinding::ModelBinding) and
             args[0].evaluate_options_property.is_a?(Array)
         end
   
-        def interpret(parent, keyword, *args, &block)          
+        def interpret(parent, keyword, *args, &block)
           model_binding = args[0]
   
           #TODO make this options observer dependent and all similar observers in element specific data binding handlers

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

@@ -37,9 +37,6 @@ module Glimmer
             if parent.is_a?(Glimmer::SWT::WidgetProxy)
               return true
             else
-              puts 'parent'
-              puts parent.class
-              puts parent
               raise Glimmer::Error, "menu may only be nested under a widget (like shell or another menu)!"
             end
           end

data/lib/glimmer/swt/c_combo_proxy.rb

@@ -26,7 +26,7 @@ module Glimmer
   module SWT
     class CComboProxy < ComboProxy
       def post_add_content
-        `$(#{path}).selectmenu()`
+        dom_element.selectmenu
         c_combo_dom_element.css('width', 'initial')
       end
       
@@ -38,6 +38,11 @@ module Glimmer
         c_combo_dom_element.css('font-size', "#{@font.height}px") unless @font.nil?
       end
       
+      def text=(value)
+        super(value)
+        c_combo_text_element.text(value)
+      end
+      
       def c_combo_path
         "##{id}-button"
       end
@@ -45,6 +50,30 @@ module Glimmer
       def c_combo_dom_element
         Document.find(c_combo_path)
       end
+      
+      def c_combo_text_path
+        c_combo_path + ' .ui-selectmenu-text'
+      end
+      
+      def c_combo_text_element
+        Document.find(c_combo_text_path)
+      end
+      
+      def observation_request_to_event_mapping
+        super.merge(
+          'on_widget_selected' => [
+            {
+              event: 'selectmenuchange',
+              event_handler: -> (event_listener) {
+                -> (event) {
+                  self.text = event.target.value
+                  event_listener.call(event)
+                }
+              }
+            },
+          ],
+        )
+      end
     end
   end
   

data/lib/glimmer/swt/combo_proxy.rb

@@ -1,3 +1,4 @@
+
 require 'glimmer/data_binding/observable_element'
 require 'glimmer/swt/widget_proxy'
 
@@ -6,7 +7,6 @@ module Glimmer
     class ComboProxy < WidgetProxy
       include Glimmer::DataBinding::ObservableElement
       attr_reader :text, :items
-      attr_accessor :selection # virtual attribute just to pass the shine data-binding test (TODO THINK OF A BETTER WAY OF HANDLING THIS)
       
       def initialize(parent, args, block)
         super(parent, args, block)
@@ -19,7 +19,15 @@ module Glimmer
       
       def text=(value)
         @text = value
-        Document.find(path).value = value
+        dom_element.val(value)
+      end
+      
+      def selection
+        text
+      end
+      
+      def selection=(value)
+        self.text = value
       end
       
       def items=(the_items)

data/lib/glimmer/swt/control_editor.rb

@@ -27,8 +27,8 @@ module Glimmer
       ATTRIBUTES = [:grabHorizontal, :grabVertical, :horizontalAlignment, :verticalAlignment, :minimumWidth, :minimumHeight]
       attr_accessor(*ATTRIBUTES)
       ATTRIBUTES.each do |attribute|
-        alias_method attribute.underscore, attribute
-        alias_method "#{attribute.underscore}=", "#{attribute}="
+        alias_method attribute.to_s.underscore, attribute
+        alias_method "#{attribute.to_s.underscore}=", "#{attribute}="
       end
       
       # TODO consider supporting a java_attr_accessor to get around having to generate all the aliases manually

data/lib/glimmer/swt/dialog_proxy.rb

@@ -19,12 +19,13 @@
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-require 'glimmer/swt/widget_proxy'
 require 'glimmer/swt/display_proxy'
+require 'glimmer/swt/widget_proxy'
+require 'glimmer/swt/shell_proxy'
 
 module Glimmer
   module SWT
-    class DialogProxy < CompositeProxy
+    class DialogProxy < ShellProxy
       STYLE = <<~CSS
         .ui-dialog .ui-dialog-content {
           background: rgb(235, 235, 235);
@@ -86,7 +87,7 @@ module Glimmer
         @open
       end
       
-      def open
+      def open(async: true)
         owned_proc = Glimmer::Util::ProcTracker.new(owner: self, invoked_from: :open) {
           shell.open(async: false) unless shell.open?
           unless @init
@@ -113,8 +114,13 @@ module Glimmer
             dom_element.dialog('open')
           end
           @open = true
+          listeners_for('swt_show').each {|listener| listener.call(Event.new(widget: self))}
         }
-        DisplayProxy.instance.async_exec(owned_proc)
+        if async
+          DisplayProxy.instance.async_exec(owned_proc)
+        else
+          owned_proc.call
+        end
       end
       
       def hide
@@ -129,6 +135,7 @@ module Glimmer
         dom_element.remove
         @open = false
         @init = false
+        listeners_for('swt_close').each {|listener| listener.call(Event.new(widget: self))}
         Element['.dialog-overlay'].add_class('hide') unless DisplayProxy.instance.dialogs.any?(&:open?)
         parent.children.delete(self)
         shell.close if shell.children.empty?

data/lib/glimmer/swt/display_proxy.rb

@@ -1,8 +1,19 @@
 require 'glimmer/swt/widget_proxy'
+require 'glimmer/swt/swt_proxy'
 
 module Glimmer
   module SWT
     class DisplayProxy < WidgetProxy
+      JS_KEY_CODE_TO_SWT_KEY_CODE_MAP = {
+        16 => SWTProxy[:shift],
+        17 => SWTProxy[:ctrl],
+        18 => SWTProxy[:alt],
+        37 => SWTProxy[:arrow_left],
+        38 => SWTProxy[:arrow_up],
+        39 => SWTProxy[:arrow_right],
+        40 => SWTProxy[:arrow_down],
+      }
+    
       class << self
         def instance
           @instance ||= new
@@ -95,7 +106,9 @@ module Glimmer
                   event.singleton_class.define_method(:character) do
                     which || key_code
                   end
-                  event.define_singleton_method(:keyCode) {event.which}
+                  event.define_singleton_method(:keyCode) {
+                    JS_KEY_CODE_TO_SWT_KEY_CODE_MAP[event.which] || event.which
+                  }
                   event.define_singleton_method(:key_code, &event.method(:keyCode))
                   event.define_singleton_method(:character) {event.which.chr}
                   event.define_singleton_method(:stateMask) do
@@ -133,7 +146,9 @@ module Glimmer
                   event.singleton_class.define_method(:character) do
                     which || key_code
                   end
-                  event.define_singleton_method(:keyCode) {event.which}
+                  event.define_singleton_method(:keyCode) {
+                    JS_KEY_CODE_TO_SWT_KEY_CODE_MAP[event.which] || event.which
+                  }
                   event.define_singleton_method(:key_code, &event.method(:keyCode))
                   event.define_singleton_method(:character) {event.which.chr}
                   event.define_singleton_method(:stateMask) do
@@ -150,7 +165,7 @@ module Glimmer
                     doit = value
                   end
                   event.define_singleton_method(:doit) { doit }
-                  event_listener.call(event) if event.key_code != 13 && (event.key_code == 127 || event.key_code <= 31)
+                  event_listener.call(event) if event.which != 13 && (event.which == 127 || event.which <= 40)
                   
                     # TODO Fix doit false, it's not stopping input
                   unless doit

data/lib/glimmer/swt/shell_proxy.rb

@@ -69,6 +69,7 @@ module Glimmer
       HEIGHT_MIN = 0
       
       def initialize(args)
+        # TODO set parent
         @args = args
         @children = []
         render # TODO attach to specific element
@@ -78,7 +79,7 @@ module Glimmer
         self.minimum_size = Point.new(WIDTH_MIN, HEIGHT_MIN)
         DisplayProxy.instance.shells << self
       end
-      
+              
       def post_add_content
         `$( document ).tooltip()`
       end
@@ -128,6 +129,16 @@ module Glimmer
         dom_element.css('min-height', "#{@minimum_size.y}px")
       end
       
+      def handle_observation_request(keyword, original_event_listener)
+        case keyword
+        when 'on_swt_show', 'on_swt_close', 'on_shell_closed'
+          keyword = 'on_swt_close' if keyword == 'on_shell_closed'
+          listeners_for(keyword.sub(/^on_/, '')) << original_event_listener.to_proc
+        else
+          super(keyword, original_event_listener)
+        end
+      end
+      
       def style_dom_css
         <<~CSS
           .hide {
@@ -169,6 +180,7 @@ module Glimmer
             DisplayProxy.instance.shells.select(&:open?).reject {|s| s == self}.map(&:hide)
             dom_element.remove_class('hide')
             @open = true
+            listeners_for('swt_show').each {|listener| listener.call(Event.new(widget: self))}
           end
         end
         if async
@@ -177,6 +189,7 @@ module Glimmer
           work.call
         end
       end
+      alias show open
       
       def hide
         dom_element.add_class('hide')
@@ -187,11 +200,25 @@ module Glimmer
         DisplayProxy.instance.shells.delete(self)
         dom_element.remove
         @open = false
+        listeners_for('swt_close').each {|listener| listener.call(Event.new(widget: self))}
       end
       
       def open?
         @open
       end
+      
+      def visible
+        @open
+      end
+      alias visible? visible
+      
+      def visible=(value)
+        if value
+          show(async: false)
+        else
+          hide
+        end
+      end
     end
   end
 end