1. Session 12 Dynamic HTML: Filters and Transitions, Data Binding with Tabular Data Control Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5

2. Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : menghasilkan web page dengan menerapkan konsep Dynamic HTML: CSS, Event Model, Filter, Transition, dan Data Binding (C3)

3. 12.1 Creating Gradients with alpha 12.2 Making Text glow 12.3 Creating Motion with blur 12.4 Using the wave Filter 12.5 Advanced Filters: dropShadow and light 12.6 Transitions I: Filter blendTrans 12.7 Transitions II: Filter revealTrans 12.8 Simple Data Binding 12.9 Moving a Recordset 12.10 Binding to an IMG 12.11 Binding to a TABLE 12.12 Sorting TABLE Data 12.13 Advanced Sorting and Filtering 12.14 Data Binding Elements Outline Materi

4. 12.1 Creating Gradients with alpha Gradient effect –Gradual progression from starting color to target color alpha filter –style property What style opacity applied –0 : uniform opacity –1 : linear gradient –2 : circular gradient –3 : rectangular gradient –opacity and finishopacity properties Percentages for opacity of specified gradient –startX, startY, finishX, finishY Specify x-y coordinates for start and finish of gradient Sample Program

5. 12.2 Making Text glow glow filter –Add aura of color around text –Specify color and strength –Add padding if large strength cuts off effect with element borders Sample Program

6. 12.3 Creating Motion with blur blur filter –Creates illusion of motion –Blurs text or images in a certain direction –Three properties: add –true adds a copy of original image over blurred image direction –Angular form (like shadow filter) strength –Strength of blur effect Sample Program

7. 12.4 Using the wave Filter wave filter –Apply sine-wave distortions to text and images –Properties: add –Adds a copy of text or image underneath filtered effect freq –Frequency of sine wave »How many complete sine waves applied phase –Phase shift of sine wave strength –Amplitude of sine wave –Processor intensive Sample Program

8. 12.5 Advanced Filters: dropShadow and light dropShadow filter –Places blacked-out version of image behind original image –Offset by specified number of pixels offx and offy properties –color property Sample Program continue..

9. 12.5 Advanced Filters: dropShadow and light Light filter –Simulates effect of light source –addPoint method Adds point light source addPoint (xSource, ySource, height, R, G, B, strength%); –addCone method Adds a cone light source addCone (xSource, ySource, height, xTarget, yTarget, R, G, B, strength%); Sample Program

10. 12.6 Transitions I: Filter blendTrans Transitions –Set as values of filter CSS property blendTrans transition –Creates a smooth fade-in/fade-out effect –Parameter duration Determines how long the transition will take Sample Program1 Sample Program2

11. 12.7 Transitions II: Filter revealTrans revealTrans filter –Transition using professional-style transitions –From box out to random dissolve –24 different transitions Sample Program

12. 12.8 Simple Data Binding With DHTML –Send large amount of data to client –IE enables processing to begin immediately after a portion of data arrives Data binding –Data maintained on client –Changes to data do not propagate back to server –To bind external data to HTML elements Data Source Objects (DSOs) –IE5: Tabular Data Control (TDC) continue..

13. 12.8 Simple Data Binding Tabular Data Control (TDC) –ActiveX control –Added with OBJECT element Header row –Specifies names of columns below –Set UseHeader parameter to true Text qualifiers Field delimiters Recordset –A set of data Sample File HTML Color Table Data Sample Program

14. 12.9 Moving a Recordset recordSet methods –MoveNext –MovePrevious –MoveFirst –MoveLast recordSet properties –BOF true if at beginning of file –EOF true if at end of file Sample Program

15. 12.10 Binding to an IMG Many different types of HTML elements can be bound to data sources –IMG element Sample Data Source File Sample Program

16. 12.11 Binding to a TABLE Add DATASRC attribute to TABLE tag <TABLE DATASRC = “#Colors” STYLE = “border-style: ridge; border-color: darkseagreen; background-color: lightcyan”> Add DATAFLD attribute to SPAN tags that reside in table cells Sample Program

17. 12.12 Sorting TABLE Data Sort property of TDC – Reset method displays data in new sort order By default, column sorted in ascending order –To sort in descending order, precede column name with minus sign ( - ) Sample Program

18. 12.13 Advanced Sorting and Filtering TDC sorts multiple columns Filtering –Filter property Filter out all records that do not have a cell matching the text specified ColumnName = FilterText cursor CSS attribute –Specifies mouse cursor display –SPAN {cursor: hand;} Specifies the hand cursor Sample Data File Sample Program

19. 12.14 Data Binding Elements © Copyright 2001 by Deitel & Associates. All Rights Reserved

20. End of Session 12