Maven 创建java web project 添加struts支持 jqwidgets生成折线图

首先通过maven创建java web project

第一种方式：通过eclipse的maven插件

1.new project



选择Maven Project-->Next



保持默认 Next->



选择maven-archetype-webapp->Next



输入GroupId和Artficated Id->Finish

第二种方式：通过命令行方式：

mvn archetype:generate -DgroupId={project-packaging} -DartifactId={project-name}
 -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false


这种方式会在另外一篇中详细描述～～

在eclipse里看到生成的项目目录如下图所示：



这时index.jsp会报错“The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path”

这是因为没有添加javax.servlet.http.HttpServlet  有两种解决方法：

第一种是在java build path中添加Add Library



点击Add Library->



选择Server Runtime



添加Apathe Tomcat7.0



  这个有一个前提就是需要你在Window->Prefence->Servers里边添加过tomcat的服务器



第二种解决方法是在在java BildPath中添加 Add Variable 中添加 JSP_API和SERVELET_API



2编辑pom.xml文件：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion>
<groupId>com.cn.webapptest</groupId>
<artifactId>WebAppTest</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>WebAppTest Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-core</artifactId>
<version>2.3.16.1</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-spring-plugin</artifactId>
<version>2.3.16.1</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-json-plugin</artifactId>
<version>2.3.16.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.30</version>
</dependency>
</dependencies>
<build>
<finalName>WebAppTest</finalName>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
</plugin>
</plugins>
</build>
</project>
这里需要添加添加了struts的json支持 为了方便后面生成折线图的时候从服务器段取json格式数据

3.编辑web.xml文件

<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
<display-name>Archetype Created Web Application</display-name>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:applicationContext*.xml</param-value>
</context-param>

<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>

4.编辑struts.xml文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<package name="/" namespace="/" extends="json-default">

<action name="ajaxRequest" class="com.cn.action.UserInfoAction" method="init">
<result name="success" type="json"></result>
</action>

</package>

</struts>
5.编辑log4j.xml文件  这个暂时没用到

<?xml version="1.0" encoding="UTF-8"?>
<!--
- Copyright 1999-2011 Alibaba Group.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0 -
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
<!DOCTYPE log4j:configuration SYSTEM "log4j.dtd">
<log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/" debug="false">
<appender name="CONSOLE" class="org.apache.log4j.ConsoleAppender">
<layout class="org.apache.log4j.PatternLayout">
<param name="ConversionPattern" value="[%d{dd/MM/yy hh:mm:ss:sss z}] %t %5p %c{2}: %m%n" />
</layout>
</appender>
<root>
<level value="INFO" />
<appender-ref ref="CONSOLE" />
</root>
</log4j:configuration>
这时候项目的目录结构



这里边已经添加过jquery和jqwidgets的lib文件了

先上效果图：效果非常漂亮～～～



index.jsp

<html>
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="./jquery-2.1.1.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxchart.js"></script>
<script type="text/javascript">
/** $(function() {
var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];
$( "#keyword" ).autocomplete({ source: availableTags });
$("#searchKeyword").autocomplete({
source:function(request,response){
$.ajax({
url:"ajaxRequest.action",
datatype:"json",
data:{
searchKeyword:encodeURI(encodeURI($("#searchKeyword").val()))
},
success:function(data){
response($.map(data.result,function(item){
return {value:item}
}));
}
});
},
minLength:1,
})
})*/
$(document).ready(function () {
var sampleData =[];
$.ajax({
url:"ajaxRequest.action",
datatype:"json",
data:{
//searchKeyword:encodeURI(encodeURI($("#searchKeyword").val()))
},
success:function(data){
console.log(data.userInfoList);
sampleData = data['userInfoList'];
console.log(sampleData);
// prepare chart data as an array
/* var test = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
]; */
console.log(test);
/* var source =
{
datatype: "json",
datafields: [
{ name: 'initTime' },
{ name: 'newAndroidUser' },
{ name: 'newIosUser' },
{ name: 'newTotalUser' }
],
url: 'ajaxRequest.action'
}; */
// prepare jqxChart settings
var settings = {
title: "XingXunTong User Info Static",
description: "New User of Day",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'initTime',
type: 'date',
showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
showLabels: true,
valueAxis:
{
// unitInterval: 10,
minValue: 0,
//maxValue: 100,
description: 'New User ',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'newAndroidUser', displayText: 'New Android User', symbolType: 'square'},
{ dataField: 'newIosUser', displayText: 'New IOS User', symbolType: 'square'},
{ dataField: 'newTotalUser', displayText: 'New Total User', symbolType: 'square'}
//{ dataField: 'Swimming', displayText: 'Personal Cycling', symbolType: 'square'}
]
}
]
};

// setup the chart
$('#chartContainer').jqxChart(settings);
}
});

});
</script>
<body>
<h2>Hello World!</h2>
<div id='chartContainer' style="width:850px; height:500px">
</div>
</body>
</html>
UserInfoAction

package com.cn.action;
import java.util.ArrayList;
import java.util.List;

import com.cn.model.UserInfo;
import com.cn.service.UserInfoService;
import com.opensymphony.xwork2.ActionSupport;

public class UserInfoAction extends ActionSupport {
/**
*
*/
private UserInfoService service = new UserInfoService();
private static final long serialVersionUID = 1566390295544428070L;
private List<UserInfo> userInfoList;
public String init(){
List<UserInfo> userList  = new ArrayList<UserInfo>();
userList.add(new UserInfo("2014-06-05",40,60,100));
userList.add(new UserInfo("2014-06-04",38,72,120));
userList.add(new UserInfo("2014-06-03",43,26,69));
userList.add(new UserInfo("2014-06-02",66,60,126));
userList.add(new UserInfo("2014-06-01",75,57,132));
userList.add(new UserInfo("2014-05-31",40,80,120));
userList.add(new UserInfo("2014-05-30",89,33,122));

/*this.setUserInfoList(service.init());*/

return SUCCESS;
}
public List<UserInfo> getUserInfoList() {
return userInfoList;
}
public void setUserInfoList(List<UserInfo> userInfoList) {
this.userInfoList = userInfoList;
}

}

UserInfo.java
package com.cn.model;

public class UserInfo {
private String initTime;
private int newAndroidUser;
private int newIosUser;
private int newTotalUser;
public UserInfo(String initTime,int newAndroidUser,int newIosUser,int newTotalUser){
this.initTime = initTime;
this.newAndroidUser = newAndroidUser;
this.newIosUser = newIosUser;
this.newTotalUser = newTotalUser;

}
public String getInitTime() {
return initTime;
}
public void setInitTime(String initTime) {
this.initTime = initTime;
}
public int getnewAndroidUser() {
return newAndroidUser;
}
public void setnewAndroidUser(int newAndroidUser) {
this.newAndroidUser = newAndroidUser;
}
public int getnewIosUser() {
return newIosUser;
}
public void setnewIosUser(int newIosUser) {
this.newIosUser = newIosUser;
}
public int getnewTotalUser() {
return newTotalUser;
}
public void setnewTotalUser(int newTotalUser) {
this.newTotalUser = newTotalUser;
}

}
由于添加了struts的json插件 我们在strtus.xml中配置
<package name="/" namespace="/" extends="json-default">

<action name="ajaxRequest" class="com.cn.hitachi.action.UserInfoAction" method="init">
<result name="success" type="json"></result>
</action>

</package>就可以将action中的数据转变为json数据格式,



<div selected="true" role="tabpanel" class="netInfoResponseText netInfoText "><pre role="list"><code class="wrappedText focusRow" role="listitem">{"userInfoList":[
        {"initTime":"2013-12-24","newAndroidUser":226,"newIosUser":204,"newTotalUser":430},
</code><code class="wrappedText focusRow" role="listitem">        {"initTime":"2013-12-25","newAndroidUser":219,"newIosUser":241,"newTotalUser":460},
        {"initTime":"2013-12-26"</code><code class="wrappedText focusRow" role="listitem">,"newAndroidUser":216,"newIosUser":221,"newTotalUser":437},
        {"initTime":"2013-12-27","newAndroidUser"</code><code class="wrappedText focusRow" role="listitem">:218,"newIosUser":226,"newTotalUser":444},
        {"initTime":"2013-12-28","newAndroidUser":208,"newIosUser"</code><code class="wrappedText focusRow" role="listitem">:213,"newTotalUser":421},
        {"initTime":"2013-12-29","newAndroidUser":235,"newIosUser":231,"newTotalUser"</code><code class="wrappedText focusRow" role="listitem">:466},
        {"initTime":"2013-12-30","newAndroidUser":256,"newIosUser":237,"newTotalUser":493}
   ]
}</code>

然后我们用 data['userInfoList'];的方式取其中的key为userInfoList的数据赋给折线图的数据源就可易得到效果了～～