This text is normal. This text is bold. This text is normal.

(paragraph) tags should be rendered as blue, 12 point text in the Verdana font, and that all

(1stlevel 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 Import External HTML Form, or Template:

Blank Page,

Create Page from Layout

FIGURE 4-3: A5W: Selecting Blank Page

For now, choose

FIGURE 4-4: Page Link for Blank Page Creation

Blank Page. You’ll see a page like this:

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

with simple drag points for dragging or resizing; the second click selects the inner

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):

ID
Shipper
Phone

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 Component toolbar icon. Press the Select button:

Insert

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 section of the page; the middle section is a qualifier to the body tag: . The third section is the table at the end of the 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 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

tag:

FIGURE 4-38: Body Section copied into the HTML Editor