Ext学习日记——网页计算器示例

 

网页计算器是方便用户进行数学计算的一种有力工具。传统的网页计算器通过纯JvaScript在客户端实现，计算逻辑易被用户获取，安全性不高。通过Ajax优化过的网页计算器将主要的计算逻辑放在服务器端进行运算，客户端服装收集用户输入的表达式，提高了程序的安全性非常适合于有安全要求的场合。

 

 

 

/*
 * 网页计算器示例
 */
Ext.onReady(function() {
Ext.onReady(function() {
var calpanel = new Ext.panel.Panel({
title: '计算器',
renderTo: Ext.getBody(),
bodyPadding: 5,
width: 270,
layout: {
type: 'table',
columns: 5  //设置表格布局默认列数
},
frame: true,
tbar: ['公式：',new Ext.form.field.Text({
id: 'expression',
readOnly: true,
style: 'text-align:right'
}),
'=',
new Ext.form.field.Text({
id: 'result',
width: 60
})],
defaultType: 'button',
defaults: {
minWidth: 50,
handler: btnClick
},
items: [{
text: '1',symbol: '1'
}, {
text: '2',symbol: '2'
}, {
text: '3',symbol: '3'
}, {
text: '(',symbol: '('
},{
text: ')',symbol: ')'
}, {
text: '4',symbol: '4'
}, {
text: '5',symbol: '5'
}, {
text: '6',symbol: '6'
}, {
text: '+',symbol: '+'
},{
text: '-',symbol: '-'
}, {
text: '7',symbol: '7'
}, {
text: '8',symbol: '8'
}, {
text: '9',symbol: '9'
}, {
text: '×',symbol: '*'
}, {
text: '÷',symbol: '/'
}, {
text: '0',symbol: '0'
}, {
text: '.',symbol: '.'
}, {
text: '=',symbol: '='
}, {
text: 'c',symbol: 'clear'
}, {
text: '<―',symbol: 'back'
}]
})
 
//取得id为expression的组件引用
var expression = Ext.getCmp('expression');
//取得id为result的组件引用
var result = Ext.getCmp('result');
//按钮单击事件的处理函数
function btnClick(btn) {
var oldValue = expression.getValue();
if(btn.symbol == 'back') {
//取消最后一次输入的字符
oldValue = oldValue.substring(0, oldValue.length - 1);
} else if(btn.symbol == 'clear') {
//清空表达式和结果
oldValue = '';
result.setValue('');
} else if(btn.symbol == '=') {
//计算表达式
calculate();
} else if(btn.symbol == '.') {
alert(oldValue.indexOf('.'))
if(oldValue.indexOf('.') != -1) {
return;
}
oldValue += btn.symbol;
} else {
//累计表达式字符串
oldValue += btn.symbol;
}
expression.setValue(oldValue);
}
 
//计算表达式函数
 function calculate() {
         var str = expression.getValue();
         //判断表达式是否为空
         if(!Ext.isEmpty(str)) {
                 //将表达式发送到服务器进行计算
                 Ext.Ajax.request({
                         url: 'calculateServer.jsp',
                         params: {
                                 Exp: str
                         },
                         callback: function(options, success, response) {
                                 if(success) {
                                         result.setRawValue(response.responseText);
                                 } else {
                                         result.setRawValue('error');
                                 }
                         }
                 })
         }
         
 }
})
})

 

 

 

服务器端代码：

在服务端使用Apache的commons-jexl-1.1.jar解析表达式字符串并进行计算

<%@ page language="java" contentType="text/html;charset=utf-8" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="org.apache.commons.jexl.*" %>
<%
String jexlExp = request.getParameter("Exp");
System.out.println(jexlExp);
Expression e = ExpressionFactory.createExpression(jexlExp);
JexlContext jc = JexlHelper.createContext();
Object result = e.evaluate(jc);
response.getWriter().write(result.toString());
%>