IT-T62 Web Technology UNIT III UNIT-III Web Technologies: Anatomy of xml document - xml markup-working with elements and attributes - creating valid documents-xml objects. ActiveX controls: Introduction-Building a basic control - OLE and ActiveX- HTML and ActiveX-ActiveX Documents. WEB TECHNOLOGIES 3.1 ANATOMY OF XML DOCUMENT XML  XML stands for EXtensible Markup Language  XML is a markup language much like HTML  XML was designed to carry data, not to display data  XML tags are not predefined. You must define your own tags  XML is designed to be self-descriptive  XML is a W3C Recommendation XML is not a replacement for HTML.  XML and HTML were designed with different goals:  XML was designed to transport and store data, with focus on what data is  HTML was designed to display data, with focus on how data looks  HTML is about displaying information, while XML is about carrying information. Example XML document: An XML document is one that follows certain syntax rules (most of which we followed for XHTML) <?xml version="1.0"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The Difference between XML and HTML  XML is not a replacement for HTML. XML and HTML were designed with different goals: III Year/VI Sem 1
IT-T62 Web Technology UNIT III  XML was designed to transport and store data, with focus on what data is.  HTML was designed to display data, with focus on how data looks.  HTML is about displaying information, while XML is about carrying information. XML Syntax • An XML document consists of – Markup • Tags, which begin with < and end with > • References, which begin with & and end with ; – Character, e.g. &#x20; – Entity, e.g. &lt; » The entities lt, gt, amp, apos, and quot are recognized in every XML document. » Other XHTML entities, such as nbsp, are only recognized in other XML documents if they are defined in the DTD – Character data: everything not markup • Comments – Begin with <!-- – End --> • CDATA section – Special element the entire content of which is interpreted as character data, even if it appears to be markup – Begins with <![CDATA[ – Ends with ]]> (illegal except when ending CDATA) • < and & must be represented by references except – When beginning markup – Within comments III Year/VI Sem 2
IT-T62 Web Technology UNIT III – Within CDATA sections • Element tags and elements – Three types • Start, e.g. <message> • End, e.g. </message> • Empty element, e.g. <br /> – Start and end tags must properly nest – Corresponding pair of start and end element tags plus everything in between them defines an element – Character data may only appear within an element Characteristics of XML. XML Characteristics: 1. XML Does Not DO Anything 2. With XML You Invent Your Own Tags 3. XML is Not a Replacement for HTML 4. XML is a complement to HTML. 5. XML is a software- and hardware-independent tool for carrying information. 6. XML is a W3C Recommendation 7. XML is Everywhere 8. XML is used in many aspects of web development, often to simplify data storage and sharing 9. XML Separates Data from HTML 10. XML Simplifies Data Sharing 11. XML Simplifies Data Transport 12. XML Simplifies Platform Changes 13. XML Makes Your Data More Available 14. XML is Used to Create New Internet Languages 15. XML documents form a tree structure that starts at "the root" and branches to "the leaves". An Example XML Document XML documents use a self-describing and simple syntax: <?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>  The first line is the XML declaration. It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).  The next line describes the root element of the document (like saying: "this document is a note"):<note>  The next 4 lines describe 4 child elements of the root (to, from, heading, and body): III Year/VI Sem 3
IT-T62 Web Technology UNIT III <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body>  And finally the last line defines the end of the root element: </note> You can assume, from this example, that the XML document contains a note to Tove from Jani. XML Namespaces XML Namespaces provide a method to avoid element name conflicts. Name Conflicts In XML, element names are defined by the developer. This often results in a conflict when trying to mix XML documents from different XML applications. This XML carries HTML table information: <table> <tr> <td>Apples</td> <td>Bananas</td> </tr> </table> This XML carries information about a table (a piece of furniture): <table> <name>African Coffee Table</name> <width>80</width> <length>120</length> </table> If these XML fragments were added together, there would be a name conflict. Both contain a <table> element, but the elements have different content and meaning. An XML parser will not know how to handle these differences. Solving the Name Conflict Using a Prefix Name conflicts in XML can easily be avoided using a name prefix. This XML carries information about an HTML table, and a piece of furniture: <h:table> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table> <f:name>African Coffee Table</f:name> <f:width>80</f:width> III Year/VI Sem 4
IT-T62 Web Technology UNIT III <f:length>120</f:length> </f:table> In the example above, there will be no conflict because the two <table> elements have different names. XML Namespaces - The xmlns Attribute When using prefixes in XML, a so-called namespace for the prefix must be defined. The namespace is defined by the xmlns attribute in the start tag of an element. The namespace declaration has the following syntax. xmlns:prefix="URI". <root> <h:table xmlns:h="http://www.w3.org/TR/html4/"> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table xmlns:f="http://www.w3schools.com/furniture"> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> In the example above, the xmlns attribute in the <table> tag give the h: and f: prefixes a qualified namespace. When a namespace is defined for an element, all child elements with the same prefix are associated with the same namespace. Namespaces can be declared in the elements where they are used or in the XML root element: <root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="http://www.w3schools.com/furniture"> <h:table> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> III Year/VI Sem 5
IT-T62 Web Technology UNIT III Default Namespaces Default namespace for elements of a document is specified using a form of the xmlns attribute: • Another form of xmlns attribute known as a namespace declaration can be used to associate a namespace prefix with a namespace name: Example use of namespace prefix: • In a namespace-aware XML application, all element and attribute names are considered qualified names – A qualified name has an associated expanded name that consists of a namespace name and a local name – Ex: item is a qualified name with expanded name <null, item> – Ex: xhtml:a is a qualified name with expanded name <http://www.w3.org/1999/xhtml, a> 3.2 XML MARKUP  The syntax rules of XML are very simple and very strict. The rules are very easy to learn, and very easy to use.  Because of this, creating software that can read and manipulate XML is very easy to do. An example XML document XML documents use a self-describing and simple syntax. <?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> III Year/VI Sem 6 Namespace prefix Namespace declaration
IT-T62 Web Technology UNIT III <body>Don't forget me this weekend!</body> </note>  The first line in the document - the XML declaration - defines the XML version and the character encoding used in the document. In this case the document conforms to the 1.0 specification of XML and uses the ISO- 8859-1 (Latin-1/West European) character set.  The next line describes the root element of the document (like it was saying: "this document is a note"): <note> The next 4 lines describe 4 child elements of the root (to, from, heading, and body): <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> And finally the last line defines the end of the root element: </note> 3.3 WORKING WITH ELEMENTS AND ATTRIBUTES  All XML elements must have a closing tag  With XML, it is illegal to omit the closing tag.In HTML some elements do not have to have a closing tag. The following code is legal in HTML: <p>This is a paragraph <p>This is another paragraph  In XML all elements must have a closing tag, like this: <p>This is a paragraph</p> <p>This is another paragraph</p> XML tags are case sensitive  Unlike HTML, XML tags are case sensitive.  With XML, the tag <Letter> is different from the tag <letter>.  Opening and closing tags must therefore be written with the same case: <Message>This is incorrect</message> <message>This is correct</message> III Year/VI Sem 7
IT-T62 Web Technology UNIT III All XML elements must be properly nested  Improper nesting of tags makes no sense to XML.  In HTML some elements can be improperly nested within each other like this: <b><i>This text is bold and italic</b></i>  In XML all elements must be properly nested within each other like this: <b><i>This text is bold and italic</i></b> All XML documents must have a root element  All XML documents must contain a single tag pair to define a root element.  All other elements must be within this root element.  All elements can have sub elements (child elements). Sub elements must be correctly nested within their parent element: <root> <child> <subchild>.....</subchild> </child> </root> Attribute values must always be quoted  With XML, it is illegal to omit quotation marks around attribute values.  XML elements can have attributes in name/value pairs just like in HTML. In XML the attribute value must always be quoted. Study the two XML documents below. The first one is incorrect, the second is correct: <?xml version="1.0" encoding="ISO-8859-1"?> <note date=12/11/2002> <to>Tove</to> <from>Jani</from> </note> <?xml version="1.0" encoding="ISO-8859-1"?> <note date="12/11/2002"> <to>Tove</to> <from>Jani</from> </note>  The error in the first document is that the date attribute in the note element is not quoted. III Year/VI Sem 8
IT-T62 Web Technology UNIT III  This is correct: date="12/11/2002". This is incorrect: date=12/11/2002. With XML, white space is preserved  With XML, the white space in your document is not truncated.  This is unlike HTML. With HTML, a sentence like this: Hello my name is Tove, will be displayed like this: Hello my name is Tove, because HTML strips off the white space. Comments in XML The syntax for writing comments in XML is similar to that of HTML. <!-- This is a comment --> There is nothing special about XML  There is nothing special about XML. It is just plain text with the addition of some XML tags enclosed in angle brackets.  Software that can handle plain text can also handle XML. In a simple text editor, the XML tags will be visible and will not be handled specially.  In an XML-aware application however, the XML tags can be handled specially. The tags may or may not be visible, or have a functional meaning, depending on the nature of the application. 3.3.1 XML Attributes  XML elements can have attributes in the start tag, just like HTML.  Attributes are used to provide additional information about elements. XML elements can have attributes.  From HTML you will remember this: <IMG SRC="computer.gif">. The SRC attribute provides additional information about the IMG element.  In HTML (and in XML) attributes provide additional information about elements: <img src="computer.gif"> <a href="demo.asp"> Attributes often provide information that is not a part of the data. In the example below, the file type is irrelevant to the data, but important to the software that wants to manipulate the element: III Year/VI Sem 9
IT-T62 Web Technology UNIT III <file type="gif">computer.gif</file> Take a look at these examples: <person sex="female"> <firstname>Anna</firstname> <lastname>Smith</lastname> </person> <person> <sex>female</sex> <firstname>Anna</firstname> <lastname>Smith</lastname> </person> In the first example sex is an attribute. In the last, sex is a child element. Both examples provide the same information. There are no rules about when to use attributes, and when to use child elements. My experience is that attributes are handy in HTML, but in XML you should try to avoid them. Use child elements if the information feels like data. 3.4 CREATING VALID DOCUMENTS  XML with correct syntax is Well Formed XML.  XML validated against a DTD is Valid XML.  "Well Formed" XML documents  A "Well Formed" XML document has correct XML syntax.  A "Well Formed" XML document is a document that conforms to the XML syntax rules that were described in the previous chapters: <?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> A "Valid" XML document also conforms to a DTD. A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a Document Type Definition (DTD): <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE note SYSTEM "InternalNote.dtd"> III Year/VI Sem 10
IT-T62 Web Technology UNIT III <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> XML DTD DTD  The Document type Definition is used to define the basic building block of any XML document.  Using DTD we can specify the various element types, attributes and their relationship with one another.  Basically DTD is used to specify the set of rules for structuring data in any XML file. Various building blocks of XML are:  Elements.  Attribute.  CDATA  PCDATA Elements:  The basic entity is element. The elements are used for defining the tags .The elements typically consists of opening and closing tags. Mostly only one element is used to define a single tag. <!ELEMENT student(name,address,std,marks)> Attribute:  The attributes are generally used to specify the values of the element. These are specified within the double quotes. <flag type=”true”> CDATA:  CDATA stands for character data. This character data will be parsed by the parser.  The term CDATA is used about text data that should not be parsed by the XML parser.  Characters like "<" and "&" are illegal in XML elements.  "<" will generate an error because the parser interprets it as the start of a new element. III Year/VI Sem 11
IT-T62 Web Technology UNIT III  "&" will generate an error because the parser interprets it as the start of an character entity.  Some text, like JavaScript code, contains a lot of "<" or "&" characters. To avoid errors script code can be defined as CDATA. Everything inside a CDATA section is ignored by the parser. A CDATA section starts with "<![CDATA[" and ends with "]]>": <script> <![CDATA[ function matchwo(a,b) { if (a < b && a < 0) then { return 1; } else { return 0; } } ]]> </script> In the example above, everything inside the CDATA section is ignored by the parser. Notes on CDATA sections: A CDATA section cannot contain the string "]]>". Nested CDATA sections are not allowed. The "]]>" that marks the end of the CDATA section cannot contain spaces or line breaks. PCDATA:  It stands for Parsed Character Data.  Any Parsable character should not contain the markup characters.  XML parsers normally parse all the text in an XML document.  When an XML element is parsed, the text between the XML tags is also parsed: <message>This text is also parsed</message>  Parsed Character Data (PCDATA) is a term used about text data that will be parsed by the XML parser. < !ELEMENT name(#PCDATA)> Types of DTD: 1. internal DTD 2. External DTD Internal DTD:  Internal DTD file is within the DTD elements in XML file: III Year/VI Sem 12
IT-T62 Web Technology UNIT III <?xml version=”1.0” encoding=”UTF=8”?> <!DOCTYPE student[ <!ElEMENT student(name,address,place)> <!ELEMENT name(#PCDATA)> <!ELEMENT address(#PCDATA)> <!ELEMENT place(#PCDATA)> ]> <student> <name>ARUN</name> <address>KK NAGAR</address> <place>Villupuram</place> </student> External DTD:  External DTD file is created and its name must be specified in the corresponding XML file. DTD File: (student.dtd) <!ElEMENT student(name,address,place)> <!ELEMENT name(#PCDATA)> <!ELEMENT address(#PCDATA)> <!ELEMENT place(#PCDATA)> XML File:( externaldtd.xml) <?xml version=”1.0” encoding=”UTF=8”?> <!DOCTYPE student SYSTEM “student.dtd”> <student> <name>ARUN</name> <address>KK NAGAR</address> <place>Villupuram</place> </student> III Year/VI Sem 13
IT-T62 Web Technology UNIT III Merits of DTD:  It is used to define the structural components of XML documents.  These are relatively simple and compact.  DTD can be defined inline and external in the XML documents. Demerits of DTD:  DTD are very basic and hence cannot be much specified for complex documents.  DTD are not aware of namespace concept.  The DTD cannot define the type of data contained within the XML documents. Hence using DTD we cannot specify whether the element is numeric or string data types.  Some XML processor which do not understand DTD elements. ACTIVEX CONTROLS 3.5 INTRODUCTION 3.5.1 Dynamic Web Concept  HTTP is a protocol that relies on TCP/IP. Understanding how this relationship affects your Web documents is very important.  Dynamic content can be generated in a number of ways including through the use of CGI applications.  The Common Gateway Interface (CGI) is a standard protocol for interfacing external application software with an information server, commonly a web server. III Year/VI Sem 14
IT-T62 Web Technology UNIT III  This allows the server to pass requests from a client web browser to the external application.  The web server can then return the output from the application to the web browser.  ActiveX and Java are the beginning of a new era in dynamic content over the Web.  Dynamic documents in the Internet market space are clearly one of those key technological shifts.  More specifically, ActiveX enables software developers to easily include dynamic, animated, engaging content in Web pages without significant programming.  Two basic problems plagued the static content model prior to the advent of Sun Microsystems' Java and Microsoft's ActiveX, which are as follows:  The computing power of client machine executing the Web browser is woefully underused in the rendering of the content.  The Web browser (or the user) had to know about and have available executable software capable of rendering downloaded content.  In the static content model, the Web browser, the content, and the content viewer are all separate objects.  In the dynamic model, the content knows how to execute itself. The Web browser understands executable content in a generic sense.  Since the downloaded object knows how to render itself, the browser has no need to worry about helper applications and the like.  Since the browser knows how to deal with executable objects such as Java applets and ActiveX Controls, the computing power available on the client side of the client/server equation is exercised more strenuously. III Year/VI Sem 15
IT-T62 Web Technology UNIT III 3.5.2 Overview of ActiveX  ActiveX is not a single technological thing.  If you've browsed Microsoft's Web site, you've probably gathered that ActiveX is a centerpiece of Microsoft's overall Internet strategy.  ActiveX helps application developers and Web content authors build dynamic Internet tools, content, and sites.  That's a pretty tall order. To achieve this design goal, Microsoft needed to bring together a number of different components.  Add Internet functionality to your applications with these easy-to-use ActiveX Controls.  High performance server side application for the Web is made possible with this framework. 3.5.3 ActiveX Controls for the Internet  As the content you consume from the Internet becomes more and more dynamic, the Web browser will be managing more and more of the computing tasks required to render that content.  Sun Microsystems's Java takes early honors in the race for the development standard for executable content.  Netscape helped to push Java into prominence by releasing Navigator 2.0 with support for Java applets.  Java provides Web developers with a highly sophisticated tool set for interacting with the user and the client machine.  Microsoft, not to be outdone, announced support for Java in MSIE 3.0 and a new alternative called ActiveX Controls.  ActiveX Controls are based upon the OLE 2.0 standard.  ActiveX Controls are to Web pages what the VBX and OCX are to MS- Windows GUI development.  ActiveX Controls have the following advantages over Java applets:  They are built from tools you already know.  They are easy to integrate with other applications.  They are easy to employ in containers that are not Web pages  ActiveX Controls are not constructed using Microsoft Foundation Classes. Instead, Microsoft has made the ActiveX Template Library (ATL) available to help developers build ActiveX controls.  Although stand-alone applications can be constructed using Java, Java does not really offer the same potential interaction with other existing applications yet.  Java applets are intended to execute in a Web browser and not as controls in other applications.  The Internet ActiveX Control Pack demonstrates the value of ActiveX in other development environments like Visual C++, Delphi, Visual Basic, and MS- Access.  There are a couple of problems with the use of ActiveX Controls: III Year/VI Sem 16
IT-T62 Web Technology UNIT III  They are not currently supported in Netscape.  They are not currently supported on UNIX platforms. 3.5.4 Internet ActiveX Control Pack  The Internet ActiveX Control Pack (ICP) is not really an ActiveX control. ICP is, instead, an application of ActiveX.  With ICP, it's easy to integrate ActiveX controls into your Visual Basic programs.  The ICP contains controls for most of the major Internet services you'll want to integrate into your own applications.  Some of the controls are:  The TCP Control  The UDP Control  The FTP Client Control  The HTTP Client Control  The HTML Client Control  The SMTP Control  The POP Client Control  The NNTP Control 3.5.5 ActiveX Server Framework  The ActiveX Server Framework provides an alternative to the Common Gateway Interface method of executing applications on a Web server and interacting with the Web browser dynamically.  There are two major types of applications that can be developed using the ActiveX Server Framework:  ISAPI applications  ISAPI filters  ISAPI Applications  The Internet Server Applications Programming Interface (ISAPI) specification provides an alternative to CGI programs with potentially higher performance type capabilities for the Microsoft Internet Information Server (IIS).  ISAPI allows Web developers to build applications that execute in the same process space as the Web server  CGI and ISAPI have different approaches to use of process space.  Applications using ISAPI are faster simply because the operating system does not have to duplicate the environment and spawn a new process as is required by CGI.  ISAPI applications are actually Dynamic Link Libraries (DLLs).  Operating in the server's process space carries higher risk while providing somewhat higher performance.  Since the ISAPI application is loaded in the same process as the HTTP server, an access violation by the ISAPI application may crash the HTTP server. III Year/VI Sem 17
IT-T62 Web Technology UNIT III ISAPI Filters  The Internet Survey Application Programming Interface (ISAPI) also provides a mechanism for modifying the behavior of the server in specific ways.  You'll employ ISAPI filters in cases where the default behavior of the server is inappropriate for the application.  ISAPI filters can modify the behavior of the following server functions:  Authentication  Compression  Encryption  Logging  Traffic Analysis 3.6 BUILDING A BASIC OLE AND ACTIVEX CONTROLS  OCX controls are the standard solution for Windows component software.  They are implemented using OLE 2.0 technology and are designed for use on the desktop environment.  Most OCX controls today are built using the Control Development Kit, which is supplied as an integrated part of Microsoft Visual C++ version 4.x.  Controls developed with Visual C++ are built using the standard OLE 2.0 interfaces, some of which were mandatory.  This means they contain a lot of unnecessary code.  They are also dependent on the Microsoft Foundation Classes (MFC) libraries which are several megabytes in size.  These controls are therefore relatively big in size which may limit their utility in the slow Internet environment.  Also, in order to use these controls on the Internet, the user must first have the MFC libraries on their machine. III Year/VI Sem 18
IT-T62 Web Technology UNIT III  A one time download of these libraries for all controls to share may not be too much of a penalty, but MFC is being revised and released approximately every three months.  This means users of these controls must download these new libraries every three months or their controls may not work.  Management of data and properties is another potential problem. OCX controls on the desktop operate synchronously.  Function calls made to the OLE libraries or control containers do not return until they have completed.  While this is not a problem on the desktop, where data and properties are stored locally in files and can be retrieved quickly.  But it causes problems in a slow environment like the Internet, where large amounts of data have to be retrieved from a remote site and loaded into the control.  A 24 bit bitmap file for instance, can be several megabytes in size and take many minutes to download. ActiveX Control Pad  The ActiveX Control Pad provides an integration environment for combining three major elements of the basic World Wide Web dynamic document interface.  You'll combine your basic HTML, ActiveX controls, as well as client-side scripts into a single development tool with the ActiveX Control Pad.  Managing your ActiveX controls and scripts is visual and easy when you use the ActiveX Control Pad.  ActiveX objects can be inserted into your HTML documents using the ActiveX Control Pad.  HTML layouts can be inserted into your HTML documents using the ActiveX Control Pad, as well. Select and add controls using the control toolbox and properties.  Adding scripts to your HTML Web pages is simple using the ActiveX Control Pad. Use the List View and the Code View to manage VB scripts in your Web pages. Using the ActiveX Control Pad  Inserting ActiveX controls and adding client-side scripting like VBScript is straightforward.  You'll recognize many of the elements of the user interface from other applications you use, like Lotus 1-2-3 or Microsoft Word are present here too.  Most of the common items are there including, the File toolbar for saving, creating, and opening new HTML files.  However, there are also a couple of elements that you probably haven't seen before. III Year/VI Sem 19
IT-T62 Web Technology UNIT III  The first of these two new items is found on the toolbar that uses a scroll as its icon. Pressing this button brings up the script wizard.  The second item is in the document window.  You'll be inserting objects and scripts into the HTML documents in this window.  The scroll icon indicates the start of a script. Pressing the scroll button in the margin bar opens the Script Wizard, and loads the appropriate script.  ActiveX objects are indicated in the margin bar by a small cube icon.  This iconography indicates the start of an <OBJECT> declaration in the HTML.  Pressing the ActiveX object button in the gray margin bar brings up a window containing the object, and a window containing its property sheet.  The Control Pad uses a special icon for insertions of HTML layouts.  HTML layouts are indicated in the margin bar by a small icon containing the letter A, a circle, and a square.  Pressing this button brings up the HTML Layout editor and its associated tool bar. 3.7 HTML AND ACTIVEX  The ActiveX Control Pad is not an HTML editing environment.  However, ActiveX includes a control called the HTML Layout control, which is used for building forms, laying out toolbars, and for making reusable elements in your Web pages.  The ActiveX Control Pad provides a Visual Basic like interface for creating HTML Layouts.  To create an HTML Layout, follow these steps:  Start the ActiveX Control Pad. III Year/VI Sem 20
IT-T62 Web Technology UNIT III  Select File, New HTML Layout from the menu bar. This brings up two windows-the layout window and the Toolbox window. LAYOUT & TOOLBOX WINDOW Create an HTML layout  Try adding a command button to the layout. From the toolbox, select the command button tool.  Then place your cursor over the Layout window and it changes to cross hairs. Press the left mouse button, and draw in the control.  To edit the properties of this control, select View, Properties.  Select the Caption property, and place your cursor in the Apply text box. Now type a suitable caption like Press Me.  To change the id property, open the property sheet again and select the ID property, place your cursor in the Apply text box. Type a name like cmdPressMe. III Year/VI Sem 21
IT-T62 Web Technology UNIT III  Add a text box to your layout. Select the text control tool from the toolbox, and then place your cursor over the Layout window.  Select View, Properties, and change the ID and Text properties. Select the Text property, and add some initialization text.  Save your layout to a file. The file extension for an HTML Layout is .alx. Using the ActiveX Control Pad Script Wizard  The ActiveX Control Pad provides a graphical user interface for adding VBScript to HTML pages and HTML Layouts.  To add VBScripts using the Script Wizard, take the following steps:  Start the ActiveX Control Pad, if its not already running.  Open the HTML Layout you created previously.  Start the Script Wizard. You can do this in two ways: Press the Script Wizard toolbar button (the one with the scroll icon), or select Tools, Script Wizard from the menu bar. III Year/VI Sem 22
IT-T62 Web Technology UNIT III  Add a simple script using the List View.  Adding a script element in the List View is a three step process: Select an event to respond to, select an action to take, and (if necessary) provide a value or parameter.  From the Event list, expand the txtMessage item and select the KeyDown event.  Next, expand the txtMessage item on the Action list. Select the ForeColor property and double-click.  The color selection window comes forward.  Go ahead and select the color that you want to change the txtMessage box to when a key is pressed and press OK.  You'll see both the object and the action listed in the script List window.  Change the Script Wizard to the Code View by selecting the Code View radio button. From the Event list, expand the cmdPressMe object, and select the Click event. Script Window in Code View III Year/VI Sem 23
IT-T62 Web Technology UNIT III  Enter the script.  Finally, collapse all of the items in the Action list. You'll notice that there is now a Procedures object. Expand the Procedures object.  You should see an entry for the two events for which you've now added scripts. Navigating the Event Window  When you add an ActiveX control to your HTML document, the Script Wizard adds an object entry to the Event window.  Each object may have any number of different events associated with actions on the object.  To add an action for any of these events, expand the object entry in the event window, and select the desired event. III Year/VI Sem 24
IT-T62 Web Technology UNIT III  The Window object triggers two events, the OnLoad and OnUnload.  The Calendar control also fires several events. Object’s Events Window Navigating the Action Window  Once you've selected an object and an event, the next step is to select an action to be executed.  The Action window provides an interface for selecting and entering the following actions:  Invoking methods exposed by ActiveX objects  Setting properties of ActiveX objects  Entering and setting global variables  Invoking procedures  Invoking methods exposed by ActiveX objects  Many ActiveX objects expose methods.  For instance, if you placed a Calendar control in a Web page and wanted to invoke one of the methods supported by Calendar in response to some event, you can specify the action. Setting the Properties of ActiveX Objects  ActiveX objects also contain properties. In the Action window, properties are indicated by a small property sheet icon.  The process of setting a property for an ActiveX object in the Script Wizard varies depending on the nature of the property itself.  However, the process always begins when you double click the property you want to change. Entering and Setting Global Variables III Year/VI Sem 25
IT-T62 Web Technology UNIT III  Many applications require global variables for storing information. Of course, global variables must first be added to the Web page before you can set them to a value.  To create a global variable, place the cursor over the Action window and press the right mouse button.  Once you've entered a name for your global variable (eg: gAGlobalVariable), expand the Global Variables object in the Action window and you'll see the global variable you just entered.  Now your global variable can be set and checked just like the property of an ActiveX control.  If you want to set gAGlobalVariable to ten when the page is loaded, select the Window's OnLoad event, double-click gAGlobalVariable, and enter 10 into the text box. Editing Scripts in the List View  The List View displays each of the statements from the script for the event you're handling.  The List View provides several command buttons for editing the script:  Insert action  Delete action  Move up action  Move down action  Modify value III Year/VI Sem 26
IT-T62 Web Technology UNIT III Editing Scripts in the Code View  The List View is good for making simple scripts quickly and easily.  However, many times the application requires more sophisticated programming.  The Code View provides developers with a rudimentary editor for including VBScripts that you hand code.  To take a look at the Code View, select the Code View radio button. Next, press the right mouse and select New Procedure from the menu.  Typically, you change the name of the procedure to a useful name, and then code the logic for the procedure. A CODED PROCEDURE  If you switch back to the List View, or if you open a procedure developed in the Code View in the List View, the ActiveX Control Pad only shows a message as shown in figure.  When you close the Script Wizard, the ActiveX Control Pad adds the VBScript to your HTML document. III Year/VI Sem 27
IT-T62 Web Technology UNIT III  Depending on the procedures you've created, you may have several VBScript tag pairs within the HTML document. Inserting an HTML Layout  An HTML Layout can be inserted in a Web page quite easily.  HTML Layouts are excellent for elements that are repeated in numerous Web pages on your Web site.  You can simply build the HTML Layout once, and then include it in any appropriate Web page.  To include an HTML Layout, take the following steps:  Start the ActiveX Control Pad if its not already running.  Start a new HTML document by adding an H1 heading with text like My HTML Layout. Also, add a <BR> tag to make a break between the heading and the HTML layout.  Insert the HTML layout that you created in the previous section. To do this select Edit, Insert HTML Layout from the main menu.  Then select the HTML layout you just created and press Open.  The gray margin bar now shows an HTML Layout button. Pressing this button launches the Layout editor as described previously.  Save your HTML page to a file.  Now that you've completed the HTML document, you can test your work using Microsoft Internet Explorer 3.0.  These next steps take you through testing out your HTML document.  Start Microsoft Internet Explorer 3.0.  Open your HTML document by choosing File, Open, or by typing the fully qualified path to the document. Inserting an Object III Year/VI Sem 28
IT-T62 Web Technology UNIT III  An HTML layout is an object, so inserting additional objects in a Web page is quite easy.  However, the ActiveX Control Pad makes inserting any type of object easy.  To include an HTML layout, follow these steps:  Start the ActiveX Control Pad if its not already running.  Select File, New HTML, and start a new HTML file.  Add an H1 heading with some text like My Calendar. Also, add a <BR> tag to make a break between the heading and the HTML Layout.  Add an ActiveX object.  Select Edit, Insert ActiveX Control from the menu bar. Select the Calendar control from the list. Then save your HTML page to a file. Now that you've completed the HTML document, you can test your work using Microsoft Internet Explorer 3.0. The next steps take you through testing out your HTML document:  Start Microsoft Internet Explorer 3.0.  Open your HTML document by choosing File, Open, or by typing the fully qualified path to the document. 3.8 ACTIVEX DOCUMENTS  An existing application that doesn't need to be embedded in a Web page can be converted to an ActiveX document.  ActiveX documents are based upon a more general abstraction called DocObjects. The DocObjects technology is a set of extensions to OLE documents, the compound document technology of OLE.  As with OLE documents, the DocObjects standard requires a container to provide the display space for a DocObject.  This technology allows the browser to present documents from Office and Office Compatible applications.  Such functionality might allow any kind of document to be displayed within the Web browser.  Documents that conform to the ActiveX standard can be opened within other ActiveX document containers including the following:  Microsoft Internet Explorer 3.0  Microsoft Office Binder  Forthcoming new Windows shell  Embedded objects do not, however, control the page on which they appear. These types of objects are usually quite small and hold very little persistent data.  ActiveX documents, on the other hand, provide a fully functional document space. III Year/VI Sem 29
IT-T62 Web Technology UNIT III  ActiveX documents also control the page in which they appear (called a DocObject container). III Year/VI Sem 30

Web Technology XML Attributes and elementsUnit 3.doc

  • 1.
    IT-T62 Web TechnologyUNIT III UNIT-III Web Technologies: Anatomy of xml document - xml markup-working with elements and attributes - creating valid documents-xml objects. ActiveX controls: Introduction-Building a basic control - OLE and ActiveX- HTML and ActiveX-ActiveX Documents. WEB TECHNOLOGIES 3.1 ANATOMY OF XML DOCUMENT XML  XML stands for EXtensible Markup Language  XML is a markup language much like HTML  XML was designed to carry data, not to display data  XML tags are not predefined. You must define your own tags  XML is designed to be self-descriptive  XML is a W3C Recommendation XML is not a replacement for HTML.  XML and HTML were designed with different goals:  XML was designed to transport and store data, with focus on what data is  HTML was designed to display data, with focus on how data looks  HTML is about displaying information, while XML is about carrying information. Example XML document: An XML document is one that follows certain syntax rules (most of which we followed for XHTML) <?xml version="1.0"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The Difference between XML and HTML  XML is not a replacement for HTML. XML and HTML were designed with different goals: III Year/VI Sem 1
  • 2.
    IT-T62 Web TechnologyUNIT III  XML was designed to transport and store data, with focus on what data is.  HTML was designed to display data, with focus on how data looks.  HTML is about displaying information, while XML is about carrying information. XML Syntax • An XML document consists of – Markup • Tags, which begin with < and end with > • References, which begin with & and end with ; – Character, e.g. &#x20; – Entity, e.g. &lt; » The entities lt, gt, amp, apos, and quot are recognized in every XML document. » Other XHTML entities, such as nbsp, are only recognized in other XML documents if they are defined in the DTD – Character data: everything not markup • Comments – Begin with <!-- – End --> • CDATA section – Special element the entire content of which is interpreted as character data, even if it appears to be markup – Begins with <![CDATA[ – Ends with ]]> (illegal except when ending CDATA) • < and & must be represented by references except – When beginning markup – Within comments III Year/VI Sem 2
  • 3.
    IT-T62 Web TechnologyUNIT III – Within CDATA sections • Element tags and elements – Three types • Start, e.g. <message> • End, e.g. </message> • Empty element, e.g. <br /> – Start and end tags must properly nest – Corresponding pair of start and end element tags plus everything in between them defines an element – Character data may only appear within an element Characteristics of XML. XML Characteristics: 1. XML Does Not DO Anything 2. With XML You Invent Your Own Tags 3. XML is Not a Replacement for HTML 4. XML is a complement to HTML. 5. XML is a software- and hardware-independent tool for carrying information. 6. XML is a W3C Recommendation 7. XML is Everywhere 8. XML is used in many aspects of web development, often to simplify data storage and sharing 9. XML Separates Data from HTML 10. XML Simplifies Data Sharing 11. XML Simplifies Data Transport 12. XML Simplifies Platform Changes 13. XML Makes Your Data More Available 14. XML is Used to Create New Internet Languages 15. XML documents form a tree structure that starts at "the root" and branches to "the leaves". An Example XML Document XML documents use a self-describing and simple syntax: <?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>  The first line is the XML declaration. It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).  The next line describes the root element of the document (like saying: "this document is a note"):<note>  The next 4 lines describe 4 child elements of the root (to, from, heading, and body): III Year/VI Sem 3
  • 4.
    IT-T62 Web TechnologyUNIT III <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body>  And finally the last line defines the end of the root element: </note> You can assume, from this example, that the XML document contains a note to Tove from Jani. XML Namespaces XML Namespaces provide a method to avoid element name conflicts. Name Conflicts In XML, element names are defined by the developer. This often results in a conflict when trying to mix XML documents from different XML applications. This XML carries HTML table information: <table> <tr> <td>Apples</td> <td>Bananas</td> </tr> </table> This XML carries information about a table (a piece of furniture): <table> <name>African Coffee Table</name> <width>80</width> <length>120</length> </table> If these XML fragments were added together, there would be a name conflict. Both contain a <table> element, but the elements have different content and meaning. An XML parser will not know how to handle these differences. Solving the Name Conflict Using a Prefix Name conflicts in XML can easily be avoided using a name prefix. This XML carries information about an HTML table, and a piece of furniture: <h:table> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table> <f:name>African Coffee Table</f:name> <f:width>80</f:width> III Year/VI Sem 4
  • 5.
    IT-T62 Web TechnologyUNIT III <f:length>120</f:length> </f:table> In the example above, there will be no conflict because the two <table> elements have different names. XML Namespaces - The xmlns Attribute When using prefixes in XML, a so-called namespace for the prefix must be defined. The namespace is defined by the xmlns attribute in the start tag of an element. The namespace declaration has the following syntax. xmlns:prefix="URI". <root> <h:table xmlns:h="http://www.w3.org/TR/html4/"> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table xmlns:f="http://www.w3schools.com/furniture"> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> In the example above, the xmlns attribute in the <table> tag give the h: and f: prefixes a qualified namespace. When a namespace is defined for an element, all child elements with the same prefix are associated with the same namespace. Namespaces can be declared in the elements where they are used or in the XML root element: <root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="http://www.w3schools.com/furniture"> <h:table> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> III Year/VI Sem 5
  • 6.
    IT-T62 Web TechnologyUNIT III Default Namespaces Default namespace for elements of a document is specified using a form of the xmlns attribute: • Another form of xmlns attribute known as a namespace declaration can be used to associate a namespace prefix with a namespace name: Example use of namespace prefix: • In a namespace-aware XML application, all element and attribute names are considered qualified names – A qualified name has an associated expanded name that consists of a namespace name and a local name – Ex: item is a qualified name with expanded name <null, item> – Ex: xhtml:a is a qualified name with expanded name <http://www.w3.org/1999/xhtml, a> 3.2 XML MARKUP  The syntax rules of XML are very simple and very strict. The rules are very easy to learn, and very easy to use.  Because of this, creating software that can read and manipulate XML is very easy to do. An example XML document XML documents use a self-describing and simple syntax. <?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> III Year/VI Sem 6 Namespace prefix Namespace declaration
  • 7.
    IT-T62 Web TechnologyUNIT III <body>Don't forget me this weekend!</body> </note>  The first line in the document - the XML declaration - defines the XML version and the character encoding used in the document. In this case the document conforms to the 1.0 specification of XML and uses the ISO- 8859-1 (Latin-1/West European) character set.  The next line describes the root element of the document (like it was saying: "this document is a note"): <note> The next 4 lines describe 4 child elements of the root (to, from, heading, and body): <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> And finally the last line defines the end of the root element: </note> 3.3 WORKING WITH ELEMENTS AND ATTRIBUTES  All XML elements must have a closing tag  With XML, it is illegal to omit the closing tag.In HTML some elements do not have to have a closing tag. The following code is legal in HTML: <p>This is a paragraph <p>This is another paragraph  In XML all elements must have a closing tag, like this: <p>This is a paragraph</p> <p>This is another paragraph</p> XML tags are case sensitive  Unlike HTML, XML tags are case sensitive.  With XML, the tag <Letter> is different from the tag <letter>.  Opening and closing tags must therefore be written with the same case: <Message>This is incorrect</message> <message>This is correct</message> III Year/VI Sem 7
  • 8.
    IT-T62 Web TechnologyUNIT III All XML elements must be properly nested  Improper nesting of tags makes no sense to XML.  In HTML some elements can be improperly nested within each other like this: <b><i>This text is bold and italic</b></i>  In XML all elements must be properly nested within each other like this: <b><i>This text is bold and italic</i></b> All XML documents must have a root element  All XML documents must contain a single tag pair to define a root element.  All other elements must be within this root element.  All elements can have sub elements (child elements). Sub elements must be correctly nested within their parent element: <root> <child> <subchild>.....</subchild> </child> </root> Attribute values must always be quoted  With XML, it is illegal to omit quotation marks around attribute values.  XML elements can have attributes in name/value pairs just like in HTML. In XML the attribute value must always be quoted. Study the two XML documents below. The first one is incorrect, the second is correct: <?xml version="1.0" encoding="ISO-8859-1"?> <note date=12/11/2002> <to>Tove</to> <from>Jani</from> </note> <?xml version="1.0" encoding="ISO-8859-1"?> <note date="12/11/2002"> <to>Tove</to> <from>Jani</from> </note>  The error in the first document is that the date attribute in the note element is not quoted. III Year/VI Sem 8
  • 9.
    IT-T62 Web TechnologyUNIT III  This is correct: date="12/11/2002". This is incorrect: date=12/11/2002. With XML, white space is preserved  With XML, the white space in your document is not truncated.  This is unlike HTML. With HTML, a sentence like this: Hello my name is Tove, will be displayed like this: Hello my name is Tove, because HTML strips off the white space. Comments in XML The syntax for writing comments in XML is similar to that of HTML. <!-- This is a comment --> There is nothing special about XML  There is nothing special about XML. It is just plain text with the addition of some XML tags enclosed in angle brackets.  Software that can handle plain text can also handle XML. In a simple text editor, the XML tags will be visible and will not be handled specially.  In an XML-aware application however, the XML tags can be handled specially. The tags may or may not be visible, or have a functional meaning, depending on the nature of the application. 3.3.1 XML Attributes  XML elements can have attributes in the start tag, just like HTML.  Attributes are used to provide additional information about elements. XML elements can have attributes.  From HTML you will remember this: <IMG SRC="computer.gif">. The SRC attribute provides additional information about the IMG element.  In HTML (and in XML) attributes provide additional information about elements: <img src="computer.gif"> <a href="demo.asp"> Attributes often provide information that is not a part of the data. In the example below, the file type is irrelevant to the data, but important to the software that wants to manipulate the element: III Year/VI Sem 9
  • 10.
    IT-T62 Web TechnologyUNIT III <file type="gif">computer.gif</file> Take a look at these examples: <person sex="female"> <firstname>Anna</firstname> <lastname>Smith</lastname> </person> <person> <sex>female</sex> <firstname>Anna</firstname> <lastname>Smith</lastname> </person> In the first example sex is an attribute. In the last, sex is a child element. Both examples provide the same information. There are no rules about when to use attributes, and when to use child elements. My experience is that attributes are handy in HTML, but in XML you should try to avoid them. Use child elements if the information feels like data. 3.4 CREATING VALID DOCUMENTS  XML with correct syntax is Well Formed XML.  XML validated against a DTD is Valid XML.  "Well Formed" XML documents  A "Well Formed" XML document has correct XML syntax.  A "Well Formed" XML document is a document that conforms to the XML syntax rules that were described in the previous chapters: <?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> A "Valid" XML document also conforms to a DTD. A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a Document Type Definition (DTD): <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE note SYSTEM "InternalNote.dtd"> III Year/VI Sem 10
  • 11.
    IT-T62 Web TechnologyUNIT III <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> XML DTD DTD  The Document type Definition is used to define the basic building block of any XML document.  Using DTD we can specify the various element types, attributes and their relationship with one another.  Basically DTD is used to specify the set of rules for structuring data in any XML file. Various building blocks of XML are:  Elements.  Attribute.  CDATA  PCDATA Elements:  The basic entity is element. The elements are used for defining the tags .The elements typically consists of opening and closing tags. Mostly only one element is used to define a single tag. <!ELEMENT student(name,address,std,marks)> Attribute:  The attributes are generally used to specify the values of the element. These are specified within the double quotes. <flag type=”true”> CDATA:  CDATA stands for character data. This character data will be parsed by the parser.  The term CDATA is used about text data that should not be parsed by the XML parser.  Characters like "<" and "&" are illegal in XML elements.  "<" will generate an error because the parser interprets it as the start of a new element. III Year/VI Sem 11
  • 12.
    IT-T62 Web TechnologyUNIT III  "&" will generate an error because the parser interprets it as the start of an character entity.  Some text, like JavaScript code, contains a lot of "<" or "&" characters. To avoid errors script code can be defined as CDATA. Everything inside a CDATA section is ignored by the parser. A CDATA section starts with "<![CDATA[" and ends with "]]>": <script> <![CDATA[ function matchwo(a,b) { if (a < b && a < 0) then { return 1; } else { return 0; } } ]]> </script> In the example above, everything inside the CDATA section is ignored by the parser. Notes on CDATA sections: A CDATA section cannot contain the string "]]>". Nested CDATA sections are not allowed. The "]]>" that marks the end of the CDATA section cannot contain spaces or line breaks. PCDATA:  It stands for Parsed Character Data.  Any Parsable character should not contain the markup characters.  XML parsers normally parse all the text in an XML document.  When an XML element is parsed, the text between the XML tags is also parsed: <message>This text is also parsed</message>  Parsed Character Data (PCDATA) is a term used about text data that will be parsed by the XML parser. < !ELEMENT name(#PCDATA)> Types of DTD: 1. internal DTD 2. External DTD Internal DTD:  Internal DTD file is within the DTD elements in XML file: III Year/VI Sem 12
  • 13.
    IT-T62 Web TechnologyUNIT III <?xml version=”1.0” encoding=”UTF=8”?> <!DOCTYPE student[ <!ElEMENT student(name,address,place)> <!ELEMENT name(#PCDATA)> <!ELEMENT address(#PCDATA)> <!ELEMENT place(#PCDATA)> ]> <student> <name>ARUN</name> <address>KK NAGAR</address> <place>Villupuram</place> </student> External DTD:  External DTD file is created and its name must be specified in the corresponding XML file. DTD File: (student.dtd) <!ElEMENT student(name,address,place)> <!ELEMENT name(#PCDATA)> <!ELEMENT address(#PCDATA)> <!ELEMENT place(#PCDATA)> XML File:( externaldtd.xml) <?xml version=”1.0” encoding=”UTF=8”?> <!DOCTYPE student SYSTEM “student.dtd”> <student> <name>ARUN</name> <address>KK NAGAR</address> <place>Villupuram</place> </student> III Year/VI Sem 13
  • 14.
    IT-T62 Web TechnologyUNIT III Merits of DTD:  It is used to define the structural components of XML documents.  These are relatively simple and compact.  DTD can be defined inline and external in the XML documents. Demerits of DTD:  DTD are very basic and hence cannot be much specified for complex documents.  DTD are not aware of namespace concept.  The DTD cannot define the type of data contained within the XML documents. Hence using DTD we cannot specify whether the element is numeric or string data types.  Some XML processor which do not understand DTD elements. ACTIVEX CONTROLS 3.5 INTRODUCTION 3.5.1 Dynamic Web Concept  HTTP is a protocol that relies on TCP/IP. Understanding how this relationship affects your Web documents is very important.  Dynamic content can be generated in a number of ways including through the use of CGI applications.  The Common Gateway Interface (CGI) is a standard protocol for interfacing external application software with an information server, commonly a web server. III Year/VI Sem 14
  • 15.
    IT-T62 Web TechnologyUNIT III  This allows the server to pass requests from a client web browser to the external application.  The web server can then return the output from the application to the web browser.  ActiveX and Java are the beginning of a new era in dynamic content over the Web.  Dynamic documents in the Internet market space are clearly one of those key technological shifts.  More specifically, ActiveX enables software developers to easily include dynamic, animated, engaging content in Web pages without significant programming.  Two basic problems plagued the static content model prior to the advent of Sun Microsystems' Java and Microsoft's ActiveX, which are as follows:  The computing power of client machine executing the Web browser is woefully underused in the rendering of the content.  The Web browser (or the user) had to know about and have available executable software capable of rendering downloaded content.  In the static content model, the Web browser, the content, and the content viewer are all separate objects.  In the dynamic model, the content knows how to execute itself. The Web browser understands executable content in a generic sense.  Since the downloaded object knows how to render itself, the browser has no need to worry about helper applications and the like.  Since the browser knows how to deal with executable objects such as Java applets and ActiveX Controls, the computing power available on the client side of the client/server equation is exercised more strenuously. III Year/VI Sem 15
  • 16.
    IT-T62 Web TechnologyUNIT III 3.5.2 Overview of ActiveX  ActiveX is not a single technological thing.  If you've browsed Microsoft's Web site, you've probably gathered that ActiveX is a centerpiece of Microsoft's overall Internet strategy.  ActiveX helps application developers and Web content authors build dynamic Internet tools, content, and sites.  That's a pretty tall order. To achieve this design goal, Microsoft needed to bring together a number of different components.  Add Internet functionality to your applications with these easy-to-use ActiveX Controls.  High performance server side application for the Web is made possible with this framework. 3.5.3 ActiveX Controls for the Internet  As the content you consume from the Internet becomes more and more dynamic, the Web browser will be managing more and more of the computing tasks required to render that content.  Sun Microsystems's Java takes early honors in the race for the development standard for executable content.  Netscape helped to push Java into prominence by releasing Navigator 2.0 with support for Java applets.  Java provides Web developers with a highly sophisticated tool set for interacting with the user and the client machine.  Microsoft, not to be outdone, announced support for Java in MSIE 3.0 and a new alternative called ActiveX Controls.  ActiveX Controls are based upon the OLE 2.0 standard.  ActiveX Controls are to Web pages what the VBX and OCX are to MS- Windows GUI development.  ActiveX Controls have the following advantages over Java applets:  They are built from tools you already know.  They are easy to integrate with other applications.  They are easy to employ in containers that are not Web pages  ActiveX Controls are not constructed using Microsoft Foundation Classes. Instead, Microsoft has made the ActiveX Template Library (ATL) available to help developers build ActiveX controls.  Although stand-alone applications can be constructed using Java, Java does not really offer the same potential interaction with other existing applications yet.  Java applets are intended to execute in a Web browser and not as controls in other applications.  The Internet ActiveX Control Pack demonstrates the value of ActiveX in other development environments like Visual C++, Delphi, Visual Basic, and MS- Access.  There are a couple of problems with the use of ActiveX Controls: III Year/VI Sem 16
  • 17.
    IT-T62 Web TechnologyUNIT III  They are not currently supported in Netscape.  They are not currently supported on UNIX platforms. 3.5.4 Internet ActiveX Control Pack  The Internet ActiveX Control Pack (ICP) is not really an ActiveX control. ICP is, instead, an application of ActiveX.  With ICP, it's easy to integrate ActiveX controls into your Visual Basic programs.  The ICP contains controls for most of the major Internet services you'll want to integrate into your own applications.  Some of the controls are:  The TCP Control  The UDP Control  The FTP Client Control  The HTTP Client Control  The HTML Client Control  The SMTP Control  The POP Client Control  The NNTP Control 3.5.5 ActiveX Server Framework  The ActiveX Server Framework provides an alternative to the Common Gateway Interface method of executing applications on a Web server and interacting with the Web browser dynamically.  There are two major types of applications that can be developed using the ActiveX Server Framework:  ISAPI applications  ISAPI filters  ISAPI Applications  The Internet Server Applications Programming Interface (ISAPI) specification provides an alternative to CGI programs with potentially higher performance type capabilities for the Microsoft Internet Information Server (IIS).  ISAPI allows Web developers to build applications that execute in the same process space as the Web server  CGI and ISAPI have different approaches to use of process space.  Applications using ISAPI are faster simply because the operating system does not have to duplicate the environment and spawn a new process as is required by CGI.  ISAPI applications are actually Dynamic Link Libraries (DLLs).  Operating in the server's process space carries higher risk while providing somewhat higher performance.  Since the ISAPI application is loaded in the same process as the HTTP server, an access violation by the ISAPI application may crash the HTTP server. III Year/VI Sem 17
  • 18.
    IT-T62 Web TechnologyUNIT III ISAPI Filters  The Internet Survey Application Programming Interface (ISAPI) also provides a mechanism for modifying the behavior of the server in specific ways.  You'll employ ISAPI filters in cases where the default behavior of the server is inappropriate for the application.  ISAPI filters can modify the behavior of the following server functions:  Authentication  Compression  Encryption  Logging  Traffic Analysis 3.6 BUILDING A BASIC OLE AND ACTIVEX CONTROLS  OCX controls are the standard solution for Windows component software.  They are implemented using OLE 2.0 technology and are designed for use on the desktop environment.  Most OCX controls today are built using the Control Development Kit, which is supplied as an integrated part of Microsoft Visual C++ version 4.x.  Controls developed with Visual C++ are built using the standard OLE 2.0 interfaces, some of which were mandatory.  This means they contain a lot of unnecessary code.  They are also dependent on the Microsoft Foundation Classes (MFC) libraries which are several megabytes in size.  These controls are therefore relatively big in size which may limit their utility in the slow Internet environment.  Also, in order to use these controls on the Internet, the user must first have the MFC libraries on their machine. III Year/VI Sem 18
  • 19.
    IT-T62 Web TechnologyUNIT III  A one time download of these libraries for all controls to share may not be too much of a penalty, but MFC is being revised and released approximately every three months.  This means users of these controls must download these new libraries every three months or their controls may not work.  Management of data and properties is another potential problem. OCX controls on the desktop operate synchronously.  Function calls made to the OLE libraries or control containers do not return until they have completed.  While this is not a problem on the desktop, where data and properties are stored locally in files and can be retrieved quickly.  But it causes problems in a slow environment like the Internet, where large amounts of data have to be retrieved from a remote site and loaded into the control.  A 24 bit bitmap file for instance, can be several megabytes in size and take many minutes to download. ActiveX Control Pad  The ActiveX Control Pad provides an integration environment for combining three major elements of the basic World Wide Web dynamic document interface.  You'll combine your basic HTML, ActiveX controls, as well as client-side scripts into a single development tool with the ActiveX Control Pad.  Managing your ActiveX controls and scripts is visual and easy when you use the ActiveX Control Pad.  ActiveX objects can be inserted into your HTML documents using the ActiveX Control Pad.  HTML layouts can be inserted into your HTML documents using the ActiveX Control Pad, as well. Select and add controls using the control toolbox and properties.  Adding scripts to your HTML Web pages is simple using the ActiveX Control Pad. Use the List View and the Code View to manage VB scripts in your Web pages. Using the ActiveX Control Pad  Inserting ActiveX controls and adding client-side scripting like VBScript is straightforward.  You'll recognize many of the elements of the user interface from other applications you use, like Lotus 1-2-3 or Microsoft Word are present here too.  Most of the common items are there including, the File toolbar for saving, creating, and opening new HTML files.  However, there are also a couple of elements that you probably haven't seen before. III Year/VI Sem 19
  • 20.
    IT-T62 Web TechnologyUNIT III  The first of these two new items is found on the toolbar that uses a scroll as its icon. Pressing this button brings up the script wizard.  The second item is in the document window.  You'll be inserting objects and scripts into the HTML documents in this window.  The scroll icon indicates the start of a script. Pressing the scroll button in the margin bar opens the Script Wizard, and loads the appropriate script.  ActiveX objects are indicated in the margin bar by a small cube icon.  This iconography indicates the start of an <OBJECT> declaration in the HTML.  Pressing the ActiveX object button in the gray margin bar brings up a window containing the object, and a window containing its property sheet.  The Control Pad uses a special icon for insertions of HTML layouts.  HTML layouts are indicated in the margin bar by a small icon containing the letter A, a circle, and a square.  Pressing this button brings up the HTML Layout editor and its associated tool bar. 3.7 HTML AND ACTIVEX  The ActiveX Control Pad is not an HTML editing environment.  However, ActiveX includes a control called the HTML Layout control, which is used for building forms, laying out toolbars, and for making reusable elements in your Web pages.  The ActiveX Control Pad provides a Visual Basic like interface for creating HTML Layouts.  To create an HTML Layout, follow these steps:  Start the ActiveX Control Pad. III Year/VI Sem 20
  • 21.
    IT-T62 Web TechnologyUNIT III  Select File, New HTML Layout from the menu bar. This brings up two windows-the layout window and the Toolbox window. LAYOUT & TOOLBOX WINDOW Create an HTML layout  Try adding a command button to the layout. From the toolbox, select the command button tool.  Then place your cursor over the Layout window and it changes to cross hairs. Press the left mouse button, and draw in the control.  To edit the properties of this control, select View, Properties.  Select the Caption property, and place your cursor in the Apply text box. Now type a suitable caption like Press Me.  To change the id property, open the property sheet again and select the ID property, place your cursor in the Apply text box. Type a name like cmdPressMe. III Year/VI Sem 21
  • 22.
    IT-T62 Web TechnologyUNIT III  Add a text box to your layout. Select the text control tool from the toolbox, and then place your cursor over the Layout window.  Select View, Properties, and change the ID and Text properties. Select the Text property, and add some initialization text.  Save your layout to a file. The file extension for an HTML Layout is .alx. Using the ActiveX Control Pad Script Wizard  The ActiveX Control Pad provides a graphical user interface for adding VBScript to HTML pages and HTML Layouts.  To add VBScripts using the Script Wizard, take the following steps:  Start the ActiveX Control Pad, if its not already running.  Open the HTML Layout you created previously.  Start the Script Wizard. You can do this in two ways: Press the Script Wizard toolbar button (the one with the scroll icon), or select Tools, Script Wizard from the menu bar. III Year/VI Sem 22
  • 23.
    IT-T62 Web TechnologyUNIT III  Add a simple script using the List View.  Adding a script element in the List View is a three step process: Select an event to respond to, select an action to take, and (if necessary) provide a value or parameter.  From the Event list, expand the txtMessage item and select the KeyDown event.  Next, expand the txtMessage item on the Action list. Select the ForeColor property and double-click.  The color selection window comes forward.  Go ahead and select the color that you want to change the txtMessage box to when a key is pressed and press OK.  You'll see both the object and the action listed in the script List window.  Change the Script Wizard to the Code View by selecting the Code View radio button. From the Event list, expand the cmdPressMe object, and select the Click event. Script Window in Code View III Year/VI Sem 23
  • 24.
    IT-T62 Web TechnologyUNIT III  Enter the script.  Finally, collapse all of the items in the Action list. You'll notice that there is now a Procedures object. Expand the Procedures object.  You should see an entry for the two events for which you've now added scripts. Navigating the Event Window  When you add an ActiveX control to your HTML document, the Script Wizard adds an object entry to the Event window.  Each object may have any number of different events associated with actions on the object.  To add an action for any of these events, expand the object entry in the event window, and select the desired event. III Year/VI Sem 24
  • 25.
    IT-T62 Web TechnologyUNIT III  The Window object triggers two events, the OnLoad and OnUnload.  The Calendar control also fires several events. Object’s Events Window Navigating the Action Window  Once you've selected an object and an event, the next step is to select an action to be executed.  The Action window provides an interface for selecting and entering the following actions:  Invoking methods exposed by ActiveX objects  Setting properties of ActiveX objects  Entering and setting global variables  Invoking procedures  Invoking methods exposed by ActiveX objects  Many ActiveX objects expose methods.  For instance, if you placed a Calendar control in a Web page and wanted to invoke one of the methods supported by Calendar in response to some event, you can specify the action. Setting the Properties of ActiveX Objects  ActiveX objects also contain properties. In the Action window, properties are indicated by a small property sheet icon.  The process of setting a property for an ActiveX object in the Script Wizard varies depending on the nature of the property itself.  However, the process always begins when you double click the property you want to change. Entering and Setting Global Variables III Year/VI Sem 25
  • 26.
    IT-T62 Web TechnologyUNIT III  Many applications require global variables for storing information. Of course, global variables must first be added to the Web page before you can set them to a value.  To create a global variable, place the cursor over the Action window and press the right mouse button.  Once you've entered a name for your global variable (eg: gAGlobalVariable), expand the Global Variables object in the Action window and you'll see the global variable you just entered.  Now your global variable can be set and checked just like the property of an ActiveX control.  If you want to set gAGlobalVariable to ten when the page is loaded, select the Window's OnLoad event, double-click gAGlobalVariable, and enter 10 into the text box. Editing Scripts in the List View  The List View displays each of the statements from the script for the event you're handling.  The List View provides several command buttons for editing the script:  Insert action  Delete action  Move up action  Move down action  Modify value III Year/VI Sem 26
  • 27.
    IT-T62 Web TechnologyUNIT III Editing Scripts in the Code View  The List View is good for making simple scripts quickly and easily.  However, many times the application requires more sophisticated programming.  The Code View provides developers with a rudimentary editor for including VBScripts that you hand code.  To take a look at the Code View, select the Code View radio button. Next, press the right mouse and select New Procedure from the menu.  Typically, you change the name of the procedure to a useful name, and then code the logic for the procedure. A CODED PROCEDURE  If you switch back to the List View, or if you open a procedure developed in the Code View in the List View, the ActiveX Control Pad only shows a message as shown in figure.  When you close the Script Wizard, the ActiveX Control Pad adds the VBScript to your HTML document. III Year/VI Sem 27
  • 28.
    IT-T62 Web TechnologyUNIT III  Depending on the procedures you've created, you may have several VBScript tag pairs within the HTML document. Inserting an HTML Layout  An HTML Layout can be inserted in a Web page quite easily.  HTML Layouts are excellent for elements that are repeated in numerous Web pages on your Web site.  You can simply build the HTML Layout once, and then include it in any appropriate Web page.  To include an HTML Layout, take the following steps:  Start the ActiveX Control Pad if its not already running.  Start a new HTML document by adding an H1 heading with text like My HTML Layout. Also, add a <BR> tag to make a break between the heading and the HTML layout.  Insert the HTML layout that you created in the previous section. To do this select Edit, Insert HTML Layout from the main menu.  Then select the HTML layout you just created and press Open.  The gray margin bar now shows an HTML Layout button. Pressing this button launches the Layout editor as described previously.  Save your HTML page to a file.  Now that you've completed the HTML document, you can test your work using Microsoft Internet Explorer 3.0.  These next steps take you through testing out your HTML document.  Start Microsoft Internet Explorer 3.0.  Open your HTML document by choosing File, Open, or by typing the fully qualified path to the document. Inserting an Object III Year/VI Sem 28
  • 29.
    IT-T62 Web TechnologyUNIT III  An HTML layout is an object, so inserting additional objects in a Web page is quite easy.  However, the ActiveX Control Pad makes inserting any type of object easy.  To include an HTML layout, follow these steps:  Start the ActiveX Control Pad if its not already running.  Select File, New HTML, and start a new HTML file.  Add an H1 heading with some text like My Calendar. Also, add a <BR> tag to make a break between the heading and the HTML Layout.  Add an ActiveX object.  Select Edit, Insert ActiveX Control from the menu bar. Select the Calendar control from the list. Then save your HTML page to a file. Now that you've completed the HTML document, you can test your work using Microsoft Internet Explorer 3.0. The next steps take you through testing out your HTML document:  Start Microsoft Internet Explorer 3.0.  Open your HTML document by choosing File, Open, or by typing the fully qualified path to the document. 3.8 ACTIVEX DOCUMENTS  An existing application that doesn't need to be embedded in a Web page can be converted to an ActiveX document.  ActiveX documents are based upon a more general abstraction called DocObjects. The DocObjects technology is a set of extensions to OLE documents, the compound document technology of OLE.  As with OLE documents, the DocObjects standard requires a container to provide the display space for a DocObject.  This technology allows the browser to present documents from Office and Office Compatible applications.  Such functionality might allow any kind of document to be displayed within the Web browser.  Documents that conform to the ActiveX standard can be opened within other ActiveX document containers including the following:  Microsoft Internet Explorer 3.0  Microsoft Office Binder  Forthcoming new Windows shell  Embedded objects do not, however, control the page on which they appear. These types of objects are usually quite small and hold very little persistent data.  ActiveX documents, on the other hand, provide a fully functional document space. III Year/VI Sem 29
  • 30.
    IT-T62 Web TechnologyUNIT III  ActiveX documents also control the page in which they appear (called a DocObject container). III Year/VI Sem 30