멋진 GWT 응용 프로그램을 디자인하는 방법은 무엇입니까?

Question

일반 GWT (GXT와 같은 래퍼 없음)를 사용하여 웹 응용 프로그램을 만들고 있습니다. 문제는 좋은 모습 인 &이 GWT 앱에 대한 느낌이 UiBinder만을 사용하여 달성하기가 어렵다는 것입니다. 지금은 내 워크 플로우는 다음과 같습니다

1. 는 서버의 HTML 자원을 넣고 GWT의 클라이언트 번들을 사용하여 가져 드림위버/포토샵
2. 와 HTML과 CSS를 작성합니다.
3. 서버의 리소스 HTML 파일로 초기화 된 HTMLPanels에 위젯을 "삽입"합니다.

여러분이 볼 수 있듯이 더 많은 일을하는 "템플릿"방법입니다. 내 UiBinders는 거의 비어있는 파일입니다.

내가하는 것처럼 XSS 구멍이 걱정됩니다. 그래서 결국 UIBinder xml 파일에 각 HTML 파일을 넣을 생각이었습니다. 그것은 그렇게 복잡해야합니까 (긴) ??? 누가 UiBinder 만 사용하여 잘 생긴 GWT 앱을 얻는 지 알 수 있습니까?

GXT, SmartGWT 솔루션을 포함한 모든 응답에 관심이 없습니다.

감사합니다.

Answer 1

우리의 과정, 훌륭한 (activegrade.com) :

1. 포토샵 -> HTML을 + CSS는 + 이미지
2. html로 -> UiBinder; Css + 이미지 -> ClientBundle

세 번째 단계는 UiBinder가 이미 수행 한 작업을 다시 발명 한 것처럼 들립니다.

우리가이 프로세스 외부에서 수행하는 유일한 작업은 우리가 사용하려는 위젯에 의해 생성되는 html의 종류를 파악하는 것입니다. 예를 들어, MenuBars는 <table>을 만듭니다. 그래서 "이봐, 테이블에서 프로토 타입을 만들라." FlowPanel s를 만들려면 <div>을 입력하십시오. "이봐, 제발 div에서 프로토 타입을 만드세요." 우리는 한 번 화상을 입었고 html을 다시해야했습니다.

부록 예 :

<!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:with field="resources" 
     type="com.activegrade.client.teacher.dialogfillers.standarddetails.StandardDetail.StandardDetailResources" /> 
    <ui:with field="dialogresources" 
     type="com.activegrade.client.resources.DialogResources" /> 
    <ui:style> 

    </ui:style> 
    <g:HTMLPanel 
     styleName="{resources.css.aNameIChose} {dialogresources.css.agwForm}"> 
     <div class="{dialogresources.css.agwFormBlock}"> 
      <label>Name</label> 
      <g:TextBox ui:field="nameText" /> 
     </div> 
     <div class="{dialogresources.css.agwFormBlock}"> 
      <label>Description</label> 
      <g:TextArea ui:field="descriptionText" /> 
     </div> 
     <div class="{dialogresources.css.agwFormBlockLeft}"> 
      <label>Grading Scale</label> 
      <g:ListBox ui:field="scaleSelector" /> 
     </div> 
     <div class="{dialogresources.css.agwFormBlockRight}"> 
      <label>Calculation Method</label> 
      <g:ListBox ui:field="calculationMethodSelector" /> 
     </div> 
     <div class="{dialogresources.css.agwFormBlock}"> 
      <label>Tags</label> 
      <div class="{resources.css.tagdiv}"> 
       <g:FlowPanel ui:field="panelForTags" /> 
      </div> 
     </div> 
     <g:Button ui:field="addTagsButton">Add Tags</g:Button> 
    </g:HTMLPanel> 
</ui:UiBinder> 

를 작성 :

Answer 2

왜 많은 농구를 뛰어 넘을까요? GWT 인터페이스를 작성하고 작성한 마크 업을보고 CSS를 작성하여 원하는 모양으로 보이게하십시오. 완성 된 CSS를 바인더 템플릿에 통합하거나 외부 파일로 링크 할 수 있습니다. 작동