Showing posts with label web tech. Show all posts
Showing posts with label web tech. Show all posts

Thursday, February 26, 2009

M$的Live Mesh

很早肖就给我介绍说一定要试试mesh,当时好像注册后等了几天说要资格验证什么,后来就没继续关注。直到今天从某朋友博客上看到了Live Mesh,所以决定试一试。

从好友博客上得知Mesh是一个用于同步各个设备存储资源的在线服务,起初是蛮带好奇的,因为当今互联网上存储服务很多,不知道微软会搞成什么样子。打开一看,呃。。。这不就是WebOS么(第一印象)。来点随笔注释:
  1. 微软非常赶时髦。。不过没有给我太大惊喜,反而让我觉得是在用户交互上用的WebOS的思想,背后的存储服务是类似Google的思想。
  2. 存储是整个OS的起点,这是正确的思路。在存储上把文章做大。可以扩展n多服务。
  3. 据说背后用了云计算,有人说云计算只是皇帝新衣,但我很看好云计算 :) 
  4. 不是很看好WebOS。更喜欢google所说的,浏览器其实就是os,提供好的应用和服务才是有意义的。
  5. Mesh和Google的区别感觉是,Google都是先有服务,然后再告诉用户在这个服务下可以存什么东西,可以存多少。所以它把存储作为一个背后的支持(比如图片存储能压缩啊,邮件的话有邮件之间关联)。而Mesh就是以存储为服务的。
总而言之,Live Mesh是个好东西,我会继续用下去呃。希望能有更多好的服务和应用。

Tuesday, May 22, 2007

Portlet with Ajax Tech (Jetspeed)

I was required to upload a large file via portlet with the process message displaying in the client side, and ajax would be the best choice. In order to ease the job, prototype was included first, so that the Ajax instance would do me a great help.

I've referred so many articles about the ajax application in portal, mostly work for WebSphere Portal rather than Jetspeed, tomcat-based portal. At last, I solved this problem, and as a conclude, I found that the problem could be broken down into three problem:

  1. Understanding the principle of the ajax application in portal, JSR-168 would be the most helpful reference. And here is a well-spread diagram to show this principle:

    As JSR168 said, portlet session could share the data with servlet session, so render the page via portlet and request the update from servlet, which makes the ajax realizable. Here is the article where the above diagram from.

  2. Share the data between portlet and servlet. Of cause, there are some applications do not need the servlet and portlet bundled, there would be unnecessary to consider this problem in such cases. But as to my problem, portlet and servlet should bundled together. As the articles I have read, I found it maybe was not a problem for WebSphere, but it's really a problem for tomcat based portal. The solution was so easy, just configure the server.xml like this, I mean to add emptySessionPath="true" attribute:

    <connector port="8080"
    maxthreads="150" minsparethreads="25" maxsparethreads="75"
    enablelookups="false" redirectport="8443" acceptcount="100"
    connectiontimeout="20000" disableuploadtimeout="true"
    emptysessionpath="true" />

    And read this article to know what the session identifier do to make such tricky problem.

  3. Last work is to write the codes and test it. So the last problem is about the coding.
    Most of these coding barriers could be taken easily via careful reading JSR168 Spec. Such as, portlet and servlet share data in APPLICATION_SCOPE, so using APPLICATION_SCOPE to store session. Url and javascript debuging would also cost a lot of time.


A good article about Ajax with WebSphere Portal:
http://www-128.ibm.com/developerworks/websphere/library/techarticles/0606_bishop/0606_bishop.html?ca=dgr-lnxw03AjaxPortals

So, it's really fun to work with portal, especially that using the ajax tech to make the portal more vivid. Hope this article help you solve your problem, thanks.

Thursday, March 01, 2007

Widget for Google Calendar

See my blog's left bar, there is a fantastic widget that shows my google calendars in the form of event list and calendar table.

Now, the widget is available here:
http://ray58750034.googlepages.com/googlecalendarwidget

Reply your comments, ideas and the bugs you find about the widget here, thx.

Friday, February 23, 2007

Graphics program with Javascript

Apple introduced a new HTML tag <canvas> to the world, which endue client-side script language the ability of graphics drawing. Now, Firefox and Opera has implement the <canvas> tag, so the javascript programmer was able to write a rich graphic-based client application.

I've written a simple ball game to show the interactive between javascript graphic app and browser user.

See details : http://ray58750034.googlepages.com/javascriptballgame
See more examples : http://developer.mozilla.org/en/docs/Category:Canvas_examples

Friday, February 16, 2007

Javascript Menu 代码

只为了显现一个简单的menu,网上搜了不少代码。 但要么就是太复杂,搞得我改都无从改,要么就是不符合我的需求。结果自己静下心 20分钟就搞定了, -_-b ,找了大概2小时啊,汗呐。

非常简单的要求:
  1. 必须是js代码,因为我要实现menu在很多页面里都要用,如果掺了html就要用iframe之类的,iframe毕竟不舒服啊。
  2. 对界面没什么要求,简单的ul和li就行了,css沿用站点的,无须另外配。
  3. 多级目录结构
  4. 每层menu可以是链接,也可以是打开子目录
  5. 可复用,其实就是实现类似jsp的<%@include file="">的作用,只是我没有服务器,所以只好用js啦。
先看效果:



以下是我的代码:

<div id="soya_menus">
</div>
<script language="JavaScript">

var MENU_ITEMS = [
['Ray',{ href : 'http://raythking.blogspot.com/',target : "_blank" }],
['Google',null,[
['Web',{ href : 'http://www.google.com',target : "_blank"}],
['Image',{ href : 'http://images.google.com',target : "_blank"}],
['Video',{ href : 'http://video.google.com',target : "_blank"}]
]
],
['Baidu', null,[
['Index',{ href : 'http://www.baidu.com/',target : "_blank"}],
['Zhidao',{ href : 'http://zhidao.baidu.com/',target : "_blank"}]
]
],
['Sogou',{ href : 'http://www.sogou.com/',target : "_blank"}],
['About',{ href : 'javascript:alert(" This is a simple javascript menu !")',target : "_self"}]
];


function showSubMenu( tolist ){
var sublist = document.getElementById(tolist);

if(sublist.style.display == ""){
sublist.style.display = "none";
}else{
sublist.style.display = "";
}
}

function insertMenu(divarea){
document.getElementById(divarea).innerHTML=createMenu(MENU_ITEMS,"soya_menu");
showSubMenu("soya_menu");
}

function createMenu(menu_it,id_pre){
var html="<ul id='"+id_pre+"' style='display:none;padding-top:8px' >";
for( var i=0 ; i<menu_it.length; ++i){
var sub_id_pre=id_pre+"m"+i;
html += "<li>";
if(menu_it[i][1]){
html += "<a href='"+menu_it[i][1]+"'>";
html += menu_it[i][0];
html += "</a>";
}else if(menu_it[i][2]){
html += "<a href='"+menu_it[i][1].href+"' target='"+menu_it[i][1].target+"'>";
html += menu_it[i][0];
html += "</a>";
html += createMenu(menu_it[i][2],sub_id_pre);
}else{
html += menu_it[i][0];
}

html += "</li>";
}
html +="</ul>";

return html;
}

insertMenu("soya_menus");

</script>

Wednesday, February 14, 2007

不同浏览器下装载js的不同表现

这两天在改blog,因为脑子里又掺了一些杂七杂八的念头,想要实现一下,呵呵。如果这两天有看我blog的话,可能时不时会发觉自动跳框啊或者某个功能怎么没了等等状况。那就是我在改blog,这个时候要找我的话,直接上gtalk就行啦。

为了实现多个浏览器下效果一致,花了不少心血啊。先看看效果吧,见左边的“日程更新”,我的Calendar是以event list形式表示,当然可以有其他选择,这是后话(有空时候再说吧)如果是Firefox的话可以看到边是带弧的,是用的css3,ie和opera下没看出来。ie下还有其他一些css效果也看不出来。不过基本的效果是三个都一样的。

因为涉及要下多个Calendar然后合并的操作,发觉三个浏览器对于js下载和加载的表现各不相同。在做Web可要特别注意了哦,在这我说一下我遇到的情况吧:

情况如下,首先要下载四个Calendar的数据(用Google 的 JSON API),每个下载完回调一个Handle,Handle将数据加入EventList。四个都Handle过了,调用showEventList()。三个浏览器的下载方式应该都是并发的,这点应该没有疑问。每一个Calendar的操作相当于是在一句<script src="****"></script>,加载顺序正好三种浏览器三种方式。


首先是IE,由于对多个Calendar操作,然后用到了一个eventlist,可以想象是多线程在操作一个数据域。IE可以说是完全多线程的,如果给Calendar编号 1 2 3 4,那么在下载完数据后回调的顺序可能是 2 3 1 4 或者 1 3 4 2 等等。另外,用来动态加载这些javascript的那段js与这四个新js也是并发的。这样有两点麻烦:
  1. 时间上难掌握:程序是非顺序的,对于需要顺序完成的任务实现时要加不少辅助变量。
  2. 空间上易出错:由于好几个Calendar的Handle是同一个Handle,这样就要手动控制好变量的同步,容易出现脏数据。

然后是Opera,Opera不论从哪方面讲都适合年轻人使用,充满了朝气!今天的修改其实主要是针对IE的,Firefox和Opera基本上是一致的。但在最后,Opera的一个反常举动让我调了老半天才调出来。
Opera的js装载好象是完全顺序,与IE截然相反。顺序到一个页面的所有script都得一步一步来,就像只有一个线程。如果以原script为 0,四个数据js文件还是 1 2 3 4,那么Opera的执行顺序将是 0 1 2 3 4 0,最后的0是返回原脚本,感觉就是堆栈式的函数调用。就是最后那个返回原脚本,让我措手不及。楞了老半天才发觉。


最后是Firefox,个人觉得,Firefox 更适合用来开发 web 程序。就在今天的修改过程中,无论我怎么改,只要基本的逻辑是对的,那么Firefox的效果始终是如预期的。
以Opera那种假设下来说,Firefox的执行顺序是 0 1 2 3 4。我觉得这样理解好了,Firefox是把script放在页面文件中。装载顺序是从头到尾依次装载的(严格按照js在页面中出现的顺序),js的运行不并发,装一个运行一个结束后再装。几个好处吧:
  1. 更贴近web开发者的正常逻辑。web开发者一般是写页面的时候嵌js,而不是写js的时候嵌页面 。这样Firefox显然比Opera更适合web开发者。
  2. 脚本并行处理(IE)考虑了一块js一个用途的方式时候的效率,但是不适合多个js联合工作,特别是需要时间上和空间上控制的工作。

其实单就用户体验来说,IE可能更受欢迎,毕竟是多线程的,不会因为一个js的错误而导致整个页面僵死。而且就三个浏览器看我blog的速度来说,IE应该是比较快的(除了Opera在有缓存的情况,其缓存给我的印象颇深刻~)。但我还是比较喜欢Firefox,毕竟咱是做“写”工作的人嘛,而且速度这个是可以用不同手段提高的。

最后赞一下Firebug,开发人员的福音啊!