VOL II ALPHA FIVE WEB APPLICATIONS: THE TUTORIAL
Copyright 2011 Alpha Software, Inc. All rights reserved. Written by: Martin Heller, PhD. Editing and Screenshots by: Dave McCormick and James Andrews Book Design by: Mervyn Jose First Printing: January 2011 Printed in USA. Alpha Software 70 Blanchard Rd., Burlington, MA 01803 USA http://www.alphasoftware.com +1 781.229.4500
Chapter 4 A5W Pages 3 Contents Chapter Four: A5W Pages... 5 WHAT WE LL LEARN... 5 Before We Begin... 6 HTML... 6 CSS... 6 JavaScript... 7 What Is A5W?... 8 Creating Blank A5w Pages... 9 Creating A5W Pages From A Layout Template... 11 Editing A5w Pages... 14 Importing Html Layouts... 17 Adding Components To A5W Pages... 28 Adding components in WYSIWYG view... 28 Adding components in source view... 31 Adding components with third-party page editors... 39 A5w Genies... 40 Accordion... 42 Auto-suggest... 48 Background fill... 53 Cascading selects... 55 Edit-combo... 61 Message Box... 67 Tab... 70 Tree... 74 Finding Items In The HTML Editor... 80 Inserting HTML Elements... 81 Using Tables... 83 Using Html Forms... 85 Using CSS Style Sheets... 86 Summary... 91 Chapter Five: Tabbed User Interface and Page Layout Builders... 93 Tabbed User Interface Builder... 94 Building a simple tabbed navigation interface... 95 Customizing the Tabbed UI container page... 106 Advanced... 110 Using containers to organize your buttons... 117
Using other design elements... 122 Exploring Tabbed UI button/hyperlink properties... 125 Nesting Tabbed UIs... 132 Page Layout Builder... 134 Page Layouts versus Tabbed UIs... 134 Building a simple Page Layout... 135 Page Layouts versus A5W pages... 145 Combining layouts... 145 Using layouts in tabbed UIs... 146 Summary... 146 Chapter Six: Linked Grids... 147 Linking And Filtering Grids... 148 Row Expanders... 151 Linked Content Areas... 156 Summary... 161 Chapter Seven: Basic Reports... 163 How Reporting Works... 164 Defining A Data Source... 164 Options For Designing A Report... 165 Introducing The Report Editor... 166 Using The Quick Report Genie... 171 Quick Tabular Report... 172 Quick Repeating Form Report... 184 Quick Groups with Totals Report... 197 Quick Summary Report... 209 Editing A Generated Report... 211 Designing A Report From Scratch... 215 Parameterizing a Data Source... 229 Running A Report From A Web Page... 249 Report Version Control... 255 Summary... 258
4 Chapter Four: A5W Pages CHAPTER 4 In the Volume 1 of this book we learned quite a bit about Alpha Five Version 10 s fabulous Ajax Grid component. In this chapter, we ll cover A5W pages. WHAT WE LL LEARN We ll start by explaining what A5W pages are, and how they compare to other Web server technologies. Then we ll learn how to create and edit A5W pages, import and bind HTML layouts, add components to A5W pages, use the many A5W genies, and use HTML elements and CSS style sheets within A5W pages.
Before We Begin If you already know all about HTML, CSS, and JavaScript you can skip to the next section, What is A5W?. If not, perhaps this is a good time to bring you up to speed. HTML HyperText Markup Language (HTML) is the publishing language of the World Wide Web. HTML tags can tell a Web browser to render the text contained within the scope of the tag, display images, define hyperlinks, and define tables and data-entry forms. You can spot HTML tags because they are enclosed in angle brackets, for example: <p>this text is normal. <b>this text is bold.</b> This text is normal.</p> This markup will display in a browser as: This text is normal. This text is bold. This text is normal. The slash in some tags is used to denote the end of a matching tag's scope, as in <b>bold</b>. HTML pages start with a <head> section that is not displayed, and then continue with a <body> section that is displayed. NOTE If this is new to you, it might be a good idea to read an introduction to HTML. Alpha Five shields you from having to write HTML for the most part, but it's important for you to be able to at least read HTML. CSS HTML tags can have associated styles. These can be placed inside each tag, placed in a separate style section within the page head, or placed in an external
Chapter 4 A5W Pages 7 file called a style sheet. These Cascading Style Sheets (CSS) are a very powerful way to control how a page is rendered independent of the HTML content. So, for example, you can define CSS that says that all <p> (paragraph) tags should be rendered as blue, 12 point text in the Verdana font, and that all <h1> (1 st - level heading) tags should be rendered as grey, 16 point text in the Times New Roman font: p { color: #0000ff; font- family: Verdana; font- size: 12pt; } h1 { color: #808080; font- family: Times New Roman; font- size: 16pt; } Alpha Five shields you from having to write CSS, just as it shields you from having to write HTML. It helps if you can at least understand CSS when you see it. JavaScript Within almost every Web browser is an engine that can run scripts written in the JavaScript language. JavaScript can do quite a lot of work, including manipulating the HTML and CSS on your web pages. This is called Dynamic HTML. JavaScript can also call back to your server to get additional information or do additional work, such as updating a database. This is called Ajax. Alpha Five shields you from having to write much JavaScript, just as it shields you from having to write much HTML and CSS. It also helps if you can at least read JavaScript so that you can understand what the JavaScript code generated by Alpha is doing.
What Is A5W? A5W pages are server-side Web scripts, written in a combination of standard HTML, CSS, and JavaScript and augmented by Alpha's Xbasic language and Alpha Five web components; these in turn interact with your databases. In response to a request for a page from a browser, the Alpha Web Application Server interprets the Xbasic and components on the page, binds them to their data, and emits standard Web pages that can be displayed by any modern Web browser. The following figure illustrates how all of this fits together: FIGURE 4-1: A5W: Server side Web Scripts A5W pages serve roughly the same function as ASP, ASP.NET, ColdFusion, JSP, Perl,PHP,Python, and Ruby on Rails pages. The main difference between A5W pages and the other technologies is the use of the Xbasic language and Alpha Five Web components, including the powerful Ajax Grid we discussed in the previous volume of this book. As you work with A5W pages, you ll discover many amenities that make it easy to produce functional pages quickly without necessarily knowing very much about HTML, CSS, JavaScript or Xbasic.
Chapter 4 A5W Pages 9 Creating Blank A5w Pages You can create an A5W page easily from within Alpha Five. Open a Web project, and click on New in the Web Projects Control Panel. Then select A5W Page and click on OK: FIGURE 4-2: A5W: Creating blank A5W Page On the next page, you ll have the option of choosing Blank Page, Import External HTML Form, or Template: Create Page from Layout
FIGURE 4-3: A5W: Selecting Blank Page For now, choose Blank Page. You ll see a page like this: FIGURE 4-4: Page Link for Blank Page Creation
Chapter 4 A5W Pages 11 Notice the three tabs at the bottom of the window: WYSISYG, Source, and Interactive. Click on the Source tab, and you ll see the skeleton of a default blank page: FIGURE 4-5: Default Blank Page Save this page as Start.A5W. Start the process either by clicking on the Save button on the toolbar, clicking on the File Save menu item, or pressing Ctrl-S. Then type Start into the File name field, and press the Save button. Creating A5W Pages From A Layout Template If you instead choose Create Page from Layout Template for your new A5W page, you will see the Select HTML Page Layout Template dialog:
FIGURE 4-6: Creating A5W from Layout Template Look at the various templates, and pick the one you want. You will also have a choice of three measurement units: ems, percentage, and pixels. An em is the width of the letter 'm' in the current font. A pixel is one addressable spot on a screen or printer. Most designers currently prefer to use percentage units, because of the way the recent generation of browsers does zooming. We have included layouts in ems and pixel units for designers who prefer them for specific purposes. Once you have picked a layout and pressed OK, you will see the Save Page dialog. Enter your desired page name and press OK. If you left Open page in HTML editor?checked, you will see the page ready to edit, either in WYSIWYG view or Source view, depending on your selected default. Here's what the 3-column menu-body-menu layout looks like in WYSIWYG view:
Chapter 4 A5W Pages 13 FIGURE 4-7: 3-Column Menubody-menu Layout What's all that funny foreign text, starting with "Loremipsum dolor sit amet?" It's what designers call "Greek," although in fact it is an excerpt from a classical Latin text. It's there to help you see how the layout behaves as you resize the page. Replace it with your own text, images, and Alpha Five components. NOTE Note that it sometimes takes three mouse clicks to select text in these layouts in WYSIWYG mode. The first click chooses the outer <div> with simple drag points for dragging or resizing; the second click selects the inner <div> with a hashed border and drag points; the third click sets the cursor in the text for editing.
Editing A5w Pages You can edit your A5W pages either in WYSIWYG view or Source view. You can freely switch between the two views. WYSIWYG view is more convenient and easier to understand, and is best when you re adding components and simple HTML. Source view allows more control, and is best when you re writing Xbasic scripts. The default tab used when the HTML editor is opened is controlled by a setting reached via the View Settings Preferences HTML Editormenu item. Some users prefer to always edit in Source mode because then they have complete control over how their HTML is laid out. Other users rarely leave WYSIWYG view. In WYSIWYG view, your toolbars will look like this: FIGURE 4-8: WYSIWYG View Toolbar In Source view, they will look like this: FIGURE 4-9: Source View Toolbar Note that many toolbar options are now greyed out, since they don t apply in Source view. On other hand, your Code Library, which contains HTML Character Entities, HTML Colors, and HTML Tags, is active in Source view and greyed out in WYSIWYG view. Try editing Start.A5W in WYSIWYG view for now. Add a line of text, and set it to Heading 1 style. Add a second line of text, and leave it in Normal style.
Chapter 4 A5W Pages 15 Add a third line of text, and set it to Heading 2 style. Save the page, and it will look something like this: FIGURE 4-10: Editing Start.A5W You may have been surprised to see Arial text change to Times New Roman when you saved the page. That was because the default font for the page was applied when you saved. Select all the text on the page, and change it to the Verdana font. It should now look like this:
FIGURE 4-11: Changing Fonts If you switch to the Source view, you ll see font face overrides within each style tag: FIGURE 4-12: Switching to Source View Return to WYSIWYG view and save the page. Feel free to experiment with the text controls in the formatting toolbar. You ll probably recognize the toolbar icons from using Word or other Windows rich text editors; if you re in doubt
Chapter 4 A5W Pages 17 about the function of any icon allow your mouse to hover over the icon to see its function in words. Importing Html Layouts Note: this section is advanced material. It requires some knowledge of HTML forms If you re an experienced Web page designer (or know one), you probably have existing page designs that you want to reuse in Alpha Five, and would rather not start over from scratch. Static HTML pages that are intended to be bound to data at a later time are often called web templates or wireframes; what we have in the V10 import genie is a very easy way to convert a template design to a working Ajax database application. Of course, the form fields will have to map to the database fields for this to make sense. You ll also need buttons or links that serve as the record navigation controls. You can get the HTML for the input form from a file, or from a string. In the case of a string you ll get a text window; this is convenient when you re copying one form from a complex HTML page. The import wizard expects your form or div container to have a name; all of the input fields within the container will also need to have names.the form field names don t have to match the database field names, but if they do match the V10 genie can automatically generate the map between them. If they don t match, you can map them by hand. V10 can currently create five kinds of Ajax pages from imported HTML forms: Enter, Generic Edit, Single Record Edit, Generic View, and Single Record View. An Enter form can map to a DBF table, SQL table, or Property Variables.
FIGURE 4-13: Import HTML Genie The other kinds of form can map to a DBF table or a SQL table. Note the Create a new table button on the right side of this form. Say you have a great looking wireframe form and you want to bind it to a table, but you don't yet have a table definition. Press this button, and you can create a new DBF or SQL table to match the requirements of your form. So, in effect not only are you creating a data bound form, you are also defining a table.
Chapter 4 A5W Pages 19 FIGURE 4-14: Creating a New Table in HTML Genie When you re mapping a field, you can specify a default value, whether the field is required, and a regular expression that the field must match: FIGURE 4-15: Specifying the field
When you re building an Enter form, you will need buttons or A tags for Save and Reset: FIGURE 4-16: Building an Enter Form For a Generic Editform, you will need buttons or A tags for Save, Delete, Reset, First, Previous, Next, Last, and New: FIGURE 4-17: Generic Edit form Buttons
Chapter 4 A5W Pages 21 For a Single Record Editform, you will need buttons or A tags for Save, Delete, and Reset; for a Generic View form, First, Previous, Next, and Last; and for a Single Record View, no buttons are required. Let s go through the exercise of importing and binding a simple Single Record Editform to the Suppliers table in the Northwind database. Here s the essential HTML for the form (with the spacing markup removed for clarity): <form id="shippers" action="" method="post"> ID<input disabled name="shipperid" style="width: 59px" ><br> Shipper <input name="companyname" style="width: 258px" ><br> Phone <input name="phone" style="width: 258px" ><br> <input type="image" id="first" name="first" src="images/backward_01.png"> <input type="image" id="previous" name="previous" src="images/backward.png"> <input type="image" id="next" name="next" src="images/forward.png"> <input type="image" id="last" name="last" src="images/forward_01.png"><br> </form> The form looks like this: FIGURE 4-18: Single Record Editform The images I used for the navigation controls come from freeiconsweb.com. A zip file containing my starter HTML file and the four images can be downloaded from http://www.mheller.com/shippers.zip. Note that this site is case-sensitive, so don't forget the capital S in Shippers. To import and bind this HTML, first unpack the zip file to your hard disk and open a Web project in Alpha Five V10. Create a new A5W page:
FIGURE 4-19: Importing and Binding HTML Pick the Import External HTML Form wizard, press OK, and navigate to the saved HTML file Shippers.html:
Chapter 4 A5W Pages 23 FIGURE 4-20: Selecting the HTML file Click Next, choose Generic View, and select the Shippers form: FIGURE 4-21: Selecting the Shippers Form Click Next, choose SQL, and pick the nw connection if it s defined in your project. If it s not defined, navigate to the Northwind.mdb file in your C:\My
Documents\Alpha Five V10\MDBFiles directory and use it to create the nw connection. If this directory does not exist, copy the MDBFiles directory from your Alpha Five V10 program installation. (This process is described in Volume 1, Chapter 1 of this book.) Now select the Shippers table: FIGURE 4-22: Selecting Shippers Table Click Next, click Auto Bind Columns, and click on one of the columns to see the additional options:
Chapter 4 A5W Pages 25 FIGURE 4-23: Auto Bind Columns Click Next, and bind the four buttons to the appropriate actions: FIGURE 4-24: Binding Buttons to Appropriate Actions
Click Next four times, check Open saved files in HTML editor? and then click Done. You should see two files in the HTML editor, Shippers.A5W and Shippers.ajax.A5W: FIGURE 4-25: Two files in the HTML Editor Before we can publish these files, we need to do two things: copy the images directory that holds our four navigation icons to C:\A5Webroot\, and start the Application Server if it is not already running. With those complete, right-click the Shippers file in the A5W pages pane of the Web Projects Control Panel, click Publish (Local Webroot) and Open, and you should see a working table browser for the Northwind shippers table:
Chapter 4 A5W Pages 27 FIGURE 4-26: Working Table Browser We can also preview the files. For this we need to copy the images directory that holds our four navigation icons to C:\A5Webroot\LivePreview\, then select the HTML editor page that is displaying Shippers.A5W, and click on the Execute icon on the toolbar. An interesting question arises when you ve done something like this: what have you gained over creating a Grid to do the same thing? The short answer is that you have gained complete design freedom. The counter-argument would be that the Grid Form layout or Detail View (which are essentially the same beast) give you plenty of design freedom for most purposes, and that would probably be sufficient, at least from a programmer s point of view -- but don t try to convince your friendly local page designer of that!
Adding Components To A5W Pages Alpha Five makes it very easy to add components that you ve created to A5W pages in the WYWIWYG view of its HTML editor. It s a little harder to add the components in source view or in a third-party editor, but still straightforward. We ll demonstrate all three methods. Adding components in WYSIWYG view Start by opening your A5W page in WYWIWYG view. If you re starting with a fresh page, save it and give it a name before attempting to insert components. We re going to use the Start.A5W page we created earlier. FIGURE 4-27: Start.A5W Page Change the top heading to Component Test and delete the other lines of text. Put your cursor at the bottom of the page, and click on the Insert Component toolbar icon. Press the Select button:
Chapter 4 A5W Pages 29 FIGURE 4-28: Changing the Heading and you ll see a selection of your existing components: FIGURE 4-29: Existing Components
We re going to choose the Categories Detail grid that we created in Volume 1 of this book, but you can pick any component you have. Press OK. Press OK again, and you ll see three buttons on the page representing the three parts of a grid component: FIGURE 4-30: Buttons representing parts of a Grid Component If the Execute Page icon is not enabled on the toolbar, start the Application Server. Click the this page: Execute Page icon and you should see a Live Preview of
Chapter 4 A5W Pages 31 FIGURE 4-31: Live Preview of the Execute Page Icon Use the controls to step through the table rows. If you save the page, you can also publish and view it by right-clicking on the page name in the Web Projects Control Panel and clicking Publish (Local Webroot) and Open. By the way, when you are editing an A5W page that has components on the page, you can quickly edit a component by double-clicking on it. Adding components in source view If you look at the Start page in the Source tab of the HTML Editor, you ll see that quite a bit of Xbasic code has been generated for you by the Insert Component genie.
FIGURE 4-32: Start Page in the Source tab of HTML Editor Notice that the Xbasic code is inside <%a5 %> tags. The contents of these tags are interpreted on the server, which generates HTML, CSS, and JavaScript for the Web browser. The web browser never sees what is inside the <%a5 %> tags. We don t want to write that Xbasic code by hand, but we don t have to: V10 will generate it for us, even though we're working in Source view. First let s look at what the Insert Component genie did in WYSIWYG view. There are three sections of code that were added to create the grid component. The top section is in the <head> section of the page; the middle section is a qualifier to the body tag: <body class="glassbluepagebody">. The third section is the table at the end of the <body> section:
Chapter 4 A5W Pages 33 Let s start over with a new page and see what it s like to add the grid component in Source view. Create a new blank A5W page, save it as SourceView.A5W, and switch to the Source tab: Now click on the Insert Component toolbar icon, select the Categories Detail grid, and press OK. This time you ll see a dialog to help you insert the code:
FIGURE 4-33: Dialog box to Insert Code Show the code for the head section: FIGURE 4-34: Code for the Head Section Copy the code using the button, and paste it into the HTML editor after the <head> tag, using the Ctrl-V key or the Edit Paste menu item:
Chapter 4 A5W Pages 35 FIGURE 4-35: Copying the Head Section Code/ Ctrl-V FIGURE 4-36: HTML Editor Source Code
Show the code for the body section: FIGURE 4-37: Body Section Code Copy the code using the button, and paste it into the HTML editor after the </p> tag: FIGURE 4-38: Body Section copied into the HTML Editor