GWT conception de panneau de meilleures pratiques

Je suis un newbie dans GWT, et aussi de Swing/SWT interface du style du bâtiment. J'ai travaillé avec HTML pour une longue période de temps, et je sais comment construire mon Isu. Cependant, j'ai du mal à traduire ce à GWT. Ce que je suis en train de faire actuellement, est une INTERFACE utilisateur simple avec une table sur la gauche avec 4 colonnes, titre et une légende, et un panneau sur la droite avec une entrée et de certaines listes déroulantes (filtres de la liste sur la gauche). J'ai fait ça comme une maquette en HTML, mais j'ai de la difficulté à traduire cela en GWT. Chaque ligne de la table doit également avoir une sélection de lien pour la sélection d'un élément dans le tableau.

Je sais de UiBinder, mais de voir qu'il y a eu une page pour elle depuis le mois de décembre, et il est toujours pas sorti, il ne semble pas comme une option viable. J'aimerais si je pouvais convertir mon code HTML pour certaines GWT code, mais il semble comme la substance qui existe dans GWT est à un niveau d'abstraction supérieur. Il semble également difficile à utiliser DOM.createElement choses combinées avec des widgets, c'est à dire. la création de mon propre panneau personnalisé.

OriginalL'auteur Staale | 2009-07-20

  1. 3

    Le truc avec GWT ou Interfaces graphiques Swing est de visualiser votre disposition comme une combinaison de la boîte à outils de mise en page des widgets, imbriquées l'une dans l'autre.

    En fonction de votre description, voici une vue de haut niveau de la façon dont vous pouvez composer votre GUI:

    Commencer avec un HorizontalSplitPanel pour le plus haut niveau.

    Pour le côté gauche (la table:)

    Créer un VerticalPanel et ajouter 3 widgets - une image ou html littérale de l'en-tête, puis une Grille avec 4 colonnes de la table, puis une autre image ou littérale de la légende.
    Ajouter ce panneau vertical sur le côté gauche de la fente du panneau

    (Sinon, vous pourriez sortir avec un gros FlexTable pour l'ensemble de la gauche. Surtout si vous êtes à la recherche d'émuler les tableaux HTML avec colspans et tel)

    Pour le côté droit:

    Créer un VerticalPanel, et juste ajouter des en-têtes, des listes déroulantes et des saisies de texte que nécessaire.
    Alternativement, vous pouvez créer une Grille si vous souhaitez des étiquettes sur le côté de chaque liste déroulante ou de saisie de texte
    Ajouter ce panneau de droite, sur le côté droit de la HorizontalSplitPanel

    est-il possible de mettre un panneau horizontal, disons 1/4 3/4 à gauche à droite de manière statique de sorte qu'il ne peut jamais être repositionné? Je ne peux que semblent le faire situé dans le centre, puis faites-le glisser autour au moment de l'exécution, plutôt que de le spécifier dans mon code.

    OriginalL'auteur Peter Recore

  2. 9

    Ce que vous décrivez semble être assez facilement disponible dans GWT, intégré dans les panneaux.

    Je vous suggère de prendre un coup d'oeil à le GWT vitrine, et d'afficher la source pour voir comment c'est fait.

    Quai échantillon du panel

    GWT conception de panneau de meilleures pratiques

    DockPanel dock = new DockPanel();
dock.setStyleName("cw-DockPanel");
dock.setSpacing(4);
dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);

//Add text all around
dock.add(new HTML(constants.cwDockPanelNorth1()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth1()), DockPanel.SOUTH);
dock.add(new HTML(constants.cwDockPanelEast()), DockPanel.EAST);
dock.add(new HTML(constants.cwDockPanelWest()), DockPanel.WEST);
dock.add(new HTML(constants.cwDockPanelNorth2()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth2()), DockPanel.SOUTH);

//Add scrollable text in the center
HTML contents = new HTML(constants.cwDockPanelCenter());
ScrollPanel scroller = new ScrollPanel(contents);
scroller.setSize("400px", "100px");
dock.add(scroller, DockPanel.CENTER);

    OriginalL'auteur Robert Munteanu

  3. 1

    Je pense que vous pouvez utiliser votre expérience HTML hautement dans votre projet GWT.
    Et vous avez aussi besoin de ne pas aller de l'INTERFACE utilisateur classeur
    Vous pouvez jouer entre les deux.

    La conception de l'ensemble de votre mise en page en HTML. Même lorsque vous avez besoin d'un contenu statique à utiliser le langage HTML. dans votre code HTML à Mettre où vous voulez mettre votre widget interactif. À partir d'ici sur GWT commence. Construire votre belle widgets GWT. Crochet avec votre mise en page HTML par
    RootPanle.get("votre div ID").ajouter(votre widget);

    Cette technique est utilisée également dans le projet exemple est fourni avec le sdk.
    Même dans Google IO 2010, ils sont la promotion de l'UTILISATION de plus de HTML, où vous pouvez (Mon opinion personnelle..)

    OriginalL'auteur iftee

  4. 0

    En plus de la très bonne réponses déjà disponibles:

    Vous pouvez avoir un coup d'oeil à smartGWT qui fournit beaucoup plus de sophisitcated widgets que ceux qui viennent avec GWT. Leur vitrine est également très utile si vous êtes à la recherche d'idées ou de la difficulté à mettre en place quelque chose.

    méfiez-vous cependant que l'introduction d'un grand UI widget library apporte beaucoup de code dans - si votre cas d'utilisation peuvent être remplies par la norme widgets gwt, je suggère simplement de l'utiliser à la place d'un 3ème partie de la bibliothèque d'INTERFACE utilisateur.

    OriginalL'auteur pmr