The first Sidebar Gadgets of ChinaCars has been released

目前,在微软与博客堂的协助下,中国汽车网已经发布了其第一个Sidebar Gadget(即边栏小工具),其发布主要位于:http://gadgets.chinacars.com,欢迎大家浏览并且下载,如果在使用中,如果发现Bug或者有任何新的创意,均可以通过此页面上的一个邮件与ChinaCars联系,并且有望得到以下奖品:Windows Vista RC1光盘或者车载吸尘器。

上一个SideBar Gadgets教程中,曾经呼吁希望开发Gadgets的国内的大型网站的技术决策人员与我进行联系。也收到了一些部分网站的反馈,在此继续呼吁大家与我联系。当然,技术可以不限于Gadget,可以是GRACE中的任何一部分:Gadget、RSS、ASP.NET Ajax、Card Space或者Expression(WPF, WPF/E)。以上大部分技术并不要求网站平台采用ASP.NET 2.0。(joycode # gmail.com)

相关新闻:

国内17家厂商将生产预装Windows Vista操作系统的电脑

Windows Vista最终版制作完成

 

期待您的邮件。

在 GridView 中增加记录的方法

在 ASP.NET 2.0 中,GridView 支持修改/删除记录,但却不支持新增记录的功能(个人感觉是 GridVew 的一大缺憾,估计在下一版本中会加入此功能),大多数人建议用 FormView 来完成增加记录的功能,但是 FormView 和 GridView 不是同一个表格,所以无法在同一个页面的同一个表格中显示。如果故意将 FormView 或自己的一堆于用新增功能的控件使用普通的表格组装起来,那么会碰到一个很麻烦的问题,即两个表格的列宽如何协调一致,大多数情况下,大家在做表格的时候,表格中各列的宽度都是自动调整的,所以强行指定宽度在很多情况下并不适用。

通过实践,想出了一种办法,主要步骤如下所示:

1) 在 GridView 的 EmptyDataView 中,放置一个普通的Html Table,以便在GridView绑定的数据源中无数据时依旧显示表头(如果数据源为返回的数据行数为0,GridView默认是不显示表头的),假设 ID 为 tbHeader,它的作用是下面用于新增功能的 tbForm 的各列控件提供说明(充当表头);

2)在 GridView 下面,放置一个普通的 HTML 表格,其列数和 GridView 中定义的列数保持一致,但行数只有一行,然后在此表格的各列中放入用于新增功能的各个控件(如 TextBox等),假设此表格的 ID 为 tbForm

3)在页面中加入一段客户端脚本,以便使页面展示到客户端时,利用 Javascript 将两个表格强行合并到一起,这样就可以将只有一行的 tbForm 合并到 GridView中,因此 GridView 的最下面多出一行,其中有 tbForm 表格中定义的输入控件和“添加”链接(按钮),主要代码(JavaScript)如下:

function MergeTable(source,dest)
{
    var row;
    var cell;
    var sourceTb = document.all(source);
    var destTb = document.all(dest);
    for (var i=0; i<sourceTb.rows.length; i++)
   {
         row = document.createElement(“TR”);
         for (var j=0; j<sourcetb.ROWS(I).CELLS.LENGTH; j++)
<sourceTb.rows(i).cells.length; j++)
        {
             cell = document.createElement(“TD”);
             row.appendChild(cell);
             //复制对象
             for(k=0;k<sourceTb.rows(i).cells(j).all.length;k++)
                 cell.appendChild(sourceTb.rows(i).cells(j).all.item(k));
        }
        destTb.tBodies(0).appendChild(row);
    }
    for (var i=sourceTb.rows.length-1; i>=0; i–)
    {
        sourceTb.deleteRow(i)
    }
}

function ChangeTableLayout()
{
     if(document.all(‘tbHeader’) == null)
        MergeTable(‘tbForm’,”);
    else
        MergeTable(‘tbForm’,’tbHeader’);
}

ChangeTableLayout();

如果 GridView 绑定时没有数据,将不显示其中定义的各列,而只显示 EmptyDataView 中的 tbHeader,这时要合并 tbHeader 和 tbForm。如果 GridView 绑定时包含数据,则不会显示 EmptyDataView(当然也不会显示其中的 tbHeader),但这时会显示 GridView 中定义的各个列,因此只需将 GridView 本身和 tbForm 合并即可。 GridView 的客户端ID可以用GridView.ClientID来获取。

在服务器端很容易知道 GridView 绑定后是否包含数据,但对于客户端来说,不容易检查,一个简单的作法就是检查页面中有没有 tbHeader 对象(如果有,则说明表格没有数据,如果无此对象,表示 GridView 中包含数据… 好啰嗦)

4)如果是 AJAX 环境,上述脚本有可能不被执行,可以调用 Sys.Application.load.add ( JavaScriptFunction) 来强制执行脚本,来合并表格,主要代码如下(C#):

ScriptManager myScriptManager = ScriptManager.GetCurrent(Page);
if (myScriptManager.IsInPartialRenderingMode)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), “ShowFullTable1”, “ChangeTableLayout();\n”, true);
}
else
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), “ShowFullTable2”, “Sys.Application.load.add (ChangeTableLayout);\n”, true);
}

注:上述代码中的 ChangeTableLayout 为客户端脚本函数的名称,其中调用第3步骤中的代码,上述代码在 Atlas 中通过,在 ASP.NET AJAX Beta 上尚末测试。

另:为了更能说明上文代码的效果,我抓了一个截图,图中包括表头在内的前三行就是 GridView,最下面一行其实来自于另一个表格,在客户端强制合并后,显示效果就是这样,看起来象是一个表格。

感谢大家的意见,我对原文中的表述不明确的地方进行了更改。

Sidebar Gadget开发教程(3)

话说从前,书接上回。开心已经向大家提出了一个需求,并且给出解决技术难题的思路,不知道有多少位朋友已经开始尝试编写自己的第一个非“Hello World”的Sidebar Gadget了。那么今天开始,我们就开始逐步介绍开发Sidebar Gadget的具体方式。

使用Gadget.xml来定义Sidebar Gadget

就像计算机语言都会有一个入口函数一样,Sidebar Gadget在启动时也会有一个主入口,而这个主入口文件呢就是Gadget.xml。但该文件你可以存放在多个区域,即Gadget的根目录,或者Gadget的地区语言(如zh-cn, en-us等)目录。按照我的理解,Gadget应该先会找最适合地区语言目录下的Gadget.xml,其次再找根目录中gadget.xml,而一个典型的Gadget.xml文件结构如下所示(Vista自带的时钟Gadget的描述文件,文档中红色文字为开心的注释文字,而注释中的数字标识与附图中的数字标识一一对应):

<?xml version=”1.0″ encoding=”utf-8″?>
<gadget>
<name>时钟</name> 定义Gadget名称(1)            
<namespace>microsoft.windows</namespace> 定义Gadget的命名空间,与JS交互
<version>1.0.0.0</version> 版本信息(2)
<author name=”Microsoft Corporation”> 作者信息(3)
<info url=”http://go.microsoft.com/fwlink/?LinkId=55696″ text=”www.gallery.microsoft.com”/> 作者网站的链接地址(4)
<logo src=”logo.png”/>作者的Logo信息(5)
</author>
<copyright>? 2006</copyright> 版权信息(6)
<description>查看您所在时区或全球任何城市的时钟。</description> 功能描述信息(7)
<icons>
<icon height=”48″ width=”48″ src=”icon.png”/> 显示在小工具待选箱时的图标(8)
</icons>
<hosts>
<host name=”sidebar”>仅支持Sidebar,未来如果大一统了,可能Live.com或者Slideshow都会使用统一的方式
<base type=”html” apiVersion=”1.0.0″ src=”clock.html”/>type仅支持html,未来有可能会支持WPF,WPF/E或者AJAX;src用以指明主界面的HTML源文件
<permissions>full</permissions>目前仅可以设置Full,请参阅此文
<platform minPlatformVersion=”1.0″/>
<defaultImage src=”drag.png”/>在从小工具备选箱用鼠标拖到Sidebar时所显示的Logo
</host>
</hosts>
</gadget>

 通过上面的信息,Sidebar可以得到Gadget中的相关信息,但一个Gadget还不止如此,比如上面的这个时钟显示在Sidebar当中时,应该如 左图所示。在这个截图中,我们注意到有一个小扳手式的图标,使用它可以选择自己心爱的钟表外型或者进行其它的自定义设置,那么此部分是如何反应在源代码中的?

还有,有一些Gadget,比如自带的RSS Reader,当单击某文章标题时,会自动在左侧弹出来一个Flyout窗口,这个窗口的设置如何在源代码中反应呢?

还有,系统自带的那个CPU以及内存使用量的Gadget,类似于汽车的转速表,它又是如何得到这种实时的系统信息的呢?

还有,当把一个Gadget从Sidebar拖到桌面时,其页面大小会发生改变,这又是为什么呢?

还有,Gadget中有很多透明效果,比如那个表的周围就是透明的,呈一个圆形,或者其它类型,而不是我们常见网页的矩形,这又是为什么呢?

还有,Gadget中的服务器端与客户端交互实现局部刷新却又没有使用ASP.NET AJAX框架,这又是为什么呢?

呵呵,如果你感兴趣,欢迎继续阅读本教程,今天就先到这儿吧。

我的创意(2):关于中文输入法(上)

我一直使用五笔字型输入法,所以在没有加入微软之前,我比较喜欢写字,而且也写了好多字。后来,上台的机会多了,用嘴越来越多,不过时至今日,普通话以及英语口语仍然是问题。

写字写多了,对于中文输入法也有一些想法。我使用过的五笔字型比较多:王码五笔86版、五笔加加、小鸭五笔、极品五笔等,甚至我之所以将我的手机选定为多普达838,也是因为这个手机有键盘,可以输入五笔字型。目前在PC上,我比较钟爱的五笔字型是极品五笔,原因呢,就是外观风格我喜欢,其它就没有什么了。我打五笔比较快,不使用词组,只是逐字输入在思路清楚时每分钟也可以达到120字。我很少使用词组输入的方式,因为我总是感觉拆词组是一个比较烦的事情。

前段时间,看到搜狗出了一款拼音输入法,真的很激动。想出这个创意的人是一个奇人,在这个市场上已经很少有让人眼前一亮的创意了,我非常喜欢。但是,很显然,我普通话不好,使用拼音输入法对于我来说简直是一种折磨,所以一直在期待他们可以出一款五笔输入法。

中文操作系统与英文操作系统除了一些显而易见的差别外,最主要的就是输入法了。所以搜狐在这上面做些文章,的确非常正确。但也非常明显,直到目前为止,搜狗输入法还没有很好的商业思路,创意有了,但如何把创意变成金钱还是一个问题。我求他们,千万别把这块市场变成另一个竞价排名市场了,这样就可怕了。

中文输入法还有什么可挖掘的创意吗?我认为还有很多很多,将客户端软件与网络结合起来,会产生非常多的创意,当然了,清平世界也更容易滋生“流氓”。

马上要登机了,先去抽颗烟,就先暂时到这儿吧,容我在飞机上再想想,继续再补充。也欢迎各位看客贡献一下自己的创意。

 

开心写于上海虹桥机场A2登机口,也不知道有没有朋友在这个登机口前等着上飞机

我的创意(1):网站的CMS系统的构想

在Web 1.0时代,由于内容是由网站专职的编辑来提供的,所以需要使用CMS系统,供这些网站编辑来提交新内容。在Web 2.0时代,网站是由人民群众创造的,所以出现了很多各式各样的开放式系统,比如使用BlogMetaDataAPI来提交内容的系统。

BlogMetaDataAPI目前被很多BLOG系统所使用,包括博客堂所采用的基础架构.Text。虽然在Web 2.0初期,大家都在使用在线Web编辑器为BLOG提交内容,但这种提交总得来说还是有很多局限性的,比如:

  1. 用户体验不一致:由于Web的性质决定,很多客户体验与普通的Windows Application并不一致,比如在Word中我可以先按PringScreen键拷屏,然后直接粘到编辑器中,但在Web中就做不到这一点;
  2. 响应时间慢、易崩溃:如果增加了过多的文字或者调用到一些特殊的属性。很容易出现响应时间慢的特点,并且导致崩溃(现在崩溃现象越来越少见了)。
  3. 需要在线写:在不联网的情况下,你必须要先写到记事本或者Word文档中,等到联网的时候再提交。
  4. 浏览器标准的兼容性:比如博客堂使用的在线Web编辑器在IE6中工作良好,在IE7中就无法正常显示(相信很多博主已经遇到此问题了)。

我也是基于以上原因,以及工作繁忙,有将近一年的时间没有写BLOG。所以最近当我提高了发文数量后,很多人感觉到很诧异:开心怎么了?其实我只是有了一件顺手的工具,即Windows Live Writer。当然,使用Word 2007也可以直接发送博客,不过一来程序太笨重,二来博客堂对Word 2007的发布功能支持的并不是非常好。

一年前,曾经也有过一个构想,就是采用Outlook发送邮件的方式来发布博客。很显然,Live Space已经实现了这个功能,不过只能发给它自己。所以豆腐宝玉已经完成了大部分代码,实现功能大体如下:

  • 在网站(这个网站一直没有时间开发)上使用邮件注册一个帐号,并且关联自己的博客地址以及帐号信息(可多选);
  • 在注册通过后,会得到一个特殊的邮件地址,然后就可以使用任意邮件客户端(Outlook, Outlook Express,Web mail)将自己写好的文章发到该邮件地址中;
  • 文章实时张贴在自己关联的各博客地址上;
  • 同时服务器端保留了你发送的BLOG文章的内容,我们还可以使用这个内容做“博客搜索”、“博客搬家”等等更有创意的内容。

由于豆腐先生已经移民到加拿大了,宝玉与开心的工作也很忙,这个项目也暂时搁置了。我想,是否可以把此项目已经开发完成的代码放在Codeplex上,做成一个开源项目,大家一起来参与开发呢?:)

回到Web 1.0,毕竟现在国内排名前几名的网站大部分还基于网站编辑。我的想法就是,虽然Web 2.0的人民群众们已经享受到了Windows Live Writer等带来的好处了。为什么不让我们的网站编辑们也享受一下这种好处呢?

可不可以把网站的CMS系统使用MetaDataAPI来进行开发,不使用在线编辑器,而是直接使用Word、Windows Live Writer编写自己的CMS系统呢?有人说,Word和Windows Live Writer很难自定义。Oh my god,你难道没有听说过Smart document (Kaneboy & QiangLi快来给大家补补课),以及Live Writer SDK

Any feedback? 🙂

Sidebar Gadget开发教程(2)

由于近期在努力学习Sidebar Gadget开发技术,并且也与中国汽车网合作做了一个Sidebar Gadget,所以耽误了一些时间,但同时,也通过这个机会加深了学习印象。

很多朋友在学习新技术的时候,都喜欢做Hello World。我原来也是这种情况。其实我认为这种方式有百害而无一利,就类似于学英语开始背单词一样,背了十多年,还没有背到F开头的单词呢。因为Hello world就让你产生了一种虚伪的成就感,而稍微一深入进去,遇到一点挫折,就会有畏难情绪,再也坚持不下去了。最后产生的结果无非就是眼高手低,或者眼低手低。

所以本教程我想使用一个实际项目开始,这个项目就是为ChinaCars.com开发一个小型的Gadget,要完成的主要功能如下:

  1. 根据你选择的城市以及价格区间,以幻灯片形式来显示符合条件的车型图片;
  2. 图片切换可以实现Powerpoint中的那种幻灯片切换效果;
  3. 点击某个车型图片,可以显示该车型的详细信息。

功能需求很简单,但使用HTML+Javascript+CSS完成它,可能就需要时间了。因为:

  • 开发Gadget没有一个IDE,无非所见即所得;
  • 无法进行Debug,只能写Track信息来追踪;
  • 资料比较少,只能看Windows Vista自带的Gadget源代码,或者去看SDK
  • 用ASP.NET时间久了,Javascript与HTML知识忘光光了。

另外一点,中国汽车网没有提供API怎么办?不会让我自己来去分析HTML吧?没有关系,我把这个接口暴露给大家,大家可以自己尝试一下。使用接口1,你可以得到一个车型信息列表;使用接口2,你可以得到一个车型详细信息的RSS。简单吧?具体参数的使用说明,自己多试几下就知道了。

那么建立远程HTTP连接呢?在.NET中我们还有HttpRequest来使用,在Javascript中,我们就只能使用Microsoft.XmlHTTP这个ActiveX对象了,不过也非常好用,而且像异步呀、状态信息呀都一个不少的实现了。分析XML也不必使用XmlDocument这个.NET类,你完全可以使用Microsoft.XmlDom这个ActiveX对象。

我的Gadget其实已经完成了,现在来考考大家了。虽然我平常工作比较忙,但仍然使用三个晚上的时间完成了这部分代码。那么我留出一周的时间,如果大家感兴趣,先自己试着开发一下。一周后,我会公布我的源代码给大家的。如果您在一周内完成了,欢迎打包成.gadget文件,通过邮件发送给我,说不定会有神秘礼品呢。

另外,也号召一下各网站的开发高手,发挥你的创意,为你的网站增加Gadget。抢占完用户的桌面,霸占了用户的IE,现在到了抢占用户Sidebar的时候了!让客户接受你,你就要有好的创意。如果贵网站在国内按流量综合排名在前一百以上,或者是比较酷的网站,有应用Gadget的好创意的话,也可以与我联系。Microsoft将会选择一部分网站做相关的市场活动。

BTW: 如果您的公司在开发类似于Forums、Blog等相关Web通用系统的话,如果想应用Gadget,或者想迁移到ASP.NET,或者想与Microsoft作一系列的市场活动,也可以与我联系。(曾经给Discuz!发过一封邮件,但石沉大海)

BTW Again: 如果贵公司或者个人精通Gadget,Expression,AJAX,Card Space,也可以与我联系。我们需要合作伙伴,帮助我们的客户进行培训与实施,并且支付相关费用。