Advanced Programming Web Programming

1. Advanced ProgrammingWeb Programming Rabie A. Ramadan

2. "A complex system that works is invariably found to have evolved from a simple system that worked.... A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system." - John Gall in Systemantics: How Systems Really Work and How They Fail

3. Knowledge of these simple mechanisms does not come easy. It usually resides in the minds of experienced developers and architects. It is an important part of the tacit knowledge they bring to projects. The problem

4. What Is A Pattern? Patterns for Building Enterprise Solutions

5. Documenting simple mechanisms that work Providing a common vocabulary and taxonomy Enabling solutions to be described concisely as combinations of patterns Enabling reuse of architecture, design, and implementation decisions Pattern Descriptions Help Architects And Designers By…

6. You are building a quote application, which contains a class that is responsible for managing all of the quotes in the system. It is important that all quotes interact with one and only one instance of this class. How do you structure your design so that only one instance of this class is accessible within the application? A simple solution to this problem is to create a QuoteManager class with a private constructor so that no other class can instantiate it. This class contains a static instance of QuoteManager. Example

8. You are designing a Web-based quote application containing a great deal of business and presentation logic, which, in turn, depends on numerous platform software components to provide a suitable execution environment. How do you organize your system at a high level to be flexible, loosely coupled, and yet highly cohesive? One solution to this problem involves organizing your system into a series of layers. one layer each for presentation, business logic, and data access. Patterns at Different Levels

9. Patterns at Different Levels (layers pattern)

11. In addition to managing complexity by decomposition (the essential problem solved by Layers), business solution developers also need to organize for effective reuse of business logic and conserve valuable connections to expensive resources such as databases. One way to solve this problem is by using the Three-Layered Application pattern. Three-Layered Application pattern

13. Today there are dozens of patterns related to software with more emerging daily. This abundance of patterns creates a new set of challenges. How can a developer identify those patterns that are most relevant to the task at hand? Is the collection of patterns sufficient to describe complete solutions? Organizing Patterns

14. The base element of object-oriented programming is a class. However, a single class is not very meaningful apart from its relationship to other classes that make up the solution. Each pattern typically describes a cluster of classes, highlighting the relationships and interactions between them. Pattern of Patterns

15. To begin organizing patterns according to relationship, visualize a set of patterns as small circles Pattern of Patterns

16. If you draw a line between each pair of patterns that share some relationship, you get a picture like this Pattern of Patterns

17. Charting the relationships between patterns helps you navigate from one pattern to a set of related patterns. However, it does not yet tell you where to start. Example: if you are building a Web application, should you read the Model-View-Controller pattern first or should you look at Page Cache instead? Should you look at a Broker as well? Pattern Clusters

18. Pattern Clusters (microsoft.net)

19. Architecture Patterns provides a set of predefined subsystems, specifies their responsibilities, and includes rules and guidelines for organizing the relationships between them. Design Patterns "A design pattern provides a scheme for refining the subsystems or components of a software system, or the relationships between them Different Levels of Abstraction

20. Design Patterns "A design pattern provides a scheme for refining the subsystems or components of a software system, or the relationships between them. Different Levels of Abstraction

21. Implementation Patterns : refers to more detailed, programming-language-specific patterns. The scope of this guide is not just software, but software-intensive systems, including the deployment of the software onto hardware processing nodes to provide a holistic business solution. Different Levels of Abstraction

22. Viewpoints

23. Viewpoints

24. Web Presentation Cluster

25. How do you modularize the user interface functionality of a Web application so that you can easily modify the individual parts? User Interface changes more frequently Same data displayed different ways Different skill sets required for UI design and App dev Separate the modeling of the domain, the presentation, and the actions based on user input into separate classes Model-View-Controller • Model - manages the behavior and data of the application domain • View - display of information • Controller - interprets the mouse and keyboard inputs

26. The controller modifies the model and then informs the view that the model has changed and should be refreshed. In HTTP: There is no simple way in the browser to get asynchronous updates from the server. The browser displays the view and responds to user input, but it does not detect changes in the data on the server. Only when the user explicitly requests a refresh is the server interrogated for changes. Behavior of the passive model (Example)

27. The model changes state without the controller's involvement. Other sources are changing the data and the changes must be reflected in the views. Example: Consider a stock-ticker display. You receive stock data from an external source and want to update the views (for example, a ticker band and an alert window) when the stock data changes. Because only the model detects changes to its internal state when they occur, the model must notify the views to refresh the display. Behavior of the active model

28. HTML Basics

29. Basic HTML Document Format <HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML> See what it looks like:

30. Reverse engineering current browsers Compatible with existing browsers and web pages Thoroughly defines error handling HTML 5 Parsing

31. New Structures <header> <divid="header"> <nav> <div id="nav"> <section> <divid="content"> <aside> <divid="right"> <article> <divclass="article"> <footer> <divid="footer">

32. <datagrid> <canvas> Rating: <meter> <progress> New Semantics <m> <command> <details> <dialog> <figure> <time> <menu> <embed> And many more…

33. <inputtype="text"list="list"> <datalistid="list"> <optionvalue="Mr"> ... </datalist> <inputtype="url"> <inputtype="email"> <inputtype="datetime"> <inputtype="number"> <inputtype="range"> New Controls And many more…

34. Colonel Jack O'Neill Remove Major Sam Carter Remove Civilian Daniel Jackson Remove Repetition Model Team Members <trrepeat-template="member"repeat="0"> <td><inputtype="text"name="member0.rank"></td> <td><inputtype="text"name="member0.name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trrepeat-template="member"repeat="1"> <td><inputtype="text"name="member1.rank"></td> <td><inputtype="text"name="member1.name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trid="member"repeat="template"repeat-start="2"> <td><inputtype="text"name="member[member].rank"></td> <td><inputtype="text"name="member[member].name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trid="member"repeat="template"repeat-start="2"> <td><inputtype="text"name="member[member].rank"></td> <td><inputtype="text"name="member[member].name"></td> <td><buttontype="remove">Remove</button></td> </tr> Rank Name Remove Add Team Member Add Team Member Alien Teal’c Continue Remove <buttontype="add"template="member">Add Team Member</button>

35. Client-Side Form Validation Regular Expressions <inputtype="text"pattern="[A-Za-z0-9_\-]+"> Minimum and Maximum Values <inputtype="range"min="20"max="80"> MaxLength for textarea <textareamaxlength="2000"></textarea> Required Fields <inputtype="email"required="required"> And many more…

36. XML Technologies and Applications

37. SampleXMLData <item> <pnum>10507</pnum> <quantity>1</quantity> </item> <item> <pnum>10508</pnum> <quantity>2</quantity> </item> <item> <pnum>10509</pnum> <quantity>3</quantity> </item> </items> </order> ... </orders> <orders> <order> <onum>1020</onum> <takenBy>1000</takenBy> <customer>1111</customer> <recDate>10-DEC 94</recDate> <items> <item> <pnum>10506</pnum> <quantity>1</quantity> </item>

38. <orders> <order> <onum>1020</onum> <takenBy>1000</takenBy> <customer>1111</customer> <recDate>10-DEC 94</recDate> <items> <item> <pnum>10506</pnum> <quantity>1</quantity> </item> SampleData Parsing Event startDocument <item> <pnum>10507</pnum> <quantity>1</quantity> </item> <item> <pnum>10508</pnum> <quantity>2</quantity> </item> <item> <pnum>10509</pnum> <quantity>3</quantity> </item> </items> </order> ... </orders> endDocument

39. <orders> <order> <onum>1020</onum> <takenBy>1000</takenBy> <customer>1111</customer> <recDate>10-DEC-94</recDate> <items> <item> <pnum>10506</pnum> <quantity>1</quantity> </item> SampleData <item> <pnum>10507</pnum> <quantity>1</quantity> </item> <item> <pnum>10508</pnum> <quantity>2</quantity> </item> <item> <pnum>10509</pnum> <quantity>3</quantity> </item> </items> </order> ... </orders> endElement startElement

40. <orders> <order> <onum>1020</onum> <takenBy>1000</takenBy> <customer>1111</customer> <recDate>10-DEC-94</recDate> <items> <item> <pnum>10506</pnum> <quantity>1</quantity> </item> SampleData <item> <pnum>10507</pnum> <quantity>1</quantity> </item> <item> <pnum>10508</pnum> <quantity>2</quantity> </item> <item> <pnum>10509</pnum> <quantity>3</quantity> </item> </items> </order> ... </orders> characters

41. Two parsing methods that implement W3C standards for accessing XML SAX (Simple API for XML) event-driven parsing “serial access” protocol Read only API DOM (Document Object Model) convert XML into a tree of objects “random access” protocol Can update XML document (insert/delete nodes) XML-Parsing Standards

42. <?xml version="1.0"?> . . . SAX Parsers When you see the start of the document do … SAX Parser When you see the start of an element do … When you see the end of an element do …

43. The DOM Tree

44. Application API XML File DOM Parser DOM Tree Using a DOM Tree

45. Node Navigation getPreviousSibling() getFirstChild() getChildNodes() getParentNode() getLastChild() getNextSibling()

46. The DOM object built by DOM parsers is usually complicated and requires more memory storage than the XML file itself A lot of time is spent on construction before use For some very large documents, this may be impractical SAX parsers store only local information that is encountered during the serial traversal Hence, programming with SAX parsers is, in general, more efficient SAX vs DOM Parsing: Efficiency

47. Servlet

48. A Servlet is a Java program that extends the capabilities of servers. Inherently multi-threaded. Each request launches a new thread. Input from client is automatically parsed into a Request variable. What is a Servlet?

49. Servlet Instantiation: Loading the servlet class and creating a new instance Servlet Initialization: Initialize the servlet using the init() method Servlet processing: Handling 0 or more client requests using the service() method Servlet Death: Destroying the servlet using the destroy() method Servlet Life Cycle

50. Each HTTP Request type has a separate handler function. GET -> doGet(HttpServletRequest, HttpServletResponse) POST -> doPost(HttpServletRequest, HttpServletResponse) PUT -> doPut (HttpServletRequest, HttpServletResponse) DELETE -> doDelete (HttpServletRequest, HttpServletResponse) TRACE -> doTrace (HttpServletRequest, HttpServletResponse) OPTIONS -> doOptions (HttpServletRequest, HttpServletResponse) Handler Functions