Visual RPG for.net Web for Smarties

Transcription

1 Visual RPG for.net Web for Smarties The fast workbook way to learn to program the Web with Visual RPG for.net! Learn the tips and shortcuts for developing comprehensive Web applications. Develop an entire Web application by the end of the book in only four easy steps!

2 Visual RPG for.net Web for Smarties Information in this document is subject to change without notice. Names and data used in examples are fictitious unless otherwise noted. No component of Visual RPG for.net Web for Smarties may be reproduced, disassembled, transmitted, transcribed, stored in a retrieval system, or translated into any language in any form without the written permission of ASNA (Amalgamated Software of North America). Copyright ASNA - Amalgamated Software of North America. All rights reserved. Release October 18, 2005

3 CONTENTS i Introduction to Visual RPG for.net Web for Smarties...1 Getting Started... 2 Using the Tutorial... 2 Source Files... 3 Manual Conventions... 3 Step 1 Installing Necessary Web Components...4 What is a Web Application?... 5 Web Browsers and Web Servers... 6 Components Needed... 7 IIS... 7 IIS for Windows 2000 and Windows XP Professional... 8 Starting/Stopping Your Web Service (Windows XP Professional) Installing AVR for.net Installation for Previous Users Installation for New Users Registering DataGate for Web Serving Licensing Visual RPG for.net IDE Step 2: Creating the Web Forms...17 Creating the Web Project and Forms Examining Web Forms Structure Creating the Pages (Adding Controls and Text) About Web Forms Controls Running the Web Application Step 2 Summary Step 3: Responding to Events...37 Adding Code to WebForm1.aspx Step 3 Summary Step 4: Database Access...43 Adding Code to WebForm1 Passing Information Creating an Element in the Session Object Adding Code to WebForm2 Accessing a Database File Declaring Database and File Objects Connecting to a Database Opening a File Retrieving Customer Information (Page_Load) Closing a Database and File (Page_Unload)... 48

4 ii Visual RPG for.net Web for Smarties Step 4 Summary Appendix A: Visual Studio.NET Forms Designer Solution Explorer Properties Toolbox Options General Fonts and Colors Index...57

5 1 Introduction to Visual RPG for.net Web for Smarties This tutorial will guide you through the steps necessary to write a basic web application using Visual RPG for.net. After completing this tutorial, you will have a working Web application written in AVR, containing 2 pages that will allow you to connect to a database, retrieve a customer file record, and display the customer details. At the end of this tutorial, the web application pages will look like the following: Page 1 Request Customer Number

6 2 Visual RPG for.net Web for Smarties Page 2 Display Customer Details Getting Started Using the Tutorial This tutorial does not assume that you have any prior experience with Visual RPG or with creating Web applications. However, due to the extent of information for Visual Studio.NET and Visual RPG for.net, you will still want to refer to the on-line documentation for further assistance. This tutorial is designed as a self-learning tool and includes 4 steps, or main chapters. Each chapter is a step in which a portion of the application is created. Each step will build upon the previous step, so it is recommended that you start at Step 1 and progressively work towards the end. Each step should take you approximately an hour or less. The approximate time to complete each step is included at the beginning of each chapter. At the beginning of each chapter, you will find: A summary of the topics that will be covered in that step. The approximate time to complete that step. What the application will look like at the completion of that step.

7 At the end of each chapter, you will find: Introduction 3 A reference section of each task performed in that step, including how to perform that task, and the button or shortcut key that is used to perform that task (if any). At the end of this tutorial, you will find: Appendix A Visual Studio.NET Tools. This appendix describes some of the Windows, or views you have in Visual Studio.NET, and information on getting around in Visual Studio.NET. Source Files Manual Conventions There are no source files that accompany this tutorial (as compared to other ASNA Smarties tutorials). You will create each web page using Visual Studio.NET and Visual RPG for.net. Since there is such a small amount of code to enter, it is not necessary to include the completed steps for you to compare your forms or code to. The following is a list of conventions that are used throughout this tutorial representing particular functions. A beside a headline indicates a step-by-step process that you are to perform. Numbered lists (1, 2, 3, and so on) indicate steps that you should follow. Menu options, buttons, controls and keys that you are to select, along with words that you are to type will appear in boldface. There are several icons that will appear in the left margin, next to the instructions. These icons are a visual representation of a task to perform, a button to select, text to enter, or a web page address to enter, such as shown below: Indicates that you are to select a particular control from the ToolBox (the icon will vary depending upon the control to select). Indicates a web page to be viewed in the browser.

8 4 Step 1 Installing Necessary Web Components What you will learn in Step 1: What a web application is. The necessary web components needed to create web pages. Where to obtain and install Internet Information Services (IIS). Installing Visual RPG for.net for previous and new users. Registering DataGate for Web serving. Licensing Visual RPG for.net. Approximate Time to Complete Step 1: Will vary depending upon the components to install, but could take up to an hour.

9 What is a Web Application? Step 1 Installing Necessary Web Components 5 A Web application is simply an interactive application that can be accessed through a corporate intranet or through the Internet. Both the Internet and Intranet are a network of computers operating on a protocol called TCP/IP, except that any users outside of your company can access the Internet, and only users within your company can access your intranet. Web applications can perform complex business processes on either the client or the server. In a server-based Web application, the application uses the HTTP Internet protocol to receive requests from a client, typically a Web browser, process the associated code, and return the data back to the browser. The user interface in a Web application can be a series of HTML pages or ASP pages. Regardless of the type of user interface, the application handles events, calls methods, and sets and retrieves properties based upon elements in the HTML or ASP page. An important part of Visual Studio.NET and Visual RPG for.net is the ability to create distributed applications based around the Web. Visual Studio.NET allows you to create the application user interface using Web Forms pages and to create components using XML Web services. Web Forms is the ASP.NET technology that allows you to create a user interface for Web-based applications, whether customers are accessing your application from a traditional Web browser or a mobile device. Using Web Forms pages, you can create a browser-neutral UI that does its processing on the Web server, freeing you of the need to create browser-specific (or device-specific) versions of your user interface. XML Web services are components that run on the server and typically include business logic. Like traditional components, they encapsulate specific functionality and can be called from different programs. However, they are available via Web protocols, making them compatible with programs running in different languages, on different computers, and even on different operating systems. A Visual RPG for.net application is built around Visual Studio.NET s ASP.NET. ASP.NET is a platform including design-time objects and controls and a run-time execution context for developing and running applications on a Web server. ASP.NET in turn is part of the.net Framework, so that it provides access to all of the features of that framework. You access data using ADO.NET. Similarly, you can access operating system services using.net Framework classes, and so on. ASP.NET Web applications run on a Web server configured with Microsoft Internet Information Services (IIS). However, you do not need to work directly with IIS. You can program IIS facilities using ASP.NET classes, and Visual Studio handles file management tasks such as creating IIS applications when needed and providing ways for you to deploy your Web applications to IIS.

10 6 Visual RPG for.net Web for Smarties The advantage of using Visual RPG for.net is that it provides tools that make application development much faster, easier, and more reliable. These tools include: Visual designers for Web pages with drag-and-drop controls and code (HTML) views with syntax checking. Code-aware editors that include statement completion, syntax checking, and other IntelliSense features. Integrated compilation and debugging. Project management facilities for creating and managing application files, including deployment to local or remote servers. Web Browsers and Web Servers The World Wide Web (WWW) is based upon clients and servers. A World Wide Web client is called a Web browser or simply a browser. A World Wide Web server is called a Web server or sometimes just a server. Web browsers and Web servers use a set of communications rules called Hypertext Transfer Protocol (HTTP). The browser sends a request for a web page to the server. The server processes the request and sends the response back to the browser, where the web browser displays the contents, as shown in the diagram below. The 'page' the browser displays could be an HTML (HyperText Markup Language) file, an ASP file (Active Server Page), or perhaps a 'file' to download. HTML is a "language" that allows you to create HTML files (.htm) to display in a browser. An.htm file is a text document that contains a series of HTML tags that tell the browser how to display the file. These HTML tags supply information about the page's structure, appearance, and content.

11 Components Needed Step 1 Installing Necessary Web Components 7 An ASP file, as its name implies, is a page that is active while on the server. That is, it has some logic or program embedded within it, which will be executed on the server. ASP's are a mixture of HTML text and script fragments. Before you can begin creating a Web site or application, along with Visual Studio.NET and AVR for.net, you must have the following components on your system. This section contains the components you need on your system, how to verify if you already have them, and how to install them. 1. IIS (Windows 2000/XP). See below more information. You must also have the following ASNA Product Licenses registered on your system using ASNA Registration Assistant. You must contact ASNA to obtain the DataGate Web Server license. 2. Obtain a DataGate Web Server license. See pages 15 for more information. 3. Obtain a valid license of AVR for.net (only if you have a trial version). See page 16 for more information. IIS The term Web Server is used many times to mean two different things; sometimes it refers to the actual machine hosting the web site, other times it refers to the program serving the web pages. You obviously need both a machine and a program. IIS is fully integrated into the Windows taskbar and Control Panel, which allows you to start and stop HTTP and FTP services, to administer the server, or to change general options. For an actual program to serve the pages, you will need to obtain and install IIS (Internet Information Services). Operating System Windows 2000 and Windows XP Professional Web Server IIS Components All necessary components are automatically copied to your system when Windows 2000 or XP Professional was installed (you did not have to select a special option during installation). However, you may still need to "Add" the components. See page 8 for more information.

12 8 Visual RPG for.net Web for Smarties IIS for Windows 2000 and Windows XP Professional The Personal Web Server for Windows 2000/XP Professional is called IIS (Internet Information Services) 5.x. IIS 5.x is not installed by default unless Windows 2000/XP Professional is upgraded over a previous version of Windows that had PWS installed, so you will probably need to follow the instructions on the next page. Do I already have IIS installed? To verify if you already have IIS installed 1. To check if you have IIS installed on your system, check the following: Select Start - Control Panel - Administrative Tools - Internet Information Services. If you found the option above, you already have IIS installed on your system. Continue on page 15 to Register DataGate for Web Serving. If you did not find the above option, IIS has probably not been installed, or at least not all of the components. However, the files to install IIS are already included with the operating system. You only need to select the Add/Remove Programs option to install the IIS components, by following the instructions below.

13 Step 1 Installing Necessary Web Components 9 How do I Install IIS 5.0? To install IIS From the Start menu, select Control Panel, then click Add or Remove Programs. The following screen will display. 2. Select Add/Remove Windows Components (last icon on the left). The following screen will display.

14 10 Visual RPG for.net Web for Smarties 3. Scroll down just a little, and select the Internet Information Services (IIS) option, then select the Details button for a listing of available IIS components, as shown below. 4. Accept all the defaults, or select each option, then select the OK button when done with this screen. 5. Select the Next> button to install the selected IIS components. Note: If this is the first time that IIS has been installed on this system, you will prompted to insert the Windows XP Professional CD-ROM into your CD-ROM drive, as shown below. On the Welcome screen, select Install optional Windows Components (second option). When the components have been successfully installed, the following screen will display.

15 Step 1 Installing Necessary Web Components Click the Finish button to close the screen. Starting/Stopping Your Web Service (Windows XP Professional) To Access Internet Information Services (Windows XP Professional) 1. Select Start Control Panel Administrative Tools Internet Information Services. 2. The Internet Information Services dialog will display, showing the name of your computer as the local computer. 3. Click on the + sign to the left of your computer name, expanding the contents, then click on the Web Sites folder until you see Default Web Site displaying on the right, as shown below.

16 12 Visual RPG for.net Web for Smarties 4. You will notice that the State of the default web site is Running. To stop the web service, select Default Web Site on the right, then select the Stop button located in the Toolbar, as shown below. 5. The State of the web site will now display Stopped, and the Play button (to the right of the Stop button) will be enabled. To start the service, select the Play button, or click on the right-mouse button, and select the Start menu option, as shown below. 6. To view or change the properties for the web site, right-mouse click on the Default Web Site and select the Properties menu option. Multiple tabs will display. Click on the Home Directory tab to display/change the path and settings for your default web site. By default, the Default Web Site is pointing to C:\inetpub\wwwroot.

17 Step 1 Installing Necessary Web Components 13 Installing AVR for.net Installation for Previous Users Please refer to the online documentation within Internet Information Services for more information. Installing AVR for.net for previous Users 1. If this is NOT your first installation of AVR for.net, you must first uninstall the previous version by going to the Start Menu - Control Panel - Add/Remove Programs. Your computer will compile a list of programs currently installed on your machine in a window that looks something like this:

18 14 Visual RPG for.net Web for Smarties 2. Click on ASNA Visual RPG for.net 7.2 and select the Change/Remove button. 3. In the window that pops up next, select Remove and click Next. 4. Once the older version of the product is uninstalled, you may continue to the next section and install the current build as if you are a new user. Installation for New Users Installing AVR for.net for New Users 1. If this is NOT your first installation of AVR for.net, you must first uninstall the previous version by going to the Start Menu - Control Panel - Add/Remove Programs. If this is your first time installing AVR.NET (i.e. you do not have any previous version on your machine), then installation is very straightforward. Simply run the setup file, and accept all the default settings (this equates to basically clicking Next a bunch of times). Once this is complete, you are ready to license your copy of AVR for.net and to register DataGate for Web Serving, as per the following steps.

19 Registering DataGate for Web Serving Step 1 Installing Necessary Web Components 15 To complete this tutorial, you must obtain a DataGate for Web Server license key from ASNA. Enter the license key using ASNA's registration and licensing tool called ASNA Registration Assistant. Follow the steps below to license the DataGate Web Server. To License DataGate for Web Server 1. Contact ASNA to obtain a License Key for Web Serving. 2. Once you are given the License Key, enter the License Key within ASNA Registration Assistant. Start ASNA Registration Assistant by selecting Start - ASNA Product Suite - ASNA Registration Assistant. You can also select asnalic.exe from the \Program Files\Common Files\Asna Shared folder. 3. The Registration Assistant dialog will display. You must first select the Product that you are licensing. Select DataGate WebPak 7x. 4. Enter the License Key that you received from ASNA, along with the other pertinent information, such as Name, Company, Users, and License Period. 5. Select the Register Product button to accept the information, the Exit button to close Registration Assistant, or the Help button to get help on ASNA Registration Assistant.

20 16 Visual RPG for.net Web for Smarties Licensing Visual RPG for.net IDE To complete this tutorial, you must also have a valid license of Visual RPG along with a valid license of DataGate WebPak (DataGate Engine 7.2). If you have never licensed the Visual RPG for.net product suite, then you must follow these steps in order to use the product. Bear in mind that many of the beta builds did not require licenses to run, so just because you have been using a beta version does not mean that you are automatically registered. To License Visual RPG for.net 1. Follow the exact same steps as listed on the previous page, except that in Step 3, you will select the product Visual RPG 7.2 for Visual Studio.NET. Congratulations! You should have all of your web components installed and licensed, so you are now ready to begin creating your web pages in the next step.

21 17 Step 2: Creating the Web Forms What you will learn in Step 2: How to create a web project and web forms in Visual Studio.NET. How to view the ToolBox and add input elements to a form. How to align a group of controls. How to run your web application. Approximate Time to Complete Step 2: 1 hour. What the Web Forms will look like after completing Step 2:

22 18 Visual RPG for.net Web for Smarties Creating the Web Project and Forms First, we will create an ASP.NET Web application (which automatically gives you a Web Forms page). To Create a Web Project and Web Form 1. Open Visual Studio.NET. 2. On the File menu, point to New, then click Project, or Ctrl+Shift+New. 3. In the New Project dialog box, perform the following steps while referring to the dialog below.

23 Step 2: Creating the Web Forms 19 a b c a. In the Project Types pane on the left, choose Visual RPG Projects. b. In the Templates pane on the right, choose ASP.NET Web Application. c. In the Location box, enter the complete URL for your application, containing the syntax: name>/<project name>. Notice that the default location will be: For this example, highlight WebApplication1 only and change to AvrTutorial, for a location of This will also create a Name of AvrTutorial, which is the name of the Project Folder in which the Web forms will be located. The Web server must have IIS version 5 or later and the.net Framework installed on it for the default of to display. d. Click OK. d

24 20 Visual RPG for.net Web for Smarties When you click OK, the IDE will automatically perform the necessary steps to set up your AvrTutorial virtual directory on your machine so that the pages you create can execute. The AvrTutorial folder will be created at the root level of the web server specified. In using this is actually pointing to a folder called \Inetpub\wwwroot on my C:\ drive, which tells the server to point to my computer. See the picture below for the location in which AvrTutorial will be saved, and the default files that are automatically created. Examining Web Forms Structure In addition, a new Web Forms page called WebForm1.aspx is displayed in the Web Forms Designer in Design view. Let s take a moment to see how Web Forms pages are structured and how the Web Forms Designer is laid out. The Web Forms Designer is opened with a file called WebForm1.aspx. A Web Forms page consists of two separate files: The.aspx file contains the HTML text and the controls that make up the user interface of the page. A separate file, called WebForm1.aspx.vr contains the page's code that is, it is the page's class file. It is sometimes referred to as the "codebehind" file. By default, Solution Explorer does not display the page's class file.

25 Creating the Pages (Adding Controls and Text) Step 2: Creating the Web Forms 21 You are now ready to begin creating your first web page by adding controls to the WebForm1 grid layout in Design view. First, notice the grid layout and the grayed text on the form, as shown below. About Web Forms Controls By default, the Web Forms page you are working with is in grid layout mode. In this mode, you can drag controls around the page and position them using absolute (x and y) coordinates. For this tutorial, you will work in grid mode and learn how to position static text in this mode. Web Forms controls are called "server controls" because when the page runs, the controls are instantiated in server code as part of the page class. When users interact with the controls, such as clicking a button control, the code that is associated with that control runs on the server after the page is posted. In server code, you can write event handlers for server controls, set their properties, and so on. Not every element on the Web Forms page is a server control. For example, by default, static HTML text is not a server control, and you cannot control it from server code. Even standard HTML controls (for example, an HTML submit button) are not server controls by default, they are not visible as first-class controls in server code. (HTML elements are programmable in client script, as in any HTML page.) Therefore, to work with controls on a Web Forms page, you need to add them as server controls. Server controls come in two types: HTML server controls are HTML elements that are marked (that you convert) to be programmable in server code. Typically, you convert HTML elements to HTML server controls only if you have some reason to want to program them from server code. Web server controls are specific to Web Forms that provide more features than HTML server controls, and do not map directly to HTML elements.

26 22 Visual RPG for.net Web for Smarties Creating the Request Form This first page will be the page where the user enters the customer number to fetch, so let s place a TextBox onto the web form where the user will enter the customer number. The controls available for use on the web form are contained within the Toolbox in Visual Studio.NET. The Toolbox displays a variety of items for use in Visual RPG projects. The tabs and items available from the Toolbox change, depending upon the designer or editor currently in use. The items available can include.net components, COM components, HTML objects, code fragments, and text. The Toolbox always displays two tabs, a General tab and a Clipboard Ring tab. As you open an editor or designer, other tabs and tools are displayed. You also can add your own custom tabs and tools to the Toolbox. For more information, see Using the Toolbox and Managing Tabs and Items in the Toolbox in the Visual Studio help. To Create the Request Form The Request form in this example is fairly simple, containing only 4 controls; a TextBox where the user will enter the customer number, a Label for the TextBox describing what to enter, a Label for a Title, and a Search button. The Request form will look similar to the following. (You can also refer to the completed form on page 28). 1. Display the Toolbox containing the controls by selecting View - Toolbox, or by pressing the Ctrl + Alt + X keys. Notice that the controls available for web forms are displayed under the Web Forms tab.

27 Step 2: Creating the Web Forms 23 You may want to click on the other tabs, such as Data, Components, or HTML (just to name a few) and notice that the controls available will vary. 2. Select the TextBox control (in the Web Forms tab) and drag and drop onto the web form. Your web form should look like this: You can click on the control to move it, or you can resize the control by grabbing one of the square "handles" around it with the mouse pointer.

28 24 Visual RPG for.net Web for Smarties 3. Next, let s change the default name of the TextBox control (TextBox1) to a meaningful name we can recognize in code by changing it s Properties. The Properties window allows you to view and change the design-time properties and events of selected objects that are located in editors and designers. You can also use the Properties window to edit and view file, project, and solution properties. Properties Window is available from the View menu. The Properties window displays different types of editing fields, depending on the needs of a particular property. These edit fields include edit boxes, drop-down lists, and links to custom editor dialog boxes. Properties shown in gray are read-only. See Properties Window in the Visual Studio help for more information. a. If your Properties window isn t already visible, press F4 to bring it up. b. Ensure that the text box you just placed on the form is selected, then find the field in the Properties window called "ID". If Properties are presented alphabetically, ID will near the top of the list with the default name TextBox1. c. Highlight the name TextBox1 and replace it with txtcustno. It is suggested that all like controls start with the same prefix (e.g. all TextBox names begin with txt, and all button names begin with btn ). This makes it easy to see what type of control you are referencing later on when you are coding. 4. Let s add a Label control next to the TextBox to indicate what this TextBox is asking for. a. Click and drag the Label control in the ToolBox onto the area you want the Label control to be on the form. b. Change its Text property to Enter Customer Number:

29 Step 2: Creating the Web Forms 25 Changing the ID of the label is not usually necessary since you will probably never need to reference this control in the code. Your Label control may now look something like the following: and we want it to look like this: 5. Let s change our font and size of our Label control and move the TextBox control to the right of the Label control as desired. a. Double-click the + sign to the left of the Font property in the Properties Window to display the font properties, as shown below.

30 26 Visual RPG for.net Web for Smarties b. Select the Size property, click on the drop-down arrow to the right, then select the Larger option, as shown below. c. Move the position of the Label and TextBox controls as desired so they are aligned in 1 line next to either other, as shown below. Your Label and TextBox controls should now look similar to the following:

31 Step 2: Creating the Web Forms While we re using the Label control, let s go ahead and give this page a Title by adding another Label control. a. Click and drag the Label control in the ToolBox onto the top area of the form. b. Change its Text property to Customer Inquiry. c. Double-click the + sign to the left of the Font property in the Properties Window and change the Size property to X-Large. d. Position the Title to the desired location at the Top center of the form, similar to the following. 7. Lastly for this form, we need to add a Button the user will click to initiate the customer search. a. Click and drag the Button control onto the form underneath the Enter Customer Number label (or anywhere you desire).

32 28 Visual RPG for.net Web for Smarties b. Change its ID property from Button 1 to btnsearch. c. Change the Text property from Button to Search. d. Double-click on the Font property and change the Size property to Larger (if desired). Your first web page should now look similar to the following: 8. Lets save the web page by selecting File Save WebForm1.aspx, or select Ctrl+S. You can tell whether a form, or page needs to be saved by looking at the Form name in a Tab above the form and seeing if there is an asterisk (*) after the form name, as shown below: The asterisk indicates that the form needs to be saved, or that a change(s) have been made to the form since it has been last saved. When you Save the form, notice that the asterisk disappears, as shown below.

33 Step 2: Creating the Web Forms 29 Great Job! Now that the Request form is set up, we are next going to design the output page (the web page where our search results will be displayed). Refer to the section on the next page for the steps to creating the Output Web Form.

34 30 Visual RPG for.net Web for Smarties Creating the Output Web Form Let s Create the Output Web Form 1. Let s add another Web form to the current project: a. Select Project Add Web Form as shown below. b. The Add New Item dialog will display. Be certain that Web Form is selected in the Templates section on the right. For the purposes of this exercise, leave the Name as the default WebForm2.aspx Select the Open button. You will be given another blank Web Form. Be sure to Save this form periodically (Ctrl+S) as you are adding controls. As before, you use the ToolBox to place the controls we will be using onto the Web page.

35 Step 2: Creating the Web Forms 31 We will be employing the same web controls you are familiar with in the first form: TextBoxes, Labels, and Buttons. Follow the steps below to create TextBoxes to hold the customer s name, address, city, state, postal code, phone, and fax number, so the form looks like the following: Name Name Address Address 2. Let s add a Label for Name. a. Click and drag the Label control in the ToolBox onto the form. b. Change its Text property from Label to Name:. 3. Let s add a Textbox for Name. a. Click and drag the TextBox control in the ToolBox onto the form. b. Change its ID property from TextBox1 to txtname. 4. Let s add a Label for Address. a. Click and drag the Label control in the ToolBox onto the form directly under Name Label. b. Change its Text property from Label to Address:. 5. Let s add a Textbox for Address. a. Click and drag the TextBox control in the ToolBox onto the form directly under the Name Textbox. b. Change its ID property from TextBox1 to txtaddress. 6. Let s add a Label for City.

36 32 Visual RPG for.net Web for Smarties City a. Click and drag the Label control in the ToolBox onto the form directly under Address Label. b. Change its Text property from Label to City:. City 7. Let s add a Textbox for Address. a. Click and drag the TextBox control in the ToolBox onto the form directly under the Address Textbox. b. Change its ID property from TextBox1 to txtcity. State State Postal Code Postal Code Phone Phone Fax 8. Let s add a Label for City. b. Click and drag the Label control in the ToolBox onto the form directly under City Label. c. Change its Text property from Label to State:. 9. Let s add a Textbox for Address. a. Click and drag the TextBox control in the ToolBox onto the form directly under the City Textbox. b. Change its ID property from TextBox1 to txtstate. 10. Let s add a Label for Postal Code. a. Click and drag the Label control in the ToolBox onto the form directly under State Label. b. Change its Text property from Label to Postal Code:. 11. Let s add a Textbox for Postal Code. a. Click and drag the TextBox control in the ToolBox onto the form directly under the State Textbox. b. Change its ID property from TextBox1 to txtpostcode. 12. Let s add a Label for Phone. a. Click and drag the Label control in the ToolBox onto the form directly under State Label. b. Change its Text property from Label to Phone:. 13. Let s add a Textbox for Phone. a. Click and drag the TextBox control in the ToolBox onto the form directly under the State Textbox. b. Change its ID property from TextBox1 to txtphone. 14. Let s add a Label for Fax. c. Click and drag the Label control in the ToolBox onto the form directly under Phone Label. d. Change its Text property from Label to Fax:.

37 Step 2: Creating the Web Forms 33 Fax Page Title 15. Let s add a Textbox for Fax. a. Click and drag the TextBox control in the ToolBox onto the form directly under the Phone Textbox. b. Change its ID property from TextBox1 to txtfax. 16. Let s add a Button the user will click when finished viewing the customer information. a. Click and drag the Button control at the bottom of the form in the center (or anywhere you desire). b. Change its ID property from Button 1 to btnok. c. Change the Text property from Button to OK. 17. Let s go ahead and give the page a title, such as Customer Details. a. Click and drag the Label control in the ToolBox onto the form in the Top, Center of the form. b. Change its Text property from Label to Customer Details. c. Change its Font Size to X-Large. 18. If your form looks like mine right now, we will need to fix the alignment of the Labels and TextBoxes so they appear in straight alignment on the left, and fix the vertical spacing, so there is the same amount of space between each field. a. With your mouse, draw a Box around all of the Label controls, as shown below. b. The fields will now have 8 boxes around the fields. Select Format Align - Lefts. All labels will align to the left to match the alignment of the first field, Name:.

38 34 Visual RPG for.net Web for Smarties c. Next, draw around all of the TextBox fields. d. Select Format Align - Lefts. All TextBoxes will align to the left to match the alignment of the first field, txtname. e. Now, lets change the vertical alignment, so each field has the same amount of space between the fields. Draw a box around the Label controls and select Format Vertical Spacing Make Equal. Draw a box around the TextBox controls and select Format Vertical Spacing Make Equal. 19. Your completed WebForm should now look like the following: Running the Web Application Let s Run the Web Application 1. Run your Web application by selecting Debug - Start, or by simply pressing F5. (Running the application will save the page with the same name). Your code will be compiled and your first page - Customer Inquiry will display in your browser as follows:

39 Step 2: Creating the Web Forms 35 Step 2 Summary Because we have written no code, this page does nothing, and provides no way of presenting your second page. Adding this code will be addressed in the next step when you add the necessary code to your project. 2. To stop running your web application, merely close the Browser. To Do This Button/Keys Create a Web ASP.NET application To add a second Web form to a project Select File - New Project - Visual RPG Projects - ASP.NET Web Application. Select Project Add Web Form View the ToolBox Select View ToolBox. Ctrl+Alt+X Insert a Text Box Insert a Label Insert a Button Resize a Control Align a group of controls Select the TextBox control and drag and drop onto the web form. Select the Label control and drag and drop onto the web form. Select the Button control and drag and drop onto the web form. Click on the control, then click one of the square "handles" with the mouse pointer to resize to the desired dimensions. Select the appropriate option from the following aligning and sizing options: Format Align Format Make Same Size

40 36 Visual RPG for.net Web for Smarties Format Horizontal Spacing Format Vertical Spacing Run a Web Application Select Debug Start. F5 Save a Web Page Select File Save. Ctrl+S

41 37 Step 3: Responding to Events What you will learn in Step 3: How to write code to respond to a button being clicked. Approximate Time to Complete Step 3: Half an hour. What the code for WebForm1 will look like after completing Step 3:

42 38 Visual RPG for.net Web for Smarties Adding Code to WebForm1.aspx All that remains for WebForm1 is to add the bit of code necessary to make this page respond when the Search button is clicked. Let s Add Code to WebForm1.aspx 1. Go to the first WebForm you created (tab titled WebForm1.aspx). What we want this page to do is to request and display WebForm2.aspx when the user clicks on the Search button. So let s write the code in the Click event of btnsearch. 2. Click on the Search button btnsearch on WebForm1.aspx to select it. 3. View your Properties Window (if it is not currently up, press F4 to display it). You will see its properties displayed in the Properties window, and it should look like the following: 4 4. However, we want to access the Events of this button, not its Properties, so click on the yellow lightning bolt on the top of your Properties window.

43 Step 3: Responding To Events 39 This will display all the events that can occur on that button. At the top of the list is the "Click" event. 5. Double-click on the Click event name and the IDE will automatically take you to the code behind WebForm1.aspx. Notice that another Tab is displayed at the top with the other tabs displaying WebForm1.aspx.vr[Code]* as displayed below: All Visual RPG files will have the.vr extension at the end. The code behind automatically generates the event subroutine that handles the click. Your code will now look like this:

44 40 Visual RPG for.net Web for Smarties Your cursor will already be placed at the beginning of your new subroutine, which is named btnsearch_click. Any code placed within this subroutine will be executed whenever a user clicks the Search button while running the web application. Let s add just one line of code that will request WebForm2 when the Search button is clicked from WebForm1. 6. Lets insert a new line before the EndSr, and enter in the following line: Response.Redirect( "WebForm2.aspx" ) This line uses the ASP.NET intrinsic Response object to redirect the browser to your second WebForm. In other words, by placing this line of code in the btnsearch_click subroutine, you are telling the user's browser to redirect its request to your second web form whenever the Search button is clicked. (For more information on ASP.NET intrinsic objects, look up Response ASP.NET in your Microsoft.NET help index). Your btnsearch_click routine should look like the following: BegSr btnsearch_click Access(*Private) Event(*this.btnSearch.Click) EndSr DclSrParm sender Type(*Object) DclSrParm e Type(System.EventArgs) Response.Redirect( "WebForm2.aspx" ) 7. Run the project (F5), and now when you click on Search, your second WebForm (WebForm2.aspx) will display, as shown below:

45 Step 3: Responding To Events Stop running your web application now by closing the browser. If your Output window is open, you will want to close that as well. Great Job! Most of the work is now completed. All that remains is to make the customer number from the first WebForm available to the second WebForm so that it can CHAIN to the Customer Master file and present the data to the user. Step 3 Summary To Do This Button/Keys Access the events of a Toolbox control Redirect the browser to another web form Click on the Lightning bolt button in the Properties window. The following code redirects the browser from WebForm1 to your second WebForm (WebForm2). Response.Redirect( "WebForm2.aspx" )

46 42 Visual RPG for.net Web for Smarties This Page Intentionally Left Blank

47 43 Step 4: Database Access What you will learn in Step 4: How to create an element in the Session object. How to declare database and file objects. How to connect to a database and open a file. How to retrieve customer information and close a database and file. Approximate Time to Complete Step 4: 1 hour +. What the Code for WebForm2 will look like after completing Step 4: At the end of Step 4, the application code for WebForm2 will look like the following:

48 44 Visual RPG for.net Web for Smarties Adding Code to WebForm1 Passing Information First. we ll be dealing with passing information from one form to another. This can be done in a variety of ways, but the one we will use here will take advantage of another ASP.NET intrinsic object called the Session object. Among other things, this object contains a collection (think of it as an array), and the server keeps track of one of these collections for each of the client machines it is conversing with. So if you set an element in this collection to some value, you can access that value from any ASPX serving a particular enduser. Let s Add Code to WebForm1.aspx 1. Go to the first WebForm you created by clicking on the Tab titled WebForm1.aspx. 2. Double-click on the form to display the code page. Notice that another Tab will display at the top titled WebForm1.aspx.vr [Code]. Creating an Element in the Session Object 3. Enter the following line of code in WebForm1 just above the Response.Redirect to save the Customer number for the session: Session( "CUSTNO" ) = txtcustno.text // add to collection This line creates an element in the Session collection indexed by the name CUSTNO, and sets that element equal to the value contained in the text property of the web control, "txtcustno". Since this takes place just BEFORE redirecting your browser to the second page, the second page now has the ability to access the customer number via the Session ( CUSTNO ) element. The entire BtnSearch_Click routine should look like the following: BegSr btnsearch_click Access(*Private) Event(*this.btnSearch.Click) EndSr DclSrParm sender Type(*Object) DclSrParm e Type(System.EventArgs) Session( "CUSTNO" ) = txtcustno.text // add to collection Response.Redirect( "WebForm2.aspx" )

49 Step 4: Database Access 45 Adding Code to WebForm2 Accessing a Database File Let s Add Code to WebForm2.aspx Now let s put WebForm2 to work accessing the database for the customer data we re searching for by viewing the code page for WebForm2 1. Go to WebForm2 s code page by double-clicking on the form titled WebForm2.aspx, or by using one of the following ways. Another way to get to the code for any page you are working on is to go to the Solutions Explorer window and right click the page and then select View Code. Alternatively, you can select View Code from the IDE menu, or press F7. 2. Notice the code that is automatically generated by the Web Designer (Using and DclFld statements, etc). Don t worry about the Using statements for now, but notice the DclFld statements. These were generated by the IDE as variables describing all the objects you placed onto WebForm2. Declaring Database and File Objects 3. First, let's declare Database and File objects (i.e. F-Specs ), and code them just below that large block of DclFlds as noted in the diagram above.

50 46 Visual RPG for.net Web for Smarties Enter in the following lines: // Database DclDB Name( AppDB ) DBName( "DG Net Local" ) // Disk file. DclDiskFile Name( Cust ) + Type( *Input ) + File( "*Libl/CMMasterL1" ) + Org( *Indexed ) + ImpOpen( *No ) + DB( AppDB ) The first line of code (DclDB Name( AppDB ) DBName( "DG Net Local") declares a database object that will establish the connection to a Data Source. The DBName parameter describes the database name that delineates the database server, user ID, password, etc. In this case, whenever you reference the AppDB variable, you are actually referencing the connection to the DG Net Local database. (This database is installed on your local machine, and it operates just as a DB2/400 database). The DclDiskFile lines of code are all part of the same declaration, and they are responsible for creating an F-Spec. Notice the Name parameter is Cust. This is how you will refer to this file within your code. The File parameter refers to the CMMASTERL1 file in the library list (on the local database, it's in the Examples library). The DB parameter is the database name you specified previously. This informs the compiler that the format for this file can be found at the location specified within the AppDB database. The + is the AVR continuation character. All the DclDiskFile parameters can be placed on a single line if you prefer. Multiple lines are used here for readability. This completes the variable declarations needed to accomplish our task, now let s add some operational code. 4. Move down to the Page_Load subroutine. The code contained within this subroutine (as the name suggests) is executed each time the page is loaded by the web server. It contains an IF statement testing whether the page IsPostBack ( IsPostBack is true if the page is being loaded as a result of user interaction with the WebForm). When the page is being loaded for the first time, IsPostBack is false. Don t worry about that now, just place all your code above the IF statement, and below the DclSrParms.

51 Connecting to a Database Step 4: Database Access Before you can do anything with the file, you must first connect to the database, so enter in: Connect AppDB Opening a File This one line establishes a connection with the database that you will be using throughout the application. 6. Next, you must open the file that you will be reading from, so enter the following command: Open Cust Retrieving Customer Information (Page_Load) 7. The last section of code will do the rest of the work: CMCustNo = Session( "CUSTNO" ).ToString() Chain Cust Key( CMCustNo ) Err( *Extended ) If ( %Found ) txtname.text = CMName txtaddress.text = CMAddr1 txtcity.text = CMCity txtstate.text = CMState txtpostcode.text = CMPostCode txtphone.text = CMPhone txtfax.text = %EditW( CMFax, "0( )& - ") Else Response.Redirect( "WebForm1.aspx" ) EndIf EndSr First, the customer number saved in the Session object by the requesting form is retrieved. If the customer is valid, the customer details are assigned to the web TextBoxes. Otherwise, the browser is directed back to the WebForm1.aspx. (Later on you might like to produce an error message to the user indicating why they didn't advance to the second WebForm).

52 48 Visual RPG for.net Web for Smarties 8. The Page_Load subroutine should now look like the following: Closing a Database and File (Page_Unload) Whenever the page "transaction" is complete, the files and database connections must be closed. The Page_Unload event is fired when the page's work is complete. 9. In this event subroutine, place the following lines of code just before the IF statement: Close Cust Disconnect AppDB 10. Go to the WebForm2 form page and double-click on the OK button to get the IDE to generate a click event subroutine for that button. 11. Within that subroutine, let s add code to redirect the browser back to WebForm1. It is accomplished in the same way you requested WebForm2 by entering the following code in the Click Event routine: Response.Redirect( "WebForm1.aspx" ) 12. Now you can Run the entire application by pressing F In the first form, input the customer number you wish to query.

53 Step 4: Database Access 49 In the Customer Master example file, all customer numbers end in '00'. Valid customer numbers are 100, 200, 300, Your program will connect to the database, open your file, and chain to that record. You can then click OK to request your first form, where you can perform a search again. 14. To see this project in action without using the IDE, you can run it from an instance of your own web browser by simply typing the URL you originally gave it: In fact, anyone can run this application from anywhere in your network by entering the following address from a browser: Computer Name]/avrtutorial where [Your Computer Name] is the name of the machine where you have created the application. Congratulations, You have just completed your first Visual RPG.NET Web Application!

54 50 Visual RPG for.net Web for Smarties Step 4 Summary To Do This Button/Keys View Code Declare a database object Create an element in the Session object Declare a Disk File Connect to a Database Open a Database file Disconnecting from a Database Close a Database file Select any of the following: Double-click on the form. Go to the Solutions Explorer window and right click the page and then select View Code. Select View Code from the IDE menu. Press F7. Sample code: DclDB Name( AppDB ) DBName( "DG Net Local") The following sample code creates an element in the Session collection indexed by the name CUSTNO, and sets that element equal to the value contained in the text property of the web control, "txtcustno. Session( "CUSTNO" )=txtcustno.text Use DclDiskFile. See page 46 for example code. Use the Connect op code followed by the database (same as the Name parameter on the DclDb op code). Code: Connect <database name> Open <file> Use the Connect op code followed by the database (same as the Name parameter on the DclDb op code). Code: Disconnect <database name> Close <file> F7

55 Appendix A: Visual Studio.NET Forms Designer There are a host of built-in tools in Visual Studio.NET that aid in coding your project. This appendix will address the most commonly used tools giving brief descriptions of how to use them to your advantage. The forms designer is a part of Visual Studio s IDE that allows you the programmer, to design your Windows app or web form interface quickly and easily. Here is a typical view of the forms designer with descriptions of the 3 main windows and the shortcut keys to access them: Solution Explorer (Ctrl+Alt+L) Toolbox (Ctrl+Alt+X) Properties (F4) Solution Explorer The Solution Explorer is a navigational tool for your solution in much the same way Windows Explorer is a navigational tool for Windows. From the Solution Explorer you can open and edit any file within your project, and any project s files within your solution.

56 52 Visual RPG for.net Web for Smarties These files are presented to you in familiar tree-style layout, and you can perform a number of operations on the file by right clicking on the file name in the Solution Explorer, and then selecting your choice from the following menu: Here you can open the file for editing either the code or the design by selecting either View Code or View Designer, or you can open the file in a different editor such as notepad by selecting Open With. Also, the properties of the file can be viewed by selecting the Properties option. By right clicking on the Project itself in the Solution Explorer and selecting Add, you can add new files: Properties The properties pane provides a means to view and change the properties of controls used on either your web or windows forms. When you select a control on your form in design view, the properties window is automatically populated with all the properties for that control. Here is an example of what it may look like for a TextBox control:

57 Appendix A Visual Studio.NET Tools 53 Here you can adjust virtually every configurable aspect of the control. Toolbox The Toolbox is a vital addition to the forms designer because it holds all the common controls with which you will want to populate your form. The toolbox by default looks like this:

58 54 Visual RPG for.net Web for Smarties Options And it is used by simply scrolling through to find the control you wish to use, and then clicking that control to select it. All you have to do then is click and drag the area on your form you want the control to occupy, and it is generated there with all the code automatically created by the compiler to describe it. Several other customizations are available to you through the IDE s Tools menu. If you click on Tools - Options, the options menu is presented to you:

59 Appendix A Visual Studio.NET Tools 55 Most of the changes you will probably want to make will be to the environment itself, customizing it to your liking. Within the environment folder you have many different options, but we will only cover the most commonly used ones here. General Most of these options are self-explanatory. An important one to mention here is the top option button options (Tabbed documents and MDI environment). Here you choose the layout of your files as you work on them. For instance, if you choose Tabbed documents, you will be presented with all of your files that you open in a tabbed format. That is, the environment shows several tabs along the top of the IDE each one providing you access to your files by clicking on the corresponding tab. The other option, MDI environment, will be familiar to all those programmers who have used Visual Studio 6.0 and earlier, or AVR 4.0 and earlier. This format presents all of your files in a window format, with each file receiving its own window held within the IDE. Fonts and Colors This folder is useful for customizing the color-coded text given to you in the text editor. Here you can specify the font type you want used, the size, and the color for virtually every type of special text (i.e. keywords, operators, etc.). For instance, if you want to change the color of all the strings in your projects, simply select Strings from the Display Items Menu, and change the color to that of your liking.