What is PageBus?

TIBCO PageBus is an event and message bus implemented in JavaScript that enables disparate Ajax elements in a Web page to broadcast and listen for events and messages published on topic names.

简单来说：发布一个消息，订阅了这个消息的程序，就会去执行相应的功能

B, C … Z 订阅了名为 “TibcoMessage”的一个消息。

当发布一个名称为”TibcoMessage”的消息时，B, C … Z 程序，都会去执行各自的事件，比如B 执行 刷新一个DOM, C 执行 删除一个DOM，…

这样就可以页面之间的事件关系，能做什么，看各自的需求吧。

可以简单的看几个例子，也许能更清楚的知道PageBus能干什么。

Publish/Subscribe Example 消息发布和订阅

Performance Example PageBus的性能测试

更多详情，还是访问官方网站吧：http://developer.tibco.com/pagebus/

延伸阅读

超越轮询？考虑PubSub、Push和MOM

为了给45000名使用者检查更新，FriendFeed向Flickr轮询了290万次。而且在这45000名使用者中，在任意时刻只有6700名处于已登录状态。这当然是一种蹩脚的内容更新检查方式。

解决这个问题的关键在于将标准REST Web服务抛在脑后，找出一种使用消息传递的方式，它是一种通知使用者内容变更的直接通信方式。

• What is GITAK Server?

TIBCO General Interface(TM) Test Automation Kit Server
collect the result log.
automatically start/stop/control any supported browser.

The GITAK Server allows you to run your GITAK HTML test suite against a remote webserver deployed General Interface (GI) application and collect the result log.

• GITAK Server Operating environment

GI 3.7: http://developer.tibco.com/gi/product_resources37.jsp
GITAK 0.9: http://developer.tibco.com/gi/product_resources_gitak1.jsp
JDK 6: http://download.java.net/jdk6/
Tomcat 6.x: http://tomcat.apache.org/download-60.cgi

• How to configure it?

1. Create a folder，c:/gitak_server.
2. Access to gitak path “gitak/server/”, copy classes12.zip, selenium-server.jar into c:/gitak_server/.
   (But you would better get them from here, because the GITAK Server 0.9 not support firefox3 now.)
3. classes12.zip: http://svn.generalinterface.org/trunk/gitak/server/classes12.zip
   selenium-server.jar: http://svn.generalinterface.org/trunk/gitak/server/selenium-server.jar
4. Copy gi folder into “Tomcat 6.0/webapps/ROOT/”, and then svn checkout your project being tested.
   For exapmle:  you checkout UXCore, QAToUXCore.
   The directory structure:
   webapps/ROOT/gi
   webapps/ROOT/UXCore
   webapps/ROOT/QAToUXCore
5. Access to tomcat folder “webapps/ROOT/QAToUXCore” , create file “index.html”.
   To ensure that you have access to the following url (the folder name is case-sensitive)
   http://localhost:8080/gi/JSX/js/JSX30.js
   http://localhost:8080/QAToUXCore/
6. Copy your test script files into “c:/gitak_server/gitak-tests/”, then edit TestSetup.html.
7. Create file run_gitak_win_sp3.bat, run_gitak_fx3.bat, run_gitak_ie7.bat into “c:/gitak_server”.

• How to run it?

1. Run Tomcat server.
2. Double click run_gitak_win_sp3.bat，then wait for result log being created.

Download attach file: gitak_server.zip (above mentioned files)

先看看这篇文章，浏览器所支持的 CSS Selecter http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/ ,看来google Chrom 和 Safari 是对 CSS Selecter 支持最好的。

转自：http://www.webjx.com/css/divcss-10232.html

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。

语法：

:nth-child(an+b)

为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。

描述：

伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。

第一种：简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种：倍数写法

:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配

:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

例子：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

li:nth-child(3n±0){background:orange;}/*相当于(3n)*/

li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种：反向倍数分组匹配

:nth-child(-an+b)

此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。

例子：

li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/

li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/

第五种：奇偶匹配

:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

附：例子效果图

GITAK 可以自动化测试由 TIBCO General Interface 所开发的项目。基于selenium开发。
GITAK和文档 下载地址：http://developer.tibco.com/gi/product_resources_gitak1.jsp

图1，这里可以输入GI Test Suite的路径，选择被测试的用例。
如果是绝对路径类似这样：file:///e:/gi/gitak-tests/TestSuite.html

图2，测试用例代码，错误的时候，会用红色标注错误
点击某一行后，会以灰色选中当前行，测试单个suite时，会暂停到此处。

图3，测试播放按钮、测试结果、辅助工具，“View DOM” 按钮相当有用。
4个按钮分别是：测试全部、测试单个、暂停/继续、单步步进
Fast–Slow，滑动块，测试执行的速度快慢
Hightlight elements 复选框，勾选后，会以黄色标注被测试的组件

图4，被测试的项目，测试效果会显示在这里。

图5，测试时，所出现的一个Dialog

图6，点击“View DOM” 时，出现这个 General Interface DOM 界面

打开gitak的目录之后，有一些实例，可以参考。
目录：gi/tests/gi34 这里是测试用例
目录：gi/samples/gi34 这里是被测试的项目

设置firefox, about:config
security.fileuri.strict_origin_policy == false

如何写一个最简单的测试用例？
1、进入GITAK目录，gi/test/gi34/，复制 testSetup.html, testSuite.html 到一个新目录，
e:/gi_project/test/

2、编辑 testSetup.html
定义GI的路径：|store|file:///E:/tibco|GIPATH|
定义被测项目的路径：|store|${GIPATH}/All_Project/JSXAPPS|SAMPLESPATH|
store: 定义个变量
storeEval: 定义一个变量，可以执行一些JavaScript代码
echo: 打印输出某个变量或值，变量标示为：${VARNAME}

3、testSuite.html 定义一些测试用例的连接
如：<a href=”uxcoreDialog.html”>uxcoreDialog</a>

4、新建一个文件 uxcoreDialog.html，类似如下代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”>
<title>Uxcore Test Dialog Alerts</title>
</head>
<body>
<table cellpadding=”1″ cellspacing=”1″ border=”1″>
<tbody>
<tr><td rowspan=”1″ colspan=”3″>Test sample-dialog</td></tr>
<tr><td>include</td><td>testSetup.html</td><td>&nbsp;</td></tr>
<tr><td>open</td><td>${GIPATH}/shell.html?jsxapppath=${SAMPLESPATH}/QAToUXCore</td><td>&nbsp;</td></tr>
<tr><td>waitForJsxButtonPresent</td><td>JsxButtonText=Dialogs</td><td>5000</td></tr>
<tr><td>verifyJsxButtonPresent</td><td>JsxButtonText=Dialogs</td><td>&nbsp;</td></tr>
<tr><td>click</td><td>JsxButtonText=Dialogs</td><td>&nbsp;</td></tr>
</tbody>
</table>
</body>
</html>

以上代码，具体测试流程是：
载入estSetup.html文件；
打开QAToUXCore项目；
等待5秒，按钮文字等于“Dialogs”的按钮显示；
确认按钮文字等于“Dialogs”的按钮，已经显示；
点击按钮文字等于“Dialogs”的按钮；

具体命令，可以查看 gi/doc/* 下面的说明文档

5、打开GITAK，输入file:///e:/gi_project/test/testSuite.html, 点击go，即可看到测试效果

总结：点击“View DOM”按钮后，出现在图6中的元素，都可以很方便的以JsxName=? 的方式来查找。这里显示的是getBodyBlock()所找到的内容。
通过 getRootBlock().paintChild(obj) 所插入的节点，在这里找不到。

Ajax通用表单提交功能：把FORM表单中的值，通过AJAX方式提交到某页面

说明：

• 以下FORM表单中，有name属性的、被checked的元素会被传递；disabled元素不被传递。
• 不支持FORM表单中文件上传控件

测试地址：http://www.d5s.cn/example/ajax/ajax_form.php

源码：打开以上网址后，查看源文件即可。

还是看实际代码吧？

http://www.d5s.cn/example/js/js_flash.html 正常

http://www.d5s.cn/example/js/jquery_flash.html 出错

一个使用的是 document.getElementById(’XXX’).innerHTML = str;

另一个使用    $(”#XXX”).html(str);

结果，使用了jquery方法，会出现一些BUG在IE，其他浏览器未发现。

我之前也写过一篇文章： http://www.d5s.cn/archives/79

我以为 是使用jquery造成的，看来是jquery对object做了特殊处理，到底做了什么处理呢？我还不清楚，希望哪位js达人告诉我。

不知道现在还有多少网站是自己从头开始写js的，至少我现在已经离不开jquery了，在做一个网站之前，必定要先引入js类库–jquery

如果大家都从一个地方载入js类库，那么载入速度将会快很多，伟大的google已经帮我们想到了 Google Ajax Library API

看看 “某人的栖息地” 写的教程说明：http://www.ooso.net/index.php/archives/404

呼吁各位使用这些 jQuery、prototype、script.aculo.us、MooTools、dojo 类库的朋友，都自己从 Google Ajax Library API 下载吧

先认识一下什么是widget？

http://baike.baidu.com/view/704016.htm

现在widget，已经由yahoo把它发扬光大了。

具体可以在这里下载 。

充分利用，每天面对次数最多的桌面，让你的工作，摆满屏幕。

1、使用 “桌面停靠栏” ，来管理你混乱复杂的桌面图标，让你桌面和MAC一样。

2、使用“X-TASK计划任务”，来管理每天的工作，以及代办事项。

3、使用 “yahoo记事本”，随手记下，手边的工作和事情。

4、其他一些 系统管理、天气预报、时间、日历，之类的，可以在这里

http://widget.cn.yahoo.com/gallery/view.htm?widgetID=127&cate=1

http://www.widgetgallery.com

找到你想要的扩展。

然后就是让我这个懒人，变得更懒，更高效。

如果你有需求，甚至可以自己编写一个 widget 组件。

开发文档：http://widget.cn.yahoo.com/document.htm

附一张我的桌面

很久以来，自己也有这个疑惑，由于很久没有专职做这个了，就没有深入的研究过重构方面的东西，只是一直关注着，不曾落下。
转载记录一下，以免自己遗忘。

转自：http://www.planabc.net/2008/05/26/img_vertical_center_solution/

http://listenpro.googlepages.com/demo_vertical_css.html

先来看两个例子

http://www.d5s.cn/example/js/js_object.html

http://www.d5s.cn/example/js/jquery_object.html

document.getElementById(’id’).innerHTML 和 jquery的 $(’id’).html() 到底有什么区别？

你可以分别查看两个页面的源码，就只有19和20行不同

document.getElementById(’test_player’).innerHTML = box_dom;
$(”#test_player”).html(box_dom);

都是向 test_player 节点内插入数据，但是结果却大不相同，不知道jquery是不是对 object 有特殊处理。