GWT Responsive Design solution

Question

Je travaille sur GWT pour faire une application web mais maintenant je dois faire mes applications web en Responsive Design mais GWT ne supporte pas Responsive Design s'il vous plaît aidez-moi.

Answer 1

GWT soutient responsive design comme tout autre boîte à outils widget (OK, ce n'est pas tout à fait vrai, il y a des boîtes à outils probablement widget qui font un meilleur travail): faire votre mise en page avec HTMLPanel, FlowPanel, SimplePanel et CSS réactif, ou allez le mise en page active route avec des panneaux de mise en forme et de faire des calculs dans votre code (ou dans un panneau de disposition personnalisé).

Answer 2

En plus de ce que Thomas a dit que vous pouvez regarder dans gwt-bootstrap. Ils ont un widget personnalisé DataGrid qui peut être montré ou caché en fonction des points d'arrêt (tablettes, téléphones, etc.).
Si vous voulez vraiment cacher et afficher les colonnes en fonction de la taille disponible, vous prolonger la DataGrid et faire quelque chose le long de ces lignes:

ResponsiveDataGrid extends DataGrid<myDTO> { 

     private final Column<myDTO,String> column1; 
     private final Column<myDTO,String> column2; 
     private Boolean isCompact; 


     public ResponsiveDataGrid(int pageSize, Resources resources,ActionCell.Delegate<myDTO> actionDelegate) { 
      super(pageSize, resources,new EntityProxyKeyProvider<myDTO>()); 
      initColumns(); 
     } 


     private void initColumns() { 
      // init your columns 
     } 

     private void updateColumns() { 
      int columnCount = getColumnCount(); 
      for (int i =columnCount-1;i>=0;i--) { 
       removeColumn(i); 
      } 
      removeUnusedColGroups(); 
      if (isCompact) { 
       // show columns for compact size 

      } 
      else { 
       // show all columns 
      } 
     } 

     @Override 
     protected int getRealColumnCount() { 
      return getColumnCount(); 
     } 

     // WORKAROUND for some sizing issues in DataGrid 
     private void removeUnusedColGroups() { 
      int columnCount = getColumnCount(); 
      NodeList<Element> colGroups = getElement().getElementsByTagName("colgroup"); 

      for (int i = 0; i < colGroups.getLength(); i++) { 
       Element colGroupEle = colGroups.getItem(i); 
       NodeList<Element> colList = colGroupEle.getElementsByTagName("col"); 

       for (int j = colList.getLength()-1;j>=0; j--) { 
        colGroupEle.removeChild(colList.getItem(j)); 
       } 
      } 
     } 


     @Override 
     public void onResize() { 
      super.onResize(); 
      if (!isAttached()) { 
       return; 
      } 
      // or whatever breakpoint you want to support 
      boolean isNewCompact = (getOffsetWidth() < 800); 
      if (isCompact == null || isNewCompact != isCompact) { 
       isCompact = isNewCompact; 
       updateColumns(); 
      } 
     } 
    } 

Answer 3

Vous pouvez faire votre mise en page réactif en utilisant des requêtes de médias CSS.

Par exemple, pour fabriquer des boîtes de dialogue occupent 90% de l'espace horizontal disponible sur les appareils qui ont la taille d'un écran de 640px, on peut envelopper le style intérieur @media bloc comme ceci:

@media all and (max-width: 640px) { 
    .gwt-DialogBox { 
    width: 90%; 
    } 
} 

Malheureusement (à compter d'aujourd'hui) Le compilateur GWT ne prend pas en charge les médias CSS, donc le code ci-dessus échouera si vous l'utilisez en conjonction avec CssResource. L'une des approches de ce problème consiste à diviser vos ressources CSS en deux fichiers. Tous les styles CSS par défaut (bureau) iraient au premier fichier (par exemple, main.css), et tous vos remplacements mobiles iraient au second fichier (par exemple, mobile.css). Notez que les noms de styles que vous souhaitez remplacer pour mobile doivent être marqués comme @external dans le fichier main.css pour éviter l'obfuscation de noms par le compilateur gwt.

main.css:

@external .mainNorthPanel; 

.mainNorthPanel { 
    position: fixed; 
    top: 0px; 
} 

mobile.css:

@media all and (max-width: 640px) { 
    .mainNorthPanel { 
    position: absolute; 
    top: -3em; 
    } 
} 

Dans votre ClientBundle d'application, utilisez main.css conjointement avec l'interface CssResource et définir le fichier mobile comme un externe ressource:

public interface MyBundle extends ClientBundle { 

    public interface MainStyles extends CssResource { 
     String mainNorthPanel(); 
    } 

    @Source("css/main.css") 
    MainStyles css(); 

    @Source("css/mobile.css") 
    TextResource mobile(); 
} 

Et enfin injecter votre ressource CSS somewh avant lors de l'initialisation du module:

String mobileCss = myBundle.mobile().getText(); 
StyleInjector.injectAtEnd(mobileCss) 

Pour l'exemple de travail complet, jetez un oeil à ce poste JavaWorld qui vient de sortir récemment:

http://www.javaworld.com/article/2842875/java-web-development/responsive-web-design-with-google-web-toolkit.html

Il couvre certains concepts de base tels à base de CSS vues réactives, boîtes de dialogue et menus. Et il y a une petite preuve de concept sur github:

https://github.com/cuppafame/gwt-responsive