Glen R. D’Abate Acmeware, Inc. www.acmeware.com

1. Web-based Application Development using a MEDITECH Data Repository &Microsoft Visual Web Developer 2005 Glen R. D’Abate Acmeware, Inc. www.acmeware.com

2. Course Agenda • Introduction & History • Course Overview and Objective • Web Developer Implementation and Interact Development Environment (IDE) • Using Web Developer Data Bound Controls • Example Project – Downtime Patient Registration using the Data Repository • Questions & Discussions

3. Acmeware / Data Repository History • Instructor background • Acmeware, Inc. • Recent Acmeware Application Development Strategies (Access, Visual Basic, Visual C++, Visual InterDev) • Why Visual Web-Developer 2005

4. Course Format • PowerPoint Presentation to keep me on Track • Demonstrate Concepts using active session of Visual Web Developer 2005 • Demonstrate a Downtime Registration Routine that was written using Visual Web Developer • Encourage Questions and Comments During the Training

5. Objective • Be able to rapidly develop and deploy web-based applications that make use of the DR • Make these applications look, feel, and act like professionally developed web-based products • Minimize the need to develop code that has to be supported • Use application data marts with data derived from the DR

6. Don’t Reinvent the Web-Wheel • Web-Application programming tools from Microsoft have been iffy at best • Front-Page has limitation building a robust interactive environment and database manipulation • Visual InterDev (Visual Studio 6.0 was a bust) • Other Products exist (e.g., Cold Fusion) but we’ve tried to stay all Microsoft • Visual Web-Developer Finally brings all of the pieces together!

7. Helpful Prerequisites • Familiarity with MEDITECH HCIS • Familiarity with Data Repository (we are using MEDITECH’s but applies to MSM or TSG) • Knowledge of SQL Server or RDMS • Web design basics (HTML tags…) • Programming experience (C# or Visual Basic are ideal, but we won’t be doing much anyway) • Familiarity with Microsoft development environments • Object Oriented Programming (i.e., Attributes, Methods, Events)

8. DR / Web Form Application Development Schematic Visual Web Developer on “Development PC” Data Repository “Data Server” Internet Information Server “Web Server” Client PC running the web-based application using DR data

9. Section #1 Installing Visual Studio Web Developer 2005 Express Edition & Reviewing its Interactive Development Environment

10. About Visual Web Developer Express 2005 • Microsoft's Words: • Easy to Use • Fun • Easy to Learn Location where Visual Web Developer can be downloaded

11. Installing Web Developer Typical Microsoft Application Installation Wizard

12. MSDN Provides Product Documentation SQL Server 2005 Express Provides a Location to Build Databases – We will use the DR on a SQL Server 2000 Platform

13. Visual Studio 8, ASP.NET 2.0 and SQL Server 2005 appear to run fine along side of SQL Server 2000, Visual Studio 7, and ASP.NET 1.1 Put aside a solid hour to download and install software You must register software or you can only use it for 30 days

14. Launching Web Developer Visual Web Developer and Microsoft SQL Server 2005 will be added to the Startup menu

15. Default Start Page MRU List Other Resources Microsoft Related News

16. Creating a New Web Form App New Web Site Dialog Name the Web Site Project From Toolbar Menu, Select New Web Site Select Language – For This Course It Hardly Matters buy we will Choose C# (VB or J#)

17. Web Developer New Project Menu Bar Toolbars Page Tabs Solutions Explorer Page Design View(s) Toolbox Error List Property Design Views Available for a Specific Page

18. Visual Studio File Locations Project Control Files Project Pages

19. Demonstration #1 – Setting Up Empty Project & Reviewing IDE

20. Section #2 IDE Details & Our First Application “MUSE IS GREAT”

21. In This Section • Take a brief look under the hood of ASP.NET 2.0 and Web Application Processing • Add a Label and Button objects to a Web Page and modify object properties • Discuss Debugging Web Applications • Take a more detailed look at the IDE focusing on where and how code is entered • Create our first interactive Web Application project

22. What Happens When We Running a Web Application? • A page “request” is made to the web server based on some action (e.g., default page opening, button selected, drop-down box changed, etc.) • A page response is “served” from the web-server (development server or IIS) to the client’s browser • In the process of serving the page, the code we develop for a web page is essentially converted into a “mini-application” that runs from beginning to end within the client’s browser in milliseconds (as opposed to a typical executable) • The mini-application is constructed as HTML code using: • HTML code we have placed on the page • Server side objects we’ve place on the page • Event handlers that are responding to an action that caused the page request (e.g., selected a button) • State information about the Application or Session that is stored on the server or passed with the Page request

23. Design View with Objects Start Debugging Button Object Web Pages Label Object Drag & Drop objects from Toolbox to Design View Label Properties

24. Debugging a Web Application • Visual Web Developer Express includes a Development Web Server that runs on a local system (no need for IIS) • This development web-server is completely secure to outside world (i.e., network attack) Web.config file is required for debugging Development server can be seen in notification area application icons

25. More on Debugging ASP.NET 2.0 Web Site Administration Tool Powerful debugging and tracing capabilities beyond the scope of this course

26. Source View of Web Page Runtime Engine used to translate ASP.NET 2.0 Code to HTML Everything in Design View is represented in Source View code – nothing is hidden HTML tags and Active Server Page (ASP) server control code for those who are familiar

27. View of Web App in Browser Development server can be seen in address window Page Objects The Web Page is “Posted” to the client initially. User action in the Web Page (e.g., pressing a button) can result in a “Post Back” of the current Page or initiation of a new Page

28. HTML Code Behind Web App ASP.NET “State” Information kept in __VIEWSTATE as a hidden object. An example would be data already entered in a textbox control. Input type of “submit” creates a Button Button Text Absolute Positioning Label Text HTML Code

29. Code Behind “Code Behind” can exist in .aspx file (traditional), or in a dependant aspx.cs file as shown here Code Behind is processed based on an event and is used to construct the Page Response in original Page or Post Back Double Mouse-Click on Object to Bring up “Code Behind”

30. Code Behind Revealed The using statement is similar to “Import” in VB and is used by Intellisense and the compiler Looks Like DHTML Code for those familiar Also looks like Access Event Handlers Intellisense brings up “Text” property for infoLabel Label object This is about the extent of “programming” we will perform in this course

31. Intellisense & Tool Tips C# syntax requires “;” Property Intellisense brings objects as well as object attributes and methods Mouse over brings up tool tip with valuable information

32. Demonstration #2 – “Muse Is Great” Application

33. Section #3 More on Web Controls, Web Formatting, & Adding User Interface Validation

34. In This Section: • Load Several new Controls onto our Web Page and Discuss Commonly used Attributes and Methods • Use the Visual Studio Tools to Layout our Page • Create a Mini Provider Dictionary Form • Add Data Validation Testing to Our Form

35. Add a new Web Page to Project Many Types of File Templates are Available. We Will Only Look at a Few Select Web Form Again We Will Place the Code in a Separate aspx.cs File Name it Again, We’ll Select C#, But it Hardly Matters

36. Provider Dictionary Controls • Our Provider Dictionary Will Collect the Following Information: • Provider Name, New Files

37. Relative Versus Absolute Positioning Layout Controls Position Controls Absolute Positioning Allows Object to Be Placed Anywhere on Page

38. Formatting Objects on the Page Objects Added to our Test Page Always Set ID Property Evenly Spaced Format Controls Left Aligned

39. CheckBox Properties Name Object (New Convention Uses Descriptive Name Followed By Object Type) Set Default Value

40. Drop Down Control Quick Tasks Button Allows Easy Access to Attributes and Methods Data Can be Entered Directly using Edit Items, or Can Be Derived From a Data Source (e.g. the Data Repository) DropDownList Objects use ListItem Collections. This Dialogue is Available to Hardcode Values into the ListItem Collection. Enter a Default Value of “-SELECT-” to Prompt User to Make An Entry Return a Numeric Value

41. Radio Buttons for Specialties RadioButtonList Also Uses a ListItem Collection RadioButtonList by Default Forms a Group So The System Knows that When Any Radio Button Is Toggled On, All Other Items in the Group Should be Toggled Off

42. Provider Dictionary So Far – in the Browser Our Page Doesn’t Really Do Anything Yet! Defaults to Active As Defined -SELECT- Entry (0) No Default Value Entered

43. Data Validation Controls – Required Field Validation Validation Controls Entry for Provider Is Required Text Attribute Determines What Displays In Validation Control Select Control to Which The Validation Control is Validating

44. Compare Validation Control Compares Selection with Default Value of “-SELECT-” to be Certain Selection is Made

45. Summary Validation Control A Summary Validation Control is Used by the Error Text Attribute of other Validation Controls to Determine the Error Message A Summary Validation Control is Used to Consolidate All Errors in a Single Place on The Page

46. Demonstration #3 – Form Controls and Data Validation

47. Section #4 Web Application State and the Persistence of Data

48. In This Section • Discuss the Page Objects and the Major Component Objects that Comprise the Page • Review PostBack And How Data Is Automatically Passed From Page to Page • Review Three Mechanisms to Maintain State Variables in Your Application

49. Page Object - Components • Request Object (Information about the request from the web-browser. Data in an address bar, browser type, data in http://get, etc.) • Response & Form Object (Information sent back out to the web page in response to the users request. (e.g. Response.Write, Response.Redirect). • ViewState Object (Keeps a Page’s state values as it is posted back from the server • Application Object (Information about the application as a whole) • Session Object (Information about activity from a specific user at a specific time on our web site)

50. Request Object Information in the Request object can be seen by entering it in TextBoxes and displaying this information on a Page Request Object attributes can be used to determine what action to take in Event handler code. An application could be written to function differently for a “super user” and a regular user using the Request object