wicket學習筆記(2):簡單登陸頁面的創建

這次整理了先前大概wicket學習使用的簡單東西,創建了一個簡單登陸頁面。主要用來學習以下知識點內容。

wicket基礎配置文件等見上一篇文章:

wicket學習筆記(1):入門篇

頁面效果如下(用來測試控件學習使用的)
在這裏插入圖片描述

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>登錄&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                    <li>註冊&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                    <li>公司合作&nbsp;&nbsp;|</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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright &copy;
                2004-2014&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;XXXXXX(Decorating &nbsp;&nbsp;Houses)
                &nbsp;&nbsp;&nbsp;&nbsp;ICPXX
                備XXXXXXXX號 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                增值電信業務經營許可證:&nbsp;&nbsp;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的地址,不斷的學習後,不斷的去完善。

GitHub上該項目的地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章