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