李文兵

在dojo的test page中给出了如何上传文件，http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/tests/io/iframeUploadTest.html.可惜server端的code是python写的，现在把dojo的upload文件在WebSphere sMash的环境下实现，并且强调几个关键的trick,在code中进行说明。故事很简单：上传一个文件，完毕后返回文件的大小，最后浏览器弹出该信息。

1. HTML code

   <form action="/resources/upload" id="uploadForm"
   <!-- 注意上传文件时需要的form属性enctype="multipart/form-data"  -->
   	method="POST"  enctype="multipart/form-data">
   <!-- 上传文件在HTML的控件 -->
   	<input type="file" name="attachment">
   	<input type="button" onclick="uploadIt(); return false;" value="send it!">
   </form>

2. Javascript code

   <script type="text/javascript">
   	dojo.require("dojo.io.iframe");
   	function uploadIt(){
   		dojo.io.iframe.send({     //使用iframe进行提交
   			form: dojo.byId("uploadForm"),
   			handleAs: "application/json",
   			handle: function(response, ioArgs){
   				if(response instanceof Error){
   					console.error("Request FAILED: ", response);
   				}else{
   					alert(response);  //alert结果
   				}
   			}
   		});
   	}
   </script>

3. zero code

   def onCreate() {
   	//zero中的上传文件放在request的files中
   	def attachment = request.files["attachment"]
    
   	//每个上传文件有上传文件的临时路径以及文件
   	def filepathUpload = attachment.path[0]
   	def fileName = attachment.filename[0]
    
   	int fileSize = new FileInputStream(new File(filepathUpload)).available()
   	def msg = "The size of your file '" + fileName + "' is " + fileSize + " bytes."
    
   	//这个是dojo iframe做定义的，必须要使用一个<textarea>进行包裹结果.
   	def iframeData = "<textarea>" + msg + "</textarea>"
   	println iframeData
   }

这个是sMash的project，可以Download(Ajax upload file using dojo in sMash)下来试试。

Useful links:

http://www.cs.tut.fi/~jkorpela/forms/file.html
https://www.projectzero.org/javadoc/latest/CORE/API/zero/core/context/GlobalContextURIs.Request.html#files

在前面一篇文章中(CSS Selector – 基础)介绍一些CSS selector的基本用法。里面来谈一些平时比较少用的CSS selector用法。

一.Child selector
这个选择器和前面的descendent比较类似，descendent适用与所有的下代，但是Child描述的是父子关系。它需要用尖括号’>’来表示。 例子如下：

body>h2{
 font-size:2.5em;
}

在未来的发展中，有些有趣的讨论就是：是否我们需要右括号,就像：
a < img { border: none; }就表明如果 父亲是, 那么border就不存在。当然这只是一个提议，更加站在目标tag来进行表述。可惜并不在CSS3的规范中。

二.Adjacent siblings selecor
前面说了父子关系的选择器，这个是关于兄弟关系的选择器。

h2+p{
 font-size:1.2em;
}

如果一个<a>前面是<h2>那么将应用该selector。

三.属性 selector
属性选择器是一个更加强大的选择器。前面的selector都是更加tag的位置关系等来进行选择。属性选择器是根据标签内部的属性来进行选择。

//选择<a>中href属性为'liwenbing.cn'的
a[href='liwenbing.cn'] {
 font-size:red;
}
//选中<input>中类型type为text的。
input[type="text"]{
 border-color:1px solid #666;
}

在CSS3中，对属性选择器是有加强的。并且现在流行的浏览器(IE7,FF)基本上已经支持这样的selector了。
有三种：

• [att^=val]：选择属性att的值是以val来开头的；
• [att&=val]：选择属性att的值是以val来结束的；
• [att*=val]：选择属性att的值是包含val的；

//这个将选中 <p title='home' ></p>
p[title^="ho"] {background: green;}
 
//这个将选中 <p title='hot' ></p>
p[title$="t"] {background: green;}
 
//这个将选中 <p title='contact' ></p>
p[title*="on"] {background: green;}

这个是google对developer的一个大会，有非常多好的session，做web的都需要关注一下google到底在做什么。在它的keynote 讲了google努力做事情的方向：

1. Make the cloud more accessible
2. Keep connectivity pervasive
3. Make the client more powerful

Presentation Slides
另外更多的google I/O的session可以从这里找到:
http://sites.google.com/site/io/:所有session的video和slides

毫无疑问，我们生活在一个信息大爆炸的时代。每天各种新闻，消息冲击着大脑。我的feed reader总是1000+，似乎只有哪天我发疯了，把所有的东西都点了”Mark all as read”才可以把这个数字降下来。今天突然想，我到底要读什么?我为什么要读？我为什么要知道？如果读书按目的来分，似乎可以分三种：获取资讯，提升理解力和娱乐。娱乐的事情我做的多了，每天要关注的BBS,NBA，各种花边，好友动态…资讯呢？各种有意思的技术新闻，产品信息，tips..而提升理解力的估计大部分都是难读的板砖。

总的来说，提升个人的理解力是阅读的高级阶段。细想，每天花了大量的时间来关注各种东西，看杂七杂八的东西太多，可惜真正能给自己带价值的东西除了加星还做了什么？在这个全新的年代，总有各种新奇的事情出现，也许唯一能跟上它的脚步是还是去了解它们的机制和原理，为什么，以及意义和价值。自勉之。

一直以来都在用Aptana的Editor来编辑Javascript/CSS/HTML,都挺好。今天尝试了Aptana自己一直在推的所谓‘世界上第一个Ajax Server的Jaxer。

在Jaxar里面写code倒是很有意思，所有你需要做的事情就是写Javascript/CSS/HTML。你根本不需要使用任何其他server-side语言,所有的事情就是写Javascript就可以了。来看一个例子：

 <script type="text/javascript" runat="server">
	function getAuthenticatedUser()
	{
		var username = Jaxer.session.get("username");
		if (typeof username == "undefined") return null;
		var rs = Jaxer.DB.execute("SELECT * FROM users WHERE username = ?", [username]);
		if (rs.rows.length == 0)
		{
			return null;
		}
		return rs.rows[0];
	}
</script>

用‘runat=server’就可以让上面对数据库的操作运行在server端，而client端对该方法的调用不变，这样在写Web应用时就不用在Server side和client side两边跑来跑去了。并且还有对template的支持。

这个和原来老毛和科长做的project zero client programming model是非常相似的，目的是都用来屏蔽client和server之间的boundary。不过Jaxar做的更加彻底，通过扩展Apache的server，加入自己的Server side framework和client side framework，让所有的一切都通过写JS就搞定了。并且对session，database, web ,SMTP 进行支持，对于一般的应用差不多就够了。老毛原来做的也是通过加入client framework以及扩展server的一些能力来让开发者在client和server之间进行无缝交互。可惜还是需要写Javascript和groovy，并且有一大堆的convention，不知道为什么没有发展下去（又是政治问题?).

那么这种开发模式到底好不好呢？我觉得对于比较小的应用，不考虑扩展和与外界交互，还是一个比较快捷的开发方式。毕竟client和server的无缝交互所带来的好处是非常大的，比如说学习的门槛低（只需要知道一个Javascript就搞定了), 数据传输中麻烦的异步调用，编码，解码，格式转换等等都将消失。但是一旦你的web应用大一些的时候，我想这种模式就面临着很大的问题。关键还是不容易扩展，当它把UI和数据逻辑混合的时候，要做分离是比较困难的。当然你可以在它的编程模型上写一层数据操作层，但是这样就变成了典型的RPC了。另外，这样做并不REST,Jaxer开发出来的应用根本提供不了service(更谈不上RESTful)，这样就无法被它人所用了。如果Jaxer应用以后要做整合，那绝对是一个大麻烦。

今天晚上看到一篇关于twhirl(居然是.org的域名)的文章，于是开始尝试用一下。你猜怎么地，wow！！ 有了这么一个twitter的client，我觉得这个东西是如此地有用，如此有意思。其实twiter就是一个所谓的迷你blog，写一句话，爱说什么就说什么。人的脑子里总是有各种各样的杂念一闪而过，写出来，感觉也挺好。

在twitter上我用了所有的gmail和msn的联系人(>300)，发现在上面注册的只有10个,而真正活跃的只有一个。看来现在用这样的服务的人还是少，可能是没有client体会不到它的好处吧(就想原来我一样,谁tmd的会跑到一个网站就为了写一句话).

试试了国内最好的饭否,感觉速度、用户体验都非常的棒。可惜没有联系人导入的功能（至少我没有找到吧），所以也不知道我有哪些好友在用这个。在国内这个要更多的人来接受（就像QQ一样)，可能还需要一些时间。希望饭否能够成功。

My twitter:http://twitter.com/wbinglee

我的饭否:http://fanfou.com/liwenbing

昨天老大要我们开始用自己的feed reader。是一个好的开始啊，毕竟自己的狗食要自己吃。想想我现在做的东西，也面临着同样的问题。自己的东西很少用在实际的生活中，这样不对。只有我们自己知道用户的体验，才能去改善我们的产品。其实很早的时候，老毛就提这样的概念，可惜感觉事情总是不了了之。可能与我们做的产品的类型有关系，毕竟不是那种日常生活中用到的东西。

现在这个内部的friend feed还是一个不错的开始，希望我们组能有更多的人来用它，虽然我并不是它的开发者,我还是非常支持的。其实我一直在想，我们自己写的projects都应该host到我们内部网站上。随着数目的不断增多，也会在我们的工作生活中用到。

现在哪个行业都在讲服务，如果说SaaS，那么改善用户体验就是提高服务质量。

拿google app engine做的小留言板，从注册（国内的手机记得要在前面加+86)，到下载python, 下载Google App Engine SDK ，然后安装，到写完这支程序发布出来只用了1个半小时。感觉真是太棒了。我的google Application是：http://liwb.appspot.com/,试试吧。

编程的思想还是在那里，和PHP，projectzero是一样的概念。但是当这个东西可以直接发布出来的时候，这样的体验确实很爽，再加上有google强大的infrastructure的支持，对数据储存的数量和效率的保障，着实不错。本地的调试也很方便，并且将发布只需要一个命令就搞定了。挺high的。
相比projectzero来说，最大的不同还是它的定位，projectzero还是希望为企业来服务的。所以没有如此的直接就可以使用的感觉，还是不断地玩localhost。另外，关于projectzero提供Web GUI的builder的话题：是否google的App Engine也会提供一个简单的GUI的页面让用户直接在浏览器里面去写code，而不是在本地写，调试在上传的模式，而是写了save就可以？我想这个也许并不是他们的目标，就像google的mashup editor并没有提供GUI的编辑一样。他们更多的目标还是能提供更多好的API，或者说能够有一天像PHP一样，其他的程序员都能贡献API，这个社区就真能繁荣了。

如果有了这个东西，google pages还有什么用吗？我想google pages还是给非程序员来使用的，用来构建基于content的website还是有它的价值的。从某种意义上来说，那个东西只是一个简单的web page creator了。

P.S. 刚才看到了一篇文章，http://16cards.com/2008/04/09/project-zero-in-the-cloud/，看来zero下一步也会在cloud computing上面做文章的。

想总结一下关于CSS的selector部分以及对selector的一些思考。我准备分成四个部分来写，算是系列文章吧。四个部分分别是：

1. 基础：主要是从CSS selector来谈起，也是平时用的最多的；
2. 高级：谈谈一些高级的selector的用法；
3. 关于Cascade：关于CSS继承，优先级的一些topic；
4. 未来的思考：未来的CSS selector会怎么发展？CSS 3做了什么？javascript所带来的影响是什么？

1.基础

一.Tag selector
标签selecor ,也可以称为类型selector，它将对HTML页面中所有的该类型有效。

h1 {
   font-family:Arial, sans-serif;
   color:#CCCCFF;
}

二.Class Selector
类选择器和HTML中的class相结合，应用到所有声明了该class的标签中。类选择器必须要以 “.”来开头。
对于

.title{
   color:#FF000;
   font-size:24px;
}

三.ID selector
ID选择器会将其syle应用在HTML中该ID的tag上。
对于

 #sidebar{
  float:left;
  margin-left:30px;
}

一个有意思的问题是如果在一个HTML中，有两个以上的tag用了同一个ID会怎么样呢？虽然并不是合法的HTML，但是大部分的游览器会忽略这个问题。这个时候ID选择器就像类选择器一样，只要哪个tag的使用了该ID，就会应用该style.
四.Descendent selector

这种选择器的的意思就是根据DOM树的祖先、父子关系来选择具体的元素。

如:

h1 strong {
     color:red;
}

将对<h1> This is homepage of <strong>liwenbing</strong></h1>中的strong的内容进行标红。

同样这种方式是可以组合前面的任何三种选择器：

h1 .intro a{
      color:yellow;
}

将对<h1> This is homepage of <strong >liwenbing </strong> who is <span class=”intro”><a href=”#”>lovely boy</a></span></h1>中的lovely boy标黄。

注意tag和类之间是否有空格是非常重要的。

有空格表示是应用该类的元素在tag之中，就像上面的例子；没有空格，则表示tag和class都标明的是同一个元素。

h1.intro a{   //注意h1和.intro之间没有空格
     color:blue;
}

对<h1 class=”intro”>This is homepage of <a href=”#” >liwenbing </a></h1>中的liwenbing是有效的。

再举一个和ID selector结合的例子：

#sidebar h2{
      font-size:1.2em;
}

上述style将对sidebar元素下面的所有h2进行应用。

五.Group selector

组选择器顾名思义就是对于一组selector应用同一中style，以逗号”,”隔开；组中的元素都可以是前面四中的任何一种。

h1,
p .intro,
#sidebar .title{
 color:#6F6F6F;
}

六.伪选择
伪选择器可以进一步地定义用户和页面的行为。最常用的就是对link的定义了；

a:hover{
  text-decoration:  none;
}
a:visited{
 color:blue;
}

当然关于link的除了上述两种，还有a:link,a:active;
其他还有很多的伪选择，例如现在在用的focus.下面这个CSS可以让input 有safari中的高亮效果（不过IE并不支持)。

 input:focus{
  border-color: #feca70;
}

其他伪选择器还有:before,:after,:firs-child.

http://www.projectzero.org/cblog/

这将是project zero的中文博客，这也是我们project zero Assemble China团队的博客了。我们会将Project zero，以及更加重要地，将China团队所做的事情发布出来。关注projectzero吧，关注projectzero中文社区吧，关注我们中国团队吧。

另外，我们准备发一系列文章到developerWorks上，也将是中文方式。我也会在自己的blog上发布出来。