分享:web标准化交流会第二十期北京站总结

分享内容如下:

开心网 李国新 规范JavaScript开发模式(海贝网CommonJS实践之路)
傲游浏览器 赵锦江 git和github简介
谷歌 黄昊 Chrome 浏览器开发者工具介绍
W3Help javaScript模板引擎 -jsTemplate 应用场景及设计实现
联想研究院 小贝 谈团队协作的“兼”情和“基”情

在web页面中提供打印功能

最近一个项目需要在页面里面提供打印功能,这个功能似乎看起来很不起眼,因为在目前各大网站的文章页面都有打印功能,之前的项目也使用过,而且很简单就一句话:

window.print();

调用本地的打印接口,很方便,也很轻量,主流浏览器支持非常好,用户只要点个按钮或者链接就基本上搞定。 但是也有问题,比如不能精确分页,不能设置纸型等。

除此之外,还有两种常见的基于网页的打印方式: 继续阅读在web页面中提供打印功能

利用JSON插件进行数据交换格式(includeProperties和excludeProperties用法)

JSON(Java Script Object Notation),是一种语言无关的数据交换格式。 JSON插件是Structs 2 的Ajax插件,通过利用JSON插件,开发者可以很方便,灵活的利用Ajax进行开发。

Json是一种轻量级的数据交换格式,JSon插件提供了一种名为json的Action ResultType 。一旦为Action指定了该结果处理类型,JSON插件就会自动将Action里的数据序列化成JSON格式的数据,并返回给客户端物理视图的JavaScript。简单的说,JSON插件允许我们在JavaScript中异步的调用Action。

而且Action不需要指定视图来显示Action的信息显示而是由JSON插件来负责具体将Action里面具体的信息返回给调用页面。Json的数据格式可简单如下形式: person = { name: ‘Jim’,age: 18,gender: ‘man’}。

如果action的属性很多,我们想要从Action返回到调用页面的数据。这个时候配置includeProperties或者 excludeProperties拦截器即可。而这2个拦截器的定义都在struts2的json-default包内,所以要使用该拦截器的包都要继承自json-default。

<struts>
    <constant value="spring" name="struts.objectFactory" />
    <include file="struts-admin.xml"></include>
    <package name="default" extends="json-default">
        <action class="com.person.PersonAction" name="person" method="view">
            <result type="json">
                <param name="includeProperties">person\.name,persoon\.age,person\.gender </param>
            </result>
        </action>
    </package>
</struts>

继续阅读利用JSON插件进行数据交换格式(includeProperties和excludeProperties用法)

[10/17 周主题] – Axure入项目

很早就关注和试用Axure了,但是没在之前的项目中使用过,因为一些原因,借这次的这个web项目开始在公司推广Axure的使用,不过说到推广,现在也就我一人的用,其他项目要用还未知呢!

先看看Axure的Demo吧:http://www.axure.org/demo/

做过前端的人应该会更有感觉,操作上不会感觉太难,很快就可以上手,这要得益于Axure强大的组件库,基本上常用的组件都有,另外还有其他一些特殊的第三方组件提供下载。

这次项目中用Axure主要原因是界面框架的原因,如果UI和前端(我做)做完页面,把网页给客户看,那估计要费时不少,加上随时的改动,到后面会越做越忙,越做改动越大,所以就早动手,先用Axure把网站的各个页面框架和页码流程搭起来,跟客户一一确认,尽快完成这块的内容,再由UI去跟客户确认配色的问题,前端这个时候就可以开工了,跟之前的项目流程比,至少框架不会大动了!

第一次拿做好的页面框架给客户看,客户以为这么快页面就出来啦,很有兴趣,当然我就得必须解释解释了,这个只是框架图,和最终的效果图是有些距离的,这些页面只是将页面框架和流程展示下。

学习Axure,最主要就是多用,多看别人的Axure例子,如果一个效果自己一下子无法实现,可以在网上找别人的rp文件,仔细研究下,很快就可以自己做出来了!

再者Axure现在有好些模板,不一定就得自己去实现,Axure只是个工具,不管从哪个方面入手,达到你要的效果即可。

推荐区国内Axure推广比较有名的网站:http://www.axure.org/ 上面有很多教程和例子,可以进一步帮助学习Axure的使用。

本地图片预览(支持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

Linux下QQ的新选择:WebQQ桌面化

天发现了这个好玩的东西,让本来在Linux就不咋用QQ的我有重拾QQ的冲动,感觉很不错,分享给大家,先看图吧,借用LinuxToy的图片。

webqq-message-400x84

原文在这里:WebQQ 桌面化

我简要表述下主要做法:

1、安装allTray,版本0.69,最新版的貌似不行,还是安装0.69版的比较好。

2、创建WebQQ的桌面应用,具体看WebQQ 桌面化的做法。

3、按照WebQQ 桌面化的格式,编辑WebQQ的属性。

4、注意,一定要注意,图标地址别用错了,一定是你自己的图标,不要直接拷贝过来使用,检查检查是否格式正确。

allTray一直在用,但是没有发现其还有这么好用的命令,正如作者所说用 Alltray 创建系统托盘提示功能才是那篇文章的精华!