在Swing中做更多web的事情

在Swing客户端中有时候想加载网页,Flash,甚至需要一个很不错的富文本编辑器,这些需求Swing本身没有,或者很弱,比如富文本的支持。

接下来给你介绍一个第三方的Library – DJNativeSwing

支持什么呢?

  • web浏览器支持,HTML、Javascript和Swing交互支持
  • 常见的JS富文本编辑器,比如FCKeditor,Ckeditor,TinyMCE,Dirty indicator等
  • 嵌套Flash
  • 语法高亮
  • mediaPlay(Win32)
  • 其他…

DJNativeSwing
继续阅读在Swing中做更多web的事情

HTML5检测技术

有四种基本技术可以用于检测浏览器是否支持某种HTML5特性:

1、检测全局对象(诸如window或者navigator)是否拥有特定的属性;

2、创建一个元素,然后检测该元素的 DOM 对象是否拥有特定的属性。

3、创建一个元素,然后检测这个元素的 DOM 对象是否拥有特定的方法,同时调用这个方法并检查它的返回值。

4、创建一个元素,给这个元素的 DOM 对象设定特定的属性值, 然后检查浏览器是否保留了该属性值。

这是常见的自主检测的方法,不过现在没必要如此麻烦了,Moderniz是一个基于MIT许可证书发布的开源 Javascript 类库,用于检测浏览器是否支持 HTML5 及 CCS3特性。 继续阅读HTML5检测技术

跨浏览器的HTML5 placeholder 实现

HTML 5的input元素引入了placeholder的属性,就是为了实现input提示的,但是在不支持HTML5的浏览器下就要考虑兼容问题,下面的这个实现就很好的解决了兼容问题:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
.placeholder {
	color: #a9a9a9;
}
</style>
</head>
<body>
<div class="row">
<input type="text" placeholder="请输入一些文字" />
</div>
<script>

(function() {
	var tmp = document.createElement("input");
	window.supports = {
		// 检测input是否支持placeholder特性
		placeholder: "placeholder" in tmp
	}
})();

// 绑定input的placeholder
function bindPlaceholder(input) {
	if(!window.supports.placeholder) {
		var jqInput = $(input),
			placeholder = jqInput.attr("placeholder");

		if(placeholder) {
			if(input.value == "") {
				input.value = placeholder;
				$(input).addClass("placeholder");
			}
			jqInput.focus(function() {
				if(this.value == placeholder) {
					$(this).removeClass("placeholder");
					this.value = "";
				}
			}).blur(function() {
				if(this.value == "") {
					$(this).addClass("placeholder");
					this.value = placeholder;
				}
			});
		}
	}
}
$("input[placeholder]").each(function() {
	bindPlaceholder(this);
});
</script>
</body>
</html>

继续阅读跨浏览器的HTML5 placeholder 实现

转载:支付宝浏览器与操作系统统计报告(2010.04)

支付宝注册用户已经突破 3 亿,2009 年网购交易额达到 2670 亿元 (via),支付宝用户特征在一定程度上反映了中国电子商务用户的普遍情况。
基于支付宝网站流量统计数据,支付宝前端开发组最近发布了浏览器与操作系统统计报告。这份报告对电子支付行业以及所有互联网电子商务网站都具有现实意义。

原文:http://ued.alipay.com/2010/04/alipay-client-data-report/

为不同大小的浏览器视窗使用不同的样式表

同一个网站,访问它的浏览器可能会是不同的宽度,常见的有320px,480px,800px,1024px,1280px,1920px等,为不同大小的浏览器视窗提供不同的访问效果,提高用户的使用体验,同时网站本身也可以为不同受众提供不同的资源。

下面提供两种解决方案:

一、通过 W3C standard 来定义,例如:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

上面的代码表示:当访问网站的设备浏览器宽度大于等于800px时,将使用800.css这个样式。

又如:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

上面的代码表示:当访问网站的设备浏览器宽度在701px和900px之间时,将使用medium.css这个样式。

目前Mozilla, Opera和WebKit等浏览器的当前版本都支持这个标准,不幸的是IE浏览器并不支持此标准,包括IE8,以及IE9 Previous。

不要着急,方案二将解决此问题。

继续阅读为不同大小的浏览器视窗使用不同的样式表

本地图片预览(支持IE6,IE7,IE8, Firefox3)

最近在Web项目开发过程中遇到的本地图片预览的需求,虽然最后因为其他原因没能使用,但是也算有些了解,整理出来。

这里我们按浏览器分,主要包括IE6,IE7/8 和Firefox3, 不包含Opera,Safari和Chrome,这三个基本上需求很小,没有研究。

总结一下就是:

IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径,再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo:

提示:你可以先修改部分代码再运行。

[10/01周主题] – Web 项目开发中的常见问题

这周来一直在赶一个Web项目,没多少时间focus到其他上面,于是这周的主题就干脆做个整理,整理下web项目开发时遇到的一些问题和解决办法。

本周主题:Web 项目开发中的常见问题

一、中文乱码

建议统一使用UTF8,或者全局做个filter处理。

二、表单校验

使用第三方校验框架, 而非自己去写,可以减少很多工作量。

三、Ajax的使用

首页尽量少用ajax,页面初次加载时常会加载不上来,尤其多个Ajax实例同时运行。

四、UI 规范

UI最好是出Demo,跟客户确认,定终稿,然后开发按最终效果图实现页面最好,否则没有页面或者效果图,即使有统一的规范,还是会浪费很多时间去调UI问题。

五、浏览器的兼容问题

虽然IE6基本上淘汰了,可老机器上使用IE6的还是不少的,Css 在处理兼容问题时,建议分开处理,在页面进行浏览器version判断,读取不同的css,这样管理和调整起来都方便。

六、比较完整的测试数据

页面框架搭完了,看着效果不错,可是填完数据后会发现和想象的不太一样。

七、用JPA Or JDBC 与数据库交互

JPA与JDBC相比之下,使用JPA大大减少了编程人员的工作量,因此还是偏向使用JPA,特殊环境下再选择JDBC

中国移动的网站能不能再做的烂点呢?

这里谈到的是中国移动北京分公司的网站,其他省市的网站没有去深入测试,估计是大同小异。

1、网站打开速度特别慢

不知道为什么中移动的网站打开超级慢,按理说中移动网站的带宽应该是没有问题的,但是不知为什么每次打开都特别慢,而且经常中断了,在不同的电脑上,不同的网络环境差不多,原因未知。相比之下看看人家中国银行的网站www.boc.cn(没有做广告的嫌疑,只是做个比较),基本上瞬间打开,可能你会说静态网页和动态网页的区别,但是我觉得这不是根本问题,因为速度已经不是一个数量级上的差距了。有时接通10086,话务员查询时打开网站也很慢,让我听了很久音乐,可见中移动内部也是很慢的。下图是打开网站时的一个截图,四个页面有一个是中国银行的,其他三个都是中移动的,截图时间是打开后2分钟左右的样子,点击可看大图:

screenshot_003

2、网站对浏览器的兼容性

说到这个,那是超级烂,由于很久没有使用IE5.5和IE6了,不知道中移动的网站到底对哪个浏览器的兼容性好,反正我在IE7,IE8,Firefox3.5,Google Chrome上访问都有问题,IE7和IE8好在还凑合能使用,Firefox3.5和Google Chrome简直就没法用,就连一个小小的个人网站都知道去解决网站对浏览器兼容性的问题,试想中国最大的运营商和全球最大用户群体的电信企业,网站对浏览器的兼容性做到如此之烂,过去几年了还不去优化,实在是没话可说了,只能尽量少去使用或者不用。

3、“满意100”

忘记了中移动什么时候开始喊这个口号的,但是这几个月来,中移动的服务别说100分了,60分都达不到,10086打过去,客服90%的时间全席忙,网站的在线客服也是90%以上时间满员,处于等待状态,等待就等待吧,还经常断线,再进去前面又插进去几个客户了,继续等待继续断线,无语了,我昨天为了体验这个“满意100”,花了半个多小时打10086,没有打进去,花了20多分钟进行网站客服的咨询没能成功,客户有问题,但是却无法联系中移动客服,这样的服务如何做到“满意100”呢?

4、可能你会说,中移动服务这么烂,你为啥还用啊?

我有选择吗? 前几年就中移动一家独大,其他运营商的服务比移动还烂,从最近几年开始,状况好些了,其他运营商也发展起来了,可我的号码用了N年了,换个号码多不方便大家又不是不知道,要是可以携号转运营商,我立马转。

==欢迎发表意见,欢迎转载==