ACE 1050 DESIGN COMPUTING

1
ACE 1050 DESIGN COMPUTING

• Tutorial 3
• Date 1st February, 2007
• Tutor Qingyun Li

2
Overview

• Java
• Constructor
• Mutator and Accessor
• HTML
• HTML Tags
• Introduce of ASP

3
Constructor

• import java.awt.
• public class ThreeRectangle
• // main() application entry point
• public static void main(String args) throws
  IOException
• ColoredRectangle r new ColoredRectangle()
• System.out.println("Enter when ready")
• System.in.read()
• r.paint()
• r.setY(30)
• r.setColor(Color.RED)
• r.paint()
• r.setY(60)
• r.setColor(Color.YELLOW)
• r.paint()

4
Constructor

• import java.awt.
• public class ColoredRectangle
• // instance variables for holding object
  attributes
• private int width private int height
• private int x private int y
• private JFrame window
• private Color color
• // ColoredRectangle() default constructor
• public ColoredRectangle() // ...
• // paint() paint method
• public void paint() // ...
• // setWidth() width mutator
• public void setWidth (int w) // ...
• // getWidth() width accessor
• public int getWidth // ...

5
Constructor

• Used to create an instance object for a class
• It must have the same name as the class
• It cannot declare a result type
• Constructors are not considered members of a
  class
• Access to constructors is governed by the access
  modifiers public and private

6
Constructor

• import java.awt.
• public class ColoredRectangle
• // instance variables for holding object
  attributes
• private int width private int height
• private int x private int y
• private JFrame window
• private Color color
• // ColoredRectangle() default constructor
• public ColoredRectangle() // ...
• // paint() paint method
• public void paint() // ...
• // setWidth() width mutator
• public void setWidth (int w) // ...
• // getWidth() width accessor
• public int getWidth // ...

7
Constructor

• Constructor
• Definition
• public class ColoredRectangle
• ...
• public ColoredRectangle()
• window new JFrame("BoxFun")
• window.setSize(200, 200)
• width 40
• height 20
• x 80
• y 90
• color Color.BLUE
• window.setVisible(true)
• ...

8
Mutator and Accessor

• Mutators
• Manage requests for changing attributes
• Ensure objects always have sensible values
• Individual methods for setting the width,
  height, x-coordinate
• position, y-coordinate position, color, or
  window of the associated rectangle to a given
  value
• Accessor
• Supply the values of the attributes
• Individual methods for providing the width,
  height, x-coordinate position, y-coordinate
  position, color, or window of the associated
  rectangle

9
Mutator

• import javax.swing.
• import java.awt.
• public class ColoredRectangle
• // instance variables for holding object
  attributes
• private int width private int height
• private int x private int y
• private JFrame window
• private Color color
• // ColoredRectangle() default constructor
• public ColoredRectangle() // ...
• // paint() display the rectangle in its window
• public void paint() // ...
• // setWidth() width mutator
• public void setWidth (int w) // ...
• // getWidth() width accessor
• public int getWidth // ...

10
Mutator

• Mutator
• Definition
• //setWidth( ) with mutator
• Public void setWidth (int w)
• width w
• Usage
• ColoredRectangle s new ColoredRectangle ( )
• s.setWidth(80)

11
Mutator

• Advantages of using mutator
• Readability
• Less error prone
• Facilitates enhancements through localization

12
Subtelties

• Consider
• ColoredRectangle s new ColoredRectangle()
• s.paint( )
• s.setWidth(80)
• s.paint( )
• What is the width of the rectangle on the
  screen after the mutator executes?
• width 80

13
Accessor

• Accessor
• Do not require parameters
• Each accessor execution produces a return value
• Return value is the value of the invocation

14
Mutator

• import javax.swing.
• import java.awt.
• public class ColoredRectangle
• // instance variables for holding object
  attributes
• private int width private int height
• private int x private int y
• private JFrame window
• private Color color
• // ColoredRectangle() default constructor
• public ColoredRectangle() // ...
• // paint() display the rectangle in its window
• public void paint() // ...
• // setWidth() width mutator
• public void setWidth (int w) // ...
• // getWidth() width accessor
• public int getWidth // ...

15
Accessor

• Accessor
• Definition
• //getWidth( ) with accessor
• Public int getWidth
• return width
• Usage
• ColoredRectangle s new ColoredRectangle ( )
• Int w s.getWidth( )

16
Specific Construction

• Specific Construction
• Definition
• public ColoredRectangle (int w, int h, int ulx,
  int uly, JFrame f, Color c)
• setWidth(w)
• set Height (h)
• setX(ulx)
• setY(uly)
• setWindow(f)
• setColor(c)
• Usage
• ColoredRectangle s new ColoredRectangle(60,
  80,20, 20, display,
• Color.YELLOW)

17
Example

• import java.io.
• import java.awt.
• public class DrawRectangle
• public static void main (String args) throws
  IOException
• ColoredRectangle s new ColoredRectangle( )
• System.out.println("Enterwhen ready")
• System.in.read( )
• s.paint( )
• s.setY(50)
• sColor(Color.RED)
• s.paint( )

18
Advance of HTML
19
Paragraph

• Paragraph
• lthtmlgt
• ltbodygt
• ltpgt This is the 1st paragraph lt/pgt
• ltpgt This is the 2nd paragraph lt/pgt
• ltpgt This is the 3rd paragraph lt/pgt
• lt/bodygt
• lt/htmlgt

20
Line Breaks

• Line Breaks
• lthtmlgt
• ltbodygt
• ltpgt To break ltbrgt lines ltbrgt in a ltbrgt paragraph,
  ltbrgt
• Use the br tag.
• lt/pgt
• lt/bodygt
• lt/htmlgt

21
Center Aligned Headings

• Center Aligned Headings
• lthtmlgt
• ltbodygt
• lth1 align centergt This is heading 1 lt/h1gt
• lt/bodygt
• lt/htmlgt
• lthtmlgt
• ltbodygt
• lth1 align centergt
• ltfont face"Verdana"gtThis is heading 1 lt/fontgt
• lt/h1gt
• lt/bodygt
• lt/htmlgt

22
Comments in the HTML source

• Comments in the HTML source
• lthtmlgt
• ltbodygt
• lt! This comment will not be displayedgt
• ltpgt This is a paragraph lt/pgt
• lt/bodygt
• lt/htmlgt

23
Hyperlinks

• Hyperlinks
• lthtmlgt
• ltbodygt
• ltpgt
• lta href index.htmgtThislt/agt
• is a link to the index page on this website.
• lt/pgt
• ltpgt
• lta href http//www.acae.cuhk.edu.hkgtThislt/agt
• is a link to a page on the World Wide Web.
• lt/pgt
• lt/bodygt
• lt/htmlgt

24
Image as a link

• Image as a link
• lthtmlgt
• ltbodygt
• ltpgt
• We can use an image as a link
• lta href index.htmgt
• ltimg border 0 src button.gif width 65
  height 30gt
• lt/agt
• lt/pgt
• lt/bodygt
• lt/htmlgt

25
Jump

• Jump
• lthtmlgt
• ltbodygt
• ltpgt
• lta href"C4"gt
• Jump to Paragraph 4.
• lt/agt
• lt/pgt
• ltpgt
• lth2gtChapter 1lt/h2gt
• ltpgt This is Paragraph 1 lt/pgt
• . . .
• lta name"C4"gtlth2gtChapter 4lt/h2gtlt/agt
• ltpgt This is Paragraph 4 lt/pgt
• . . .
• lth2gtChapter 12lt/h2gt
• ltpgt This is Paragraph 12 lt/pgt
• lt/bodygt
• lt/htmlgt

26
Vertical Frameset

• Vertical Frameset
• lthtmlgt
• ltframeset cols 25, 50, 25gt
• ltframe src frame_a.htmgt
• ltframe src frame_b.htmgt
• ltframe src frame_c.htmgt
• lt/framesetgt
• lt/htmlgt

27
Horizontal Frameset

• Horizontal Frameset
• lthtmlgt
• ltframeset rows 25, 50, 25gt
• ltframe src frame_a.htmgt
• ltframe src frame_b.htmgt
• ltframe src frame_c.htmgt
• lt/framesetgt
• lt/htmlgt

28
Mixed Frameset

• Mixed Frameset
• lthtmlgt
• ltframeset rows 50, 50,gt
• ltframe src frame_a.htmgt
• ltframeset cols 25, 75,gt
• ltframe src frame_b.htmgt
• ltframe src frame_c.htmgt
• lt/framesetgt
• lt/framesetgt
• lt/htmlgt

29
Inline Frame

• Inline Frame
• lthtmlgt
• ltbodygt
• ltiframe src "http//www.mae.cuhk.edu.hk"
  width"600"
• height"400"gt
• lt/iframegt
• lt/bodygt
• lt/htmlgt

30
Input Fields

• Input Fields
• lthtmlgt
• ltbodygt
• ltformgt
• First name
• ltinput type"text" name"firstname"gt
• ltbrgt
• Last name
• ltinput type"text" name"lastname"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

31
Password Fields

• Password Fields
• lthtmlgt
• ltbodygt
• ltformgt
• Username
• ltinput type"text" name"user"gt
• ltbrgt
• Password
• ltinput type"password" name"password"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

32
Checkboxes

• Checkboxes
• lthtmlgt
• ltbodygt
• ltformgt
• Checkbox A
• ltinput type"checkbox" nameA"gt
• ltbrgt
• Checkbox B
• ltinput type"checkbox" nameB"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

33
Radio buttons

• Radio Buttons
• lthtmlgt
• ltbodygt
• ltformgt
• Button A
• ltinput type"radio" checked nameButton"
  valueA"gt
• ltbrgt
• Button B
• ltinput type"radio" nameButton" valueB"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

34
Drop-Down Box

• Drop-Down Box
• lthtmlgt
• ltbodygt
• ltformgt
• ltselect nameChoice"gt
• ltoption valueA"gt A
• ltoption valueB"gt B
• ltoption valueC"gt C
• ltoption valueD"gt D
• lt/selectgt
• lt/formgt
• lt/bodygt
• lt/htmlgt

35
Button

• Button
• lthtmlgt
• ltbodygt
• ltformgt
• ltinput type"button" value"Hello world!"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

36
Form with input fields

• lthtmlgt
• ltbodygt
• ltform name"input" action"html_form.asp"
  method"get"gt
• Type your first name
• ltinput type"text" name"FirstName" valueACE"
  size"20"gt
• ltbrgtType your last name
• ltinput type"text" name"LastName" value1050"
  size"20"gt
• ltbrgt
• ltinput type"submit" value"Submit"gt
• lt/formgt
• ltpgt
• If you click the "Submit" button, you will send
  your input to a new page called
• html_form.asp.
• lt/pgt
• lt/bodygt
• lt/htmlgt

37
Form with input fields

• lthtmlgt
• ltheadgt
• lttitlegtHTML Formlt/titlegt
• lt/headgt
• ltbodygt
• lth3gtYour input was received aslt/h3gt
• lth3gtFirstNameaLastNameblt/h3gt
• . . .
• lt/bodygt
• lt/htmlgt

38
Send an email from a form

• lthtmlgt
• ltbodygt
• ltform action"MAILTOace1050_at_acae.cuhk.edu.hk"
  method"post"
• enctype"text/plain"gt
• lth3gtThis form sends an e-mail to ACE1050.lt/h3gt
• Nameltbrgt
• ltinput type"text" name"name" value"yourname"
  size"20"gt
• ltbrgt
• Mailltbrgt
• ltinput type"text" name"mail" value"yourmail"
  size"20"gt
• ltbrgt
• Commentltbrgt
• ltinput type"text" name"comment"
  value"yourcomment" size"40"gt
• ltbrgtltbrgt
• ltinput type"submit" value"Send"gt
• ltinput type"reset" value"Reset"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

39
Link that is not underlined

• lthtmlgt
• ltbodygt
• lta hrefindex.htm" style"text-decorationnone"gt
• THIS IS A LINK!
• lt/agt
• lt/bodygt
• lt/htmlgt

40
Document Description

• lthtmlgt
• ltheadgt
• ltmeta name"author contentCrystal Fok"gt
• ltmeta name"revised contentCrystal Fok,
  3/2/05"gt
• ltmeta name"generator content"Microsoft
  FrontPage 5.0"gt
• lt/headgt
• ltbodygt
• ltpgt
• The meta attributes of this document identify the
  author and the editor software.
• lt/pgt
• lt/bodygt
• lt/htmlgt

41
Document Keywords

• lthtmlgt
• ltheadgt
• ltmeta name"description content"HTML examples"gt
• ltmeta name"keywords content"HTML, DHTML, CSS,
  XML, XHTML,
• JavaScript, VBScript"gt
• lt/headgt
• ltbodygt
• ltpgt
• The meta attributes of this document describe the
  document and its keywords.
• lt/pgt
• lt/bodygt
• lt/htmlgt

42
Redirect the user to another URL

• lthtmlgt
• ltheadgt
• ltmeta http-equiv"Refresh" content"5
  urlhttp//www.acae.cuhk.edu.hk"gt
• lt/headgt
• ltbodygt
• ltpgt
• You will be redirected to the new address in five
  seconds.
• lt/pgt
• lt/bodygt
• lt/htmlgt

43
JavaScript

• lthtmlgt
• ltbodygt
• ltscriptgt
• alert(" welcome to our tutorial ")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

44
Marquee

• lthtmlgt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetgb2312"gt
• lttitlegtNew onelt/titlegt
• ltmarqueegtHi, Welcome to ACE1050!lt/marqueegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

45
Future InformationASP

• What is ASP all about?
• Well first of all, ASP stands for Active Server
  Pages. ASP is a server side technology, this
  means it works on any web browser, because all
  the work is done at the web server end.
• Essentially ASP pages are just normal HTML with
  scripts embedded in them. You can write your
  scripts in VBScript, Javascript or any language
  which is ActiveScript compatible.

Tutorial of ASP
46

• Exercise
• Try to save our course homepage and modify It as
  you like using the above methods in this tutorial
• Change the words, pictures of the homepage, and
  you can add some good music to it, if you do it
  well I will take it be our homepage.
• Add input fields,buttons, Hyperlinks and Marquees
  to the file
• Use the ASP tech to modify the homepage of our
  class
• Add a pop window of the index.html