Powered by Alpha Five V12

Quick Start Guide

for Web & Mobile Applicaons

The Revoluonary Way to Build

Sophiscated Database Applicaons for the
Desktop, Web and Mobile Devices

Susan Hussey Bush

The purpose of this Quick Start Guide

Any new software has a learning curve. And all users have questions
as they are using it.
This guide will show you how Alpha Anywhere works and how you
can quickly access the large store of builders, documentation and videos
that will expand your knowledge and give help when you need it.

Our gift to you

When you purchase Alpha Anywhere, powered by Alpha Five v12,
you will receive a free copy of the Electronic Download Edition of
Alpha Five Web & Mobile Made Easy
The Basics and More for Version 12 - Volume 1
by Susan Hussey Bush
Susan Bush has long been known for her down-to-earth approach and
step-by-step teaching format. The full manual has 500 pages of instruction and sample databases. It will take you deep into additional features
and serve as a reference while you are developing your own application.

What youll find here

Chapter 1, The Alpha Five Advantage, will introduce you to the software and describe its basic elements.
Chapter 2, Sampling the System, will show you how to use the software and create web components
Chapter 3. Marching into Mobile, will introduce you to mobile design.
Chapter 4, Questions and Answers, details the use of the extensive
library of documentation and videos.
Chapter 5, Dazzling Design, describes additional features and programming aids.
Thank you for considering Alpha Anywhere. Please send your comments and questions to me at [email protected].
Warm regards,
Richard Rabins, Co-chairman, Alpha Software, Inc.

This book is copyrighted.

AlphaAnywhereQuickStartGuidesareajointventurebetweenLibertyManuals
Co.andAlphaSoftware,Inc.
AlphaAnywhereandtheAlphaAnywherelogoareeitherregisteredtrademarksor
trademarksofAlphaSoftware,Inc.intheUnitedStatesand/orothercountries.
LibertyManualsandtheLibertyManualslogoareeitherregisteredtrademarksor
trademarksofLibertyManualsCompanyintheUnitedStatesand/orother
countries.
Allothertrademarksarethepropertyoftheirrespectiveowners.
2013AlphaSoftware,Inc.and2013SusanHusseyBush.Allrightsreserved.
PrintedintheUSA.
12/13

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Table of Contents
The purpose of this Quick Start Guide .................................................................i
Our gift to you .........................................................................................................i
What youll find here ...........................................................................................i

1 The Alpha Anywhere

Advantage

2 Sampling the System

Keeping up 2
Alpha Anywhere, the leader in time and design ..............................................3
Developing for mobile devices .............................................................................3
Compatibility with remote data.............................................................................4
How Alpha Anywhere interacts with database types .........................................5
AJAX smooths and speeds your application? ....................................................5
Developing Web Applications...............................................................................6
Using your application on the web 6
Understanding Web Components ........................................................................6
Creating web pages 10
Putting it together 11
Newbies take note................................................................................................11
Browsers call the shots 11
Understanding web based databases 12
Back in the day 12
Additional notes on AJAX 13
Alpha Anywhere and AJAX
by Selwyn Rabins 13
Sending data the traditional way 13
Sending data with AJAX 13
Understanding the process 14
Seeing is believing 14
What is best? SQL or DBF??? 14

Using Alpha Anywhere Help ...............................................................................18

How the material is organized ............................................................................19
Preparation for the lessons.................................................................................19
Understanding Workspaces................................................................................19
Understanding the Web Projects Control Panel ...............................................21
Connecting to a SQL database 23
Starting the Application Server 24
Creating a new Web Project 25
Creating a Grid Component ................................................................................25
Defining the Component Type 27
Defining the Data Source 28
Defining the Query 28
Selecting Fields for the Grid 31
Setting the Field Properties 31
Defining the Grid Properties 33
Setting up the Search part elements 34

iii

TABLE OF CONTENTS

Setting up the Detail View elements 35

Saving the component 38
Previewing Web Components .............................................................................38
Viewing at the Preview tab 39
Viewing in Live Preview 39
Viewing in Working Preview 39
Viewing in the Browser 40
Testing Grid component design .........................................................................41
Using the Detail View 43
Looking at the Grid settings 44
Using the Search Part Query Syntax 44
Clearing Search part values 45
Understanding Modeless and Modal windows 45
Revising an existing Grid component ................................................................47
Centering column contents 47
Copying properties to one or more fields 48
Creating an Image Gallery Component ..............................................................50
Setting up the sample images 50
Creating the component 51
Viewing the image files 51
Creating a Tree-control Navigator ......................................................................52
Setting up the Grid 52
Locating component controls 53
Defining the Tree-control Navigator 53
Setting up the Master Template 56
Getting ready for the web ....................................................................................56
Creating a Tabbed UI component .......................................................................58
Adding & modifying controls 60
Changing the Style 61
Adding Frames 62
Adding a Tab Control and Tab Panes 63
Understanding the Browser navigation warning 63
Adding a page title, headers and footer 64
Adding a Home Page 65
Understanding A5W pages for Tabbed UIs 66
Viewing and using the Project in the Browser ..................................................66
Publishing the Project 67
Using Quick Publish 67
Execute vs. Publish 67
A few more notes .................................................................................................69
About annotating the
grid component 69
About getting off to a Flying Start 69
Opening an existing web application 69
Converting from DBF to SQL theres a genie for that 69
Converting an existing web project to SQL 70
RAD without compromise ...................................................................................70
Using the Code section 70
Builders are everywhere! 72
Code design is everywhere! 73
Connecting to an Alpha Anywhere database ....................................................73
Converting from DBF to SQL 74
Converting an existing web project to SQL 74

iv

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

3 Marching into Mobile

4 Questions & Answers

Mobile Device Simulator......................................................................................76

Phone 76
iiPad 76
How the material is organized ............................................................................77
Preparation for the lesson...................................................................................78
Understanding the UX Component ....................................................................78
What is a Dialog? 79
What are Lists? 79
Whats the difference between Grid and UX components? 79
Viewing UX Components 80
Creating a UX Component...................................................................................80
Overview of the UX Builder 80
Understanding the Menus 81
Understanding UX Component design 82
Adding Textbox Controls ....................................................................................83
Adding a single control 83
Adding multiple controls 84
Adding controls from pre-defined lists 85
Adding controls from a table 86
Understanding Breaks 87
Adjusting the entries 88
Changing Label Position 89
Removing Breaks 89
Adjusting control width 90
Binding the UX fields to an existing table .........................................................90
Mapping the fields 91
Binding a control in the UX builder 93
Adding submit and reset buttons 93
Submitting the data to the table 96
Editing the data 96
Understanding auto-increment controls 96
Hiding a control 97
Understanding *unbound control behavior 97
Setting the Device Simulator ..............................................................................97
Understanding Panels and Containers ..............................................................98
Understanding Containers 99
Adding a Panel Card 99
Adding a Panel Header & Footer 100
Testing your App on a Mobile Device ..............................................................102
Using the QR Code method 102

How the material is organized ..........................................................................107

Understanding the Documentation Viewer (DV) .............................................107
Getting off to a strong start 108
Display and navigation 108
Searching for topic pages 110
Saving page references 113
Taking Notes 114
Printing topics 115
Updating the documentation 116
Window style 117
Restoring open pages 117
Sending feedback 117

TABLE OF CONTENTS

Using the Video Finder ......................................................................................117

Filtering 118
Getting More Info................................................................................................119
Videos and general information 119
Learning Alpha Anywhere for Web & Mobile 120
Creating Reports 120
Using and Finding Functions 120
Learning Xbasic 120
Learning Alpha Anywhere for the Desktop 121

5 Dazzling Design!

vi

What youll find here ......................................................................................124

Heres where we prove that Alpha Anywhere is the leader in time and design 125
Understanding Alpha Anywhere Security........................................................125
Understanding the Client / Server model .........................................................126
Learning Xbasic..................................................................................................127
Builders when and where you need them........................................................128
SQL Select Statement, Query and Stored Procedure 128
Action JavaScript, JavaScript and jQuery 130
CSS Style Builder 132
JSON 132

Chapter 1.

The Alpha Anywhere

Advantage

We help developers everywhere

Build extraordinary data-driven business applications in a fraction of the time it takes with other
development platforms. Plus, Alpha Anywhere is fully customizable. Read on to learn more why we say
that Alpha Anywhere is the leader in time and design.

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Notes:

Keeping up
Its not easy to keep up with the folks at Alpha Software because they are constantly
tweaking the software. And sometimes we learn about upcoming changes before they are
released.
As a result, you may come across screen shots or terms that have changed since a section was written. In most cases, this will not interfere with your learning experience we
know you guys are smart and will be able figure it out!
If you do come upon something untoward, however, send me an email at [email protected] and well look into it. SHB
If you have not already done so, please update your software to the latest version. Open Alpha Anywhere. Go to Top Menu > Help > Download patches.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Alpha Anywhere, the leader in time and design

Alpha Anywhere has been known since its inception as an outstanding, fully featured, easy-to-use desktop database software. It still has that capability.

But. Today it is so much more. It has become a development environment that works
as well with SQL tables as it does with its native DBF tables.*

As a matter of fact. SQL is much preferred for the web because it is more robust
and faster when the data is remote.
Experts agree. Alpha Anywhere beats other web development software because it
provides RAD without compromise. The features for quick development are there
when you want them and they get out of the way when you want to step in. The code is
fully exposed. You can add, change or modify the underlying JavaScript, CSS, HTML,
Xbasic and other code at will.

Everyone wins. Suppose you are not an expert? Theres a place for you here, too.
The built-in development tools permit sophisticated design even for non-programmers.

We help developers everywhere build extraordinary

data-driven business applications!
Flexibility. Thats what Alpha Anywhere is all about.
Now that you are confident that Alpha Anywhere will meet your needs, regardless of
skill level or file format, lets get to work.

Developing for mobile devices

Alpha Anywhere is fully capable of developing mobile applications that run on all
the popular devices.
The folks at Alpha Software use a different approach from most mobile web frameworks because they dont settle for least-common-denominator applications. They
take full advantage of the capabilities of Webkit running on iPad and iPhone platforms,
*. DBF is the default (aka native) file format used by Alpha Anywhere on the desktop. SQL stands for Structured Query Language
and is a relational database system used by Microsoft SQL Server and Access, MySQL and other platforms.
. Rapid Application Development (RAD) is the term used for software that comes with predefined choices. While it speeds design, it
usually means compromises in functionality and performance in exchange for enabling faster development and facilitating application maintenance.
http://en.wikipedia.org/wiki/Rapid_application_development 9.30.2012
. WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine
that's used by Safari, Dashboard, Mail, and many other OS X applications. WebKit's HTML and JavaScript code began as a branch
of the KHTML and KJS libraries from KDE. http://www.webkit.org/ 9.10.2012. PS: If you need to know what the rest of these initials stand for, be my guest and Google-away. SHB

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Compatibility with remote data

and degrade gracefully by disabling or replacing specific features on platforms that

don't support them.
If the platform supports a feature, you will have access to it. If not, it is automatically
disabled or replaced with a suitable equivalent. For example, the PC automatically
reverts to mouse control when touch is not available and a slide bar replaces momentum
scrolling.
No matter what the format PC, tablet or smart phone Alpha Anywhere takes full
advantage of the screen real estate. Pinch-zoom, swipe gestures, momentum (page by
page) scrolling and 3d transforms are all available.

And. A single design can work for multiple layouts. How sweet is that?
But, remember. We are designing here. To actually use your web or mobile application, you will need to purchase an Application Server license from Alpha Software.*

Compatibility with remote data

Alpha Anywhere is compatible with most file types. SQL files are often referred to
as back-end or remote in order to distinguish them from the native Alpha Anywhere
files DBF files.
Rather than using ADO, the program has its own updated connection tool called
Alpha DAO with genies that make it easy to open the connection. Once the connection
has been established, you can proceed with development.
AlphaDAO connects Alpha Anywhere to all of the applications in the following list.
If your favorite database is not here, contact Alpha Software to see which driver to use.
Database

Driver

FlexQuarters QODBC

QuickBooks

IBM DB2

DB2

InterSystems Cache

ODBC

Syntax

ODBC

Microsoft Access

Access

Microsoft Excel

Excel

Microsoft SQL Server

SQLServer

MySQL

MySQL

Oracle XE, 9i, 10g

Oracle

Oracle Lite (9i, 10g)

OracleLite

Quantel

ODBC

ODBC

Sybase Adaptive Server Enterprise

ODBC

Sybase

Sybase SQLAnywhere

ODBC

SQLAnywhere

*. See Using your application on the web on page 6.

. Microsoft's ActiveX Data Objects (ADO) is a set of Component Object Model (COM) objects for accessing data sources. http:/
/en.wikipedia.org/wiki/ActiveX_Data_Objects. 10/22/2012.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

WHERE ARE THE FILES

STORED?

The remote database continues to reside in its original location and remains in its
original state.

HOW ABOUT MULTIPLE

SERVER REQUESTS?

Most servers support transactions that permit requests to come in from multiple
users at a time, as well as allowing changes made by a single user to be seen by all users
at once. Alpha Anywhere web and mobile applications support these features.

HOW ABOUT SECURITY?

You can build secure web and mobile applications with full read/write and reporting
capabilities against any database for which you can create an Alpha Anywhere web or
mobile application. To see how security is applied, see page 125.

How Alpha Anywhere interacts with database types

ALPHA ANYWHERE
DATABASES

The Alpha Anywhere developer will, of course, be able to use his/her existing tables.

REMOTE DATABASES

Simply point and click to establish a connection, choose the data source and select
the fields you want to include. Interaction is seamless and smooth.
The following chart shows how Alpha Anywhere web and mobile applications interact with Alpha Anywhere and SQL back-end databases. In both situations, the databases are separate from the web/mobile application program. One must return to either
the Alpha Anywhere Control Panel or the remote database application to make changes
in the database itself.

Feature
CONNECTION
TABLES
VIEWS / SETS
SQL SELECT STATEMENT

Alpha Anywhere

SQL

Automatic

Established via
Connection String, p. 22

Choose from list

Choose from list

Sets: Re-created as Views for

Views:

web applications

Choose from list

N/A

(Custom Query, Advanced Features)

May be created A5 Builder, p. 128

LEGEND

Connection: The gateway to the database.

Automatic: No action necessary on the part of the user.

AJAX smooths and speeds your application?

Regardless of file format SQL or DBF data in web and mobile applications must
travel from the end users computer to the server where the data resides. Each information request and data change requires trips back and forth between the two. This takes
time and can produce a jerky appearance as the screen refreshes.
AJAX (Asynchronous JavaScript and XML) smooths and speeds the transition of
data because it changes the way data is accessed from the server so web databases
behave almost like those for the desktop. Its been around a while, but has always
required advanced programming knowledge to add it to an application.

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Developing Web Applications

Alpha Anywhere gives you AJAX without coding! Theyve done

all the work and all you have to do is go about the business of creating your application.
You dont have to know JavaScript or even how the motor runs; its just in there.

Developing Web Applications

The basics of creating Alpha Anywhere web applications can be learned quickly and
easily, as we will explain in the next chapter. After you do those exercises, you will have
a good sense of how the program works.
Sound simple? It really is once you master some basic steps. But dont let that simplicity fool you. We are talking about a serious tool here. Just as hammer and nails
(well, maybe nail guns) can be used to build mansions, Alpha Anywhere can build the
web app of your dreams.
And it will be secure because the security system is state-of-the art.

Using your application on the web

REALLY, REALLY IMPORTANT

The Alpha Anywhere software program contains the design tools. You can create
applications and view them on your computer, but in order to publish to the Internet or
your Intranet, you need to know that:
You must purchase an Application Server license from Alpha Software.

LICENSE
SERVER

In order to put your application on the web, you will also need either your own
server (it can be a Windows computer*) with Alpha Anywhere and the license) installed
or an outside server with the proper software installed, such as that provided by Alpha
Softwares partners.

PLATFORMS

Alpha Anywhere will run on Windows 8, Windows 7, Vista and XP (Service Pack
3 ), Windows Server 2012, Windows Server 2008, and Windows Server 2003.

RAM

If a computer is used as the server, 1GB should be considered the minimum, with
2GB or more preferred.

MORE INFORMATION

To get more information, call 1-800-451-1018 or 781-229-4500 and/or go to

www.alphasoftware.com.

Understanding Web Components

Alpha Anywhere is designed around a series of Web Components. One type is used
mainly in web applications to display, search and enter data. The next is noted for its
light weight and speed, a must for mobile. Another asks for user login ID and password.
Still other components create pages with tabbed and accordion panes that organize and
collapse grids. In most cases. data comes from tables or views constructed using DBF or
SQL formats, although it can come from other sources.
*. The operating system must be a platform that supports Alpha Anywhere.
. Service Pack 3 is required because it supports the .NETv4 framework required by Alpha Anywhere.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

A huge selection of options are available for the assembly of the components and
they can be editable or read only; they can be searched and details can be viewed. Logins can allow passwords to be changed on the spot. Every element is assigned by choosing from extensive menus. Selections can be modified with code.
Components are placed on web pages, with HTML, JavaScript and Xbasic written
and executed in the background. This assures the application will meet the industry
standards required for viewing in browsers.
We have grouped them as follows. Details are below.
Master group: The components in this group compose the foundation of the system.
In Chapter 2, we will show how to create three types of components Grid, Image Gallery and Tabbed UI. Chapter 3 will demonstrate the UX component.
Grid Component has optional Search and Detail parts.
UX component used for mobile apps. Also serves as Dialog for web apps.
Login component.
Maintenance component.
Tabbed UI (User Interface).
Page Layout Builder.
Navigation System component.
Custom component. (Advanced)
Optional group: At this writing, the following components are included in the 30day trial download and are available with a subscription* to the software. You will get to
test the Image Gallery component in the next chapter.
Calendar, Google Map, Image Gallery and Video Player.
Legacy group: The components in this group are carry-overs from earlier versions
that are still supported, but do not use AJAX. They all have more sophisticated successors.
Dialog (Classic), Grid Linker, Tabbed Grid Linker.
GRID COMPONENTS

Grid components are used to display, edit and delete data from a database. You can
also enter new records. This is the most common type of web component and has many
possible variations. Grids can stand alone or be combined with optional Search and/or
Detail View parts.
At its most basic, a Grid shows the records in a browse or spread sheet type view as
in the following screen shot.

But. Dont let the term Grid fool you into thinking that they always look like spread
sheets. Granted, they did start out that way, hence the name. But they have evolved so
that you can create forms that follow almost any imaginable design.
Grids can also have Search and/or Detail View parts.
The Search part allows the end user to find records.

*. Go to www.alphasoftware.com for more information on pricing options.

. All are detailed in the free book you get when you buy the software.

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Understanding Web Components

The Detail View part usually contains more fields than does the main Grid
and is often used for editing the record and adding new records.

DIALOG COMPONENTS

Unlike Grids that are bound to tables, a Dialog is not necessarily bound to anything. Its purpose is to collect information that
is stored in variables (temporary fields). The data is then
passed on as defined by the developer. Dialog components create simple forms, as we see here, or very complex ones.
An example of a dialog might be the form you fill out when
you place an order on the web. When you click Submit, the
data is entered into the vendors database. In this case, the dialog is bound to the table.

LOGIN AND MAINTENANCE

These components define login for secure applications and permit remote packing
and indexing of Alpha Anywhere tables.
Login component: Application security is
based on users and groups and can be set for
each individual page.
Maintenance component: For Alpha Anywhere tables. This component allows the end
user to pack and reindex one or more of the
database tables.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

TABBED UI, PAGE LAYOUT

& NAVIGATION SYSTEM

The Tabbed UI (User Interface) and Page Layout Builders organize components,
allowing the end user to click buttons and/or tab back and forth between Grid components. The Navigation System creates a menu bar.

The Tabbed UI* Builder (above) organizes grids, reports and other elements. Buttons open pages that become tabbed panes. It is extremely flexible and can include
frames, text headers and toolbars. We will put one to use in the next chapter.
The illustration above also shows a grid that has been designed as a sophisticated
form with tabs.
The Page Layout
Builder combines text
headers with multiple
grids that can be organized with tabbed and/or
accordion panes.
Navigation System:
This component creates a
menu bar that takes users
from web page to web
page. The buttons can be
placed across the top of
the page or down the side.

*. UI = User Interface

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Understanding Web Components

Creating web pages

Web components are placed on pages so they can be viewed on the Internet. You can
have as many on a page as you like because AJAX makes user interaction very quick
and responsive. Each is independent of the others, with data accessed for one component at a time, regardless of the number displayed on the page.

There are two types of web pages.

A5W Pages: A special type of web page that accepts Web Components and
Xbasic* code. The screen shot above shows a page in design mode (inset)
and as it appears in Google Chrome.
HTML Pages: Pages can also be imported from web design programs, such
as Adobe Dreamweaver. The HTML code generated by Grid components
can be placed on these pages.
Both page types have access to the built-in HTML Editor that can be used by those
with or without web design experience.
A5W pages: When you work in the HTML editor, there are three views: WYSIWYG, Source and Interactive.
WYSIWYG. In WYSIWYG, the HTML code is created behind the scenes
and can be viewed at the Source tab.
Source: Both HTML and Xbasic may be viewed and/or adjusted at the
Source tab by those who wish to do so.
Interactive: The Interactive tab is for testing Xbasic code.

*. Xbasic is Alpha Anywheres programming language. In web and mobile applications, it is used on the server-side. It is quite similar
to Microsoft's Visual Basic and shares many of its language elements and functions, however, Xbasic has many additional and different features. Notably, it is designed to make the process of developing applications easier. Many commonplace tasks that
would take many lines of code in another language take only a single line of Xbasic. continued on page 127.

10

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Putting it together
In the next chapter, well get right to work creating some grid components and then
youll learn how easy it is to make them web ready. We will use an SQL database that
has been included with Alpha Anywhere. We will also show how to connect to data in
an Alpha Anywhere DBF database. Except for connecting to the data, design development is essentially the same for all file types.
LEARNING MORE

This Quick Start Guide is designed to get you up and running and explain the basic
features of the program. But it is just a starting point.
When you buy the program, you will receive a complimentary copy of the Electronic
Download Edition of Alpha Anywhere Web & Mobile Made Easy, The Basics and More
for V12 - Volume 1 by Susan Hussey Bush, noted author of tutorials on Alpha Anywhere.
In her books, Susan Bush tries not to assume that everyone is familiar with all the
latest terminology because she comes from a business background, rather than a technical one. With advances being made every day, she understands that many of you cant
possibly keep up with the latest and greatest and still get on with your day jobs, so she
has added some extra notes below for those new to web and mobile application design.

Newbies take note

If you are an experienced web developer, you can skip this section and go directly to
Chapter 2 on page 17.

But. If this is your first go round with web and/or mobile applications, there are certain principles we want to be sure you understand.
This section is directed to business owners. You probably have database development skills in fact, you may already have an Alpha Anywhere database. You may have
some development skills such as Xbasic, but likely to be unfamiliar with JavaScript and
other code required for developing web and mobile applications. You want an application, but either cannot afford to hire someone to build it for you or just like doing
things yourself.
We will go over some terminology and expand on topics discussed earlier to be sure
were all on the same page.

Browsers call the shots

Beginning web/mobile application developers often ask, Why cant I use my existing Alpha Anywhere forms? Because of the browser, thats why. To go on-line, you
must open Microsoft Internet Explorer, Mozilla Firefox, Google Chrome or Safari
another browser. You cant get to the Internet without one. Browsers force the designers
of all the sites you visit to use a standard format. Alpha Anywhere, like all other web/
mobile application systems, must conform to browser rules and standard database desktop forms dont fit through the funnel.
Thats what makes conventional applications so hard to design. Thats also what
makes Alpha Anywhere so revolutionary because you can do this.

11

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Newbies take note

Understanding web based databases

While Alpha Anywhere can connect to just about any type of data out there, it is
likely that, as a business owner, you are interested in putting your database on the web.
We have become so familiar with web databases that no explanation is necessary for
most. However, we promised not to make too many assumptions, so heres a simple
example: When you book airline tickets, you are using a web based database. First, you
search by departing date and are presented with a read only schedule that meets the
search requirements. Next, you choose a flight and enter your name, address, credit card
info, etc. into a dialog. Click the Submit button and the data is entered into the airlines
database. If you want to change seats, the reservation is retrieved and, if there is room,
you are given the opportunity to choose a different seat.
Simple to use, web based databases used to be complex to set up.

Back in the day

Every web developer [had] to know the building blocks of the Web:
How the WWW works
The HTML language
The use of CSS (style sheets)
JavaScript programming
The XML standards
Server Scripting technologies
Managing data with SQL*
OH, MY GOODNESS!

Are you sufficiently panicked?

Not to worry. Sit back, relax and read on because this is not the Alpha Anywhere way.
An Alpha Anywhere web/mobile application operates in exactly the same manner as
the hard-to-design variety. The end user views, searches, changes and enters records.
The huge difference between Alpha Anywhere and the standard protocol above, is
the ease with which it can be developed.
ALPHAS BRILLIANT IDEA

Every step is accompanied by point and click Builders that write the code for
you.

BUT. (Dont you hate that word?) There are a few things you need to know so that you
can approach your design based on real world expectations.
There are certain constraints when working in a web environment that we all have to
face. Limitations are made by the data medium (DBF, SQL, etc.) and browsers produced
to an industry standard. If browsers do not support a feature, Alpha Anywhere cannot
add it.
The folks at Alpha Anywhere keep making the web easier to use. You can create
grids by using builders that allow you to choose from an awesome range of options.

*. http://www.w3schools.com/web/default.asp, Jan. 11, 2008.

12

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

There are new features, such as JavaScript based date pickers and lookups and that
AJAX youve heard so much about. There is brilliant security. And lots more.

BUT. (Theres that word again.) They cant provide everything because they can't
change the HTML standards or the limitations of browser technology. Regardless of the
range of devices they have provided and youll find they are truly amazing those
wanting to build to a high level of sophistication, today, will need to learn JavaScript.*

BUT. (And this time its excellent news!) You will be SOOOOOOOOOOO amazed at
what you CAN do! Without any programming knowledge of any kind.
AND. (Now thats better!) You can do even more if you do add JavaScript or Xbasic
or any of that other good stuff we told you about earlier to your bag of tricks.

Additional notes on AJAX

On page 6, we noted that Alpha Anywhere comes with AJAX built in. Selwyn
Rabins, co-owner and technological commander-in-chief of Alpha Software, Inc. was
kind enough to detail it for us.

Alpha Anywhere and AJAX

by Selwyn Rabins
Web and mobile applications that employ AJAX techniques are now very popular,
but programming AJAX applications typically adds a significant level of complexity to
the development process. Alpha Anywhere makes hand coding completely unnecessary.
Ill explain why AJAX is so important to a smooth running application.

Sending data the traditional way

In a traditional web/mobile application, when the user clicks a button or hyperlink
on the page, heres what happens:
The data on the page is sent to the server and the server sends back a new page for
the browser to display.
This means that on each round trip that the server makes, it is doing a lot of
work because it has to re-compute the HTML for the complete page, and
then send that back to the browser.
So, there are two sources of delay: the time taken by the server to re-compute the
whole page plus the network transport time it takes to send the entire page over the
Internet.

Sending data with AJAX

There are many patterns that an AJAX application can take, but the most common
one used in Alpha Anywhere is as follows:
The browser sends some data to the server, and then the server sends back a
response to the browser in the form of some JavaScript commands.
When the browser receives the response, it executes the JavaScript that was sent
back.

*. Thanks to Jerry Brightbill, Senior Developer and Architect, Alpha Software, Inc., for this insight.

13

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Newbies take note

Typically these JavaScript commands will update the display on some portion of
the page that is being viewed.

Understanding the process

It is important to note that this process is typically (although not necessarily) asynchronous (that's were the 'A' in 'AJAX' comes from).
This means that once the browser has sent off the request to the server, the user is
not blocked from doing anything else while waiting for the server to respond.
The browser will keep checking in the background to see if a response has been
received, and when one is received, it will respond in some way. For example, if the
server's response is in the form of some JavaScript commands, it will execute those
commands.

Seeing is believing
You can see AJAX in action by taking a quick look at a video where Selwyn shows
how to create a Web Component and demonstrates how quickly it responds with AJAX.
GO TO A5 VIDEO # 1

Open Alpha Anywhere and click the Videos button on the toolbar. For full instructions on using videos and documentation, Chapter 4.
Videos > Filter: Enter General.

What is best? SQL or DBF???

Alpha Anywhere has a free Feature Pack that converts Alpha Anywhere files from
DBF to SQL. That brings up the question of who should make that switch and why.
I have always been a great fan of the desktop database side of Alpha Anywhere for
its ease of use for the non-programmer and readily admit to my limited knowledge
about SQL. Therefore, I turned to Jerry Brightbill of Alpha Software, an expert programmer in both file types. Here is a synopsis of our e-mail exchanges:
MY QUESTION

Im adding notes on the new Upsize Database Genie Feature Pack* to the book. I
understand that SQL is preferable to DBF for large databases.
Would you give me a brief explanation of why someone might want to make
the change, keeping in mind that many of my readers are small guys.
How large (number of records) does your database have to be in order to see
a significant change in performance between SQL & DBF.
What other factors enter into the decision?
Once the conversion is made, will the developer need to know how to create
SQL Select Statements, etc.?

JERRYS RESPONSE

I have been using SQL (SQL Server) exclusively for a couple years, so I may be a
bit biased. Frankly I can't see why anyone would use DBF in most situations except that
it comes with Alpha Anywhere. But, to be fair, there are pros and cons for each. This
article gives a somewhat accurate evaluation of both:

http://www.foxdev.com/VFPonSQLSGeneric.pdf
However, it does have a few contradictions.

*. An optional V10 Feature Pack that has been included with V12 at no extra charge.

14

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

LOCAL VS REMOTE AND

SLOW ACCESS

DBF can be faster when the data is local, but the speed difference begins to fade
when the data is remote and file size and the number of users increase. The reasons are
simple.
The DBF opens the entire table to get a couple records. Depending on the file
locking algorithm, some or all records could be locked to other users.
All flavors of SQL just query and pull a subset of data based on the query. Once
that result set is obtained, the table is closed and available to another user. Even a
query on a very large table can be very fast if the number of columns and rows is
limited.
It is very interesting that the article touts DBF speed as a pro, and yet slow access
for DBF is a con. Aren't they the same thing?

PROS AND CONS

COST

COMPLEXITY

What I find revealing is that DBF has only three benefits listed, but five limitations.
SQL has five benefits and only two limitations.
The cost issue for SQL is interesting as Microsoft SQL Server and MySQL have
free versions that may suit the needs of many users. Yet, if there is a need to expand
and add features, both of them and others have very robust (and expensive)
expanded versions.
For example, I am working with a client on a system using SQL Server. They are
using SQL Server Enterprise 64 bit because of built in data encryption, multi-processor and drive support, and other features for scalability. It has very powerful
import and export capabilities and a report writer. Because the server can use all
available resources in very efficient ways, its speed is dramatic. So is its price. A
single server license is well over $10,000. But for their purposes, it is exactly what
they need.
The complexity argument doesn't carry much weight with me either. The programming language needed to interface with SQL is different, so there is a learning curve.
But it is so much more robust and capable that the perceived complexity isn't
a major issue.
Much program logic can be moved from the application layer to the database
layer for increased performance.
DBF basically has little or no capability for data manipulation at the database
level. Almost everything has to be done in the application layer. The exception in Alpha Anywhere is the application of field rules. That is done at the
table level.
This presents another advantage of most SQL solutions not mentioned. When much
of the data logic is placed at the database level, many different applications can interface
with that data without having to duplicate process logic. Applications become frontends for data and a lot of data processing is done on the server.
SQL can be much more complex, but it can be relatively simple as well.

CONCLUSIONS

In my mind, if you are building a system that requires data integrity, security, and
scalability, there is no contest. DBF just doesn't stack up well against any SQL database
in any of those areas.
If simplicity and cost are the only criteria, then DBF is still a solid product and it
has its uses.
Support for SQL in Alpha Anywhere is getting very good, particularly on
the web and in Xbasic

15

CHAPTER 1. THE ALPHA ANYWHERE ADVANTAGE

Newbies take note

If and when you decide to go with SQL, Alpha Anywhere will help you with a builtin aid called the Database Upsize Genie, one of several Feature Packs that have
been added to V12 at no extra charge.

But. You can hold that decision for now, if you like.
Enough of the technical stuff its finally time to turn the page and see how Alpha
Anywhere works.

16

Chapter 2.

Sampling the System

Developers can be sure of one thing in this world

Deadlines are always around the corner. We can help with that! Once you do these exercises,
youll understand how the basic elements of Alpha Anywhere web and mobile application design
fit together and begin to imagine how they will help bring your project in on time.
And, well give you a sneak peek at how you can tweak the code. You are sure to agree that
Alpha Anywhere is the leader in time and design.

CHAPTER 2. SAMPLING THE SYSTEM

Using Alpha Anywhere Help

Using Alpha Anywhere Help

This chapter references several Alpha Anywhere help documents and videos. Using the help system is fully explained
in Chapter 4.
In the meantime, when you see a reference, do the following:
With Alpha Anywhere open,

1. Click on either Documentation or Videos on the main toolbar.

Available at the Control Panel and Web Projects Control Panel.

2. Filter: Enter the page or video name.

Screen shots: For reasons of space economy, blank areas have been removed from screen shots. In many cases, the
OK and Cancel buttons have also been cropped.
Data path: File locations on the development computer may be different than yours. To avoid confusion, the data
path has been struck out in some of the screen shots. Just follow the instructions to get to the right place.

18

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

How the material is organized

In order to have a sense of how Alpha Anywhere web applications work, it is important to see the system in action. This chapter will teach the following procedures:
a. Creating,
b. Using

VIDEO! SEE P. 34, 38, 49,

45.

previewing and several web components.

a Tabbed UI component to ready them for the web.

There are four videos that give a general idea of how a grid component works. You
may want to watch them before beginning this chapter. The videos were done for V10,
so, in some cases, they dont show all features now available but the concepts are still
valid.

Preparation for the lessons

PLEASE NOTE

The process of creating Alpha Anywhere web and mobile applications is the same
for all users, with a few minor exceptions. For these exercises, we will use a sample
Access database that ships with Alpha Anywhere. At the end of the chapter, we will
show how to connect to Alpha Anywhere tables.

Understanding Workspaces
Alpha Anywhere has a desktop side and a web/mobile side. On the desktop side, it
can be used to create stand-alone desktop databases. On the web/mobile side, it can connect to data in any format to produce applications for on-line use. These environments
are called Workspaces.*
Once Alpha Anywhere is opened, you can go back and forth between them or stay in
one or the other. We will be working on the web/mobile side so that will be the focus of
this book.

1. Open Alpha Anywhere.

*. This shift in terminology is new. Until recently, the folks at Alpha Software referred to Alpha Anywhere as a database software.
As we noted in the previous chapter, this is no longer true because its use has been significantly expanded. Therefore the term database has been changed to workspace when referring to the program in general.

19

CHAPTER 2. SAMPLING THE SYSTEM

Understanding Workspaces

2. At the Welcome Screen (left), click the

Workspace & Tasks tab.
If you do not see this screen, click the
Recent Workspaces button (red box).
APPLICATION TYPES

As you are aware, Alpha Anywhere can build

desktop, web and mobile applications. In this
instance, web and mobile are combined into a single choice.

Choosing web/mobile or desktop here does

not remove any functionality. Both will still
be available. The option is presented so those
interested in developing only web/mobile
applications can head directly to that workspace, as we will do now.
3. Types of Applications you want to build: Choose Web/Mobile.
4. Choose Create a new, empty Workspace.
5. Click OK.
NAMING THE WORKSPACE

After you click OK above, you will be asked to give your file a name and location.
For this example, we will put the files IN A SEPARATE FOLDER on the desktop.
When it comes to setting up your own application, the location is completely up to you.
Just be sure the file is in its own folder.

6. Navigate to the Desktop of your computer.

7. Create and open a new folder named My Alpha Anywhere Web Project.
8. Name the file: MyFirstWebApplication. (Click Save)
CHOOSING THE WORKSPACE

Again, you are given the option of always going

directly to the Web Projects Control Panel. Since
we will not be using the database side, we will elect
to do so.*

9. Open the Web Control Panel when this

Workspace is opened: Yes.
10. Click OK.
A Getting Started notice appears.
11. Read through it and then click Close.

You are taken to the Web Projects Control Panel.

*. You can always change this later. Click the Control Panel button and go to: Top Menu > File > Workspace Properties.

20

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Understanding the Web Projects Control Panel

Next, we will describe the Web Projects Control Panel features. Then we will use it
to:
Connect to a SQL database (page 23).
Activate the Application Server that connects the Alpha Anywhere to

the Internet (page 24).

Create a new Web Project (page 25).
WPCP

Heres a brief run through of the major elements in the Web Projects Control Panel.

TOP TOOLBAR

The top toolbar contains the most often used elements.

Profiles: The developer can define certain elements of the web project. You

can explore this at your leisure. We do not need to be concerned with it at

this time because the defaults are acceptable.
Refresh: Click when necessary to refresh pages, web components and other
elements of the project.
Application Server: Links the project to the Internet.
Interactive Window: Testing area for Xbasic code.
SQL: This menu offers options for working with SQL data and making
connections to it. We will create an AlphaDAO Connection String shortly. It
must be active in order to open the Database Explorer, SQL Command Window or SQL Genie.
Control Panel: Opens the database workspace. When it is open, the button
toggles to Web Projects. Click Web Projects to return to the Web Project
Control Panel.
DO NOT click the red x (circled above) because you will exit the
entire project. If that should happen, see Opening an existing web

21

CHAPTER 2. SAMPLING THE SYSTEM

Understanding the Web Projects Control Panel

application on page 69.

Documentation and Videos: Opens help pages and videos (see Chapter 9).
Close: Exits the Web Projects Control Panel.
WPCP BUTTONS

The Web Projects Control Panel has another set of buttons. You can:

Show a list of recently created projects (green above).

Create new pages and web components (yellow above)
Add files.
Edit or delete pages or components.
Create new projects.
Publish a project (see page 67).
Establish Security for the project (see Chapter 6).
Define the project properties in order to assure a consistent appear-

ance for the elements in the project. We suggest you look over the
options now.
a. Click

Project Properties (see page 470).

b. Examine

the options and click Cancel to close the dialog when fin-

ished.
Open a component in Working Preview (yellow at left). See page 39.
Open a project in Windows Explorer (green at left).
Customize the columns shown in the Web Projects Control Panel. As

you develop your application, the various elements will be listed.

This option allows you to add information that will further help identify the component, page, etc.
Open the Style Builder that is used to edit the appearance of all components in a web application Grid, Dialog, Tabbed UI, etc. There is
a series of videos that explain it thoroughly.
a. Click

Open Web Style Builder.

It opens in a separate window note the tab at the bottom of the

screen.*
Watch videos is last on the list of actions.
Do the following to close the Style Builder window:
b. Right

click on the Style Builder tab at the bottom of the window

(yellow).

c. Choose

Close (pink).

*. If you do not see tabs for each open window, go to Top Menu > View > Window Bar to turn them on.

22

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

LEFT MENU

The menu on the left side of the WPCP contains:

Project name: The top item (red oval) is the name of the

current project. Since you can have more than one folder in a
project, the level is identified at its right.
Project elements: The list of pages, components and other
elements comes next. As you create and save or import the
various files, each will be listed in the appropriate section.
Quick Publish (orange oval): Executes saved Publish settings (see page 67).
Next, we will connect to a database that is outside of Alpha
Anywhere.

Connecting to a SQL database

A Connection String is necessary in order to connect to databases outside Alpha
Anywhere.* Multiple connections strings may be created as each is independently
selected for each component in the project.
We will use an Ms Access database that ships with Alpha Anywhere,

called Alphasports.
IMPORTANT NOTE

Because this file is located at c:\ Program Files\, Windows 8, 7 and Vista users will
not be able to save new or changed records. If you prefer, you can copy the file, place it
elsewhere on your computer and reference that one instead.

12. Click SQL on the top toolbar.

CREATE CONNECTION STRING

13. Choose AlphaDAO Connection Strings.

AlphaDAO is Alpha Anywheres
custom version of ADO. It uses
AJAX. ADO does not.
Dialog: AlphaDAO Connections

a. Click

New.

Dialog: New AlphaDAO Connection

b. Connection

Name: MyAlphaSports.

c. Connection

String: Click Build.

*. The instructions for connecting to an Alpha Anywhere database are on page 73.

23

CHAPTER 2. SAMPLING THE SYSTEM

Understanding the Web Projects Control Panel

Dialog: Create SQL Connections String

d. Connection

type: Access.

e. File

Name: Navigate to:

c:\ Program Files [or Program Files (x86]\ a5V12 \
MDBFiles \ Alphasports.
Or: c:\Alpha_WebMobileBook_Volume1_V12\
ABC_WebMobile_Lessons\SQL\Alphasports.mdb.

f. Click

Open.

Dialog: Create SQL Connections String

g. Click

OK (twice).

Dialog: AlphaDAO Connections

The new connection is shown (see above).

You can create new strings and/or edit existing ones at this
dialog.
h. Click

Close.

REMINDER

To re-open the AlphaDAO Connections dialog at any time,

click SQL > AlphaDAO Connection Strings.
Next, we will connect to the Internet with the Application Server.

Starting the Application Server

The Application Server connects you to the web so you can use your browser to view
certain elements of the Alpha Anywhere web system. You do not have to be on-line to
do most of these exercises, so you can skip this and return later if you do not have Internet service at the present time.

14. Click the Application Server button on the top menu (the red icon indicates it is off) and then confirm.
The button changes color and now has a green icon.
PORT 80 CONFLICT

If you are running Skype or another such program, it may conflict with the Application Server because they both default to the same port. There are two ways to solve the
problem:
Close the conflicting program OR change the Alpha Anywhere port as fol-

lows:
a. Web

Projects Control Panel > Top Menu > Web > Application Server.

Dialog: Application Server Settings

tab: Server Port.* Change to Port 85 (or another of your

choosing).

b. General
c. Click

24

Save.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

d. Click

the Start Server button. (Click Yes to confirm.)

e. Click

Close.

Everyone should now have the server running.

Creating a new Web Project

Web Projects are the means by which you keep multiple applications organized.
If you are a professional developer, you can have a separate project

for each client.

If you are a business owner with more than one company, you can
separate them out here.
If you think you will only have one project, you can use the default
provided.
15. WPCP: Click New Project.
Dialog: Select Project Template

You can select a pre-defined template or create

your own.

16. Choose Start a new empty Project. (Click

OK)
17. Name the project MyMailingList (Click
OK).
CAUTION

Web stuff REALLY doesnt like file names with spaces, so be sure to link the words
together as above (called CamelCase) or use underscores as in Mailing_List.
The name appears as the current project. You can switch back and forth

between projects by clicking the down arrow.

Now its time to create our first web component.

Creating a Grid Component

VIDEO! SEE P. 34

Web application design revolves around the Grid Component. It is extremely versatile and can be used in both web and desktop applications.

1. At the Web Projects Control Panel, select Web Components in the left
panel and click New.

*. Want more? Youll find info on the Application Server settings in the documentation that you get free when you purchase Alpha
Anywhere.

25

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Grid Component

When the New File > File type dialog

opens, Web Component is the default because

we started there.
There are six file types. The others are:
A5W Page: A special type of page for Xba-

sic as well as regular HTML. Also holds web

components.
HTML Page: A web page created in an
outside HTML design program, such as
Dreamweaver.
CSS Style Sheet is described in Chapter 5.
Javascript File is for advanced users. Alpha Anywhere also has
Action Javascript that writes the code for you.
Flying Start Genie. See page 69.
2. Web Component: Double click or click Next.
Dialog: New File

Shows the component types we discussed in the pre-

vious chapter (page 6).

Not in screen shot: Legacy Components as they are
for backwards compatibility only.
You can click Hide Legacy Components at the bottom of the dialog because we do not advise using
them.
3. Grid: Double click or click OK.
Dialog: Select Grid Component template

4. Click Start with a blank Grid Component radio button. (Click OK)

26

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Dialog: Grid Builder

The Grid Builder is where all the elements of the grid are defined.

Defining the Component Type

Time to take a rest after all that excitement and read about the Grid Builder.
NAVIGATOR

The left panel (red box above) shows what we will be calling the Grid Builder Navigator. The various pages (aka panes) come up when you click on them, Component
Type, Data Source, Query, Fields, etc. We will take them each in turn.
Component Type: The first option on the Navigator defines the look of the
grid. There are three basic sections, Grid, Search Part and Detail View. We beg
your patience as we describe the elements. Some may seem a bit confusing at
first, but all will become clear when you actually view and use the component.

5. Click the options to follow along with the text.

The actual settings for the lesson are at step 6 on page 28.
GRID LAYOUT

There are 3 choices: Tabular, Form (Columnar) and Stacked Columnar. The preview
updates as you make your selection. Editing can be done in the grid, in which case it
would be updateable or it can be read only.

READ ONLY VS.

UPDATEABLE

If you want to be able to add and edit records in the Grid itself, choose Updateable. If
you want to add and edit records in a Detail View part (see below), the Grid layout must
be Read Only.

27

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Grid Component

SEARCH PART

Grid contains a Search part: A Search part is used for filtering and ordering records
in the grid. It is optional.

DETAIL VIEW

Grid contains a Detail View part: When the user double clicks on a row in the grid or
clicks a hyperlink, a separate window opens where existing records can be changed or
new ones added. Detail View parts are optional and can be read only or updateable.
Detail Views are available only if the Grid layout is Read only.

CONVENTION

Grid Components are defined by making selections, many of which use checkboxes.
In effect, the option is asking, Do you want to do this? Rather than say click or
unclick the checkbox, we will usually answer the question by saying Yes or No. In
other words, a checked box = Yes; an unchecked box = No.
OK, back to work.

6. Enter these settings (note that the preview window changes as you add
sections):
Grid layout: Tabular.
Grid is: Read Only.
Grid contains a Search part: Yes.
Grid contains a Detail part: Yes.
Detail View is: Updateable.
7. Scroll the preview window to see the rest of the Detail View.

Defining the Data Source

8. Grid Builder Navigator: From
the left pane, select Grid > Data
Source.
Grid is not an option because
it is just the heading for the tree.

9. Specify the type of data that you want to display in the Grid: Choose
SQL Database accessed via Alpha DAO (Alpha Data Access
Objects).*

Defining the Query

The Grid Builder will Query (ask) the SQL table for information, hence the term.

10. Grid Builder Navigator: Select Grid > Query (AlphaDAO).

*. If you do not see this option, choose Remote Database accessed via Alpha DAO (Alpha Data Access Objects).

28

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Theres a lot going on at this dialog. The steps below will show how to fill it in.

REFRESH

Table changes: If you make changes to the source table at any time after selecting
the table, you will need to refresh the table (red circle above) in order for the component
to work properly. Changes include adding or deleting fields or changing field types.

11. Connection Type: Use Named Connection String.

This is the term used to describe the connection string we created
above. You could also define a connection string at this window.
12. Connection Name: Choose MyAlphaSports.
13. Click Connect (button out of sight in above screen shot).
The table information appears. You can choose an existing table or
view, define a SQL Select Statement or call up a Stored Procedure.
We will base our component on an existing table. You can experiment with the other options later.
a. Base

on: Table or view.

b. Table

name: Click Select

29

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Grid Component

Dialog: Select Table

Notice the many options

available: Tables, Views,
Linked Tables, System
Tables, Synonyms, Aliases.
You can choose to include all
Catalogs, Owners or Schemas.
c. Table

types: Tables / Sche-

mas.
d. Choose

the Customer
table from the list.

e. Click

OK.

Dialog: Query

f. Table

alias: Inserted automatically (probably Customer).

g. Filter:

Leave blank.

h. Order

by: Click the Smart Button.

Smart buttons open Alpha Anywhere builders that are specific to the
use.
Dialog: Specify Order

For example, writing Order syntax is

quick and easy with these aids (yellow).
i. Available fields: Double click Lastname to place it in the Order window.
j.

Click OK.
Dialog: Query

k. Sort

direction: Accept the default, Ascending.

PRIMARY KEY

A key is an identifier, such as a field or record number. The primary key tells Alpha Anywhere which record to choose. Alpha
Anywhere will look for a field with ID in it. Even so, it is best to
confirm the proper selection was made.
l. Click

Select Primary Key.

Dialog: Specify Primary Keys

SELECT SEQUENCE

30

m. Look

in the list for the Primary Key. It should = Customer_ID.

n. Click

Cancel.

Certain databases, such as Oracle require generation of Sequences. Click the button
and read the dialog for more information.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Selecting Fields for the Grid

14. Grid Builder Navigator: Select Grid > Fields.

ADDING FIELDS

Fields are selected by moving them from Available Fields to Selected (see screen
shot below). There are several ways to do this.
Double click on a field.
Select the field and click the > arrow (pink below).
You can enter the fields in groups by dragging down the list. SHIFT +
CLICK and CTRL + CLICK

are also enabled (see below).

The double arrow selects and moves all the fields in the Available
Fields list to Selected.
REMOVING FIELDS

To remove fields, from Selected, use the same arrows. The double arrow moves them
all out (I know you figured that out).

15. Place Customer_ID in Selected.

As soon as a field is chosen, its
Field Properties appear in the right
hand window.
16. Place the fields from Firstname
through Company, Bill_City,
Bill_State_Region and Email in
Selected.
Note that selected fields are bolded
in the Available Fields list.
When you click on a field in the
Selected list, its properties appear in
the right panel.
ROW NUMBERS

We want to add row numbers to the left side of the grid.

17. Available fields: Add <RowNumber> to Selected Fields box.

Scroll down if necessary its near the bottom.
18. Move <rownumber> to the top of the list with the arrows at the right of
the Selected list (yellow above).
RECORD NUMBERS

You could also insert the record number of the field into the grid with <LogicalRecNo>.

Setting the Field Properties

In Alpha Anywhere, just about everything has properties. Those for the fields are
at the right of your screen and vary according to the field type character, number,

31

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Grid Component

date, etc. For some, you will enter text directly into the box. For others, you will click a
button and make a selection or check a checkbox.
CONTROL TYPES

Control Types govern the behavior of the field and

are super important.*
a. Selected:

Click the Customer_ID field.

b. Field

Properties > Display Settings > Control

Type: Click the button to see the types.

Note the icons. Each Control Type has its

own that appears next to the field in the
Selected column. In the screen shot at left, all
are Labels except Customer_ID and Email
that we will soon change to Links.
c. Click

Cancel.

CONVENTION

From here on in, we will use the following convention for Field Properties instructions. Relate the highlighted areas at left to the Email field example below.
a. FIELD PROPERTIES: <FIELD NAME> means choose the

field in the Selected column and then go to the Field

Properties column.
b. The Field Properties column is divided into main
and sub-categories.

Following the example below, we will show the main category (Display

Settings) in blue, followed by the sub-category (Control Type), followed by

what your are supposed to do (Choose Link).
c. Click

E-MAIL LINK

OK as necessary for the button dialogs.

We want the Send E-mail window to open when the end user clicks on it.

19. Enter the settings for the Email field as follows:

DISPLAY SETTINGS
LINK PROPERTIES

PROPERTIES: EMAIL.
Control type: Choose Link.
Display what in link?: Choose Value in field.
Link address type: Choose Field value is an Email address.

CHANGE COLUMN HEAD

COLUMN PROPERTIES

Next, we will shorten a column title so it takes less space in the grid.
PROPERTIES: <ROWNUMBER>
Column Heading: Change Row Number to Row.

*. Want more? Learn about Radio Boxes, Checkboxes, HTML Memos and more in the complimentary copy of Alpha Anywhere
Web Applications Made Easy that comes with your purchase of the software.

32

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

The Customer_Id field will serve as a link to the Detail View section. We also want
to shorten the column title as above. Well do it all at once.

DETAIL VIEW LINK

DISPLAY SETTINGS
LINK PROPERTIES

PROPERTIES: CUSTOMER_ID
Control type: Choose Link.
Display what in link?: Choose Value in field.
Link address type: Choose Detail View link.

COLUMN PROPERTIES

Column Heading: Change Customer_ID to ID.

Defining the Grid Properties

These are properties that affect the overall appearance and behavior of the grid, itself.

AJAX
LAYOUT OPTIONS

GRID BUILDER NAVIGATOR: GRID > PROPERTIES

Ajax enabled: Yes. (Default for all new Grid components).
Style name: GrBlue (GR is short for Gradient)
Rows of data: Change to 12.
This is the default number of records (rows) that appear when the grid is
displayed. Do not use too many, as it may affect display time. The end user
can change as needed.

COLUMN TITLES AND

SORTING OPTIONS
RECORD NAVIGATOR/
GRID TOOLBAR

Sorting style: Click column label to sort show current sort

direction with icon (default).

Record navigator layout: Click the button.
RECORD (PAGE) NAVIGATOR

We will add a navigator at the bottom of the grid.

This is the record (page) turning feature that you
use all the time on the web. Look at all the
choices. Wonder how long it would take to program one of these???? Well, for us its only a
click. The preview window at the bottom shows
how the various choices will look.
You may think of this as a page navigator
I know I do but note that in this context, it is
called a record navigator.
Dialog: Record Navigator Designer (Top)

Screen shot: In an effort to save paper, we

remove blank areas of dialogs, so yours will
be larger than this one.
a. Choose

2nd option in the right column (default) or another, if you

like.

33

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Grid Component

TYPE-IN BOX

We will add a type-in box (red box above).

b. Use

type-in box for page navigation: Yes.

c. Style

should be GrBlue as we defined in Grid > Properties > Layout

Options above. (Click OK)

GO TO ALPHA VIDEO #1

This video gives a basic sense of how Grid Components work:

Videos > Filter: Enter General.

We know you are anxious to see some results. It wont be long now, but we
still have some work to do.

Setting up the Search part elements

The settings in this part determine the fields in which the
user will be able to look for records in the grid.
FIELDS

20. Grid Builder Navigator: Click Search > Fields.

21. Put Customer_ID, Firstname, Lastname and
Company into the Fields to Search In box.
PROPERTIES

SEARCH OPTIONS

The Search part can either appear when the component is

opened or it can be replaced by a line of text that is clicked
when needed. We will choose the latter. Stay with us now, this
will be clearer when we actually use the component.
GRID BUILDER NAVIGATOR: SEARCH > PROPERTIES
Enable Show/Hide of Search part. Yes.
Choosing this option (pink) opens the one above it
(green).
Title when hidden: Click here to search...

(This is text, not a choice.)

Animation: Choose Drop down.
Search options > Initial state: Closed.
ANIMATION

Animation affects the way the Search part comes into view. Well use it again in the
Detail View. There are a multitude of possible effects and it can be applied in many,
many places. You may want to take a moment and experiment with a few.
Moving right along, lets work on the Detail View part.

34

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Setting up the Detail View elements

FIELDS

22. Grid Builder Navigator: Click Detail View > Fields.

23. Add all the fields into the Selected box except <RowNumber> and
><LogicalRecNo>.
EDITABLE FIELDS

At the top of the Selected list, editable? is checked (red box above). This indicates
that the Detail View is an Updateable section. For this reason, the default Control Type
is Textbox so that data can be entered and/or changed. Note the icons.
You can disallow editing by changing the Field Properties > Display

Settings > Control Type from TextBox to Label.

TIPS WINDOW

Most property settings have a help window below the properties selections that
appears when you click on the choice. In some cases, the window seems too small to
read the entire tip, but it can be expanded as follows:

24. With your cursor on a Field Property, look at the bottom of the list.
a. Put your cursor over the top of the help window
until it changes as at left (red circle).
b. Drag the window up until you can see the full contents.

MASKS

Masks can be defined with custom masks

that use the list of character formats at left
or you can use pre-defined masks that
cover common needs.*Keep the following
in mind when you are developing masks.
Phone number: Good for US and Canada only. Will not allow Country Code.
Zip Code & Postal Code: Good for US
and Canada only. The dash for the US 9digit code is inserted automatically and will
appear in all records, even those without
the last four numbers (07755-).
*. Alpha Anywhere desktop workspace users: Masks set at the desktop level are not honored here. You will need to re-create them.

35

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Grid Component

CLIENT SIDE

CLIENT SIDE PROPERTIES

FYI in the web world, the client is your browser not your customer! Theres
more about this on page 126. For now, the important thing to know is that client side
properties are very responsive since they dont have to travel to the server and back.
PROPERTIES: PHONE
Client side formatting: Yes.
Format type: Mask.
Format definition: Click the button.
a. At

the Mask Builder (above), click Insert pre-defined mask and

choose US Phone number.

b. Show

the mask characters while entering the field: Yes. (Click OK)

PROPERTIES: FAX
Repeat above.
PROPERTIES: BILL_POSTAL_CODE
Repeat above and choose Zip code 5 digit.
DV PROPERTIES

DETAIL VIEW DISPLAY

As expected, these settings affect the overall appearance and behavior of the Detail
View. Well take a look at our work as soon as we set these properties, but first there are
some design notes to keep in mind. To begin, we will look at the options and then we
will set them
There is a video you might want to stop and look at. Or you can wait until the end of
this section. It is referenced on page 38.
GRID BUILDER NAVIGATOR: DETAIL VIEW > PROPERTIES
Method to display Detail View. Click the down arrow.
The Detail View can be open all the time or appear when the user asks for it. If you
choose to open on demand, there are three options.
a. Click

on a hyperlink field in the row.

b. Click

on a grid row.

c. Double-click
PERMISSIONS

on a grid row.

25. Look at: Permissions.

By default, the end user will be allowed to
delete, add and modify records.
When the user clicks the Delete button,
it is followed by a confirmation dialog.
Alpha Anywhere desktop users: The terminology for web applications varies
slightly from that of the desktop.*
Add = Insert; Change = Update; Delete = Delete

26. Look at: Display Options > Detail View window position.
WINDOW POSITION

The Detail View can be placed in several positions. The window position can be
defined and it can open with or without animation.

*. Because we are used to the desktop, you are likely to find these terms used interchangeably.

36

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

a. OnPage

is the default and puts the window below the grid. May
require scrolling down.

b. PopupWindow-Modal:

The grid is grayed out and other records cannot be edited until the Detail View closes and is reopened or another
action is defined. Good if you are concerned about accidental edits.*

c. PopupWindow-Modeless means that records can be edited at will. The

Search part is active and other rows in the Grid may be activated.
Allows faster editing.
d. InGrid
e. DIV
f.

means the Detail View will appear in a cell in the Grid.

means it will appear in a designated section.

SplitView_Right and SplitView_Left place the Detail View to the right

or left of the grid.

27. Look at: Display Options > Pre-fetch data for Detail View.
It will take a bit longer to display the grid initially, but then moving from the Grid to
Detail View will be instantaneous because no round-trip to the server will be necessary.
Great for editing data. Like having the food you need on the counter and not having to
go back and forth to the pantry for each item in the recipe.

PRE-FETCH DATA

Now we will set the properties.

DETAIL VIEW DISPLAY
TITLE

GRID BUILDER NAVIGATOR: DETAIL VIEW > PROPERTIES

Method to display Detail View: Choose Double-click on grid row.
Has title = Yes
Title: Enter / Change Record.

DISPLAY OPTIONS

Detail View window position: PopupWindow-Modeless.

Animation: Yes.
Show animation style: Click the button.
Type: Fade.
Speed: Select Slow.
We want you to see the effect, but even slow is pretty fast!
Detail View window title: Detail View (default).
Pre-Fetch data for Detail View: Yes.
Only show Detail View on request: Yes.
Close Detail View after submit: No (default)
Detail View window can be closed automatically after the end user saves
the record. Good choice for PopupWindow-Modal.
Toolbar position: Above.

*. See Understanding Modeless and Modal windows on page 45.

. The DIV must not be placed in a Freeform Edit Region that surrounds the Grid, but, if you design a custom Master Template, it can
be placed there. (DIVs and Master Templates are discussed in later chapters.)
. While this is especially true on the web, it will also make working on the desktop side faster.

37

CHAPTER 2. SAMPLING THE SYSTEM

Previewing Web Components

Our list of fields is quite long. Putting the toolbar at the top will avoid
the need to scroll down to use it.
CUSTOMIZATION
GO TO ALPHA VIDEO #9 & 24

Add new records link label: Click here to enter new record.
For more information on window positions and pre-fetching data, go to:

Videos > Filter: Enter Detail View. Choose:

9. Detail View.
24. Detail View Animation.

Saving the component

Were just about to view our component, but first we will save it. Saving is not
required in order to preview it, but weve done a lot of work and its time to do so anyway.
IMPORTANT NOTE

Component names cannot contain spaces and should be short in length. Keep the following in mind, but do not become overly concerned about it because, in all cases,
aliases are created and named automatically by Alpha Anywhere.

ALIASES

The program uses an alias for a component when it is placed on a page. The alias
may truncate the component name to 15 characters. This alias will be used to reference
the component in many actions, such as any action that references the component in a
URL.

28. Click Save on the Toolbar or press CTRL+S.

At the top of the Save Component dialog is a drop
down box from which you can choose the web project.
You can also create a new project here.
29. Project: Select the default, MailingList.
30. File name: Enter MyPopUpFadeRemote.
31. Click Save.
You may get a notice that Alpha Anywhere needs to analyze the data. If so,

click Yes.

Previewing Web Components

This section continues from the Previous one. MyPopUpFadeRemote

should be open in Design mode.

At the top of the Grid Builder window, there are four tabs: Design, Preview,
Live Preview and Working Preview. The preview tabs each behave slightly differently.

If you do not see the Working Preview tab go to:

a. Top

38

Menu > Options > Preferences.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

b. Uncheck

Hide Working Preview.

Viewing at the Preview tab

Can be used on-line or off.
There are two ways to open Preview, by choosing the Preview tab or clicking the
Refresh Static Preview button on the toolbar. It will take a few moments to come up the
first time.
Functionality: Displays the component. All the parts are there and they work to a
certain degree, but you will not be able to actually do a search, nor do hyperlinks function. Not our favorite!

1. Click the Preview tab.

A line of text
replaces the Search part
as we designed in
Search > Properties.

2. Click on Click here

to search
The Search part
appears with animation.
3. Scroll down to see
the rest of the component.
4. At the bottom of the grid, click on Click here to enter new record
hyperlink.
Nothing happens because hyperlinks dont work here.

Viewing in Live Preview

Requires that the Application Server be running and that you be on-

line.
At Live Preview, you stay in Alpha Anywhere, but are essentially running a page in
Internet Explorer (to use other browsers, see Viewing in the Browser below). You can
actually test the action of the component as if it were open in the browser.
Functionality: Full. All web component features are active.

5. Click the Live Preview tab.

If the Application Server is not running, you will be asked to turn it
on.
The web component comes up. This time all features work.

Viewing in Working Preview

Can be used on-line or off.
This is our favorite, perhaps because its the simplest and is always available. While
not every component will run here, most of them do. And, if you can see it at WP, you
can use it in desktop applications.
Functionality: Most features work here.* Excellent for debugging Xbasic scripts.

39

CHAPTER 2. SAMPLING THE SYSTEM

Previewing Web Components

6. Click the Working Preview tab.

The component comes up. All our features are working.
Well use Working Preview shortly to test the component design, but first
lets look at the final preview method.
GO TO ALPHA VIDEO #50

For more information on using Working Preview to debug Xbasic scripts, go to:

Videos > Filter: Enter Working Preview. Choose:

50. The Working Preview pane in the Grid Builder.

Viewing in the Browser

Requires that the Application Server be running and that you be on-line.
Browsers govern the functionality and appearance of projects that are used on the
Internet. Since they can each give slightly different results, components that will be
used on the web can be tested in the most popular Internet Explorer, Firefox,
Chrome, Safari or Opera.
Functionality: Full for all web components and web pages.
HINT!

If you have only the default browser that was installed on your computer when you
bought it, you may wish to explore some of the others.

BROWSER BUTTON

The Browser button is on the toolbar next to the Preview button Unless you have
changed from the default, it will look like this:

7. Click the down arrow next to the Browser symbol. It will turn pale orange
when your cursor is on it.
8. Choose the Browser you prefer.
Next time, your choice will be the default and you can just click the button. At left, mine shows the Firefox icon because that is the one I used last.
9. Click the browser button to see the component on-line.
INSTALLED BROWSERS

There is another way to go to just the Browsers installed on your computer.

10. Return to Alpha Anywhere.

11. Live Preview tab: Look at the bottom of the window to see links to the
installed browsers.
In our case, we have Internet Explorer, Firefox and Google Chrome.

CONVENTION

Since there are so many options our instructions will simply say Click the Browser
button or Go to the Browser.

REMOTE TEST

You can also view components in a remote device tablet, smart phone, etc. Well
demonstrate this nifty feature in Chapter 3.

*. The following do not work here: JavaScript events that open Alpha Anywhere reports, A5W pages in pop-up windows or in DIVs.

40

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Testing Grid component design

This exercise continues from the previous one. You should have the PopUp-

Fade Grid Component open at Live Preview (or Design mode).

We will use Working Preview to look over the results of the Grid Component settings. If youve missed one, you can always go back to the Design tab, edit and then
return to Working Preview.
REMINDER

Remember that, unless you have copied the file to a different location on your computer (see Important note on page 23), most of you will not be able to save new or
changed records. Everything else will work fine, however.

1. Click the Working Preview tab.

Here are the results of the settings we defined.

Search part: The Search part is hidden. Its title is Click here to search.
Grid:
The Row Number and Customer_ID columns have been renamed.
There is a hyperlink for the Email field. Clicking on it opens a Send

Email window.
The Record (Page) Navigator is in the style we defined and there is a
window for entering the page number.
We can see room for improvement, especially in the columns weve
marked in yellow. Well get to those adjustments shortly.
Detail View:
There is a Click here to enter new record line of text at the bottom of the
grid. It will open a new record in a Detail View window.

41

CHAPTER 2. SAMPLING THE SYSTEM

Testing Grid component design

Double clicking on a row will open the Detail View record for edit-

ing.
SEARCH PART

The Search part opens and closes when you click its title.
To make it appear, click Click here to search
Title toggles to Search when open (inset above).
To make it go away, click Search (green above).

2. Click Click here to search

3. Lastname: Enter harr (Click Search).
Three records are returned.
4. Click Clear Search Criteria.
SORTING RECORDS

5. Click on a column title to change the sort order.

CHANGING A RECORD

6. Double click on a row in the grid.

The Detail View pops into
view with information on
the selected customer.

Did you notice how quickly the Detail View comes up even with animation? Thats
where JavaScript and pre-fetching data worked their magic. If you have had any experience with web based databases, youll appreciate how quickly data is retrieved. Really
is like being at the desktop.
DETAIL VIEW TITLES

Look at the Detail View window. It has two titles. The lower one (pink) is always
available, the top one (yellow) is for pop-up windows only because the other window
positions do not have title bars.
Both are Detail View properties.

42

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Display Options > Detail View window title (yellow).

Title > Title (pink).

Using the Detail View

SAVING RECORDS

Keyboard save: You can use the familiar Alpha Anywhere desktop keyboard commands to save the record, as well as clicking buttons. For example, records are saved by
pressing F9.*
The Detail View toolbar has two
save options:

Save record.
Save record and enter a new record.
DELETING RECORDS

You can use keyboard or mouse for deleting records, too.

a. Put your cursor in a text box and press CTRL + D or click
Delete Record on the Detail View toolbar.

The warning at left appears.

b. Click

SECURITY
MASKS

CANCELING A CHANGE

Cancel.

You may also decide who can delete records by setting up Security Groups.

7. Test a mask by overwriting a phone number.

The mask remains as you overtype the entry.
The above change will need to be saved or canceled before you can dismiss the DV.
a. Click

the

on the Detail View toolbar to close it.

Notice at left appears.

b. Click

OK.

c. Press

ESC or click

Cancel Edits on the toolbar.

The Undo Edit notice appears.

d. Click

CLOSING THE WINDOW

OK.

Now that the pending changes are cleared, you will be able to close the window.

8. Click

to close the Detail View.

*. Remember that Save and Delete wont work with this particular connection. See Important note on page 23.
. Security is discussed on page 125 and theres lots, lots more in the free book that comes when you buy Alpha Anywhere.

43

CHAPTER 2. SAMPLING THE SYSTEM

Testing Grid component design

Looking at the Grid settings

EMAIL

There is no email address in the current view, so we will change the sort order back
to Lastname.

9. Click the Lastname column title.

10. Click an email address to open the Send Email window.
11. Close the Send Email window.
RECORD (PAGE)
NAVIGATOR

The record (page) navigator is found below the Grid. Since you probably use this all
the time on the web, little explanation is necessary.

12. Choose 2 from the drop down box.

Only two records are now displayed.

RECORDS IN GRID

There are two places where you can define the number of records shown in the grid,
at the bottom of the Grid and in the Search part. Each serves a different function.
Search Part. The Records per page box is for
the records that are found in the search. It does
not affect the grid settings until you click the
Search button.
Grid: This is where the default that we set at 12
appears. The end user may change it.

Using the Search Part Query Syntax

The syntax for finding records is easy for the end user to understand. For the full list,
see Go to A5 Help below.

13. Define a new search as follows:

Company: is not blank
Sort by: Company.
Order: Ascending.
Records per page: 2.

44

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

14. Click Search.

Eight records are returned,
but they are in four grid pages
(left).
15. Click Clear Search Criteria.
16. Search box > First name:
Enter tom,john.
No space after the comma.
17. Click Search.
Two records are returned.
GO TO ALPHA HELP

The full list of query syntax is listed at:

Documentation > Filter: Enter Query by. Choose:

Search Part Query by Form Syntax V10.
Query by Form.
GO TO ALPHA VIDEO #2

To see a demonstration of search features, go to:

Videos > Filter: Enter Searching.

Clearing Search part values

Clearing Search part values is fairly straightforward. The only surprise might be that
removing the Sort by value does not return the grid to the default sort order.

18. Click Clear search criteria.

19. Records per page: Change back to Select
Value.
20. Sort by: Change back to Select Field.
21. Click Search.
The default record list returns, but it is still
in Company order.
22. Click the Lastname column title to return to
the original sort order.
The sort order changes in the Search box, too.

Understanding Modeless and Modal windows

There are two window options for the Detail View, Modeless and Modal.

45

CHAPTER 2. SAMPLING THE SYSTEM

Testing Grid component design

Modeless allows the user to move back and forth between open win-

dows.*
Modal blocks access to any other window until it is closed by the end
user.
First, we will look at Modeless, since that is the value defined for this component.
Then we will return to the component design and change it to Modal so you can see how
that works.
Modeless means that the user can move back and forth between windows. This
makes editing quick and convenient because the Grid and Search parts remain accessible while the Detail View is open.

MODELESS

23. Grid: Double click on a row to open the DV.

24. Leave the DV open and double click on a different row in the Grid.
The information changes in the Detail View. It is ready for editing.
25. Search part: Type harris into the Last Name field. (Click Search)
The grid changes and the first record in the grid appears in the Detail
View, again ready for editing.
On the other hand, if you are worried that a record might be changed accidentally,
you can require that the window be set to open and close for each edit, as we will do
next. First, we will save the work we have done so far.

MODAL

26. Click the Design tab.

27. Press CTRL + S or click Save on the toolbar.
DISPLAY OPTIONS

GRID BUILDER NAVIGATOR: DETAIL VIEW > PROPERTIES.

Detail View window position: Choose Popup Window - Modal.
To locate the property quickly, click Search Properties at the top of the
list and enter position.
Close Detail View after submit: Yes.

28. Click Working Preview.

29. Grid: Double click on a row
to reopen the Detail View.
This time the window opens
with the background grayed out,
denying access to the search part
or other records in the grid.
If you edit the record and then
save it, the DV will close and
you will again have access to the
grid.
30. Click Close on the toolbar. Do not save the last edits.
*. Sometimes it can be hard to keep these straight. Think Less is more. Modeless gives you more access.

46

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Next, we will modify the existing component and save it as a new one.

Revising an existing Grid component

First, we will open the Grid in Design mode. Then we will activate the Detail View
display by defining a hyperlink for the Customer _ID field, rather than double clicking
on the row. We will also change the window position and animation one more time. And
while were at it, well clean up the display a bit.

1. WPCP > Web Components: Double click on MyPopUpFadeRemote to

open it at the Design tab.
2. Top menu > File > Save as MyRightSlideRemote.
DETAIL VIEW DISPLAY

GRID BUILDER NAVIGATOR: DETAIL VIEW > PROPERTIES

Method to display Detail View: Click a hyperlink field.
Hyperlink field: Customer_Id.
If you do not identify a field here, Alpha Anywhere will choose the first
non-hidden field in Grid > Fields > Selected. In this case, it still would
have been Customer_Id, but we prefer to identify it anyway.
Hide field settings are at Field Properties > Column Properties.

DISPLAY OPTIONS

Detail View window position: SplitView_Right.

Animation: Yes.
Show animation style: Click the button.
Type: Slide.
Speed: Select Slow.
Hide animation style: Click the button.
Type: Puff.
Speed: Select Slow.

COLUMN TITLES

Next, we will clean up the grid by making the titles a bit smaller for two columns
(fields). Weve already done this, so it should look familiar. We repeat because it is
important to learn to think in terms of columns, rather than fields when are looking
for the proper property.
GRID BUILDER NAVIGATOR: GRID > FIELDS

COLUMN PROPERTIES

PROPERTIES: BILL_STATE_REGION & BILL_POSTAL_CODE

Column Heading: Make these changes:
BILL_STATE_REGION to Bill State.
BILL_POSTAL_CODE to Bill Zip Code.

Centering column contents

We want to center the contents in the column for the <RowNumber> field. This
action is found in Label Properties.

47

CHAPTER 2. SAMPLING THE SYSTEM

Revising an existing Grid component

LABEL PROPERTIES

PROPERTIES: GRID > FIELDS: <ROWNUMBER>

In-line style: Overtype text-align: right; with text-align: center.
If you know the setting, you can type it directly.
You could also click the button and choose: Text > Alignment > Center.

Copying properties to one or more fields

The folks at Alpha Software are always
looking for ways to save you time. The
ability to copy a property to one or more
fields is a favorite.
We want to copy the above property to the
Bill_State_Region column.

3. Place your cursor in the above

property (gold arrow).
4. Click Paste current property
(red circle).
Dialog: Set Controls

You can set properties in two

different ways:
Use the genie as we will

do here.
Advanced users can also
compute the property value
using Xbasic code (inset).
For more information,
click Explain when to use
this option. There is also a
video (see below).
a. Choose

Bill_State_Region.

b. Click the Set Properties

button.

PREVENTING DATA ENTRY

To prevent data from being entered in a field, use a Label

control type. This is particularly useful for auto-increment
fields. While auto-increments cant actually be changed,
even if the control type is textbox, it is cleaner if shown as a
label.
In this case, we want to make the change in the Detail View, not the Grid.

DISPLAY SETTINGS

GRID BUILDER NAVIGATOR: DETAIL VIEW > FIELDS: CUSTOMER_ID

Control type: Change Text Box to Label.
See how easy it is to modify the settings? The trick, of course, is learning the them,
but you will be surprised how quickly you get a sense of what is where. And theres
another trick well tell you about on page 45.
Now lets see what we have once again.

5. CTRL + S to Save or click the Save button on the toolbar.

48

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

6. Click the Working Preview tab.

Note: We filtered out records without a value in the Company field
so we could get a better idea of how the grid lays out.

BILL_STATE_REGION: Renamed to Bill State.

BILL_POSTAL_CODE renamed to Bill Zip Code.
Row & Bill State: Label and contents centered.

7. Grid: Click a hyperlink in the ID column of any row.

The Detail View slides out to the right of the grid.
8. Detail View: Click the X to close it.
Puff its gone.
9. Click the Close button on the toolbar to close the component.
Are you impressed with what you did in just a few minutes?

And. You never entered a line of code!

But. Maybe you would like to customize some of these settings.
No problem! See RAD without compromise on page 70.

GO TO ALPHA VIDEO #3

Watch a video on editing at:

Videos > Filter: Enter Editing.

Videos > Filter: Enter Property. Choose:
M6. Setting multiple properties at once using Xbasic. Advanced.
GO TO ALPHA HELP

If you are a keyboard fan (as opposed to a mousy person) you can get a list of hot
keys that can be used in grids at:

Documentation > Filter: Enter Shortcuts. Choose

Grid Keyboard Shortcuts V10.

49

CHAPTER 2. SAMPLING THE SYSTEM

Creating an Image Gallery Component

Creating an Image Gallery Component

Ready for some fun? This component takes only a couple of moments to set up. We
recommend you watch the video first so you can see it in action. Then come back here
and set up the component so we will have it in our project. Well need it shortly.
The Image Gallery Component does just what its name says displays a gallery of
images that have been placed in the project. Alpha Anywhere ships with some samples,
so we can quickly get an idea of how it works.

On the computer, one clicks the arrows to cycle through the images or choose one in
the bottom pane to bring it into view. In a mobile application, you can use any touch
screen features permitted by the device, such as momentum scrolling (using your finger
to scroll image by image) and pinch zoom.

Setting up the sample images

In order to use the images, you need to define the file in the
Javascript Library and then create the component. This will
load the files into this particular project.

1. Web Project Control Panel: Click Project Properties.

2. Javascript Libraries > Include Image Gallery: Yes.
3. Click OK.

50

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Creating the component

4. WPCP > Web Components: Click New > Web
Component > Image Gallery. (Click OK)
It may take a moment for
the component design mode
to come up because the
images are being loaded (see
status bar at bottom left of
screen).
5. Navigator > Properties >
Image Gallery Options > Default image directory should be Images (green). If not,
click the button and enter Images (yellow).

6. Save the component as MyImageGallery.

7. Click Live Preview and test it out.
Turn on the Application Server, if necessary. You will need to be online to see this component.

Viewing the image files

The image were loaded into the project when you created the component. Lets take
a look.
a. WPCP:

Click Images in the

left menu.
There are two new folders:
Images and, inside it, Thumbs.

b. Double

click the Images

folder to see the list of full sized
images.

c. Notice the Current Folder

next to the project name has
changed (yellow).
d. Double

click the thumbs folder (green) to see the set of thumbnails

and note that the Current Folder changes accordingly.

e. Click

Move up one folder level (purple) until it reads <Top Level>.

If you forget to change back to <Top Level>, you wont see your web components when you go looking for them!
GO TO ALPHA VIDEO

Now, you have to admit thats a cc (cool component)! Of course, this is

only a sample. Learn lots more by watching the videos.

Videos > Filter: Enter image gallery. Choose:

IG1: Quick Start.
IG2. Overview.

51

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Tree-control Navigator

IG3. Using the image gallery in a Tabbed UI Component.

IG4. Calling the image gallery from a button in a Grid.
IG5. Filtering the Images Shown in an image gallery.

Creating a Tree-control Navigator

A Tree-control Navigator filters the Grid. It is not a separate component, but a feature in Grid Properties.*

In this case, the control produces a tree that branches out from State to City to Last
Name. Each time you click on a value, the grid is filtered. CA produces all customers in
California, Los Angeles produces all customers in LA and, you guessed it, Harrison produces customer(s) named Harrison who live in the City of Angels.
We really need you to watch the video first on this one because we will just give the
settings here. The video uses a DBF example. We will use SQL.
GO TO ALPHA VIDEO

Videos > Filter: Enter tree. Choose:

VFP10. Tree Control Navigator. Parts 1 and 2.

Setting up the Grid

We need a grid to get started. We could use one of the ones we created earlier, but it
will be good practice to set up another. Here are the settings:

1. WPCP: Create a new blank grid component.

COMPONENT TYPE

GRID BUILDER NAVIGATOR:

Tabular, Read Only.
No Search part or Detail View, although you could have them.

*. UX components (used for mobile apps) also have Trees. Although the settings are different, the same principles are followed for
defining the trees and branches.
. Alpha Anywhere ships with two Alpha Sports databases. One is DBF and the other SQL which is the one weve been using.

52

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

DATA SOURCE
QUERY (ALPHA DAO)

SQL database accessed via AlphaDAO.

Connection Name: MyAlphaSports. (Click Connect)
Table Name: Customer.
Order by: Lastname.

FIELDS

Customer_ID to Company, Bill Address to Bill_Postal_Code.

For this component, we will use a style that is typically used in mobile applications.
As you will see, it can also be used in web apps. It does, however, present the data in a
larger screen format than would another type, such as GrBlue, because finger touch is
not as precise as that of a cursor. We suggest you test both to see the difference.

STYLE

LAYOUT OPTIONS

2. Go to Grid > Properties.

Style name: Choose IOS.

Locating component controls

The Find Properties dialog provides a quick way to search
for the various settings. It is available for all sections, but
appears differently, depending on the component.
a. Grid

components have a Search Properties link.

b. Other

components have a Properties button with a

magnifying glass. Sometimes this looks more like a
label than a button. Well use it soon so you will see
how it works.

3. At the upper right, click Search Properties.

4. Find what: Enter tree.
5. Choose Has tree-control record navigator .
6. Click Find Property.
You are taken directly to the setting. No searching around
in a sea of properties. Sweet!

Defining the Tree-control Navigator

Now well set up the Tree Control.
TREE-CONTROL RECORD
NAVIGATOR

GRID BUILDER NAVIGATOR: GRID > FIELDS

Has a tree-control record navigator: Yes.
Tree-control navigator tree definition: Click the button.

53

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Tree-control Navigator

There are two

steps. First, the
Tree-control
Navigator is set
and then the
Master Template
is defined.*
Dialog: Tree-control
Navigator Builder

7. Step 1: Click
Define
Tree-control
Navigator.

Dialog: Tree Navigator

a. Type:

Choose Simple Query.

Click the Question Mark (pink) to learn the difference between Simple and Complex queries.
b. Type:

Choose SQL.

c. Connection:

Choose the Connection String for

MyAlphaSports. (Click OK)

d. Table:

Choose Customer. (Click OK)

DEFINE TREE & BRANCHES

e. Click

Add. Choose Bill_State_Region.

f. Repeat

for Bill_City and Lastname.

DEFINE FILTERS

You might think of defining these filters as mapping. The filters connect the fields in
the Tree to the fields in the Grid. In this case both have the same field names, but they
could be different.
g. Select

Bill_State_Region.

h. Filter

Grid when user selects an entry in the tree at this level: Yes.

i.

Click Define Filter.

Dialog: Tree Note Filter / Link / Order

j.

Filter: Yes.

k. Click

the down arrow to open the builder.

*. Want more? learn all about Master Templates in the documentation that comes when you buy Alpha Anywhere. And there are videos, too. When you buy the software, youll get lots of help learning all these fabulous features.

54

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Dialog: Specify Filter

l.

Target fields (from Tree): Double click Bill_State_Region to place in

Filter box.

m. Enter:
n. Click

= (equals sign) and a single quote mark (pink above).

Insert field from current component (fields from Grid table).

o. Choose

PLACEHOLDER

A placeholder is inserted. Placeholders carry the contents of the field. They are
defined by curly brackets as in {Bill_State_Region}. This is an important concept, so be
sure to keep it in mind as you develop you application.
p. Enter:

QUOTES FOR CHARACTER

TYPE FIELDS

Bill_State_Region.

Another quote mark (green above).

Since the value in this field is a character type, it requires quotes around it. Click
Warning: Your expression uses a placeholder. Click here to see if quotes are needed.
Single quotes are used for SQL data.
Double quotes are used for DBF data.

The completed expression should read:

BILL_STATE_REGION = '{BILL_STATE_REGION}'
q. Click

OK (twice).

Dialog: Tree Note Filter / Link / Order

r.

Repeat the above for the tree branches. Expressions are as follows:

Bill_City:
BILL_STATE_REGION = '{BILL_STATE_REGION}' AND
BILL_CITY = '{BILL_CITY}'
HINT!

Copy the above expression to the clipboard. We will use it in the last name definition.

AND / OR

AND and OR use the JavaScript protocol, not Xbasic. Therefore, even if you are
using a DBF data source, they are entered without periods before and after (.and.). Use
the buttons to be sure.
s. When

finished, click OK (twice).

Lastname:
BILL_STATE_REGION = '{BILL_STATE_REGION}' AND

55

CHAPTER 2. SAMPLING THE SYSTEM

Getting ready for the web

BILL_CITY = '{BILL_CITY}' AND LASTNAME = '{LASTNAME}'

t.

When finished, click OK (3 times).

Setting up the Master Template

A Master Template is required for Grids with a Tree-control.
Dialog: Tree-control Navigator Builder

8. Step 2: Click Edit Master Template.

Dialog: Master Layout Template

a. Click

Insert Table for Tree Navigator and Grid Part Placeholders.

Notice advises Tree will be placed

to left of Grid.
b. Click

Yes.

c. Click

OK (twice).

9. Save the component as MyTreeNavigator and go to Working Preview

to test.
10. Click Close to return to the Web Projects Control Panel.
Now that you have an idea of how components are created, we will take a
look at how they are delivered to the web.

Getting ready for the web

Now that you understand the basics of creating components, the next question is.
How do I use them on the web? Alpha Anywhere has several tools for this.
WEB PAGES

56

You can put components on web pages, either A5W or HTML.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

A5W Pages: Created within Alpha Anywhere.

Components can be inserted on the page.
Typical HTML Editor tools available for WYSIWYG.
HTML and Xbasic can be inserted at the Source tab.
Code can be tested at the Interactive tab.

HTML Pages: Usually imported from an outside program such as

Dreamweaver. The Xbasic code for the component can be inserted

on the page.
WEB COMPONENTS

There are three components that make it easy to organize your project:
Tabbed UI Component: Organizes components, pages and
reports with buttons and tabs. This
builder even adds a Home page.
Easiest & fastest.
Well use one of these in the
next exercise.
While they can be used in
mobile apps, it is recommended
that a UX be used to create a similar setup.*
Page Layout Component: Creates complex page layouts for grids,
pages and reports. You can tuck them
inside Tabbed UIs, too.

*. The Tabbed UI can be sluggish when used in mobile applications.

57

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Tabbed UI component

Navigation System:
This component creates a
menu bar that navigates
between pages. The menu
can be set up to go across
the page or down the side.
PUBLISHING

Once you have chosen one of

the above methods, the final
step is to Publish the project. We will discuss that on
page 67.

Creating a Tabbed UI component

Tabbed UI stands for Tabbed User Interface. You could almost call this builder an
instant website creator it comes complete with a header, home page and handy buttons that can be placed in a framed tabbed container as you see below or the buttons can
just march down the left or right side.
Lets take a look at its design elements as seen in the browser.

LEGEND

58

The following are discussed in Adding a page title, headers and footer on page 64.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

(1) Page title.

(2) User defined head content.
(3) Header text.
(8) Footer text.
(4) Clicking the << collapses the buttons panel for a wider page display.
(5) The Home tab can be renamed, if desired.
(6) Design text and add pictures with the HTML Editor. (see Adding a Home

Page on page 65).

(7) Buttons are defined for Grid Components, Reports, A5W, HTML and
External Web Pages, PDF Documents. At the design level, the buttons can be
organized with frames and tabs.
HOW IT WORKS

When you click on a button, not only does the selection open, but a tab is placed on the
top row (red box below). Once the grids have been loaded, the tabs make it easy and quick
to move between selected objects. The left menu can be collapsed for a wider display (red
circle) as shown in the following screen shot. Grids function independently, so the AJAX
callback is for the active grid only.

Are you excited? We think this development is delightful!

Best of all. The Builder is really, really, REALLY easy to use.

As we have seen, the Tabbed UI can open components, reports, A5W and
HTML pages, as well as external pages and PDF documents.
1. WPCP > Web components: Create a new Tabbed UI Builder.
New > Web Component > Tabbed UI Builder.

59

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Tabbed UI component

The navigation pane is on the left. We will be exploring both Tabbed UI

Controls and Tabbed UI Properties (yellow).

2. Overview: Read the description.

Adding & modifying controls

3. Tabbed UI Controls > Tabbed UI Buttons: Expand the selection
and click Component.
Dialog Title: Insert Tabbed UI Pane

Button type: You can use either Buttons or Hyper-

links.
Object Type. You can change the listing of Object
Names to the following: Report Layout, A5W page,
Static HTML page, External (web) page and PDF
document. Except for External pages, they must all
be located within the current Web Project.
Filter: Useful for finding objects in a long list.
You must enter at least 3 letters i.e. to find ImageGallery, enter ima.
Edit button opens the HTML Editor for further
formatting of the text for the button label.
a. Button

type: Choose Button.

b. Object

type: Choose Component.

c. Object

Name: Choose MyPopUpFadeRemote.a5wcmp (Grid).

d. Button/Hyperlink
e. Pane

text: Change to Style 1.

label: Change to Style 1.

This is the title of the tab pane (#5 in screen shot on page 58).
f.

Button width: 1.5in

g. Click

CONTROL PROPERTIES

OK.

Once an object is added to the list of controls, its properties become available in the
right pane Most are self-explanatory.

4. Repeat the above steps to add the MyRightSlideRemote component:

a. Button/Hypertext
b. Pane

text: Style 2.

label: Style 2.

c. Button

width: 1.5in. (Click OK)

5. Add the Image Gallery and

TreeNavigator Components.
Button width should be 1.5in
for both.

60

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Text and Label: Use the defaults.

6. Save the component as My_Components_Menu.

MOVING A CONTROL

7. Select TreeNavigator and move it to 3rd position with

the arrows at the top of the window (yellow).

Changing the Style

At this writing, the default style is IOS, but, we prefer GrBlue for web applications.
TABBED UI PROPERTIES

8. Navigator menu: Go to Tabbed UI Properties.

Style name: Choose GrBlue.
9. Go to Live Preview.
Allow Alpha Anywhere to turn on the Application Server, if necessary.

DISPLAY NOTES

ImageGallery can be seen only at Live Preview (remember, you have to be

on-line for that one). The others will appear at Working Preview.
Other items, such as child grids with tabs, reports and the Maintenance component may not display and/or function properly at Working Preview.
On the other hand, Working Preview is fine for checking display of buttons,
tabs, etc.
FEATURES

The screen shot below shows what we have so far:

A button for each object is
at the left.

10. Click TreeNavigator to

see the pane and its tab
appear.
11. Close the pane by clicking
its x (red circle).

12. Return to Design mode > Tabbed UI Controls.

RENAMING BUTTONS &
TABS
TABBED UI BUTTON/
HYPERLINK PROPERTIES

There are separate settings for the button and its tab (aka pane).
PROPERTIES: [TABBED UI BUTTON: <COMPONENTNAME>]
Button text: Change to desired name.
Pane title: Change to desired name.

61

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Tabbed UI component

Adding Frames
Frames are one of Alpha Anywheres organizational tools that are used to group like
objects together. This is a pretty small sample of components, but it will give you an idea
of how it works.
Be sure to select the fields first and then click the Containers button.
a. Select

the first two objects (components) as below.\

b. Click

Containers (pink above).

c. Choose

Frame (yellow).

Insert opening Frame Begin & closing Frame End tags: Yes.
Label: Enter/Edit.
Click OK.

d. Repeat

for TreeNavigator (green above).

Frame Name: Find by City, State. (Click Insert Around)

e. Repeat

for Image Gallery (pink above).

Frame Name: Images. (Click Insert Around)

13. Go to Working Preview.

14. If you get a navigation warning, click OK or Leave this Page. Well deal
with that shortly.*
15. View the Frames and then return to Design mode.

*. The navigation warning appeared in Live and Working Previews in V11, but does not seem to be happening there in V12, It does
occur when testing in the Browser, as is appropriate (see Understanding the Browser navigation warning on page 63).

62

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Adding a Tab Control and Tab Panes

Tab Controls hold Tab Panes. The control doesnt actually appear on the form, but the panes do (Customers and
Gallery at left). They hold the framed objects that we
created above, although the frames are optional.
TAB CONTROL
a. At design mode, drag down to select all the objects
(screen shot below).
b. Containers:

Click Tab Control.

Insert the opening [Tab Control] tag? Yes.

Display as: Tab control.
Tab Controls require Tab Panes. We could enter them here, but since this is

the first time you have done this, we will enter them one-by-one for better
understanding.
Insert the closing [Tab Control End] tag? Yes.
c. Click

OK.

TAB PANES
d. Add

Tab Panes as at left.

Select the objects in the yellow area.

Click Tab Pane.
Label: Customers. (Click OK)
Select the objects in the green area.
Click Tab Pane.
Label: Gallery. (Click OK)
e. Move the Customers and Gallery Tab
Pane controls to match the screen shot.
f. Go

to Live Preview (see tabs and buttons in screen shot above).

16. Return to Design Mode.

Understanding the Browser navigation warning

When you go live, you wont want the end user to close a page accidentally. Alpha
Anywhere provides for this by forcing confirmation in order to leave the page.

63

CHAPTER 2. SAMPLING THE SYSTEM

Creating a Tabbed UI component

17. Go to the Browser.

18. Click a button in the Tabbed UI.
19. Close the Browser or the Browser tab to see the following message.

While testing, however, this message can become annoying because it needs to be dismissed each time you preview your work in the browser.
It is easy to remove the message. Just put adding it back on your pre-launch to do list.
TABBED UI PROPERTIES

TABBED UI NAVIGATOR: TABBED UI PROPERTIES

Prompt when navigate away from page: No.

Adding a page title, headers and footer

The Page Title appears in the tab of the Browser (yellow below) and in the

URL (aqua). The Header tells what the Tabbed UI is about (green). The
Footer gives the company name (pink).
You can also add plain text to the A5W Page Header (#2 in screen shot on
page 58).

64

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

WYSIWYG OR SOURCE

By default, the HTML Editor opens at the Source tab

because the WYSIWYG
editor is based on Microsoft code that is old and, in
many cases, will mess up
your nicely handcrafted
HTML. If you are experienced in HTML, you may
want to leave it alone.
For the purposes of these
lessons, however, we will
change the default.

20. Top Menu > View > Settings > Preferences > HTML Editor > Default
tab: Choose WYSIWYG.
TABBED UI PROPERTIES

TABBED UI NAVIGATOR: TABBED UI PROPERTIES

Header text: Click the button to open the HTML Editor.
a. Enter:

Components and Images.

b. Font:

Change to @ArialUnicode MS.

c. Click

Save.

Footer text: Click the button to open the HTML Editor.

Enter Your company name and address.
Page title: Enter your Company Name.
This entry will appear on the tab in the Browser.
HEAD CONTENT

You can also enter text in head section of the .a5w page that holds this component.
When testing the component, it will appear in the space above the title (yellow). It will
display at Live Preview and in the Browser, but not at Working Preview.
CONTAINER A5W PAGE

User defined head content: Click the button and define text.

the window.

Find it fast by clicking the Properties button at the top of

Adding a Home Page

We will complete the component by providing some instructions for the end user on
the Home page.
HOME PAGE

GRID BUILDER NAVIGATOR: TABBED UI PROPERTIES

Home Page tab title: Home.

65

CHAPTER 2. SAMPLING THE SYSTEM

Viewing and using the Project in the Browser

Home Page HTML Source: Local.

Home Page HTML: Click the button to open the HTML Editor.
a. Enter

and format text as above. (Click Save)

b. Click

Save.

21. Go to Live Preview and test everything out.

22. Save and close the component.

Understanding A5W pages for Tabbed UIs

In most cases, components are added manually to the A5W page. Tabbed UIs are different, however.
When you saved the component in step 6 on page 61, an A5W page was
automatically created. Lets take a look.

23. Web Projects Control Panel: A5W Pages.

The default name for the page is: TabbedUI_My_Components_Menu
24. Double click to open in the HTML Editor.
IMPORTANT NOTE

The Source code for the component is defined automatically. Each time the component
is saved, any code added at the page level is overwritten.
If you wish to modify the Source code, do so within the Tabbed UI. There are

various settings for the component itself and for each individual object contained therein. Changes made to these properties, such as Class names, CSS
and JavaScript, etc., become a part of the component and will not be overwritten when the page is saved.
25. Close the HTML Editor.
GO TO ALPHA VIDEO

There are several videos on using the Tabbed UI builder. We recommend you start with
two of the earlier ones and then go on to the more advanced.

Videos > Filter: Enter Tabbed UI. Choose:

25. Tabbed UI Builder.
27. Window Options. Using Action JavaScript.

Viewing and using the Project in the Browser

Its been easy to see Web Components using Live- and Working Preview. Pages, however, must be viewed in the Browser. And, since they will likely contain components,
Alpha Anywhere needs to know where to look for the files. This is done with a process
called Publishing.

66

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Publishing the Project

Publishing places all the necessary files in a special
folder on your hard drive. The default location is
c:\A5 Webroot.
Publishing has more options than we want to
go into at this time, so well just take you through
the basic steps.*

26. Web Projects Control Panel: Click Publish.

a. Select
b. Files

profile: Local Webroot.

to publish: Publish Web Project files

c. Launch

browser after files are published: Yes.

d. Page

to show: Choose TabbedUI_My_Components_Menu.a5w

e. Save these settings as your Quick Publish settings:

Yes.
f. Click

Publish.

The list of files to be published appears.

g. Click

OK and accept any other dialogs that may appear.

The page opens in the Browser (screen shot on page 64).

You have to admit, thats pretty cool. This is just what your project will look
like on the web. Can you imagine what it would have taken to do what you just
did some of you with no previous experience in other software programs?
Even you programming buffs have to be impressed with rapid application development at its best but thats not all for you dont miss RAD without compromise on page 70.
27. Return to Alpha Anywhere.
28. Save and close any open pages or components.

Using Quick Publish

On the left side of the Web Projects Control Panel, there is
a Quick Publish option. When you save the Publish settings as we did in step e above, you can just click Quick
publish project without going through the entire dialog.

Execute vs. Publish

There is a second way to view pages in the Browser called
Execute. It is available at the HTML Editor and its button
looks like a lightening bolt (circled). It can be useful for a
quick look at a page. Here is the difference between Execute
and Publish.
*. For more information, see Learning about Projects, Profiles and Publishing on page 228.

67

CHAPTER 2. SAMPLING THE SYSTEM

Viewing and using the Project in the Browser

EXECUTE PAGE

Execute Page: This is actually a Live Preview and creates a temporary page that is
very useful for developing, but may not render all aspects of the page.
The Execute Page concept is just running the bare minimum in Live Preview. It is
good for a snapshot of the page, but since the process doesn't check for all page elements
when it publishes to Live Preview, it doesn't always give an accurate look at all functionality. For example, security is not active in Live Preview and not all support files such as
images may exist in the correct locations.
For proper testing, use the Local Webroot publish profile and add a target folder.*
Publish to that and you are testing in a live and accurate environment.
The Execute Page URL will change each time and will probably contain characters
like $$ and ? and a string of numbers like the following:

http://localhost/LivePreview/$$23C.a5w?54931229
It should not be used as a link.
PUBLISH

Publish readies the pages for publication and produces its final web address. Whenever one of the projects web pages or components is changed, the project file(s) must be
republished in order for the pages to be presented properly. The URL will remain the
same, however, such as in the following example:

http://localhost/CustomerMailingList.a5w
Use this when you are creating links from one page to another.
TROUBLESHOOTING

As you view the web pages after they have been Executed and/or Published several
times, your changes may not appear in your browser. In this case, choose View > Refresh
or press F5 to refresh the page.

REMEMBER THIS!

When you make project changes that you want to appear in your browser, you will
need to re-Execute or re-Publish.

To be continued! This is just the beginning of what you can do with Grids. This discussion continues on page 71 of Alpha Anywhere Web & Mobile Made Easy, The Basics and
More for Version 12 - Volume 1. Remember its free with your purchase of the software.
But, were not quite finished. We have a few more notes for you to tuck into your
noodle before we end this chapter.

*. We talk about target folders in that free book we keep telling you about.
. Jerry Brightbill, Senior Developer and Architect, Alpha Software, Inc.

68

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

A few more notes

About annotating the
grid component
It is always a good idea to describe the
component actions so you will be able
to know its purpose several months (or
years!) after it has been created.
a. Grid Builder Navigator: Select Information (green).
b. Enter

a description and comments.

About getting off to a Flying Start

Now that you have an understanding of Grid components, Search parts and
Detail Views, you may wish to explore the Flying Start Genie.
FLYING START GENIE

GO TO ALPHA VIDEO

Automatically creates Grid components for tables in your SQL or DBF database and places them in a tabbed interface. The Grids can then be customized. The
videos are definitely worth watching.
Videos > Filter: Enter Fly. Choose:
V10FP5: Flying Start Genie.

Opening an existing web application

Do the following to open an existing workspace (desktop or
web):
a. Start
b. At

Alpha Anywhere.

the Select Workspace dialog, click Workspace & Tasks.

If you dont see this menu, click Recent

Databases on the toolbar.

c. Click

Open an existing Workspace.

d. Choose from the Recent Databases list or click More Workspaces

and navigate to the file.

Converting from DBF to SQL theres a genie for that

We explained the benefits of SQL data type over DBF on page 16. Now that
you see how easy it is to use Alpha Anywhere with SQL tables, we suggest you
take a look at the videos for the Database Upsize Genie (see below).

69

CHAPTER 2. SAMPLING THE SYSTEM

RAD without compromise

Experiment at will. The genie creates an entirely new database, so your original DBF files remain intact. You can continue to use Alpha Anywhere for the
desktop its just the file structure that changes. Test it out!

They are there, but they arent there! Even though you can see the tables
on the Alpha Anywhere desktop, you will still need a Connection String to connect your web components.

Free SQL software. MySQL is an open source program. That means you can
try SQL without spending an extra penny.
GO TO ALPHA VIDEO

Well worth the 15 minutes it will take to watch these videos if only to
become better informed on this subject.
Videos > Filter: Enter Upsize. Choose:
V10FP4: Database Upsize Genie.

Converting an existing web project to SQL

If you do decide to move to SQL after you have developed a web project, you
can convert your existing components by simply changing the Data Source and
Query sections of the builder.
NOTE

If you have written any DBF specific code in a server-side event handler, you
will need to translate it to SQL code.

RAD without compromise

Alpha Anywhere has a huge advantage over the competition. True, you can
develop quickly no sense wasting time writing code when you can simply pick
from a menu choice.

But. Alpha Anywhere goes even further for the serious developer. It steps out of
the way when you want to customize. All code is fully exposed so you can add or
modify at will.
Youve heard us say it before. Alpha Anywhere has Rapid Application Development without compromise. Now its time to show you what we mean.

Using the Code section

The Code section of the Grid Component has four primary places where Xbasic and/or Javascript may be entered.
1. Open any Grid component in edit mode.

70

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

GRID BUILDER NAVIGATOR: CODE

Server- and client-side events* define actions taken by the grid. For example,
when the grid is opened, it is said to initialize, therefore, the corresponding event
is Server Side Events > OnGridInitialize.

Server-side Events: Uses Xbasic. The code is shown in green. Each section

also has notes that describe its purpose and give tips on use (in blue).
Client-side Events: Uses Javascript Event Handlers.
Xbasic and Javascript Functions: Functions used in the component are
placed here. They are then referenced where the code is to be executed.
Note the hyperlinks at the bottom of the various dialogs that give additional information and builders. (Maximize window if necessary to see
them.)

*. See Understanding the Client / Server model on page 126.

71

CHAPTER 2. SAMPLING THE SYSTEM

RAD without compromise

Builders are everywhere!

Just about any place where you can write code, you will find builders and helpers.

GRID BUILDER NAVIGATOR: GRID > FIELDS

CLIENT SIDE PROPERTIES

PROPERTIES: <ANYFIELD>
Calculated field expression: Click the button.
a. Click the Insert

Function and Insert Field buttons to see what they have

to offer (green above),

b. Click

the hyperlinks to get information on entering Javascript (yellow

above).

JAVASCRIPT

onClick: Click the button.

Another area for writing your own Javascript or you can use Action Javascript, pre-defined code for common actions.
You can also write Server-side Xbasic here.
To learn more about this builder, see Action JavaScript, JavaScript and
jQuery on page 130.

72

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Code design is everywhere!

Everywhere you look, the code is exposed.
Another example server-side code can viewed
at the Xbasic tab of the component designer. You
will find the tab at the bottom of the Grid Component builder. Changes are made in the Code
section.
The bottom line.
If you can define the code with the RAD tools, you
can modify it with the CODE tools!

And.
If there isnt a RAD way, you can write your own!

Like we said.
RAD without compromise!

2. Close all open components.

Connecting to an Alpha Anywhere database

While SQL is highly recommended, Alpha Anywhere also works with its native .DBF
tables.
As we have seen, SQL tables require a
Connection String in order to establish
the connection between Alpha Anywhere and a remote table. This step is
not necessary if you are using an Alpha
Anywhere database with DBF tables.
There are two places where things are
done differently. Everything else is
pretty much the same except that anywhere we used a Connection String,
select the table instead.

COMPONENT TYPE
DATA SOURCE
QUERY (DBF)

1. Define in the usual manner.

2. Choose Alpha Anywhere .dbf tables.
3. Table name: Choose from the list.
The rest of the Query is much the same as for SQL.

VIEW

A View accomplishes the same goal as an Alpha Anywhere desktop Set. Sets dont
work here, so you will have to choose the fields you want to include.

73

CHAPTER 2. SAMPLING THE SYSTEM

Connecting to an Alpha Anywhere database

This method connects tables in a one-to-one relationship.*

4. Display data from: Choose View.

5. Click Tables in View and select the
tables.
6. Click Fields in View and select the
fields.

FIELD RULES

Many, but not all, Field Rules set at the desktop level are honored for editing at the web
level. For example, capitalization rules are maintained, but default entries, masks and skip
rules are not. Defaults and masks can, however, be defined in the component.

Converting from DBF to SQL

We explained the benefits of SQL data type over DBF on page 14. Now that you see
how easy it is to use Alpha Anywhere with SQL tables, we suggest you take a look at the
videos for the Database Upsize Genie (see below).

Experiment at will. The genie creates an entirely new database, so your original DBF
files remain intact. You can continue to use Alpha Anywhere for the desktop its just the
file structure that changes. Test it out!

They are there, but they arent there! Even though you can see the tables on the
Alpha Anywhere desktop, you will still need a Connection String to connect your web
components.

Free SQL software. MySQL is an open source program. That means you can try SQL
without spending an extra penny.

Converting an existing web project to SQL

If you do decide to move to SQL after you have developed a web project, you can convert your existing components by simply changing the Data Source and Query sections of
the builder.
NOTE

If you have written any DBF specific code in a server-side event handler, you will need
to translate it to SQL code.

GO TO A5 VIDEO

Well worth the 15 minutes it will take to watch these videos if only to become better
informed on this subject. This V10 Feature Pack is free to all V11 users.
Videos > Filter: Enter Upsize. Choose:
V10FP4: Database Upsize Genie.

*. Linked tables are used to create one-to-many relationships. Thats in the book weve been touting all along.

74

Chapter 3.

Marching into Mobile

Definitely not smoke and mirrors

Designing mobile applications with Alpha Anywhere is the
real deal. Discover how the UX component makes mobile
application development possible in an entirely new way. And
you can develop once for all types of devices. And it also
serves as a dialog for web apps.
How brilliant is that!

CHAPTER 3. MARCHING INTO MOBILE

Mobile Device Simulator

Mobile Device Simulator

The UX Component has an exciting feature that will have you longing to create Mobile applications. This chapter will show how to create these sweet
babies!*

Phone

iiPad

*. iPhone and iPad are trademarks of Apple, Inc. The material in this chapter has been reprinted from Alpha Anywhere Web & Mobile
Made Easy, The Basics and More for Version 12 - Volume 1 by Susan Hussey Bush.

76

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

How the material is organized

The previous chapter gave an overview of how the Alpha Anywhere system
works. Now it is time to look at a very important component that serves two
purposes. It acts as a dialog and as the foundation for mobile design.
Dialogs ask the end user for information like the name and address
info you fill out when you buy something on the web.
Mobile requires small data packets because transmission and device
speed are often slower than in web applications. The UX is very efficient and, in most cases, replaces the Grid in mobile apps.
Those of us who have been around a while, remember when the Grid component was the revolutionary concept in web application design. Well, now its
time to cheer for the UX, todays revolutionary concept in mobile application
design!
The UX Component sets mobile application design apart from the competition. Nobody has anything like it. Spread the word!
This chapter will explain how to use the UX for data entry and submission to
a table. Then we will display a list of records in a table and use it to filter a
report. We will also create a menu, show how to use the mobile device simulator
and how to test the component in your smart phone or tablet.
ACTIONS SCRIPTING & ACTION
JAVASCRIPT

Alpha Anywhere provides two tools that write code for you. Action Scripting
writes Server-side Xbasic, while Action Javascript writes Client-side Javascript.
We will use both in this chapter.*

PANELS

Of all the topics discussed in this chapter, Panels are the most important for
anyone even considering mobile application development. So important that we
recommend you stop right now and watch these videos.

GO TO ALPHA VIDEO

Videos > Filter: Enter Panel. Choose:

#3. Tutorial Explaining panel Layouts, panel Navigators and panel
Cards. 5 videos.

FILE TYPE CHANGE

Certain exercises require data be entered in a table. In those situations, we

will switch from the Alphasports SQL table that we used in the previous chapter
to an Alpha Anywhere DBF table. We do so for convenience only.
Always remember that SQL is the recommended file type for web
and mobile applications.
Except for connecting to the database, the design process is the same for all
file types.

WHO NEEDS THIS?

The UX component is the basis of all mobile applications and is used as a

dialog in web applications. It can also be used on the desktop.
Suitable for Desktop, Web and Mobile applications.

*. Server-side and Client-side are explained in Understanding the Client / Server model on page 223.

77

CHAPTER 3. MARCHING INTO MOBILE

Preparation for the lesson

Essential for Mobile applications.

Preparation for the lesson

In Chapter 2, you created a Connection String called MyAlphaSports
(page 23) that we will use again here.
If you have not done that exercise, please complete it now because knowing
how to create connection strings is a vital part of Alpha Anywhere web and
mobile design.

Understanding the UX Component

Currently, most mobile support is limited by speed, primarily network speed
and the processing speed of the device so the data packet size is critical to get
reasonable performance. The data payload for a UX Component is much
smaller than a grid. In most cases, unless you need some feature of a grid, the
UX is a much better mobile solution.
Most mobile devices don't have much screen room, so the apps and pages
tend to be very minimalistic. There seems to be a trend in conventional web
applications toward single page applications. They are the hot new concept and
even have an acronym SPA.
NOTE

The UX Component was previously known as the Dialog Component. It was

completely redesigned for Version 11 and greatly enhanced for Alpha Anywhere (Alpha Five V12). This is important to remember when you are searching
the Help files for assistance. The following apply:
Dialog Component pages and videos.
This group explains the features, how to set-up and use.
UX Component pages and videos.
This group focuses on Panels and List Controls, as well as other features
added in v12. Requires basic understanding as described in Dialog
Component videos above.

UX Components can be designed to look and behave like Grid Components,

but there is a major difference between them.
A Grid is always connected to a database.
The UX may or may not be connected to a database.

78

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

When it is not connected, it behaves like a dialog or can be used to display lists.

What is a Dialog?
A dialog is a form that asks the end user for information. For example,
when you buy something on the web and fill in the name/address form
or register your name and security information as at left you are using a
dialog. The information is then evaluated for correct input (validated). If
you have filled in all the entries correctly, the data is sent to the server. At
that time, it is entered into the database and/or used in some other way
determined by the developer.

What are Lists?

Lists present data in a read-only format. The data can come from
multiple data sources, such as static data, SQL queries, custom
Xbasic code, custom Javascript code, etc. It can be displayed in
either a columnar or free-form layout and can include images and
buttons. When clicked, the buttons execute Javascript code that
you have defined, either with your own code or Action Javascript,
an Alpha Anywhere feature that writes the code for you.
At left is an example of a UX with two textbox fields (as you might
see in a dialog), followed by a list of names and addresses. This is a
very basic example that uses the List Control, another powerful
Alpha Anywhere feature.

Whats the difference between Grid and UX

components?
Understanding the difference between Grid and UX Components is critical
because you need to know which to use when.
GRID COMPONENT

UX COMPONENT

Always bound to a table.

Data submission is automatic.
When the Submit button is clicked, data is entered into the table.
For employees and other authorized users familiar with the company, its
policies and procedures.
May require training for end user.
Example: Company rep enters an order.
Feature rich, but has greater data payload. Excellent for web applications.
May or not be bound to a table.
Creates variables.*

*. See Understanding Variables on page 397.

79

CHAPTER 3. MARCHING INTO MOBILE

Creating a UX Component

Data submission is manually determined by developer with

Action Scripting and/or Xbasic.

When the Submit button is clicked, the data in the variables may be
entered into a table and/or used in another way.
Gathers information from users inside or outside the company.
No training necessary for end user.
Example: Customer places an order on-line.
Data payload very small. Excellent for mobile and web applications
May replace a Grid in web applications when additional speed is required.

Viewing UX Components
With a simple preview selection, you will be able to see exactly how your
applications will appear on mobile or on the web or on the desktop. Besides
looking really cool, the mobile device simulator serves a much more important
purpose. Smaller screens require tighter design, so it is important to be able to
see and interact with the data in a real-life situation. Well also show how you
can actually view the component on your own phone or tablet.

Creating a UX Component
VIDEO! SEE P. 90

Overview of the UX Builder

To begin, we will take a look at the design process for UX Components.
1. Web Projects Control Panel > New > Web Component > UX: Start
with a blank UX Component. (Click OK)
Dialog: Overview

The UX Builder appears

with getting started instructions and a link to explanatory videos. You can return
to this page at any time by
clicking Overview in the left
menu (green). These videos
are also available in the
Video Finder.
The left menu navigates to
the other elements of the
builder (yellow).

80

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Understanding the Menus

The menu options are extensive, permitting extreme flexibility for this component.
2. Click UX twice.
First click opens the Events, Code and Information menus.
Second click opens all menus.
Dialog Title: UX Builder

NAVIGATION MENU

We do not start out with table or view fields in the UX because it creates variables instead. To do so, it uses a series of Controls. The above screen shot
shows the builder after one has been created.
There are five types of controls:
Data Controls, Panels, Containers, Other Controls and Defined Controls.
Individual controls have Properties that are shown to the right, as we
saw in Grids.
The Properties section is for the UX itself (like Grid > Properties).

REMEMBER THIS!

The Properties button (aqua above) opens the Search Properties dialog to
quick find settings (see Locating component controls on page 56).
Data Binding is for mapping the controls to a table, if desired. This permits
data to be entered into a table.

EVENTS & CODE

All components permit code to be added or modified.

We prefer to work with these sections collapsed in order to open
more space for the ones that follow.

81

CHAPTER 3. MARCHING INTO MOBILE

Creating a UX Component

You may need to re-click UX after collapsing them in order to see the

rest.
DATA CONTROLS

These controls are like the ones we saw in Grid > Field Properties > Control
Types (see Control Types on page 34), with some additions:
Textbox, Textarea, DropdownBox, RadioButton, CheckBox, Label,
Image, Hidden, Slider, Switch, Button List, List, Calendar, Tree,
Map and Chart.*

PANELS

Panels are used for Mobile devices. They make the change from portrait to
landscape automatic when the device is rotated. Options include:
Panel Layout, Panel Navigator, Panel Card, Quick Panels genie.

CONTAINERS

Containers wrap controls and divide them into one or more sections:
Tab Control, Tab Pane, Frame, Container and Free-form layout.

OTHER CONTROLS

Another selection of controls:

Static Text, Image, Button, Hyperlink, iFrame, Spacer, TabStop,

Embedded Object, Placeholder, FileUpload/Download.

DEFINED CONTROLS

Controls for
Delete Record, New Record, Row Number, Update Source Grid.
JS (JavaScript) Command Window.
List Controls: Debugging, Navigation Buttons & Icons, Page number, Page selector, Record count, Selector, Twitter example.
Record navigation buttons and icons.
Submit-reset buttons.

Understanding UX Component design

UX design is different than Grid design.
Since a Grid is bound to a table, it already has fields to which we can
assign control types, such as Textbox, Radio Button, etc.
A UX begins without fields, so we reverse the process, selecting the
control type and then defining the Controls (aka fields).
TERMINOLOGY

Controls receive input from the end user. There as several types, most of
which should be familiar to you: Textbox, TextArea, DropdownBox, Radio Button, Checkbox, etc.
Once created, they are listed in the UX Builder and are referred to as
Controls or Fields (red arrow above).

*. Other controls may have been added since this was written. See each list to verify.
. An IFrame control can be linked to a URL to show a web page.
. For more information on these controls, see Creating Checkbox, Radio Button and Drop Down Box controls on page 345.

82

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Like fields, their Data Type (aka Field Type) must be identified:

Character, Numeric, Date, Time, Short-Time, Logical, GUID.

It is important to remember that even though the terms Control and Field
are sometimes used interchangeably in UX design, the controls actually create
Variables, a type of temporary field, not table fields.*
The contents of the variables can, however, be placed in table fields with a
process called Data Binding.
Variables can also be used in other ways. In either case, Action Scripting
and/or Xbasic are used to execute the Server Side Event.

Adding Textbox Controls

This section continues from the previous one. A new, blank UX component

should be open in Design mode.

Textbox controls are used for data entry. They can be added singly, several at
a time, from a pre-defined list or from fields in a table. We will take them in
turn.

Adding a single control

3. Data Controls: Click Textbox to open the New Control dialog (inset
above).
4. Choose Create a single new control.
5. Name: Enter Name.
6. Always make controls label same as its name: Yes.
7. Data type: Character.
LABEL POSITIONING &
JUSTIFICATION
SYNTAX EXAMPLES

You can specify the location of the labels and their justification. Defaults are
Below, Center, Left. They can also be changed after the control is created.
8. Click the Click for syntax examples hyperlink.
This is an extensive help dialog that explains how to:
Add controls.
Use line breaks.
Enter the field (data) type.
Enter the field size (width of textbox).
Combine field size and type.
Combine field size, data type and control type.

*. The book that you get when you purchase the software explains variables.
. To change the position or justification of a control after it has been created. At the UX Builder, right click on the control.

83

CHAPTER 3. MARCHING INTO MOBILE

Adding Textbox Controls

9. Look over the options and press ESC to close the dialog when finished.
10. Label position: Choose Above.
11. Label justification: Choose Left.
These will now become the defaults for future textbox controls.
12. Click OK.
Alpha Anywhere creates the control and its Properties section
opens.
13. Go to Working Preview.
14. Enter your first name.
At this point, the control wont do anything for several reasons. There is no
way for the end user to submit the data. And even if there were a submit button,
Alpha Anywhere wouldnt know what to do with the variable. Before we get
into these things, lets add a few more controls.
15. Return to Design mode.

Adding multiple controls

You can add several controls at once and assign their field (data) types at the
same time.
16. Data Controls: Click Textbox.
17. Choose Create multiple new controls at once.
18. Enter Address, City, State, Zip as at
left.
Press ENTER to create a new line.
Be sure to place commas between city,
state, zip. Well explain more about this
later.
If you cant stand the suspense, go to
Understanding Breaks on page 87.

CHANGING THE FIELD

(DATA) TYPE

The default field (data) type is character. You can change it for non-character
fields.
a. Click

the Field type codes hyperlink to see the code list (inset above).

b. Note

that the code for date fields is D.

c. Press

ESC to close the dialog.

19. Start a new line.

20. Enter the following for Date of Birth: DOB | d

84

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

This uses the pipe key as a separator. It is above the backslash key

on most computers.
IMPORTANT NOTE

You would not ordinarily use an abbreviation such as DOB in a dialog

because the end user might have difficulty understanding what you mean. Fortunately, we can spell out Date of Birth in the Label.
However, as you design UX Components, remember to keep it simple
because, in most cases, the end user will be not be trained in dialog completion.

LABEL RULES

Alpha Anywhere makes it easy to assure that your labels have a consistent
appearance. The following settings are for the label only. Definition for the contents of each Control is set at its Properties, the same as for Grids.
d. Click

Define rules for field labels.

The defaults make the following conversions:

Lets say that you use an underscore in the
control name (last_name), but do not want it
to appear in the label.
Or you prefer to use Camel case*
(LastName) and would like to individual

words for labels.

And, you want to be sure the case is
always the same. Choices are: First Letter
each Word, First Letter or None.
By using the above Field Label Rules settings (default), the following would
occur:
last_name and LastName will both be changed to Last Name.
21. Click Cancel to accept the defaults.

Adding controls from pre-defined lists

You can save a list of controls for future use.
To save a list:
a. Click

Pre-defined lists.

b. Choose

Save list and give it a name and a description.

To load a saved list:

c. Choose

Load list. Select the desired list.

To delete a list:
d. Choose

Manage list.

e. Click

the link to open a folder containing user defined lists.

f.

Find the list and delete.

*. This term may be unfamiliar to some. It was to me, although I use the style all the time. Its when you enter field and file names as
MyCamelCase.

85

CHAPTER 3. MARCHING INTO MOBILE

Adding Textbox Controls

22. Click OK.

The entries are added to the controls/fields list
(inset).
23. Go to Working Preview to view the results.
Looks pretty good, but notice the DOB label. Since we have
the label rules set to capitalize the first letter of the word,
this abbreviation has become even more confusing. The
good news is that labels are easy to change.

24. Go to Design mode.

CHANGING A LABEL

This will change the name of the label in Working Preview,

but not the name of the control itself.
a. Right

click on the DOB field.

b. Choose
c. Enter

Label text.

text for control label: Date of Birth.

Field Label Rules are not honored here, so you will

need to enter desired capitalization.

d. Click
e. Go

OK.

to Working Preview to see the change.

Much clearer, dont you agree?

25. Return to Design mode.

DELETING CONTROLS

You can delete one control or the entire list. The buttons are on the toolbar
above the list of controls. You can delete all or selected objects.
Next we will use the table method for adding textbox controls to the UX.

Adding controls from a table

When you have a table that contains some or all of the fields that you would
like to use as controls, you can import the fields into the UX, saving the time of
creating them manually.
This method can also be set to automatically bind the data to the table.*

But. Thats not a requirement. You could import a list from any table in order to
save development time and then use it for an entirely different purpose.
26. Data Controls: Click Textbox.
The UX should open at Create multiple controls at once because
that is the format we used last. If not, change to that mode.
*. To bind manually, see Binding the UX fields to an existing table on page 90.

86

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

27. Click Populate list from a table (bottom of dialog).

Table type: Choices are Alpha DAO (default) or DBF.
AlphaDAO is for SQL tables; DBF is for Alpha Anywhere
tables.
a. Type:

Choose AlphaDAO.

b. Connection string: Click the

button and choose MyAlphaSports.
c. Tablename: Click the button
and choose Customer. (Click
OK)
d. All

fields: No.

In this case, we want to import

selected fields.
e. Field

list: Click the button.

Dialog Title: Select Fields

f. Select

the following:

Customer_ID, Firstname,
Lastname, Company,
Bill_Address 2, Bill_Country.
g. Click

OK.

Dialog Title: Select Table and Fields

h. Data
i.

Binding > Include data in binding information: Yes.

Click OK.
Dialog Title: New Control

The fields are shown and the field types are identi-

fied.
The data binding information is shown at the bottom
of the fields list (yellow).

Understanding Breaks
Breaks determine the placement of fields on the form. When
you enter the controls line by line by line as they appear
above, Alpha Anywhere automatically inserts a break after
each so that they appear in a column.
To place the fields side by side on the form, we need to
remove the break(s). There are two places to do this.

87

CHAPTER 3. MARCHING INTO MOBILE

Adding Textbox Controls

NEW CONTROL DIALOG

The first place where you can remove breaks is at this window.
You can place fields on a single line, separated by commas as
we did for city, state and zip in step 18 on page 84. Heres an
example of what it might look like if we wanted the name to
appear on a single line.
FIRST_NAME|C, MIDDLE_INITIAL|C, LAST_NAME|C
UX BUILDER

The second place where breaks can be removed is in the UX builder itself, as
we will do next.
28. Click OK to enter the list and return to the main UX design window.
The new controls have been added.

Adjusting the entries

We have a bit of cleanup before we can continue. First, we will delete the Name
control, then we will re-order the fields and, finally, we will change some of the
labels.
DELETE CONTROL

The Name control has been replaced by Firstname and Lastname controls, so
we will remove it.
29. Select the Name control and click X on the toolbar.
RE-ORDER CONTROLS

30. Using the arrows at the top of the field list, arrange the fields as in the
screen shot at left.
CHANGE LABELS

As we have seen, labels can be

changed in the Properties pane.
There is also a shortcut on the rightclick menu.

88

31. Right click on the following

fields and change the Label Text as
indicated.
Firstname: Change to First Name.
Lastname: Change to Last Name.
Bill_address2: Change to Address 2.
Bill_country: Change to Country.

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Changing Label Position

If we went to Working
Preview at this point,
we would see the labels
positioned to the left of
the text boxes (inset).
We prefer to have them
appear above.
First, we will modify
the Customer_Id control and then we will
copy the attribute to the
rest all at once.
FIELD LABEL

PROPERTIES: CUSTOMER_ID
Position: Click the button and choose Above.

32. Toolbar: Click Paste

current property value to
multiple controls at once.
33. Select the Firstname to
Bill_Country
fields.
(Include DOB field out of
sight in the screen shot).
34. Click Set Properties.
Before we go to Working
Preview, we need to remove
some breaks so the controls
will appear as in the above
screen shot.

Removing Breaks
Breaks determine placement of controls on
the form one under the other or side-byside. Breaks are indicated by paragraph symbols (gold arrow).
In this case, they appear after each control,
except for City and State. Alpha Anywhere
automatically removed those because we
separated the fields by commas (see step 18
on page 84). Breaks can also be removed
after the controls have been created.
35. Select Firstname.

89

CHAPTER 3. MARCHING INTO MOBILE

Binding the UX fields to an existing table

36. Click the Toggle Break button on the toolbar above the fields (red circle above) to remove the break.
37. Repeat for the Zip field.
38. Go to Working Preview.
First- and Lastname are on the same line.
Country is now after City, State, Zip.
39. Return to Design Mode.

Adjusting control width

As you work with the forms, you will likely adjust the width of the controls.
We will do two of them for now, but the others could be refined, too.

FIELD PROPERTIES

PROPERTIES: [STATE]
Width: Enter .5in

FIELD PROPERTIES

PROPERTIES: [ZIP]
Width: Enter 1in

40. Go to Working Preview to inspect.

41. Save the component as MyBasicUX and close when finished.
GO TO ALPHA VIDEO D1, D2

Videos > Filter: Enter Dialog. Choose:

D1 Dialog Component Overview.
D2 Dialog Component Creating.

Binding the UX fields to an existing table

This section continues from the previous one. The MyBasicUX Component

should be open in design mode.

VIDEO! SEE P. 97

90

As we noted at the outset, the difference between Grids and UX Components

is that the former is always bound (connected) to a table. The latter may or may
not be bound because UXs create variables that can be used in many ways.
Sending data to a table is only one of them.
In this section, we will connect controls to the fields in an existing table and
send the data to the table. Submitting the data to the table is a two-fold process:
Binding the data in the controls to fields in the table (like mapping).
Inserting code in the UXs Server-Side Event to designate what
should happen after the data is submitted (go to a new page, enter a
new record, etc.)

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

NON-PROGRAMMERS

PROGRAMMERS

Dont panic at the thought of needing to write code. In this case (and many
others), we can use Action Scripting, a built-in code writer.
UXs are serious tools and you will love the advanced options available,
many of which are described in the various videos.

Mapping the fields

Think of binding as mapping. Each control in the UX is mapped to a corresponding field in the table. The field and control names do not have to be the
same. The receiving table can be SQL or DBF.
1.

At the UX Builder, click Data Binding (gold

arrow).
2. Click Bind the controls on your UX to fields in one or
more existing tables.

There are two steps. First, the table is specified

and then the controls are bound to the table fields.
Dialog Title: Bind UX Controls to Table Fields

3. Click the Specify Tables button.

91

CHAPTER 3. MARCHING INTO MOBILE

Binding the UX fields to an existing table

Dialog Title: Select Table(s)

The table and type have

already been filled in
because we imported controls earlier. In this case, we
need only a single table,
however other, more complex UX Components, such
as those with Repeating Sections*, may require multiple
tables. You can add them
here.
4. Click Cancel.
Dialog Title: Bind UX Controls to
Table Fields

5. Click Bind UX Component Controls to Table

Fields.

Dialog Title: Bind Controls to Fields

When we imported the fields in green above from the Customer table, we
checked Include data in binding information (step h on page 87), so Alpha Anywhere has already mapped those fields.
*. An invoice is an example of a UX with Repeating Sections. They are discussed in that free book we keep telling you about.

92

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

AUTOMATIC MAPPING

When the field and control names are similar, Alpha Anywhere can map
them automatically. To do so, click Automatically map fields.

MANUAL MAPPING

Our remaining control names do not match the field names, so we will map
them manually.
j.

Double click on address.

Dialog Title: Select Field

k. Choose
l.

Bill_Address1 (C). (Click OK)

Repeat for the remaining un-mapped fields as follows:

City: Choose Bill_City (C)
State: Choose Bill_State_Region (C).
Zip: Choose Bill_Postal_Code (C).

*UNBOUND FIELDS

All fields must be bound or *unbound. Since we do not have a field in the
table that matches the DOB control, we will use *unbound. It must also be not
updateable.
m. Double

click on DOB.

n. Choose

*Unbound (lavender in Select Field list above). (Click OK)

Or select the control and click Set selected fields to *unbound.

The Field Type is set to *unbound and Updateable is set to No
(aqua above).
o. If

Updateable is set to Yes, click Toggle Updateable on selected

fields.
Updateable should be set to No.

p. Click

OK twice to exit Bind Controls to Fields and Bind UX Controls

to Table Fields dialogs.

You should now be at the UX Builder in design mode.

Binding a control in the UX builder

You can also bind controls to table fields directly in the Properties pane.
a. Select

the field and go to Properties > Data Binding.

b. Updateable
c. Table

= Yes.

alias and Field name: Click the buttons and define as

desired.

6. Save the component and check at Working Preview.

7. Return to Design mode.

Adding submit and reset buttons

So far, so good, but the form is missing a way to submit the data.
8. Click UX twice to open the rest of the controls.
9. Place the cursor on the last field in the list.
10. Defined Controls: Choose Submit-Reset.

93

CHAPTER 3. MARCHING INTO MOBILE

Binding the UX fields to an existing table

You are given the choice of

whether to activate the button
when any field is dirty
(means an edit has been
started). Or just when fields
bound to tables are dirty.

11. Choose When a control that is bound to a table is dirty.

12. Click OK.
If you change your mind later, delete and create new buttons or enter the following:
CLIENT SIDE PROPERTIES

PROPERTIES: [SUBMIT: BUTTON]

Enable expression: Enter as follows:
Any control: dialog.isDirty = true
Only bound controls: dialog.isDataDirty = true

SERVER-SIDE CODE

AFTER DIALOG VALIDATE

In order for the Submit/Reset buttons to work, we need to tell Alpha Anywhere what to do after the form has passed the validation requirements. This is
done by adding Action Scripting to the Server-side afterDialogValidate event
Action Scripting gives us three options:
Redirect to another page.
Enter another record.
Edit the record just submitted.
The first is easy to understand if you imagine you are purchasing something
on the web. Once you enter your name and address, you are redirected to the
next page that asks for credit card info.
On the other hand, if you were a company employee entering an order, you
would want to go to the next record upon completion of the first.
In this case, we will use the last option. Staying on the same record will
demonstrate how it can be entered and then edited.
In each case, additional Xbasic can be entered to further define the developers desires.

94

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Dialog Title: UX Builder

a. Click

Events > Server-side.

b. Server-side

Events: Choose: afterDialogValidate.

Be sure to place the code in this section of the Event Builder. It

tells Alpha Anywhere to execute the command after all validation* criteria has been met.
c. Place

your cursor above the blue line in the code workspace as indicated above.

ACTION SCRIPTING

d. Click

Action Scripting.

e. Choose

Save Submitted Data to Table(s). (Click OK)

Dialog Title: Specify Action Name
f. Name:

Accept the default.

The actual name doesnt matter as long it is unique.

If you enter the same name more than once, Alpha
Anywhere will modify to be sure it is unique. In other
words, Save_Data would be changed to Save_Data_2
and then to Save_Data_3, etc.
This means you can always accept the default.
g. Click

OK.

Dialog Title: Save Submitted Data to Tables

h. Save

Data > After submit action: Choose Edit record just

submitted.

i. Display
j. Click

debugging info: No.

OK.

*. For more information, go to Video #D19, Field level validation in the DialogValidate event.
. For advanced users wishing to check their Xbasic code.

95

CHAPTER 3. MARCHING INTO MOBILE

Binding the UX fields to an existing table

The code is entered. Note that the actionable code appears in green.

The text in blue (above) is preceded by an apostrophe (). This tells Alpha

Anywhere that these are notes and not commands.

Submitting the data to the table

Now that we have a Submit button, we can actually enter data into the table.
First, well save our edits so far.
13. Click Save.
14. Go to Working Preview.
a. Client_id:
b. Fill

Enter 101.

in your name and address.

c. Press

Submit.

Since we selected Edit the record just submitted as the Server-side Event, the
record remains on the screen.
Now, lets look at the table to see what happened.
15. Click the Control Panel tab at the bottom of the screen to go to the
database workspace.
16. Control Panel > Tables / Sets tab: Navigate to the clients table and
double click to open the default browse.
17. Click CTRL + END to go to the last record.
Your entry should appear.
The auto-increment field has been honored, even though we entered
a different value in the textbox.
18. Web Projects Control Panel > Click the Control Panel button on the
upper toolbar.

Editing the data

We will now return to the UX, edit the data and return to the table to view the
results.
19. Click the MyBasicUX tab to return to the UX.
20. Working Preview: Modify the entry and press Submit.
21. Return to the table to view the updated record.

Understanding auto-increment controls

When the fields were bound, we mapped the client_id control in the UX to
the client_id field in the table, an auto-increment field. When the data is submitted to the table:

96

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Alpha Anywhere returns the auto-increment value.

If there is a manual entry, it is overwritten with the auto-increment

value.
Since the end user cannot enter a value, it is confusing to have the control on
the layout, so we will hide it from view.
22. Return to Design Mode.

Hiding a control
Hiding a control removes it from the view of the end user. In this case, it will
still be auto-incremented at the table level, but it will not be visible in Preview
mode.
FIELD PROPERTIES

PROPERTIES: [CUSTOMER_ID]
Hide: Yes.

23. Save the component and return to Working Preview.

The customer_id field no longer appears.

Understanding *unbound control behavior

The DOB field is not bound to a table. So, when it is dirty, the Submit button will not become enabled, but the Reset button will.
24. Make an edit in the Date of Birth field.
The Submit button is not enabled.
25. Enter another record, click Submit and view in the table.
The auto-increment is honored.
26. When finished, close the table.
27. Click the MyBasicUX tab to return to the UX Component.
28. Go to Design mode.
GO TO ALPHA VIDEO #D7

Here is the video for the above section:

Videos > Filter: Enter Dialog. Choose:
D7 Dialog Component - Data Binding - Binding to Existing Tables.

Setting the Device Simulator

This exercise continues from the previous one. MyBasicUX should be open

in Design mode.

97

CHAPTER 3. MARCHING INTO MOBILE

Understanding Panels and Containers

All it takes is a simple click to activate the device simulator that makes the
preview look like an iPhone or iPad.*

1. Go to Design mode for the component.

2. Click Mobile on the toolbar above the control list.
3. Go to Live Preview > Full Preview or Working Preview.
Told you it was easy!

But. There is a bit more to it than that if we want it to look and behave look like
one in the above screen shot. First, we will save this one as a new component.
4. Return to Design mode.
5. File > Save As: MyBasicMobile.

Understanding Panels and Containers

This exercise continues from the previous one. MyBasicMobile should be

open in Design mode.

Panels are the key to proper display in a Mobile device. Among other things,
they tell Alpha Anywhere to orient according to device position. You dont need
them for Web or Desktop, but they are a MUST for MOBILE.
There are three types of Panels, Panel Layout, Panel Navigator and Panel
Card.
Panel Cards contain standard UI controls, such as Header, Footer,
Textboxes, List Controls, Buttons, etc.
An app could consist of a single Panel Card, but, in most cases, you will
need more than one.
Panel Navigators contain other panels and allow you to transition from

one to the other. Two of the most common are:

Carousel: Permits touch swiping from one panel to another on a mobile
device. Drag with a mouse on standard computer.
*. Works for all devices. More simulators are on the drawing board for Android, etc.

98

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Tab Buttons: Movement from one panel to another is done by clicking

buttons.
Panel Layouts allow you to see more than one Panel Card at a time.

We could spend all day telling you about Panels, but the best way for you to
understand them is to watch the videos that we recommended at the beginning
of this chapter. If you have not already done so, DO IT NOW and then come
back to our component design. Youll be glad you did!
GO TO ALPHA VIDEO

Videos > Filter: Enter Panel. Choose:

#3. Tutorial Explaining panel Layouts, panel Navigators and panel
Cards. 5 videos.

These videos are required watching for anyone even slightly interested in
Mobile apps.

Understanding Containers
The Container is another fundamental element that is used in Grid Components, as well as the UX. Just as the term implies, placing one or more elements
in a container tells Alpha Anywhere that these items are to be packaged
together. Sometimes a container will hold a single item, other times it will hold
multiple controls. Like the other controls, containers have properties that can be
defined.
A Panel is one type of container; a Frame is another (page 65).
Now that you are totally up-to-speed on Panels and Containers, the rest of
our design will make more sense.

Adding a Panel Card

6. Click UX as necessary to open all controls.
You may collapse Events and Code, if you like.

7. Select all components.

Click Customer_Id and then Shift
+ click [Button:Reset].
Selected fields turn blue as at left).
8. Panels: Choose Panel Card.
a. Insert

opening and closing tags? Yes.

b. Click

OK.

Two new controls are inserted above

and below the fields.
[Panel card: PANELCARD_1] and

[Panel Card End: PANELCARD_1]

When your component is complex, it will have multiple controls. Alpha
Anywhere numbers them so you can see where they start and end.

99

CHAPTER 3. MARCHING INTO MOBILE

Understanding Panels and Containers

MOVING PANEL CONTROLS

While we created them as a pair, the beginning and ending controls are actually separate and can be move independently. For example, in this case, you
could have inserted both at the top and moved the End control to the bottom by
using the arrows at the top of the control list.

Adding a Panel Header & Footer

Panel Headers can be used to create a title for the page. We will put the Submit and Reset buttons in the Panel Footer.
HEADER

We will insert instructions with a Static

Text control.
9. Select [Panel Card: PANELCARD_1].
10. Right click > Panel Header.
11. Notice: Panel does not have a header. Would you like to turn on the
header for this Panel? Click Yes.
Beginning and ending controls are inserted and colored orange.
Next, we will add a text to the header.
12. Select [PanelHeader: Container_1].
13. Click Other Controls > Static Text.
STATIC TEXT PROPERTIES

PROPERTIES: [STATIC TEXT]

Static Text: Click the button.
Enter the following: Enter Name & Address. (Click Save)
This is an HTML Editor, so you could format the text here, but
well do that in another spot.
Width: 100%
Percentages work better here than fixed amounts because the screen
sizes vary.
This value has an effect on the text centering below.
You can also click the % button on the toolbar above the control list.

Style: Click the button.

Same as In-line Style in Grid Components. Modify as follows:
Fonts: Family = Arial; Size =14 pt.
Text: Alignment = Center.
CONTAINER BEGIN
PROPERTIES

100

PROPERTIES: [PANELHEADER: CONTAINER_1]

Container alignment: Center

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

FOOTER

The footer will hold the submit and

reset buttons and will also have a background color.

14. Select [Panel Card: PANELCARD_1].

15. Right click > Panel Footer.
16. Notice: Panel does not have a footer. Would you like to turn on the
footer for this Panel? Click Yes.
CONTAINER BEGIN
PROPERTIES

SEPARATING THE
BUTTONS

PROPERTIES: [PANELFOOTER: CONTAINER_2]

Container alignment: Left.

17. Move [Button: Submit] and [Button: Reset] down into the Panel
Footer section as shown above.
We want to separate the buttons and have them appear on the left and right
sides of the footer.
18. Select [Button: Submit].
19. Click Other Controls > [TabStop].
[TabStop] works only inside Panel Headers / Footers.

SETTING THE STYLE

UX PROPERTIES

We want to give the component some color and use a style suitable for
mobile apps.
20. UX Navigator: Go to Properties.
Style name: MobOlive.
21. Save the component.
22. Go to Preview > Full Preview to see your first mobile design!
23. Check out the various views.
24. Test it out by entering some info and then checking the table
to see the entry.
Sweet!
25. Close the table and the component.

To be continued!When you get your copy of Alpha Anywhere Web & Mobile
Made Easy, head to page 117 to continue your UX learning experience.

101

CHAPTER 3. MARCHING INTO MOBILE

Testing your App on a Mobile Device

Testing your App on a Mobile Device

How would you like to see what the application really looks line on your
phone or tablet? Its remarkably easy.
HOW IT WORKS

GO TO ALPHA VIDEO

Alpha Anywhere provides a URL. You can use the following methods to get
it to your device:
QR Code. A QR code is generated. Requires a QR Reader be
installed on the device. Available at the App Store.
Email: A URL is generated that can be emailed to the device, where
the link is clicked to open a page in the Browser in the usual manner.
We will leave the details to the video.
Videos > Filter: Enter Phone. Choose:
UX_V12--32. Testing on a Phone or Tablet.

Using the QR Code method

Since emailing yourself a link is pretty straightforward, well demonstrate
with the QR code. We like it because it works quickly and, well, its fun!
Most of you are familiar with QR codes, but you may not have known
exactly how they work. First you need a reader.
1. If you do not already have a QR Reader on your phone, go to the App
Store on the device where you want to view the Alpha Anywhere component and download one.
Once the reader is installed, continue as follows:
2. If possible, connect the mobile device to the same WiFi network as the
host computer.
If that is not possible, there is an IP Address option.
3. Open the MyMobileMenu component.
4. Click the Remote Test button on the top toolbar.
5. Choose Full Preview.
If you have previously opened the component in your Browser, you can
use Fast Preview.
Dialog Title: Remote Test

This dialog is difficult to reproduce, so we will just hit the highlights here.
The options are:
Send an email with the URL of the test page.
Requires that you configure your email settings SMTP server, user
name, password, etc.
Display a QR Code with the URL of the test page.

102

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Requires QR Reader on device.

Requires that device be set to same WiFi settings as host computer OR
IP address be entered. Settings can also be entered manually.
Optional Query String may also be entered.
Copy URL to the clipboard.
Do nothing.
For changed components that have previously been opened on the
device. This refreshes the test page, permitting you to view the update
on the device.

6. Choose Display a QR Code with the URL of the test page.

If the device and host machine are on the same WiFi network:
a. Choose

Automatic - based on my machine name.*

If the device and host computer are not on the same WiFi network, do

the following:
a. Host

Name: Select IP Address.

b. Click
c. Select

Show IP addresses for my machine.

an address to enter it in the IP Address box.

7. Click OK to see the QR Code generated on your computer screen.

8. Open the QR Reader on the mobile device.
9. Place the QR Code inside the scan area of the app (like viewing through
a camera).
Once the scan is read, the device asks permission to open it.
10. Confirm opening to see the component.
Theres not much to do with this example since it only has one pane,
but when you complete the rest of the steps in Chapter 3 of Alpha
Anywhere Web & Mobile Made Easy, you will be able to click buttons and work through the menus, just as will happen when you take
your application live.
11. When finished, close all open components.

*. We had mixed results with this one. Sometimes the IP option worked better.

103

CHAPTER 3. MARCHING INTO MOBILE

Notes:

104

Chapter 4.

Questions & Answers

You have questions, we have answers

Alpha Five help is all new! Its unique design is groundbreaking just like the other
Alpha attributes. It puts the extraordinary number of help topics and videos at your fingertips.

CHAPTER 4. QUESTIONS & ANSWERS

What youll find here

Topic

Page

How the material is organized

107

Understanding the Documentation Viewer (DV)

107

Getting off to a strong start

108

Display and navigation

108

Searching for topic pages

110

Saving page references

113

Taking Notes

114

Printing topics

115

Updating the documentation

116

Window style

117

Restoring open pages

117

Sending feedback

117

Using the Video Finder

117

Filtering

118

Search Syntax

118

Category links

118

Search results

119

History lesson: You may come across pages in the documentation marked, Enterprise Edition only.
Alpha Five V7 sold with (Enterprise) and without web workspace access. Alpha Anywhere (Alpha Five
V12) comes with all features so you can ignore this message.
Missing code: You may not be able to see the examples given for code on some pages. If that is the
case, click the page link at the bottom to view the page in the Wiki.
ADO has been replaced by AlphaDAO. Grids using ADO do not have AJAX capability. Supported for
backwards capability only.

Reprinted from Alpha Five Help! by Susan Hussey Bush, Liberty Manuals Co., Oakhurst, NJ, 2012

106

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

How the material is organized

Being able to get assistance as you work is essential to using any feature laden program like Alpha Anywhere. The good news is that there is so much documentation. The
bad news is that there is so much documentation because the sheer volume can be overwhelming.
Fortunately, the Documentation Viewer (DV) and Video Finder (VF) will get you
where you want to be. These are both opened within Alpha Anywhere.
You can:
Add notes to any topic.
Print a single page or multiple pages to a PDF document.
Save to lists.
Search for topics by title, full text and multiple criteria.
Update topic pages with the click of a button.
And. Much of the help system can be used without an Internet connection. That means
you can keep working on an airplane or other non-Internet location. There are two
exceptions, however:
DV: Images do require an Internet connection at first, but are cached locally
once a topic has been viewed.*
VF: You will need an Internet connection to view the videos.
WHAT IS THE WIKI?

If you are new to Alpha Anywhere, you may have heard references to the Wiki.
That is the nickname of Alpha Anywheres on-line help system, also called Alphapedia.
We caution you that it can be a bit tricky to use.
But. Not to worry. The Documentation Viewer and Video Finder will find all the references seamlessly and you wont even have to leave the Alpha Anywhere environment.
So, just think of the Wiki as the engine of the car. Its there, but all you need to know
about starting it is how to turn the key (or push the button), take it out of park and step
on the gas. Thats Job 1 for this chapter.
The Documentation and Videos buttons are on the main toolbar and are available at
either the Web Projects Control Panel or the Control Panel.

Understanding the Documentation Viewer (DV)

The Documentation Viewer and Video Finder are separate systems. Since there are
so many documents on so many topics, it has a more complex structure.

*. See Image display on page 108.

. As we go to press, the Videos button is not in the latest software update, so you may not be able to see it. If that is the case, go to Top
Menu > Help > Video Finder. We have been advised that the button will appear in the next release. SHB 10.5.2012

107

CHAPTER 4. QUESTIONS & ANSWERS

Understanding the Documentation Viewer (DV)

Getting off to a strong start

We recommend you watch the following videos to learn how to use the Documentation Viewer. Our notes will be available for a quick refresher, but they depend on your
having watched the videos. It will be 20 minutes well spent promise!*

1. Open Alpha Anywhere.

2. Click the Documentation button on the main toolbar.
Once it opens, the DV has its own toolbar (shown below in two sections).

3. Click How to use the Documentation Viewer (far right).

The Documentation Viewer page opens. It gives a list of the features and
has 4 videos. You may need to scroll down to find them.
Video Part 1: Overview, Navigating, Filtering.
Video Part 2: Filtering (cont), Saving Lists, MDI & Modeless views,
Properties.
Video Part 3: Synchronize with 2 monitors, Browser-like experience,
Links to Wiki, Printing to PDF.
Video Part 4: Favorites, Annotating help documents (Notes).
Now that you have watched the videos, you know how the system works so please
read over the rest of this chapter. You can come back here for the settings as you
need them.
And. We have included additional information that you will find valuable.

Display and navigation

IMAGE DISPLAY

We mentioned earlier that the DV can be used without an Internet connection. This is
true for the most part. One exception is that, the first time a page is displayed, an Internet connection is required in order to see the images.
Once the page has been displayed with an Internet connection, the images are
downloaded from the server and cached locally. Therefore, the next time that particular page is opened, the images will be displayed even when you are not on-line.

ENLARGING THE VIEWING

AREA

There are two ways to give more room on the screen.

Width: Do this give more width to the topic pages:
Click the Show/hide Selector button on the toolbar to close the left
panel.
Height: If you have a document or list that is very long, it can sometimes be
difficult to see the bottom of the scroll bar. Solution: Close the tabs at the
bottom of the window.
Top Menu > View: Turn off Window Bar.

*. Sorry if I sound like your mother here - but, you gotta to do your homework - now! SHB

108

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

OPENING PAGES

Topic pages are opened by selecting an item from the left pane.
One click open: Each time you select a topic in the list, its page is opened
in the right pane.
Viewing open pages: When
you have a lot of pages open,
do the following:
a. Click

the arrow at the

right side of the tabs for
a list (red circle).

b. Select
c. Click

the page.

OK.

One page is always open. The system requires that at least one page be
open at all times. To close unwanted pages, see Closing pages below.
NAVIGATING

As you saw in the video, it is easy to get around using the back, next, up and down
arrows.
Back and next arrows: Moves back and forth between pages.
Up and down arrows: Moves up and down on the list.
When you use these to move to a new topic in the list, the page is also
opened. Handy for opening a group of pages that are listed sequentially.

CLOSING PAGES

You can close an individual topic page or several at a time.

Closing selected pages: When you have a lot of pages open, do the following:
a. Click

the arrow at the right side of the tabs for a list (red circle
above).

b. Select
c. Click

the pages you would like to close.

Close selected topics.

Closing a single page.

a. Right

click on the tab and

choose Close this Tab.

Closing all except current page:

b. Select
c. Right

BREADCRUMBS

the page you want to keep open.

click on the tab and choose Close all but this tab.

Breadcrumbs show where the page is located within the Alpha Anywhere Wiki
structure. By default, you will find them at the top of the topic page as below. You may
turn them off or have them appear elsewhere, if you like.
We recommend you keep them on, at least in the beginning, because they can be
handy for navigating upwards in the structure. In the example below, you could click on
References or Functions for additional references.
We suggest you experiment. Sometimes the links are useful, other times not.

109

CHAPTER 4. QUESTIONS & ANSWERS

Understanding the Documentation Viewer (DV)

a. Preferences

> Show topic path:

Yes or No.
b. Preferences

> Topic path position: Choose: Above, Below or

Above and Below.

Searching for topic pages

There are several ways to find documents. You can search by page title, by text in the
topic, or use multiple criteria. Other aids include the Table of Contents and Search
Results tabs. If you have a second monitor, you will be interested in synchronized
searching. We have also included notes on using help inside the Expression Builder.
FILTER BY TITLE

Finds all occurrences in the document title.

a. Type:

Choose Filter (red circle below).

b. Enter

trim in the filter box.

c. Select

TRIM Function.

Trim() will not return any

results because the title of the
page is TRIM Function (pink), not
TRIM() as you might think.
Now, lets see what happens when we change to full text search.
FULL TEXT SEARCH

Finds every occurrence of the entry full or partial word, highlighted in red.
When you select Full text search, a Go button appears.
a. Type:

Click Full text search (gold

arrow).
b. Click

Go (red circle).

Alpha Anywhere automatically opens

the Search Results tab.
Returns 204 pages.
c. Select a document and scroll to see the
highlighted text.

MULTIPLE SEARCH
CRITERIA

Finds instances of up to five designations. Results are shown in the Search Results
tab as above.
Wildcards * and ? are permitted, such as SQL*Select*Statement (finds only
records with all entries).
Found text is highlighted in red as above.

110

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

a. Click

the Search button on the toolbar.

b. Enter

trim and cdate in the first two boxes.

The expression is returned at the bottom of the

window (pink).
Finds documents that contain both criteria.
c. Click

OK.

The search begins immediately.

13 documents are returned at the Search
Results tab (inset).
d. Click

Search again.

e. Enter

trim or cdate. (Click OK)

Click And and change to Or.

Finds documents that have either trim or cdate.
This time 213 documents are returned.
f.

Inspect a few to see how selections were made.

Now would be a good time to experiment with some more searches so you get a
good sense of how everything works. Will save you time down the road.
TABLE OF CONTENTS TAB

The Table of Contents tab shows the search criteria in a tree format. We entered grid
component in the Filter to get the result below.
Drilling down the various sections, opens the page references.
The TOC can be useful for finding topics in a very long list.
When a topic is selected in the TOC, the selection is refelected in the Topic
List (inset) and vice versa.

SEARCH RESULTS TAB

Each time you do a Full text or Multiple criteria search, the results are displayed in
the Search Results tab.
When you first open the DV, there is no Search tab.

111

CHAPTER 4. QUESTIONS & ANSWERS

Understanding the Documentation Viewer (DV)

When you do a Full text search or use the Search button for multiple criteria, the tab is automatically opened and the results displayed.
Each new search replaces the previous one.
When you close the DV, the search contents are cleared.
SYNCHRONIZED SEARCH

Video #3 explains Synchronized Searches very well so well save a few trees and
skip it here except to note that, if you are in the process of learning Xbasic and/or are
serious about writing code and dont yet have a second monitor, this just might be the
time to get one.
a. To

turn it on, click Preferences on the toolbar.

b. Synchronize

help on current function: Yes.

Default = No.
FUNCTION HELP IN THE
EXPRESSION BUILDER

When writing expressions in the builder, you can get function help by pressing F1 or
clicking Help on Current Function. This will bring up the Documentation Viewer
page. If you only have one monitor, you will need to close the page before continuing
with the expression.
Heres a work around for keeping the page open.
a. At the Expression Builder, place the cursor in
the middle of the Function (upper).

The full function, complete with the opening

parenthesis, needs to be entered in order for
this to work. Just begin typing and pick it from
the suggestions.
b. Click the Help on Current Function button or
press F1.

HOW EB HELP WORKS

The Expression Builder is opened in a modal

window. That means you cant move to another
window when it is open. When you go to help
from within the EB, the Documentation Viewer
opens in yet another modal window that must be
closed in order to continue.
KEEPING FUNCTION HELP OPEN

If you would like to keep Function Help open

while you continue to work in the Expression
Builder:
c. Click the link at the bottom of the DV page
(yellow) to open the document in the Wiki.

You can then work back and forth between

Alpha Anywhere and the page in the Wiki.

112

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

Saving page references

You can save page references so you can return to them quickly. There are two ways,
Favorites and Lists. The first is a simple listing of pages, the latter groups multiple
pages.
FAVORITES

Its quick and easy to save your frequently used topics in Favorites. At this writing,
topics are added in the order saved most recent at the bottom and there is no way to
group or alphabetize them, so a long list could become unwieldy. Keep Favorites short
and use Lists (below) for more lengthy topics.
a. Filter:

Enter trim.

5 topics are returned.

b. Select

a topic in the list: Right click >

Add to Favorites.

c. Go to the Favorites tab to see the entry

(green).

LISTS

Lists are great for saving groups of pages. The important thing to remember is that
they save the open pages not items in the Topic List (see screen shot below).
a. Filter:

Enter trim.

5 topics are returned.

b. Click

the last topic in the list.

c. Right

click on the Trim page and select Close all but this tab.
SAVING
a. Click Save the current list of
open topics on the toolbar (red
circle).

RETRIEVING

a. Click

b. Name

of list: Trim.

c. Click

OK.

Open a previously saved list of topics (red circle).

b. Select

Trim.

Note that Topics in List contains only the open page (inset above).
ADDING PAGES

Pages can be added to a list. This operation overwrites the existing list. In order to
add pages, you need to open the original list first.
a. Click

Open a previously saved list of topics.

b. Name

of list: Choose the List. (Click OK)

The original pages in the list are now open in the right pane.
c. Open

the new pages you want to add.

d. Click

Open a previously saved list of topics again.

e. Name

of list: Choose the List.

113

CHAPTER 4. QUESTIONS & ANSWERS

Understanding the Documentation Viewer (DV)

f.

Click OK.
Alpha Anywhere recognizes that you have changed the list and
asks if you want to overwrite.

g. Overwrite
DELETING PAGES

existing list? Click OK.

Pages can be deleted in the following manner.

a. Click

Open a previously saved list of topics.

b. Name

of list: Choose the List.

c. Click

Edit List at bottom of dialog.

d. Delete
e. Click

the pages you want to remove.

OK twice.

Taking Notes
Notes are well described in Video #4. Here are the settings and some additional
thoughts.
ADD NOTE TO EXISTING
PAGE

You can annotate any page. Depending on where you have located the notes, these
may or may not be shared with a work group (see Notes directory on page 115).
a. Enter

trim in the Filter box.

b. Select
c. Click

TRIM Function.

Notes on the toolbar.

d. Choose

Add / Edit notes for this topic.

e. Enter: The Trim function is good, but Alltrim is better. Add your initials and the date.
f. Click

OK.

A User Notes link is added to the top right of

the page (aqua).
g. Click

User Notes.

Jumps to the notes at the bottom of the page (yellow above).

CUSTOM TOPICS

You can create your own topic pages. They can be found as any other
you close and reopen the Documentation Viewer.
a. Click

HINT!

Notes on the toolbar (screen shot above).

b. Choose

Add a custom topic.

c. Specify

the name of the topic: MyCustomTopic.

Choose a naming convention for these pages in advance. For example, start them all
with My. It will help you locate them later. You could also add them to the Favorites
tab or create a List for them.
d. Enter

RETRIEVE

114

AFTER

your information in text or HTML format. (Click OK)

Do the following to retrieve the page:

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

a. Close the Documentation Viewer and reopen.

b. Filter:

Enter the topic

name: MyCustomTopic.
The page is found and
identified as a User Topic
(red circle and yellow highlight).

EDIT

There are two ways to edit custom topics.

Topic page: Click Add note (gold arrow above).
Toolbar: Click Notes > Manage Notes > Edit Note (screen shot below).
After you create the custom topic, a new item is added to
the Notes menu.

DELETE

a. Click

Notes > Delete topic.

b. Confirm

NOTES DIRECTORY

deletion.

To identify and/or change the directory where the Notes are stored, go to:
a. Preferences
b. Choose

> Table for user notes: Click to Define.

SQL or DBF.

c. Complete

dialog as indicated.

Be sure to read notes about sharing across the workspace and/or

creating tables.

Printing topics
Printing is done to a PDF file which you can then print out if you like. You can print
a single page or combine multiple pages into a book.
SINGLE PAGE

a. Select

the page you want to print from the right pane.

b. Click

Print on the toolbar.

If only one page is open, printing will begin immediately.

If more than one page is open:
c. Click

Print > Print current topic.

PDF document will be opened in Adobe

Acrobat.
MULTIPLE PAGES

Printing multiple pages will result in a PDF document with a Table of Contents and
Bookmarks.
a. Open

the pages you want to print.

b. Click

Print > Print selected topics (screen shot above).

115

CHAPTER 4. QUESTIONS & ANSWERS

Understanding the Documentation Viewer (DV)

c. Choose the topics individually or use the hyperlinks at the

bottom of the dialog to do one of the following:

Select All, Un-select All, Wildcard Select.

d. Click

Wildcard Select to see how it works.

e. Click

Select All. (Click OK)

f. Click

OK.

Documents are printed in alphabetical order.

The PDF document is opened.
Note it has been saved as an a5_temp file (top of
window).
g. File

> Save As: Rename and save in desired loca-

tion.

Updating the documentation

From time to time, the folks at Alpha update or add pages and remove outdated
material, so you should refresh your local content periodically. Theres a reminder for
that.
REFRESH ALL TOPICS

Refreshing all the topics takes only a few moments.

a. Click

Refresh help topics on the toolbar.

Alpha Anywhere checks the server for
revisions and returns a notice of the action
taken. In this case, our topics were all up to
date.
b. Click

OK.

You are then notified that the DV will be closed and reopened.
c. Click

REFRESH A SINGLE TOPIC

SETTING A REMINDER

OK.

You can refresh a single page, if you like.

a. Topic

List: Select the page.

b. Right

click > Refresh topic from server.

You can have Alpha Anywhere remind you to refresh topics when you open the DV.
a. Preferences

> Display reminder to refresh documentation every:

Enter number of days.
Default - 14 days.

116

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

Window style
You can have the window appear as MDI or Modeless. This is well illustrated in
Video #3.
MDI allows you to move from window to window. Recommended for use
with single monitor. Default.
Modeless means that you are locked in the window until it is dismissed.
Good for users with dual monitors.
The setting is located at:
a. Preferences

> Window style.

Restoring open pages

You can specify whether or not you want Alpha Anywhere to restore the most
recently used tabs upon opening the DV. You can also set the maximum number of tabs
to restore.
The setting is located at:
a. Preferences

> Restore tabs on startup: Choose Yes or No.

b. Preferences

> Maximum number of tabs to store: Enter number.

Default = 20.

Sending feedback
There is a button at the bottom of each document that will open a window where you
can submit comments on the topic directly to Alpha Software.
a. Select

the document, scroll to the bottom and click Send Feedback.

b. Enter

notes, your email, etc.

c. Click

Send Feedback.

A Notice is returned with an ID number.

d. Make
NOTE

note of the ID number for future reference. (Click OK)

This feature is not available if you add notes (page 114) to the topic page.

Using the Video Finder

After all that work on the Documentation Viewer, this section is going to be a piece
of cake!
Alpha Anywhere has a wealth of videos, most of which are for the web side. They
are easy to follow and you will find them extremely helpful. Each is identified by Number, Category (title) and Description. Some of the numbers have prefixes, as M1 below.
Others do not. Some were created for earlier versions, but are still applicable.

1. Open Alpha Anywhere and click Videos on the main toolbar.

117

CHAPTER 4. QUESTIONS & ANSWERS

Using the Video Finder

Available at Web Projects Control Panel and Control Panel.

Filtering
At its most basic, filters are defined by making entries into the Filter box. There are
ways to narrow the search, however.
Use the Search Syntax.
Choose from the Quick Links to Categories listing.
Choose a Category from the drop down list.
SEARCH SYNTAX

The Search Syntax is handy at all times. Just click the link (screen shot below):
To find multiple search phrases, combine them with the double && or | | operator
(pipe symbol). No spaces between words / symbols.
Find all videos that have the word grid and component:
Filter: Enter grid&&component
Find all videos that have the word grid or component:
Filter: Enter grid||component

CATEGORY LINKS

You can narrow filter entries by selecting from the Quick Links to Categories or the
Category drop down list. The lists are different and subject to change at any time.
If there is no entry in the filter box, the links jump to
the topic selected.
CATEGORY QUICK LINKS
a. Click +/- next to Quick Links to Categories (red
circle).

Toggles list open and closed.

Acts as additional filter.
b. Filter:

Enter overview.

c. Select some of the Categories to narrow the list.

(Not all will have entries.)

118

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

d. Category: Click the drop down box (gold

arrow).

This list contains some of the same topics as

the Quick Links above, but some are different.
It is also longer (we cropped it due to space
considerations).
It works the same way, narrowing the selection in the Filter box.
e. Experiment a bit. Again, not all will have
entries.

SEARCH RESULTS
REFRESHING

The number of videos found is listed to the right of the Category list (purple above).
Just as with the DV, you will need to refresh the video content from time to time.
There isnt a separate reminder for this, so we suggest refresh each time you open the
Video Finder. The button is at the upper left of the screen (green check above);
Can you believe thats all there is to Video Finder? Were done!

Getting More Info

As you put it into use, you will discover that Alpha Anywhere has huge libraries of
free documentation and videos.
And. There are some more that you should know about. Some of these are free and others are well worth the additional cost. They are available at www.Alphasoftware.com
and/or www.LibertyManuals.com.

Videos and general information

AlphaSoftware.com > Support has a large selection of videos and other resources.

119

CHAPTER 4. QUESTIONS & ANSWERS

Getting More Info

Learning Alpha Anywhere for Web & Mobile

There are books and videos that will speed you on the way to great web applications.
Alpha Five Web & Mobile Made Easy, The Basics and More for V12 Volume 1 by Susan Hussey Bush. This step-by-step manual guides
you through learning Alpha Five on the web.
Comes in Hard Copy, CD and Electronic Download Edition.
You get a free Electronic Download Edition with your purchase of Alpha Anywhere.
Available at www.LibertyManuals.com.
Volume 2 currently in production.

Creating Reports
There is no need for a separate report writer because full capability is built-in to
Alpha Anywhere. Add reports to your web/mobile project so everything is in one place.
Alpha Anywhere Report Writer, Reporting and Charting Made Easy
(v12)
Comes in Hard Copy, CD and Electronic Download Edition.
The perfect companion to the above book.
Available at www.LibertyManuals.com.

Using and Finding Functions

You do not have to know Xbasic or other programming languages in order to use
Alpha Anywhere, but you to need to know Functions and how to use them in Expressions.
Alpha Anywhere Functions Directory, Finding Functions & Methods
Made Easy (V5-12).
All functions sorted them into categories and identified which
can be used for Desktop, Web and/or Mobile.
Available at www.LibertyManuals.com
Advanced.
Alpha Five Functions Made Easy, Functions and Expressions Made
Easy (V5 & later). Explains over 200 of the most common functions
and shows how to use them in expressions.
Suitable for web, mobile and desktop.
Comes in Hard Copy, CD and Electronic Download Edition.
Available at www.LibertyManuals.com
Beginner & Intermediate.

Learning Xbasic
Xbasic is used for server-side programming. Most of you programmers will come to
Alpha Anywhere knowing Microsoft Visual Basic. As a result, the transition to Xbasic

120

ALPHA FIVE QUICK START GUIDE

Version 11 Web Applications

should be an easy one. These guides will show you how to learn this more powerful programming language that has been developed specifically for Alpha Anywhere.
Alpha Anywhere Xbasic Workbook by Dr. Peter Wayne. (V8 and
later).
Comes in Hard Copy, CD and Electronic Download Edition.
Explains how to use Stored Procedures.
Available at www.LibertyManuals.com.
Alpha Anywhere Xbasic Toolbox, Writing Code Made Easy (V11 and
later).
Comes in Hard Copy, CD and Electronic Download Edition.
Learn how to use the many tools that make programming
easier and faster.
Explains the Debugger and AJAX callbacks.
Available at www.LibertyManuals.com.

Learning Alpha Anywhere for the Desktop

You can also use many types of web components in desktop (local or networked)
applications. SQL or DBF files.
Alpha Anywhere Made Easy, The Basics and More for the Desktop
(V12) by Susan Hussey Bush. In addition to teaching how to develop
an Alpha Anywhere database, this book shows how to connect to
SQL data with Active- and Passive Link Tables.
Comes in Hard Copy, CD and Electronic Download Edition.
Available at www.LibertyManuals.com.
Enhance Your Desktop App! More Alpha Five Features Made Easy
(V11).
Comes in Hard Copy, CD and Electronic Download Edition.
Available at www.LibertyManuals.com.

121

CHAPTER 4. QUESTIONS & ANSWERS

Notes:

122

Chapter 5.

Dazzling Design!

Now its time to make your design pop

By adding all those custom elements that you demand for superlative web and mobile
applications. No matter who you are newbie or pro or somewhere in the middle, Alpha Anywhere has builders you can use.
And, if you are a professional developer, Alpha Anywhere lets you apply your code writing
skills wherever you like!

CHAPTER 5. DAZZLING DESIGN!

What youll find here

What youll find here

We cover an interesting range of topics in this chapter.
Topic

Page

Understanding Alpha Anywhere Security

125

Understanding the Client / Server model

126

Learning Xbasic

127

Builders when and where you need them

128

SQL Select Statement, Query and Stored Procedure

128

Action JavaScript, JavaScript and jQuery

130

CSS Style Builder

132

JSON

132

The following sections in this chapter have been reprinted from Alpha Anywhere Web & Mobile Made Easy,
The Basics and More for Version 12 by Susan Hussey Bush, Liberty Manuals Company, 2013.
Understanding Alpha Five Security (page 125).
Understanding the Client / Server Model (page 126).

124

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

Heres where we prove that Alpha Anywhere is the

leader in time and design
Now that youve had a chance to experience first hand the how Alpha Anywhere
will save you time, its time to show its serious side.
In this chapter, well touch on some issues that we know concern you, such as
Security. Well also clear up any confusion you might have about the difference
between server-side and client-side.
Then it starts to get a bit technical. We will review the basics of Xbasic and give
references so that those of you who are so inclined can learn Alpha Anywheres
server-side programming language. Then we move on to some of Alpha Anywheres Builders.
Some sections are of importance to users of all levels, Security, ClientServer Model, SQL command builders and Action Javascript.
The final comments are strictly for the pros. By now, we hope you are convinced that you can edit code at will. These notes will give you an idea of programming languages that you can use.
If you are still on the fence after all that, go on the Message Board and look at the
strong interaction between users. This Board is as informative as it gets and its
contributors are as helpful as it gets.
www.AlphaSoftware.com > Support > Message Forums.

Understanding Alpha Anywhere Security

NOTE

Security is fully detailed in the free book that comes with your purchase of Alpha
Anywhere. Our purpose here is to explain the development principles.
You only have to know one thing well, maybe two things. Alpha Anywhere Security is extensive and rock solid. You can use it to govern access to individual components or pages and/or the entire project.
OK we know you want to know a bit more than that! The following description of
how the system is implemented is from the transcript of an interview of Jerry Brightbill,
Senior Developer and Architect at Alpha Software, Inc., by Alan Ashendorf, host of the
Lets Talk Computers radio talk show.

FOR OUR PROGRAMMING

FRIENDS

Because it was built into the Server System, every page, every file requestand
that includes JavaScript files, CSS (Cascading Style Sheets) files, imagesall of them
are checked against the Security. When Security is checked, a couple of things are
loaded into memory from the server.
We load a list of all the pages that are available.
We load in all the Security for those pages.
We can set Security for each page or we can set Security by File Type. For instance,
we can allow all JavaScript files. What happens when a page request comes in, if
you have a page that has JavaScript, Style Sheets, or images, every single one of
those components is checked against that Security.
And because it is built into the Server System, there is no way to get around it.

125

CHAPTER 5. DAZZLING DESIGN!

Understanding the Client / Server model

So, every File Request that comes in is checked against the Security, automatically,
in the background.
FOR THE REST OF US

The Security System in the server is already built into the server; that's automatic.
It's turned on and off by [two simple check boxes]. *
All the supporting code is pre-written so that it doesn't require the user to write anything.

In fact, to apply security is very simple.

SIMPLE STEPS FOR EVERYONE

The Security Framework is based on establishing Users and Groups, their permissions and passwords. Then each page is defined as Denied, Always Allowed or Login
Required. The Framework checks each page for its requirements. When a Login is
required, the user is automatically directed to the login page. User ID and password
(optional) parameters are entered and the project page is pulled up only by authorized
users.
Whats that? you say. So easy, even a non-programmer can do it? No surprise,
I say,

After all, this is Alpha Anywherewhat did you

expect?

Understanding the Client / Server model

Client/server describes the relationship between two
computer programs in which one program, the client
[your browser], makes a service request from another
program, the server [your database files], which fulfills
the request.
Understanding this concept is important. As in any
field, the terminology is key. Dont confuse this relationship with server hardware. In this case, we are talking
about software programs. The client is your browser and
the server is the database. Both are software products.
When you think of it that way, you can begin to see why
HTML and JavaScript are required for the translation.
Although the client/server idea can be used by programs within a single computer,
it is a more important idea in a network. In a network, the client/server model provides a

*. In his transcript, Jerry actually said It's turned on and off by one simple check box. Technically, that is true once security is
enabled, you only have to check or uncheck Web Projects Control Panel > Web Security > Web Security Configuration > Security
Active. But, in order for it to work in the first place, the Security Framework must also be enabled (Top Menu > Web > Application
Server).
. Brightbill, Jerry; http://www.alphasoftware.com/press/letstalkcomputers/alphafivewebsecurity.asp. December 30, 2006. You can
also Google Alpha Five Version 8: Web Security FrameworkRight From the Start. We recommend everyone read the full text of
this excellent review of Alpha Anywhere web and mobile security.
Bullets and other formatting added. SHB

126

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

convenient way to interconnect programs that are distributed efficiently across different
locations.
CHECK YOUR BANK BALANCE 2 ROUND TRIPS

Computer transactions using the client/server model are very common. For example, to check your bank account from your computer, a client program in your computer
forwards your request to a server program at the bank. That program may in turn forward the request to its own client program that sends a request to a database server at
another bank computer to retrieve your account balance. The balance is returned back to
the bank data client, which in turn serves it back to the client in your personal computer,
which displays the information for you.

CENTRAL IDEA IN NETWORK

COMPUTING

The client/server model has become one of the central ideas of network computing.
Most business applications being written today use [this] model.

MANY CLIENTS - ONE SERVER

In the usual client/server model, one server, sometimes called a daemon, is activated and awaits client requests. Typically, multiple client programs share the services
of a common server program. Both client programs and server programs are often part
of a larger program or application.

WEB BROWSER IS CLIENT

PROGRAM

Relative to the Internet, your Web browser is a client program that requests services
(the sending of Web pages or files) from a Web server (which technically is called a
Hypertext Transport Protocol or HTTP server) in another computer somewhere on the
Internet.*

Learning Xbasic
Xbasic is Alpha Anywheres programming language for the Server-side. It is quite
similar to Microsoft's Visual Basic and shares many of its language elements and functions, however, Xbasic has many additional and different features. Many commonplace tasks that would take many lines of code in another language take only a single
line of Xbasic.
Xbasic is a derivative of the original BASIC programming language. The core of
Xbasic contains the original set of command statements that allowed you to create variables, do calculations, write to the screen, print, and much more. Xbasic has expanded
far beyond the original BASIC core language to include thousands of functions and
methods that make the process of working with tables, records and reports much easier and the development of applications much faster.
The beginning programmer may want to take a side trip to go through the Learning Xbasic tutorial (see Go to A5 Help below). It will help you understand many of the
fundamental concepts of the Alpha Anywhere environment.
The more advanced programmer will find that the Alpha Anywhere Help has a tremendous amount of reference material and working examples that can be copied and
modified. You will also find a very supportive and helpful developer community
eager to answer your questions at the Alpha Anywhere Message Board.
*. Client/Server definition: SearchNetworking.com; http://searchnetworking.techtarget.com/sDefinition/0,,sid7_gci211796,00.html,
Jan. 23, 2008.
. Alpha Anywhere Documentation: Table of Contents > Tutorials > Learning Xbasic: Introduction Learning Xbasic. References to
Alpha Five changed to Alpha Anywhere. SHB

127

CHAPTER 5. DAZZLING DESIGN!

Builders when and where you need them

There is a wealth of information about Xbasic, including a tutorial. If you are new to
Xbasic, we recommend you start here:

GO TO A5 HELP

GENERAL
TUTORIAL & REFERENCES

Documentation > Filter: Enter Understanding the Programming Process.

Documentation > Filter: Enter Clear out all entries.
a. Click

the Table of Contents tab.

b. Tutorials:

A5W PAGES

Learning Xbasic.

c. References:

Functions.

d. References:

Methods.

e. References:

Xbasic.

These pages give information for using Xbasic on A5W Pages:

Documentation > Filter: Enter A5W Page. There are several pages, including:
How pages are rendered. Shows how and where to place Xbasic on an
A5W page.
Using Functions on A5W pages. How and where to place Xbasic functions

FUNCTIONS

There are an almost infinite number of pages on functions. Most are for advanced
users. All users should be familiar with those on the first page listed below.
Documentation > Filter: Enter the following pages.
Core Functions for Writing Expressions. For all users, even non-programmers.
Web Application Functions. Web functions and links to syntax.
Advanced.

LIBRARY (.AEX) FILE

How to save frequently used scripts and functions for future use.
Documentation > Filter: Enter Compiling Scripts and Functions.

BOOKS AND VIDEOS

ON XBASIC AND FUNCTIONS
GO TO A5 VIDEO

See Getting More Info on page 119.

There are several videos, most of which are for advanced users.
Videos > Filter: Enter Xbasic. Look over the selection. Includes:
M57. Debugging Server-side Xbasic in Web Applications - Live Preview.

Builders when and where you need them

One of Alpha Anywheres strongest features is its wide assortment of builders. We
have used the Grid Component Builder and the Image Gallery Builder. There is also a
complte set for development tools. This means you do not have to leave the Alpha Anywhere environment to write SQL Select Statements, build Queries and/or Stored Procedures. There is also a CSS Style Builder.

SQL Select Statement, Query and Stored Procedure

The easiest place to check out these builders is in a new Grid Component.

128

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

a. WPCP:

Create a new Grid Component.

b. Component

type: Accept default.

c. Data

Source: SQL Database

d. Query

(AlphaDAO): Choose the connection string and click Connect.

e. Base

on: Choose SQL Select Statement.

f. Click

Edit SQL in Query

SQL QUERY BUILDER

The procedure is quite straight forward. Add one or more tables and
then choose the Columns (fields),
Filter and/or Order.
STORED PROCEDURE

Read the Important note at the bottom of the dialog before proceeding.

You will find entries for SQL, SQL Query and Stored Procedure.

GO TO A5 HELP & VIDEO

SQL

Alpha Anywhere is fully integrated with SQL databases.

Documentation > Filter: Enter SQL.
There are so many entries that you may wish to narrow the search by
expanding on the filter.
Click the Table of Contents tab and examine the entries that way, too.
Videos > Filter: Enter SQL.

SQL QUERY

There are quite a few entries, mostly for Functions and Methods.
Documentation > Filter: Enter sql query.
a. Click

the Table of Contents tab.

b. References:

Grid, Functions, Methods.

Ignore references to ADO. Has been replaced by Alpha DAO.

SQL STORED PROCEDURE

To learn about Stored Procedures, go to:

Documentation > Filter: Enter Stored Procedure. Several pages, including:
Calling SQL Stored Procedures. Describes benefits. To see the sample
code, view the page in the Wiki (link at bottom of page).
Custom SQL Select Statement or Stored Procedure. Describes process.*
Videos > Filter: Enter Stored Procedures.

129

CHAPTER 5. DAZZLING DESIGN!

Builders when and where you need them

78. Customizing SQL Insert, Update and Delete Statements - Using

Stored Procedures to Update your Database.

Action JavaScript, JavaScript and jQuery

JavaScript is used for client-side actions. You can write your own code and/or take
advantage of Alpha Anywheres Action Javascript. Alpha Anywhere is also integrated
with jQuery Javascript Libraries.
Action Javascript is pre-defined code for common actions. For example, if you want
to open another grid, you can create a button that will do so. The easiest place to see the
builder is at Grid > Fields. Because this is such a powerful feature, were going to give a
quick example no screen shots except for the result.
Action JavaScript is suitable for users of all levels. No programming skills
required.
When the user clicks on a State cell in the grid, another grid will open that is filtered
on the first.

SCENARIO

1. WPCP > Web Components: Double click on MyPopUpFadeRemote to

open in Edit mode.
2. Go to Grid > Fields.
JAVASCRIPT

PROPERTIES: <BILL_STATE_REGION>
onClick: Click the button.
Dialog: Edit onClick Event

a. Choose
b. Click

Action Javascript.

Add New Action.

Dialog: Action Javascript: Select an Action

c. Choose

All Actions > Open a Grid

Component. (Click OK)
Dialog: Open a Grid Component

d. Grid

name: Click the button.

Dialog: Open Grid Genie

e. Grid

name: Click Select.

Dialog: Select Grid

f. Choose

TreeNavigator. (Click OK)

Dialog: Open Grid Genie

g. Link:

Yes.

h. Textbox:

Click the down arrow.

Dialog: Define Link Values

i. Click

Add Field.

Dialog: Specify Link Mapping

j. Field

Customer ID (N) is filled in with

{Customer ID}.

*. This page mentions that an Enterprise License is required. Alpha Five V7 sold with (Enterprise) and without web workspace
access. Alpha Anywhere (v12) comes with all features, so you can ignore this message.

130

ALPHA ANYWHERE QUICK START GUIDE

Version 12 Web & Mobile Applications

ADVANCED USERS

To learn how to set the link value to the result of a function call, click Calling a
Javascript function to set a link value.
k. Click

OK (4 times).

Dialog: Action Comment

l.

Enter Open TreeNavigator Grid Component. (Click OK)

m. Click

Save to save the Action Scripting.

3. Click Save again to save the component changes.

4. Go to Working Preview.
5. Click on a State field (red circle). (Be sure to single click a double
click will bring up the Detail View in this particular grid.)

Editing can be done by staying within the genie or with custom code.

EDITING

6. Return to Design mode.

7. Javascript
>
onClick: Click the
button.
To stay at the
Genie, click Edit
Action (green).
To view and/or
edit the code, click
View JavaScript
(pink). This dialog
provides access to
Declarations and
Call Back Function.
GO TO A5 HELP & VIDEO
ACTION JAVASCRIPT

8. Close the component and then learn more with the following:
There are lots of videos and documentation for this great feature.
Videos > Filter: Enter Action Javascript.
Scroll the list to get an idea of the available actions.
Documentation > Filter: Enter Action Javascript.
These entries are all worth examining. Remember, the v10 Feature Pack
for Lookups is included with your V11 software.

JAVASCRIPT

JavaScript is used for client-side commands. It has many, many entries, including
some reference sections.

131

CHAPTER 5. DAZZLING DESIGN!

Builders when and where you need them

Documentation > Filter: Enter javascript.

The Topic List shows all the entries. You can also look at them this way:
a. Click

Table of Contents tab.

b. Whats
c.

New in V11 and V10.

References: Functions, Grid, Javascript, Web,

Videos > Filter: Enter javascript.

Also brings up an extensive list that is worth looking over.
JQUERY

V11 is tightly integrated with the jQuery JavaScript Library.

Videos > Filter: Enter jQuery. There are several videos, including:
M19. Using jQuery controls in a Dialog or Grid Component.
Documentation > Filter: Enter jQuery. Entries include:
jQuery Support V11.

CSS Style Builder

The CSS Style Builder is opened at the Web Projects Control Panel.
a. Web
GO TO A5 HELP & VIDEO

Projects Control Panel: Click the button.

Documentation > Filter: Enter CSS. There are several pages, including:
New CSS Style Builder V11.
Videos > Filter: Enter CSS. Choose:
M35. Abstract CSS Class Names.

JSON
GO TO A5 VIDEO

These videos provide a detailed overview of consuming and processing the JSON
results from the Twitter Search API.
Videos > Filter: Enter JSON.
D40. Processing JSON data to display feeds from Twitter in Alpha Anywhere.
Also used in the Calendar Component.

Thank you!
For the opportunity to show you some of the fabulous features of Alpha Anywhere.
We hope this has given you an understanding of how the program works and of the
many ways you can tailor it to meet your needs.
If you have any questions or comments about Alpha Anywhere, please do not hesitate to contact Richard Rabins at: [email protected].
If you have questions or comments about this Quick Start Guide, please contact
Susan Bush at: [email protected].

To purchase Alpha Anywhere, please go to:

www.AlphaSoftware.com

132