1. December 13, 2015 1 December 13, 2015December 13, 2015December 13, 2015 Azusa, CA Sheldon X. Liang Ph. D. Computer Science at APU Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/ CS 363 Web Programming

2. December 13, 2015 2 A silent night … … Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

3. December 13, 2015 3 A silent night … … Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

4. December 13, 2015 4 In the beginning, our project is formless … We’re planning GUI form first Then we deign interface form, plan properties and Basic code … Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

5. December 13, 2015 5 After we got GUI form, programming … Now we define interface, set properties and write Basic code … We’re programming Project Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

6. December 13, 2015 6 What’s needed to bridge the gap between… Planning Programming VISION is our Golden Gate Bridge Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

7. December 13, 2015 7  Form Planning vs. Programming  Blank-filling under Framework  Declaration vs. Scope & Lifetime  Incremental Building Blocks  Menu and Dialog Boxes (sub-form)  Self-defined Procedures (Function) Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/ CS363 Web Programming Event-Driven VB

8. December 13, 2015 8  Project Planning vs. Programming  Two kinds of structures (seq / sel)  Four kinds of controls  Three kinds of data  One kernel in mind: you do less but re-use Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

9. December 13, 2015 9  Project Planning vs. Programming  Controller controls  Four kinds of controls appearing on Forms  Mute controls  Controlled controls  Contributor controls They will do nothing dynamically, just display information. You do not need to consider them anymore in programming. They not only do a lot of things, but also stimulate other controls to react. You need to give careful consideration in coding They are passively affected by other controls and provide main showcase for calculation. You need to put data for display They are happy to join others’ calculation by contributing their data. You need to pick data from them for calculation Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

10. December 13, 2015 10  Project Planning vs. Programming  Controller  Four kinds of controls appearing on Forms  Mute  Controlled  Contributor Group Box and Most Labels It only needs its “.Text” property, never needs a ”.Name” property, that is to say, you even do not need to give a name to it. In your code, you won’t do anything. Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

11. December 13, 2015 11  Project Planning vs. Programming  Four kinds of controls appearing on Forms Most Buttons It needs not only its “.Text” property, but also a serious “.Name” property, this is because some auto-generated code is strongly tied up with it. Double-click will start your programming.    Mute  Controlled  Contributor  Controller Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

12. December 13, 2015 12  Project Planning vs. Programming  Four kinds of controls appearing on Forms  Double Click to start Your serious name should be: orderBtn  Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

13. December 13, 2015 13  Project Planning vs. Programming  Four kinds of controls appearing on Forms Some Labels and TextBoxes It usually has an empty “.Text” property. It needs a serious “.Name” property, and a variable for storing datum. Finally it is required to put datum back. i.e., totalLabel (name), totalDecimal (variable) totalLable.Text = totalDecimal.toString()  Mute  Controlled  Contributor  Controller Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

14. December 13, 2015 14  Project Planning vs. Programming  Four kinds of controls appearing on Forms Text Box, Radio and Check Box It usually has an companied “.Text” property. It needs a serious “.Name” property, variable (or constant) related to it. Generally it just contribute something for calculation, i.e., quantityTextBox (name), quantityInteger (variable) quantityInteger = Integer.Parse (quantityTextBox.Text)  Mute  Controlled  Contributor  Controller Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

15. December 13, 2015 15  Project Planning vs. Programming  Inner Identifier .Name property  Three kinds of data  Appearance .Text property  Variable/Const  store data at run time This property is for users to look at while using the form, so brief, exact, and precise TEXT will be good for them. i.e., Order Coffee, Clear, Exit This property is for designers to identify controls while design form and programming, so easy to remember will be great. i.e., quantityTextBox (or quantityTB), totalLabel (or totalLB) This is for data storage in calculation, pickup and conversion, so data type postfix to the variable will be good for programmers. i.e., quantityInteger, totalDecimal, taxDecimal, TAX_RATE_Decimal Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

16. December 13, 2015 16  Project Planning vs. Programming  Inner Identifier  Three kinds of data  Appearance  Variable/Const All information appearing on the form Their purpose appearing on the form is to prompt users to know the meaning, so that they are guided to further operation. i.e.,.Text properties  Bill Form, Coffee Selection, Cappuccino, Espresso, Latte, Iced Latte, Iced Cappuccino, Your Order, Quantity, takeout, Discount15%, Oder, Total Tax, Discount, Total Due, Enjoy yourself (Clear) Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

17. December 13, 2015 17  Project Planning vs. Programming  Inner Identifier  Three kinds of data  Appearance  Variable/Const Every control has an inner identifier Their purpose is to let form designer and programmer use their various properties through the.Name, but for mute controls, just take the default one. cappuccinoRadioButton espressoRadioButton quantityTextBox orderButton quantityTextBox Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

18. December 13, 2015 18  Project Planning vs. Programming  Inner Identifier  Three kinds of data  Appearance  Variable/Const Contributor & Controlled controls need variables to hold data Their purpose is to let programmer hold data for calculation, conversion, and other use quantityInteger totalDecimal taxDecimal discountDecimal totalDueDecimal Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

19. December 13, 2015 19  Form Planning vs. Programming  Blank-filling under Framework  Declaration vs. Scope & Lifetime  Incremental Building Blocks  Menu and Dialog Boxes (sub-form)  Self-defined Procedures (Function) Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/ CS363 Web Programming Event-Driven VB

20. December 13, 2015 20  Blank-filling under framework  A Perfect VISION Form Math description Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

21.  Blank-filling under framework  A Perfect VISION Form Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming

22. December 13, 2015 22  Form Planning vs. Programming  Blank-filling under Framework  Incremental Building Blocks  Menu and Dialog Boxes (sub-form)  Self-defined Procedures (Function)  Declaration vs. Scope & Lifetime CS363 Web Programming Event-Driven VB Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

23.  Incremental Building Blocks  Simple Form and Brief Operation Simple Form  Menu Window and Integrated Forms  Father Window and Common Dialog Box Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

24.  Declaration vs. Scope & Lifetime  Variable Scope  accessible privilege  Variable lifetime  live an actual life Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/

25. December 13, 2015 25 That is all Thank you very much! Questions? Computer Science & Software Engineering CS363 Web Programming: Event-Driven Programming Azusa Pacific University, Azusa, CA 91702, Tel: (800) 825-5278 Department of Computer Science, http://www.apu.edu/clas/computerscience/http://www.apu.edu/clas/computerscience/