Web EngineeringAdvanced Web Engineering

1
Web Engineering/Advanced Web Engineering

• Week 7 - JavaScript III

2
Filters Transitions

• Visual effects are possible using HTML and/or
  JavaScript.
• These are available in Internet Explorer only.
• Should be used only when target browser can be
  restricted.

3
Filter Types

• Flip filters - horizontal and vertical mirror
  effects.
• Chroma filter - colour transparency effects.
• Mask filter - image mask so that the background
  to an element is solid with the foreground
  transparent to the image behind.
• Image filters
• gray (greyscale)
• invert
• xray
• Shadow filter - coloured shadowed at selected
  angle.
• Alpha filter - gradient effects.
• Glow, wave, blur, dropShadow and light filters.

4
Using filters

• Filters are applied using inline styles.
• The following code adds a horizontal flip to a
  heading
• lth1 style "filter fliph"gtHellolt/h1gt

5
Demonstration

• flip.htm

6
Filter properties

• Some filters require additional properties.
• Again these are added in the format of inline
  styles.
• The following code adds a 90 degree yellow shadow
  to a heading
• lth1 style "padding 10
• filter shadow(direction 90,
• color yellow)"gt
• Hello lt/h1gt

7
Demonstration

• shadow.htm

8
Filters in JavaScript

• Filter properties can be set using JavaScript.
• Filter is set up within HTML
• ltimg id cloudimg" src "clouds.gif
• style "filter chroma"gt
• Filter properties and enabled flag set using
  JavaScript
• cloudimg.filters( "chroma" ).color "black"
• cloudimg.filters( "chroma" ).enabled true

9
Demonstration

• chroma.htm

10
Transition Effects

• Blend Transitions
• Use the blendTrans filter
• Enable one image/text item to be replaced by
  another
• Reveal Transitions
• Use the revealTrans filter
• 24 transition effects possible (numbered 0-23)
• Similar to PowerPoint slide transitions
• Configurable durations possible

11
Blend transitionHTML

• ltbody onload "blend()"gt
• ltimg id "image" src "northumberland.jpg"
• style "position absolute left 50 top
  50
• visibility hidden
• width 600 filter blendTrans( duration 6 )
• alt "Transition Image" gt
• lth1 id "text"
• style "position absolute left 60 top
  50
• width 300 filter blendTrans( duration 6
  )" gt
• Northumberland
• lt/h1gt
• lt/bodygt

12
Blend transitionJavaScript

• function blend()
• image.filters( "blendTrans" ).apply()
• image.style.visibility "visible"
• image.filters( "blendTrans" ).play()
• text.filters( "blendTrans" ).apply()
• text.style.visibility "hidden"
• text.filters( "blendTrans" ).play()

13
Demonstration

• blend.htm

14
Reveal transitionHTML

• ltbody onload "blend()"gt
• ltimg id "image" src "northumberland.jpg"
• style "position absolute left 50 top
  50
• visibility hidden
• width 600
• filter revealTrans( duration 6, transition
  8 )
• alt "Transition Image" gt
• lth1 id "text"
• style "position absolute left 60 top
  50
• width 300 filter blendTrans( duration 6
  )" gt
• Northumberland
• lt/h1gt
• lt/bodygt

15
Reveal transitionJavaScript

• function blend()
• image.filters( "revealTrans" ).apply()
• image.style.visibility "visible"
• image.filters( "revealTrans" ).transition 8
• image.filters( "revealTrans" ).play()
• text.filters( "blendTrans" ).apply()
• text.style.visibility "hidden"
• text.filters( "blendTrans" ).play()

16
Demonstration

• reveal.htm

17
ActiveX Contols

• ActiveX controls can be embedded within web
  pages.
• These enable externally programmed functionality
  to be incorporated.
• Can be written in a variety of languages e.g.
  Visual Basic, C.
• Methods can be called from JavaScript to give
  Dynamic HTML effects.
• Many ActiveX controls are available.
• Microsoft specific so work only with IE.

18
Examples

• Data Source Objects (DSO) - used to bind external
  data to HTML.
• Structured Graphics Control - a web interface for
  DirectAnimation, a subset of DirectX. Used for
  creating and manipulation of complex graphics.
• Path Control - element positioning effects.
• Sequencer Control - used with transition filters
  for presentation style effects.
• Sprite Control - used for creating web-based
  animations (similar to animated GIFs)

19
Adding ActiveX controls

• ActiveX controls are added using the ltobjectgt
  tag.
• They are distinguished by a unique class id.
• They are given an id so that they can be accessed
  within JavaScript and HTML.
• Additional parameters are set using the ltparamgt
  tag.
• ltheadgt
• ltobject id "Fruit
• classid "CLSID333C7BC4-460F-11D0-BC04-
• 0080C7055A83"gt
• ltparam name ????" value ????"gt
• lt/objectgt
• lt/headgt

20
Data Binding

• External Data can be bound to web pages using
  ActiveX Data Source Object controls.
• Data is sent from the server to the client.
• All data manipulation occurs on the client.
• Improved performance by eliminating server access
  and network delays.
• Data can be easily sorted and filtered.
• No method of updating data source.
• Example DSO is the Tabular Data Control (TDC).

21
Tabular Data Control

• Data stored in a separate file.
• Added to an HTML page using an ltobjectgt element.
• The following parameters are available
• DataURL name of data file.
• UseHeader set to true to indicate a header row
  in the data (used to reference columns).
• TextQualifier character used to identify strings
  e.g. _at_Liz Gandy_at_.
• FieldDelim character used to delimit fields.
• Sort field name for initial sorting of data (
  indicates ascending, - indicates descending).
• Data is accessed via a recordset.
• Data is bound to HTML using datasrc and datafld
  attributes.

22
TDC Methods

• A number of methods are available to navigate
  through the data
• xxx.recordset.MoveFirst()
• xxx.recordset.MoveNext()
• xxx.recordset.MoveLast()
• The start and end of the data can be detected
  using
• xxx.recordset.EOF
• xxx.recordset.BOF

23
Fruit Stall example

• The Fruit Stall example from Week 5 exercise 4 is
  to be extended.
• The data is to be placed in a separate file
  fruit.txt.
• The tabular data control is used to display this
  data.
• The user clicks the page to move to the next
  item.

24
Data File

• fruit.txt has the following format
• _at_Description_at__at_Cost_at_
• _at_Apples_at_32
• _at_Bananas_at_50
• _at_Oranges_at_25
• _at_Pears_at_67

25
Adding the TDC control

• ltheadgt
• ltobject id "Fruit"
• classid "CLSID333C7BC4-460F-11D0-BC04-0080C7055
  A83"gt
• ltparam name "DataURL" value "fruit.txt" /gt
• ltparam name "UseHeader" value "TRUE" /gt
• ltparam name "TextQualifier" value "_at_" /gt
• ltparam name "FieldDelim" value "" /gt
• lt/objectgt
• ltheadgt

26
Binding Data

• ltpgtltstronggtDescription lt/stronggt
• ltspan id "Description"
• datasrc "Fruit" datafld "Description"gtlt/spangt
  ltbrgt
• ltstronggtCost per kg lt/stronggt
• ltspan id "Cost"
• datasrc "Fruit" datafld "Cost"gt

27
Traversing Data

• ltscript type "text/javascript"gt
• lt!--
• var recordSet Fruit.recordset
• function forward()
• if ( !recordSet.EOF )
• recordSet.MoveNext()
• // --gt
• lt/scriptgt
• __________________________________________________
  __________________________________________________
  ______
• ltbody onclick "forward()"gt

28
Demonstration

• databind1.htm

29
Version 2

• Version 1 does nothing when the end of data is
  reached.
• It would be preferred if the user is informed
  when there are no more records.
• The bound data item can be replaced with text via
  JavaScript.
• The HTML location uses the id attribute of the
  ltspangt tab.
• Text is modified using the innerText property.
• The style is also modified to set the colour to
  red.

30
Setting Text

• function forward()
• if ( !recordSet.EOF )
• recordSet.MoveNext()
• if ( recordSet.EOF )
• Description.style.color "red"
• Description.innerText "No more items"

31
Demonstration

• databind2.htm

32
Version 3

• In this example, form elements are added to move
  through the data.
• Each button calls a function which moves the data
  in the appropriate direction.
• The direction is passed as a parameter.
• The JavaScript switch statement is used to
  determine which way to move the recordset.
• Uses the following recordset methods
• MoveNext()
• MovePrevious()
• MoveFirst()
• MoveLast()

33
Subset of code

• function move(whereTo)
• switch (whereTo)
• case "previous"
• if ( !recordSet.BOF )
• recordSet.MovePrevious()
• if ( recordSet.BOF )
• Description.style.color "red"
• Description.innerText "No more items"
• break
• __________________________________________________
  __________________________________________________
  ______
• ltinput type "button" value "First
• onclick "move( previous' )" gt

34
Demonstration

• databind3.htm

35
Version 4

• Having successfully displayed all data elements
  the fruit stall is now expanded.
• An edit field is added to allow the user to enter
  the quantity of fruit they require.
• A button is provided to calculate the cost of
  fruit.
• Data is obtained from the input box using the
  value property.
• Data is obtained from the data source using the
  bound ltspangt tags innerText property.
• The result is written back to a non-bound ltspangt
  element using its id attribute and the innerText
  property.
• No error checking is provided so correct input
  data is assumed.

36
New HTML elements

• ltpgtltstronggtEnter Quantity lt/stronggt
• ltinput type "text" name "quantity" value 0
• size 4gtlt/Pgt
• ltpgtltinput type "button" value"Calculate
• onClick "count()"gtlt/pgt
• ltpgtltstronggtCost of order lt/stronggt
• ltspan id "OrderCost"gt
• lt/spangt

37
New functions

• function count()
• OrderCost.innerText "" round((quantity.val
  ue
• Cost.innerText) /
  100)
• function round(val)
• return Math.round(val100) / 100

38
Tidying output

• Additional code is required in move function to
  ensure fields are cleared as appropriate when
  data is moved
• // code to move data
• ...
• quantity.value 0
• OrderCost.innerText ""

39
Demonstration

• databind4.htm

40
Binding to a table

• Data can be bound directly to an HTML table.
• The data source is bound within the lttablegt tag.
• The data fields are bound to one row of the
  lttbodygt of the table using the lttrgt and lttdgt
  tags.
• When displayed the table will be expanded to show
  one row for each data record.
• If the table requires additional non-bound rows
  at the top or bottom then these should be added
  using lttheadgt and/or lttfootgt tags.

41
Fruit stall version 5

• Before completing the fruit stall a simplified
  table version has been produced.
• This displays the data records in a two-column
  table.
• A header is provided to include table headings.
• Data is bound to this table but no functionality
  is provided.

42
Table definition

• lttable datasrc "Fruit border "1"gt
• lttheadgtlttrgt
• ltthgtltstronggtDescriptionlt/stronggtlt/thgt
• ltthgtltstronggtCost per kglt/stronggtlt/thgt
• lt/trgtlt/theadgt
• lttbodygtlttrgt
• lttdgtltspan id "Description
• datafld Description"gtlt/spangt
  lt/tdgt
• lttdgtltspan id "Cost
• datafld "Cost"gtlt/tdgt
• lttrgtlt/tbodygt
• lt/tablegt

43
Demonstration

• databind5.htm

44
The final version

• This version takes the simple bound table and
  adds functionality.
• An additional column is provided for the user to
  enter the required quantity.
• A button is provided to calculate the total cost
  of the fruit order.
• As before no error checking is provided.

45
Accessing table data

• In order to calculate the total cost all rows of
  the table must be accessed.
• The HTML code specifies only a single row of the
  table.
• Data cells in this row are given a name e.g. Cost
• The separate data rows of the table are accessed
  via array elements e.g. Cost2.innerText
• Remember that the array index starts at 0.
• The number of rows in the table is obtained
  using
• fruitTable.tBodies.length

46
HTML Table

• lttable id "fruitTable" datasrc "Fruit
  border "1"gt
• lttheadgtlttrgt
• ltthgtltstronggtDescriptionlt/stronggtlt/thgt
• ltthgtltstronggtCost per kglt/stronggtlt/thgt
• ltthgtltstronggtEnter Quantitylt/stronggtlt/thgt
• lt/trgtlt/theadgt
• lttbodygtlttrgt
• lttdgtltspan id "Description
• datafld Description"gtlt/spangt
  lt/tdgt
• lttdgtltspan id "Cost datafld
  "Cost"gtlt/tdgt
• lttdgtltinput type "text" name
  "quantity
• value 0 size 14gtlt/tdgt
• lttrgtlt/tbodygtlt/tablegt

47
Calculation

• function count()
• var i 0, total 0
• var numRows fruitTable.tBodies.length
• for (i 0 i lt numRows i)
• total total (quantityi.value
• Costi.innerText)
• OrderCost.innerText "" round(total / 100)
• __________________________________________________
  __________________________________________________
  ______
• ltpgtltinput type "button" value"Calculate
• onClick "count()"gtlt/pgt

48
Demonstration

• databind6.htm

49
Resources

• Material for this lecture was adapted from
  Chapters 15 and 16 of
• "Internet World Wide Web How to Program"
  Deitel, Deitel Nieto Prentice Hall ISBN
  0-13-030897-8.
• Example programs can be found on the CDROM
  accompanying this book.
• Remember if you copy or adapt code from these
  examples then you should reference them.