RubyMotionでPixateを使ってみる

rubymotion pixate

とても簡単でいい感じのPixateですが
RubyMotionで利用できるとのことなので試してみました。

参考動画

Pixate and RubyMotion - Getting Started - YouTubeを見てやってみました。

やってみる

install
gem i motion-pixate
vendor以下にPXEngine.frameworkを置く
mkdir vendor
ln -s ~/lib/Pixate/Frameworks/PXEngine.framework
cssを用意する

default.cssを作成(resources/以下に作成)

あとは

Rakefile、とapp_delagate.rb、default.cssを修正するだけ。
簡単!!


Rakefile

# -*- coding: utf-8 -*-
$:.unshift("/Library/RubyMotion/lib")
require 'motion/project'
require 'rubygems'
require 'motion-pixate'

Motion::Project::App.setup do |app|
  # Use `rake config' to see complete project settings.
  app.name = 'PXButton'

  # ライセンス購入者用
  #app.pixate.user = 'License Serial Name'
  #app.pixate.key  = 'License Serial Number'
  app.pixate.framework = 'vendor/PXEngine.framework'
end


app_delegate.rb

class AppDelegate
  def application(application, didFinishLaunchingWithOptions:launchOptions)
    @window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)
    @button = UIButton.buttonWithType(UIButtonTypeRoundedRect)
    @button.setTitle('Hello World', forState:UIControlStateNormal)
    @button.frame = [[120, 50], [90, 40]]
    @button.styleId = 'myButton'
    @button.styleClass = 'myButtonSet'

    @button2 = UIButton.buttonWithType(UIButtonTypeRoundedRect)
    @button2.setTitle('Hello Again', forState:UIControlStateNormal)
    @button2.frame = [[120, 100], [90, 40]]
    @button.styleClass = 'myButtonSet'

    @window.addSubview(@button)
    @window.addSubview(@button2)
    @window.makeKeyAndVisible
  end
end


default.css

button {
  background-color: linear-gradient(#87c44a, #b4da77);
  border-radius: 6px;
  border-color: black;
  border-width: 1px;
}

#myButton {
  background-color: linear-gradient(yellow, red);
  border-radius: 6px;
  border-color: black;
  border-width: 1px;
}

.myButtonSet {
  font-weight: bold;
}

関連

・pixateを使ってみる - うんたらかんたら日記
・pixateでリアルタイム更新 - うんたらかんたら日記