Software Methods

Transcript Software Methods

Software Methods
Content
1. Markup Languages : HTML, XML
2. Object Middleware, Java Beans
Introduction
• Markup Language
– A set of markup conventions used together for encoding
texts.
– Specify what markup is allowed, how markup is to be
distinguished from text and what the markups means
• Two types of markup languages
– Descriptive : describe what the contents are and mean,
but let the users (browsers) interpret them and display
them in their own ways
– Procedural : instruct the users (browsers) how to
display the text, what font size to use, how much space
it should move after a certain is printed, etc
Introduction (cont.)
• HTML
– HyperText Markup Language
– Not a procedural programming language like C,
Fortran, Cobol or Pascal
– Markup language
• Identify elements of a page so that a browser can
render that page on your computer screen
• Separate presentation of a document and
structure of that document
Markup Languages
• Markup language
– Used to format text and information
• HTML
– Marked up with elements, delineated by tags
– Tags: keywords contained in pairs of angle
brackets
• HTML tags
– Not case sensitive
– Good practice to keep all the letters in one case
• Forgetting to close tags is a syntax error
Editing HTML
• HTML files or documents
– Written in source-code form using text editor
– Notepad: Start-Programs-Accessories
– HTML-Kit: http://www.chami.com/html-kit
• HTML files
– .htm or .html extensions
– Name your files to describe their functionality
– File name of your home page should be index.html
• Errors in HTML
– Usually not fatal
Common Tags
• Always include the <HTML>…</HTML> tags
• Comments placed inside  tags
• HTML documents
– HEAD section
• Info about the document
• Info in header not generally rendered in display window
• TITLE element names your Web page
– BODY section
• Page content
• Includes text, images, links, forms, etc.
• Elements include backgrounds, link colors and font faces
• P element forms a paragraph, blank line before and after
An Simple Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<HTML>


<HEAD>
<TITLE>Internet and WWW How to Program - Welcome</TITLE>
</HEAD>
<BODY>
<P>Welcome to Our Web Site!</P>
</BODY>
</HTML>
Headers
• Headers
– Simple form of text formatting
– Vary text size based on the header’s “level”
– Actual size of text of header element is selected by
browser
– Can vary significantly between browsers
• CENTER element
– Centers material horizontally
– Most elements are left adjusted by default
Header Elements H1 through H6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML>


<HEAD>
<TITLE>Internet and WWW How to Program - Headers</TITLE>
</HEAD>
<BODY>

<CENTER>
<H1>Level 1 Header</H1>

<H2>Level 2 header</H2>

<H3>Level 3 header</H3>

<H4>Level 4 header</H4>

<H5>Level 5 header</H5>

<H6>Level 6 header</H6>

</CENTER>
</BODY>
</HTML>
Header Elements H1 through H6 (cont.)
Text Styling
• Underline style
– <U>…</U>
• Align elements with ALIGN attribute
– right, left or center
• Close nested tags in the reverse order from which they
were opened
• Emphasis (italics) style
– <EM>…</EM>
• Strong (bold) style
– <STRONG>…</STRONG>
• <B> and <I> tags deprecated
– Overstep boundary between content and presentation
Styling Text on Web Pages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<HTML>


<HEAD>
<TITLE>Internet and WWW How to Program - Welcome</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
<P>We have designed this site to teach
about the wonders of <EM>HTML</EM>. We have been using
<EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
and we enjoy the features that have been added recently. It
seems only a short time ago that we read our first <EM>HTML</EM>
book. Soon you will know about many of the great new features
of HTML 4.0.</P>
<H2 ALIGN = "center">Have Fun With the Site!</H2>
</BODY>
</HTML>
Styling Text on Web Pages (cont.)
Linking
• Links inserted using the A (anchor) element
– Requires HREF attribute
• HREF specifies the URL you would like to link to
– <A HREF = “address”>…</A>
– Can link to email addresses, using
<A HREF = “mailto:emailaddress”>…</A>
– Note quotation mark placement
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<HTML>


Linking to other Web Pages
<HEAD>
<TITLE>Internet and WWW How to Program - Links</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Here are my favorite Internet Search Engines</H2>
<P><STRONG>Click on the Search Engine address to go to that
page.</STRONG></P>

<P>Yahoo: <A HREF = "http://www.yahoo.com">
http://www.yahoo.com</A></P>
<P>AltaVista: <A HREF = "http://www.altavista.com">
http://www.altavista.com</A></P>
<P>Ask Jeeves: <A HREF = "http://www.askjeeves.com">
http://www.askjeeves.com</A></P>
<P>WebCrawler: <A HREF = "http://www.webcrawler.com">
http://www.webcrawler.com</A></P>
</CENTER>
</BODY>
</HTML>
Linking to other Web Pages (cont.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>


Linking to an Email
<HEAD>
<TITLE>Internet and WWW How to Program - Contact Page</TITLE>
</HEAD>
<BODY>


<P>My email address is <A HREF = "mailto:[email protected]">
[email protected]</A>. Click on the address and your browser
will open an email message and address it to me.
</P>
</BODY>
</HTML>
Images
• Images as anchors
• Background color
– Preset colors (white, black, blue, red, etc.)
– Hexadecimal code
• First two characters for amount of red
• Second two characters for amount of green
• Last two characters for amount of blue
• 00 is the weakest a color can get
• FF is the strongest a color can get
• Ex. black = #000000
Images (cont.)
• Image background
– <BODY BACKGROUND = “background”>
– Image does not need to be large as browser tiles image across and
down the screen
• Pixel
– Stands for “picture element”
– Each pixel represents one addressable dot of color on the screen
• Insert image into page
– Use <IMG> tag
• Attributes:
– SRC = “location”
– HEIGHT (in pixels)
– WIDTH (in pixels)
– BORDER (black by default)
– ALT (text description for browsers that have images turned off or
cannot view images)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<HTML>


Images (cont.)
<HEAD>
<TITLE>Internet and WWW How to Program - Welcome</TITLE>
</HEAD>
<BODY BACKGROUND = "background.gif">
<CENTER>

<IMG SRC = "deitel.gif" BORDER = "1" HEIGHT = "144"
WIDTH = "200" ALT = "Harvey and Paul Deitel">
</CENTER>
</BODY>
</HTML>
Formatting Text with <FONT>
• FONT element
– Add color and formatting to text
– FONT attributes:
• COLOR
– Preset or hex color code
– Value in quotation marks
– Note: you can set font color for whole document using
TEXT attribute in BODY element
Formatting Text with <FONT> (cont.)
• SIZE
– To make text larger, set SIZE = “+x”
– To make text smaller, set SIZE = “-x”
– x is the number of font point sizes
• FACE
– Font of the text you are formatting
– Be careful to use common fonts like Times, Arial, Courier
and Helvetica
– Browser will display default if unable to display specified
font
• Example
<FONT COLOR = “red” SIZE = “+1” FACE =
“Arial”>…</FONT>
1<HTML>
2
3
4
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Welcome</TITLE>
8</HEAD>
9
10<BODY>
11
12<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
13
14
15<P><FONT COLOR = "red" SIZE = "+1" FACE = "Arial">We have
16designed this site to teach about the wonders of
17<EM>HTML</EM>.</FONT>
18
19<FONT COLOR = "purple" SIZE = "+2" FACE = "Verdana">We have been
20using <EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
21and we enjoy the features that have been added recently.</FONT>
22
23<FONT COLOR = "blue" SIZE = "+1" FACE = "Helvetica">It
24seems only a short time ago that we read our first <EM>HTML</EM>
25book.</FONT>
26
27<FONT COLOR = "green" SIZE = "+2" FACE = "Times">Soon you will
28know about many of the great new feature of HTML 4.0.</FONT></P>
29
30<H2 ALIGN = "center">Have Fun With the Site!</H2></P>
31
32</BODY>
33</HTML>
Formatting Text with
<FONT> (cont.)
Using the FONT Element to Format Text
Special Characters, Horizontal Rules and
More Line Breaks
• Special characters
– Inserted in code form
– Format always &code;
• Ex. &
– Insert an ampersand
– Codes often abbreviated forms of the character
– Codes can be in hex form
• Ex. & to insert an ampersand
• Strikethrough with DEL element
• Superscript: SUP element
• Subscript: SUB element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<HTML>


Special Characters
<HEAD>
<TITLE>Internet and WWW How to Program - Contact Page</TITLE>
</HEAD>
<BODY>

<P>My email address is <A HREF = "mailto:[email protected]">
[email protected]</A>. Click on the address and your browser
will automatically open an email message and address it to my
address.</P>
<P>All information on this site is <STRONG>©</STRONG>
Deitel <STRONG>&</STRONG> Associates, 1999.</P>



<DEL><P>You may copy up to 3.14 x 10<SUP>2</SUP> characters
worth of information from this site.</DEL><BR> Just make sure
you <SUB>do not copy more information</SUB> than is allowable.
<P>No permission is needed if you only need to use <STRONG>
< ¼</STRONG> of the information presented here.</P>
</BODY>
</HTML>
Inserting Special Characters into HTML
Special Characters, Horizontal Rules and
More Line Breaks (cont.)
• Horizontal rule
– <HR> tag
– Inserts a line break directly below it
– HR attributes:
• WIDTH
– Adjusts the width of the rule
– Either a number (in pixels) or a percentage
• SIZE
– Determines the height of the horizontal rule
– In pixels
• ALIGN
– Either left, right or center
• NOSHADE
– Eliminates default shading effect and displays horizontal
rule as a solid-color bar
1<HTML>
2
3
4
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Horizontal Rule</TITLE>
8</HEAD>
9
10<BODY>
11
12
13<HR WIDTH = "25%" SIZE = 1>
14<HR WIDTH = "25%" SIZE = 2>
15<HR WIDTH = "25%" SIZE = 3>
16
17<P ALIGN = "left"><STRONG>Size:</STRONG>4
18<STRONG>Width:</STRONG>75%
19<HR WIDTH = "75%" SIZE = "4" ALIGN = "left">
20
21<P ALIGN = "right"><STRONG>Size:</STRONG>12
22<STRONG>Width:</STRONG>25%
23<HR WIDTH = "25%" SIZE = "12" ALIGN = "right">
24
25<P ALIGN = "center"><STRONG>Size:</STRONG>8
26<STRONG>Width:</STRONG>50%
27<STRONG><EM>No shade...</EM></STRONG>
28<HR NOSHADE WIDTH = "50%" SIZE = "8" ALIGN = "center">
29
30</BODY>
31</HTML>
Horizontal Rules
Using Horizontal Rules
Introduction to XML
• XML
– Markup language for describing structured data – content is
seperated from presentation
– XML documents contain only data
• Applications decide how to display the data
– Language for creating markup languages
• Can create new tags
– Possible to search, sort, manipulate and render XML using
Extensible Stylesheet Language (XSL)
– Highly portable
– Files end in the .xml extension
Introduction to XML (cont.)
• XML parsers
– Check an XML document’s syntax
– Support either the
• Document Object Model (DOM)
– Build a tree structure containing the XML document’s data
• Simple API for XML (SAX)
– Process the document and generate events
– Document Type Definition (DTD) files
• Defines grammatical rules for the document
• Used to check the XML document structure against
Structuring Data
• Element types
– Can be declared to describe data structure
• XML elements
– Root element
• Must be exactly one per XML document
• Contains all other elements in document
• Lines preceding the root element are called the prolog
– Container element
• Contains sub-elements (children)
– Empty element
• No matching end tag
• In HTML, IMG
Structuring Data (cont.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version = "1.0"?>

-->
<article>
<title>Simple XML</title>
<date>September 6, 1999</date>
<author>
<fname>Tem</fname>
<lname>Nieto</lname>
</author>
<summary>XML is pretty easy.</summary>
<content>Once you have mastered HTML, XML is easily
learned. You must remember that XML is not for
displaying information but for managing information.
</content>
</article>
IE5 Displaying article.xml
1<?xml version = "1.0"?>
2
3
4
5
6<!DOCTYPE letter SYSTEM "letter.dtd">
7
8<letter>
9
10
<contact type = "from">
11
<name>
John Doe</name>
12
<address1>123 Main St.</address1>
13
<address2></address2>
14
<city>Anytown</city>
15
<state>Anystate</state>
16
<zip>12345</zip>
17
<phone>555-1234</phone>
18
<flag gender = "M"/>
19
</contact>
20
21
<contact type = "to">
22
<name>Joe Schmoe</name>
23
<address1>Box 12345</address1>
24
<address2>15 Any Ave.</address2>
25
<city>Othertown</city>
26
<state>Otherstate</state>
27
<zip>67890</zip>
28
<phone>555-4321</phone>
29
<flag gender = "M"/>
30
</contact>
31
32
<salutation>Dear Sir:</salutation>
33
Business letter with DTD
34
<paragraph>It is our privilege to inform you about our new
35
database managed with XML. This new system allows
36
you to reduce the load of your inventory list server by
37
having the client machine perform the work of sorting
38
and filtering the data.</paragraph>
39
<closing>Sincerely</closing>
40
<signature>Mr. Doe</signature>
41
42</letter>
Business letter
with DTD (cont.)
Business letter formatted by XSL
John Doe
123 Main Street
Anytown, Anystate 12345
555-4321
Joe Schmoe
Box 12345
15 Any Ave.
Othertown, Otherstate 67890
555-4321
Dear Sir,
It is our privilege to inform you about our new database managed with XML. This new system allows
you to reduce the load on your inventory list server by having the client machine perform the work of
sorting and filtering the data.
Sincerely,
Mr. Doe
Document Type Definitions (DTD)
• Document Type Definition
– Specify list of element types, attributes and their
relationships to each other
– Optional, but recommended for program conformity
– !Element
• Element type declaration – defines the rules for an element
• Plus sign (+) – one or more occurrences
• Asterisk (*) – any number of occurrences
• Question mark (?) – either zero or exactly one occurrence
• Omitted operator – exactly one occurrence
• #PCDATA
– The element can store parsed character data
Document Type Definitions (DTD) (cont.)
– !ATTLIST
• Defines attributes for an element
• #IMPLIED
– Can assign its own type attribute or ignore
• #REQUIRED
– The specified attribute must be declared in the document
• #FIXED
– The Specified attribute must be declared with given value
1
2
3
Business Letter DTD
4<!ELEMENT letter (contact+, salutation, paragraph+,
5
closing, signature )>
6
7<!ELEMENT contact (name, address1, address2, city, state,
8
zip, phone, flag)>
9<!ATTLIST contact type CDATA #IMPLIED>
10
11<!ELEMENT name (#PCDATA)>
12<!ELEMENT address1 (#PCDATA)>
13<!ELEMENT address2 (#PCDATA)>
14<!ELEMENT city (#PCDATA)>
15<!ELEMENT state (#PCDATA)>
16<!ELEMENT zip (#PCDATA)>
17<!ELEMENT phone (#PCDATA)>
18<!ELEMENT flag EMPTY>
19<!ATTLIST flag gender (M | F) "M">
20
21<!ELEMENT salutation (#PCDATA)>
22<!ELEMENT closing (#PCDATA)>
23<!ELEMENT paragraph (#PCDATA)>
24<!ELEMENT signature (#PCDATA)>
Customized Markup Languages
• Customized Markup Languages
– Can create own tags to describe data, creating a new
markup language
Example
• MathML
– Developed by W3C for describing mathematical notations and
expressions
Integral
symbol
Delta symbol
Customized Markup Languages (cont.)
Other Examples
• Wireless Markup Language (WML)
– Allows portions of Web pages to be displayed on wireless devices
– Works with Wireless Application Protocol (WAP)
• Extensible Business Reporting Language (XBRL)
– Facilitates the creation, exchange and validation of financial
information
• Electronic Business XML (ebXML)
– Used for exchanging business data
Object Middleware
• A popular middleware is CORBA (Common Object Request
Broker Architecture) which is a client-server middleware that
enables a client to invoke a method on a server object either in
the same machine or across a network.
Client
Result
Object
Request
Object Request Broker
Java Beans (Java Applets)
•A Java applet is a program written in the Java programming language
that can be included in an HTML page, much in the same way an
image is included.
•When you use a Java technology-enabled browser to view a page that
contains an applet, the applet's code is transferred to your system and
executed by the browser's Java Virtual Machine.
Java beans
Network
Server
Java bean to be run here
Client PC
Main References
• e-Business & e-Commerce : How to Program, H.M. Deitel,
P.J. Deitel and T.R. Nieto, Prentice Hall, 2000.
• The XML Companion, Neil Bradley, Addison-Wesley, 1998.
• eBusiness Essentials: Technology and Network Requirements
for Mobile and Online Markets, 2/e, by Mark Norris and
Steve West, John Wiley & Sons.

Software Methods

Transcript Software Methods

Directory