il modo migliore per esternare l'HTML nelle app GWT?

Question

Qual è il modo migliore per esternalizzare grandi quantità di HTML in un'app GWT? Abbiamo un'app GWT piuttosto complicata di circa 30 "pagine"; ogni pagina ha una sorta di guida in fondo che è diversi paragrafi di markup HTML. Mi piacerebbe esternare l'HTML in modo che possa rimanere il più "senza caratteri" possibile.

Conosco e so come utilizzare i file di proprietà in GWT; questo è sicuramente meglio dell'inclusione del contenuto nelle classi Java, ma ancora brutto per HTML (è necessario backslashify di tutto, così come le virgolette di escape, ecc.)

Normalmente questo è il tipo di cosa che si inserirà un JSP, ma non vedo alcun equivalente a quello in GWT. Sto prendendo in considerazione solo la scrittura di un widget che recupera semplicemente il contenuto dai file html sul server e quindi aggiunge il testo a un widget HTML. Ma sembra che ci dovrebbe essere un modo più semplice.

Answer 1

È possibile utilizzare un meccanismo di modello. Prova i modelli FreeMarker o Velocity. Avrai il tuo codice HTML nei file che verranno recuperati dalle librerie dei modelli. Questi file possono essere nominati con estensioni appropriate, ad es. .html, .css, .js possono essere visti da soli.

Answer 2

Si potrebbe provare a implementare uno Generator per caricare HTML esterno da un file in fase di compilazione e creare una classe che lo emetta. Non sembra esserci troppo aiuto online per la creazione di generatori, ma ecco un post per il gruppo GWT che potrebbe iniziare: GWT group on groups.google.com.

Answer 3

Stavo facendo ricerche simili e, finora, vedo che il modo migliore per affrontare questo problema è tramite lo DeclarativeUI or UriBind. Purtroppo è ancora in incubatore, quindi dobbiamo risolvere il problema.

ho risolto in due modi diversi:

1. overlay attivo, cioè .: si crea il tuo standard di HTML/CSS e iniettare il codice GET tramite <script> tag. Ovunque è necessario accedere a un elemento dal codice GWT si scrive qualcosa di simile:

   RootPanel.get("element-name").setVisible(false); 
   

2. Si scrive il codice 100% GWT e poi, se è necessaria una grossa fetta HTML, si mettono al cliente sia via IFRAME o tramite la tecnologia AJAX e poi iniettare tramite pannello di HTML come questo:

   String html = "<div id='one' " 
       + "style='border:3px dotted blue;'>" 
       + "</div><div id='two' " 
       + "style='border:3px dotted green;'" 
       + "></div>"; 
   HTMLPanel panel = new HTMLPanel(html); 
   panel.setSize("200px", "120px"); 
   panel.addStyleName("demo-panel"); 
   panel.add(new Button("Do Nothing"), "one"); 
   panel.add(new TextBox(), "two"); 
   RootPanel.get("demo").add(panel); 
   

Answer 4

direi che si carica l'HTML esterno attraverso un Frame.

Frame frame = new Frame(); 
frame.setUrl(GWT.getModuleBase() + getCurrentPageHelp()); 
add(frame); 

È possibile organizzare qualche convenzione o di ricerca per la getCurrentPageHelp () per restituire il percorso appropriato (es: /manuals/myPage/help.html)

Ecco un example del telaio in azione.

Answer 5

Non conoscendo GWT, ma non è possibile definire e ancorare il tag div nell'app html, quindi eseguire un get contro i file HTML necessari e aggiungere al div? Quanto sarebbe diverso da un micro-template?

UPDATE:

Ho appena trovato questo bel plugin jQuery in una risposta ad un'altra domanda StackOverflow.

Answer 6

È possibile utilizzare servlet con jsps per le parti html della pagina e includere ancora il javascript necessario per eseguire l'app gwt nella pagina.

Answer 7

Perché non utilizzare il buon vecchio IFRAME? Basta creare un iFrame in cui si desidera inserire un suggerimento e modificare la sua posizione quando cambia la "pagina" GWT.

Vantaggi:

• Hits sono memorizzati in diversi file HTML mantenibili di qualsiasi struttura
• carico in stile AJAX con alcuna codifica a tutti sul lato server
• , se necessario, l'applicazione potrebbe ancora interagire con informazioni caricato

Svantaggi:

• Ogni file suggerimento dovrebbe avere link per CSS condivisa per comuni look-and-feel
• Difficile Internazionalizziamo

Per fare questo approccio un po 'meglio, si potrebbe gestire gli errori di caricamento e reindirizzare alla lingua di default/topic su 404 errori. Quindi, la priorità di ricerca sarà così:

1. argomento attuale per la lingua corrente
2. argomento attuale per lingua predefinita
argomento
3. di default per la lingua corrente
4. pagina di errore predefinita

penso è abbastanza facile creare tale componente GWT per incorporare interazioni iFrame

Answer 8

GWT 2.0, quando ased, dovrebbe avere un ClientBundle, che probabilmente affronta questa necessità.

Answer 9

Il framework GWT Portlets (http://code.google.com/p/gwtportlets/) include un WebAppContentPortlet. Questo serve qualsiasi contenuto dalla tua app web (HTML statico, JSP ecc.). Puoi metterlo su una pagina con funzionalità aggiuntive in altri Portlet e tutto viene recuperato con una singola chiamata asincrona quando la pagina viene caricata.

Dai un'occhiata all'origine di WebAppContentPortlet e WebAppContentDataProvider per vedere come è fatto o provare a utilizzare il framework stesso.Qui ci sono i bit rilevanti di fonte:

WebAppContentPortlet (lato client)

((HasHTML)getWidget()).setHTML(html == null ? "<i>Web App Content</i>" : html); 

WebAppContentDataProvider (lato server):

HttpServletRequest servletRequest = req.getServletRequest(); 
String path = f.path.startsWith("/") ? f.path : "/" + f.path; 
RequestDispatcher rd = servletRequest.getRequestDispatcher(path); 
BufferedResponse res = new BufferedResponse(req.getServletResponse()); 
try { 
    rd.include(servletRequest, res); 
    res.getWriter().flush(); 
    f.html = new String(res.toByteArray(), res.getCharacterEncoding()); 
} catch (Exception e) { 
    log.error("Error including '" + path + "': " + e, e); 
    f.html = "Error including '" + path + 
     "'<br>(see server log for details)"; 
} 

Answer 10

io non sono sicuro di aver capito la tua domanda, ma io' assumerò che tu abbia scomposto questo sommario comune nel suo stesso widget. Se è così, il problema è che non ti piace il modo brutto di incorporare l'HTML nel codice Java.

GWT 2.0 ha UiBinder, che consente di definire la GUI in modello HTMLish non elaborato e di immettere valori nel modello dal mondo Java. Leggi il dev guide e ti dà una bella idea.

Answer 11

È possibile provare GWT App con i modelli HTML generati e associati in fase di esecuzione, senza tempo di compilazione.

Answer 12

Date un'occhiata a http://code.google.com/intl/es-ES/webtoolkit/doc/latest/DevGuideClientBundle.html

Answer 13

Ho usato ClientBundle in un ambiente simile. Ho creato un pacchetto My.Resources e non metto il documento HTML e la classe seguente ci:

package my.resources; 

import com.google.gwt.core.client.GWT; 
import com.google.gwt.resources.client.ClientBundle; 
import com.google.gwt.resources.client.TextResource; 

public interface MyHtmlResources extends ClientBundle { 
public static final MyHtmlResources INSTANCE = GWT.create(MyHtmlResources.class); 

@Source("intro.html") 
public TextResource getIntroHtml(); 

} 

Allora ottengo il contenuto di tale file chiamando il seguente dal mio GWT codice client:

HTML htmlPanel = new HTML(); 
String html = MyHtmlResources.INSTANCE.getIntroHtml().getText(); 
htmlPanel.setHTML(html); 

Vedere http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html per ulteriori informazioni.

Answer 14

In GWT 2.0, è possibile farlo utilizzando UiBinder.

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'> 
    <div> 
    Hello, <span ui:field='nameSpan’/>, this is just good ‘ol HTML. 
    </div> 
</ui:UiBinder> 

Questi file sono tenuti separati dal codice Java e possono essere modificati come HTML. Offrono anche l'integrazione con i widget GWT, in modo da poter accedere facilmente agli elementi contenuti nel codice HTML dal tuo codice GWT.