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

1. Dynamic HTML: Filters & Data Binding with TableXingquan (Hill) Zhuxqzhu@cse.fau.edu DHTML

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 DHTML

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: <img id=“imgid” src=“xx” alt=“xx” style=“filter:filtername(name1=va1, name2=val2,….)” /> 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)” <img id=imgid” src=“xx” alt=“xx” /> </div> http://www.irt.org/articles/js139/index.htm DHTML

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 DHTML

5. Blur • Blur filter creates an illusion of motion by blurring text or images in a certain direction blur.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 DHTML

6. Adding shadow to text • Shadow filter • Three dimensional appearance • Direction • Color • Strength Shadow.html DHTML

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()” • revealTrans revealtrans_1.html • Filter:revealTrans(duration=x, transition=x) DHTML

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 DHTML

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) DHTML

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 DHTML

11. Simple data binding <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt" /> <param name = "UseHeader" value = "TRUE" /> <param name = "TextQualifier" value = "@" /> <param name = "FieldDelim" value = "|" /> </object> <span id=“colorId” datasrc=“#Colors” datafld=“ColorName”></span> <span id=“colorRGB” datasrc=“#Colors” datafld=“ColorHexRGBValue”></span> Access data field Colors.recordset(“ColorName”); introdatabind.html DHTML

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 <object id=“Images” > </object> <img datasrc=“#Images” datafld=“image” … /> Bindimg.html DHTML

13. Binding to a table <object id=“colors” > </object> <table datasrc=“#color”>… <td><span datafld=“ColorName”></span></td> </table> • Tablebind.html • Sorting table data Sorting.html DHTML

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 DHTML