十二月, 2006 | iJohn.org

Archive for 十二月, 2006

6th
十二月 2006

web网站的发展方向
爱因万江斯坦@2006年12月06日 00:41 Post in 互联网产品 No Comments »

互联网的发展,带来了很多的新生事物,一堆一堆的新名词和新技术在不断的充实这张连接全世界的大网,也许N年以后,这张网除了联起地球,还会成为联起外太空的智慧生物的信息大网。想想在地球上访问来自另一个行星上的某位外星人的网站,会是什么感觉,先科幻一下了,呵。
自从HTML这种基于WWW的文件格式在互联网上传播开来,web网站也就诞生了。
咱不说远了,就说说自2000年到现在,web网站的类型和它的发展趋向吧
2000年那会,应该正是网络泡沫经济的时候吧。尽管是泡沫,但它是web网站一次空前的繁荣,那个时候的网站都类型比较集中,都是门户型网站。主要是提供信息,新闻,和邮箱等服务。门户型网站的特点是内容依赖于网站本身所提供,按现在的话来说,就是和访问者几乎没有互动,访问者要自己去网站上不停的点击,不停的通过超链去找到自己的感兴趣的信息,一旦访问者发现有的网站信息更新速度更快,就会很快的喜新厌旧,转向其它网站。
不过,出于新奇,确实能带来一时的人气和流量。但这种类型的网站,太讲究大而全,要运作起来需要相当高的成本,钱总有烧完的一天,当时我访问过的很多网站,现在都已经不存在了(欢迎大家列举一些大家以前经常去,而现在已经不存在的网站了),这种类型的网站最终只剩下sina,sohu,163这样的实力强劲的门户网站了,它们代表了第一代互联网web网站,这种大而全的门户网站,流量很高,但主要是提供信息给用户,就是web网站是主动方,而用户是被动或少量主动的接受方,所以门户网站也一直在不断探索新的发展方向。
那时IM软件也还刚刚起步,大家在互联网中交流还主要是电邮和BBS,但随着成本不断增加,赢利模式仍然混乱,这种提供单一功能的网站也相继死去或被并购。能活下来的,都已经不在风光。
所以,我们看一下,第一代的web网站是特点:提供静态的信息,单一的电邮和BBS互动功能,这是和当时的网络环境,和互联的伊始相呼应的,那一代是门户网站的天下。
随着互联网硬件的发展,以ADSL为主流的半宽带入户(本人觉得宽带接入小于1M就应算是半宽带,不能称之为宽带),互联网的普及,更多针对性的功能web网站也相继出现。
就在这个时候,一个承上启下的web巨人出现了:Google。它把第一代的门户网站做了一个简洁的总结,告诉大家,一个网站的首页其实只要一个输入框和一个提交按钮就可以了。
Google本身不提供内容,它通过后台的复杂运算给出一堆可供选择的信息给用户。我们仔细看看,用户在Google上获取信息的过程:是用户自己提交想要的信息关键词,点击搜索,然后,Google会在众多的门户网站和其它你所想不的到的地方都为你都找出来。Google在全世界的迅速普及让当时的门户网站们看傻了眼,互联网从不缺少奇迹。
这个时候,用户和web网站之间的互动开始了。web2.0的概念开始初倪端。
由于网络速度的提高,一些功能性的网站得以出现,,如视频网站,音乐在线网站。同时由于网络的普及,电子商务网站也出现了,无论是B2B,还是B2C,C2C,唉,概念真麻烦。
这个时候的网站,已经不再是只提供文字图片信息,开始有视频和音乐,但总的来说,他们与第一代的web网站特点大致相同,都是单纯提供内容,而很少与用户直接互动。
这个时候,web网站的发展是处在一个发展期,因为赢利模式依然不清晰,大家不知何时才能在互联网赚到money,那时连Google都有过要卖掉自己的念头,可惜yahoo当时因为已经有了自己的搜索引擎的开发计划拒绝了Google。
我打算把这个时期称为过渡期,是web网站理性思考和平稳发展的时期,差不多从2003年到现在。
在2005年的时候,随着Google在04年的高价上市成功,互联网开始了新一轮的复苏,这个时候是理性的复苏,但其间还是有少许泡沫。
这个时候,web网站的发展方向是:聚合网站内容;充分互动;让用户参与网站内容的提供。所以除了google的兴起,blog开始步入主流的web网站,我本人是从04年初开始写blog,那时整个互联网上blog还远不如现在那么普及。现在,blog地址都开始印在名片上了。
在这个理性的发展期,web网站更加精细化和针对性,不再追求大而全,各种有针对性的社区:旅游,电影,音乐,技术,交友,聚会,人脉社区相继出现,也出现了好几次惊天动地的大收购。
目前是过渡期,所以,新的,旧的,超前思想都会在这个时期出现。
web2.0,说起来也只是个概念,但总的来说,就是web网站开始以人为主了,而不是单纯的做一个信息的发布源了。
如果大家也有自己个搞个网站的想法,那就赶紧想想自己的针对人群,怎样以人为主,这样的网站才有在这个时期发展起来的可能性。
web网站在发展,基于的web的技术也在发展。
在技术方面,RIA开始渐渐流行。我大概是从04年开始接触RIA,当时研究了Flex,Laszlo,结果没想到Ajax大红了起来,呵,自己失策了一把。尽管听到有人说Ajax是过渡技术,但我觉得只要HTML还存在,js还存在,Ajax就不会是过渡技术,Ajax是RIA领域里的一个非常优秀的补充,Flex和Laszlo等的成熟还有待时日。RoR和敏捷开发的突起,也是让我这种老牌的JAVA人看到了解决问题的银弹。
其实说到这里,还只是谈了web网站到目前的发展,由于时间已晚,困的不行,上面写的有点凌乱,停笔先,明天再补充,也欢迎大家在web网站的发展方向和技术发展方向上做点补充。

4th
十二月 2006

Spry框架初步入门
爱因万江斯坦@2006年12月04日 23:19 Post in Web开发 No Comments »

Adobe的Ajax框架spry的正式版还没放出,所以文档是少之又少,在这里接合自己使用的情况总结20个spry的知识点给大家,相信会对大家有一定帮助,至少大家也会对spry有个初步的认识了,这个轻量型的框架就一个字:“易用”。
1,使用spry框架,必须引用的两个核心js文件

<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script>

2,创建一个数据器dataset

var dsPhotos = new Spry.Data.XMLDataSet("/photos.php", "/gallery/photos/photo", { method: "POST", postData: "galleryid=2000&offset=20&limit=10", headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" } });
var dsPhotos2 = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo");

method:为请求发送方式,POST / GET ;默认为GET
postData:为请求参数,可省略,可直接把”/photos.php”换成/photos.php?galleryid=2000&offset=20&limit=10
Content-Type:为头信息

3,不使用缓存

Var dsPhotos = new  Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { useCache:  false })

这里要重点说明一下,我在应用时,曾经发现设置不用缓存时,页面仍然不是最新数据,我是用一个servlet生成xml,然后对生成的数据进行删除和添加,但页面显示的数据不会自动更新。
后来在adobe的官方论坛上找到了答案,在IE中,使用userCache:false是不够的,还要在生成xml的jsp,php等中设置头不使用cache,如在生成xml的jsp/servlet中是要加上:
response.addHeader(”Cache-Control”,”no-cache”);
以上问题只存在IE中,在firefox和opera中不存在。注,spry对opera9版本支持很好,使用版本8的朋友要注意了。
另外,也可以在构造完数据器后,再设置缓存:

dsData.useCache = false;
dsData.loadData();

4,获取数据形式
假如我们上面的请求,返回的xml如下:

<gallery id="12345">
    <photographer id="4532">John Doe</photographer>
    <email>john@doe.com</email>  

    <photos id="2000">
        <photo path="sun.jpg" width="16" height="16" />
        <photo path="tree.jpg" width="16" height="16" />
        <photo path="surf.jpg" width="16" height="16" />  

    </photos>
</gallery>

那么“gallery/photos/photo”返回的数据是下面的数组:
[
{ “@path”: “sun.jpg”, “@width”: 16, “@height”: 16 },
{ “@path”: “tree.jpg”, “@width”: 16, “@height”: 16 },
{ “@path”: “surf.jpg”, “@width”: 16, “@height”: 16 }
]

var rows = dsPhotos.getData(); // 获取所有行.
var path = rows[0]["@path"];   // 获取第一行中"@path"的值   

dsPhotos.setCurrentRowNumber(2); // 将第3行做为当前处理行,下标以0开始   

var id = dsPhotos.getData()[2]["ds_RowID"]; // 获取第3行的ID.   

dsPhotos.setCurrentRow(id); // 通过第3行的id,将第3行设为当前处理行.

5,排序

dsPhotos.sort("@path"); //以"@path"列的值为关健字对行排序   

dsPhotos.sort("@path", "toggle");  //"ascending", "descending"和"toggle",默认是 "ascending"。
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { sortOnLoad: "@path", sortOrderOnLoad: "descending" });//也可在数据构造器中设置初始排序   

dsPhotos.setColumnType("@width", "number");//设置类型
dsPhotos.setColumnType("@height", "number");   

...   

dsPhotos.sort("@width"); // 对 "@width" 列数据进行排序.

6,去除重复

dsPhotos.distinct(); // Remove all duplicate rows.
//distinct()方法是具有破坏性的,多余的行是被删掉的,如果你想再得到所有的包括重复的原始项就得重新载入XML数据。
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { distinctOnLoad: true });//可在构造时预设

7,设置过滤器

var myFilterFunc = function(dataSet, row, rowNumber)
{
    if (row["@path"].search(/^s/) != -1)    //只返回以s开头的行
        return row;                     // Return the row to keep it in the data set.
    return null;                        // Return null to remove the row from the data set.
}   

dsPhotos.filterData(myFilterFunc); // Filter the rows in the data set.
dsPhotos.filter(myFilterFunc); // 不破坏数据,是建一个新的数组   

dsPhotos.filterData(null); // 取消过滤.

8,自动刷新,以毫秒为单位

var dsPhotos = new  Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo", { useCache:  false, loadInterval: 10000 });//在构造器设置   

dsPhotos.startLoadInterval(10000); // 设置自动刷新
...   

dsPhotos.stopLoadInterval(); // 停止自动刷新

9,把类注册成观察器

var myObserver = new Object;
myObserver.onDataChanged = function(dataSet, data)      //可支持:onPreLoad / onPostLoad / onLoadError / onDataChanged / onPreSort / onPostSort /  onCurrentRowChanged
//第一个是发送通知的对象,做为数据器观察器,这个值永远都是dataSet对象。第二个参数可以不定义,也可以是一个对象(内置对象)
{
    alert("onDataChanged called!";
};   

dsPhotos.addObserver(myObserver);   

dsPhotos.removeObserver(myObserver);

10,把函数方法注册为观察器

function myObserverFunc(notificationType, dataSet, data)  //notfication,是通知器类型,dataSet是数据器对象,data是要观察的数据
{
    if (notificationType == "onDataChanged")
        alert("onDataChanged called!";
    else if (notificationType == "onPostSort")
        alert("onPostSort called!";
};   

dsPhotos.addObserver(myObserverFunc);

11,动态区域块
所有使用Spry动态区域块的HTML页面都要在它们的<html>标签中加入xmlns:spry=http://ns.adobe.com/spry

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
 .... ....
   .... ....
    <ul spry:region="dsPhotos">
        <li>{dsPhotos::path}</li>
    </ul>

COL, COLGROUP, FRAMESET, HTML, IFRAME, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 不能设为动态区域

12,数据引用

{<数据器名>::<数据器列名>}

如果一个动态区域块只和一个数据器相关联,则你甚至可以省略掉数据器的名字
<li>{@path}</li>
ds_RowID – 这是数据器的行id。这个id可以帮我们指定数据器中的一个数据。它和数据是对应的,即使数据执行了排序操作,这个id和数据的对应关系也不会变化。
ds_RowNumber – 这是数据器当前数据的行号。
ds_RowNumberPlus1 – 这个与上面的ds_RowNumber相同,只不过它规定了数据的行号从1开始,而不是从0开始。
ds_RowCount – 它是数据器中数据的行的数量。如果使用了一个非破坏性的过滤器,则它的值是这个过滤器执行后得到的行的数量。
ds_UnfilteredRowCount – 在执行非破坏性过滤器前,数据器中行的数量。
ds_CurrentRowID – 当前行的id。这个值不会改变,除非使用了一个循环的构造。
ds_CurrentRowNumber – 当前行的行号。这个值不会改变,除非使用了一个循环的构造。
ds_SortColumn – 上一次排序所依赖的列名。如果这个数据器的数据还未进行过排序,则返回一个空字符串。
ds_SortOrder – 数据器中数据排序的参数,将返回三种字符串”ascending”, “descending”, 或空字符串.。
ds_EvenOddRow – 它返回的是”even”或”odd”,告诉我们ds_RowNumber的值是奇数还是偶数。

13,循环

//方式一:
<li spry:repeat="dsPhotos">{@path}</li>      

//方式二:
<ul spry:repeatchildren="dsPhotos">
  <li>{@path}</li>
</ul>     

//只输出以s开头的 spry:test属性的值可以是任何等于0或非0值的JavaScript表达示。如果这个表达示返回非0值,这个内容将会被输出,相当于if <>0就输出后面元素。
<li spry:repeat="dsPhotos" spry:test="'{@path}'.search(/^s/) != -1;">{@path}</li>

14,if 条件

<li spry:if="'{@path}'.search(/^s/) != -1;">{@path}</li>   

//if/else的形式,要使用"spry:choose"属性
            <div spry:choose="spry:choose">
                 <div spry:when="'{@path}' == 'surf.gif'">{@path}</div>
                 <div spry:when="'{@path}' == 'undefined'">Path was not defined.</div>
                 <div spry:default="spry:default">Unexpected value for path!</div>
          </div>

15,状态

<div spry:region="dsEmployees">
    <div spry:state="loading">正在载入数据 ...</div>
    <div spry:state="error">数据载入失败!</div>
    <ul spry:state="ready">
      <li spry:repeat="dsEmployees">{firstname} {lastname}</li>
    </ul>
</div>

16,通过对象将区域注册成观察者

myObserver = new Object;
myObserver.onPostUpdate = function(notifier, data)
{
     alert("onPostUpdate called for " + data.regionID);
};
...
// 调用addObserver() 将类注册为观察者.
Spry.Data.Region.addObserver("employeeListRegion", myObserver);
...
//注销
Spry.Data.Region.removeObserver("employeeListRegion", myObserver);
...   

<ul id="employeeListRegion" spry:region="dsEmployees">
...
</ul>

17,以函数将区域注册成观察者

function myRegionCallback(notificationState, notifier, data)
{
      if (notificationType == "onPreUpdate") //onLoadingData / onPreUpdate / onPostUpdate / onError
         alert(regionID + " is starting an update!");
      else if (notificationType == "onPostUpdate")
         alert(regionID + " is done updating!");
}   

...   

// 注册
Spry.Data.Region.addObserver("employeeListRegion", MyRegionCallback);
...   

// 注销
Spry.Data.Region.removeObserver("employeeListRegion", MyRegionCallback);
...   

<ul id="employeeListRegion" spry:region="dsEmployees">
...
</ul>

18,主细节模式,同一数据器

<span spry:region="dsEmployees">
<select spry:repeatchildren="dsEmployees" onchange="dsEmployees.setCurrentRow(this.value)">
    <option spry:if="{ds_RowNumber} == 0" value="{ds_RowID}" selected="selected">{username}</option>   

    <option spry:if="{ds_RowNumber} != 0" value="{ds_RowID}">{username}</option>
</select>
</span>
<span spry:detailregion="dsEmployees">{@id} - {firstname} {lastname} - {phone} </span>
//spry:detailregion"会在接收到"CurrentRowChanged"通知后改变自己的展示形式。

19,主细节模式,多个数据器

var dsStates = new Spry.Data.XMLDataSet("../../data/states/states.xml", "states/state");
var dsCities = new Spry.Data.XMLDataSet("../../data/states/{dsStates::url}", "state/cities/city");
//两个数据器有依赖关系,也可以用:"/webapp/cities.php?stateid={dsStates::@id}".   

<form name="selectForm">
//State:
    <span spry:region="dsStates" id="stateSelector">
        <select spry:repeatchildren="dsStates" name="stateSelect" onchange="document.forms[0].citySelect.disabled = true; dsStates.setCurrentRow(this.value);">   

            <option spry:if="{ds_RowNumber} == 0" value="{ds_RowID}" selected="selected">{name}</option>
            <option spry:if="{ds_RowNumber} != 0" value="{ds_RowID}">{name}</option>   

        </select>
    </span>   

//City:
    <span spry:region="dsCities" id="citySelector">
        <select spry:repeatchildren="dsCities" name="citySelect">   

            <option spry:if="{ds_RowNumber} == 0" value="{name}" selected="selected">{name}</option>
            <option spry:if="{ds_RowNumber} != 0" value="{name}">{name}</option>   

        </select>
    </span>
</form>

20,改变数据源

<select onchange="dsEmployees.setURL(this.value); dsEmployees.loadData();">   

    <option value="../../data/employees-01.xml" selected>Set 1</option>
    <option value="../../data/employees-02.xml">Set 2</option>
</select>   

<th scope="col" onclick="dsEmployees.sort('@id');">Employee ID </th>