1 / 75

.NET 資訊能源

.NET 資訊能源. 任何一種珍貴能源均必須經過長久的融合過程才能形成。而此數位資訊能源可以在短短的幾年內，便能從融合到釋放它的能量到世界上的每一個角落，它的威力足以帶領我們迎接更具挑戰性的二十一世紀。. 主講者：陳松林 課程服務 : www.cmt.com.tw ( 中美通 ) 技術支援 : www.xteacher.net (Dr.X). 何謂 .NET 資訊能源. 任何時間，任何地點，任何裝置 應用 .NET 資訊能源. 資訊能源的原力（ XML,Web Service,… ）

gerodi
Download Presentation

.NET 資訊能源

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. .NET 資訊能源 任何一種珍貴能源均必須經過長久的融合過程才能形成。而此數位資訊能源可以在短短的幾年內，便能從融合到釋放它的能量到世界上的每一個角落，它的威力足以帶領我們迎接更具挑戰性的二十一世紀。 主講者：陳松林 課程服務:www.cmt.com.tw (中美通) 技術支援: www.xteacher.net (Dr.X)

  2. 何謂.NET 資訊能源 任何時間，任何地點，任何裝置 應用.NET 資訊能源 • 資訊能源的原力（XML,Web Service,…） • 數位的資料，透過 XML 描述系統，可有效的轉換成資訊，這樣的資訊可利用Web 服務機置，湧入e世代的世界中。 • 資訊能源的應用（HTML,DHTML,Element Behavior,..） • 不論您使用何種前端資訊裝置(PDA、 WAP、瀏覽器)，均可接收.NET資訊，目前最強力的展示機置，莫過於瀏覽器 (Internet Explorer 5.5)，結合HTML、DHTML及前端資訊交換器 (Element Behavior)，以滿足任何在 .NET 世代的應用需求。 • 資訊能源的交換（SOAP,XMLHTTP,WebDAV,…） • 由XML精煉出的資訊，可輕易的在新一代的資訊交換通道，執行資訊傳遞及處理。

  3. .NET資訊能源的運作架構 .NET資訊網站 .NET 網站設計師 原力 交換 .NET 網站工程師 .NET資訊工作站 .NET資訊服務網站 .NET 程式設計師 交換 標網應用系統 原力

  4. .NET資訊能源的運作架構 .NET資訊網站 (office.microsoft.com/services/) 被動式

  5. .NET資訊能源的運作架構 .NET資訊網站 (www.bcentral.com) 主動式

  6. .NET資訊能源的運作架構 Dr. X 專業網站 (www.xteacher.com) 標籤服務

  7. 標籤服務範例 <html> <head> <title>留言板試範</title> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <style> form{behavior:url(formmail.htc)} </style> </head> <body> <h3>大呆留言板</h3> <!--以下是表單--> <FORM drxmail="xchen@look.ca" drxtype="text"> 留言日期:<INPUT TYPE="text" name="txtdate" value=""><br> 您的名字:<INPUT TYPE="text" name="txtName" value=""><br> 電子郵件:<input type=text name="email" size=22 maxlength=50 value=""><br> 性 別:<SELECT name="sex"> <OPTION VALUE="m">紳士 <OPTION VALUE="w">淑女 </SELECT><br><br><br> 足跡內容:<br> <textarea name="comments" rows="6" COLS="49" WRAP=HARD></textarea><br><br> <input type="submit" value="確定送出" > <input type="reset" value="清除重來" > </form> </body> </html>

  8. .NET資訊能源的核心元件 Visual Studio.NET, .NET Framework .NET Enterprise Servers .NET Building Block Services .NET Devices, User Experience

  9. .NET資訊能源的系統架構 .NET Framework ISA Server 2000 防火牆 Internet Windows .NET Visual Studio .NET .NET Enterprise Servers

  10. .NETFrameworks開發架構 .NET Frameworks Win Forms ASP.NET Services ASP.NET Web Forms Data, Web Connectivity Base class libraries Common Language Runtime

  11. ASP.NET 開發平台服務 .NET網頁服務網站 (www.brinkster.com) 平台服務

  12. ASP.NET 開發架構 • 架構模式 • 網站應用系統 (Web Applications) • Web Forms • 網站服務 (Web Services) • XMLHttp,SOAP • 架構支援 • Cache Services • Security • Tracing • Localization

  13. .NET 資訊工作站 程式架構 <html> <head> 程式執行設定 </head> <style> 畫面特效 </style> <script> 程式執行 </script> <body> 程式畫面 </body> </html> Cascading style sheets DHTML Behavior Scripting Engine ActiveX Object Document Object Model Element Behavior

  14. .NET 資訊工作站 程式畫面的設計 <html><style> .line {border-bottom:2 ridge black} table {position:absolute} body {background-color:lime;margin-left:2;margin-top:2} #master button {border:2 groove blue;background-color:lightblue;color:brown;width:50;height:30;margin-left:2px} #pn {color:red;filter:glow(Color=blue,Strength=2);width:200;} </style> <body> <table border=0 width="600" height="400" cellspacing="0" cellpadding="0"> <tr align=left width="100%" height="8%" > <td class="line"> <label id="pn">千禧網頁應用系統</label> <label style="position:relative;left:300;width:auto">版本 1.0</label> </td></tr> <tr width="100%" height="10%"> <td id="master"> <button title="Add Record">進貨單</button> <button title="Delete Record">出貨單</button> <button title="Query Record">報廢單</button> </td></tr> <tr height="70%" > <td width="100%" > <iframe id=myiframe width=100% height=100% frameborder="no" allowtransparency="true" scrolling=no src="form.htm"></iframe> </td></tr> </table></body></html>

  15. .NET 資訊工作站 JScript 與應用物件 <html><script> function dosave(){ var rec=""; rec=rec+"%"+uname.value+"%,%"+subject.value+"%,%"+email.value+"%,%"+data.value+"%"; var fs=new ActiveXObject("Scripting.FileSystemObject"); if (fs.FileExists("c:\\aa.txt")==false) { var b=fs.CreateTextFile("c:\\aa.txt",true); b.writeLine("%Name%,%Subject%,%Email%,%Data%"); b.close();} var a=fs.OpenTextFile("c:\\aa.txt",8,true); a.WriteLine(rec); a.close(); } </script> <body> <div align="center"><center> <table border="2" width="65%" height="1" cellspacing="0" cellpadding="2"> <tr><td width="100%"><font color="#800000">您的名字</font></td></tr> <tr><td width="100%"><input type="text" size="10" name="uname"></td></tr> <tr><td width="100%"><font color="#800000">留言主題</font></td></tr> <tr><td width="100%"><input type="text" size="50" name="subject"></td></tr> <tr><td width="100%"><font color="#800000">E-Mail</font></td></tr> <tr><td width="100%"><input type="text" size="50" name="email"></td></tr> <tr><td width="100%"><font color="#800000">訊息 (最多 250 字元)</font></td></tr> <tr> <td width="100%"><input type="textarea" size="50,5" maxlength="250" name="data"></td> </tr> </table></center> </div> <div align="center"><button id=save onclick="dosave()">儲存</button></div> </div> </body></html>

  16. .NET 資訊工作站 程式動態資訊處理 <HTML> <BODY onclick="wasClicked()"> <H1>Welcome!</H1> <P>This is a very <B>short</B> document. <SCRIPT LANGUAGE="JavaScript"> function wasClicked() { alert("I was clicked " + window.event.srcElement.tagName); } </SCRIPT> </BODY> </HTML> onClick B H1 P Body

  17. .NET 資訊工作站 程式動態資訊處理 <style> label {writing-mode:tb-rl;vertical-align:top;} input {writing-mode:tb-rl;behavior:url("document.htc")} textarea {overflow:hidden;writing-mode:tb-rl;behavior:url("document.htc")} </style> <body> <textarea rows=6 tabindex="2" onblur="a.focus()"></textarea><label>內文</label> <input type=text id=a tabindex="1" ><label>收文者</label> </body>

  18. .NET 資訊工作站 標籤元件製作 (展示與程式分離) <html xmlns:drx> <head> <?IMPORT namespace="drx" implementation="xdate.htc"> </head> <body> <drx:xdate/> </body> </html> <public:component tagname="xdate" lightweight=true> <public:attach event="oncontentready" onevent="doit()"/> <script> function doit(){ var oDate=new Date(); var sYear=oDate.getYear(); var sMonth=oDate.getMonth() + ""; var sDay=oDate.getDay() + ""; element.innerText=sYear + ":" + sMonth + ":" + sDay; } </script> </public:component>

  19. .NET資訊能源的原力 何謂 XML • 功能：資料(Data) 描述語言 • 開發：資訊與程式分離(DOM) • 知識：專業知識標準化 (自定標籤)

  20. .NET資訊能源的原力 資料 (Data描述語言) XML的全名是eXtensible Markup Language。主要的目的是要將資料（Data）根據XML標準轉換成使用者與電腦皆能詮譯的資訊（Information），以下是利用XML標準將資料（Data）轉換成資訊（Information）範例： <Contact_information> <name>Alley gator</name> <Phone>5155551235</phone> <Address>Main St</Address> </Contact_information> <H1>Alley gator</H1> <H2>515-5551235</H2> <H2>Main St</H2>

  21. .NET資訊能源的原力 資訊與程式分離 <?xml version="1.0" encoding="big5"?> <企業資源管理 系統代號="xchen"> <組織管理 功能代號="source" 部門="*" 職等="*"> <組織作業 代號="s:console/ou.htm" 部門="*" 職等="*"/> </組織管理> <人員管理 功能代號="adsi" 部門="*" 職等="*"> <人員新增 代號="s:console/first.htm" 部門="*" 職等="*"/> <人員刪除 代號="s:console/second.htm" 部門="*" 職等="*"/> <人員修改 代號="s:console/third.htm" 部門="*" 職等="*"/> <人員列示 代號="s:console/query.htm" 部門="*" 職等="*"/> <資料備份 代號="s:console/backup.htm" 部門="*" 職等="*"/> </人員管理> <登出 功能代號="q" 部門="*" 職等="*"/> </企業資源管理>

  22. .NET資訊能源的原力 專業知識標準化 • 員工主檔 <?xml version="1.0" encoding="big5"?> <組織架構 日期="5/15/2000"> <研發部 部門="1"> <員工 代號="sino" 密碼="f\ab" 職等="1"> <姓名>天行者</姓名> </員工> </研發部> </組織架構>

  23. Valid XML(DTD) DTD（Document Type Definition）訂定XML文件中所需的結構、內容、語意等標準。 XML 文件中的文件本體結構，主要是依文件定義(DTD)而來的，每項資料的出現都有順序與意義。文件一旦引用DTD，就必須遵循DTD中的規定。 XML Document (Content) XML Parser (Processor) XML Application XML DTD (Rules)

  24. Document Type Declaration的組成 • Element type declarations <!ELEMENT First_Name (PCDATA)> • Attribute list declarations <!ELEMENT dessert ((ice_cream | Apple_Pie),scoops+)> • Entity declarations <!ENTITY % entity_name “entity” • Notations declarations <!NOTATION resume_format SYSTEM “resume_whiz notation”>

  25. Valid XML (Schema) • Schema的功能與DTD是一樣，但在使用上它是利用XML特性來定義XML使用的語法。 • Schema中有提供資料型態檢查的功能。 Defining Elements and Attributes <ElementType> <AttributeType> <element type> <attribute type> Content Model Model(open,closed) Content(textOnly,eltOnly,empty,mixed) Order(seq,one,many) minOccurs and maxOccurs Attributes Required default

  26. Data Types Datatypes namespace <Schema name="myschema" xmlns="urn:schemas-microsoft-com:xml-data" xmlns:dt="urn:schemas-microsoft-com:datatypes"> <!-- ... --> </Schema> Declaration 1. <ElementType name="pages" dt:type="int"/> 2. <ElementType name="pages"> <datatype dt:type= "int"/> </ElementType>

  27. .NET 資訊能源的應用 JScript 與 XML 執行架構 資訊中心(資料庫、XML檔案、Jscript 程式) 網路(HTTP) 讀取資訊 下載程式 XML Parser 瀏覽器 (Jscript 程式) DOM

  28. .NET 資訊能源的應用 JScript 與 XML 程式範例 Cascading Style Sheet <html> <style> #t {border:3 ridge red;color:green;width:100;height:25} </style> <script> function doit(){ xmldoc=new ActiveXObject("Microsoft.XMLDOM"); // Trun off Asynchronous downloading. xmldoc.async=false; xmldoc.load("sinoorg.xml"); t.innerText=xmldoc.documentElement.nodeName; } </script> <body> <div id="t" onclick="doit()">Click here</div> </body> </html> Jscript XML DHTML Object Model

  29. 認識 DOM • DOM 主要是一種 API的應用，可提供使用者藉由Script 語言來操控 DOM物件。 • 此物件可以用來存取、文件內容，換句話說DOM可以用來截取與操作 XML文件中的資料。

  30. Document Object Model結構 <?xml version="1.0"?> <itemlist> <!-- Result from a query --> <item id="1012"> <description> CD Player </description> <price>199.95</price> </item> </itemlist>

  31. DOM與 JScript對應 Var X=new ActiveXObject(“Microsoft.XMLDOM”)X.load(“sino.xml”); X.documentElement <?xml version=“1.0”?> <contacts> <contact> <name> <first>Faraz</first> <Last>Hoodbhoy</Last> </name> </contact> </contacts> X.documentElement.childNodes.item(0)

  32. XML 與 DOM Tree（取得 XML資訊） XML01.htm <script> xmldoc=new ActiveXObject("Microsoft.XMLDOM"); // Trun off Asynchronous downloading. xmldoc.async=false; xmldoc.load("sinoorg.xml"); document.write(xmldoc.documentElement.nodeName); document.write("#"+xmldoc.documentElement.nodeType+"<br>"); document.write(xmldoc.documentElement.attributes.item(0).nodeName); document.write(xmldoc.documentElement.attributes.item(0).nodeValue); document.write("#"+xmldoc.documentElement.attributes.item(0).nodeType); </script>

  33. XML與 DOM Tree（appendChild） XML03.HTM <script> xdoc1=new ActiveXObject("Microsoft.XMLDOM"); xdoc2=new ActiveXObject("Microsoft.XMLDOM"); // Trun off Asynchronous downloading. xdoc1.async=false; xdoc1.load("sinoorg.xml"); xdoc2.async=false; xdoc2.load("dns.xml"); xdoc1.documentElement.appendChild(xdoc2.documentElement); var cnode=xdoc1.documentElement.childNodes.item(0); for(;cnode;cnode=cnode.nextSibling){ document.write(cnode.nodeName+"#"+cnode.nodeType+"<br>"); } document.write(xdoc1.xml+"<br>"); </script>

  34. XML 資料表實作

  35. XML文件體裁：XSL XML文件除了可以用 Data Binding方式，將內容顯示外，還可藉由文件體裁的應用來顯示其內容。 目前能與XML配合使用的文件體裁有CSS與XSL ，以下就為各位介紹的內容有： • XML與XSL的結合 • 介紹 XML文件與XSL排版樣本，將XML文件透過XSL的排版設定顯示在瀏覽器中。 • XML與CSS的結合 • 介紹CSS排版樣本如何被XML文件套用，並將XML文件的內容顯示在瀏覽器中。

  36. XSL Transformation An XSL transformation results in the creation of a new XML tree. • Template-driven model 適用於regular 或repetitive資料. • Data-driven Model 適用於irregular或recursive資料.

  37. 可攜式裝置資訊站 XSLISAPI 2.1 Web Server XSL ISAPI Extension http://x.y.z/zoo.xml zoom.xml zoo.xsl 文字資訊

  38. XSL Transformation與Scripting Xsljs.htm <HTML> <XML id="source" src="data.xml"></XML> <XML id="style" src="xsl01.xsl"></XML> <SCRIPT event="onload" for="window"> showResult.innerHTML = source.transformNode(style.XMLDocument) </SCRIPT> <BODY> <DIV id="showResult"></DIV> </BODY> </HTML>

  39. 認識 HTML Component 程式設計者可以將JScript包裝起來同時應用在網頁上，這個包裝動作不只是把JScript儲存成獨立的檔案而已，它更能付予所連結的標籤更多應用能力。 這樣的系統開發方式，使不同的標籤可具有相同的應用能力(Behavior)，這也就是說新一代應用程式庫(HTC)，一樣具有物件重覆使用的功能。 新一代應用程式庫(HTC)，在執行上可像物件一樣具有自己的性質(Properties)及方法(Method)。HTC在執行上，是非常有效率，因它在前端瀏覽器系統中執行，並且不需要在前端作業系統註冊。

  40. HTC的應用 • DHTML Behavior • 增加標籤應用能力 • Element Behavior • 獨力運作標籤

  41. 內建DHTML Behaviors • Persistence 保持前端操作資訊 • Web Folder 透過Web服務管理後端伺服資料夾 • HTML + TIME 提供定時與同步服務 • VML 繪圖功能

  42. Persistence <HTML> <HEAD> <META content=snapshot name=save> <STYLE> .saveSnapshot { BEHAVIOR: url(#default#savesnapshot) } </STYLE> <SCRIPT class=saveSnapshot id=oPersistScript> var sPersistValue = ""; </SCRIPT> </HEAD> <BODY aLink=#000000 bgColor=#ffffff bgProperties=fixed leftMargin=0 link=#000000 topMargin=0 vLink=#808080> Enter some Text: <INPUT id=oInput><BR> Click to save: <INPUT onclick="sPersistValue=oInput.value" type=button value=Save><BR> Click to load: <INPUT onclick="oInput.value=sPersistValue" type=button value=Load> </BODY> </HTML>

  43. Web Folder <style> .httpFolder {behavior:url(#default#httpFolder);} </style> <script> function opfo(){ odav.navigateFrame("http://you/public","_self"); } </script> <body> <div id="odav" class="httpFolder"/> <input type="button"value="open" onclick="opfo();"> </body>

  44. HTML + TIME <HTML> <HEAD> <STYLE> .time { behavior: url(#default#time);} </STYLE> </HEAD> <BODY> <H1 CLASS="time" t:BEGIN="0" t:DUR="11" t:TIMEACTION="style" STYLE="Color:Red;">timeAction</H1> <P CLASS="time" t:BEGIN="2" t:DUR="5" t:TIMEACTION="display">This appears after 2 seconds.</P> <P CLASS="time" t:BEGIN="4" t:DUR="5" t:TIMEACTION="display">This appears after 4 seconds.</P> <P CLASS="time" t:BEGIN="6" t:DUR="5" t:TIMEACTION="display">This appears after 6 seconds.</P> <P>This is the last line.</P> </BODY> </HTML

More Related