Web-based Application Development using a MEDITECH Data Repository &Microsoft Visual Web Developer 2005

Glen R. D’AbateAcmeware, Inc.www.acmeware.com

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

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

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

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

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!

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)

DR / Web Form Application Development Schematic

Visual Web Developer on “Development PC”

Internet Information Server “Web Server”

Data Repository “Data Server”

Client PC running the web-based application using DR data

Section #1

Installing Visual Studio Web Developer 2005 Express Edition &Reviewing its Interactive Development Environment

About Visual Web Developer Express 2005 Microsoft's Words:

Easy to Use Fun Easy to Learn

Location where Visual Web Developer can be downloaded

Installing Web Developer

Typical Microsoft Application Installation Wizard

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

Put aside a solid hour to download and install software

You must register software or you can only use it for 30 days

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

Launching Web Developer

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

Default Start Page

Microsoft Related News

MRU List

Other Resources

Creating a New Web Form App

From Toolbar Menu, Select New Web Site

Name the Web Site Project

Select Language – For This Course It Hardly Matters buy we will Choose C# (VB or J#)

New Web Site Dialog

Web Developer New Project

Toolbox

Error List Property

Solutions Explorer

Page Design View(s)

Toolbars

Menu Bar

Design Views Available for a Specific Page

Page Tabs

Visual Studio File Locations

Project ControlFiles

Project Pages

Demonstration #1 – Setting Up Empty Project & Reviewing IDE

Section #2

IDE Details & Our First Application “MUSE IS GREAT”

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

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

Design View with Objects

Button Object

Label Object

Label Properties

Web Pages

Start Debugging

Drag & Drop objects from Toolbox to Design View

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

More on Debugging

Powerful debugging and tracing capabilities beyond the scope of this course

ASP.NET 2.0 Web Site Administration Tool

Source View of Web Page

HTML tags and Active Server Page (ASP) server control code for those who are familiar

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

View of Web App in Browser

Development server can be seen in address window

Page ObjectsThe 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

HTML Code Behind Web App

HTML Code

Input type of “submit” creates a Button

Button Text

Absolute Positioning

Label Text

ASP.NET “State” Information kept in __VIEWSTATE as a hidden object. An example would be data already entered in a textbox control.

Code Behind

Double Mouse-Click on Object to Bring up “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

Code Behind Revealed

Looks Like DHTML Code for those familiar

Also looks like Access Event Handlers

The using statement is similar to “Import” in VB and is used by Intellisense and the compiler

Intellisense brings up “Text” property for infoLabel Label object

This is about the extent of “programming” we will perform in this course

Intellisense & Tool Tips

Property

C# syntax requires “;”

Intellisense brings objects as well as object attributes and methods

Mouse over brings up tool tip with valuable information

Demonstration #2 – “Muse Is Great” Application

Section #3

More on Web Controls, Web Formatting, & Adding User Interface Validation

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

Add a new Web Page to Project

Select Web Form Again

Name it

Again, We’ll Select C#, But it Hardly Matters

We Will Place the Code in a Separate aspx.cs File

Many Types of File Templates are Available. We Will Only Look at a Few

Provider Dictionary Controls

New Files

Our Provider Dictionary Will Collect the Following Information:

1. Provider Name,

Relative Versus Absolute Positioning

Layout Controls

Position Controls

Absolute Positioning Allows Object to Be Placed Anywhere on Page

Formatting Objects on the Page

Format Controls

Left Aligned

Evenly Spaced

Always Set ID Property

Objects Added to our Test Page

CheckBox Properties

Set Default Value

Name Object (New Convention Uses Descriptive Name Followed By Object Type)

Drop Down ControlQuick Tasks Button Allows Easy Access to Attributes and Methods

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

Data Can be Entered Directly using Edit Items, or Can Be Derived From a Data Source (e.g. the Data Repository)

Return a Numeric Value

Radio Buttons for SpecialtiesRadioButtonList 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

Provider Dictionary So Far – in the Browser

No Default Value Entered

-SELECT- Entry (0)

Defaults to Active As Defined

Our Page Doesn’t Really Do Anything Yet!

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

Compare Validation Control

Compares Selection with Default Value of “-SELECT-” to be Certain Selection is Made

Summary Validation Control

A Summary Validation Control is Used to Consolidate All Errors in a Single Place on The Page

A Summary Validation Control is Used by the Error Text Attribute of other Validation Controls to Determine the Error Message

Demonstration #3 – Form Controls and Data Validation

Section #4

Web Application State and the Persistence of Data

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

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)

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

Response Object

The Response Object is used generally to invoke its methods and perform some response action to a users event input action

Redirect it is a PostBack to this Page

Objects on Response.aspx example Page

First Post of Response Page in browser

Page Load Event

Objects Maintaining State

This Event Handler Explains How Label Gets Value

What Explains Why the TextBoxes Still Have Their Values After PostBack

__ViewState

__ViewState Keeps state information on Page objects. This can be used to maintain continuity in the application__ViewState is also be used by

the server to identify changes in values and trigger events!

__ViewState coded value encapsulating controls & values

Testing Variable State App

We will create this application four times over the next few slides, each time demonstrating how we maintain state from Page to Page in our application

When UP is selected, counter increments. When DOWN is selected, counter decrements.

Creating ViewState VariablesCode behind of ViewState application with Three events to perform actions based on the event

During page initialization (i.e., when not PostBack, create the __ViewState variable called “Counter” and set it to a value of zero

Increment Counter variable

Decrement Counter variable

Counter Application with ViewState

The hidden __VIEWSTATE object on the web page contains information about the controls and their values (including the counter) so that when the Page is Posted Back,

VIEWSTATE encrypted value has the state information of the current page which is compared with the objects during a Page Request to determine if something has changed (e.g. button pressed signaling a button select event)

Application & Session Variables

Application and Session Variables are kept on the Web Server in memory

There is a special file named Global.aspx where Application and Session variables can be initialized

Application and Session variables are “Added” to the Application and Session objects using the .Add() method and retrieved using the .Get() method

Creating Session Variable

Looks & Functions the same as the __VIEWSTATE solution, but rather than passing the values back and forth between Pages, the Session Counter value is maintained on the Web Server

Session Object Initialized when Page is first posted

Session Variable Counter

Counter will be set to zero for each user session on this web application and incremented or decremented based on the button selected

Global Application Class

The Global Application Class file gives us access to initialize and clean up Session or Application variables

Global.aspx Events Five Global events where code can be entered

Session Start & End

Application Start & End

Application Error Handling

Application Variables

Application State transcends Sessions so multiple IE instances will impact each other’s state

Problems with ViewState and Global.aspx Variables Not Strongly Typed Not Available in Intellisense Data is stored in Web Page for

ViewState…can make big web pages that are slow when served over the Internet

Application and Session variables are stored in memory, which can be a problem if there are lots of Web application users

Profile Object – New in ASP 2.0

Profile Objects solve the problems with __VIEWSTATE and Session/Application variables

Uses Web.config file to define the Profile Object and any associated variables (properties)

Profile variables are typed, are available to intellisense, and can be designated to a data structure

Enabling Profile Object in Web.config File

Code added to Web.config file. Currently this must be hand coded but I suspect this will change

Using the Profile Variables

Profile object is accessible through Intellisense as is the “ProfileCounter” variable we create

Note “ProfileCounter” was typed as an integer, therefore it can be treated as an integer in code without any conversion

Demonstration #4 – Web Application State and Persistence of Data

Section #5

Using Data Sources

In This Section:

Another Look at the Drop Down List Control, this time using a DR Table to Populate Values

Add a SqlDataSource to the Project that is used by our Drop Down Control

Create a Connection String that Gets stored in the Web.config file and is available to any DataSource

Add SQL filter logic to our SqlDataSource and discuss the use of Tables, SQL Text, and Stored Procedures and the Pros and Cons of each.

DropDownList Quick Tasks Options

DropDownList can be DataBound to specific values that populate the list box. Note, this is different than being DataBound to a ResultSet Record. A DropDownList on a Form can be populated from one DataSource, but DataBound to a different DataSource

Can force a PostBack so the Page redraws (or is Redirected()) based on changing the SelectIndex of the DropDownList

Last time we hand entered values

Selecting a Data Source

If a DataSource has already been defined for this Page, it can be selected. Otherwise, a new DataSource can be defined using the Wizard

Options for Where Data Resides

SQL Server database where DR residesGive it an easily identifiable name

Must Create a Connection String to the DR Database

The connection string provides the information the DataSource to connect to a database. This can be saved and used anywhere in the Project

New Connection Wizard

Adding a Connection

Classic MDAC Connection Dialog Box

Data Repository Server or Data Mart Server

Authentication Mode

Database (DR)

Saving the Connection in Web.config File for Later Use

When deploying (i.e., going from Acmeware’s development environment to this laptop), this file can easily be modified

Can be used on any Page in the Project

Connection String in Web.config

Connection String

Note, if you use SQL Server Authentication, the Password is stored in this file so it must be secure

Choosing the Table / View SP / or SQL Statement

MEDITECH DR MIS Financial Class Dictionary

Only select one column (Name) in this example. Probably should include the ClassID as unique identifier, though it wouldn’t be displayed in the DropDownList

Filters ResultsDistinct Records

Sorts Results

Options for Updateable Datasets

Adding a WHERE Clause Filter

Lots of powerful options available!!

We are only interested in Active Financial Classes, so we hardcode the Filter to a value of “Y” as it is stored in the DR

Testing the SQL Data Source

Testing the DataSource

SqlDataSource in Design View

SqlDataSource in Design View

Databound Control

DropDownList in Web Browser

Active Financial Class in the DR DMisFinancial Class Dictionary

Demonstration #5 – SQL DataSource

Section #6

Useful Databound Controls

In This Section

Configure a new DataSource using the Data Repository

Create a DataBound Grid View Control and Configure Its Attributes (View Only version)

DetailsView Control (View Only) In-Line Editable GridView FormView Control (Enter / Edit / Delete)

GridView Control Quick TasksQuick Tasks

GridView show Data Records in Table Format

We will create a new DataSource to populate the GridView

SQL Data Source linked to a Medical Records Table

Named for MriPatients (DR) table

SQL Server (Or other OLE DB) Data Source

Select Statement in DataSourceIn this example, we are interested in the Patient’s Name, Sex and DOB, but we return the PatientID as a unique identifier

We recommend using SPs for support reasons, but in this example we will simply chose the MriPatients

Choosing table actually results in a simple SQL statement

Auto Format Option

The Auto Format Quick Task options allows an easy mechanism to provide a nice look to the control

Paging, Sorting, Selection

GridView Control in IE

Automatically sorts on selected column header

Easy paging through a large number of records

Select option allows an individual record to be identified, then event action can occur based on the selected record

Look at Control’s Source CodeThe GridView Control has no Code Behind, all of the source Code is generated as Server Control Tags

Adding a DetailsView Control

The Details View is designed to show Detail of a specific data record in a Form format

Details View Data Source

In this example, we will select the same MriPatients DR table again, but choose many more fields to display in our Details View

Linking Controls

The SelectIndexChange event is used to trigger a change in the PageIndex of the DetailsView sot that it equals the new GridView Selected Index

As different GridView items are selected, the details for the specific patient are displayed in the DetailsView control

Lab Results Data MartNext, we will use Visual Web Developer controls to modify and update data. In this scenario, we would not link directly to the DR. However, we might use DR data to create a Data Mart, to which we link our controls.We create a table to store

Lab Result values for patient accounts on specific dates

SP to Create My Lab Data Mart

This is a simple SQL Stored Procedure that loads Lab Results into a table (MyLabResultsDataMart)

In-Line Editable GridView

A GridView that is editable is the same as a GridView that is View only, the difference is in the DataSource configuration

We will create a new SqlDataSource using a connection string to our “downtimedr” database

Data Mart Data Source

Again, the Database option for the DR

In-Line Editable GridView

Select the Data Mart we defined

Make sure to include the Primary Key (ID) column

Advanced Button We can now choose to allow Insert, Update, and Delete statements automatically with our GridView

Quick Task options for Editable GridView

Choosing checkbox adds the corresponding Select, Edit, or Delete selection options as columns in the GridView

Editable Grid View with no Code

When Edit is selected, each column of the GridView for the corresponding record is placed into a TextBox, where it can be edited

Changes can be accepted using the Update option or Cancelled

Form View Control

The FormView Control is the equivalent to the DetailsView, but has the same Insert, Edit, Update and Delete capabilities using Templates for each Form

Demonstration #6 – DataBound Controls

Section #7

Downtime Registration Example

Downtime Registration Process

Provides the ability to continue to register patients as if system never went down

Works during planned or unplanned downtime Use demographic recall (and any other required

data) from the DR Can be developed and deployed in hours with

virtually no coding New registration information can be easily scripted

back into Admission Module when it is back up (or transmitted through HL7 into InBox)

Demo Recall MRI LookupA TextBox is used to enter information to perform a Demo Recall lookup for the patient

Patient demographics are displays to help Identify

Once the patient is identified, she is selected which generates a new downtime record with default values and opens the FormView control to allow editing

SQL Side Development

New Database called “downtimedb” New Tables

Visits (this is the core table and used to script the downtime registration data back when the system comes back up

Providers Locations Services

New Stored Procedures First Searches the Demo Recall data to find match to input data (By

Name, Past Account #, Unit #, SS#, etc.) Once Demo Recall record is selected which initiates a

CacheNewVists stored procedure that either

Inpatient Long Form (Downtime)

Demonstration #7 – Downtime Registration Routine

Questions