GWT-2.5.1 : UIBinder를 사용하여 DialogBox에 CSS 개요 매개 변수를 어떻게 추가합니까?

Question

CSS의 "개요"매개 변수를 추가하고 싶습니다.
자바 코드.

package com.test.client; 

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

public class MyDialogBox extends DialogBox { 

    private static final Binder binder = GWT.create(Binder.class); 

    interface Binder extends UiBinder<Widget, MyDialogBox> { 

    } 

    public MyDialogBox() { 
     setWidget(binder.createAndBindUi(this)); 
    } 
} 

XML 코드.

<?xml version="1.0" encoding="UTF-8"?> 
<!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> 
     .panel { 
      width: 400px; 
      height: 200px; 
      border: 1px solid red; 
      outline: 15px solid blue; 
      background-color: ivory; 
      /*margin: 15px;*/ 
     } 
    </ui:style> 

    <g:TabLayoutPanel barUnit='EM' barHeight='1' styleName="{style.panel}"> 
     <g:tab> 
      <g:header size='20'>tab1</g:header> 
      <g:Label>label1</g:Label> 
     </g:tab> 
     <g:tab> 
      <g:header size='20'>tab2</g:header> 
      <g:Label>label2</g:Label> 
     </g:tab> 
    </g:TabLayoutPanel> 
</ui:UiBinder> 

윤곽선이 표시되지 않습니다.

여백 매개 변수의 설명을 제거하면 표시됩니다.

여백 매개 변수없이 개요 매개 변수를 올바르게 추가하려면 어떻게해야합니까?

Answer 1

margin을 추가하지 않으려면 border 속성을 사용해야합니다. 해결책은 anoter div로 감싸는 것입니다.

<ui:style> 
    .panel { 
     width: 400px; 
     height: 200px; 
     border: 1px solid red; 
     /* DELETED border: 15px solid blue; */ 
     background-color: ivory; 
     /* DELETED margin: 15px; */ 
    } 
    .subpanel { 
     border: 15px solid blue; 
    } 
</ui:style> 

<div class="panel"> 
    <g:TabLayoutPanel barUnit='EM' barHeight='1' styleName="{style.subpanel}"> 
     <g:tab> 
      <g:header size='20'>tab1</g:header> 
      <g:Label>label1</g:Label> 
     </g:tab> 
     <g:tab> 
      <g:header size='20'>tab2</g:header> 
      <g:Label>label2</g:Label> 
     </g:tab> 
    </g:TabLayoutPanel> 
</div> 

난 당신이 outline 속성에 대한 자세한 내용은 documentation of w3school를 참조하는 것이 좋습니다 :

예 (는 테스트하지, 그들은 약간의 적응을 필요로 할 수있다).

내가 도와 드리겠습니다.