update

example/app.rb

@@ -4,9 +4,9 @@
   form title: 'test' do
     button('open file').onclick { @text.text = ShenmeGUI::FileDialog.get_open_file_name; @i.src="file:///#{@text.text}" }
     @sel = select %w{1 2 3}
-    flow do
-      radio %w{option1 option2 option3}
-    end
+
+    radio %w{option1 option2 option3}, arrange: 'horizontal'
+
     radio %w{option7 option8 option9}, checked: 'option9'
 
     button('alert').onclick { alert 'test message'}

lib/shenmegui/controls.rb

@@ -144,7 +144,7 @@ class Image < Base
     end
 
     class Checkbox < Base
-      property :options, :checked
+      property :options, :checked, :arrange
       shortcut :options
     end
 
@@ -159,7 +159,7 @@ def validate(params)
     end
 
     class Radio < Base
-      property :options, :checked
+      property :options, :checked, :arrange
       shortcut :options
     end
 

shenmegui.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name        = 'shenmegui'
-  s.version     = '0.1.1'
+  s.version     = '0.2'
   s.date        = '2015-03-11'
   s.summary     = "什么鬼!"
   s.description = "a simple HTML GUI for Ruby"

static/script.js

@@ -102,7 +102,7 @@ var syncHandlers = {
 	}),
 
 	form: (function(target, data){
-		target.getElementsByClassName('title').getElementsByTagName('span')[0].innerText = data.title;
+		target.getElementsByClassName('title')[0].getElementsByTagName('span')[0].innerText = data.title;
 	}),
 
 	button: (function(target, data){
@@ -131,10 +131,13 @@ var syncHandlers = {
 	}),
 
 	checkbox: (function(target, data){
+		if(data.arrange=='horizontal') target.className = 'flow';
+		if(data.arrange=='vertical') target.className = 'stack';
 		var options = target.children;
 		for(var i=0;i<options.length;) target.removeChild(options[i]);
 		for(var i=0;i<data.options.length;i++){
 			var option = document.createElement('div');
+			option.className = "option";
 			var input = document.createElement('input');
 			var label = document.createElement('label');
 			input.type = 'checkbox';
@@ -153,10 +156,13 @@ var syncHandlers = {
 	}),
 
 	radio: (function(target, data){
+		if(data.arrange=='horizontal') target.className = 'flow';
+		if(data.arrange=='vertical') target.className = 'stack';
 		var options = target.children;
 		for(var i=0;i<options.length;) target.removeChild(options[i]);
 		for(var i=0;i<data.options.length;i++){
 			var option = document.createElement('div');
+			option.className = "option";
 			var input = document.createElement('input');
 			var label = document.createElement('label');
 			input.type="radio";

static/style.scss

@@ -42,11 +42,11 @@ body {
   }
 }
 
-.stack * {
+.stack>* {
   display: block !important;
 }
 
-.flow * {
+.flow>* {
   display: inline !important;
 }
 
@@ -144,7 +144,7 @@ input[type="radio"]:checked + label:before {
   height: 18px;
 }
 
-.radio>div, .checkbox>div {
+.option {
   margin-right: 1em;
 }