在gwt项目中使用OpenFlashChart2

2010年7月15日 飞尘
34次阅读 { 没有评论 }

OpenFlashChart2是一个用flash显示数据图表的工具，许多的网页设计中都使用到了它。近来使用gwt开发网站，正好也有这方面的需求，最初的时候是通过JQuery直接使用json的方法来显示数据图表，后来发现了专门为gwt设计的ofcgwt，对openflashchart进行了java的封装，相比直接手工生成json数据要方便了许多。

具体的使用也是比较简单的，这里飞尘就不多介绍了，下面主要是解决使用中遇到的一个问题。

按照设计的要求，用户在未安装flash插件或者禁用flash插件时，网页能给出相应的提示，这一点openflashchart也为我们考虑到了，而且提供了一个方法可以自定义要显示的提示内容。飞尘这里遇到的问题可能比较特殊，由于openflashchart是作为一个widget在uibinder加载的，可能正是由于这种加载方式，使得openflashchart提供的setInnerDivTextForFlashPlayerNotFound方法在程序运行时没有得到执行，页面中始终显示的是默认的提示信息FlashPlayer ${flashPlayer.version} is required。

经过一番分析后，找到了解决方法，就是在uibinder中来设置setInnerDivTextForFlashPlayerNotFound

在uibinder中需引入ofcgwt：

?View Code XML
<ui:uibinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui"
 	xmlns:o="urn:import:com.rednels.ofcgwt.client"></ui:uibinder>

使用openflashchart：

?View Code XML
<o:chartwidget ui:field="openFlashChart" width="200" height="200" 
	innerDivTextForFlashPlayerNotFound="some text" />

这里如果设置的提示内容非纯文本而是html代码，需要对< 和>进行转义

?View Code TXT
"&lt;"和"&gt;"
编程开发 , , , , ,

项目管理工具maven使用手记

2010年7月14日 飞尘
45次阅读 { 没有评论 }

这里主要是在eclipse中使用maven，因此只使用到了一部分命令，整理下来方便以后查阅。

生成清除Eclipse项目结构：
mvn eclipse:eclipse
mvn eclipse:clean

清理（删除target目录下编译内容）
mvn clean

仅打包Web页面文件
mvn war:exploded

编译项目
mvn compile

打包发布
mvn package

打包时跳过测试
mvn package -Dmaven.test.skip=ture

还有很多命令目前还没有使用到，以后遇到再补充

编程开发 , , ,

eclipse忽略svn目录文件编译

2010年7月14日 飞尘
37次阅读 { 没有评论 }

使用eclipse进行开发时，在编译JAVA代码时的原则是：对于源代码目录中的所有*.java文件编译成同名的*.class文件，而对于如abc.java中的内部类C，编译成abc$C.class；对于所有非java后缀后的文件与目录，连同编译后的文件复制到目标位置。

这样就存在一个问题，如果代码是从svn库检出的，每个目录下都会有个.svn类型的目录，eclipse会把它们全都拷贝到编译目录（默认为bin），导致svn客户端会误认为bin目录是svn co出来的，而bin目录下的svn信息又与该目录下的文件内容不符，这样很多svn客户端就错乱了。更有甚者，会把bin目录下的内容check in到库中。

解决这个问题很简单，修改项目属性（选中工程->右键->properties），选择Java Build Path，在Sources选项卡中选择对应的源代码目录，选中Excluded，点击edit，在Exclusion pattems里填加 **/.svn/** 就可以了。这样eclipse在编译时会忽略掉.svn目录。

对于TortoiseSVN可能会设置使用_svn代替.svn目录，做相应设置即可。

更多关于TortoiseSVN的设置可参考官方提供的中文帮助文档。

http://tortoisesvn.net/docs/release/TortoiseSVN_zh_CN/index.html

编程开发 , , , ,

使用css控制文字在一行显示

2010年7月14日 飞尘
51次阅读 { 没有评论 }

在网页设计中经常遇到容器中放置文字的情况，且对文字的要求是仅单行显示，无论文字多少都不换行，例如下面的例子：

原始的样式

在这个div容器中有许许多多的文字，但是只会显示为一行，不会换行，多余的文字将被隐藏掉……

修改后的样式

在这个div容器中有许许多多的文字，但是只会显示为一行，不会换行，多余的文字将被隐藏掉……

其中最关键的属性就是：
white-space:nowrap

代码如下：

?View Code HTML
<div style="margin:5px 0 10px 0;overflow:hidden;width:200px;border:1px solid blue;white-space:nowrap;">
在这个div容器中有许许多多的文字，但是只会显示为一行，不会换行，多余的文字将被隐藏掉……
</div>
编程开发 , , ,

解决多分支项目导入eclipse错误

2010年7月13日 飞尘
67次阅读 { 2 条评论 }

项目开发到一定阶段，需要做分支，一般使用trunk做主线，使用branches做分支。分支副本多了之后，可能需要在多个分支副本之间进行切换。

本文是在eclipse+maven下进行的开发，操作时将当前的分支工程关闭后，导入另外的分支，出现下面的错误提示：

Some projects cannot be imported because they already exist in the workspace

原因就是当前分支的存在，仅仅关闭是不够的，需要将当前的项目删除，不要删除文件，这样eclipse的workspace中关于项目的配置就会被删除了，自然也就能够导入另外的分支项目了。

ps：
另外一个办法就是把原有的项目改下名字，比如project-1。

编程开发 , , , ,

解决gwt图片浏览器兼容性问题

2010年7月13日 飞尘
65次阅读 { 4 条评论 }

最近使用google web toolkit进行网站开发，一直在firefox中进行调试，开发到一定阶段，项目需要发布demo，要求浏览器兼容性。在ie中一测试，原来设计好好的页面变得惨不忍睹，此问题在ie7中尤其明显，经过观察发现，其中一个主要的原因就是图片的问题。

使用gwt开发的一个优点就是自动实现了图标、图片的拼接组合，一般为了优化网站结构及效率，设计者会将使用到的各种小图标、图片拼接在一个透明背景的大图片中，浏览器可以使用较少的连接次数下载图片，在一定程度上提高网站速度。

此处遇到的问题就是与此有关，最初的设计是在一个容器中（比如div），绑定css样式，在css中通过@sprite引用gwt-image，容器中同时包含文本，控制padding属性实现图片在前、文字在后的效果，在firefox中没有问题，在ie7这中设计就有问题了，由于使用的小图标是大的图片文件中的一部分，整个容器会将大图片作为背景，造成文字的背景会出现不该有的图片。解决方法是：为图片使用单独的容器，与文字分开。

同时还遇到另外一个问题，就是图片在ie8中不能正常显示，在ie7及firefox均可显示，查阅了相关资料，原因可能是ie8对于base64编码长度的一个限制造成的。原文是这样描述的：

Internet Explorer 8 limits data URIs to a maximum length of 32 KB.

资料来源于http://en.wikipedia.org/wiki/Data_URI_scheme

gwt对于较小的图片（具体多少k还不太确定）进行base64编码，在css中使用base64代替图片的url，飞尘在实际中测试当图片大于25k的时候，ie8就无法显示了。解决方法是：对图片压缩，保证base64转码后不大于32k；或者将图片切片再组合。

几点思考，gwt对图片的处理机制到底是怎样的，还要进一步的考证，近来gwt也在更新，已经发布了2.1 M2，修正许多已知的bug，相信不久就能够看到2.1正式发布了。

<!– 2010年7月19日更新 –>
to：1楼的朋友

举个例子：

?View Code XML
<g:horizontalpanel>
	<g:image resource="{bundle.image1}" />
	<g:html text="some text" />
</g:horizontalpanel>

这是在ui文件中的一个简单的例子，实现的效果类似这个样子的，当然样式需要自己设置。

这里使用的是image的widget，当然可以使用其它widget，然后用css设置使用gwt背景图片，关键的是需要指定放置图片的容器宽度和高度不大于图片。

编程开发 , , , ,
上一页 下一页