2013年12月19日

WSCheckBox

DXRubyWSでコントロールを作ろう第二段! 今回はチェックボックスを作ってみました。

    # クリックされた場合真偽値を入れ替える
    def on_click(tx, ty)
      @data = !@data
      super
    end 

trueとfalseを入れ替えるだけなので処理の実体はこの四行だけです。
他は全部描画関係です。
説明以上!

以下ソース


# coding: utf-8

module WS
  class WSCheckBox < WSControl
    
    # 定数
    C_CBBASE  = [255,255,255]
    C_CBLINES = [80,80,80]
    C_CBLINEM = [160,160,160]
    C_CBLINEH = [240,240,240]
    C_CHECK   = [  0,  0,  0]
    
    # 公開インスタンス
    attr_accessor :caption, :fore_color, :data

    # Mix-In
    include Focusable
    include ButtonClickable
    
    def initialize(tx, ty, width, caption = "")
      super(tx, ty, width, 16)
      @image      = {}
      @data       = false
      @caption    = caption
      @fore_color = C_BLACK
      # 画像を作成する
      set_image
    end
    
    # チェックボックスの画像を設定
    def set_image
      sx = 1
      sy = 1
      ex = 14
      ey = 14
      @image[false] = Image.new(16, 16)
                     .line(sx, sy, sx, ey, C_CBLINES)
                     .line(sx, sy+1 , ex, sy+1 , C_CBLINES)
                     .line(sx, sy , ex, sy, C_CBLINES)
                     .line(sx+1, sy ,sx+1, ey, C_CBLINES)
                     .line(sx+1,ey-1,ex-1,ey-1, C_CBLINEM)
                     .line(sx, ey, ex, ey, C_CBLINEH)
                     .line(ex-1, sy+1, ex-1, ey-1, C_CBLINEM)
                     .line(ex, sy, ex, ey, C_CBLINEH)
                     .box_fill(sx+2, sy+2, ex-2, ey-2, C_CBBASE)
                     
      @image[true] = Image.new(16, 16)
                     .line(sx, sy, sx, ey, C_CBLINES)
                     .line(sx, sy+1 , ex, sy+1 , C_CBLINES)
                     .line(sx, sy , ex, sy, C_CBLINES)
                     .line(sx+1, sy ,sx+1, ey, C_CBLINES)
                     .line(sx+1,ey-1,ex-1,ey-1, C_CBLINEM)
                     .line(sx, ey, ex, ey, C_CBLINEH)
                     .line(ex-1, sy+1, ex-1, ey-1, C_CBLINEM)
                     .line(ex, sy, ex, ey, C_CBLINEH)
                     .box_fill(sx+2, sy+2, ex-2, ey-2, C_CBBASE)
                     .line(sx+3, ey-5, sx+5, ey-3, C_CHECK)
                     .line(sx+3, ey-6, sx+5, ey-4, C_CHECK)
                     .line(sx+3, ey-7, sx+5, ey-5, C_CHECK)
                     .line(sx+3, ey-8, sx+5, ey-6, C_CHECK)
                     .line(sx+6, ey-4, ex-3, ey-8, C_CHECK)
                     .line(sx+6, ey-5, ex-3, ey-9, C_CHECK)
                     .line(sx+6, ey-6, ex-3, ey-10, C_CHECK)
                     .line(sx+6, ey-7, ex-3, ey-11, C_CHECK)
    end
    
    ### イベント ###
    # クリックされた場合真偽値を入れ替える
    def on_click(tx, ty)
      @data = !@data
      super
    end 

    ### 描画 ###    
    def draw
      # コントロールの状態を参照して画像を変更
      self.image = @image[@data]
      super
      # キャプションを描画
      if @caption.length > 0
        width = @font.get_width(@caption)
        self.target.draw_font(self.x + 20 , self.y , @caption, @font, :color=>@fore_color)
      end
    end
  end
end
 


posted by 鳴海つかさ at 20:18| Comment(0) | TrackBack(0) | DXRuby

2013年12月15日

数値入力コントロールの続き アレンジ版

昨日の続きです。

数値入力コントロールを改造してみました。

主な変更点としては

数値入力の最大値、最小値の設定を追加
ボタンを押した時のステップ値の設定を追加
スピンボタンを四つに増やし押した時の増減量に大小をつけました

新規キャンバス.jpg

後はコードを少し整理しました。

昨日書いたアレンジ案そのままですね。

こういったアレンジが簡単であるのもDXRubyWindowSystemの便利なところですね。



以下実際のコードです。


# coding: utf-8
require_relative 'button'
require_relative 'textbox'

module WS
class WSNumberInput < WSContainer

### 公開インスタンス###
attr_accessor :min, :max, :small, :big

### スピンボタンの定義 ###
class WSSpinButton < WSButtonBase
include Focusable
include RepeatClickable # リピートクリック用モジュール
end

# 初期化
def initialize(tx, ty, width, height)
super(tx, ty, [width, 72].max, [height, 20].max)
@data = 0
@min = 0
@max = 99999
@small = 1
@big = 10
create_controls
set_text
end

# コントロールの作成
def create_controls
# テキストボックスの作成
c_numtext = WSTextBox.new(0, 0, width - 48, height)
# スピンボタン変動小の作成
font_s = Font.new(8)
c_b_add_s = WSSpinButton.new(width - 48, 0, 24, height / 2, "▲")
c_b_add_s.font = font_s
c_b_add_s.add_handler(:click, self.method(:click_add_button_s))
c_b_sub_s = WSSpinButton.new(width - 48, height / 2, 24, height / 2, "▼")
c_b_sub_s.font = font_s
c_b_sub_s.add_handler(:click, self.method(:click_sub_button_s))
# スピンボタン変動大の作成
font_b = Font.new(10)
c_b_add_b = WSSpinButton.new(width - 24, 0, 24, height / 2, "▲")
c_b_add_b.font = font_b
c_b_add_b.add_handler(:click, self.method(:click_add_button_b))
c_b_sub_b = WSSpinButton.new(width - 24, height / 2, 24, height / 2, "▼")
c_b_sub_b.font = font_b
c_b_sub_b.add_handler(:click, self.method(:click_sub_button_b))

# コントロールの登録
add_control(c_numtext, :c_numtext)
add_control(c_b_add_s)
add_control(c_b_sub_s)
add_control(c_b_add_b)
add_control(c_b_sub_b)
end

# 加算ボタン小の押下処理
def click_add_button_s(obj, tx, ty)
@data = [@data + @small, @max].min
set_text
end

# 減算ボタン小の押下処理
def click_sub_button_s(obj, tx, ty)
@data = [@data - @small, @min].max
set_text
end

# 加算ボタン大の押下処理
def click_add_button_b(obj, tx, ty)
@data = [@data + @big, @max].min
set_text
end

# 減算ボタン大の押下処理
def click_sub_button_b(obj, tx, ty)
@data = [@data - @big, @min].max
set_text
end

### スタイル ###
# 限界値の設定

def limit(min , max)
@min = min
@max = max
end

# ステップ値の設定
def step(small , big)
@small = small
@big = big
end

# 更新
def update
super
check_text
end

# テキストに数字以外のものが入っていないかをチェックし、データに反映する
def check_text
num_text = self.c_numtext.text
num = self.c_numtext.text.to_i
if num_text != "0" && num == 0 || num_text != num.to_s
self.c_numtext.text = @data.to_s
else
@data = [[num, @min].max, @max].min
set_text unless num >= @min && num <= @max
end
end

# テキストボックスにテキストを設定
def set_text
self.c_numtext.text = @data.to_s
end

end
end
 


posted by 鳴海つかさ at 18:31| Comment(0) | TrackBack(0) | DXRuby