shenmegui 0.3.6 → 0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 20a88724018ae39b5bc0d78f2ad4a309ddfee718
-  data.tar.gz: cd76c8753e91659e878c535a4801e732982a3f18
+  metadata.gz: fd26f4f5ed85bdf4a68277307384e178cbcc8a98
+  data.tar.gz: ddc3ee9f6d6d8adea90049f8edb5eb919d88518b
 SHA512:
-  metadata.gz: 585ace9236ccf147c24be691b7bcb99e74885b020e4ff3524ce3149e02b7f15e594ddb4bd8f145cf82e53032eda7b899f3d21d16edf787036fa5762c8e209d1f
-  data.tar.gz: 6f657c4e06167509f3c94277aabd1de9768354f0d8fb47a6233bd0bba0741ed27c9cccac9f2f2a4c35e201082fb431b14fbea0a0c35618939bf37d82967332ac
+  metadata.gz: 970a1abb56193a2bd09a33ff0b9d7fb2cd03bfbe8d013b186783d4e586c9a40599ff8aaf41be8678aa7807952731d569794045eddb2b1ed589f5fd5b4459ef0f
+  data.tar.gz: cf06ffb82a85f09c917949cae8b1ab1612b33e71f61ddc60502f1a3397d43d9fe65c97cd1c8b8b9da53016d799a17bcbd3cba0ad41b5c4126d7e231e75ddf295

data/lib/shenmegui/controls.rb

@@ -5,19 +5,7 @@ module ShenmeGUI
     class Base
       attr_accessor :id, :properties, :events, :children, :parent
 
-      def add_hook(obj)
-        case obj
-          when String
-            HookedString.new(obj, self)
-          when Array
-            HookedArray.new(obj, self)
-          when Hash
-            HookedHash.new(obj, self)
-          else
-            obj
-        end
-      end
-
+      # 读取时直接从@properties读取，写入时则调用update_properties这个统一的接口
       def self.property(*arr)
         arr.each do |x|
           define_method(x) do
@@ -39,26 +27,29 @@ module ShenmeGUI
 
       end
 
+      # 注意@default_properties都是未上钩子的属性，因为钩子本身需要控件的self，而此时控件还未实例化
       def self.default(params)
-        @default_properties = params
+        @default_properties ||= {}
+        @default_properties.merge!(params)
       end
 
       def self.default_properties
         @default_properties
       end
 
+      # 注册事件及获取事件的lambda，事件lambda存储在events属性里，最后的self是为了支持链式调用
       available_events = %w{click input dblclick mouseover mouseout blur focus mousedown mouseup change select}.collect(&:to_sym)
       available_events.each do |x|
         define_method("on#{x}") do |&block|
-          return events[x] if block.nil?
-          events[x] = lambda &block
+          return @events[x] if block.nil?
+          @events[x] = lambda &block
           self
         end
       end
 
       def sync
         data = @properties
-        validate @properties
+        before_sync
         msg = "sync:#{@id}->#{data.to_json}"
         ShenmeGUI.socket.send(msg)
       end
@@ -70,17 +61,19 @@ module ShenmeGUI
 
       def update_properties(data)
         data = Hash[data.keys.collect(&:to_sym).zip(data.values.collect{|x| add_hook(x)})]
-        @properties.update(data)
+        @properties.merge!(data)
       end
 
       def sync_events
         data = @events.keys
+        #return if data.empty?
         msg = "add_event:#{@id}->#{data.to_json}"
         ShenmeGUI.socket.send(msg)
       end
 
       def initialize(params={})
-        @properties = self.class.default_properties ? self.class.default_properties.dup : {}
+        @properties = {}
+        update_properties(self.class.default_properties.dup) if self.class.default_properties
         update_properties(params)
         @id = ShenmeGUI.elements.size
         ShenmeGUI.elements << self
@@ -97,11 +90,26 @@ module ShenmeGUI
         template.result(binding)
       end
 
-      def validate(params)
+      def before_sync
       end
 
-      property :width, :height, :font, :background, :margin, :border
+      property :width, :height, :font, :margin
 
+      private
+        #这里存在重复给某字符串加钩子的情况，真是有够难抓的BUG
+        def add_hook(obj)
+          #p obj.class
+          case obj
+            when String
+              HookedString.new(obj, self, :sync)
+            when Array
+              HookedArray.new(obj, self, :sync)
+            when Hash
+              HookedHash.new(obj, self, :sync)
+            else
+              obj
+          end
+        end
     end
 
     class Body < Base
@@ -129,11 +137,6 @@ module ShenmeGUI
     class Textline < Base
       property :text, :selection
       shortcut :text
-
-      def text=(v)
-        update_properties({text: v, selection: [v.size]*2 })
-        sync
-      end
     end
 
     class Textarea < Base
@@ -144,11 +147,6 @@ module ShenmeGUI
       def <<(t)
         text << "\n#{t}"
       end
-
-      def text=(v)
-        update_properties({text: v, selection: [v.size]*2 })
-        sync
-      end
     end
 
     class Stack < Base
@@ -172,9 +170,9 @@ module ShenmeGUI
       shortcut :percent
       default :width=>'100%'
 
-      def validate(params)
-        params[:percent] = 0 if params[:percent] < 0
-        params[:percent] = 100 if params[:percent] > 100
+      def before_sync
+        @properties[:percent] = 0 if @properties[:percent] < 0
+        @properties[:percent] = 100 if @properties[:percent] > 100
       end
     end
 
@@ -194,20 +192,33 @@ module ShenmeGUI
     end
 
     class Table < Base
-      property :data
+      #attr_accessor :row_names_enum
+      property :data, :max_column_width, :column_names, :row_names, :row_names_enum
       shortcut :data
       default :width=>'100%', :height=>'150px'
 
+      def before_sync
+        row_names_enum = @properties[:row_names_enum]
+        if row_names_enum
+          @properties[:row_names] = []
+          row_names_enum.rewind
+          @properties[:data].size.times do
+            @properties[:row_names] << row_names_enum.next
+          end
+        end
+      end
+
       def << row
         data << row
       end
     end
 
     controls = constants.reject{|x| x==:Base}
+    control_module = self
     controls.each do |x|
       ShenmeGUI.singleton_class.instance_eval do
         define_method "#{x}".downcase do |*arr, &block|
-          el = const_get("ShenmeGUI::Control::#{x}").new(*arr)
+          el = control_module.const_get(x).new(*arr)
           @temp_stack.last.children << el unless @temp_stack.empty?
           el.parent = @temp_stack.last unless @temp_stack.empty?
           @temp_stack << el

data/lib/shenmegui/core.rb

@@ -5,11 +5,21 @@ module ShenmeGUI
   @elements = []
   @temp_stack = []
 
+  # FakeSocket把send的内容都记录下来，在WebSocket连接建立时会将这些消息读出，转发到ws上
+  class FakeSocket
+    attr_reader :messages
+    def initialize
+      @messages = []
+    end
+    def send(msg)
+      @messages << msg
+    end
+  end
+
   class << self
-    attr_accessor :socket
-    attr_reader :this, :elements
+    attr_reader :this, :elements, :socket
 
-    def handle(msg)
+    def handle_message(msg)
       match_data = msg.match(/(.+?):(\d+)(?:->)?({.+?})?/)
       command = match_data[1].to_sym
       id = match_data[2].to_i
@@ -27,15 +37,21 @@ module ShenmeGUI
       end
       target
     end
+    private :handle_message
 
     def app(params={}, &block)
+      raise "ShenmeGUI app has been initialized" if @initialized
+      @initialized = true
+      @fake_socket = FakeSocket.new
+      @socket = @fake_socket
       body(params, &block)
       #找一个空闲的端口，不太好看
       temp_server = TCPServer.open('localhost', 0)
       @port = temp_server.addr[1]
       temp_server.close
+      @title = params[:title] || 'Application'
       app_dir = File.expand_path($PROGRAM_NAME).match(/(.+)\/.+/)[1]
-      File.open("#{app_dir}/index.html", 'w'){ |f| f.write @elements[0].render(port: @port) }
+      File.open("#{app_dir}/index.html", 'w'){ |f| f.write @elements[0].render(port: @port, title: @title) }
       nil
     end
 
@@ -70,41 +86,55 @@ module ShenmeGUI
       end
     end
 
+    def open_browser
+      app_dir = File.expand_path($PROGRAM_NAME).match(/(.+)\/.+/)[1]
+      index_path = "#{app_dir}/index.html"
+      if Gem.win_platform?
+        `start #{index_path}`
+      elsif Gem.platforms[1].os == 'linux'
+        `xdg-open #{index_path}`
+      elsif Gem.platforms[1].os == 'darwin'
+        `open #{index_path}`
+      end
+    rescue
+    end
+
     def start!
-      ws_thread = Thread.new do
-        EM.run do
-          EM::WebSocket.run(:host => "0.0.0.0", :port => @port) do |ws|
-            ws.onopen do
-              puts "WebSocket connection open"
-              @elements.each do |e|
-                e.sync_events
-                e.sync
+      EM.run do
+        EM::WebSocket.run(:host => "0.0.0.0", :port => @port) do |ws|
+          ws.onopen do
+            puts "WebSocket connection open"
+            # 同时只能有一个连接，而正常连接关闭的时候会把@socket指向FakeSocket，如果建立连接的时候发现@socket是WebSocket，便把连接关掉
+            @socket.close if @socket.respond_to? :close
+            @socket = ws
+
+            class << ws
+              alias :original_send :send
+              def send(msg)
+                puts "Sent: #{msg}"
+                original_send(msg)
               end
             end
 
-            ws.onclose { puts "Connection closed" }
-
-            ws.onmessage do |msg|
-              puts "Recieved message: #{msg}"
-              handle msg
+            @elements.each do |e|
+              e.sync_events
+              e.sync
             end
+            @socket.send(@fake_socket.messages.shift) until @fake_socket.messages.empty?
+          end
 
-            @socket = ws
+          ws.onclose do
+            puts "Connection closed"
+            @socket = @fake_socket
           end
+
+          ws.onmessage do |msg|
+            puts "Recieved: #{msg}"
+            handle_message msg
+          end
+
         end
       end
-      begin
-        app_dir = File.expand_path($PROGRAM_NAME).match(/(.+)\/.+/)[1]
-        index_path = "#{app_dir}/index.html"
-        if Gem.win_platform?
-          `start file:///#{index_path}`
-        elsif Gem.platforms[1].os == 'linux'
-          `xdg-open file:///#{index_path}`
-        end
-      rescue
-      end
-
-      ws_thread.join
     rescue Interrupt
       puts 'bye~'
     end

data/lib/shenmegui/file_dialog.rb

@@ -29,17 +29,17 @@ module ShenmeGUI
       int lpfnHook,
       LPCSTR lpTemplateName
     EOS
-    extern 'BOOL GetOpenFileName(struct OPENFILENAME*)'
-    extern 'BOOL GetSaveFileName(struct OPENFILENAME*)'
+    extern 'BOOL GetOpenFileNameW(struct OPENFILENAME*)'
+    extern 'BOOL GetSaveFileNameW(struct OPENFILENAME*)'
     extern 'HWND GetForegroundWindow()'
 
     def self.construct_OPENFILENAME(params={})
-      filter = params[:filter] ? "#{params[:filter]}\0#{params[:filter]}\0\0" : 0
+      filter = params[:filter] ? "#{params[:filter]}\0#{params[:filter]}\0\0".encode('UTF-16LE') : 0
       title = params[:title] || 0
       flags = 0x00880000
       flags += 0x00000200 if params[:multi_select]
       flags += 0x10000000 if params[:show_hidden]
-      initial_path = params[:initial_path] ? params[:initial_path] : 0
+      initial_path = params[:initial_path] ? params[:initial_path].encode('UTF-16LE') : 0
 
       path = "\0" * 1024
       ofn = Struct_OPENFILENAME.malloc
@@ -69,19 +69,20 @@ module ShenmeGUI
 
     def self.get_open_file_name(params={})
       ofn, path = construct_OPENFILENAME(params)
-      GetOpenFileName(ofn)
+      GetOpenFileNameW(ofn)
       Fiddle.free(ofn.to_i)
-      path = path.split("\0")
+      path = path.force_encoding('UTF-16LE').encode('UTF-8').split("\0")
       path = path[1..-1].collect{|x| "#{path[0]}\\#{x}"} if path.size > 1
-      path.collect{|x| x.force_encoding('GBK').encode('UTF-8')}
       path.size > 1 ? path : path[0]
     end
 
     def self.get_save_file_name(params={})
+      #禁止保存文件多选
+      params[:multi_select] = false
       ofn, path = construct_OPENFILENAME(params)
-      GetSaveFileName(ofn)
+      GetSaveFileNameW(ofn)
       Fiddle.free(ofn.to_i)
-      path.force_encoding('GBK').encode('UTF-8')
+      path.force_encoding('UTF-16LE').encode('UTF-8').split("\0")
     end
 
   #avoid error under linux
@@ -99,4 +100,4 @@ module ShenmeGUI
 
 end
 
-#ShenmeGUI::FileDialog.get_open_file_name(initial_path: 'C:\\')
+#puts ShenmeGUI::FileDialog.get_open_file_name(initial_path: 'D:\\迅雷下载', multi_select: true, filter: '*.中文')

data/lib/shenmegui/utils.rb

@@ -1,3 +1,4 @@
+# 用在控件的属性上，给Array String Hash加上钩子，监视其对自身的操作，一旦内容有改变立刻请求同步控件属性
 module ShenmeGUI
   @unhook_methods = {
     array: %i{<< []= clear collect! compact! concat delete delete_at delete_if fill flatten! replace insert keep_if map map! pop push reject! replace rotate! select! shift shuffle! slice! sort! sort_by! uniq! unshift},
@@ -7,8 +8,9 @@ module ShenmeGUI
   @unhook_methods.each do |k, v|
     const_set("Hooked#{k.to_s.capitalize}", Class.new(const_get(k.to_s.capitalize)))
     const_get("Hooked#{k.to_s.capitalize}").class_eval do
-      def initialize(obj, owner)
+      def initialize(obj, owner, callback)
         @owner = owner
+        @callback = callback
         super(obj)
       end
 
@@ -16,7 +18,7 @@ module ShenmeGUI
       methods.each do |k, v|
         define_method(k) do |*arr, &block|
           result = v.bind(self).call(*arr, &block)
-          @owner.sync
+          @owner.send(@callback)
           result
         end
       end

data/static/script.js

@@ -7,12 +7,17 @@ var websocket =
 		console.log("Connected.");
 	};
 	websocket.onmessage = function(evt){
-		console.log(evt.data);
+		console.log("received: " + evt.data);
 		handleMessage(evt.data);
 	};
 	websocket.onclose = function(evt){
 		console.log("Closed.");
 	};
+	websocket.originalSend = websocket.send;
+	websocket.send = function(msg){
+		console.log("sent: " + msg);
+		websocket.originalSend(msg);
+	}
 	return websocket;
 })();
 
@@ -97,7 +102,7 @@ function getId(obj){
 
 var syncHandlers = {
 	base: (function(target, data){
-		var properties = ['width', 'height', 'font', 'margin', 'background', 'border'];
+		var properties = ['width', 'height', 'font', 'margin'];
 		for(var i=0;i<properties.length;i++){
 			if(data[properties[i]]!=undefined) target.style[properties[i]] = data[properties[i]];
 		}
@@ -108,27 +113,19 @@ var syncHandlers = {
 	}),
 
 	form: (function(target, data){
-		target.getElementsByClassName('title')[0].getElementsByTagName('span')[0].innerText = data.title;
+		target.getElementsByClassName('title')[0].getElementsByTagName('span')[0].textContent = data.title;
 	}),
 
 	button: (function(target, data){
-		target.innerText = data.text;
+		target.textContent = data.text;
 	}),
 
 	textline: (function(target, data){
 		target.value = data.text;
-		if(data.selection){
-			target.selectionStart = data.selection[0];
-			target.selectionEnd = data.selection[1];
-		}
 	}),
 
 	textarea: (function(target, data){
 		target.value = data.text;
-		if(data.selection){
-			target.selectionStart = data.selection[0];
-			target.selectionEnd = data.selection[1];
-		}
 	}),
 
 	image: (function(target, data){
@@ -156,7 +153,7 @@ var syncHandlers = {
 			var label = document.createElement('label');
 			input.type = 'checkbox';
 			input.value = data.options[i];
-			label.innerText = data.options[i];
+			label.textContent = data.options[i];
 			option.appendChild(input);
 			option.appendChild(label);
 			target.appendChild(option);
@@ -182,7 +179,7 @@ var syncHandlers = {
 			input.type="radio";
 			input.value = data.options[i];
 			input.name = "radio";
-			label.innerText = data.options[i];
+			label.textContent = data.options[i];
 			option.appendChild(input);
 			option.appendChild(label);
 			target.appendChild(option);
@@ -198,25 +195,45 @@ var syncHandlers = {
 		for(var i=0;i<data.options.length;i++){
 			var option = document.createElement('option');
 			option.value = data.options[i];
-			option.innerText = data.options[i];
+			option.textContent = data.options[i];
 			target.appendChild(option);
 		}
 	}),
 
 	label: (function(target, data){
-		target.innerText = data.text;
+		target.textContent = data.text;
 	}),
 
 	table: (function(target, data){
 		for(var i=0;i<target.children.length;) target.removeChild(target.children[i]);
 		var tableData = data.data;
-		var columnSize = tableData[0].length;
 		var table = document.createElement('table');
+		var columnNames = data.column_names;
+		var rowNames = data.row_names;
+		if (columnNames) {
+			var tr = document.createElement('tr');
+			if (rowNames) {
+				var th = document.createElement('th');
+				th.textContent = '';
+				tr.appendChild(th);
+			}
+			for(var i=0; i<columnNames.length; i++ ){
+				var th = document.createElement('th');
+				th.textContent = columnNames[i] || '';
+				tr.appendChild(th);
+			}
+			table.appendChild(tr);
+		}
 		for(var i=0; i<tableData.length; i++){
 			var tr = document.createElement('tr');
-			for(var j=0; j<columnSize; j++){
+			if(rowNames){
+				var th = document.createElement('th');
+				th.textContent = rowNames[i] || '';
+				tr.appendChild(th);
+			}
+			for(var j=0; j<tableData[i].length; j++){
 				var td = document.createElement('td');
-				td.innerText = tableData[i][j];
+				td.textContent = tableData[i][j];
 				tr.appendChild(td);
 			}
 			table.appendChild(tr);

data/static/style.css

@@ -131,7 +131,8 @@ input[type="radio"]:checked + label:before {
 
 .table {
   background-color: #808080;
-  overflow: auto; }
+  overflow: auto;
+  padding: 0 0 10px 0; }
 
 table {
   border-collapse: collapse;
@@ -140,6 +141,23 @@ table {
 td {
   vertical-align: baseline;
   padding: 3px 15px 3px 3px;
-  border: 1px solid #d4d0c8; }
+  border: 1px solid #bfbfbf;
+  overflow: auto; }
+
+th {
+  background-color: #bfbfbf;
+  padding: 3px 0 3px 9px;
+  border: 1px solid #808080;
+  border-left-color: #fff;
+  box-sizing: border-box; }
+
+tr th:last-child {
+  border-right-color: #bfbfbf; }
+
+table tr:first-child th {
+  border-top-color: #fff; }
+
+table tr:last-child th {
+  border-bottom-color: #bfbfbf; }
 
 /*# sourceMappingURL=style.css.map */

data/templates/body.erb

@@ -2,7 +2,7 @@
 <html lang="zh">
 <head>
 	<meta charset="UTF-8">
-	<title>Application</title>
+	<title><%= material[:title] %></title>
 	<style>
 		<%= material[:style] %>
 	</style>

data/templates/label.erb

@@ -1 +1 @@
-<div id="item-<%= id %>" class="label" data-type="label"><%= text %></div>
+<div id="item-<%= id %>" class="label" data-type="label"></div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shenmegui
 version: !ruby/object:Gem::Version
-  version: 0.3.6
+  version: '0.4'
 platform: ruby
 authors:
 - CicholGricenchos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-02 00:00:00.000000000 Z
+date: 2015-07-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: em-websocket