1
Vaadin (Vaadin Framework 8)을 통해 웹 앱을 만들려고합니다.동적 콘텐츠로 Vaadin 웹 앱 만들기
문서의 여러 페이지를 읽었지 만 여전히 Vaadin 앱의 구조와 관련하여 큰 문제가 있습니다. 내 문제는 내가 그 이론에 대한 무언가 부족하다는 것이다. 그리고 나는 문제의 코드를 첫 번째 시도로 드러내려고 노력할 것이다. Vaadin의 작동 방식을 이해하는 데 도움이되는 정보를 보내 주시면 감사하겠습니다.
사용자가 등록하고 로그인하고 로그 아웃 할 수있는 웹 사이트를 만들고 싶습니다.
웹 사이트의 GUI의 구조는 인 대신 의, 거기에 사용자가 로그인하지 않은 경우 로그인을 할 수있는 그런 버튼이나 뭐 같은이며, 사용자가 로그인하면 홈페이지 로그인 버튼 일 경우 로그 아웃 버튼으로 표시됩니다.
우선, 확장 클래스가 있습니다. UI; 그 클래스에서 서블릿과 init() 메소드를 설정했습니다. init() 방법에
, I는 VerticalLayout() 생성을 시작, 다음 MenuBar 및 Panel은 (이 ContentPanel 불림). 그런 다음 Navigator을 만듭니다. 내가 처음 만나는 첫 번째 문제는 네비게이터가 다른 페이지를 탐색 할 가능성이 있다는 것을 이해한다는 것입니다. 네비게이터의 생성자는 SingleComponentContainer을 원하기 때문에 다른 웹 페이지를 탐색하는 방법을 모르겠습니다. 예를 들어, 생성자에서 Panel을 사용합니다 : 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;
}
}