2011年4月23日土曜日

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

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

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


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

// 2.3.3 向けの処理


} else {

 // 2.3.3 以外向けの処理

}



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() 使ってました。

  

2011年4月19日火曜日

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] マークの位置が変



 

2011年4月14日木曜日

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 日本語サイト(非公式) - を参照




 

2011年4月9日土曜日

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 をかけます。


<?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>



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 がサンプルアプリです。

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


<?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として使う場合、

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

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








 

2011年4月8日金曜日

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

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


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


<<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() の引数に指定


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());
}
}



 

2011年4月7日木曜日

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

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


<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つのテンプレート内で同じスタイル名を使える

<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 という名前をスタイルが定義されている)

<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 属性でスタイルを設定する

<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 は複数指定可能です。



 

2011年4月6日水曜日

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

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

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

@UiHandler("name")

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


<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>



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 オブジェクトには使用できません。



 

2011年4月5日火曜日

GWT UiBinder で FileUpload を使う





<!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>



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



 

2011年4月4日月曜日

GWT UiBinder で CustomButton を使う





<!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>



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



 


 

2011年4月3日日曜日

GWT UiBinder で Button を使う





<!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>



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



 

2011年4月2日土曜日

GWT UiBinder で RadioButton を使う




<!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 属性が必須になります。


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


 

2011年4月1日金曜日

GWT UiBinder で CheckBox を使う




<!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>



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