2017-10-16 97 views
1

我想通過Vaadin(Vaadin框架8)創建一個Web應用程序。建立一個Vaadin網絡應用程序與動態內容

我讀了幾頁文檔,但仍然有一個關於Vaadin應用程序結構的大問題。我的問題是我缺乏關於它背後的理論的某些東西,我會嘗試通過第一次嘗試代碼來暴露我的問題。我會很感激任何能夠幫助我理解Vaadin如何工作的東西。

我想創建一個網站,用戶可以註冊,登錄和註銷。

網站的GUI的結構是首頁那裏有點像一個按鈕或類似的東西做的登錄,如果用戶沒有登錄,如果用戶登錄,而不是登錄按鈕,它應該出現註銷按鈕

首先,我有一個類延伸UI;在那個類中,我設置了servlet和init()方法。

init()方法中,我開始創建VerticalLayout(),然後MenuBarPanel(稱爲contentPanel)。然後,我創建了一個Navigator。我遇到的第一個問題是,我將導航器理解爲在不同頁面之間瀏覽的可能性;導航器的構造函數想要一個SingleComponentContainer,所以現在,我不知道如何在不同的網頁之間導航。對於我的例子,在構造函數中我使用面板:new Navigator(this, contentPanel);然後我添加不同的View,然後將出現在面板內。最後,我導航到Welcome頁面。

MyUI類:

public class MyUI extends UI { 

    /** 
    * Class that checks if the user is in the database 
    * and the psw inserted is correct 
    */ 
    public static Authentication AUTH; 
    public static User user = null; 

    @WebServlet(value = "/*", asyncSupported= true) 
    @VaadinServletConfiguration(productionMode = false, ui = MyUI.class) 
    public static class MyUIServlet extends VaadinServlet { 
    } 

    @Override 
    protected void init(VaadinRequest request) { 

     AUTH = new Authentication(); 

     VaadinSession.getCurrent().setAttribute("user", user); 

     final VerticalLayout layout = new VerticalLayout(); 
     layout.setMargin(true); 
     setContent(layout); 

     Panel contentPanel = new Panel("Main Panel"); 
     contentPanel.setSizeFull(); 

     new Navigator(this, contentPanel); 
     getNavigator().addView(LoginPage.NAME, LoginPage.class); 
     getNavigator().setErrorView(LoginPage.class); 
     getNavigator().addView(LogoutPage.NAME, LogoutPage.class); 
     getNavigator().addView(WelcomePage.NAME, WelcomePage.class); 

     MenuBar.Command welcome = new Command() { 
      @Override 
       public void menuSelected(MenuItem selectedItem) { 
        getNavigator().navigateTo(WelcomePage.NAME); 
       } 
     }; 

     MenuBar.Command login = new Command() { 
      @Override 
      public void menuSelected(MenuItem selectedItem) { 
       getNavigator().navigateTo(LoginPage.NAME); 
      } 
     }; 

     MenuBar.Command logout = new Command() { 
      @Override 
      public void menuSelected(MenuItem selectedItem) { 
       getNavigator().navigateTo(LogoutPage.NAME); 
      } 
     }; 

     MenuBar mainMenu = new MenuBar(); 
     mainMenu.addItem("Welcome", VaadinIcons.ARROW_CIRCLE_LEFT, welcome); 
     mainMenu.addItem("Login", VaadinIcons.ENTER, login); 
     mainMenu.addItem("Logout", VaadinIcons.EXIT, logout); 

     layout.addComponent(mainMenu); 
     layout.addComponent(contentPanel); 

     getNavigator().navigateTo(WelcomePage.NAME); 

    } 

} 

LoginPage類:

public class LoginPage extends VerticalLayout implements View { 

    private static final long serialVersionUID = 1L; 
    public static final String NAME = "loginpage"; 

    public LoginPage(){ 

     Panel panel = new Panel("Login"); 
     panel.setSizeUndefined(); 
     addComponent(panel); 

     FormLayout content = new FormLayout(); 
     TextField username = new TextField("Username"); 
     content.addComponent(username); 
     PasswordField password = new PasswordField("Password"); 
     content.addComponent(password); 

     Button send = new Button("Enter"); 

     send.addClickListener(new Button.ClickListener() { 
      private static final long serialVersionUID = 1L; 

      public void buttonClick(ClickEvent event) { 

       //The authenticate method will returns 
       //true if the credentials are correct 
       //false otherwise 
       if(MyUI.AUTH.authenticate(username.getValue(), password.getValue())){ 

        //In AUTH there is a User field called "user" 
        //User is a class that represents an user (so it has mail, psw, name etc) 
        VaadinSession.getCurrent().setAttribute("user", MyUI.AUTH.getUser()); 

       }else{ 
        Notification.show("Invalid credentials", Notification.Type.ERROR_MESSAGE); 
        } 

       } 
      }); 

     content.addComponent(send); 
     content.setSizeUndefined(); 
     content.setMargin(true); 
     panel.setContent(content); 
     setComponentAlignment(panel, Alignment.MIDDLE_CENTER); 

    } 

} 

註銷類有登錄類的相同的結構;有一個註銷方法:

private void doLogout() { 

    MyUI.AUTH.setUser(null); 
    VaadinSession.getCurrent().setAttribute("user", MyUI.AUTH.getUser()); 
    getSession().close(); 

} 

另一個問題是:我怎麼能動態地添加組件在我的佈局,立足於用戶狀態(?登錄與否)

下一個問題是:我沒有了解如何有效地進行註銷。

我將添加完整的代碼以方便進行任何測試。

public class LogoutPage extends VerticalLayout implements View { 

    private static final long serialVersionUID = 1L; 
    public static final String NAME = "logoutpage"; 

    public LogoutPage(){ 

     Panel panel = new Panel("Logout"); 
     panel.setSizeUndefined(); 
     addComponent(panel); 

     Button logout = new Button("Logout"); 
     logout.addClickListener(e -> doLogout()); 
     addComponent(logout); 

    } 

    private void doLogout() { 

     MyUI.AUTH.setUser(null); 
     VaadinSession.getCurrent().setAttribute("user", MyUI.AUTH.getUser()); 
     getSession().close(); 

    } 

} 

______________________________________________________________________________ 

public class WelcomePage extends VerticalLayout implements View { 

    private static final long serialVersionUID = 1L; 
    public static final String NAME = "welcomepage"; 

    public WelcomePage() { 
     setMargin(true); 
     setSpacing(true); 
     Label welcome = new Label("Welcome"); 
     welcome.addStyleName("h1"); 
     addComponent(welcome); 

    } 

    @Override 
     public void enter(ViewChangeEvent event) { 
    } 

} 

______________________________________________________________________________ 

public class Authentication { 

    private static User user = null; 
    //those fields should be in user; this is just a test 
    private String userID = "ID"; 
    private String psw = "psw"; 

    public Authentication() { 
    } 

    public void setUser(User user) { 
     Authentication.user = user; 
    } 

    public User getUser(){ 
     return Authentication.user; 
    } 

    public Boolean authenticate(String userID, String psw){ 

     if(userID == this.userID && psw == this.psw) { 
      user = new User(); 
      return true; 
     } 

     return false; 

    } 

} 

回答

2

我看到很多用戶都在苦苦思索vaadin概念。

簡而言之,它不是一個基於頁面的框架,您可以在每次單擊鼠標時切換到新頁面。

相反,它更像是一個Swing應用程序,您可以在其中添加一個gui實例,在其中添加表單/ poups /按鈕,修改它們並根據用戶交互刪除它們。這被稱爲Single-Page Application

導航器主要用於允許用戶使用網頁瀏覽器的向後/向前按鈕導航到「上一頁」或書籤特定頁面。

This link提供了關於這個概念的一些更詳細的信息。

要回答你的問題: - 使用單頁/ nvigation - 當沒有登錄,顯示模式登錄彈出 - 當用戶正確輸入認證,刪除彈出,並顯示在垂直佈局的主要內容 - 當用戶註銷時,請從垂直佈局

爲您簡單的用例的內容,也沒有必要使用導航器或瀏覽

相關問題