這次整理了先前大概wicket學習使用的簡單東西,創建了一個簡單登陸頁面。主要用來學習以下知識點內容。
wicket基礎配置文件等見上一篇文章:
頁面效果如下(用來測試控件學習使用的)
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>WicketDemo3</display-name>
<!-- 這裏用的是filter,也可以用servlet,但是filter可以實現更加強大的功能 -->
<filter>
<filter-name>LoginApplication</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>hhit.wicket.app.LoginApplication</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>LoginApplication</filter-name>
<url-pattern>/hello/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<session-config>
<session-timeout>5</session-timeout>
</session-config>
</web-app>
LoginApplication.java
package hhit.wicket.app;
import org.apache.wicket.Page;
import org.apache.wicket.protocol.http.WebApplication;
import hhit.wicket.login.UserProfilePage;
public class LoginApplication extends WebApplication{
@Override
public Class<? extends Page> getHomePage() {
// TODO Auto-generated method stub
return Login.class;
}
}
Login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XXX登陸頁面</title>
<wicket:linK>
<link rel="stylesheet" href="login.css" type="text/css"/>
</wicket:linK>
</head>
<body>
<div class="header">
<div class="inner_c">
<div class="header_left">Design By Zhou</div>
<div class="header_right">
<div class="hri_left">
<ul>
<li>登錄 |</li>
<li>註冊 |</li>
<li>公司合作 |</li>
</ul>
</div>
<div class="hri_right">諮詢熱線:</div>
</div>
</div>
</div>
<div class="body_top">
<div class="inner_body">
<p><img wicket:id="flower"/></p>
<p class="p_id1">Welcome</p>
</div>
</div>
<div class="body_center">
<div class="inner_body2">
<div class="bc_left">
<img wicket:id="jiaju">
</div>
<div class="bc_right">
<span wicket:id = "feedback">這裏輸出回饋信息</span>
<p></p>
<form method="post" wicket:id="loginForm">
<input type="text" class="name_input" wicket:id="username" for="reservation" placeholder="註冊郵箱/用戶名">
<input type="password" class="pass_input" wicket:id="password" for="reservation" placeholder="密碼">
<input type="submit" class="p_login" value="立即登錄"/>
<a href="#" wicket:id="registerPage">免費註冊</a>
</form>
</div>
</div>
</div>
<div class="bottom">
<div class="inner_bottom">
<div class="bottom1">
<p class="p_l"> Copyright ©
2004-2014 XXXXXX(Decorating Houses)
ICPXX
備XXXXXXXX號
增值電信業務經營許可證: XXXXXXXXXXX</p>
<p class="p_r"><img wicket:id="govIcon" alt=""></p>
<!--<p>免責聲明:本網站設計用於理論學習</p>-->
</div>
</div>
</div>
</body>
</html>
Login.java
package hhit.wicket.app;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.PasswordTextField;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.image.Image;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.CompoundPropertyModel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.model.PropertyModel;
import hhit.wicket.main.MainPage;
import hhit.wicket.register.RegisterPage;
public class Login extends WebPage{
//用戶名:輸入文本框
private TextField usernameField;
//用戶密碼:輸入密碼框
private PasswordTextField passwordField;
//回饋信息
private FeedbackPanel feedback;
public Login() {
super();
LoginBean loginBean = new LoginBean();
CompoundPropertyModel userModel = new CompoundPropertyModel(loginBean);
Form form = new LoginForm("loginForm",userModel);
add(form);
// 用戶名 和 用戶密碼
usernameField = new TextField("username");
passwordField = new PasswordTextField("password");
feedback = new FeedbackPanel("feedback");
//添加圖片資源
add(new Image("flower", "flower.jpg"));
add(new Image("jiaju","jiaju1.jpg"));
add(new Image("govIcon","govIcon.gif"));
form.add(usernameField);
form.add(passwordField);
add(feedback);
//前往註冊頁面,點擊這個之後
form.add(new Link<String>("registerPage") {
@Override
public void onClick() {
// TODO Auto-generated method stub
setResponsePage(RegisterPage.class);
}
});
}
class LoginForm extends Form{
public LoginForm(String id, IModel model) {
super(id, model);
// TODO Auto-generated constructor stub
}
@Override
protected void onSubmit() {
// form 提交後的處理
System.out.println(getModelObject().toString());
System.out.println(passwordField.getValue());
if(authenticate(usernameField.getValue(),passwordField.getValue())) {
MainPage mainPage = new MainPage(usernameField.getValue(),Login.this);
setResponsePage(mainPage);
}else {
//進入到失敗界面,或者登陸界面彈窗提示錯誤
System.out.println("輸入的用戶名或者密碼不對");
// 2020.2.19.14 feedbackpanel的使用
String errMsg = getLocalizer().getString("login.errors.invalidCredentials", this,"用戶名或者密碼不正確");
error(errMsg);
}
}
public final boolean authenticate (final String username,final String password) {
if(username.equals("zxr")&&password.equals("123456")) {
return true;
}else {
return false;
}
}
}
}
這裏主要是學習以下幾個內容:
1 wicket中頁面跳轉方式
1)直接使用類class
setResponsePage(MainPage.class);
2)這裏可以在類對象中設置變量值,實現傳遞參數
MainPage mainPage = new MainPage();
setResponsePage(mainPage);
2 wicket中樣式的引入,在頁面中要使用wicket:link
<wicket:linK>
<link rel="stylesheet" href="login.css" type="text/css"/>
</wicket:linK>
這裏給出GitHub的地址,不斷的學習後,不斷的去完善。