javascript and xml

http://www.cnblogs.com/javaca88/archive/2008/05/04/511876.html

Import XML Document

Import XML Document
http://www.quirksmode.org/dom/importxml.html

Working with XML and Javascript
http://www.peachpit.com/articles/article.aspx?p=29307&seqNum=4

On this page I import an XML document and then read out the data and put them in a table on the page.

I think importing XML documents will become more and more important in the future. You can manage the XML document as a kind of database, while the HTML document contains all information about the displaying of the data.

Anyway, try it first by clicking the link and loading some crucial information about the Roman emperors of the Julian-Claudian dynasty. You can also view the XML document separately.

First I import the document emperors.xml, then I enter the XML document through the W3C DOM and extract the data I need, while building a table to display the data.

The script

function importXML()

{

	if (document.implementation && document.implementation.createDocument)

	{

		xmlDoc = document.implementation.createDocument("", "", null);

		xmlDoc.onload = createTable;

	}

	else if (window.ActiveXObject)

	{

		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

		xmlDoc.onreadystatechange = function () {

			if (xmlDoc.readyState == 4) createTable()

		};

	}

	else

	{

		alert('Your browser can\'t handle this script');

		return;

	}

	xmlDoc.load("emperors.xml");

}



function createTable()

{

	var x = xmlDoc.getElementsByTagName('emperor');

	var newEl = document.createElement('TABLE');

	newEl.setAttribute('cellPadding',5);

	var tmp = document.createElement('TBODY');

	newEl.appendChild(tmp);

	var row = document.createElement('TR');

	for (j=0;j

Importing the XML

First of all I import the XML document and make it accessible through the object xmlDoc. When the document has finished loading, I want the script createTable() that construes the table to be executed immediately. Of course, the coding for all this is browser specific.

Clicking the link activates the function importXML.

function importXML()

{

Mozilla

Netscape imports an XML document through the method document.implementation.createDocument(). First check if document.implementation is supported, then check if document.implementation.createDocument() is supported. Explorer 5 on Mac also supports document.implementation, but not the createDocument method, so it shouldn't execute this script.

	if (document.implementation && document.implementation.createDocument)

	{

Then create the document and give it an onLoad event handler: as soon as the document has been loaded the script createTable() is executed, creating the table:

		xmlDoc = document.implementation.createDocument("", "", null);

		xmlDoc.onload = init;

	}

Explorer

Explorer on Windows doesn't support document.implementation . Instead, you must create an Active X Object that will contain the XML document. So we see if the browser can create ActiveXObjects:

	else if (window.ActiveXObject)

	{

If it does, we can proceed by creating the object

		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

Unfortunately there's no onLoad event for this object. To see if it's ready we should use the MS proprietary ReadyStateChange event. I don't quite understand all this myself, but it works. When the onReadyStateChange event handler fires, the readyState has a value between 1 and 4. 4 means that all data has been received (= onLoad). So if it's 4, start creating the table.

		xmlDoc.onreadystatechange = function () {

			if (xmlDoc.readyState == 4) createTable()

		};

	}

Other browsers

If the browser supports neither way, give an alert and end everything:

	else

	{

		alert('Your browser can\'t handle this script');

		return;

	}

Load document

Finally, load the actual document. Surprisingly, the command for this is the same in both browsers:

	xmlDoc.load("emperors.xml");

}

Now we wait for the XML document to be loaded completely, then the function createTable() is started up.

Strangely, Mozilla sometimes only accepts a URL to the XML file that is relative to the page with the script, which in practice means that you can only access local XML files. Only the Linux version does accept absolute paths in all cases.

You might be able to solve the problem by putting the page containing the script on a real web server instead of a local host. However, this does not help in all cases.

Creating output

This function is entirely specific for the XML document I created. Each XML document is different, each way of displaying the content is different, so the function I wrote is only an example.

The XML document

The XML document consists of nodes named , which all contain the same children. As an example, this is the structure of the first node:

                                  

                                   |

               ------------------------------------------

               |                   |                    |

                                         

               |                   |                    |

           Augustus            27BC-14AD             Peaceful

In the script below I assume that every emperor has this structure. If one hasn't, it could lead to huge problems, but this way I keep the script simple.

Creating the table

Function createTable() starts by creating an array of all the tags in the XML document. For each of these tags I want to create a TR containing several TD's with the data.

function createTable()

{

	var x = xmlDoc.getElementsByTagName('emperor');

Then we create a new TABLE with CELLPADDING=5. Note the special spelling cellPadding, Explorer requires this and it doesn't hurt Netscape.

	var newEl = document.createElement('TABLE');

	newEl.setAttribute('cellPadding',5);

Explorer requires that we also create a TBODY and append it to the table. Don't ask me why, I think TBODY is a completely useless tag, but without it the example doesn't work in Explorer.

	var tmp = document.createElement('TBODY');

	newEl.appendChild(tmp);

First of all, a row with TH's for the headers. Create a TR

	var row = document.createElement('TR');

then go through the childNodes of the first emperor.

	for (j=0;j

A problem here: the XML document looks like this:

which means that Netscape considers the empty text node between emperor and name as the first child of emperor. Since these nodes are only a nuisance, we have to check if the nodeType of the childNode is 1 (= it's a tag). If it isn't, continue with the next child:

		if (x[0].childNodes[j].nodeType != 1) continue;

Create a container element (TH):

		var container = document.createElement('TH');

then read out the name of the childNode (ie. name, rule and death). I want these names to be printed inside the TH. So first I append the name to the TH, then I append the container to the TR

		var theData = document.createTextNode(x[0].childNodes[j].nodeName);

		container.appendChild(theData);

		row.appendChild(container);

	}

Finally, append the row to the TBODY tag

	tmp.appendChild(row);

Then we go through all elements emperor and create a TR for each one

	for (i=0;i

Go through the childNodes of each emperor, check if it's a node (tag) and create a TD to hold the data

		for (j=0;j

Then extract the actual data. Remember that the text inside a tag is the nodeValue of the first childNode of that tag

			var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);

Append the text to the TD and the TD to the TR

			container.appendChild(theData);

			row.appendChild(container);

		}

and when you've finished going through the emperor, append the TR to the TBODY

		tmp.appendChild(row);

	}

Finally, when you've gone through each emperor, append the TABLE to the special P with ID="writeroot" I created:

	document.getElementById('writeroot').appendChild(newEl);

}

and a table has been magically created.

example code!

http://www.example-code.com/

I poor developer likes example code! Yes, I like them.

check regular expression

Very good, very useful ar~

http://regexlib.com/RETester.aspx

Google Map API

1. documentation

http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html

2. Some tutorial

http://dev.leck.com/gsupport/

http://www.developer.com/lang/jscript/article.php/3615681

Web Development Resources

Good Joomla tutorials(****)
http://www.phpeveryday.com/index.php
fff
Joomla documentation (****)
http://docs.joomla.org/Main_Page

CSS resource
http://www.cssjuice.com/

1. CSS Menu and navigation bar (*****)

http://css.maxdesign.com.au/index.htm

2. Write header background with three images (left, middle, right)

http://www.pixy.cz/blogg/clanky/rubberheaders/

3. Create rounded corners with Joomla

http://docs.joomla.org/Creating_rounded_corners

4. 25 rounded corners with CSS (****)

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

5. javascript

http://mootools.net/

微软(美国)产品开发组的团队角色

UI设计人员是对产品的使用界面进行设计和订正的人员。 Usability Engineer是检验UI设计的合理性的人员

在很多团队，真正的界面设计都是由PM做完了Spec，才找UI设计人员来征求意见。像我们团队，我的设计规范书写完后，我才找UI设计人员来，他们所做的也就不过是对我的设计作小改动，如那些英语词句用得不妥，哪里的按钮该改变大小，等等。我所知道的其它视窗操作系统的团队，也是差不多。这主要是因为我们能自己进行界面设计 - 视窗操作系统部门的PM是微软PM中最厉害的（至少我们这样看：-） ） 。可是，这是不太正确的方法，因为如果你有很强的PM, 你可用这种方法，要是你的PM的设计能力不强，这样的流程就要出问题。你的项目的成功不应该寄托在几个强有力的PM上，而是要用完善的流程来保证。好的流程应该是，在产品开发的早期，在做设计时，PM就应该和UI设计人员一起来考虑产品设计的合理性。

这个问题在微软内部我们自己也有很大的争论。 UI设计人员就常常抱怨，在产品开发的早期，他们常常不被看重，被抛在一边。UI设计的领导人甚至在全公司的培训大会上讲，我们的这个文化有问题，领导对UI设计人员在产品开发早期能起的作用不够重视。可是这个争论已有几年了，结果仍无改变。我想这主要还是跟我们这个行业的产品开发的特性有关系。因为软件开发是很技术性的，常常在早期的技术讨论中，UI设计人员对技术讨论说不出个所以然来(因为他们大多是学艺术设计的)，渐渐地各开发团队对UI设计人员的作用就看轻了。在使用界面因素占很大比例的产品团队，像Office 和MSN，这种情况要好一些。

Usability Engineer 所做的事和UI设计人员不同。他们是将UI设计的模型版，找客户来进行实用和使用性能的检验调查和测试，并根据调查结果对UI设计提出进行修改的意见。也就是说，他们的工作是检验UI设计的合理性，有点像测试人员对程序进行检验的功能 。 可以说， Usability Engineer 和UI设计人员的关系像测试人员与开发编程人员的关系。

User Education team 是编写使用说明书的编辑人员。

从大方面的来说，微软的产品组是公司的几大部门之一，其他还有市场/销售部门，服务部门，运作部门，还有研究院什么的。

在产品组里，是按产品分成一个个的商业部门(Business Unit)，一个商业部门负责一个主要的产品。其中的项目团队主要是按以下的结构组成：（缩进表示汇报Report关系）

Product Unit Manager - 产品组总经理
---+ Group Program Manager
---+ Program Manager Lead
------+ Program Manager 1
------+ Program Manager 2
------+ Program Manager n
---+ Dev Manager
------+ Dev Lead
------+ Dev 1
------+ Dev 2
------+ Dev n
---+ Test Manager
------+ Test Lead
------+ Test 1
------+ Test 2
------+ Test n
---+ User Education Team Manager
------+ UE 1
------+ UE 2
---+ Architect (整体设计，规划，基本上只有特别大的产品组才有，画那种积木图。顺别提及，Bill Gates 是Chief Software Architect)

除此以外，还有全公司合用的：
+ Usability Engineer
+ Designer (美工)
+ Accessiblity Engineer
......

对于一个Feature，通常每个角色有一个，比如按上例中，可能是

[ Test 1 + Dev 2 + UE 1 + Usability Enigneer ] 组成一个Feature team.

Feature Team 之间没有隶属关系。

:p 对于参加过DEVP203课程的学员:
其实我们在课上讲过的模型,有很多变化的可能性.以上是最基本的微软配置,比如过的部门就很小,20个人就要出一个产品,并不是所有的角色都有.

合理的开发团队组合应该是什么？

允许我抛砖引玉，先谈一下微软的经验：

项目经理团队：（Program Management Team）
• 设计项目经理 (Feature Design PM)：负责具体的产品设计，写Design Spec。PM 队伍中，80%的PM是做这个。
• 发行项目经理 (Release PM)：负责整个项目的流程和进度管理，制定进度表等，协调整个团队的工作。大的PM 队伍中有一人专门做这个。这是整个项目的领头人。大型的项目的成功与否，常常靠得力的发行经理的领导。
• 协助项目经理(Supporting PM)：负责其它产品发行需要照顾到的事情，如客户交流、和市场开发人员交流、负责beta program (初版试行)、等等。大的PM 队伍中少不了这样的人。20%的PM是做这个。

开发团队：(Development Team)
• 开发团队领导（Development Manager）: 负责管理各个开发小组，并对开发编程的工作做总体的规划。
• 开发组长(Development Lead): 负责管理开发工程师，也参加对开发编程的工作做总体的规划。
• 开发工程师(Develop Engineer, or Developer)：负责具体的编程开发。
• 构架师(Architect): 大的产品团队有一两个资深工程师专门做整体系统的设计规划。

测试团队：(Quality Assurance or Test Team)
• 测试团队领导（QA Manager）: 负责管理测试小组
• 测试组长 (Test Lead): 负责管理测试工程师, 制定测试计划等
• 测试工程师(Tester or Test Engineer)：负责具体的测试工作
• 测试开发工程师(Developer in Test, or STED): 负责测试工具的开发

产品可用性团队：(Usability Team)
• 产品可用性工程师 (Usability Engineer): 做使用性能的调查和测试，采访客户或将客户邀请来做调查
• 界面设计师（UI Designer）: 负责具体的界面设计
• 产品设计师 (Product Designer): 负责产品的总体设计， 特别是硬件产品。
以上这个团队并不是所有的产品队伍都有。比较小的队伍就没有这些专人，有的时候向别的队伍借用，或雇佣临时工。

客户教育或文档团队：(User Education, or UE Team)
• 文档组长 (UE Lead)：负责管理文档小组
• 文档编辑 (UE Editor)：负责具体的文档编辑和撰写

以上只是一个大约的组合模式。不同的团队有各自的侧重点和变化。在很大程度上这些也受到具体的产品的影响。我想我在微软的产品部门的其他同事们会再做补充。 希望这些信息能对国内的软件开发公司能有参考价值。我们希望通过这样的交流，我们能为中国软件开发事业的进一步发展尽我们的一点微薄之力。