2012-01-24 2 views
0

뷰 (.ui.xml)가 5 개 있습니다.GWT - CssResource - 일반적인 스타일 - 우수 사례

<g:Button ui:field="buttonName" styleName="{style.myButtonStyle}" /> 

내 질문은 다음과 같습니다 :

<ui:style src="../MyStyle.css" /> 

모든 페이지에있는 모든 버튼을

내가 styleName의 속성을 넣어 : 모든보기에 나는 그런 soemthing를 붙여 내 모든 버튼에 styleName에 넣어해야합니까? 이런 종류의 위젯에 일반적인 스타일을 사용하고 싶습니다. 이 사례에 대한 우수 사례는 무엇입니까?

답변

1

GWT themes을 사용자 정의하거나 자신을 만드시겠습니까? 나는 이것이 당신이해야 할 일이라고 생각합니다.

0

Composite를 확장하여 MyButton 단추를 직접 만들고이 단추의 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' xmlns:k='urn:import:com.example.widgets'> 

<g:AbsolutePanel width="350px" height="225px"> 
     <g:at left='10' top='0'> 

       <k:MyButton></k:MyButton> 
</g:at> 
</g:AbsolutePanel> 

</ui:UiBinder> 

경우 : 당신이 지금 UIBinder 파일에서이 버튼을 포함 할 수 있습니다, 귀하의 의견에

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

    <ui:style> 
     .myStyle { 
      text-shadow: gray; 
      color: gray; 
      font-size: 12px; 
      text-decoration: italic;  
     } 
    </ui:style> 

    <g:HTMLPanel> 
      <g:Button ui:field="wrapped" styleName="{style.myStyle}" /> 
    </g:HTMLPanel> 
</ui:UiBinder> 

:

package com.example.widgets; 
... 
public class MyButton extends Composite { 

    interface MyButtonUiBinder extends UiBinder<Widget, MyButton> { 
    } 

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

    @UiField 
    Button wrapped; 

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

} 

과 UIBinder 파일 : 여기

는 위젯입니다 개인 위젯에 텍스트 또는 기타 속성을 설정해야합니다. 그들을 감추기 위해 포장 된 단추.

0

addStyleDependentName()을 사용하면 기본 스타일 이름에 추가 스타일을 추가하고 특정 스타일을 적용 할 수 있습니다.

예를 들어, .gwt-ButtonButton의 기본 기본 스타일입니다. 동일한 방식으로 스타일을 지정하려는 5 (N) 버튼이있는 경우이 버튼에 대한 추가 스타일 인 .gwt-Button-customButton을 추가하여 인스턴스화합니다.이 파일을 .css 파일에 추가 할 수 있습니다. 한 번 모듈에.