控件

#####定义 SheneGUI的控件均通过DSL语句定义，有些控件可以定义时直接传入一个属性参数，更多的属性参数则可通过Hash参数传入，也可以通过tap等后续进行设置。

textarea('text', width:'100%', height:'100px')
textarea(width:'100%').tap do |t|
  t.text = 'text'
  t.height = '100px'
end

控件定义时还可以接受一个代码块，代码块里定义的控件会以上一层控件为父元素，同时也会被加到父元素的子元素数组里（主要用于form，stack，flow）。

form(title: 'Application') do
  textarea 'text', width:'100%'
  stack do
    button 'a button'
    checkbox ['option a', 'option b'], checked:['option a'], arrange:'horizontal'
  end
end

#####通用属性 除了每个控件特有的属性，控件还有4个通用属性：
width, height, font, margin
它们直接对应控件的CSS属性，可参照CSS中缩写属性的定义。

#####通用实例方法 focus：可以将焦点转向调用者控件
children：返回控件的子元素数组
parent：返回控件的父元素
id：返回控件的id，所有控件都保存在 ShenmeGUI.elements 数组内，可以用id进行索引

#####类方法 为了便于理解，下面我会直接展示各个控件的源码。
控件继承于ShenmeGUI::Control::Base，再用几个类方法声明属性。

property：表示控件拥有的属性
shortcut：控件可在定义时直接传入的参数，设置了此项之后就可以将button(text: 'hw')简化为button('hw')
default：设置控件属性的默认值

最后把这些控件的类名转换成小写，就是ShenmeGUI.app中用的DSL了。

---

###窗体（Form） 装载内容的窗体，窗体可以有多个，目前使用float布局

class Form < Base
  property :title
  default :width=>'400px'
end

#####可用属性 title：窗体标题

---

###按钮控件（Button） 一个可点击的按钮

class Button < Base
  property :text
  shortcut :text
end

#####可用属性 text：按钮上的文本

---

###文本标签控件（Label） 以加粗的字体显示一些文字，用于指示

class Label < Base
  property :text
  shortcut :text
end

#####可用属性 text：标签上的文本

---

###单行文本框控件（Textline） 获取或展示文本

class Textline < Base
  property :text, :selection
  shortcut :text
end

#####可用属性 text：文本
selection：
一个指示光标位置的数组，索引0为文本选择的起始位置，索引1为结束位置，若两个值相等则表示没有文本选择，数值为光标所在位置。
配合select事件可以获取选中的文本：
this.text[this.selection[0]...this.selection[1]]。

---

###文本域控件（Textarea） 获取或展示多行文本

class Textarea < Base
  property :text, :selection
  shortcut :text
  default :width=>'250px', :height=>'60px'

  def <<(t)
    text << "\n#{t}"
  end
end

#####可用属性 text：文本
selection：参照textline的selection属性。

#####可用方法 <<(txt)：追加一个换行符及传入的文本

---

###图片控件（Image） 显示图片

class Image < Base
  property :src
  shortcut :src
end

#####可用属性 src：图片链接，可填入http链接或本地链接

---

###进度条控件（Progress） 显示进度条

class Progress < Base
  property :percent
  shortcut :percent
  default :width=>'100%'

  def before_sync
    @properties[:percent] = 0 if @properties[:percent] < 0
    @properties[:percent] = 100 if @properties[:percent] > 100
  end
end

#####可用属性 percent：百分比数字，若超出100会维持100，低于0会维持0

#####说明 这里的before_sync是控件向前端同步之前会执行的一个回调，它在这里做的事是检查进度条百分比有没有超过限制，如果有便重置百分比。

---

###单选框控件（Radio） 显示一组单选框

class Radio < Base
  property :options, :checked, :arrange
  shortcut :options
end

#####可用属性 options：一个字符串数组，以表示各个选项
checked：当前选中的值，为字符串
arrange：排列方式，可能为水平'horizontal'或垂直'vertical'

---

###复选框控件（Checkbox） 显示一组复选框

class Checkbox < Base
  property :options, :checked, :arrange
  shortcut :options
end

#####可用属性 options：一个字符串数组，以表示各个选项
checked：处于选中状态的值，为一个字符串数组
arrange：排列方式，可能为水平'horizontal'或垂直'vertical'

---

###下拉选择框控件（Select） 显示一个下拉选择框

class Select < Base
  property :options, :checked
  shortcut :options
end

#####可用属性 options：一个字符串数组，以表示各个选项
checked：当前选中的值，为字符串

---

###表格（Table） 显示一个表格

class Table < Base
  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

#####可用属性 data: 表格数据，不包含列名和行名，是一个二维字符串数组，也是实际显示中白底的那部分
max_column_width：HTML中，列的宽度是根据列中元素的宽度自动变化的，这里可以设置一个最大值
column_names：一个字符串数组，表示每列的标题
row_names：一个字符串数组，表示每行的标题
row_names_enum：行名的枚举器，设置了此项则row_names将会由枚举器生成。例如传入(1..Float::INFINITY).to_enum会生成自然数的行号

#####说明 表格也用到了before_sync，若row_names_enum存在，按data的行数用row_names_enum生成row_names。

---

###堆叠层（Stack） 处于堆叠层里的控件（仅限子元素）会竖直堆叠显示，实际上是通过CSS的display:block运作的

class Stack < Base
end

---

###浮动层（Flow） 处于浮动层里的控件（仅限子元素）会水平浮动显示，实际上是通过CSS的display:inline-block运作的

class Flow < Base
end

---