A5 Tut Remk

VOL
II
ALPBA FIvE WEB
APPLICATI0NS:
TBE T0T0RIAL

Copyiight 2u12 Alpha Softwaie, Inc. All iights ieseiveu.

Wiitten by: Naitin Bellei, PhB.
Euiting anu Scieenshots by: Bave NcCoimick, Chiis Conioy anu }ames Anuiews
Book Besign by: Neivyn }ose

Fiist Piinting: }une 2u12
Piinteu in 0SA.

Alpha Softwaie
7u Blanchaiu Ru., Builington, NA u18uS 0SA
http:www.alphasoftwaie.com
+1 781.229.4Suu

Chaptei 4 - ASW Pages S

"#$%&$%'
Chapter Four: A5W Pages ................................................ 5
WHAT WELL LEARN .......................................................................................... 5
Before We Begin ................................................................................................... 6
HTML ............................................................................................................ 6
CSS ................................................................................................................ 6
JavaScript ...................................................................................................... 7
What Is A5W? ....................................................................................................... 7
Creating Blank A5W Pages .................................................................................. 8
Creating A5W Pages From A Layout Template .................................................. 11
Editing A5W Pages ............................................................................................. 13
Importing Html Layouts ..................................................................................... 15
Adding Components To A5W Pages ................................................................... 25
Adding components in WYSIWYG view .................................................... 25
Adding components in source view ............................................................ 28
Adding components with third-party page editors .................................... 35
A5W Genies ......................................................................................................... 36
Accordion .................................................................................................... 38
Auto-suggest ............................................................................................... 42
Background fill ............................................................................................ 47
Cascading selects ........................................................................................ 49
Edit-combo ................................................................................................. 53
Message Box ................................................................................................ 58
Tab ................................................................................................................ 61
Tree ............................................................................................................. 65
Finding Items In The HTML Editor ................................................................... 70
Inserting HTML Elements ................................................................................. 71
Using Tables ........................................................................................................ 73
Using Html Forms .............................................................................................. 74
Using CSS Style Sheets ....................................................................................... 75
Summary ............................................................................................................ 80
Chapter Five: Tabbed User Interface and Page Layout
Builders ........................................................................ 83
Tabbed User Interface Builder .......................................................................... 84
Building a simple tabbed navigation interface ........................................... 85
Customizing the Tabbed UI container page ............................................... 96
Advanced ................................................................................................... 100
Using containers to organize your buttons ............................................... 107

Using other design elements ..................................................................... 112
Exploring Tabbed UI button/hyperlink properties .................................. 115
Nesting Tabbed UIs ................................................................................... 122
Page Layout Builder .......................................................................................... 124
Page Layouts versus Tabbed UIs ............................................................... 124
Building a simple Page Layout .................................................................. 125
Page Layouts versus A5W pages ................................................................ 135
Combining layouts ..................................................................................... 135
Using layouts in tabbed UIs ...................................................................... 136
Summary ........................................................................................................... 136
Chapter Six: Linked Grids ............................................ 137
........................................................................................................................... 137
Linking And Filtering Grids ............................................................................. 138
Row Expanders ................................................................................................. 141
Linked Content Areas ....................................................................................... 146
Summary ............................................................................................................ 151
Chapter Seven: Basic Reports ....................................... 153
How Reporting Works ...................................................................................... 154
Defining A Data Source .................................................................................... 154
Options For Designing A Report ...................................................................... 155
Introducing the Free Form Report Editor ....................................................... 156
Layout Table Reports vs. Free Form Reports .................................................. 160
Using the Quick Report Genie .......................................................................... 161
Converting to a Layout Table Report ............................................................... 172
Editing a Layout Table Report ......................................................................... 173
Designing a Free Form Report From Scratch .................................................. 178
Parameterizing a Data Source .......................................................................... 192
Running a Report from a Web Page ................................................................. 212
Report Version Control .................................................................................... 217
Summary .......................................................................................................... 220

CBAPTER 4
"()*%&+ ,#-+.
/01 2)3&'
In Volume 1 of this book we learned quite a bit
about Alpha Five Version 11s fabulous Ajax Grid
component. In this chapter, well cover A5W
pages.

4
WBAT WE'LL LEARN
Well start by explaining what A5W pages are,
and how they compare to other Web server
technologies. Then well 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.

4&5#+& 1& 4&36$
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.
!"#$
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.

&''
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
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,
Chaptei 4 - ASW Pages 7

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,
fonL-famlly: verdana,
fonL-slze: 12pL,
}

h1 [
color: #808080,
fonL-famlly: 1lmes new 8oman,
fonL-slze: 16pL,
}

Alpha llve shlelds you from havlng Lo wrlLe CSS, [usL as lL shlelds you from havlng Lo wrlLe
P1ML. lL helps lf you can aL leasL undersLand CSS when you see lL.
()*)'+,-./
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 helps if you can at least read
JavaScript so that you can understand what the JavaScript code generated by
Alpha is doing.
1()% 7' /018
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:

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, youll discover
many amenities that make it easy to produce functional pages quickly without
necessarily knowing very much about HTML, CSS, JavaScript or Xbasic.
"+&)%6$3 49)$: /01 2)3&'
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-1:
A5W: Server side
Web Scripts

On the next page, youll have the option of choosing Blank Page,
Import External HTML Form, or Create Page from Layout
Template:

FIGURE 4-2:
A5W: Creating
blank A5W Page
FIGURE 4-3:
A5W: Selecting
Blank Page

For now, choose Blank Page. Youll see a page like this:

Notice the three tabs at the bottom of the window: WYSISYG, Source, and
Interactive. Click on the Source tab, and youll see the skeleton of a default
blank page:

FIGURE 4-4:
Page Link for
Blank Page
Creation
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.
"+&)%6$3 /01 2)3&' ,+#; / <)=#-% >&;*9)%&
If you instead choose Create Page from Layout Template for your
new A5W page, you will see the Select HTML Page Layout Template
dialog:

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.
FIGURE 4-6:
Creating A5W
from Layout
Template

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:

What's all that funny foreign text, starting with "Lorem ipsum 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.
FIGURE 4-7:
3-Column Menu-
body-menu Layout
Chaptei 4 - ASW Pages 1S

?@6%6$3 /01 2)3&'
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 youre adding components and
simple HTML. Source view allows more control, and is best when youre
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:

In Source view, they will look like this:

Note that many toolbar options are now greyed out, since they dont 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.
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-8:
WYSIWYG View
Toolbar
FIGURE 4-9:
Source View
Toolbar

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:

If you switch to the Source view, youll see font face overrides within each style
tag:
FIGURE 4-10:
Editing Start.A5W
FIGURE 4-11:
Changing Fonts

Return to WYSIWYG view and save the page. Feel free to experiment with the
text controls in the formatting toolbar. Youll probably recognize the toolbar
icons from using Word or other Windows rich text editors; if youre in doubt
about the function of any icon allow your mouse to hover over the icon to see
its function in words.
7;*#+%6$3 A%;9 <)=#-%'

B#%&. %(6' '&C%6#$ 6' )@D)$C&@ ;)%&+6)9E 7% +&F-6+&'
'#;& :$#G9&@3& #5 A>H< 5#+;'

If youre 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 V11 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. Youll also need buttons or
links that serve as the record navigation controls.
FIGURE 4-12:
Switching to
Source View

You can get the HTML for the input form from a file, or from a string. In the
case of a string youll get a text window; this is convenient when youre 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 dont have to match the
database field names, but if they do match then the Alpha Five genie can
automatically generate the map between them. If they dont match, you can
map them by hand.
Alpha Five 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.

The other kinds of form can map to a DBF table or a SQL table.
Note the Create a new tablebutton 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.
FIGURE 4-13:
Import HTML
Genie

So, in effect not only are you creating a data bound form, you are also defining
a table.

When youre 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-14:
Creating a New
Table in HTML
Genie

When youre building an Enter form, you will need buttons or A tags for Save
and Reset:

For a Generic Editform, you will need buttons or A tags for Save, Delete, Reset,
First, Previous, Next, Last, and New:
FIGURE 4-15:
Specifying the
field
FIGURE 4-16:
Building an Enter
Form

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.
Lets go through the exercise of importing and binding a simple Single Record
Editform to the Suppliers table in the Northwind database. Heres 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-17:
Generic Edit form
Buttons

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 V11. Create a new A5W page:

Pick the Import External HTML Form wizard, press OK, and
navigate to the saved HTML file Shippers.html:
FIGURE 4-18:
Single Record
Editform
FIGURE 4-19:
Importing and
Binding HTML

Click Next, choose Generic View, and select the Shippers form:

Click Next, choose SQL, and pick the nw connection if its defined in your
project. If its not defined, navigate to the Northwind.mdb file in your C:\My
Documents\Alpha Five V11\MDBFiles directory and use it to create the nw
connection. If this directory does not exist, copy the MDBFiles directory from
FIGURE 4-20:
Selecting the
HTML file
FIGURE 4-21:
Selecting the
Shippers Form

your Alpha Five V11 program installation. (This process is described in Volume
1, Chapter 1 of this book.) Now select the Shippers table:

Click Next, click Auto Bind Columns, and click on one
of the columns to see the additional options:

Click Next, and bind the four buttons to the appropriate actions:
FIGURE 4-22:
Selecting
Shippers Table
FIGURE 4-23:
Auto Bind
Columns

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-24:
Binding Buttons to
Appropriate
Actions
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:

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 youve 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 programmers point of view -- but dont try to convince your
friendly local page designer of that!
FIGURE 4-26:
Working Table
Browser

/@@6$3 "#;*#$&$%' ># /01 2)3&'
Alpha Five makes it very easy to add components that youve created to A5W
pages in the WYWIWYG view of its HTML editor. Its a little harder to add the
components in source view or in a third-party editor, but still straightforward.
Well demonstrate all three methods.
011-23 +45.4262/7 -2 89':89; *-6<
Start by opening your A5W page in WYWIWYG view. If youre starting with a
fresh page, save it and give it a name before attempting to insert components.
Were going to use the Start.A5W page we created earlier.

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:
FIGURE 4-27:
Start.A5W Page

and youll see a selection of your existing components:

Were 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
FIGURE 4-28:
Changing the
Heading
FIGURE 4-29:
Existing
Components

again, and youll see three buttons on the page representing the three parts of a
grid component:

If the Execute Page icon is not enabled on the toolbar, start the Application
Server. Click the Execute Page icon and you should see a Live Preview of
this page:
FIGURE 4-30:
Buttons
representing parts
of a Grid
Component

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.
011-23 +45.4262/7 -2 74=,+6 *-6<
If you look at the Start page in the Source tab of the HTML Editor, youll see
that quite a bit of Xbasic code has been generated for you by the Insert
Component genie.
FIGURE 4-31:
Live Preview of
the Execute Page
Icon

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 dont want to write that Xbasic code by hand, but we dont have to:V11 will
generate it for us, even though we're working in Source view. First lets 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:

FIGURE 4-32:
Start Page in the
Source tab of
HTML Editor

Lets start over with a new page and see what its 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 youll see a dialog to help you insert the
code:
Chaptei 4 - ASW Pages S1

Show the 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:
FIGURE 4-33:
Dialog box to
Insert Code
FIGURE 4-34:
Code for the Head
Section

FIGURE 4-35:
Copying the Head
Section Code/
Ctrl-V
FIGURE 4-36:
HTML Editor
Source Code
Chaptei 4 - ASW Pages SS

Show the code for the body section:

Copy the code using the button, and paste it into the HTML editor after the
</p> tag:

Now show the code for the body tag, and click on the right-hand radio button:
FIGURE 4-37:
Body Section
Code
FIGURE 4-38:
Body Section
copied into the
HTML Editor

Copy the code using the button, and paste it into the HTML editor in place of
the <body> tag:

FIGURE 4-39:
Code for the body
tag
FIGURE 4-40:
Body tag copied
into the HTML
Editor

Now preview the page:

Except for the heading text, which we havent added, this should look and act
just like the Start page we created previously.
011-23 +45.4262/7 <-/> />-,1?.),/@ .)36 61-/4,7
Alpha Fives built-in HTML Editor doesnt have all the amenities of a full-
blown HTML page editor such as Microsoft Expression Web 3, its distant
predecessor FrontPage, Adobe Dreamweaver CS5, or any of its predecessors. If
you use any of those editors to design HTML pages, you can use exactly the
same process that we just demonstrated to add components from Alpha Five.
The only major difference is that youll probably want to use the .HTML file
extension until youre ready to copy the page into your Alpha Five project, and
only then rename it to have an .A5W extension.
FIGURE 4-41:
Live Preview

/01 I&$6&'
B#%&. %(6' '&C%6#$ 6' )@D)$C&@ ;)%&+6)9E
4&36$$&+' ;)= G)$% %# ':6* %# %(& $&J% '&C%6#$ #$
%(& 56+'% +&)@6$3E

Alpha Five not only makes it easy to add Alpha components to an A5W page
with a genie, it has genies for generating a bunch of other common patterns.
These include JavaScript accordion controls and tabbed organizers, a
JavaScript tree control, auto-suggest and edit-combo controls, hierarchical
cascading selection controls, a JavaScript message box, and background fill
images.
In most cases, however, these genies are not the best way to add functionality
to a page. Instead, you should consider using a component. For instance, it is
FIGURE 4-42:
Adding
Components with
third-party Page
Editors

much easier to use the Page Layout Builder or the Tabbed UI Builder, which
will be discussed in the next chapter, than it is to create tabs or accordions
with their genies. Consider using the auto-suggest, edit-combo, and cascading
select features of grids, discussed in Chapter 3, rather than adding the
corresponding standalone controls to a page.
As of this writing, there is no corresponding component or builder for the tree
control and its genie. Similarly, there is no corresponding component or
builder for the message box and its genie. Background fills are used extensively
within several V11 components, but the genie is the easiest way to produce one
outside a component.
Using an A5W genie, whether or not there is a corresponding component and
builder, is a good way to understand what's going on under the covers when
Alpha Five implements that genie's pattern. It's also a convenient way to
generate code to be added to an A5W page that is being designed as an HTML
page in a program like Dreamweaver.
With that said, were going to demonstrate all of these genies on one A5W
page. Start by creating a new A5W page and saving it as Genies.A5W. Then
switch to the Source tab, since thats the only view that supports the Web
Genies menu item. Right-click anywhere on the page and hover over
Genies to bring up the Select a Genie menu
item. Pick that item to bring up the Genies dialog:

FIGURE 4-43:
Genies on one
A5W Page

Well demonstrate the Genies one by one, in alphabetical order.
0++4,1-42
Lets start by editing the page to have a title and H1 heading of Genies, and a
paragraph containing Accordion:

Now right click on the source code and pick the Accordion genie:

FIGURE 4-44:
Accordion Genie
FIGURE 4-45:
Accordion from
Source Code

Click on Insert and then press Add Pane twice. Call the first pane
Pane Title 1, and the second pane Pane Title 2. You can leave both panes as
Static, but understand that panes could also be filled by Ajax Callbacks or a
JavaScript function call:

FIGURE 4-46:
Naming the Panes

Press Next and change the AJAX pattern to Local Page:

NOTE
Why did we set the AJAX Pattern control to Local Page?
This puts the Ajax handling code on the base A5W page
instead of on a "dedicated" page of its own. You may prefer
the dedicated page option for larger projects, but for this
exercise we're keeping all the code in one place.

FIGURE 4-47:
changing the
AJAX pattern to
Local Page

Press Done. There will be four buttons displayed on the left of the Insert
Code dialog, controlling the contents of the right-hand pane. If we had chosen
Ajax Callbacks, there would be at least one additional button. For each
button (HTML, JavaScript, Theme, and Linked Files) copy the source
code to the clipboard and paste it into Genies.a5w where directed. The HTML
goes below <p>Accordion</p>:

The JavaScript goes into a script tag (which youll have to add) near the end of
the document, before the </html> tag:

The Theme goes into the head section after the meta tags:
The Linked Files go right after the Theme:

Click on the Execute Page toolbar item to preview the page:

Because we set the accordion control to Single Band on the settings page, one
band will close when the other opens.
Save the Genies page.
0=/4?7=3367/
Were going to add our auto-suggest control into the second accordion pane.
Select the Auto-Suggest genie, set it to SQL, set the connection to
nw(::Name::nw), set the table to Customers, set the columns to
CompanyName, City, and Country, set the order to CompanyName, and
make CompanyName the key column:
FIGURE 4-48:
preview of
Execute Page
toolbar

Note the Save and Load buttons at the bottom of the form. You can use these
to quickly generate variations on a theme, for example to create auto-suggests
for different tables in Northwind.
Press Next twice, and set the AJAX Pattern to Local Page:
FIGURE 4-49:
Adding Auto-
suggest

Select Done, and walk through the buttons, adding the code to the appropriate
place on the page. You wont need to bother with the Theme and Linked Files,
as the correct code will already be on the page. The HTML will go in place of
the accordion pane 2 contents:

The JavaScript will go below our previous JavaScript:
FIGURE 4-50:
Auto-suggest
Control settings

The Initial Ajax Xbasic code will go at the top of the page:

and the Wrapper Code will go at the bottom of the page:

The Ajax code will go inside the Wrapper where marked:
Save the page and preview it. Open the second accordion band and type a
into the input box. You should see the companies beginning with a drop
down:

Pick one of the companies, and its name should go into the input control:

FIGURE 4-51:
Companies Drop
Down
FIGURE 4-52:
Picking one of the
Companies

A)+B3,4=21 C-DD
As you may know, HTML does not include gradient fill backgrounds as a
native capability. You may have noticed that Alpha Five V11 uses gradient fills
all over the place, for example in the "Glass Blue" grid style we have been
using. How does it do that?
The predefined styles each have a set of bitmaps to define gradient fills, but
that's just an optimization: the Alpha Five application server includes an
extension to the background CSS style for gradient fills. The background fill
genie makes it easy to generate fills that the application server can interpret; in
addition, it can generate the appropriate gradient fill bitmaps for use with
other servers.
As an example, let's edit the top accordion pane. In the accordion1.0.PANE
div, add a style property and a text color (we're using silver, which will stand
out against a dark fill):
<div id="accordion1.0.PANE" style="color:#c0c0c0; ">
Now, leaving the edit cursor after the semicolon, let's invoke the Background
Fill genie:

FIGURE 4-53:
background Fill
Genie

We want the effect to be at least 22 pixels high; we've chosen Gradient
Horizontal Glass, a Dark Blue color, and a Light Blue accent color, leaving the
position at Top/Left:

Press OK, and the code for this background fill should be added to the style:
<div id="accordion1.0.PANE" style="color:#c0c0c0; background: #1224ff
url('images/$box/$size/1x22/$fill/Gradient_Horizontal_Glass:Light%20Blue
%3ABlue.png.a5image') repeat-x top;;">
The .png.a5image extension inside the URL tells the Alpha Five application
server to generate the fill from the preceding descriptor. Does it? Save and
preview the page, open the first accordion pane, and see:

This genie can be a quick way to add a fancy rule or box to a Web page.
FIGURE 4-54:
Changing the
Effects
FIGURE 4-55:
Preview of the Fill

&)7+)1-23 76D6+/7
A classic pattern for finding a record in nested tables or finding an object in a
hierarchy is to select the outer object from a list, and then to update the inner
objects accordingly. This works for faculty at a university organized by college
and department; for order items organized by customer and invoice number;
and for companies or people organized by country and city. Let's implement
the last example using our favorite table, Northwind Customers, and the V11
Cascading Selects genie.
Add a new section to the Genies page, just above the </body> tag, called
<p>Cascading Selects</p>. Invoke the Cascading Selects genie, choose a
simple SQL query against the nw connection, and add Country, City, and
CompanyName to the hierarchy:

FIGURE 4-56:
Cascading Selects
Genie

Preview the control:

Now press Next, leave None as the Action, change the AJAX Pattern to Local
Page, and press Done:

FIGURE 4-57:
Preview
FIGURE 4-58:
Insert Code

As before, we're going to walk through the sections. Copy the HTML below our
Cascading Selects line:

Copy the JavaScript below our previous functions:

FIGURE 4-59:
Copying HTML
below Cascading
Selects Line
FIGURE 4-60:
JavaScript below
the functions

Place the AJAX Xbasic Code inside the Xbasic wrapper, right after our
previous action handler and right before the end with statement:

We already have the rest of the required code on our page.
Note the two buttons on the lower left of the Genie: Save
Definition and Compute Page. You can use the first one if you
plan on producing variants on this Cascading Selects control, and the second if
you want to create a standalone A5W page assembled from all the different
sections that the Genie generated.

FIGURE 4-61:
AJAX XBasic
Code inside the
XBasic Wrapper

Now let's preview the Genies.a5w page we've been working on:

Try selecting various countries, cities, and companies. Note that the size of
each drop-down control adjusts automatically to the content. In a real
application we would most likely arrange the labels and dropdowns to line up
better, and size the dropdowns to be big enough for the longest expected
content string.
E1-/?+45F4
The edit-combo box is a cross between an input (edit) control and a dropdown
box. Let's add another section to our page,<p>Edit-combo</p>, right
before the </body> tag, and try the Edit-combo genie.

FIGURE 4-62:
Preview of the
Genies.a5w Page

You'll note that this genie supports four types of content, DBF, SQL, Xbasic,
and Static:

We'll choose SQL (but you already guessed that), the nw connection, and the
Customers table.

FIGURE 4-63:
Edit-Combo
Control

Just for a teensy bit of variety, choose the ContactName, CompanyName,
City, and Country fields:

Note the Save, Load, and Preview Code buttons at the lower left.

FIGURE 4-64:
Choosing SQL

Click Next; note that we can set a number of parameters to control the
appearance of the control and dropdown list on this page of the Genie:

Press Done, and copy the HTML and JavaScript to their respective places:

FIGURE 4-65:
Changing General
Appearance
FIGURE 4-66:
HTML and
JavaScript

and

Note that the JavaScript generated by this genie populates the control with
data extracted from the database by the server code in Xbasic, contained
within <%a5%> tags.

FIGURE 4-67:
Edit-Combo
Control Settings
and Appearance
Changed

Preview the page, and either press the button or type into the edit-combo box:

#677)36 A4G
While JavaScript already has alert(), confirm(), and prompt() functions
baked in, there are times when you may want something a bit fancier: these
functions display only plain text, and there may be times when you need better
formatting. Alpha Five has a function a5_msg_box.show() in its JavaScript
library with many options, and a genie in its IDE to make it easy to generate
calls with the correct options.
Nevertheless, we must emphasize that using message boxes is best restricted
to exceptional cases, where the user really, truly needs to confirm that he or
she wants to perform a given important action; otherwise, the message box
will simply annoy the user. And no, closing your page is not usually important
enough to qualify.
Let's add <p>Message Box</p> section to our Genies page, and put
<button id="mbButton" >Click me</button> under it. Add
onclick="" to the button tag, and launch the Message Box genie. Give it a
title of "Title" and a body with HTML markup, such as <i>Hello</i>,
<b>World!</b>. Note that you can give this message box four of the most-
used button options of a Windows message box: OK, OK/Cancel, Yes/No,
and Yes/No/Cancel. You can also assign a JavaScript function to handle the
user's response, although we won't do that here.
FIGURE 4-68:
A5W: Server side
Web Scripts

Putting this function call at the end of the page would run it every time the
page was opened. Let's not do that: it would get old very quickly. Instead, let's
put it inside the onclick handler we just added to the button:

FIGURE 4-69:
Adding Message
Box to the Genie
Page
FIGURE 4-70:
JavaScript
function inside the
onclick handler

Preview the page, and press the button that says "Click me". You'll see our
message box pop up:

FIGURE 4-71:
Message Box in
Preview Page

")F
The tab genie is almost identical to the accordion genie, so we'll spare you the
long-winded explanation. Here's what you enter into the genie:

FIGURE 4-72:
Adding the tab
genie

Put the HTML and JavaScript in the usual places:

FIGURE 4-73:
HTML Script
FIGURE 4-74:
JavaScript

And you should see a working set of tabs when you preview the page:

FIGURE 4-75:
Tabs in the
preview page

",66
The tree control genie is similar to the cascading selects genie, so again we'll
keep it brief. Let's use nw, Customers, and a hierarchy of Country, City,
and CompanyName:

FIGURE 4-76:
Tree control Genie

We won't add an action, although you should understand that you can use
AJAX callbacks for just the leaves, or the leaves and branches; you can also use
your own JavaScript function to handle events:

The tree control has a bunch of optional settings, all the way down to
specifying the images used for the leaves, branch nodes, and branches.

FIGURE 4-77:
Options to add
Actions

Well set the AJAX pattern to Local Page, enable multiple selection, and leave
all the other settings at their defaults:

FIGURE 4-78:
Enabling Multiple
Selection alone

Add the HTML, JavaScript, and AJAX Xbasic code to the usual places:

FIGURE 4-79:
Adding HTML..
FIGURE 4-80:
JavaScript!

Finally, preview the page, and you'll see the familiar Customer data as an
expandable tree:
FIGURE 4-81:
!and AJAX
XBasic Code

,6$@6$3 7%&;' 7$ >(& A>H< ?@6%#+
In the HTML editor WYSIWYG pane, you can press Ctrl-F to bring up a Find
dialog:

On the Source pane, you can bring up a dialog with three different boxes: Ctrl-
F brings up Find, Ctrl-H brings up Replace, and Ctrl-G brings up Goto:
FIGURE 4-82:
Preview with the
Customer Tree
FIGURE 4-83:
Find Dialog Box

7$'&+%6$3 A>H< ?9&;&$%'
It's hardly unique to Alpha Five, but the HTML Editor included in the Alpha
Five IDE allows you to easily add HTML elements to your page, both in
WYSIWYG and Source modes. You can add elements using the four toolbars
that display when the HTML Editor has the focus:

In addition, you can add elements with the insert items on the menu that pops
up on a right click:
FIGURE 4-84:
Three Different
options to Find,
Replace, Goto
FIGURE 4-85:
Adding HTML
elements using
the toolbar

In Source mode, you can pop up a scrolling list of HTML elements just by
typing a < character:

This list uses the same logic as an auto-suggest control, and will get shorter as
you type additional characters.
In addition, you can pop up a scrolling list of HTML properties and events by
putting your cursor inside the tag and typing:
FIGURE 4-86:
Adding elements
with Insert
FIGURE 4-87:
Adding elements
with the character
<

Again, the list will use auto-suggest logic to shrink as you continue to type.
K'6$3 >)L9&'
The HTML Editor's insert table function, available from the right-click context
menu as well as two toolbars, brings up a dialog that allows you to quickly
specify the size and styles of the table:

FIGURE 4-88:
Scrolling list of
HTML properties
FIGURE 4-89:
Insert Table

Once you have a table on your page, you can quickly add and remove rows,
columns, and cells; merge cells; split cells; and adjust table and cell properties.
All of these functions are available from the context menu; most are also
available from the table toolbar.

K'6$3 A%;9 ,#+;'
We've already used some HTML controls without worrying too much about
them. The table below shows what code is inserted by each item on the Form
toolbar. These are the same as the insert form context menu items.
Foim Element Appeaiance Inseiteu Coue
,#+;

<FORM method="post">
<INPUT type="submit"
value="Submit">
<INPUT type="reset"
value="Reset"> </FORM>
>&J%L#J

<INPUT id="textbox1"
name="textbox1"> </FORM>
>&J% /+&)

<TEXTAREA id=textarea1
name=textarea1>
FIGURE 4-90:
Table Function
from the context
menu

</TEXTAREA></FORM>
,69& K*9#)@

<FORM method="post"
enctype="multipart/form-data">
<INPUT type="file"
name="upload1" id="upload1"><BR
><INPUT type="submit"
name="upload1Submit"
value="Upload File"></FORM>
"(&C:L#J

<FORM method="post"><INPUT
type="checkbox" id="checkbox1"
name="checkbox1"
value=".t."></FORM>
M)@6# 4-%%#$

type="radio" id="radio1"
name="radio1"
value=".t."></FORM>
N+#*O@#G$ <6'%

<FORM method="post"><SELECT
id="dropdown1"
name="dropdown1"></SELECT></FORM
>
P-L;6% 4-%%#$

type="submit" id="submit1"
name="submit1" value="Submit
Query"></FORM>
2-'( 4-%%#$

type="button" id="button1"
name="button1"></FORM>
/@D)$C&@ 4-%%#$

<FORM method="post"><BUTTON
id="button_adv1"
name="button_adv1"></BUTTON></FO
RM>
26C%-+&

type="image" id="image1"
name="image1"
src="Image_Name"></FORM>

K'6$3 "PP P%=9& P(&&%'
Alpha Five V11 has two CSS style sheet editors. The ordinary CSS Editor has
three panes. Design view:

FIGURE 4-91:
Chris Conroy 5/14/12 4:38 PM
Deleted:

Code view:

Search:

and Preview:
FIGURE 4-92:
Code View
FIGURE 4-93:
Search View

Using this general CSS editor is nearly self-explanatory.
The Webform Style Editor is specialized for the large collection of styles that
go into an Alpha Five Web component:
FIGURE 4-94:
Preview View

To edit a Webform style, in general you pick each individual style that you
want to change visually, and then either work with it in the Edit pane at the
right:
FIGURE 4-95:
Webform Style
Editor

FIGURE 4-96:
Editing Webform
Style

or bring up a Style Editor window:

You can also copy a style, edit multiple styles together, copy and paste colors,
and much more. In general, creating a new Webform style is a job for a skilled
designer rather than for a programmer.
P-;;)+=
In this chapter, we learned to create and edit an A5W page, and add
components to a page both in WYSIWYG view and Source view. We also
learned how to add components to a page created in a third-party editor, as
well as how to import an HTML layout and bind it to a database table.
We exercised eight A5W genies for creating Ajax functionality, and we learned
when it might be more appropriate to use a builder and component rather
than a genie. Finally, we learned how to edit the conventional HTML and CSS
for an A5W page.
FIGURE 4-97:
Style Edit Window

In the next chapter, we'll learn how to quickly create tabbed user interfaces
and page layouts with builders.

CBAPTER S
"()*%&+ ,6D&.
>)LL&@ K'&+
7$%&+5)C& )$@ 2)3&
<)=#-% 4-69@&+'
In Chapter 4 of this book we learned about A5W
pages. The tabbed user interface and page
layout builders we will discuss in this chapter
help to organize and structure A5W pages into
a clean, coherent application quickly and easily.

1A/> 1?Q<< <?/MB
In this chapter, we will learn how to use a builder to
organize Alpha Five components, web pages, reports,
and PDF documents into an elegant master design
called a tabbed user interface. Then we will learn how to
use a builder organize these same elements into an
embeddable design called a page layout. Finally, we will
learn how to embed page layouts within a tabbed user
interface.
S

>)LL&@ K'&+ 7$%&+5)C& 4-69@&+
The Tabbed UI builder is a quick way to create the overall navigation user
interface of an application. It can tie together your disparate Alpha Five
components, A5Wpages, HTML pages, external URI pages, reports, and PDF
documents into a unified application where buttons bring up their associated
elements in tabs. You can use tabs, accordions, frames, and containers to
organize your buttons, as shown in the following sample Tabbed UI:

One salient feature of the tabbed UI is that uses an Ajax or "Web 2.0"
mechanism for launching tabs. When you launch a new tab by pressing its
button or link, the contents of that tab are instantiated and rendered, if
necessary, but the frame of the tabbed UI is not repainted. If the tab has
already been rendered before you press its button, it is simply brought to the
foreground and given the focus a nearly instantaneous operation.
FIGURE 5-1:
Tabbed UI
Chaptei S - Tabbeu 0I & Page Layout Builueis 8S

By contrast, most Web navigation systems instantiate and render a whole new
page when you press one of their buttons or links, overwriting the current
page. Designers often create the illusion of a stable page by using the same
navigation controls and frame decoration on every page of their site, with the
possible exception of advertisements. In reality, these pages are being
repainted every time the user navigates, although the graphical assets are
usually cached by the Web browser for speed.
Another salient feature of the tabbed UI is that every button can be
conditionally shown or hidden. Even more importantly, every button's display
can be conditional on the security group membership of the current user. If
your site will have an Administration page, you can set the security so that the
Administration launch button, the Administration page, and the components
that access administrative tables are not even generated by the Alpha server
unless the current user has an Administration role.
A=-D1-23 ) 7-5.D6 /)FF61 2)*-3)/-42 -2/6,C)+6
Before we start building a Tabbed UI, open an Alpha Five project that contains
at least one Web component and at least one A5W page. If you don't have such
a project, make one quickly: It shouldn't take more than a few minutes to
create a Grid against Northwind and an A5W page that says "Hello, World!"
In your Web control panel click the New button.

In the New File dialog, pick the Web Component icon:

FIGURE 5-2:
Web Projects
Control Panel
Chaptei S - Tabbeu 0I & Page Layout Builueis 87

FIGURE 5-3:
New File Dialog
Box

Press Next and pick the Tabbed UI Builder icon:

FIGURE 5-4:
Tabbed UI Builder
Icon

Press OK and you will see the Tabbed UI Builder Overview:

Switch to the Tabbed UI Controls section and look at the three
accordions Tabbed UI Buttons, Containers, and Other Controls:

FIGURE 5-5:
Tabbed UI Builder
Overview
FIGURE 5-6:
Tabbed UI
Buttons,
Containers, Other
Control

In the Tabbed UI Buttons accordion, click on Grid Component and add
one of your grids:

Then click on A5W Page and add one of your pages.

FIGURE 5-7:
Adding a Grid to
the Tabbed UI
Button

If you should accidentally click on the wrong icon, you can switch to a different
class of display object using the Tabbed UI Pane Type drop-down:

Now let's save and view our Tabbed UI. Press Save, and fill in your desired
component name. We're using Demo_tabbed_ui:
FIGURE 5-8:
Tabbed UI Pane
Drop Down Menu

Turn on your Application Server and switch to the Live Preview tab for the
Tabbed UI Builder:
FIGURE 5-9:
Using
Demo_tabbed_ui

As you can see, we have a little more work to do to customize the Tabbed UI
but we'll get there.

FIGURE 5-10:
Live Preview of
Tabbed UI Builder

Press the buttons one at a time to view your components and pages. Here are
ours:

FIGURE 5-11:
View of a
Component

FIGURE 5-12:
View of a Page

Note that if you press a button and the tab already exists, that tab will get the
focus it won't be duplicated.
Now let's finish customizing the Tabbed UI.

&=7/45-H-23 />6 ")FF61 I: +42/)-26, .)36
Let's start by looking at the Tabbed UI Properties:
FIGURE 5-13:
Tabbed UI Builder

In the first section of properties, you'll see that you can select from the same
styles used by the Grid component. This is deliberate. While you can make
every Grid shown in a Tabbed UI look different, from a user interface design
point of view it is far better to make then all look as unified and similar as
possible. As you'll see later, the default for a Grid contained in a Tabbed UI is
to have it inherit the Tabbed UI's style.
Style overrides are provided for the Tabbed UI just as they are for the Grid.
This allows you to define different styles for JavaScript elements: tabs,
accordions, pop-up windows, and lists. The default CSS style sheet and images
for these elements are found in the
<your_Alpha_program_directory>\CSS\A5System\GenericStyles\Default
folder. To override the standard styles, you copy the Default folder, edit the
style sheet and images, and use this setting to point at the new folder.
The Font size property gives you an easy way to change the print size displayed
in the Tabbed UI and all Grids that inherit its style, relative to the size
FIGURE 5-14:
Tabbed UI
Properties

specified in the actual style sheet. There are five settings, from Smallest to
Largest; the Medium setting leaves the font sizespecified in the style sheet
alone.
Header text is the first field we actually need to change. It is currently set to
<h1>Enter Your Header Text Here</h1>, so let's follow that instruction
and change it to read <h1>Tabbed UI Tutorial</h1>. As you probably
already know, <h1> is the style for a first-level heading. You can make that
change right on the properties form.
The Footer text is currently Enter Your Footer Text Here. Since both the
header and footer areas support A5W code, let's do a little Xbasic
programming magic and have the footer report when the page was rendered.
Since we're doing some programming, it will be more convenient to use the
HTML editor, so press the button to the right of the footer text.

FIGURE 5-15:
Using the HTML
Editor to have the
Footer Report

If the HTML editor is set to WYSIWYG mode, switch to the Source pane. The
text we're about to enter involves some Xbasic code, which must be entered as
Source.
Change the text to Rendered at <%a5 ?time("h:m am Weekday, Month
d,yyyy") %>. When your typing gets to "time(" you should see pop-up help
for the parameters of the function as soon as you press the parenthesis key.
Pressing Ctrl-down or right clicking on the help pop-up will get you to a
builder for the time format string. When you are done, press OK and then do a
Live Preview. You may have to dismiss a dialog and refresh the page to see the
current time displayed.

As I preview the Tabbed UI while writing this, the footer of the page reads
Rendered at 10:41amWednesday, December 1, 2010.

FIGURE 5-16:
Current Time
Display

Here, as we discussed in the previous chapter, the <%a5 %> tag means that
the server should treat the contents of the tag as Xbasic instructions. The
question mark '?' means to display what follows, and the time() function as
used here gets the current time and date and formats it.
01*)2+61
The time() function has an optional second argument that we're not using
here, a specified time value. Since the subject has come up, let's just look at an
example of this as it would display in the Alpha Five interactive window:
dlm armlsLlce as L = [11/11/1918 11:11}
?Llme("Weekday, d MonLh, yyyy h:m",armlsLlce)
= "Wednesday, 11 november, 1918 11:11"

Returning you now to our previously scheduled program, the Page title
currently says Tabbed User Interface. Let's change it to Tabbed UI
Tutorial to match our header. You'll have to preview the page in a browser
(click on one of the icons at the bottom of the Live Preview window) in order to
see that this has changed the browser Window title:

FIGURE 5-17:
Changing the title
to Tabbed UI
Tutorial
Chaptei S - Tabbeu 0I & Page Layout Builueis 1u1

You can adjust the buttons panel location to be on the left or right, adjust the
buttons panel style, and adjust the padding around the buttons. The most-used
style is the width, which defaults to 2.5in; for many applications this is
excessively large. If you want to reduce the size below the point where the
button titles display correctly, you can shorten the button titles and/or reduce
their font size.

The Prompt when navigate away from page checkbox is responsible for
enabling or disabling the sometimes-annoying "Are you sure you want to
navigate away from this page?" message box that you have by now
probably encountered and dismissed several times. This is enabled by default.
You might want to turn it off for the balance of this exercise. On the other
hand, you may want it turned on in a real application to help users avoid
accidentally losing all their recently entered data.
Before you disable the prompt, have a look at the next two lines of properties.
These allow you to override the navigation confirmation messages with your
FIGURE 5-18:
Changing the size,
fonts, location

own, one for navigation away from a UI with dirty grids (i.e. unsaved data),
and another for navigation away from a UI with no dirty grids.

Now that you've seen those, go ahead and turn off the "navigate away"
warning.
You can specify the images to use for many aspects of the Tabbed UI: the close
button, the image to display when hovering over the close button, the images
for previous and next, and the button-disabled images for previous and
next. The default images are generally good enough, but you might want to
supply larger images for a touch-enabled application, or use themed images
for particular audiences.
You can specify class names for the various tab parts. Your classes may be used
instead of or in addition to the defaults. The syntax <Default>MyClass
applies both the default style class and the MyClass class to the current tab
part.
The Container A5W Page properties section is unique to the Tabbed UI
Builder, and has no equivalent in any other component builder. Why does it
even exist? It is there because the Tabbed UI must be the top-level UI, and in
fact the only Alpha component, on its A5W page. Therefore, you can specify
the page name for the A5W page automatically generated as a home for the
Tabbed UI; you can also specify any special content that that you want to have
in the head section.
FIGURE 5-19:
Tabbed UI
Properties
Chaptei S - Tabbeu 0I & Page Layout Builueis 1uS

If you look at the Source view of the generated A5W page, you will see this note
as an Xbasic comment:
SYSTEM GENERATED COMMENT - PLEASE DO NOT REMOVE - TABBEDUI CONTAINER PAGE

IMPORTANT NOTE
This page is a system generated page. It is automatically generated every
time you save a TabbedUI componentfrom within the TabbedUI builder. Any
modifications you make to this page (with the EXCEPTION of changes you makein
the 'Override Settings' section) will be overwritten when you edit the
TabbedUI component in the builder.

You may recall that the home page we display when the Tabbed UI opens
needs some work:

FIGURE 5-20:
Home Page of
Tabbed UI
Tutorial

In the Home Page section of the Tabbed UI properties, we can edit the home
page tab title, the home page source (local HTML or an external URL), and the
local HTML itself. Here we have added some simple HTML containing
instructions about using the Tabbed UI:

Note that we can use the home page of the Tabbed UI (or any other page in a
tab) as a place that holds buttons if we wish. The trick here is to place the
buttons on a Page Layout Builder, and place the Page Builder in turn on an
A5W page. To make the Tabbed UI Buttons panel disappear, give it a style that
includes "display: none". We'll discuss this further later in this chapter
when we talk about Page Layout Builders.
FIGURE 5-21:
Editing the
Tabbed UI Home
Page
Chaptei S - Tabbeu 0I & Page Layout Builueis 1uS

In the CSS section we can specify how much padding goes around each
control, define any additional CSS classes to use for this Tabbed UI, list any
additional styles used by grids on the Tabbed UI other than the master style,
and specify any additional CSS files that should be linked to. Using these
parameters we can easily control the look of the Tabbed UI. If you want to
have grids that use their own styles rather than the master style, be sure to
include those styles in the Additional Grid styles list.

In the Arguments section you can define arguments and bind them to page,
session, or cookie variables. Once you have defined and bound an argument,
you can use it in a filter or link expression for any Grid, Report, or A5W page
contained in the Tabbed UI.
Why would you want to do that? For example, suppose your Tabbed UI of sales
grids and reports was called from a navigation page that showed a map of the
US. Clicking on any state in the US would link to the A5W page holding the
Tabbed UI with a query parameter set to the name of that state, for example
Sales.A5W?state=MA. (This scheme also works well if you've selected the
state from a Grid or Tree control.) In the Arguments section, you would bind a
new character argument state to the page variable state passed in. You could
then use the argument state in the SQL queries underlying the grids and
reports in your Tabbed UI.

The JavaScript section allows you to list any external JavaScript files that are
referenced by your code, and define JavaScript functions called by your client-
side events. This is rarely needed: typically each grid defines its own list of
JavaScript functions.

The Other section allows you to specify linked resources, customize any
localized strings for each supported language, set the active language of the UI,
and customize the date picker for different national languages and date
conventions.
You can use the linked resources field to list any CSS files needed by your child
Grid components:

You can control the client-side date format that controls how users enter dates
for reports launched from the Tabbed UI; you can also override this value
programmatically, as explained in the Date Format dialog:

The language definitions property gives you a convenient way to set the values
of any localized replaceable strings tagged with <a5:r></a5:r> in the
FIGURE 5-22:
Date Format
Dialog Box

component. We'll point out a few likely candidates for that treatment and
explain this mechanism at length in the chapter on Internationalization.

For testing, you can force the active language for replaceable strings to any of
your defined languages. The next five properties allow you to localize or
internationalize the pop-up date picker.

I7-23 +42/)-26,7 /4 4,3)2-H6 @4=, F=//427
As we discussed in Chapter 3, tabs, accordions, containers, and frames are
special controls that can help to organize your Grid fields into logical groups.
These containers (now using the word "container" generically) can also be
used to organize your buttons in a Tabbed UI.
Here's an example of a disorganized bunch of buttons in a Tabbed UI:
FIGURE 5-23:
Language
Definition

Here's what happens when you organize them into tabs by function:

Here's what happens when you organize them into accordions by function:
FIGURE 5-24:
Disorganized
Buttons in a
Tabbed UI
FIGURE 5-25:
Organized tabs by
functions

FIGURE 5-26:
Organized
accordions by
functions

Here's what happens when you organize them into frames by function:

FIGURE 5-27:
Organized Frames
by function

Finally, heres what happens when you organize them into container controls
by function:

FIGURE 5-28:
Organized
Container
Controls by
function

As you might expect from using containers of all sorts in Grids, you can
remove breaks from any of these special controls, to achieve multiple columns
when there is enough horizontal space:

When the horizontal space is inadequate, this liquid layout will revert to a
single column.
As you already know from Chapter 3 how to set up all of these containers, and
what they're good for, we won't belabor the subject here.
I7-23 4/>6, 167-32 6D6562/7
The purpose for the Other Controls is to allow advanced users to use their own
Javascript event handlers, rather than the predefined ones that Alpha Five
provide like opening a grid, running a report, opening a popup window, etc.
We'll take the contents of the "Other Controls" accordion in the Tabbed UI
builder in the order they appear: Static Text, Image, Button, Hyperlink,
IFrame, and Spacer.
But take note that the predefined actions (like opening a grid, running a
report, etc.) should not be done using these controls instead use the controls
found in the Tabbed UI Buttons section of the builder.
FIGURE 5-29:
Multiple Columns
with more
horizontal space

You might not expect ordinary Static Text to be very useful, but it often can
be just what you need. Look at the properties available for Static Text:

As you can see, in addition to appearance controls (Class and Style), Static
Text has a show/hide expression, Security groups, and a full set of JavaScript
events. So you can use Static Text to trigger any javascript action.
An Image is sometimes the most informative way of signaling functionality to
the user. Again, you can use an image to trigger any JavaScript action.
FIGURE 5-30:
Static Text
Properties

The Button in Other Controls is a little different from the Tabbed UI Button
we used earlier; it's a good alternative to an image if your action is better
described by a word than a graphic.

The IFrame in Other Controls lets you display a web page among the buttons,
and trigger actions from interactions with the page. For example, you could
frame an instructional video about your application, or a chat widget that
connects your users to your help desk. In this case, the possibilities really are
endless.

FIGURE 5-31:
Button Properties
and Hyperlink
Properties

In the following picture, UPS package tracking has been placed in an iFrame.

Finally, the lowly Spacer allows you to control the positioning of other
controls down to the pixel level without resorting to the display of a
transparent image.
EG.D4,-23 ")FF61 I: F=//42J>@.6,D-2B .,4.6,/-67
Let's return now to the primary control of the Tabbed UI, the
button/hyperlink. Notice that the Object Type dropdown allows you to
switch freely between a button and a hyperlink:
FIGURE 5-32:
UPS package
tracking in an
iFrame

and a hyperlink:

This choice affects the control's appearance, but doesn't change the
functionality.
The Button text defaults to the name of the Grid or other component, as does
the Pane title. You can edit these independently. Ideally component and page
names should be short and include no spaces, while text and title should be
clear and meaningful in the current national language. You can use
<a5:r></a5:r> tags in these fields to specify replaceable strings. You can
also use HTML to style your text inline, although this can be done more cleanly
using the next couple of properties.
FIGURE 5-33:
Primary Control of
Tabbed UI -
Button
FIGURE 5-34:
Primary Control of
Tabbed UI -
hyperlink

The Class name and Style properties allow you to change the appearance of
the button or hyperlink. Normally the defaults are exactly what you want, but
on occasion you might want a button to stand out from the crowd.
For example, if your style for the Tabbed UI (and the default for child Grids) is
GlassBlue and you want to have a Big Red Button to bring up a special
Emergency page, you could use a Grid style with red coloration as the Class,
and you could change the in-line style for the button control to have a large
size and white text.
The Pane type allows you to switch a tab from its original type, for example a
Grid, to a different type, for example an A5W page, without needing to start
over. Of course, you'll have to change the definition as well, in this case from a
Grid specification to an A5W page definition.
Sometimes you want to automatically see the current contents of a Grid or
page; most often you don't. For the few cases that need to be current, check the
Auto refresh on focus box. You may also want to use a timer event to
refresh the Grid or page periodically.
Removing the break after a button allows the next button to appear on the
same row as the current button if there is room. If the break is set, the break
height can be used to adjust the vertical space between buttons. This break
height is in addition to the top padding applied to all buttons in the Tabbed
UI.
The Pane header can appear in a band at the top of the pane, above and
independent of any content from the page or components inside the tabbed
pane. When the header is enabled, you can specify its contents as HTML, its
Class, its border properties, its padding, and whether the user can hide the
header. Hiding is done by clicking on the bottom of the pane:

The Grid definition includes the grid component name, its (short, unique)
alias for reference purposes, its base and user filters, its linkage, its initial
order, whether the grid should inherit the master style of the tabbed UI, any
settings to override, and a message or image to display while the grid is
initializing. All of these are conveniently edited in the Open Grid Genie:
FIGURE 5-35:
Pane Header

The Genie can also set the advanced properties, which we'll discuss later.
The base filter, user filter, and link all affect the WHERE clause
generated for the SQL statement used to populate the grid, and so act to limit
which records are displayed in the grid. All three, the base filter, user filter,
and link, may be combined.
The link is most often used when a child grid is opened for values from a
specific row of a parent grid or tree, for example to display all the students
enrolled in the class English 101 Section 5. When a grid is brought up as the
top component in a tabbed pane, the filter is typically omitted or set to a
constant. The link is also used to provide defaults for data entry. So, for
example you could have buttons in your tabbed UI for each of the 10 sections
of English 101, and pass the section number to the Students grid brought up in
FIGURE 5-36:
Open Grid Genie

each tab. If the user adds a student to the tab for Section 5, "5" will
automatically be placed in the Section field.

A filter is also an expression that limits which records are displayed in the grid,
and can get its value from a number of places, most conveniently through an
argument. A base filter cannot be removed by the end user in the grid search
part; it is an imposed restriction. A user filter can be changed by the end user
in the grid search part; it is more of an initial suggestion. If the grid has no
search part or other search mechanism enabled, then the difference between a
base filter and a user filter is moot because without a search part there is no
show all records link, which allows the user to remove the base filter.
FIGURE 5-37:
Linking Grid
Component

We will discuss links and filters at length when we discuss linked grids and
row expanders in a later chapter.
Definitions for other pane types
Show/hide

Security

Advanced
FIGURE 5-38:
Base Filter and
User Filter

JavaScript

Tab Pane JavaScript

K67/-23 ")FF61 I:7
You may remember that we explained that a Tabbed UI needs to be on its own
A5W page, which the Tabbed UI Builder generates or regenerates every time it
saves. That doesn't mean that there can only be one Tabbed UI in an
application, however.

One of the objects that a Tabbed UI button can bring up in a tab is an A5W
page. There is no reason that this A5W page can't contain another Tabbed UI.
For example, here are two nested Tabbed UIs:

Having both columns of buttons on the left might be confusing to users. Here
are the nested Tabbed UIs with the inner column of buttons on the right:
FIGURE 5-39:
Nested Tabbed UI

2)3& <)=#-% 4-69@&+
The Page Layout is an embeddable component that organizes other
components, pages, and reports using tabs, accordions, frames, and
containers.Items can be displayed in on-page windows, or in pop-up windows
(either modal, or modeless). Components can display automatically, or when a
button is pressed.
L)36 $)@4=/7 *6,7=7 ")FF61 I:7
A Page Layout component is very similar to a Tabbed User Interface. Both can
tie together your disparateAlpha Five components, A5Wpages, HTMLpages,
external URI pages, reports, and PDF documents into a unified application.
Both let you use tabs, accordions, frames, and containers to organize content.
The big difference between the two is that the Tabbed UI must be the master
interface for an A5W page. A Page Layout is an ordinary Alpha Five
FIGURE 5-40:
Inner Column
Buttons on the
right

component, so it can be contained in a tab of a Tabbed UI; it can also be placed
on an A5Wpage.
A=-D1-23 ) 7-5.D6 L)36 $)@4=/
Open an Alpha Five web project that contains a few components and pages.
Create a new Page Layout Builder:

Read the Page Layout Builder overview:
FIGURE 5-41:
New Page Layout
Builder

Examine the Other Controls, Containers, and Page Layout Parts:

This should all look quite familiar. In the Page Layout Parts pane, click on Grid
Component and you will see the Insert Page Layout Object dialog. Note the
radio buttons for show object initially and show object then user clicks. Also
note that you can drop down the Object Type list to view different kinds of
object.
FIGURE 5-42:
Page Layout
Builder Overview
FIGURE 5-43:
Other Controls,
Containers, Page
Layout Parts

Pick a Grid and allow it to be initially displayed. Then add a second Grid, again
allowing it to be initially displayed.
FIGURE 5-44:
Drop Down Object
List

Now go to the Containers pane and add a Tab Control around both Grids, with
a named Tab Pane for each grid, and adjust the order of the tab controls and
the grids:

Save your Page Layout as PageLayout1, turn on your Application Server, and
Live Preview your layout:
FIGURE 5-45:
Adding Grids
FIGURE 5-46:
Adding Tab
Control to both
Grids from the
Containers Pane

Try switching tabs; there will be a short delay as each pane is opened for the
first time since the data is being loaded from the server to the browser, but
switching back and forth should take hardly any time at all.
Now edit your design so that that tabs become accordions, and save as
PageLayout2.
Live Preview your revised layout:
FIGURE 5-47:
Live Preview of
the Layout

Now delete the tab control, insert named frames around each grid, and save as
PageLayout3:

FIGURE 5-48:
Live Preview of
the revised Layout
Chaptei S - Tabbeu 0I & Page Layout Builueis 1S1


If your grids are small compared to your screen width, you can try turning off
the break after the first frame end.
FIGURE 5-49:
Revised Layout
Live Preview

This will allow a liquid layout. Save the result if you like it.
Now change both grids to show when a button is clicked, and save as
PageLayout4:

FIGURE 5-50:
Turning off the
Break after first
frame end
FIGURE 5-51:
Both Grids to
show when a
button is clicked
Chaptei S - Tabbeu 0I & Page Layout Builueis 1SS

Adjust the relative location of each button and its grid until you are happy with
the design, and save your result. Also try the Modern frame style, with and
without a show-hide button. Do you need both a show-hide button for the
frame and a button to display the grid?
Try changing the Window type for the first grid from On Page to Popup-modal.
Also try Popup-modeless.
FIGURE 5-52:
Revised Layout

The fourth Window type only makes sense if the Page Layout is inside a
Tabbed UI.
FIGURE 5-53:
Changing Window
Type for the first
Grid
FIGURE 5-54:
On Page to
Popup-modeless
Chaptei S - Tabbeu 0I & Page Layout Builueis 1SS

L)36 $)@4=/7 *6,7=7 0M8 .)367
A5W pages allow a designer complete flexibility at the expense of needing to
do quite a bit of layout work. Page Layout components impose some structure
on a page and add some Ajax functionality. You can also put Page Layout
components inside A5W pages that have additional layout.
For example, here is an A5W page with a 3-column liquid layout and a Page
Layout component in the main column:

&45F-2-23 D)@4=/7
You can put more than one Page Layout control on an A5W page as
independent layouts. It often makes more sense to nest Page Layout controls.
So, for example, we can put one layout on an A5W page, and put that A5W in
another layout. Here's an example:
FIGURE 5-55:
A5W page with a
Page layout
Component in the
main column

I7-23 D)@4=/7 -2 /)FF61 I:7
Similarly, a Page Layout on an A5W page can go into one of the tabs of a
Tabbed UI. And you can nest these as deeply as you need to, if it makes sense
for the user interface.
For example, you could have a Tabbed UI (in an A5W page) hosting an A5W
page that contains a Page Layout. The current pane of the Page Layout could
hold an A5W page with a second Page Layout. And the current pane of the
inner Page Layout could show a set of linked grids.
But we are getting ahead of ourselves.
P-;;)+=
In this chapter we have learned how to use Tabbed UI Builders and Page
Layout Builders to create elegant, structured user interfaces. We will discuss
linked grids and row expanders in the next chapter.

CBAPTER 6
"()*%&+ P6J.
<6$:&@ I+6@'
In this chapter, well see how to create linked
grids, which accomplish drill downs in a natural
way, and how to open linked grids in various
places.

1A/> 1?Q<< <?/MB
A Grid is a fantastic way to display and edit a single
table, a single view, or a single SQL query. But most
data is organized into relations, and users often want to
drill down into their data from the parent table of the
relation to the child table. For example, you might want
to drill down from a single customer in the Northwind
database to see all the orders for that customer.
6

<6$:6$3 /$@ ,69%&+6$3 I+6@'
In Chapter 2 we learned how to let a user search a grid; in Chapter 3 we
learned a little about how to filter a grid. A linked grid is very similar to a
filtered grid, but there are differences of which you should be aware.
Both Linking and Filtering cause the child grid to display a filtered set of
records. In that respect, they are identical. You can describe a more complex
filter using the Filter option, because you can write Filter expressions, which
we will explain in more detail later in this book.

WARNING: Advanced material follows. Feel free to skip any or all
of this section on your first reading.

For example, the following filter is complex. It looks for all people with a first
name that starts with the letter A and a last name that is exactly Smith. We
show it in two notations: the first is Portable SQL, for use with any SQL
database; the second is Xbasic, for use with a DBF database. The only
difference is in the convention for enclosing string literals and the periods that
surround the and operator for Xbasic syntax.
left(firstname,1) = 'A' and lastname = 'Smith'(orLable SCL)
left(firstname,1) = "A".and.lastname = "Smith"(xbaslc)

This will match Able Smith, Abner Smith, Althea Smith, and A. Smith, but not
Baker Smith or Able Smithson.
Linking, on the other hand, involves defined matching field pairs. That means,
for example, that you can't reference the first character of a fieldname, as we
did in the filter expression above. To define a matching field pair, you specify a
field in the parent Grid and then a field in the child Grid. You can define
multiple matching pairs.
For instance, you could define a link like this:
Chaptei 6 - Linkeu uiius 1S9

fname = firstname
lname = lastname

This will filter the child grid so that only records where the fname and lname
fields in the child grid match the firstname and lastname of the current row in
the parent grid will be displayed. If the parent grid is currently on a row for
Able Smith, only rows in the child grid for Able Smith will be shown.
In other words, your link definition is converted into a filter automatically by
Alpha Five. But it is just a simple filter, and no use of Xbasic functions is
allowed in the filter.
When you enter a new record into a Filtered grid, you can enter any value that
you want in any of the fields, subject of course to the data validation that the
grid defines. The data you enter might not satisfy the filter criteria you have
defined. For example, if the (SQL) filter is
left(firstname,1) = 'A' and lastname = 'Smith'

and you enter a new record into a filtered grid where the lastname is Jones ,
then when you save the record, the record you just entered might immediately
disappear from view, depending on how you have set the 'Row refresh after
edit' property for the Grid.

WARNING: Very advanced material follows. Feel free to skip any or
all of this section on your first reading.

Say you have set this property to 'Full Page' refresh. As soon as you save the
record, the child grid is refreshed. Since the record you just entered does not
satisfy the filter criteria, it is not selected when the Grid is refreshed, so it will
disappear from view.
On the other hand, if you had set the refresh method to 'Minimal' (or the
default of 'Auto Select,' which defaults to 'Minimal' in many cases), then when
you save the new record, it would still be shown at the bottom of the existing

records in the Grid. If you then navigated to a new page of child records, which
causes a new query to execute no matter what the refresh method, it would
disappear.
The key difference between filtering and linking is that linking automatically
sets the values of the linking fields in the child grid to their corresponding
values in the parent grid. Therefore, any new records you enter are
automatically 'linked' to the current parent grid record, hence the name
'linking'. Even if you try to overwrite a linked field value when doing data entry
in the child grid, Alpha Five will set its value to the linking value from the
parent grid.
The final wrinkle is that it is possible to define both a link expression and a
filter expression. E.g., you might link with this definition:
state = state
and then filter with this:
left(city) = 'A'
The grid will be filtered to show all records where
state = '<value of state in current row of parent grid>' and
left(city,1) = 'a'
If you then enter a new record in the child grid, the state field will be set to the
'value of state in current row of parent grid,' even if you try to enter a different
state value.
If you enter a record with a city of 'Boston' and then save the record, it will
disappear from view when the grid is refreshed (assuming a 'Full Page' refresh)
because the record does not satisfy the full filter condition.
To return to the Northwind database, suppose you were displaying all the
Orders for CustomerID ALKFI, and you were adding a new record to Orders
with all fields displayed. If the grid were filtered by CustomerID='ALKFI', you
would be able to add a new record to Orders for CustomerID BERGS, even
though the filter was set to ALKFI but the new record might disappear from
the grid view (but not the database) at some point. If the grid were linked,
Chaptei 6 - Linkeu uiius 141

Alpha Five would force the CustomerID to be ALKFI in the new record, even if
the user typed in a different CustomerID.
M#G ?J*)$@&+'
One of the places we can put a linked grid is called a row expander, because it
opens immediately below the currently selected row.
Open your Web Tutorial project. If you haven't already built a read-only Grid
against the Northwind Customers table, build one now. (This was the "Hello,
Alpha!" exercise in Chapter 1 of this book.) Make sure that the CustomerID
field is among the fields displayed. Save this grid if you just created it.
Now build a read-only Grid against Orders. If you need detailed instructions,
here they are:
Switch to the Web Projects Control Panel and create a new Grid
component. Make it a Read-only Grid (SQL), and choose the Orders table.
Pick all of the fields except the last two. Save this grid as Orders.

Switch to the Orders Working Preview and make sure it works properly.
FIGURE 6-1:
Read-Only Grid
Chaptei 6 - Linkeu uiius 14S

Open your read-only Customers Grid and save it as
Customers_with_Row_Expander. In its grid builder Design tab Grid
Properties, scroll around halfway down (or search for "row expander") and
check Has row expander.
FIGURE 6-2:
Orders Working
Preview

Open Row expander linked Grids using the button at the right of the
property. Add grid Orders with parent field CustomerID linked to child
field CustomerID.
FIGURE 6-3:
Has Row
Expander
Chaptei 6 - Linkeu uiius 14S

Click OK, save the grid, and switch to the Working Preview pane. Now you
should be able to click on any plus sign to drill down to the orders for a
customer.

FIGURE 6-4:
Adding Grid
Orders
FIGURE 6-5:
Working Preview
Pane

As we left the row expander Mode property at its default setting of Multiple,
you can open a row expander for any visible row without closing other open
row expanders. If you change the Mode to Single, opening a second row
expander will close the first row expander.
Note that we could have defined multiple grids to display in the row expander;
they would be organized by tabs. We could also define a row expander for a
child grid on the Orders table (such as Order Details), to open a grandchild of
the Customers table.
<6$:&@ "#$%&$% /+&)'
A linked content area is another place for a linked grid. Rather than opening
below the current row, a linked content area opens in a Freeform Edit Region
or in a designated location in the master Grid template. There are four
Freeform Edit Regions above, below, left, and right of a grid. If a grid has a
Detail view, the Detail view has its own four Freeform Edit Regions.
Futures: a linked content area will eventually be able to hold other content
besides Grids. Graphs and reports are two of the possibilities under
consideration.
For this exercise, well open two linked grids in the freeform edit region below
the Orders grid.
Create a new read-only grid against the Order_Details_Extended view in
Northwind, and add all but the last two fields to the grid. Preview this and save
it as Ord_det_ext.

Create another new read-only grid against the Employees table in
Northwind, and add all but the last five fields to the grid. (We're doing this
primarily to save you the complexities of the image and memo fields.) Preview
this and save it as Emp.
FIGURE 6-6:
New read-only
Ord_det_ext Grid

Open grid Orders for editing, view the grid properties, scroll down to the
Linked Grids/Content section, and check Has linked Grids or other
content. Click on the button to the right of the Linked Content Definition
property. In the Linked Grid or Other Content Builder, click Add
Linked Content Section, and call the section ORD. Click Define Linked
Content, and add the grids Ord_det_ext (linked on OrderID) and Emp
(linked on EmployeeID) to the section. Set the Initial Grid number to
display to 1.
FIGURE 6-7:
Emp Read-only
Grid

Press OK. Press the Edit 'Freeform Edit Region' button, and bring up the
Grid Part>Bottom region. Double-click on the ORD section to add it to the
region.

FIGURE 6-8:
Define Linked
Grid(s)
FIGURE 6-9:
Adding ORD
section

Press OK twice, save your Orders grid, and view it in Working Preview. You
will see the two grids in the linked content area below the grid. The linked grid
content will change with the selected order, and you can click on the tabs to
view each linked grid.

In this exercise, we chose to display the linked grids in the Bottom Freeform
Edit Region. We could also have chosen the Top, Right, or Left Freeform
Edit Regions, or in the Master Template for the grid. When we defined our
linked content, we chose to display the grids in Tab Controls; we could also
have chosen to display them in Accordion Controls.
As an added bonus, open your Customers_with_Row_Expander grid and
look at its Working Preview. Remember,
Customers_with_Row_Expander already had Orders, which we just
modified, in its row expander. Expand a row and you will be able to drill down
FIGURE 6-10:
Viewing the linked
Grids using tabs
Chaptei 6 - Linkeu uiius 1S1

from a customer to the customer's orders to an individual order and to the
employee who took the order.

There is nothing keeping you from, say, adding a row expander to
Ord_det_ext to show a grid based on Products, linked on ProductID. The
grids can easily follow the relations in the database for a natural data browsing
experience.
P-;;)+=
In this chapter, we have learned how to link one grid to another, and how
display a linked grid in a row expander or a linked content area.
FIGURE 6-11:
Customers_with_
Row_Expander

CBAPTER 7
"()*%&+ P&D&$.
4)'6C M&*#+%'

1A/> 1?Q<< <?/MB
In this chapter we will learn how to create reports from
databases. After learning a little about the reporting
engine, data sources, and the two report designers, we
will build several basic reports, learn how to
parameterize reports, and finally run reports from web
pages.
7

A#G M&*#+%6$3 1#+:'
Alpha Five has a powerful reporting engine that can retrieve records from a
table, order and group them, calculate group totals, and then print the
resulting report, save it to a file, or send it to a remote user as an email
attachment. Users can create report definitions using two banded report
editors, Layout Table Reports and Free Form Reports, and can easily start
defining a report using the Quick Report Genie.
Alpha Five can create reports from DBF files and from SQL data sources.
When it runs a report against a SQL data source, the first step in the reporting
process is to create a temporary DBF table by applying the SQL query to the
SQL database.

The reporting engine then applies the report definition to the DBF table and
generates the report. Once the report has been generated, it can be previewed,
saved to a file, or sent via email.
N&56$6$3 / N)%) P#-+C&
The first step for the programmer wishing to create a report against a SQL
database, such as the Northwind database we have been using as an example
throughout this book, is to define a data source, which is the combination of a
data connection and a SQL query. We discussed AlphaDAO database
FIGURE 7-1:
Reporting Engine
Chaptei 7 - Basic Repoits 1SS

connection strings at length earlier in this book; for the Northwind Access
database this typically looks like {A5API=Access,-
FileName='C:\Users\<username>\Documents\Alpha Five
V11\MDBFiles\northwind.mdb',UserName='Admin'}. We have been
calling this saved, named connection nw.
Given an existing named connection string, we need only create a SQL query to
define a data source. The simplest kind of SQL query in Alpha Five uses an
existing database table or view to implicitly generate a SQL SELECT
statement. For example, choosing all fields in the CUSTOMERS table
generates SELECT * FROM CUSTOMERS. In more complicated SQL
queries, we explicitly pick the tables and fields we need, and specify how we
want related tables to be joined. If you are not already familiar with SQL, don't
be alarmed: Alpha Five has an easy-to-use query designer. For the purposes of
this chapter, however, we will stick to queries against existing database tables
or views.
When we get to the point of creating our first report, we'll start by creating the
data source for the report. First, however, we should learn a little more about
the process.
R*%6#$' ,#+ N&'63$6$3 / M&*#+%
We mentioned earlier that Alpha Five has two banded report editors and a
quick report genie. Once the quick report genie has completed its work, it
places the report in the Report Editor so you preview you what you've done
and refine it.
The Quick Report Genie step is completely optional. Anything it can do can
also be done in the Free Form Report Editor or Layout Table Report Editors
albeit not as quickly or easily, at least until you're a master of report design.
Before even embarking on our first report, let's explore the Freeform Report
Editor's screen, palettes, toolbar, and menus.

7$%+#@-C6$3 %(& ,+&& ,#+; M&*#+% ?@6%#+
As we've mentioned, the Alpha Five Free Form Report Editor is banded,
meaning that it has sections with different functions; within the sections it has
regions. The three major sections are as follows:
Report section : prints at the beginning and end of the report. The Report
section acts as a wrapper for the rest of the Report.
Detail section : prints individual records, and repeats until all records have
been printed.
Grouping levels : groups related records together. Grouping levels are
sections that you create. They repeat for each group of records.

As is clear from the diagram, the report has a hierarchical structure. This is
reflected in the main report design surface, here shown empty:
FIGURE 7-2:
Grouping levels
Chaptei 7 - Basic Repoits 1S7

Here's an image of the design surface (with some content filled in) that calls
out the sections:

FIGURE 7-3:
Main Report
Design Surface
FIGURE 7-4:
Design Surface
with Content

While you can do a certain amount of work directly on the design surface,
several other objects in the design space interact with the design surface. The
menus and toolbar:

and the Properties pane (docked at the left by default), the DragDrop List
(docked at the top right by default), and the Toolbox (docked at the bottom
right by default):

FIGURE 7-5:
Toolbar
FIGURE 7-6:
Properties Pane
and DragDrop List
Chaptei 7 - Basic Repoits 1S9

The Properties pane shown on the left is modeless, and can be docked left or
right, or floated. If it is not showing, you can bring it up from the Task List
menu. Because the Properties pane is modeless, it is very quick and easy to
use: just click on a field and set its properties. Note that the Properties pane
shows some Dynamic properties. We will discuss these in a later chapter.
You can also bring up a context menu by right-clicking on a field on the report
editor:

FIGURE 7-7:
Context Menu
invoked on the
Freeform Report
Editor

The modal Properties dialog you can bring up from here is sometimes easier to
navigate than the Properties Pane. For many users, this is the easiest method
for setting properties because the dialog presents the options in a nicely laid
out, tabbed window, as you can see below. However, except for font and color
expressions, you cannot set Dynamic properties from the tabbed Properties
dialog.

<)=#-% >)L9& M&*#+%' D'E ,+&& ,#+; M&*#+%'
Alpha Five now has two styles of reports, the traditional free form banded
report - and a new layout table banded report. For web use, most people will
want to use the new layout table report with HTML output. To create a Layout
FIGURE 7-8:
Field Properties
Chaptei 7 - Basic Repoits 161

Table Report, you will usually first create a report with the Quick Report
Genie, and then convert the Quick Report to a Layout Table Report.
Some of the strengths of Layout Table Reports include the capability to
generate high quality HTML output as well as Excel output with excellent
fidelity to the design, the capability to create attractive frames around all or
parts of a report, and comprehensive style sheet support, with different styles
for the header, summaries, and details. Layout Table Reports also allow for
easier maintenance of columnar reports, since inserting a new column will
adjust all other columns, and they can be used as linked reports. On the other
hand, Free Form reports offer absolute positioning, for precise control over
reports to be output onto pre-printed forms, allow for conditional report
objects, and are capable of creating multi-column reports.

K'6$3 %(& S-6C: M&*#+% I&$6&
How much can you do with Quick Reports alone? Quite a bit, actually: you can
establish the overall structure and style of the report, adjust your fonts, and
even customize the field and group labels.
If you don't have Alpha Five open, please open it now to a project that contains
a named nw connection to the Northwind.mdb database. If you don't have
such a project handy, create a new project, create an AlphaDAO connection
to Northwind.mdb, and save the connection as nw.
Give the Control Panel the focus (not the Web Projects Control Panel),
switch to the Reports tab, and click on the New icon. In the New Report
dialog, pick <SQL Data Source> and press OK.

In the Configure DataSource dialog, pick Create ad hoc DataSource,
pick Named Connection String, and drop down nw.
FIGURE 7-9:
New Report
Dialog
Chaptei 7 - Basic Repoits 16S

Assuming that the source connects, press Next. In the Specify SQL SELECT
Statement dialog, pick Columns from a Table or View, drop down
Customers, and check * (all columns). Alpha Five will generate a SQL
statement of SELECT * FROM Customers.
FIGURE 7-10:
Configure Data
Source Dialog

Note the Arguments section of this dialog. We will discuss it later.
Press Finish.
FIGURE 7-11:
Choosing
Columns to
retrieve data

In Design-Time Properties, leave the number of records at 0, and press
OK.

In the Report Genie dialog, leave Use the Report genie selected, and
press OK.
FIGURE 7-12:
Design-Time
Properties
FIGURE 7-13:
Select Use the
Report Genie

In the Quick Report dialog, take some time to explore all of the tabs and
formatting options. Then, go to the Columns tab and select Companyname,
Contactname, City, Country, and Phone. At this point you can also
adjust the column label and width and check off the summaries you'd like
calculated.

You may automatically size the columns if you wish, or adjust them manually
to you preference.

FIGURE 7-14:
Quick Report
Dialog
FIGURE 7-15:
Adjusting Column
Width

Next, go to the Groups tab and select the Country field to use as a group
break. You can also set the group break labels here.

Go to the Report Settings tab. Note the checkbox to Use Layout Tables. This
applies to the Quick Report only. If you open the Quick Report in an editor
later, you will be able to choose between a Layout Table Report or a Free Form
Report.
FIGURE 7-16:
Groups

Make sure the Use Layout Tables checkbox is selected and explore the
formatting options available in this dialog. Click on the checkbox for Page
Numbers and leave the rest of the settings as they are.

FIGURE 7-17:
Report Settings

Under the Filter/Order tab explore the possibilities for building filter and
order expressions. Remember that when you run your report you can apply
additional filters; for SQL reports, there can also be additional terms added to
the WHERE clause in the underlying SQL SELECT query.

FIGURE 7-18:
Filter and Order
Expressions

Since this is a report using table layouts, select the style parameters. Choose
Section Borders, Color alternating rows, and Rounded Corners.

FIGURE 7-19:
Style

Next, click on the Preview tab to preview the report so far. From the report
preview, you can print if you wish, and also save or email the result in a
number of formats: PDF, Rich Text, Plain Text, Excel, and for Layout Table
Reports, Dynamic HTML. Save the Quick Report as
Customers_QuickReport.

FIGURE 7-20:
Preview

"#$D&+%6$3 %# ) <)=#-% >)L9& M&*#+%
Once you have gone as far as possible with a Quick Report, you'll want to
convert it to a Free Form or Layout Table Report. The Open in Report
Editor button on the main toolbar does this when the Quick Report Genie is
open.
If you want to preserve the Quick Report for future use in the Genie, first press
the Save As button on the main toolbar and name the report
Customers_Layout.

When you press the Open in Report Editor button you will see this dialog:

FIGURE 7-21:
Open in Report
Editor

Pick 'Layout Table' report and press the Save Report and Open in
Report Editor button to convert the Quick Report to a Layout Table Report.
?@6%6$3 ) <)=#-% >)L9& M&*#+%
Editing a Layout Table Report is somewhat different from editing a Free Form
Report, although many operations, such as adding a field to the report, are the
same for the two types of report.

When editing a Layout Table Report, however, you must think in terms of rows
and columns and regions, as though you were working in a spreadsheet or
HTML table which, in fact, may be your ultimate targets for the report.
Change the title of the report to Customers by double clicking the cell or
selecting the cell and pressing the ENTER key.

FIGURE 7-22:
Editing Cell
Contents

Add a new row to the cell labeled {country} by using the cell menu or the
Layout Table toolbar. You can drop down the cell menu by clicking on the
triangle (down arrowhead) that appears in the top-right corner of a cell when
the cell is selected, or by right-clicking in the cell.
Move the {country} row underneath the new blank cell by clicking and
dragging the highlighted orange box on the far left of the cell and adjust the
height of the blank cell. You can adjust the row height to your preference by
dragging the tab icon in the vertical ruler.

FIGURE 7-23:
Adding Rows with
the Cell Menu
FIGURE 7-24:
Adjusting Row
Height

Print Preview the report and scroll through the pages.

Notice that some of the group information bleeds over between pages. Lets fix
this by making sure each group is contained on a single page. Go back to the
Layout Table editor, select the Group country tab and go to the Properties
menu. The Properties menu can be found either through the Objects menu, or
by right clicking on the Group country tab.

FIGURE 7-25:
Named
Connection String
and Drop down
nw
FIGURE 7-26:
Properties Menu

In the Group Properties dialog, go to the Region tab, select the Keep
group together on page checkbox, and press OK.
Save and preview the report.
FIGURE 7-27:
Group Properties
Dialog

If you are satisfied with your preview save the report in all five possible
formats: Adobe Acrobat PDF, Dynamic HTML, Rich Text, Plain Text, and
Excel. Each time you save, pay attention to the report processing time, and
view the report in the default viewer.
FIGURE 7-28:
Preview of Report

N&'63$6$3 ) ,+&& ,#+; M&*#+% ,+#; PC+)%C(
Now that we can perform major edits on a report, let's try creating a free-form
report from scratch. Before we can start, you'll need to understand the drag
and drop controls.

Working from left to right in the DragDrop toolbar, the Aladdin's lamp
icon controls whether or not a Summary Genie appears to define a summary
calculation when you add a single field to the report layout. The Summary
Genie will not appear if you add multiple fields, or if you add a field for which a
summary would not make sense.
The Horizontal Alignment and Vertical Alignment button pair allow
you to choose whether the arrangement when you drop multiple fields will be
across the form or down the form.
FIGURE 7-29:
DragDrop List

The next pair of buttons, Group Controls and Don't Group Controls,
allows you to choose whether the fields and labels you drop will initially be
grouped or not. Grouped controls are easy to reposition on the form as a unit,
and not so easy to reposition relative to each other. You can always group and
ungroup controls later using the Arrange Toolbar that we saw earlier.
The remaining buttons are a triplet: Fields with titles, Fields only, and
Titles only. These (obviously, from their names) allow you control whether
you are adding fields, field titles, or both. If you pick Fields with titles and
Horizontal Alignment of multiple fields, then the titles will be above the
fields:

If you pick Fields with titles and Vertical Alignment of multiple fields,
then the titles will be to the left of the fields:
FIGURE 7-30:
Horizontal
Alignment and
Vertical Alignment
FIGURE 7-31:
Horizontal
Alignment of
Multiple Fields

Now we're ready to create a report from scratch. We should start simply.
What's simpler than a mailing label? No, wait, Alpha Five already has a
specialized Genie for mailing labels and envelopes. A letter? No, Alpha Five
has that covered, as well. Oh, well, let's recreate our Repeating Form example,
only for a different table, and working without a Genie.
Start by creating a new report from a SQL data source, this time from the
nwSuppliers table. The query will be SELECT * FROM Suppliers.
FIGURE 7-32:
Vertical Alignment
of Multiple Fields

When you get to the Report Genie dialog, choose Go directly to the Report
definition.
FIGURE 7-33:
SELECT*FROM
Suppliers Query

You will wind up with a blank design surface, and 12 fields listed under SQL
DATA SOURCE.

FIGURE 7-34:
Report Genie
Dialog
FIGURE 7-35:
Blank Design
Surface with 12
fields under SQL
DATA SOURCE

Let's start by putting a title of "Suppliers" and the date in the header. For the
title, click on Text in the Toolbox and drag a box in the Report Header area.

Now click in the box and edit the word "Text" to say "Suppliers". Click on the
Text Toolbar icon on the top toolbar to display the Text Toolbar, and
change the font for the word "Suppliers" to 18 point bold. Finally, adjust the
size of the box to just fit the word, and drag the box to where you'd like to see
it.
FIGURE 7-36:
Text Box in the
Report Header
Area

Now set the DragDrop list to Fields only and drag the system Date
variable from the DragDrop List to the header.
FIGURE 7-37:
Text Box edited

We want page numbers, but no report summary. Delete the Report Footer area
and add a Page Footer area. Now drag the system PageNumber variable
from the DragDrop List to the Page Footer.
FIGURE 7-38:
Date Variable in
the Header area

Now we come to the main event. Open up the Detail section to make room,
and set the DragDrop list to Controls Down and Fields with titles. Click
on SQL DATA SOURCE to select all the fields beneath it, and drag them into
top left of the Detail section of the form.
FIGURE 7-39:
Page Number
variable in the
Footer

If you selected the wrong things, just use the Edit|Undo menu item to revert
the action (or use the Alt-Backspace shortcut) and try again. If you put the
right fields and labels in the wrong place, select them all by clicking on one and
then using the Edit|Select All menu item or the Ctrl-A shortcut to select
them all. When they are all selected, drag them to the correct spot with your
mouse, or nudge them with the arrow keys.
When nudging objects using the arrow keys, you can hold down the SHIFT key
to move the object in tiny increments giving you precise control. Or you can
hold down the CONTROL key and move the object so that it snaps to the grid.
FIGURE 7-40:
Fields from the
SQL DATA
SOURCE dragged
into the Detail
section

The Secret of the Rulers.
The rulers in the Alpha Five Freeform Report Editor provide a quick
way to move and align multiple objects.
While in the Freeform Report Editor, click and drag directly on either
the horizontal or vertical ruler to move multiple objects left, right, up or
down even if they are in different sections.
Or, right click directly on either the horizontal or vertical ruler to open
an alignment menu. You can then choose to align objects, left, right, or
to the top or bottom.
This can be a big time saver when dealing with lots of fields, labels or
graphics.

Now preview your report.
FIGURE 7-41:
Ctrl+A/SelectAll
menu to select all
the items and drag
to the desired
place with the
mouse

You can snug up the vertical spacing by making the Detail pane smaller; if you
need better demarcation between records, add a line at the bottom of the
Detail pane.

FIGURE 7-42:
Report Preview

Preview your report one more time: this should look pretty good.
FIGURE 7-43:
Adding a line at
the bottom of the
Detail Pane

Make any other changes you'd like, and when you are satisfied with the
preview, save your report as Suppliers.
2)+);&%&+6T6$3 ) N)%) P#-+C&

B#%&. >(6' '&C%6#$ C#$%)6$' '#;& )@D)$C&@ ;)%&+6)9E 75
=#- 56$@ =#-+'&95 3&%%6$3 9#'%U 5&&9 5+&& %# ':6* %# %(& $&J%
'&C%6#$E

FIGURE 7-44:
Report Preview
with the line
added

Suppose that you wanted to generate a personal sales report for each sales
employee to peruse. You could of course create one report per employee by
including WHERE clauses in your SQL statements, or putting the condition
into the filter expression for each report. But you'd be cloning the report many
times and changing one thing for each.
Alpha Five makes it easier than that: you can create a single parameterized
data source, so that each time a salesperson runs the report, he or she gets only
the relevant information, and not anyone else's orders.
The Orders table in Northwind has foreign-key fields for CustomerID and
EmployeeID that relate each order to the customer who placed it and the
salesman who accepted it. Let's create a grouped report of Orders by
Customer that is parameterized by Employee. We will base the table on the
Orders, Employee and Customer tables and the Order Details Extended view.
If that sounds complicated, don't despair: we are going to build it step by step.
Open the Reports tab of the Control Panel and press New. Select <SQL
Data Source>, press OK, select Create ad hoc DataSource, and drop
down the nw connection string.

Press Next. Select Custom SQL Statement or stored procedure, leave
the SQL Syntax set to Portable, and press the Query Builder button. Press
the Add Table button and select the Orders table.
FIGURE 7-45:
nw Connection
String

Select the Add Table button and select the Customers table. Press Next.
The Alpha Five Query Builder should automatically select the correct linking
fields, CustomerID.
FIGURE 7-46:
Selecting Orders
Table with the Add
Table Button

Press Finish. Select Orders, press Add Table, select Employees, and press
Next. The Alpha Five Query Builder should automatically select the correct
linking fields, EmployeeID.
FIGURE 7-47:
Selecting
CustomerID

Press Finish. Select Orders, press Add Table, check Views, and select
Order Details Extended.
FIGURE 7-48:
Selecting
EmployeeID

Press Next, and manually join the table and the view on OrderID.
FIGURE 7-49:
Selecting Order
Details Extended

Press Finish. Now you have all the tables and views you need.
FIGURE 7-50:
manually joining
the table and the
View on OrderID

Switch to the Columns tab. The only columns you need are OrderDate from
Orders, CompanyName from Customers, EmployeeID, LastName,
and FirstName from Employees, and ProductName and ExtendedPrice
from Order_Details_Extended.
FIGURE 7-51:
Tables and Views
Required
Chaptei 7 - Basic Repoits 2u1

Let's stop here and save what we've done. Press OK. In the Specify SQL
SELECT statement dialog, press Save as named DataSource and call this
order detemp.
FIGURE 7-52:
Choosing columns

Back in the Specify DataSource dialog, select Use named DataSource
and order detemp, then press the Edit button. Advance to the Specify SQL
SELECT Statement dialog.
FIGURE 7-53:
SQL SELECT
Statement Dialog
Chaptei 7 - Basic Repoits 2uS

This might be a good time to Preview Data.
FIGURE 7-54:
Edit Named
DataSource

Notice that the first 100 records in the query are all for Employee 12, Nancy
Davolio. You can close the preview.
Now we are going to add an argument and modify our SQL statement to use
the argument in a WHERE clause. Click on Define Arguments and press the
Add button. Add a Numeric argument called EmployeeID.

Press OK.
We are going to define a list of employees to make it easy to select the correct
one. Drop down the Style list box and select ListBox. A Define Choices
button will appear: press it. On the Define Choices dialog, press the
FIGURE 7-55:
Data Preview
FIGURE 7-56:
Adding an
Argument
Chaptei 7 - Basic Repoits 2uS

Define/Edit Dynamic Choices button. Pick the nw connection and the
Employees table.

Drop down the list for Display value and select <Expression>. The
expression you want is LastName + ', ' + FirstName.
FIGURE 7-57:
Choosing nw
Connection and
the Employees
table

Test the SQL Expression.
FIGURE 7-58:
Entering
Expression

Press OK twice to get back to the Dynamic Choices dialog. In the Stored
Value field, choose EmployeeID.
FIGURE 7-59:
Testing the
Expression

Preview choices:
FIGURE 7-60:
Dynamic Choices
Dialog

Close the preview. Press OK to close the Dynamic Choices dialog.

Press OK to close the Define Choices dialog. Set the Default to 1.
Press OK, and you should wind up back at Specify SQL Select Statement,
with an argument of EmployeeID defined.
FIGURE 7-61:
Preview List of
Choices
FIGURE 7-62:
Define Choices
Dialog

Now we just need to add the argument to the SELECT statement. Click on
Query Builder and go to the Filter tab. You want to test for
Orders.EmployeeID is equal to the argument :EmployeeID, or in SQL
WHERE Orders.EmployeeID = :EmployeeID.
FIGURE 7-63:
Edit Named
DataSource

Press OK, Finish and then OK to get back to the Configure DataSource
dialog. Now that we have our DataSource, defining the report will be easy. Use
the Quick Report Genie and set your appearance options as you'd like.
Edit the report design to get rid of the unnecessary fields in the detail, and
print the employee's name in the title. Pull any fields displayed beyond 7.5"
back into the printable area. If you'd like the employee's name to be spaced
nicely, you can use an expression, e.g. alltrim(firstname)+"
"+alltrim(lastname). Fix up the currency format and the alignments so that
you are happy with the report, and save it as Orders_for_Empl.

FIGURE 7-64:
Adding argument
to the SELECT
Statement

M-$$6$3 ) M&*#+% 5+#; ) 1&L 2)3&
In Chapter 5 we learned how to create Tabbed User Interfaces and Page
Layouts. Both of these can launch reports, and adding a report to either one is
an extremely simple process.
You can display reports directly from A5W pages, but you wouldnt want to.
The Page Layout and Tabbed UI components take care of generating the
report, creating an IFRAME for display, and loading the report into the
IFRAME. If you tried to do this yourself youd find that there was some fairly
hairy Xbasic and JavaScript to write to make it work well.
Well explain how to display a report in a Page Layout component. Displaying
a report in a Tabbed UI is almost exactly the same process.
Open the Alpha Five project that contains your report. In the Web Projects
Control Panel, create a new Web Component, choose Page
Layout Builder, and press OK. In the dialog, choose Page Layout Parts,
and in the Page Layout Parts accordion choose Report. Because Layout
Table reports are capable of generating high quality HTML output you will
always want to use a Layout Table Report for this task over a Free Form
Report.

The Insert Page Layout Object dialog will appear. Select Show object on
page when page is initially displayed and pick your report. Were picking
Customers_Report.
FIGURE 7-65:
Insert Page
Layout Dialog

Press OK. The Report will be added at the top of the Selected Objects list.

FIGURE 7-66:
Select Show
object on page
when page is
initially displayed

Turn on your Application Server and click on the Live Preview tab. If all goes
well your report will display in the tab after a brief display of the
Workingmessage.
Save your Page Layout component as PL_Cust_report, and then use the
Save Page button to create an A5W page that contains the component. Set
the page to Automatically inherit page background from the Component style,
and press Save Page.
FIGURE 7-67:
Report at the top
of the Selected
Objects List

Call the new page Cust_report.

FIGURE 7-68:
Save Page
FIGURE 7-69:
Naming the page
as Cust_report

From the Web Projects Control Panel, open the page in the HTML Editor.
Press the Execute Page button on the toolbar, and the report will display in
your default browser.
If you wish to display a parameterized report, such as the Orders_for_Empl
report we created in the previous section, youll need to perform a few more
steps before you can run it successfully from a web page. In the Properties for
the report in the Page Layout, you need to define the arguments of the report
and bind them to variables, e.g. EmployeeID (numeric) bound to
session.EmployeeID. When you run the page, the variables must be set
somehow. This is often done by using an HTTP query parameter when loading
the page, e.g. Cust_report.a5w?session.EmployeeID=1.
If you are calling a report from a grid, then what you often do is to bind the
reports arguments to values from the current row in the grid. In a later
chapter (and volume) of this book, we will discuss tying an action, such as
displaying a report, to a grid button.
M&*#+% V&+'6#$ "#$%+#9
If you're like me, you save your documents early and often; that includes
reports. It's surprisingly useful to save Alpha Five reports early and often
because Alpha Five keeps your old report layout versions.
Open the Control Panel of the project where you have been working on
reports, select the Reports tab, and right-click on one of the reports you have
been editing.

At the bottom of the context menu you'll see Restore Prior Version if the
report has been edited and saved. If the report you have chosen doesn't have
prior versions, either find another one that does, or edit a report a little and
save it.
Select Restore Prior Version from the context menu. You will see the
Restore Backup dialog.
FIGURE 7-70:
Context menu
displaying Restore
Prior Version

For test purposes, check Restore to different name, pick a version that is
not current, and click on Restore. You should see the prior version, which by
default will have a name that starts with "copy_of_", appear in your list of
reports. If you open that report, you should see your prior version. If you open
the current version, under the original name, you should see your latest edit.
FIGURE 7-71:
Restore Backup
Dialog

P-;;)+=
In this chapter we have given you a brief introduction to basic reporting in
Alpha Five. In a later chapter (and future planned volume) of this book, after
we have learned some Xbasic, we will explore reporting at a more advanced
level.

A5 Tut Remk

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

A5 Tut Remk

Încărcat de

Drepturi de autor:

Formate disponibile

VOL

S-ar putea să vă placă și