Skip to content

Instantly share code, notes, and snippets.

@yisiqi

yisiqi/LoginView.java

Last active January 3, 2016 08:09
Show Gist options
  • Save yisiqi/8434348 to your computer and use it in GitHub Desktop.
Save yisiqi/8434348 to your computer and use it in GitHub Desktop.
Download ZIP
使用Sencha GXT（Ext for GWT）、EasyUI、CafeJS开发登陆页面的代码比较。
Raw
login.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>数字城管平台</title>
<script type="text/javascript" src="scripts/config.js"></script>
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src="scripts/client-libs-login.js"></script>
<script type="text/javascript" src="scripts/remoteServiceProxy.js"></script>
<script type="text/javascript" src="plugin/jquery.md5.js"></script>
<link href="themes/telchina/login.css" rel="stylesheet" type="text/css"/>
<link href="themes/telchina/easyui.css" rel="stylesheet" type="text/css"/>
<link href="themes/icon.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function login() {
var userCode = $('#userCode').val();
var passWord = $('#password').val();
if (userCode == "") {
$.messager.alert("系统提示", "用户名为空，请检查！", 'info');
$('#userCode').focus();
return;
}
if (passWord == "") {
$.messager.alert("系统提示", "密码为空，请检查！", 'info');
$('#password').focus();
return;
}
passWord = $.md5(passWord);
SysUserService().logIn(userCode, passWord, {success: loginSuccess, error: loginError});
}
function loginSuccess(data) {
$.messager.alert("成功", "登录成功!", 'info');
}
function loginError(data) {
$.messager.alert("失败", "登录失败!", 'info');
}
</script>
</head>
<body style="min-width:1410px; overflow-y:hidden;">
<div class="login-panel">
<div class="login_cont">
<div class="box_style">
<input id="username" name="username" class="input_user" type="text" class="input" style="width:206px;" maxlength="20"/>
</div>
<div class="box_style">
<input id="password" name="password" class="input_pwd" type="password" class="input" style="width:206px;" maxlength="22"/>
</div>
<div class="float_style">
<input id="login" name="login" type="image" src="themes/images/login.jpg" onclick="login()"/>
</div>
</div>
</div>
</body>
</html>
Raw
login.xml
<?xml version="1.0" encoding="UTF-8"?>
<ui:application xmlns="http://www.icecoffee.org/ui/bootstrap"
xmlns:ui="http://www.icecoffee.org/ui" title="示例应用 - 登录">
<panel>
<panel-head>
<h2>登录</h2>
</panel-head>
<panel-body>
<form action="LoginService.login" success="loginSuccessHandler" failed="loginFailedHandler">
<field name="username" label="用户名" validator="{minLength:1}"/>
<field name="password" type="password" label="密码" validator="{minLength:1}"/>
<button type="reset">重置</button>
<button type="commit">登录</button>
</form>
</panel-body>
</panel>
<script>
<![CDATA[
var loginSuccessHandler = function(data) {
cafe.messager.info("成功"，"登录成功!")
}
, loginFailedHandler = function(data) {
cafe.messager.error("失败"，"登录失败!")
}
]]>
</script>
</ui:application>
Raw
LoginView.java
package com.sencha.gxt.explorer.client.forms;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.cell.core.client.form.ComboBoxCell.TriggerAction;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.examples.resources.client.TestData;
import com.sencha.gxt.examples.resources.client.model.Stock;
import com.sencha.gxt.examples.resources.client.model.StockProperties;
import com.sencha.gxt.explorer.client.model.Example.Detail;
import com.sencha.gxt.widget.core.client.FramedPanel;
import com.sencha.gxt.widget.core.client.box.MessageBox;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutPack;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.form.FieldLabel;
import com.sencha.gxt.widget.core.client.form.FormPanel;
import com.sencha.gxt.widget.core.client.form.FormPanel.Encoding;
import com.sencha.gxt.widget.core.client.form.FormPanel.Method;
import com.sencha.gxt.widget.core.client.form.TextField;
import com.sencha.gxt.widget.core.client.form.PasswordField;
import com.sencha.gxt.widget.core.client.info.Info;
import cn.telchina.platform.showcase.gwt.LoginService;
public class LoginView implements IsWidget, EntryPoint {
private FramedPanel panel;
private LoginService service = new LoginService();
public Widget asWidget() {
if (panel == null) {
panel = new FramedPanel();
panel.setHeadingText("登录");
panel.setButtonAlign(BoxLayoutPack.CENTER);
panel.setWidth(350);
panel.getElement().setMargins(10);
final FormPanel form = new FormPanel();
form.setAction("myurl");
form.setEncoding(Encoding.MULTIPART);
form.setMethod(Method.POST);
panel.add(form);
VerticalLayoutContainer p = new VerticalLayoutContainer();
form.add(p);
TextField userName = new TextField();
userName.setAllowBlank(false);
p.add(new FieldLabel(userName, "用户名"), new VerticalLayoutData(-18, -1));
PasswordField password = new TextField();
p.add(new FieldLabel(password, "密码"), new VerticalLayoutData(-18, -1));
TextButton btn = new TextButton("重置");
btn.addSelectHandler(new SelectHandler() {
@Override
public void onSelect(SelectEvent event) {
form.reset();
// TODO needs to be part of form panel, ie a Field interface
file.reset();
}
});
panel.addButton(btn);
btn = new TextButton("登录");
btn.addSelectHandler(new SelectHandler() {
@Override
public void onSelect(SelectEvent event) {
if (!form.isValid()) {
return;
}
if (service.login(userName.getValue(), password.getValue())) {
MessageBox box = new MessageBox("成功", "登录成功！");
box.setIcon(MessageBox.ICONS.info());
box.show();
} else {
MessageBox box = new MessageBox("失败", "登录失败！");
box.setIcon(MessageBox.ICONS.error());
box.show();
}
}
});
panel.addButton(btn);
}
return panel;
}
public void onModuleLoad() {
RootPanel.get().add(asWidget());
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment