1. DHTML1-1 Dynamic HTML: Filters & Data Binding with Table Xingquan (Hill) Zhu xqzhu@cse.fau.edu

2. DHTML1-2 DHTML  Filters and Transitions  Transparency with the chroma Filter  Create motion with blur  Adding shadow to text  Data Binding with Tabular Data Control  Simple data binding  Binding to an img  Binding to a table

3. DHTML1-3 Filters and Transitions  Filters  Cause changes that are persistent  Transitions  Temporary  Allow transfer from one page to another with pleasant visual effect For example, random dissolve  Filter control: CSS: DOM: Imgid.style.filter=“filtername(name1=val1,name2=val2…)“; Imgid.filters(“filtername”).name1=val1; Imgid.filters(“filtername”).name2=val2; <div id=“filtering” style=“filter:filtername(parameters)” http://www.irt.org/articles/js139/index.htm

4. DHTML1-4 Transparency with chroma Filter  chroma filter applies transparency effects dynamically  Without using a graphics editor to hard- code transparency into the image  onchange  Fires when the value of a form changes Chroma.html

5. DHTML1-5 Blur  Blur filter creates an illusion of motion by blurring text or images in a certain directionblur.htmlblur.html  Add Adds a copy of the original image over the blurred image (true|false)  Direction Determines in which direction the blur filter is applied  strength Determines how strong the blurring effect is

6. DHTML1-6 Adding shadow to text  Shadow filter  Three dimensional appearance Direction Color Strength Shadow.html

7. DHTML1-7 blendTrans vs revealTrans Transition  blendTrans  Create smooth fade-in/fade-out effect  Filter:blendTrans(duration=x) Filters.blendTrans.apply(); Filters.blendTrans.visibility=“hidden|visible” Filters.blendTrans.play(); Blendtrans.htmlBlendtwopictures.html Onfilterchange=“event()”  revealTransrevealtrans_1.htmlrevealtrans_1.html  Filter:revealTrans(duration=x, transition=x)

8. DHTML1-8 DHTML  Filters and Transitions  Transparency with the chroma Filter  Create motion with blur  Adding shadow to text  Data Binding with Tabular Data Control  Simple data binding  Binding to an img  Binding to a table

9. DHTML1-9 Data Binding  Data Binding  Data no longer reside exclusively on the server  Data can be maintained on the client  Eliminate server activity and network delays  Data Source Objects (DSOs)  Tabular Data Control (TDC) (Active-x control)

10. DHTML1-10 Simple Data Binding  Data file  Header row Specifies the names of the columns below  Text qualifiers ( @ ) Enclose data in each field  Field delimiter ( | ) Separate each field  Recordset HTMLstandardcolor.text

11. DHTML1-11 Simple data binding <param name = "DataURL" value = "HTMLStandardColors.txt" /> Access data field Colors.recordset(“ColorName”); introdatabind.html

12. DHTML1-12 Binding to an img  Many different types of XHTML elements can be bound to data sources  Binding to an img element Changing the recordset updates the src attribute of the image Bindimg.html

13. DHTML1-13 Binding to a table …  Tablebind.html Tablebind.html  Sorting table data Sorting.html

14. DHTML1-14 DHTML  Filters and Transitions  Transparency with the chroma Filter  Create motion with blur  Adding shadow to text  Data Binding with Tabular Data Control  Simple data binding recordset  Binding to an img  Binding to a table JavaScript Kit http://javascriptkit.com/cutpastejava.shtml