Anzeigen von Abfrageergebnissen auf einer Webseite - Vaadin

Question

Ich entwickle eine Web-App eines E-Commerce und ich bin fest, wie Produkte angezeigt werden.

Ich habe alle Produkte, die aus einer Abfrage in einem ArrayList<Product> resultieren, aber ich weiß nicht, wie man sie anzeigt.

Ich dachte über die Verwendung eines tabellenähnlichen Rechtecks ​​für jedes Produkt, wo alle Informationen zu diesem Produkt angezeigt werden, aber ich weiß nicht, welche Komponente ich verwenden sollte, weil die Grid nicht das ist, was ich ' Ich suche nach, denke ich. Diese Tabellen sollten eine Kopfzeile und zwei Spalten haben, die erste Spalte, die den "Titel" der Zeile anzeigt (wie Name, Beschreibung, Preis usw.) und die zweite Spalte den Wert dieses Produkts. Ich schaute auf das Raster, aber es hat eine "Spalte-Major" Reihenfolge und ich bin auf der Suche nach einem "Row-Major".

Eine Lösung kam ich mit könnte ein Panel für jedes Produkt verwenden, und innerhalb dieser Platte konnte ich hinzufügen Labels und Buttons, aber es scheint mir, als eine Verknüpfung, die nicht das Potenzial von Vaadin nicht nutzen.

Außerdem, wie kann ich die Anzahl der Raster (oder Tabellen oder was auch immer die Komponente, die ich verwenden könnte) dynamisch in einer Zeile im Browserfenster und das Risiko der Produkte außerhalb dieses Fensters angezeigt werden ?

Answer 1

kam ich mit dieser Lösung auf.

Ich habe eine gridLayout verwendet, um eine Tabelle mit allen Informationen zu erstellen.

public class SearchResultsView extends VerticalLayout implements View { 

    public static final String NAME = "results"; 

    SearchResultsView(String search, String brandToSearch, String instrumentTypeToSearch, 
      String usedStatusToSearch, String productTypeToSearch){ 

     Authentication localAuth = (Authentication) UI.getCurrent().getSession().getAttribute("AUTH"); 
     User user = localAuth.getUser(); 

     Label labelTitle = new Label("Search results"); 
     labelTitle.setStyleName(ValoTheme.LABEL_BOLD); 
     labelTitle.addStyleName(ValoTheme.LABEL_COLORED); 
     labelTitle.addStyleName(ValoTheme.LABEL_LARGE); 

     addComponent(labelTitle); 
     setComponentAlignment(labelTitle, Alignment.TOP_LEFT); 

     if(brandToSearch == null) { 
      brandToSearch = "All"; 
     } 

     if(instrumentTypeToSearch == null) { 
      instrumentTypeToSearch = "All"; 
     } 


     if(productTypeToSearch == null) { 
      productTypeToSearch = "All"; 
     } 

     if(usedStatusToSearch == null) { 
      usedStatusToSearch = "0"; 
     } 
     else { 
      switch(usedStatusToSearch) { 
      case "All": 
       usedStatusToSearch = "0"; 
       break; 
      case "Used": 
       usedStatusToSearch = "true"; 
       break; 
      case "Not used": 
       usedStatusToSearch = "false"; 
       break; 
      default: 
       usedStatusToSearch = "0"; 
       break; 
      } 
     } 

     Boolean searchStringIsVoid = true; 
     if(!search.isEmpty()) { 
      searchStringIsVoid = false; 
     } 

     List<Product> queryResults = new ArrayList<Product>(); 

     try { 
      queryResults = dao.QueriesDAO.getProducts(searchStringIsVoid, search, brandToSearch, instrumentTypeToSearch, usedStatusToSearch, productTypeToSearch); 
     } catch (UnknownHostException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
     } 

     for(Product product : queryResults) { 

      int cols = 2; 
      int rows; 

      switch(product.getProductType()) { 
       case "s": 
        rows = 11; 
        break; 
       case "p": 
        rows = 10; 
        break; 
       case "c": 
        rows = 9; 
        break; 
       default: 
        rows = 9; 
        break; 
      } 

      GridLayout productGrid = new GridLayout(cols, rows); 
      productGrid.setSizeFull(); 
      productGrid.setMargin(true); 

      Panel productInfo = new Panel(); 

      Label productName = new Label(product.getNome()); 
      productName.setStyleName("gridlayout-slot"); 
      productName.addStyleName(ValoTheme.LABEL_BOLD); 
      productName.addStyleName(ValoTheme.LABEL_H3); 
      productGrid.addComponent(productName, 0, 0, cols - 1, 0); 

      Label description = new Label("Description"); 
      description.addStyleName(ValoTheme.LABEL_BOLD); 
      productGrid.addComponent(description, 0, 1); 
      TextArea descriptionText = new TextArea(); 
      descriptionText.setWidth(100, Unit.PERCENTAGE); 
      descriptionText.setValue(product.getDescrizione()); 
      descriptionText.setReadOnly(true); 
      productGrid.addComponent(descriptionText, 1, 1); 

      Label weight = new Label("Weight"); 
      weight.setStyleName(ValoTheme.LABEL_BOLD); 
      productGrid.addComponent(weight, 0, 2); 
      String peso = String.valueOf(product.getPeso()) + " Kg"; 
      productGrid.addComponent(new Label(peso), 1, 2); 

      Label brand = new Label("Brand"); 
      brand.setStyleName(ValoTheme.LABEL_BOLD); 
      productGrid.addComponent(brand, 0, 3); 
      productGrid.addComponent(new Label(product.getMarca().toString()), 1, 3); 

      Label instrType = new Label("Instrument type"); 
      instrType.setStyleName(ValoTheme.LABEL_BOLD); 
      productGrid.addComponent(instrType, 0, 4); 
      productGrid.addComponent(new Label(product.getClassificazione().toString()), 1, 4); 

      Label usedStatus = new Label("Used status"); 
      usedStatus.setStyleName(ValoTheme.LABEL_BOLD); 
      productGrid.addComponent(usedStatus, 0, 5); 
      String usedString = (product.isUsato()) ? "Used" : "Not used"; 
      productGrid.addComponent(new Label(usedString), 1, 5); 

      Label date = new Label("Insertion date"); 
      date.setStyleName(ValoTheme.LABEL_BOLD); 
      productGrid.addComponent(date, 0, 6); 
      productGrid.addComponent(new Label(product.getDataInserimento().toString()), 1, 6); 

      Label price = new Label("Price"); 
      price.setStyleName(ValoTheme.LABEL_BOLD); 
      productGrid.addComponent(price, 0, 7); 
      java.util.Formatter unitaryPrice = new java.util.Formatter(); 
      String priceToString = unitaryPrice.format("%.2f", product.getPrezzo()).toString() + " €"; 
      productGrid.addComponent(new Label(priceToString), 1, 7); 
      unitaryPrice.close(); 

      if(product.getProductType().equals("p")) { 
       //rows == 10 

       Label applicableDiscount = new Label("Applicable discount"); 
       applicableDiscount.setStyleName(ValoTheme.LABEL_BOLD); 
       productGrid.addComponent(applicableDiscount, 0, rows - 2); 

       String discountValueToString = String.valueOf(product.getSconto()) + "%"; 
       Label applicableDiscountValue = new Label(discountValueToString); 
       productGrid.addComponent(applicableDiscountValue, 1, rows - 2); 

      } 
      else if(product.getProductType().equals("s")) { 
       //rows == 11 

       Label levelSuggested = new Label("Suggested level"); 
       levelSuggested.setStyleName(ValoTheme.LABEL_BOLD); 
       productGrid.addComponent(levelSuggested, 0, rows - 3); 

       String levelSuggestedValueToString = product.getLivelloConsigliato().toString(); 
       Label levelSuggestedValue = new Label(levelSuggestedValueToString); 
       productGrid.addComponent(levelSuggestedValue, 1, rows - 3); 

       Label applicableDiscount = new Label("Applicable discount"); 
       applicableDiscount.setStyleName(ValoTheme.LABEL_BOLD); 
       productGrid.addComponent(applicableDiscount, 0, rows - 2); 

       String discountValueToString = String.valueOf(product.getSconto()) + "%"; 
       Label applicableDiscountValue = new Label(discountValueToString); 
       productGrid.addComponent(applicableDiscountValue, 1, rows - 2); 

      } 

      Button addToCart = new Button("Add to cart"); 
      addToCart.addClickListener(e -> { 
       user.getShoppingCart().addToCart(product); 
       localAuth.setUser(user); 
       UI.getCurrent().getSession().setAttribute("AUTH", localAuth); 
       UI.getCurrent().getNavigator().navigateTo(CartView.NAME); 
      }); 
      addToCart.setStyleName(ValoTheme.BUTTON_FRIENDLY); 
      addToCart.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT); 
      addToCart.setIcon(VaadinIcons.PLUS_CIRCLE_O); 
      productGrid.addComponent(addToCart, 0 , rows - 1, 1, rows - 1); 

      productInfo.setContent(productGrid); 

      productInfo.setSizeFull(); 

      addComponent(productInfo); 
     } 

    } 

} 

Answer 2

Sie können Ihre eigene benutzerdefinierte Komponente (wie beschrieben) erstellen, um jedes Produkt darzustellen. Wenn Sie Raster benötigen, um Ihre Ergebnisliste auf der Webseite zu verfassen, können Sie jetzt eine beliebige Komponente zu einem Raster hinzufügen.

https://vaadin.com/download/release/8.1/8.1.4/release-notes.html#enhancements https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/component-renderer