GWT의 다른 위젯 (이미지) 위에 위젯 (HorizontalPanel)을 표시하려면 어떻게해야합니까?

Question

HorizontalPanel 안에 두 개의 버튼을 이미지 위에 표시하려고합니다. 위에서 보았 듯이 버튼을 본 다음 페이지를 더 내려다 보면서 이미지를 볼 수는 있지만 이미지를 볼 때 그 위에 버튼이 있습니다.

<g:FocusPanel ui:field="profileImagePanel" addStyleNames="{style.headerImage}"> 
    <g:AbsolutePanel addStyleNames="{style.innerImagePanel}"> 
     <g:Image ui:field="profileImage" addStyleNames="{style.profileImage}"/> 
     <g:HorizontalPanel ui:field="imageEditButtons" addStyleNames="{style.imageEditButtons}"> 
      <w:MultiUseButton ui:field="clearImage" addStyleNames="{style.change}" type="secondary" text="{i18n.clearImage}" visible="false"/> 
      <w:MultiUseButton ui:field="changeImage" type="secondary" text="{i18n.changeImage}" visible="false"/> 
     </g:HorizontalPanel> 
    </g:AbsolutePanel> 
</g:FocusPanel> 

작풍은 다음과 같습니다 :

이

내가 내 Page.ui.xml 파일에 지금까지 가지고있는 코드 나는 FlowPanel 대신의 AbsolutePanel를 사용하려고했습니다

.headerImage { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 150px; 
} 

.profileImage { 
    width: 150px; 
    position: relative; 
} 

.change { 
    float: right; 
} 

.headerImage a { 
    display: block; 
} 

.imageEditButtons { 
    width:100%; 
} 

.innerImagePanel { 
    width:150px; 
} 

, 그러나 그것은 작동하지 않습니다. 나는 profileImage position:relative과 imageEditButtons position:absolute을 만들려고했으나 그 페이지의 나머지 부분 전체를 나사로 고정시켰다. 나 또한 imageEditButtons를 설정하려고 시도 margin-top:-20px하지만 위에 대신 이미지 밑으로 간다. 이미지 앞에 AbsolutePanel에 HorizontalPanel을 넣으면 단추가 이미지 위에 있고 위쪽 여백을 변경하면 단추와 이미지가 아래로 이동합니다.

아이디어가 부족합니다. 이 작업을 할 수있는 방법에 대한 제안은 많은 도움이 될 것입니다.

Answer 1

이미지 대신 위젯을 사용하여 background-image 스타일을 적용하십시오. 여기에 내가 당신의 UiBinder 파일의 내용을 상상하는 방법은 다음과 같습니다

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <ui:style> 
     /* requirement style */ 
     .myPanel { 
      width: 200px; /* width of your background image */ 
      height: 400px; /* height of your background image */  
      background-image: url(images/myimage.jpg); /* your image */ 
      background-repeat: no-repeat; 
     } 

     /* optional style */ 
     .myButton { 
      margin: 10px; 
      width: 80px; 
      height: 40px; 
     } 
    </ui:style> 
    <g:HTMLPanel> 
     <g:FocusPanel ui:field="profileImagePanel"> 
      <g:AbsolutePanel addStyleNames="{style.myPanel}"> 
       <g:HorizontalPanel ui:field="imageEditButtons"> 
        <g:Button ui:field="clearImage" text="clear image" addStyleNames="{style.myButton}" /> 
        <g:Button ui:field="changeImage" text="second button" addStyleNames="{style.myButton}" /> 
       </g:HorizontalPanel> 
      </g:AbsolutePanel> 
     </g:FocusPanel> 
    </g:HTMLPanel> 

은 w:MultiUseButton에 의해 내 태그 g:Button를 교체하고 필요한 추가 스타일을 추가 할 수 있습니다. CSS 파일을 가져올 수있는 스타일. 결과적으로 원하는 것을 얻게됩니다. 이 경우 AbsolutePanel은 필요하지 않습니다. 간단한 FlowPanel도 적합합니다.