第7項. ネイティブツールバー機能

ネイティブツールバー機能の説明をする。ネイティブツールバーは、ページの下部にある、小さなスペースに表示されます。
ネイティブツールバーは、iPhone, Android, WindowsMobileでサポートされています。

 1. ネイティブツールバーアプリケーション起動時に設定する

ネイティブツールバーアプリケーション起動時に設定するには、/app/application.rbのinitializeメソッドにクラス変数@@toolbarをsuperの前に追加する必要があります。値の指定方法は、配列です。配列の要素は、Hash形式になります。

 

def initialize
  @@toolbar = [
      {:action => :back,   
        :icon => '/public/images/back_btn.png'},
      {:action => :forward,
        :icon => '/public/images/forward_btn.png'},
      {:action => :separator},
      {:action => :home},
      {:action => :refresh},
      {:action => :options}
    ]
  super
end

 

配列の要素に指定できる値は以下となります。

 

  • ● :label ・表示されるリンク文字列を設定する。
  • ● :action ・選択したときに、移動するリンク先URLを設定する。
  • ● :icon ・表示するアイコンのパスを設定する。
  • ● :colored_ic[nishima 5]on ・画像をカラー表示させるかどか(iOSだと白黒表示になるため)
  • ● :width ・表示する幅を設定する。この要素は、WindowsMobileのみサポートされている。


ユーザ定義のアクションでは、:label、:iconのいずれかが、指定されていないと、リンクを追加しない。また、:label,:iconの両方が指定されている場合は、:labelは破棄される。

:actionに指定するURLの先頭に「”callback:”」をつけることで、バックグラウンドで実行させることができます。

iPhoneとAndroidでは、アイコンのサイズ30x30ピクセル以下のPNG形式の画像にする必要があります。WindowsMobileのアイコンサイズの指定はありませんが、すべてのアイコンのサイズが同じである必要があります。デフォルトは48x48ピクセルです。

 

 2. ネイティブツールバーAPIを使用する

ネイティブツールバーAPIを使用して、ツールバーの作成、削除をすることができます。
指定できるオプションは以下とします。

 

require 'rho/rhotoolbar'
Rho::NativeToolbar.create(:buttons => toolbar, :background_color => 0x0000FF)

 

  • ● :background_color ・背景色を指定する。
  • ● :mask_color  - 画像のマスク色を変更する。このオプションはWindowsMobileでmのみサポートしている。
  • ● :view_height ・ツールバーの高さを設定する。このオプションはWindowsMobileでmのみサポートしている。

 

ツールバーを削除するには、


require 'rho/rhotoolbar'
Rho::NativeToolbar.remove

システム工房エムのサイトへのリンク

住所〒690-0017 島根県松江市西津田3-2-3 TEL.0852-23-8590 FAX.0852-23-8591
Copyright 2008-2010 System Maker M,All right reserved