Android ビルドバージョンで処理を分岐する

Build.VERSION クラスで端末のビルドバージョンを取得することができます。

Build.VERSION.SDK_INT には、フレームワークの SDK バージョンが数値ではいっています。この数値は Build.VERSION_CODES で定数として定義されているので、比較することで任意のビルドバージョンで処理をわけることができます。

view plainprint?

1. if(Build.VERSION.SDK_INT == Build.VERSION_CODES.GINGERBREAD_MR1) {  
2.   
3.   // 2.3.3 向けの処理  
4.   
5.   
6. } else {  
7.   
8. 　// 2.3.3 以外向けの処理  
9.   
10. }  

if(Build.VERSION.SDK_INT == Build.VERSION_CODES.GINGERBREAD_MR1) {

  // 2.3.3 向けの処理


} else {

　// 2.3.3 以外向けの処理

}

view plainprint?

1. if(Integer.parseInt(Build.VERSION.SDK) == Build.VERSION_CODES.CUPCAKE) {  
2.             // for 1.5  
3. }  
4. else {  
5.     switch(Build.VERSION.SDK_INT) {  
6.         case Build.VERSION_CODES.DONUT:  
7.             // for 1.6  
8.             break;  
9.         case Build.VERSION_CODES.ECLAIR_MR1:  
10.             // for 2.1  
11.             break;  
12.         case Build.VERSION_CODES.FROYO:  
13.             // for 2.2  
14.             break;  
15.         case Build.VERSION_CODES.GINGERBREAD:  
16.             // for 2.3  
17.             break;  
18.         case Build.VERSION_CODES.GINGERBREAD_MR1:  
19.             // for 2.3.3  
20.             break;  
21.         case Build.VERSION_CODES.HONEYCOMB:  
22.             // for 3.0  
23.             break;  
24.         default:  
25.             break;  
26.     }  
27. }  

if(Integer.parseInt(Build.VERSION.SDK) == Build.VERSION_CODES.CUPCAKE) {
            // for 1.5
}
else {
    switch(Build.VERSION.SDK_INT) {
        case Build.VERSION_CODES.DONUT:
            // for 1.6
            break;
        case Build.VERSION_CODES.ECLAIR_MR1:
            // for 2.1
            break;
        case Build.VERSION_CODES.FROYO:
            // for 2.2
            break;
        case Build.VERSION_CODES.GINGERBREAD:
            // for 2.3
            break;
        case Build.VERSION_CODES.GINGERBREAD_MR1:
            // for 2.3.3
            break;
        case Build.VERSION_CODES.HONEYCOMB:
            // for 3.0
            break;
        default:
            break;
    }
}

・ 主な Build.VERSION_CODES の定数

　CUPCAKE
　　　May 2009: Android 1.5

　DONUT
　　　September 2009: Android 1.6

　ECLAIR
　　　November 2009: Android 2.0

　ECLAIR_0_1
　　　December 2009: Android 2.0.1

　ECLAIR_MR1
　　　January 2010: Android 2.1

　FROYO
　　　June 2010: Android 2.2

　GINGERBREAD
　　　November 2010: Android 2.3

　GINGERBREAD_MR1
　　　Almost newest version of Android, version 2.3.3

　HONEYCOMB
　　　Newest version of Android, version 3.0


# Build.VERSION.SDK に数字以外の文字列が入ると
# NumberFormatException になります。
# 安全なコードにしたいなら、try-catch するか、
# if(Build.VERSION.SDK.equals(String.valueOf(Build.VERSION_CODES.CUPCAKE)))
# なのかなぁ。
# ちなみに、Android Developers Blog: How to have your (Cup)cake and eat it too
# では、parseInt() 使ってました。

　　

Android Xoom で ApiDemos を動かしてみた。

■ ApiDemos を Eclipse に取り込む

　[File] - [New] - [Android Project] で

　Build Target で Android 3.0 を選択したのち、

　Create from existing source で ApiDemos を選択する




■ エラーを直す

FragmentListCursorLoader.java にエラーがでる

　とりあえず @Override を外す






■ 実行してみた

・ Android 3.0 っぽいの

　[Animation] - [*]
　[App] - [Alert Dialogs] - [OK Cancel dialog with Holo Light theme]
　[App] - [Fragment]
　[App] - [Menu]
　[App] - [Notification]
　[App] - [Search] Global Search はちょっとカッコ悪い
　[Content] - [Clipboard]
　[Preference] - [1. Preference from XML] Preference自体はダイアログのようだが、そこから遷移する Screen Preference はダイアログのようにならない。
　[Preference] - [7. Fragment] フラグメントっぽくない
　[Preference] - [8. Headers] これがフラグメントっぽい
　[Views] - [Popup Menu]
　[Views] - [Rotating Button] 面白い！
　[Views] - [Search View] - [*]
　[Views] - [Splitting Touches across Views]
　[Views] - [Tabs] - [5. Scrollable] 表示が変？
　[Views] - [Tabs] - [6. Right aligned] 通常との違いがよくわからない。。。

・ うまく動かない/落ちる

　[App] - [Action Bar] 落ちる
　[Graphics] - [CameraPreview] 落ちる
　[Graphics] - [Clipping] 落ちる
　[Graphics] - [MeasureText] 赤線が表示されない
　[Graphics] - [OpenGL ES] - [Hidden Activity] 落ちる
　[Graphics] - [Pictures] 落ちる
　[Graphics] - [SensorTest] 動かない
　[Graphics] - [Sweep] 動かない
　[Graphics] - [TextAlign] 一部文字がでない
　[Graphics] - [UnicodeChart] 文字がでない
　[Graphics] - [Vertices] 絵がでない
　[Graphics] - [Xfermodes] Activity が終了する
　[NFC] - [ForegroundDispatch] 落ちる
　[OS] - [Sensor] うまく表示されない
　[Text] - [Marquee] 動かない
　[Views] - [Layout Animation] - [2. List Cascade] うまく動かない
　[Views] - [Lists] - [12. Transcript] うまく動かない
　[Views] - [Lists] - [15. Selection Mode] 落ちる
　[Views] - [Lists] - [16. Border selection mode] 落ちる

・ Android 2.3.3 以前と挙動が違う

　[App] - [Translucent] は背景が暗くなる
　[App] - [Translucent Blur] は背景がほとんど真っ黒になる
　[Graphics] - [FingerPaint] かなり滑らか、素早く円を描いてもカクカクにならない
　[Views] - [Controls] [2. Dark Theme] 背景が真っ黒ではなく、グラデーションがかっている
　[Views] - [Expandable List] マークの位置が変



　

GWT with Slim3 - プロジェクトの作成 -

基本的には、スタートガイド with GWT - Slim3 日本語サイト(非公式) - にとてもわかりやすく書いてあるので、ここを見ればOK。


0. 準備

　・JDK
　・Eclipse
　・Google Plugin (日本語の方は情報が古いので注意してね)
　・Slim3 Plugin
　　　　[Help] - [Install New Software...] で
　　　　 http://slim3.googlecode.com/svn/updates/ を追加




1. プロジェクトの作成

　[File] - [New] - [Project...] で [Slim3] - [Slim3 Project] を選択して Next をクリック



　Project name, Root Package を入力し、Use Google Web Toolkit を選択して Finish をクリック



　Generate a Module, and Entry Point and a Host Page に
　チェックを入れておくと
　　・war/index.html
　　・[Root Package]/Main.gwt.xml
　　・[Root Package].client/Main.java
　が作成される




2. テスト用の設定

　　[Window] - [Preference] を開いて
　　
　2.1 [Java] - [Editor] - [Content Assist] - [Favorites] を選択して
　　
　　[New Type...] をクリックして、以下を追加する
　　　・org.hamcrest.CoreMatchers
　　　・org.junit.Assert
　　　・org.junit.matchers.JUnitMatchers





　2.2 [General] - [Workspace] を選択して

　　[Refresh automatically] にチェックを入れる




3. あとは普通にGWTプロジェクトのコーディングを行う

4. Slim3 の Model を作る方法は モデルの作成 - Slim3 日本語サイト(非公式) - を参照

5. Slim3 の Datastore を使ったサービスは サービスの作成 - Slim3 日本語サイト(非公式) - を参照




　

Android ColorFilter を使う

Android フレームワークの Menu アイコンなど、用意されている画像の色だけを変えたい場合、ColorFilter が便利です。

ColorFilter を継承したクラスとして、ColorMatrixColorFilter, LightingColorFilter, PorterDuffColorFilter が用意されています。

ここでは、PorterDuffColorFilter を使ってみます。



■ ImageView で ColorFilter を使う

ImageView には、ColorFilter を設定するためのメソッドが用意されています。

　・public final void setColorFilter (int color) (Since: API Level 8)
　　　引数で指定された color で SRC_ATOP blending mode の
　　　PorterDuffColorFilter をかけます。

　・public void setColorFilter (ColorFilter cf)
　　　引数で指定された ColorFilter をかけます。

　・public final void setColorFilter (int color, PorterDuff.Mode mode)
　　　引数で指定された color と blending mode での
　　　PorterDuffColorFilter をかけます。

また、XML の属性として android:tint が用意されています。

　・android:tint="#rgb", "#argb", "#rrggbb", or "#aarrggbb"
　　　指定された color で SRC_ATOP blending mode の
　　　PorterDuffColorFilter をかけます。

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.     xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"  
4.     xmlns:android="http://schemas.android.com/apk/res/android"  
5.     android:orientation="vertical"  
6.     android:layout_width="fill_parent"  
7.     android:layout_height="fill_parent"  
8.     >  
9.     <ImageView  
10.         android:id="@+id/imageview"  
11.         android:layout_width="wrap_content"   
12.         android:layout_height="wrap_content"   
13.         android:src="@android:drawable/ic_menu_camera"  
14.         />  
15.     <ImageView  
16.         android:layout_width="wrap_content"   
17.         android:layout_height="wrap_content"   
18.         android:src="@android:drawable/ic_menu_camera"  
19.         android:tint="#ccff0000"  
20.         />  
21. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@android:drawable/ic_menu_camera"
        />
    <ImageView
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@android:drawable/ic_menu_camera"
        android:tint="#ccff0000"
        />
</LinearLayout>

view plainprint?

1. public class MainActivity extends Activity {  
2.     @Override  
3.     public void onCreate(Bundle savedInstanceState) {  
4.         super.onCreate(savedInstanceState);  
5.         setContentView(R.layout.main);  
6.   
7.         ImageView imageView = (ImageView)findViewById(R.id.imageview);  
8.         imageView.setColorFilter(0xcc0000ff, PorterDuff.Mode.SRC_IN);  
9.     }  
10. }  

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ImageView imageView = (ImageView)findViewById(R.id.imageview);
        imageView.setColorFilter(0xcc0000ff, PorterDuff.Mode.SRC_IN);
    }
}

■ Custom View で ColorFilter を使う

　上記で指摘したように、ImageView の android:tint では PorterDuff のモードが PorterDuff.Mode.SRC_ATOP に固定されてしまいます。そこで、PorterDuff のモードも attribute で指定できるようにした Custom View を作りました。

　　　ColorFilteredImageView.java


　yanzm/yanzm-s-Custom-View-Project - GitHub - の ColorFilteredImageViewSample がサンプルアプリです。

　こんな感じで使います。詳しくはサンプルアプリを見てください。

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout   
3.     xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"  
4.     xmlns:android="http://schemas.android.com/apk/res/android"  
5.     android:layout_width="fill_parent"  
6.     android:layout_height="fill_parent"  
7.     >  
8.     <LinearLayout  
9.         android:orientation="horizontal"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="wrap_content"   
12.         android:gravity="center_vertical"  
13.         >  
14.         <yanzm.products.customview.ColorFilteredImageView    
15.             android:layout_width="wrap_content"   
16.             android:layout_height="wrap_content"   
17.             android:src="@android:drawable/ic_menu_share"  
18.             app:tint="#ccff00ff"          
19.             app:porterduff_mode="MULTIPLY"  
20.             />  
21.         <TextView  
22.             android:layout_width="wrap_content"   
23.             android:layout_height="wrap_content"   
24.             android:text="ColorFilteredImageView\n    #ccff00ff  MULTIPLY"  
25.             />  
26.     </LinearLayout>  
27. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:gravity="center_vertical"
        >
        <yanzm.products.customview.ColorFilteredImageView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:src="@android:drawable/ic_menu_share"
            app:tint="#ccff00ff"        
            app:porterduff_mode="MULTIPLY"
            />
        <TextView
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="ColorFilteredImageView\n    #ccff00ff  MULTIPLY"
            />
    </LinearLayout>
</LinearLayout>

　

　YanzmCustomView を Android Library Project にして使うこともできます。サンプルアプリでは、YanzmCustomView を Library Project として参照しています。

　Library Projectとして使う場合、

view plainprint?

1. xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"  

    xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"

　部分の最後のパッケージ名には、Library Project を使う方のパッケージ名を入れてください。
　Library Project のパッケージ名にするとエラーになります。








　

GWT UiBinder で定義したスタイルをコードからアクセスする

例えば、コードから動的に Panel や Grid に子要素を追加する場合、子要素に適用するスタイルを UiBinder 側に定義しておくと管理が楽になります。
この場合、Java コードから UiBinder に定義したスタイルにアクセスする必要があります。


例として、UiBinder で enabled, disabled というスタイルを定義したとします。

view plainprint?

1. <<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
2.   
3.   <ui:style type='com.my.app.MyFoo.MyStyle'>  
4.     .redBox { background-color:pink; border: 1px solid red; }  
5.   
6.     .enabled { color:black; }  
7.     .disabled { color:gray; }  
8.   </ui:style>  
9.   
10.   <div class='{style.redBox} {style.enabled}'>I'm a red box widget.</div>  
11.   
12. </ui:UiBinder>  

<<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

  <ui:style type='com.my.app.MyFoo.MyStyle'>
    .redBox { background-color:pink; border: 1px solid red; }

    .enabled { color:black; }
    .disabled { color:gray; }
  </ui:style>

  <div class='{style.redBox} {style.enabled}'>I'm a red box widget.</div>

</ui:UiBinder>

ここで定義したスタイルに Java コードからアクセスするには、


　1. UiBinder の エレメントに type 属性で owner class のインタフェースを指定

　2. owner class でインタフェースを定義します。このインタフェースには UiBinder で定義したスタイル名のメソッドを持たせる
　　メソッドの戻り値は文字列で、この文字列がスタイル名を表す

　3. @UiField アノテーションを付けて、インタフェースクラスの style という名前を変数を定義

　4. style 変数を使って、メソッドを呼び出してスタイル名を取得し、addClassName() や removeClassName(), setStyleName() の引数に指定

view plainprint?

1. public class MyFoo extends Widget {  
2.   
3.   interface MyStyle extends CssResource {  
4.     String enabled();  
5.     String disabled();  
6.   }  
7.   
8.   @UiField MyStyle style;  
9.   
10.   /* ... */  
11.   
12.   void setEnabled(boolean enabled) {  
13.     getElement().addClassName(enabled ? style.enabled() : style.disabled());  
14.     getElement().removeClassName(enabled ? style.disabled() : style.enabled());  
15.   }  
16. }  

public class MyFoo extends Widget {

  interface MyStyle extends CssResource {
    String enabled();
    String disabled();
  }

  @UiField MyStyle style;

  /* ... */

  void setEnabled(boolean enabled) {
    getElement().addClassName(enabled ? style.enabled() : style.disabled());
    getElement().removeClassName(enabled ? style.disabled() : style.enabled());
  }
}

　

GWT UiBinder でスタイルを設定する

UiBinder では、 エレメント内でスタイル(CSS)を設定することができます。

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
2.   <ui:style>  
3.     .pretty { background-color: Skyblue; }  
4.   </ui:style>  
5.   
6.   <div class='{style.pretty}'>  
7.     Hello, <span ui:field='nameSpan'/>.  
8.   </div>  
9. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <ui:style>
    .pretty { background-color: Skyblue; }
  </ui:style>

  <div class='{style.pretty}'>
    Hello, <span ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

注意: <ui:style> はルートエレメントの直接の子要素でなければなりません。

ClientBundle に沿って CssResource インタフェースが生成されます。


利点
　・スペルミスなどをコンパイル時に見つけられる
　・CSS名が難読化されるため、他の CSS ブロックとスタイル名の衝突を防げる
　 - グローバルな CSS namespace はもういらない！

　・1つのテンプレート内で同じスタイル名を使える

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
2.   <ui:style>  
3.     .pretty { background-color: Skyblue; }  
4.   </ui:style>  
5.   
6.   <ui:style field='otherStyle'>  
7.     .pretty { background-color: Orange; }  
8.   </ui:style>  
9.   
10.   <div class='{style.pretty}'>  
11.     Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.  
12.   </div>  
13. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <ui:style>
    .pretty { background-color: Skyblue; }
  </ui:style>

  <ui:style field='otherStyle'>
    .pretty { background-color: Orange; }
  </ui:style>

  <div class='{style.pretty}'>
    Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

　・src 属性で外部のCSSファイルを取り込むことも可能
（MyUi.css, MyUiOtherStyle.css には pretty という名前をスタイルが定義されている）

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
2.   <ui:style src="MyUi.css" />  
3.   <ui:style field='otherStyle' src="MyUiOtherStyle.css">  
4.   
5.   <div class='{style.pretty}'>  
6.     Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.  
7.   </div>  
8. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <ui:style src="MyUi.css" />
  <ui:style field='otherStyle' src="MyUiOtherStyle.css">

  <div class='{style.pretty}'>
    Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

　・styleName 属性、もしくは addStyleNames 属性でスタイルを設定する

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'  
2.       xmlns:g='urn:import:com.google.gwt.user.client.ui'>  
3.   <ui:style>  
4.     .hot { color: magenta; }  
5.     .pretty { background-color: Skyblue; }  
6.   </ui:style>  
7.   
8.   <g:PushButton styleName='{style.pretty}'>This button doesn't look like one</g:PushButton>  
9.   <g:PushButton addStyleNames='{style.pretty} {style.hot}'>Push my hot button!</g:PushButton>  
10. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
      xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .hot { color: magenta; }
    .pretty { background-color: Skyblue; }
  </ui:style>

  <g:PushButton styleName='{style.pretty}'>This button doesn't look like one</g:PushButton>
  <g:PushButton addStyleNames='{style.pretty} {style.hot}'>Push my hot button!</g:PushButton>
</ui:UiBinder>

addStyleNames は複数指定可能です。



　

GWT UiBinder でイベントを定義する - UiHandler -

UiBinder で定義した Widget Object に ui:field="name" で
名前を付けると、Java 側で @UiField アノテーションつけることで同じ名前の変数をインスタンスとして利用することができます。

さらに、この ui:field="name" で設定した名前を使ってイベントの処理も定義することができます。
この時指定するアノテーションが @UiHandler です。

@UiHandler("name")

のようなアノテーションを Handler のメソッドに付けます。

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'  
2.     xmlns:g='urn:import:com.google.gwt.user.client.ui'>  
3.   
4.   <g:HTMLPanel>  
5.     <g:Button ui:field="name">Click Me!</g:Button>  
6.   </g:HTMLPanel>  
7. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <g:HTMLPanel>
    <g:Button ui:field="name">Click Me!</g:Button>
  </g:HTMLPanel>
</ui:UiBinder>

view plainprint?

1. public class MyFoo extends Composite {  
2.   @UiField Button button;  
3.   
4.   public MyFoo() {  
5.     initWidget(button);  
6.   }  
7.   
8.   @UiHandler("button")  
9.   void handleClick(ClickEvent e) {  
10.     Window.alert("Hello, AJAX");  
11.   }  
12. }  

public class MyFoo extends Composite {
  @UiField Button button;

  public MyFoo() {
    initWidget(button);
  }

  @UiHandler("button")
  void handleClick(ClickEvent e) {
    Window.alert("Hello, AJAX");
  }
}

ただし、 <g:Button> のような Widget オブジェクトには使用できますが、<button> のような DOM オブジェクトには使用できません。



　

GWT UiBinder で FileUpload を使う

view plainprint?

1. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">  
2. <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"  
3.  xmlns:g="urn:import:com.google.gwt.user.client.ui">  
4.  <ui:style>  
5.     
6.  </ui:style>  
7.  <g:HTMLPanel>  
8.    <g:VerticalPanel>  
9.      <g:HTML><h2>Select a file:</h2></g:HTML>  
10.      <g:FileUpload ui:field="fileUpload"></g:FileUpload>  
11.      <g:HTML>  
12. </g:HTML>  
13.      <g:Button ui:field="button">Upload File</g:Button>  
14.    </g:VerticalPanel>  
15.  </g:HTMLPanel>  
16. </ui:UiBinder>   

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
 xmlns:g="urn:import:com.google.gwt.user.client.ui">
 <ui:style>
  
 </ui:style>
 <g:HTMLPanel>
   <g:VerticalPanel>
     <g:HTML><h2>Select a file:</h2></g:HTML>
     <g:FileUpload ui:field="fileUpload"></g:FileUpload>
     <g:HTML><br/></g:HTML>
     <g:Button ui:field="button">Upload File</g:Button>
   </g:VerticalPanel>
 </g:HTMLPanel>
</ui:UiBinder> 

view plainprint?

1. package yanzm.example.hellowtgt.client;  
2.   
3. import com.google.gwt.core.client.GWT;  
4. import com.google.gwt.event.dom.client.ClickEvent;  
5. import com.google.gwt.event.dom.client.ClickHandler;  
6. import com.google.gwt.uibinder.client.UiBinder;  
7. import com.google.gwt.uibinder.client.UiField;  
8. import com.google.gwt.user.client.Window;  
9. import com.google.gwt.user.client.ui.Button;  
10. import com.google.gwt.user.client.ui.Composite;  
11. import com.google.gwt.user.client.ui.FileUpload;  
12. import com.google.gwt.user.client.ui.Widget;  
13.   
14. public class FileUploadButton extends Composite {  
15.   
16.  private static FileUploadUiBinder uiBinder = GWT  
17.    .create(FileUploadUiBinder.class);  
18.   
19.  interface FileUploadUiBinder extends UiBinder<Widget, FileUploadButton> {  
20.  }  
21.    
22.  @UiField  
23.  FileUpload fileUpload;  
24.    
25.  @UiField  
26.  Button button;  
27.   
28.  public FileUploadButton() {  
29.   initWidget(uiBinder.createAndBindUi(this));  
30.     
31.   button.addClickHandler(new ClickHandler() {  
32.    @Override  
33.    public void onClick(ClickEvent event) {  
34.     String filename = fileUpload.getFilename();  
35.     if(filename.length() == 0) {  
36.      Window.alert("No file selected");  
37.     }  
38.     else {  
39.      Window.alert("Start upload " + filename);  
40.     }  
41.    }  
42.   });  
43.  }  
44. }  

package yanzm.example.hellowtgt.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FileUpload;
import com.google.gwt.user.client.ui.Widget;

public class FileUploadButton extends Composite {

 private static FileUploadUiBinder uiBinder = GWT
   .create(FileUploadUiBinder.class);

 interface FileUploadUiBinder extends UiBinder<Widget, FileUploadButton> {
 }
 
 @UiField
 FileUpload fileUpload;
 
 @UiField
 Button button;

 public FileUploadButton() {
  initWidget(uiBinder.createAndBindUi(this));
  
  button.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
    String filename = fileUpload.getFilename();
    if(filename.length() == 0) {
     Window.alert("No file selected");
    }
    else {
     Window.alert("Start upload " + filename);
    }
   }
  });
 }
}

■ その他
・Java code による実装例 (Showcase)
・com.google.gwt.user.client.ui.FileUpload



　

GWT UiBinder で CustomButton を使う

view plainprint?

1. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">  
2. <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"  
3.   xmlns:g="urn:import:com.google.gwt.user.client.ui">  
4.   <ui:style>  
5.     
6.   </ui:style>  
7.    
8.   <ui:image field="pushButton" src="android-robot-35.gif"/>  
9.    
10.   <g:HTMLPanel>  
11.     <g:VerticalPanel>  
12.       <g:HTML><h2>Push Buttons:</h2></g:HTML>  
13.       <g:HorizontalPanel spacing="10">  
14.         <g:PushButton>  
15.           <g:upFace image="{pushButton}"/>  
16.           <g:downFace image="{pushButton}"/>  
17.           <g:upHoveringFace>click me</g:upHoveringFace>  
18.           <g:downHoveringFace>CLICK ME</g:downHoveringFace>  
19.           <g:upDisabledFace>disable up</g:upDisabledFace>  
20.           <g:downDisabledFace>disable down</g:downDisabledFace>  
21.         </g:PushButton>  
22.          
23.         <g:PushButton enabled="false">  
24.           <g:upFace image="{pushButton}"/>  
25.           <g:downFace image="{pushButton}"/>  
26.           <g:upHoveringFace>click me</g:upHoveringFace>  
27.           <g:downHoveringFace>CLICK ME</g:downHoveringFace>  
28.           <g:upDisabledFace>disable up</g:upDisabledFace>  
29.           <g:downDisabledFace>disable down</g:downDisabledFace>  
30.         </g:PushButton>  
31.          
32.         <g:PushButton enabled="true">  
33.           <g:upFace image="{pushButton}"/>  
34.           <g:downFace image="{pushButton}"/>  
35.         </g:PushButton>         
36.       </g:HorizontalPanel>  
37.        
38.       <g:HTML><h2>Toggle Buttons:</h2></g:HTML>  
39.       <g:HorizontalPanel spacing="10">  
40.         <g:ToggleButton>  
41.           <g:upFace image="{pushButton}"/>  
42.           <g:downFace image="{pushButton}"/>  
43.         </g:ToggleButton>  
44.         <g:ToggleButton enabled="false">  
45.           <g:upFace image="{pushButton}"/>  
46.           <g:downFace image="{pushButton}"/>  
47.         </g:ToggleButton>  
48.         <g:ToggleButton down="true">  
49.           <g:upFace image="{pushButton}"/>  
50.           <g:downFace image="{pushButton}"/>  
51.         </g:ToggleButton>  
52.       </g:HorizontalPanel>  
53.     </g:VerticalPanel>  
54.   </g:HTMLPanel>  
55. </ui:UiBinder>   

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
  
  </ui:style>
 
  <ui:image field="pushButton" src="android-robot-35.gif"/>
 
  <g:HTMLPanel>
    <g:VerticalPanel>
      <g:HTML><h2>Push Buttons:</h2></g:HTML>
      <g:HorizontalPanel spacing="10">
        <g:PushButton>
          <g:upFace image="{pushButton}"/>
          <g:downFace image="{pushButton}"/>
          <g:upHoveringFace>click me</g:upHoveringFace>
          <g:downHoveringFace>CLICK ME</g:downHoveringFace>
          <g:upDisabledFace>disable up</g:upDisabledFace>
          <g:downDisabledFace>disable down</g:downDisabledFace>
        </g:PushButton>
       
        <g:PushButton enabled="false">
          <g:upFace image="{pushButton}"/>
          <g:downFace image="{pushButton}"/>
          <g:upHoveringFace>click me</g:upHoveringFace>
          <g:downHoveringFace>CLICK ME</g:downHoveringFace>
          <g:upDisabledFace>disable up</g:upDisabledFace>
          <g:downDisabledFace>disable down</g:downDisabledFace>
        </g:PushButton>
       
        <g:PushButton enabled="true">
          <g:upFace image="{pushButton}"/>
          <g:downFace image="{pushButton}"/>
        </g:PushButton>       
      </g:HorizontalPanel>
     
      <g:HTML><h2>Toggle Buttons:</h2></g:HTML>
      <g:HorizontalPanel spacing="10">
        <g:ToggleButton>
          <g:upFace image="{pushButton}"/>
          <g:downFace image="{pushButton}"/>
        </g:ToggleButton>
        <g:ToggleButton enabled="false">
          <g:upFace image="{pushButton}"/>
          <g:downFace image="{pushButton}"/>
        </g:ToggleButton>
        <g:ToggleButton down="true">
          <g:upFace image="{pushButton}"/>
          <g:downFace image="{pushButton}"/>
        </g:ToggleButton>
      </g:HorizontalPanel>
    </g:VerticalPanel>
  </g:HTMLPanel>
</ui:UiBinder> 

view plainprint?

1. package yanzm.example.hellowtgt.client;  
2.   
3. import com.google.gwt.core.client.GWT;  
4. import com.google.gwt.uibinder.client.UiBinder;  
5. import com.google.gwt.user.client.ui.Composite;  
6. import com.google.gwt.user.client.ui.Widget;  
7.   
8. public class CustomButton extends Composite {  
9.   
10.   private static CustomButtonUiBinder uiBinder = GWT  
11.     .create(CustomButtonUiBinder.class);  
12.   
13.     interface CustomButtonUiBinder extends UiBinder<Widget, CustomButton> {  
14.   }  
15.   
16.   public CustomButton() {  
17.     initWidget(uiBinder.createAndBindUi(this));  
18.   }  
19. }  

package yanzm.example.hellowtgt.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class CustomButton extends Composite {

  private static CustomButtonUiBinder uiBinder = GWT
    .create(CustomButtonUiBinder.class);

    interface CustomButtonUiBinder extends UiBinder<Widget, CustomButton> {
  }

  public CustomButton() {
    initWidget(uiBinder.createAndBindUi(this));
  }
}

■ その他
・Java code による実装例 (Showcase)
・com.google.gwt.user.client.ui.PushButton
・com.gooble.gwt.user.client.ui.ToggleButton
・com.google.gwt.user.client.ui.Image
・com.google.gwt.user.client.ui.CustomButton



　


　

GWT UiBinder で Button を使う

view plainprint?

1. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">  
2. <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"  
3.   xmlns:g="urn:import:com.google.gwt.user.client.ui">  
4.   <ui:style>  
5.     
6.   </ui:style>  
7.   <g:HTMLPanel>  
8.     <g:HorizontalPanel spacing="10">  
9.       <g:Button ui:field="button">Normal Button</g:Button>  
10.       <g:Button enabled="false">Disabled Button</g:Button>  
11.     </g:HorizontalPanel>  
12.   </g:HTMLPanel>  
13. </ui:UiBinder>   

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
  
  </ui:style>
  <g:HTMLPanel>
    <g:HorizontalPanel spacing="10">
      <g:Button ui:field="button">Normal Button</g:Button>
      <g:Button enabled="false">Disabled Button</g:Button>
    </g:HorizontalPanel>
  </g:HTMLPanel>
</ui:UiBinder> 

view plainprint?

1. package yanzm.example.hellowtgt.client;  
2.   
3. import com.google.gwt.core.client.GWT;  
4. import com.google.gwt.event.dom.client.ClickEvent;  
5. import com.google.gwt.event.dom.client.ClickHandler;  
6. import com.google.gwt.uibinder.client.UiBinder;  
7. import com.google.gwt.uibinder.client.UiField;  
8. import com.google.gwt.user.client.Window;  
9. import com.google.gwt.user.client.ui.Button;  
10. import com.google.gwt.user.client.ui.Composite;  
11. import com.google.gwt.user.client.ui.Widget;  
12.   
13. public class BasicButton extends Composite {  
14.   
15.   private static BasicButtonUiBinder uiBinder = GWT  
16.     .create(BasicButtonUiBinder.class);  
17.   
18.     interface BasicButtonUiBinder extends UiBinder<Widget, BasicButton> {  
19.   }  
20.   
21.   @UiField  
22.   public Button button;   
23.   
24.   public BasicButton() {  
25.     initWidget(uiBinder.createAndBindUi(this));  
26.     button.addClickHandler(new ClickHandler() {  
27.       @Override  
28.       public void onClick(ClickEvent event) {  
29.         Window.alert("Clicked!");  
30.       }     
31.     });   
32.   }  
33. }  

package yanzm.example.hellowtgt.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class BasicButton extends Composite {

  private static BasicButtonUiBinder uiBinder = GWT
    .create(BasicButtonUiBinder.class);

    interface BasicButtonUiBinder extends UiBinder<Widget, BasicButton> {
  }

  @UiField
  public Button button; 

  public BasicButton() {
    initWidget(uiBinder.createAndBindUi(this));
    button.addClickHandler(new ClickHandler() {
      @Override
      public void onClick(ClickEvent event) {
        Window.alert("Clicked!");
      }   
    }); 
  }
}

■ その他
・Java code による実装例 (Showcase)
・com.google.gwt.user.client.ui.Button



　

GWT UiBinder で RadioButton を使う

view plainprint?

1. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">  
2. <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">  
3.   <ui:style>  
4.     .my-RadioButton {  
5.       font-weight: bold;  
6.     }  
7.   </ui:style>  
8.   <g:HTMLPanel>  
9.     <g:VerticalPanel>  
10.       <g:HTML><h3>Select your favorite color:</h3></g:HTML>  
11.       <g:RadioButton name="color" value="true">blue</g:RadioButton>  
12.       <g:RadioButton name="color">red</g:RadioButton>  
13.       <g:RadioButton name="color" enabled="false">yellow</g:RadioButton>  
14.       <g:RadioButton name="color">green</g:RadioButton>  
15.       <g:HTML><h3>Select your favorite sport:</h3></g:HTML>  
16.       <g:RadioButton name="sport">Baseball</g:RadioButton>  
17.       <g:RadioButton name="sport">Basketball</g:RadioButton>  
18.       <g:RadioButton name="sport" value="true">Football</g:RadioButton>  
19.       <g:RadioButton name="sport">Hockey</g:RadioButton>  
20.       <g:RadioButton name="sport">Soccer</g:RadioButton>  
21.       <g:RadioButton name="sport" styleName="{style.my-RadioButton}">Water Polo</g:RadioButton>  
22.     </g:VerticalPanel>  
23.   </g:HTMLPanel>  
24. </ui:UiBinder>   

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .my-RadioButton {
      font-weight: bold;
    }
  </ui:style>
  <g:HTMLPanel>
    <g:VerticalPanel>
      <g:HTML><h3>Select your favorite color:</h3></g:HTML>
      <g:RadioButton name="color" value="true">blue</g:RadioButton>
      <g:RadioButton name="color">red</g:RadioButton>
      <g:RadioButton name="color" enabled="false">yellow</g:RadioButton>
      <g:RadioButton name="color">green</g:RadioButton>
      <g:HTML><h3>Select your favorite sport:</h3></g:HTML>
      <g:RadioButton name="sport">Baseball</g:RadioButton>
      <g:RadioButton name="sport">Basketball</g:RadioButton>
      <g:RadioButton name="sport" value="true">Football</g:RadioButton>
      <g:RadioButton name="sport">Hockey</g:RadioButton>
      <g:RadioButton name="sport">Soccer</g:RadioButton>
      <g:RadioButton name="sport" styleName="{style.my-RadioButton}">Water Polo</g:RadioButton>
    </g:VerticalPanel>
  </g:HTMLPanel>
</ui:UiBinder> 

スコープを指定するための name 属性が必須になります。

view plainprint?

1. package yanzm.example.hellowtgt.client;  
2.   
3. import com.google.gwt.core.client.GWT;  
4. import com.google.gwt.uibinder.client.UiBinder;  
5. import com.google.gwt.user.client.ui.Composite;  
6. import com.google.gwt.user.client.ui.Widget;  
7.   
8. public class RadioButton extends Composite {  
9.   
10.   private static RadioButtonUiBinder uiBinder = GWT.create(RadioButtonUiBinder.class);  
11.   
12.   interface RadioButtonUiBinder extends UiBinder<Widget, RadioButton> {  
13.   }  
14.   
15.   public RadioButton() {  
16.     initWidget(uiBinder.createAndBindUi(this));  
17.   }  
18. }  

package yanzm.example.hellowtgt.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class RadioButton extends Composite {

  private static RadioButtonUiBinder uiBinder = GWT.create(RadioButtonUiBinder.class);

  interface RadioButtonUiBinder extends UiBinder<Widget, RadioButton> {
  }

  public RadioButton() {
    initWidget(uiBinder.createAndBindUi(this));
  }
}

■ その他
・Java code による実装例 (Showcase)
・com.google.gwt.user.client.ui.RadioButton


　

GWT UiBinder で CheckBox を使う

view plainprint?

1. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">  
2. <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"  
3.  xmlns:g="urn:import:com.google.gwt.user.client.ui">  
4.  <ui:style>  
5.   .my-CheckBox {  
6.    font-weight: bold;  
7.   }  
8.  </ui:style>  
9.  <g:HTMLPanel>  
10.    <g:VerticalPanel>  
11.      <g:CheckBox value="true">Monday</g:CheckBox>  
12.      <g:CheckBox focus="true">Tuesday</g:CheckBox>  
13.      <g:CheckBox styleName="{style.my-CheckBox}">Wednesday</g:CheckBox>  
14.      <g:CheckBox>Thursday</g:CheckBox>  
15.      <g:CheckBox>Friday</g:CheckBox>  
16.      <g:CheckBox enabled="false">Saturday</g:CheckBox>  
17.      <g:CheckBox enabled="false">Sunday</g:CheckBox>  
18.    </g:VerticalPanel>  
19.    <g:VerticalPanel width="50px">  
20.      <g:CheckBox text="January,February, March, April" />     
21.      <g:CheckBox wordWrap="true">May, June, July, August</g:CheckBox>     
22.    </g:VerticalPanel>  
23.  </g:HTMLPanel>  
24. </ui:UiBinder>   

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
 xmlns:g="urn:import:com.google.gwt.user.client.ui">
 <ui:style>
  .my-CheckBox {
   font-weight: bold;
  }
 </ui:style>
 <g:HTMLPanel>
   <g:VerticalPanel>
     <g:CheckBox value="true">Monday</g:CheckBox>
     <g:CheckBox focus="true">Tuesday</g:CheckBox>
     <g:CheckBox styleName="{style.my-CheckBox}">Wednesday</g:CheckBox>
     <g:CheckBox>Thursday</g:CheckBox>
     <g:CheckBox>Friday</g:CheckBox>
     <g:CheckBox enabled="false">Saturday</g:CheckBox>
     <g:CheckBox enabled="false">Sunday</g:CheckBox>
   </g:VerticalPanel>
   <g:VerticalPanel width="50px">
     <g:CheckBox text="January,February, March, April" />   
     <g:CheckBox wordWrap="true">May, June, July, August</g:CheckBox>   
   </g:VerticalPanel>
 </g:HTMLPanel>
</ui:UiBinder> 

view plainprint?

1. package yanzm.example.hellowtgt.client;  
2.   
3. import com.google.gwt.core.client.GWT;  
4. import com.google.gwt.uibinder.client.UiBinder;  
5. import com.google.gwt.user.client.ui.Composite;  
6. import com.google.gwt.user.client.ui.Widget;  
7.   
8. public class CheckBox extends Composite {  
9.   
10.  private static CheckBoxUiBinder uiBinder = GWT  
11.    .create(CheckBoxUiBinder.class);  
12.   
13.  interface CheckBoxUiBinder extends UiBinder<Widget, CheckBox> {  
14.  }  
15.   
16.  public CheckBox() {  
17.   initWidget(uiBinder.createAndBindUi(this));  
18.  }  
19. }  

package yanzm.example.hellowtgt.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class CheckBox extends Composite {

 private static CheckBoxUiBinder uiBinder = GWT
   .create(CheckBoxUiBinder.class);

 interface CheckBoxUiBinder extends UiBinder<Widget, CheckBox> {
 }

 public CheckBox() {
  initWidget(uiBinder.createAndBindUi(this));
 }
}

■ その他
・Java code による実装例 (Showcase)
・com.google.gwt.user.client.ui.CheckBox