GWT HTML 레이아웃 규율

방금 GWT에서 작업을 시작했으며 이미 보유하고있는 놀라운 파워를 인식하고 있습니다. Java가 큰 학습 곡선이되도록 프론트 엔드 세계에서 왔지만 실제로는 결국 기본 GWT 패널을 사용하는 대신에 올바르게 배치 된 응용 프로그램 (html-wise)을 만드는 데 도움이 될 것이라고 생각합니다. 레이아웃 용 테이블 또는 절대적으로 배치 된 divs.GWT HTML 레이아웃 규율

내게 가장 느린 점은 내 사이트 디자인을 올바르게 배치하는 방법을 결정하는 것입니다. 내가 디자인하고 싶은 예쁜 표준 2 열 머리글/발 사이트 (고정 폭)가 있지만, 예를 들어 DockLayoutPanel과 함께 제공되는 모든 추가 div/styling 팬이 아닙니다.

나는 예. 어떻게하지, 아직 ... 난 그냥
이 은 (내가 생각하는 일반 사이트 레이아웃에 대한 HTMLPanels을 가지고 내 자신의 레이아웃 위젯 확장 복합을 작성해야한다고 생각하고 완전히 것을 아직 생각하지 않은 나는 "는 #header"이 패널 div의에 "#nav을"아이디의 추가 등 ...) 나는이 레이아웃

하지만 제가 보는 다른 일에 다른 위젯을 내가 쓸 수 있다는 것입니다 추가 할 수 있습니다 다음
UiBuilder를 확장하고 ui.xml 파일에서 똑같은 div를 가지는 Layout 클래스.

내가 궁금한 점은 GWT에서 사이트 레이아웃을 위해 선호되는 방법은 무엇일까요? 이것은 다른 위젯의 의미로 재사용되지 않을 것입니다, 그것은 한 번 사용되며 내 컨트롤 등은 안에 배치됩니다.

도움말이나 유용한 정보를 제공해 주시면 대단히 감사하겠습니다. 그리고 내가 어떻게 해야할지 배를 완전히 놓친 경우, 알려주세요

출처

2010-03-30 brad

UI 바인더와 HTML 패널의 조합이 가장 적합합니다. 당신의 .ui.xml에서

, 장소 코드와 유사에 - 해당 된 .java 클래스에서

<gwt:HTMLPanel ui:field="container"> 



    <gwt:FlowPanel ui:field="header"></gwt:FlowPanel> 



     <gwt:HTMLPanel styleName="secondarynav"> 

      <gwt:FlowPanel ui:field="menuWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="someOtherWidget"></gwt:FlowPanel> 

     </gwt:HTMLPanel> 



     <gwt:FlowPanel styleName="secondarycontent"> 

      <gwt:FlowPanel ui:field="faqWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="advertisingWidget"></gwt:FlowPanel> 

     </gwt:FlowPanel> 



     <div class="content"> 
     <gwt:FlowPanel ui:field="mainContentWidget"/> 

     </div> 


     <div class="clearingDiv"/> 

    </div> 



    <gwt:FlowPanel ui:field="footer"></gwt:FlowPanel> 

</gwt:HTMLPanel>

, 당신은) (setHeader(), setSecondaryNav(),면 SET MENU(), setFooter 등의 방법이있을 것이다

이렇게하면 레이아웃이 ui.xml에 완전히 정의됩니다. 또한 위젯 추상화를 사용할 수 있습니다. 헤더 위젯을 만든 다음 레이아웃에 setHeader() 메서드를 호출하여 올바르게 배치 할 수 있습니다.

출처

2010-03-31 08:17:51

이것은 많은 의미가 있습니다. 그러나 이것의 주요한 문제점은 html id 속성을 추가하는 것입니다. 어쩌면 이것은 GWT에서 표준이 아니며 html을 수동으로 코딩 할 필요가 없지만 한 번만 사용되는 레이아웃 div에 클래스를 사용하는 것을 좋아하지 않습니다. 그것에 관한 어떤 생각? – brad

예, 위젯의 ID를 설정하려면 농구를 뛰어 넘어야합니다. GWT는 ID가 고유 한 것으로 보장 할 수있는 방법이 없기 때문에 위젯 (자동 테스트 제외)에서 ID 사용을 권장하지 않습니다. 그래서 헤더를 한 번만 사용하려고한다고하더라도 GWT는 헤더를 알 수 없습니다. 이것이 setId() 메서드를 노출하지 않는 이유입니다. 간단히 말하자면, 스타일링을 위해 권장 사항과 사용 클래스를 사용하는 것이 더 쉽습니다. –

레이아웃을 계속 사용하십시오. GWT는 매우 적응력이 있습니다.

기존 정적 HTML/CSS 레이아웃을 유지하는 것이 좋습니다. RootPanel.get ("id")를 사용하여 GWT 위젯 (다른 패널 포함)을 추가 할 수있는 패널로 요소 (참조 별)에 대한 참조를 검색 할 수 있습니다.

레이아웃을 UiBinder 템플릿으로 옮길 수도 있습니다. 여기에있는 이점은 CSS 축소 및 난독 화 (여러 UiBinders가 단일 CSS 리소스를 공유 할 수 있음)입니다.

출처

2010-03-30 23:10:03

나는이 Sripathi의 제안 사이에서 일종의 콤보를 수행했습니다. 이것은 또한 chris의 제안과 유사합니다. 쓰레기 한 무리! – brad

결국 나는 Sripathi의 제안을 사용하기로 결정했습니다. 그것은 각 섹션에서 위젯을 업데이트하는 가장 간단한 메커니즘을 제공하는 것 같습니다. 팁을 다시 주셔서 감사합니다 – brad

자신 만의 div를 사용하여 간단하게 페이지를 작성하려면 가장 쉬운 방법은 UiBinder XML 파일에서 div를 사용하는 것입니다. - 어쩌면 당신이 그들을 조금 더 함께 놀러 할 것이고, 그들이 제공하는지 GWT에서 제공

<g:HTML> 
    <div id="header">...</div> 
    ... 
</g:HTML>

레이아웃 패널도 유용 할 수 있습니다 :이 또한 평소와 같이 id 속성을 설정할 수 있습니다 어떤 가치 (예 : 크로스 브라우저 문제를 피하는 것) 또는 그렇지 않은가.

출처

2010-03-30 23:16:41

나는 Sripathi의 제안과 약간의 결합을했습니다 – brad

GWT HTML 레이아웃 규율

답변

관련 문제