Sie sind auf Seite 1von 449

Welcome to

by Susan Hussey Bush


About the book
Congratulations on your purchase of this Electronic Download Edition of Alpha Anywhere Web &
Mobile Made Easy, The Basics and More for 3.0 - Volume 1. We are confident you will find this step-bystep manual the quickest way to tap into the fabulous features of the Alpha Anywhere for use with web
and mobile applications. It contains 527 pages, including 492 pages of text and step-by-step exercises, a
Table of Contents and an Index.
The exercises are intended to be used with the companion databases that have been provided. (See
Installation below.
This electronic download version contains all the elements of the book. You will probably find it easier
to do the exercises with a print-out in front of you. All or any part of this electronic download version
may be printed out. It is also searchable.
We also offer a full-color spiral bound hard copy for your convenience. If you decide to purchase the
hard copy within 30 days, we will credit your purchase of the electronic download edition.

Liberty Manuals products


Alpha Anywhere books and CDs
We offer several combinations of hard copy and electronic versions of our
books. For more information and pricing, visit

www.LibertyManuals.com

Money Back Policy


Satisfaction 100% guaranteed. Notify us within 30 days for a full refund on
all products except the electronic download version of the book.

Important Notes
Important notes on the text
Please go to Getting Started on page xiv to begin the lessons. (See To go to a page in the text:
below for numbering conventions used in this file.)
Installing lesson files. You may disregard this section as the companion databases have already
been installed. When you opened the zip file for this electronic book and its companion databases, all were saved to your hard drive. The default location is
c:\Alpha_WebMobileBook_3.0_Volume1\ ABC_WebMobile_Lessons
What files are included? Describes the database and other files that are included.

Permissions
This book is copyrighted, therefore you are not permitted to make any changes to the document.
You are permitted to print the pages.

Installing on your mobile device


You can use this PDF book on your mobile device.
If your book includes an EPUB file, you will find it in the Mobile directory. Were far from experts on
this topic - you probably know more than we do about it - but heres how we placed the book on an
iPhone.
APPS WE USED:

We used DropBox* and iBooks, both are free. If you are new with DropBox, test a small file first to be
sure everything is working properly. Ours is a large file and will take a while to transfer.
TRANSFERRING THE FILE

1. Transfer the files from the computer to the mobile device.


We used the DropBox app to transfer the files from the computer to the mobile device.
You could also connect your computer to the device with a cable and transfer that way.
2. Open the DropBox folder on the computer.
3. Drag the file into DropBox.
This moves the file. We suggest you move it back when you are finished (see below).
*. DropBox is a registered trademark of DropBox, Inc.

The file transfer to the mobile device begins as soon as it hits the DropBox folder.

4. Open DropBox on the mobile device.


This is a large file, so it will take a while before you see it on your mobile device. Be patient, it
will appear!
OPENING THE FILE

5. Click the file when it appears.


A progress indicator will show the file being opened.
READING THE FILE

In the case of our iPhone, DropBox said it was unable to open the file. That is actually not the

case. You just need another app to do the reading part. In our test, we used iBooks.
6. Click the open in button.
The iPhone has an arrow in the lower right corner of the screen.
7. Choose Open in iBooks.
In a couple of seconds, the book will open.
The book is now stored on your mobile device and will stay there until you delete it.
MOVING THE FILE BACK

You no longer need the file on the mobile device. We recommend you return it to its original location
in case you need it in the future.
Do not delete it from DropBox folder on the mobile device because that will delete it from
the computer folder, also. That means you will no longer have the file!
8. Return to the DropBox folder on your computer.
9. Drag the file back to the A5_V11_WebAppsBook > Mobile directory.

To go to a page in the text:


The page numbers have been set up to match those of the book. This Welcome, as well as the front

and back covers have been set up with separate numbering. The numbering convention is as follows:
Welcome, front and back covers: Lower case letters, a, b, c, etc.
Introductory pages of the book: Roman numerals, i, ii, iii, etc.
Text pages of the book: Arabic numerals, 1, 2, 3, etc.
The current page is the left number in the navigation bar at the bottom of the page. (Outside the
parenthesis). For example, this is page c.
1. To go to a specific page, click in the entry box of the navigation bar.
2. Type the page number to which you want to go.
For example:
a will return you to the first page of Welcome.
f will take you to the back cover.
viii will take you to Getting Started.
1 will take you to the first page of Chapter 1.

Getfullcredit...

for the cost of this book!


ZebraHost, the premier recommended hosting service for Alpha Anywhere
web and mobile applications is making an offer you cant refuse:
As a purchaser of the Electronic Download Edition of this book,
you are entitled to a ZebraHost credit of $25!

ZebraHostservicesinclude:

Client & Server: One platform to build all parts of an application, client AND server.

Standards Based & Extensible: HTML5, CSS, JavaScript, Phone Gap, Web Services

Wide & Deep Functionality: Enterprise reporting, charting, mapping, video, images, sound,
scheduling, security and more.

Powerful Data Connectivity: Connects to data from all major SQL databases, stored
procedures and web services.

Mobile and Personal Computers: Once written, applications run anywhere.

Touch Enabled: Supports Touch Enabled User Experiences on devices as small as 4


inches and as large as 4 feet.

Flexible, Scalable Deployment: ZebraHost is Alpha Softwares recommended for scalable


load balanced Alpha applications.

Go to www.zebrahost.net for more information or call Clive today at 8777368616.

Coupon code: LMDL25*


*Onecouponpercustomer.Minimum3monthshostingservice.Creditappliedafter3rd
monthactiveservice.BookpurchasesubjecttoconfirmationbyLibertyManuals.
PurchasersofHardCopyareentitledto$65credit.Seeinsidecoverofbookforcoupon.
ZebraHostisrecommendedbyAlphaSoftware,Inc.www.alphasoftware.com>Support>Resources.

Volume

The Basics and More for 3.0 Volume 2


Step-by-step instructions
and handy references!

En
cl
os
ed

Susan Hussey Bush

Be sure to check out our other Alpha Anywhere books!


Alpha Anywhere Web & Mobile
Volume 1

Complete the set!


Volume 1 introduces
you to the basics of
web/mobile application development
and lots more! Learn
how best to use all the
components.

Alpha Anywhere Report Writer


Reporting and Charting Made Easy

A must have companion


for this book. No need for
additional report writing software. Its all included with
Alpha Anywhere. Learn how
to export reports to Excel and
how to create reports with
flexible layouts tailored to
your needs.

Learn Xbasic with these


Alpha Anywhere / Alpha Five books!
Xbasic Toolbox
Functions Directory
Xbasic Workbook
Functions Handbook

Xbasic will expand your ability to


customize all types of
Alpha Anywhere applications.
The Toolbox and Workbook will
teach you Xbasic. The Functions Directory and Handbook detail the functions
and their use.

All books available in Hard Copy


and Electronic Download Editions!

Alpha Anywhere also provides an


excellent desktop platform for use
with all file types!
Alpha Anywhere Made Easy
Enhance Your Desktop App!

Over 700 pages of step-by-step


exercises for learning the Alpha Anywhere desktop (database) program.

Available at www.LibertyManuals.com or call 1-732-842-3000

by Susan Hussey Bush

Liberty Manuals Company


1806 Route 35, Suite 104
Oakhurst, New Jersey
USA

Alpha Anywhere Web & Mobile Made Easy, The Basics and More for 3.0 - Volume 2
Published by
Liberty Manuals Co.
1806 Route 35, Suite 104
Oakhurst, NJ 07755
www. LibertyManuals.com
Copyright 2014 Susan Hussey Bush. All rights reserved. No part of this book, including interior design and cover
design, may be reproduced or transmitted in any form, by any means (electronic, photocopying, recording, or otherwise)
without the prior written permission of the publisher.
ISBN: Spiral Bound Hard Copy: 978-1-940069-08-1; Electronic Download Edition: 978-1-940069-09-8;
E-Pub edition: 978-1-940069-07-4
Printed in the United States of America.
10 9 8 7 6 5 4 3 1 First Printing.
Distributed by Liberty Manuals Company.
This manual has been designed for the use of authorized owners of Alpha Anywhere software. Alpha Anywhere and
Alpha Five are the registered trademarks of Alpha Software Inc. Liberty Manuals Company is a separate company and
has no connection with Alpha Software Inc.
Every effort has been made by the publisher and the author in preparing this book. No warranty is made as to the accuracy or completeness of the contents of this book. Liberty Manuals Company assumes no responsibility or liability for any
errors or inaccuracies that may appear in this documentation.
It is important to remember that artwork or images in this document may be protected by copyright law. Unauthorized
use of such material could be a violation of the rights of the copyright owner. Permission to use any part of this document
must be obtained from Liberty Manuals Company.
The Liberty Manuals logo is the property of Liberty Manuals Company. Get Outta DOS and GET INTO ALPHA
FIVE! seminars are the property of Susan H. Bush and Frances M. Peake. Alpha Anywhere, Alpha Five and Alpha
Software are the property of Alpha Software, Inc. Microsoft, Windows, MsDos, Excel, SQL Server, Front Page
and Access are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other
countries. Adobe Acrobat, Acrobat Reader, Adobe Framemaker and Dreamweaver are the property of Adobe Corporation. Oracle and OracleLite are the trademarks of the Oracle Corporation. Quick Books and QuickBooksonline are the trademarks of Intuit. MySQL is the trademark of Sun Microsystems. DB 2 is the trademark of the International Business Machines Corp. Sybase is the trademark of Sybase Worldwide. Cache is the trademark of the InterSystems Corporation. All other trademarks are the property of their respective owners. Google Chrome is the trademark
of Google Corporation.
For information on purchasing the books in the Alpha Anywhere and Alpha Five series, contact:
Liberty Manuals Company, 1806 Route 35, Suite 104, Oakhurst, NJ 07755, USA.
Tel: (732) 842-3000. Fax: (732) 741-5820.
Email and Website: info@LibertyManuals.com; www.LibertyManuals.com.

www.LibertyManuals.com

iv

Frances M. Peake, professional database developer, has this to say about


the Alpha Anywhere Made Easy books
Susan Bush and I met at the Alpha Five Developers Conference in December of 2000. I was the
professional developer; Susan used Alpha Five in her
business. After a short conversation with her, I realized that she was much more than an end-user. She
had made a study of Alpha Five over the years, pushing the product to its limits in order to serve her business needs.
Since her first book, I have watched Susans
books grow and develop, just as Alpha Five has gone
from simply a desktop database product to Alpha
Anywhere, the premier method for web and mobile
application development. They share a common philosophy in that both books and software are designed
for users of all types, regardless of skill level rank
beginner or advanced developer with coding experience. The books serve as both tutorials and reference

manuals, with every chapter chock full of useful


information.
The value of Susans experience using Alpha
Anywhere in a real-world business environment cannot be overstated. Throughout the book, you will find
plain-English explanations of each feature. You will
also appreciate the generous use of screen shots that
guide you through the exercises. Best of all are the
tips and hints she provides to help shorten the learning curve so that you can get the most out of the software

On behalf of Alpha Anywhere users and


enthusiasts everywhere, thank you Susan, for
writing these books!
Frances M. Peake,
Co-owner, Proctor & Peake, Inc.

More reader testimonials from around the world


Cyprus: Thanks for all of your help and once again BRAVO!!!! for these wonderful books offered by Liberty Manuals. They counted a lot in my decision to replace Microsoft Visual FoxPro with Alpha Anywhere. It
seems to be a great tool, easy to learn and MUCH easier to learn with your books.
Costas Loizou
France: By the way, great book Susan, very interesting and pleasant to read. Keep up the good work!
Stphane
USA: I have bought most of your books and loved them. Will definitely get the latest ones.
David Mobi Firefly
USA: Posted on LinkedIn and reprinted with permission. We have used both the Liberty Manuals training
materials and Alpha Five Total Training by Steve Workings. There is definitely a great deal of overlap but the
repetition is helpful. Both are excellent resources. I would use the video library to supplement these and get
more detail on some items. Added later Thank you for a well thought out and well written text. Andy Hill
USA: I've been doing Access, R:Base, dBase, MsSQL and others for many years. The switch to Alpha was
difficult for me primarily due to the immense number of options for properties, methods and controls, PLUS
for web apps you have to re-think the approach to your project. If not for your excellent manuals I would have
given up and blamed it on the software. At first I thought the complete set was too expensive, but I took the
chance and found it to be the best investment in my project I've ever made. Robert Butterfield
UK: Reading your manuals has been an absolute treat, most are written by those in the know for those in the know, I
like your style.
Bryan Page (Great Britain)

Malawi: I am now three quarters through your book and must say I am VERY, VERY impressed by the
detail, accuracy and clarity of your writing. I dont know if the average first world user appreciates how
lucky they are having good comms, fast Internet, being able to watch videos online and communicate easily
with other users. Here in the third world, we would be lost without books. Thats why I so much appreciate
finding a book as clear as yours.
Alan Anderson
More testimonials at www.LibertyManuals.com

About the author

From her first computer experience in 1984 a used Apple I presented by her
father after he upgraded to an Apple II Susan
Hussey Bush has been hooked on this amazing
(and sometimes frustrating) tool of the modern
world. The 1985 purchase of the state of the art
IBM XT with an astounding 10 mg hard drive
opened the door to database development. That
first flat database, Nutshell, showed her that one
did not have to be a programmer to develop
applications.
Later, she began the search for a relational
database that did not require programming skills.
Alpha Four, a DOS product, met those requirements. When Alpha Five was released, she

vi

moved to the Windows version and developed a


database for her business, Liberty Food Marketers Co. She has since sold the business to her
son, who continues to uses the database to stay
current with the demands of government bidding
and to offer customers outstanding service.
Susans first Alpha book was for Alpha Five
v4.5. She has written updates for every version
since. She always welcomes new features and
looks forward to working out ways to explain
them in her unique step-by-step exercises.
She feels the name change from Alpha Five to
Alpha Anywhere was a natural because it
describes the range of desktop, web and mobile
applications that are essential to todays markets.
Susan has a Bachelor of Fine Arts in Architectural Design. She brings that training to her
application designs and to her books
She lives with her husband, Richard, in Flat
Rock, North Carolina. They take great pleasure
in their blended family of seven children and
eight grandchildren, spread across the country.
Mike, Liz and Walter Hussey live in the Florida
Keys. JR Hussey and his wife, Carin Young, live
in Mill Valley, CA. In Oakhurst, New Jersey,
Dave Hussey keeps busy with Liberty Food
Marketers Co. and acts as fulfillment manager
for Liberty Manuals Co. Rick Bush lives in Missouri. His eldest daughter, Hailey, is in Joplin,
Missouri and younger daughters, Jordan and
Lindsey, are in Pea Ridge, Arkansas. Jordan
recently added baby Beckett to the clan. Ross
Bush and daughter, Clara, live in Vichy, Missouri. Residing in Fort Smith, Arkansas are
Missy, her husband, Jeff Brown and son Jake.
Kathleen and Sands Orris and their sons, William and Foster make their home in Cumming,
Georgia.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for Version 12 - Volume 1

Introduction
Alpha Anywhere for Web & Mobile
Welcome back! As a reader of this 2nd volume of
Alpha Anywhere Web & Mobile Made Easy, The
Basics and More for 3.0, we know you are already a
fan of this great software!
This book continues the study of Alpha Anywhere, a peerless, peppy, penetrating, perceptive and
darn near perfect product. We say almost perfect
because just as you think theyve thought of everything, yet another new development appears!
I started using Alpha Anywhere (known at the
time as Alpha Five) as a desktop database tool for my
business many years ago - and it saved that endeavor
because our small business was able to compete as
the world changed from manual to electronic data
management. My success with the software lead to a
desire to share my on-the-job training with others.
Over the years, I watched Alpha Five advance to take
on a leadership role in web design. Adding the ability
to create mobile applications made the name change
to Alpha Anywhere a natural.

And. The beauty of the program is that it continues


to be so user friendly. Granted, there are new skills to
learn, but the reward will be an advanced level of
sophistication for your application, with development time cut to a minimum.
So, get ready for more fabulous features. Good
Luck and have fun!
Susan Bush

What this book is all about


In this book, we cover what you need to know in
order to develop complex web and/or mobile apps
with or without previous programming experience.
Continuing from where we left off in Volume 1, it
covers the UX and its List Control in depth and how
to effectively use Panels for mobile application
design. Next comes the revolutionary offline features. Leave it to the folks at Alpha Software to deal
with the elephant in the room. We then describe
several procedures for creating web and mobile

menus. More Grid features come next and then we


move on to some important hints on using the SQL
data type. We describe Alpha Anywhere Video
Helps new interface and, lastly, there are a collection
of tips and tricks that we think will be useful to
advanced and intermediate developers.

Acknowledgments
Nobody does this type of work alone. Thanks to
the folks at Alpha Software for all their ready
answers to my many questions. As always, Dave
Hussey in our NJ office continues to get your books
into production and out the door as promptly as possible.

Getting Started
Alpha Anywhere Web & Mobile Made Easy, The
Basics and More for V12 - Volume 2, has been developed to aid intermediate and advanced users in learning the concepts necessary to develop web and
mobile applications.
The lessons contain step-by-step instructions.
While each section may be used independently, some
of the terminology builds sequentially from lesson to
lesson. For example, Chapter 2 explains how to use
the List control. Subsequent lessons expect the user
to understand these procedures.
This manual does not cover certain advanced features Xbasic, HTML design, etc. in depth. We
invite the user to explore the program further by
using the genies and the help videos.
The folks at Alpha Software never sit still.
Unlike other programs that put out an upgrade
and just sit on it, Alpha is always refining. This
means there may be situation where our screen
shots may not match exactly. In most cases, however, you should be able to complete the exercises without difficulty.

vii

INTRODUCTION
Getting Started

SUPPORT

Working files: You will be directed to name

While every effort has been made to give you a


trouble free learning experience, some errors are
bound to appear. If you find something, please go to
www.LibertyManuals > Support tab. If a correction
does not already exist, please e-mail your notes to
susan@libertymanuals.com. Well give you the
credit and post it for others.

your files preceded with My, such as MyClients or MyWebPage.


Practice files: In some cases, we have gotten
you off to a head start. Those files are followed
by _Practice as in Clients_Practice.
Completed examples: In most cases, there is a
completed example for the exercise. Names are
same as for the working files, except they are not
preceded by My, such as Clients.

What you need to know


You need to have completed the exercises in Volume 1 of this series or be familiar with creating web
and mobile applications with Alpha Anywhere.

The equipment you will need


In order to do the exercises in this book, you will
need Alpha Anywhere 3.0 installed on your computer.
Design: Alpha Anywhere contains all you need
in order to design your application.
Licensing: Licensing is required for posting
your application design to the Internet or an
intranet.

How this book is set up


The process of discovering the benefits of Alpha
Anywhere web and mobile application design is
essentially the same for all users. Therefore, for the
purposes of consistency in teaching and learning, the
text refers to either SQL or DBF file samples provided in this books companion databases.
DATABASE FILE TYPES:

While you can use its native DBF files, Alpha


Software recommends using SQL because it works
better when the data is remote. Our lessons use both
file types. As you are already aware, they work in
essentially the same way. This means DBF users can
start with their existing files and move to SQL later if
they so desire.

File naming convention


The lessons contain three types of file names: (1)
working files are those you create as you do the exercises, (2) practice files are those we have supplied
and (3) completed examples already have the settings
described in the exercise. They are named as follows:

viii

If you did not do an earlier exercises, you may


use the completed example, however we recommend you save a copy with the My prefix
(MyClients) in order to preserve the original.
You can use these as models for your work. If
you are having difficulty, it may be helpful to
examine the completed examples to find where
things may have gone awry.
Web Projects. The exercises use several differ-

ent web projects, each of which is identified in


its exercise.
In order to see the completed components,
you will need to change to the web project identified
at the beginning of the chapter.

About the screen shots


File names: The screen shots were created using
the completed examples, therefore, you will see CascadeList in the illustration. The instructions, however, will advise you to name your file
MyCascadeList.
Cropping: Space is a huge issue for us due to
paper, ink and other production costs. We have made
every effort to size the screen shots so they can be
read comfortably, but some of the dialogs are quite
large and have extra space in the center. As a result,
we have occasionally, cut out the blank space and, in
most cases, we have eliminated the OK and Cancel
buttons.

Footnotes
In some instances, the footnote for a given page
will appear at the bottom of the following page.
Location of footnotes is set by my book writing soft-

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for Version 12 - Volume 1

ware Adobe Framemaker and we have no control


over where it places them.

To quote or not to quote


Within Alpha Anywhere, quotes have a very specific use. To avoid confusion in the instructions, we
have not used quotes around text to be entered, but
have bolded the font instead. For example: Type My
name is Susan.

Special note for readers of previous


editions
Each new version of the software includes new
features so every exercise in this book has been
reviewed and received a face lift and sometimes
even major surgery.
The format of the exercises often stays the same,
but the content changes as new material is added. We
have made every effort to make your learning experience clear and concise..

MyBackup: A folder where you can place a

backup file if you wish.


Samples: Contains other files that will be used in
the exercises.
SQL: Contains sample SQL databases.
SQL DATABASES

Several MS Access databases are used in the lessons. Connections should be made automatically for
the sample files. If you have changed the location of
the sample databases, you will need to modify the
connection strings. See Creating and Managing
Connection Strings on page 362.

Using Alpha Anywhere Help


Alpha Anywhere has an extensive help system
with a large library of documentation and videos
built into the software. We explain how to find the
ones you need to assist your learning process in
Chapter 9.

Download and CD contents

VIDEOS

When you buy the Electronic Download Edition


or the Hard Copy of the book, you are emailed the
link to the book and lesson files. By the time you
read this, most of you will already have installed
them to the default location:
c:\Alpha_WebMobileBook_3.0_Volume2

Many of the videos have been starting points for


exercises in the book. As I write, I ask myself, How
would I use this feature in a real-life situation? That
sometimes leads to including more options.

or another drive of your choosing. To install


them manually from the CD, see page ix.
LESSON FILES

The ABC_WebMobile_Lessons folder contains


the Alpha Anywhere workspace files that are the
foundation for the exercises. It contains:
ABC Seminars.WebProjects. Contains several
Web Projects that are the completed examples for
the exercises.
The names of the folders match the names of
the Web Projects. When you create a new project, Alpha Anywhere automatically creates the
folder that houses the files.
Images: Contains the images used in the exer-

So, even though you may have seen the video on


a certain topic, check out the exercises, too.
In most cases, our exercises give the settings
described in the videos so that you dont have to
replay them over and over and over!
FEATURE PACKS

Previously, Alpha Software offered add-ins called


Feature Packs at an additional charge. They have
been discontinued because Alpha Anywhere subscription pricing includes all releases and updates.
When a video topic says the Feature Pack must be
installed, you can ignore the notation because you
already have it!

Installing the Lesson Files

cises.
Note: The Alpha Anywhere program is necessary to open
the lesson files.

ix

INTRODUCTION
Support

To install lesson files from the CD


a. Insert

the Alpha Anywhere Web & Mobile Made


Easy The Basics and More for 3.0 - Volume 2
companion CD-ROM in your CD drive.

b. Open Windows Explorer and navigate to the drive

with the CD.


c. Proceed as follows for the Electronic Download Edition.

Installing the lessons for the Electronic


Download Edition
1.

2.
3.

Double click on the zip file and/or the .exe file to begin
installation.
Message reads: This will install the Alpha Anywhere
Web and Mobile Made Easy files to your hard drive.
Click OK.
Unzip to folder:

c:\Alpha_WebMobileBook_3.0_Volume2.
This is the default folder. It may be changed.
If changed, make a note of the location because we
4.
5.
6.
7.

refer to it in the book.


Click Unzip.
Message reads: Files unzipped successfully.
Click OK.
The Readme file opens.
After reading the Readme, close it.
Open Alpha Anywhere in the usual manner and navigate to the above folder.

8.

Click ABC_WebMobile_Lessons > ABC Seminars.

It has a tiny alpha logo at the left and its type is


alpha5 Document.

What files are included?


The CD contains one workspace (working database
and other web project files) and a PDF file for the book.
The same files are included with the Electronic Download
Edition.

Bonus! We have also included an eBook version


for mobile devices. We have tested it with the iBooks
app. For the most part it works quite well although
some of the links may not function 100%. Notes on
installing it are in the Welcome section at the beginning of the Electronic Download Edition of this
book.
ABC_WebMobileLessons\ABC Seminars.adb is
the foundation for most of the exercises.
The PDF version of the book is installed at

c:\Alpha_WebMobileBook_3.0_Volume2 \
Elec_Edition.
The EPUB version is installed at:
c:\Alpha_WebMobileBook_3.0_Volume2 /
Mobile_Edition.

Support
While every effort has been made to provide readers
with a trouble free and accurate learning experience, some
errors are bound to occur.
The support section of the website will publish corrections as they are discovered. We suggest you visit it peri-

odically to see if there are modifications. And please let us


know if you find something. Your fellow readers will
appreciate it!

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for Version 3 - Volume 2

Table of Contents
Frances M. Peake, professional database developer, has this to say about the Alpha Anywhere Made Easy books v
More reader testimonials from around the world v

Introduction

1 Dazzling Design

2 Luscious Lists (UX)

Alpha Anywhere for Web & Mobile.....................................................................vii


What this book is all about vii
Acknowledgments vii
Getting Started .....................................................................................................vii
What you need to know viii
The equipment you will need viii
How this book is set up viii
File naming convention viii
About the screen shots viii
Footnotes viii
To quote or not to quote ix
Special note for readers of previous editions ix
Download and CD contents ix
Using Alpha Anywhere Help ix
Installing the Lesson Files ...................................................................................ix
To install lesson files from the CD x
Installing the lessons for the Electronic Download Edition x
What files are included? x
Support ...................................................................................................................x

Please read the Introduction!................................................................................2


Keeping up..............................................................................................................2
Using Alpha Anywhere Help .................................................................................2
Welcome! ................................................................................................................3
Whats in a name? 3
What this book is about 4
Should I use Grid or UX components? 4
How to use this manual .........................................................................................5
ABC Seminars 5
Detaching the Working Preview Window.............................................................6
Understanding the Client / Server model.............................................................8
Xbasic and the web 9
What is best? SQL or DBF??? ............................................................................10
On with the show! 12

How this Chapter is Organized ...........................................................................15


Shortcuts to the builders 15
Using a List Control to Filter a Report ...............................................................16
Creating the UX component 17

xi

TABLE OF CONTENTS

Adding a List Control 17


Adding a Panel Card 18
Viewing the report 19
Adding a button that opens a filtered report 20
Adding a Panel Navigator 22
Giving the panel a header with a title 23
Placing the button at the top of the panel 23

Understanding List Control sources:


A. Using Static data 25
B. Using Data from a SQL Database 26
Defining the query 27
Using the SQL genie 27
C. Using a DBF Data Source 29
D. Using a Custom Data Source 30
Defining the function 31
Returning a single value 31
Defining the List Control attributes 33
Returning the value from a drop down box 34
Defining the drop down box 35
Modifying the code 35

Improving the Appearance of Lists:


A. Adjusting the Column Widths 37
Defining relative (flex) column widths 37
B. Understanding Fill Container options 38
Filling the width of the container 39
Placing a border around the list 40
Placing a border around the container 41
C. Adjusting the Length of a List 42
D. Defining FreeForm Layouts 44
Adding another layout 45
Defining the layout 45
Switching layouts by changing the device orientation 46
Selecting the layout style with a combo box 47
Using a template to design the freeform layout 48
Exploring more videos 52
E. Defining Computed Columns 53
Defining server-side calculations 54
Defining client-side calculations 56
F. Displaying Images 57
Displaying images from the database 58
Defining conditional images 58
G. Defining Conditional Styling 60
Defining server-side conditional formatting 61
Defining client-side conditional styling 62
Understanding the onItemDraw event 63
H. Understanding Record Limits & Pagination 65
Viewing the options 66
Setting record limits and pagination 68
Adding navigation buttons or icons 68
Identifying the page or record 69
Limiting the number of records displayed 69
Navigating with buttons or icons 70

xii

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for Version 3 - Volume 2

Fetching more records 70


Auto fetching records 71

Improving the Way Lists Work:


A. Adding Buttons 72
Enhancing the appearance of the button 73
Showing a button conditionally 75
Opening another UX component 76
B. Grouping Records 76
Defining the group breaks 77
Defining the pagination 78
Defining the column sorting 78
Adding the buttons 79
Using the header text lookup dictionary 79
C. Creating Cascading Lists 80
Using arguments in filters 81
Setting unique values 82
Turning off column titles 82
Defining list width at the List Builder 82
Defining the component 83
Defining the cascading lists 83
Using the SQL Genie 86
D. Using List Rows to Edit the Database 87
Populating the fields with list row data 88
Giving a row focus when the list is initially rendered 89
Automatically populating controls when list is initially rendered 89
Adding buttons and refreshing the list 90
Editing the data and viewing the result in the list 91
Understanding List vs. List + Field in onSelect event 91
Populating unbound controls with data from a list 92

Searching and Filtering Lists:


A. Understanding Server- and Client-side Searches and Filters 93
B. Creating Server-side Searches 95
Ordering the list 96
Adding the DropdownBox control 96
Adding a search button 97
Adding a button that refreshes a list 98
Adding a record count 98
Creating a textbox search 99
Adding a keyword search 100
C. Creating Client-side Searches 101
Creating an all fields search with a button 101
Creating key press searches 102
D. Searching and Navigating Records 103
Navigator #1: The Slider 104
Navigator #2: The List 105
Navigator #3: The Navigation Icons 105
Configuring the Keyword Search 106
E. Creating Geography Searches 107

Video Library:
More List Control Features ...............................................................................108

xiii

TABLE OF CONTENTS

3 Priceless Panels (UX)

How this Chapter is Organized .........................................................................115


Understanding Panel Cards, Panel Navigators and Panel Layouts ..............115
Understanding Quick Panels ............................................................................119
Using predefined templates 121

Defining Panel Cards:


A. Aligning Text in Headers and Footers 122
Centering the text 123
Understanding CSS Classes 123
B. Aligning Buttons in Panel Cards 124
Aligning buttons in the Panel Card itself 125
Aligning buttons in the
Header / Footer 125
Making a button conditional and maintaining its position 126
Positioning elements absolutely 127
C. Creating an Action Sheet and a Panel Window 128
Closing the action sheet container window 130
Creating a panel window 131
D. Defining Fixed Positions for Objects 133

Defining Panel Navigators:


A. Understanding Navigation 135
Using the device for navigation 136
Using buttons for navigation 138
Using lists for navigation 141
B. Adding Locater Icons 144
C. Change Layout on Orientation Change 145
D. Defining a Custom onSwipe Event 146

Defining Panel Layouts:


A. Understanding Flow in Panel Layouts 148
Understanding flow direction 148
Understanding before & after 149
B. Understanding how Panel Card size affects Panel Layouts 150
C. Understanding Docking 151
D. Docked Panel Display: Docked Panel Controller button 153
Understanding the display methods 154
Understanding dock lock flow 154
Understanding the dock options 154
Defining the buttons 155
E. Docked Panel Display: Flow Collapse Button 156
Defining the settings 157
F. Docked Panel Display: Nested Panel Layouts 158

Video Library:
More on Panels...................................................................................................160

4 Offline or Online (UX)

xiv

How the Chapter is Organized ..........................................................................165


Understanding the terminology 165
Understanding Disconnected (Offline) Applications ......................................169
Understanding the design approach 171
Understanding development 172

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for Version 3 - Volume 2

Understanding synchronization 173


Understanding write conflicts 175
Creating a List with Detail View and Search Part............................................176
Using the genie to do it all in one step 177
Performing CRUD operations 180
Locating the properties 180
Modifying Detail View properties 185
Searching and editing records when online 188
Creating a Disconnected Application ...........................................................189
Defining Local Storage settings 189
Defining the Search Part settings 190
Defining the Detail View settings 192
Creating a custom CSS Class 193
Completing the Detail View options 195
Using the database records when offline 195
Understanding Hierarchical Data .....................................................................197
Viewing Local Storage contents .......................................................................201
Understanding the Local Storage Manager control 202
Naming the space 206
Freeing up space 207
Data Connection: Comparing Data Binding & List Detail View Methods......207
Associating a List Detail View with an Existing List.......................................208
Adding the List Detail View 209
Adding a List Search Part to an Existing List .................................................210
Tips on using the Search Part 211
Using Query by Form 211
Adding More Buttons.........................................................................................212
Understanding the List Detail View buttons 212
Understanding the Search Part buttons 213
More Notes..........................................................................................................213

5 Optimizing the UX

How the Chapter is Organized ..........................................................................219

Defining Containers:
A. Creating a Tabbed Interface 220
Using the Tab Control and Tab Pane controls 220
B. Using the Container Control 221
Understanding the Container control 221
Creating columns 223
Defining a show/hide condition for a group of controls 224
Creating invoices and other master / detail relationships 224
Grouping controls in UX with Panels 225
Placing buttons in groups 226
Creating a SpinList controls 227
Displaying controls in a different place on the layout 227
Opening controls in a pop-up window 228
Assigning flexible widths to UX controls 229
Placing data on a pre-defined form 231
Using CSS to override spacing of controls 235
C. Using Containers to Align Controls 236

Choosing the Correct Device Layout:


A. Understanding Responsive Layout Design 238

xv

TABLE OF CONTENTS

Creating a simple responsive design 239


Understanding the Responsive Layout genie 240
Defining Rule #1: Landscape 240
Defining the actions for Rule #1 241
Defining Rule #2: Portrait 242
Defining the actions for Rule #2 242
Viewing the JavaScript 242
Other helpful features 242
B. Creating a Complex Responsive Design 243

Creating Tables Based on Controls:


A. Creating a Single Table Based on Controls in a UX 244
Creating the alias 245
Binding the table fields 246
Defining the field specifications 246
Defining the table 247
Creating the table 247
Viewing the table 247
Understanding primary keys 247
Changing the field binding 248
B. Creating Multiple Tables Based on a UX with Repeating Sections 249
Creating the aliases 250
Selecting the linking field 251
Defining the field specifications 251
Defining the tables 251
Creating the table 252
Defining the submit button code 252
Changing the linking field to auto-increment 253

More UX Elements:
Refreshing the table...........................................................................................254
Viewing 1000s of Rows in a List ......................................................................255
Virtualizing a list 255
Adding a Scroller to a List .................................................................................257
Hints for Data Binding .......................................................................................258
Reviewing or changing data binding 258
Clearing the data binding 258
Adding and binding new controls 259
Assigning a primary key 260
Displaying a Video or Web Page.......................................................................260
More Good Stuff .................................................................................................262
Organizing a complex UX component 262
Recalculating the HTML and JavaScript 262
Internationalization 262
Lookups 262
Validating data entries 262
Permissions and security 263
PhoneGap 263

6 Masterful Menus

How the Chapter is Organized ..........................................................................267

Menus for Mobile Applications:


A. Understanding the Menu Builder 270

xvi

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for Version 3 - Volume 2

Creating the menu 271


Defining the leaf items 272
B. Building a Menu with Docked Panels 275
Understanding the Panel Layouts 277
Configuring the menu lists 277
Configuring buttons for docked panels 278
Configuring the docked Panel Cards 279
Configuring the menu selections 279
Configuring the swipe action 281
C. Understanding Split View Menus 282
Creating a standard split view menu 283
Creating a split view menu with icons & panels 284
Understanding the ListMenu control 288

Menus for Web Applications:


A. Understanding the Tabbed UI Builder 289
Creating a Tabbed UI 291
Adding controls 292
Adding frames 294
Adding tabs 295
Changing width of buttons and panel 296
Understanding the browser navigation warning 297
Giving the page a URL title 297
Adding a header 297
Adding a footer 297
Adding home page content 298
Understanding A5W pages for Tabbed UIs 299
Adding and editing objects 300
Understanding linked resources 302
Additional options 302
B. Understanding the Page Layout Builder component 303
Entering the display settings 304
Displaying a Page Layout component in a Tabbed UI 305
Adding an external web page 307
Creating the A5W page 308
C. Understanding the Navigation System 309
Sample application 310
Developing a plan 311
Understanding the description page 311
Understanding the component settings 312
Understanding the menu structure 313
Adding and deleting children, siblings, nodes and trees 313
Moving the nodes 314
Undo & redo 314
Deleting nodes 314
Understanding node settings 315
Previewing the Navigation System menu 316
Switching from onclick to onmouseover 316
Using the information page 316
Including a Tabbed UI 316
Inserting the component on the pages 317
Viewing the Navigation System 319
Adjusting the menu items 319
Troubleshooting 319

xvii

TABLE OF CONTENTS

7 Gifted Grids

8 Sexy SQL Secrets

xviii

How the material is organized...........................................................................323


Choosing Read Only or Updateable .................................................................323
Converting later 325
Understanding the updateable and editable notices 325
Changing a read-only Grid to updateable (editable) 326
Understanding Editing Options for Updateable Grids....................................327
Editing data with RowOnDemand 330
Editing data with AllRows 332
Trapping actions 334
Being consistent 334
Understanding multi-user editing 334
Using a Grid Template to Save Time and Trouble ..........................................335
Move, delete or rename templates 336
Using the system templates 337
Creating a template 337
Using a Stacked Columnar Layout ...................................................................338
Grouping fields into rows 340
Adding static text labels 340
Adding a merge cell heading 341
Adding a row spacer 341
Using a master template 342
Adding a collapse bar 343
Understanding the Form (Columnar) Component...........................................344
Resizing images 346
Grouping fields with a frame 346
Snaking the records 347
Opening the Detail View in a window 348
Filtering the records 348
Grouping the records 349
Understanding Arguments ................................................................................351
Defining the argument 352
Defining the prompt 353
Using the argument in a filter 353
Testing the argument and filter 353
Adding a drop down box 354
Defining the prompt page 354
Ordering Records...............................................................................................355
Taking a Quick Look at the Code Section........................................................356
Editing events 357
Annotating the Grid Component.......................................................................357

How the Chapter is Organized ..........................................................................361


Using connection strings developed for this book 361
Creating and Managing Connection Strings ...................................................362
Understanding the data source 362
Editing an existing connection string 362
Creating a new connection string 363
Using an existing connection string in a Grid 363
Creating an Ad Hoc (temporary) connection string in a Grid 364
Understanding connection strings in a UX component 365

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for Version 3 - Volume 2

Completing the SQL Query Pane in a Grid ......................................................365


Using table or view 366
Creating a SQL Select Statement .....................................................................368
Selecting fields for the Grid 371

Understanding Alpha Anywhere Reports:


A. Creating SQL Reports 372
Creating a quick report 373
B. Printing SQL Reports 374
Publishing the SQL reports library 375
Setting the default value 376

More Important Info:


Understanding server connections ..................................................................376
Testing vs. live 376
Using a professional hosting service 376
Understanding portability 377
Using Alpha Anywhere with SQL on the Desktop ..........................................377
Using web application components on the desktop 377

9 Heavenly Help Plus!

10 Practical Pointers

How the Chapter is Organized ..........................................................................381


Understanding the Documentation Viewer (DV) .............................................382
Getting off to a strong start 382
Display and navigation 382
Searching for topic pages 384
Saving page references 387
Taking notes 388
Printing topics 390
Updating the documentation 390
Window style 391
Restoring open pages 391
Sending feedback 391
Using the Video Finder ......................................................................................392
Filtering 392
Refreshing 393
Preferences 393

How the Chapter is Organized ..........................................................................397


Searching for Properties ...................................................................................397
Learning the terms 398
Finding properties 398
Changing the In-line Style .................................................................................398
Watching where you are working! 399
Pre-Defined Packages (aka Feature Packs).....................................................399
Categories 399
Using Functions and Expressions ...................................................................400
Webroot Folder...................................................................................................401
Using the Database Explorer ............................................................................402
Picking CSS Colors............................................................................................403
Color names supported by all browsers 403
Tidbits .................................................................................................................403

xix

TABLE OF CONTENTS

Correcting Calculated Fields terminology 404


Relative URLs 404
Exploring Error Messages .................................................................................405
Adding the server signature 406
Saving Expressions in the Script Library ........................................................406
Compiling your scripts into a library (AEX) file 406
Exploring Xbasic References............................................................................407
Understanding Xbasic 407
Using the Xbasic tools 408
Assuring successful script writing 410
Additional videos 410
Converting from DBF to SQL Theres a Genie for That ...............................410
Creating a Maintenance Component ................................................................411
Choosing tables for packing/reindexing 413
Testing the component 414
Help! ....................................................................................................................415
Alpha Software website 415
Tips and tricks 416
More Books from Liberty Manuals ...................................................................416
Designing reports 417
Learning Xbasic 417

Index

xx

...............................................................................................................419

Chapter 1.

Dazzling Design

No matter what the device, you will be proud of your presentation!


And Alpha Anywhere can make the design seem like magic. Everyone will wonder how you did it
in so short a time. Low code is the answer. Use the genies and tweak it here and there every design
will dazzle your audience. Just sit back and enjoy the applause!

CHAPTER 1. DAZZLING DESIGN


Please read the Introduction!

Please read the Introduction!


The Introduction contains important information on this book and its companion files. If you havent
already done so, please go to page vii now!

Keeping up
Its not easy to keep up with the folks at Alpha Software because they are constantly tweaking the software.
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 susan@LibertyManuals.com and Ill post it
on the website (see Support on page x). SHB

Using Alpha Anywhere Help


This book references several Alpha Anywhere help documents and many videos. Using the help system is fully
explained in Chapter 9
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.


Note: The revised Video Finder is explained at Using the Video Finder on page 392. The new sub-categories were added after most of this book was written. In the interests of time, we have left them as they are.
Remember that you can always enter the first part of the video number in the Filter if you have any difficulty
locating one that has been referenced. For example,
To find video number UXG_V12-2, enter UXG_V12 and choose from the selection.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Welcome!
Welcome back to the wonderful world of Alpha Anywhere. We are excited to
tell you how to use more of the many fabulous features of this sophisticate software. And mighty sophisticated it is. Each time a new version is released, we
are amazed at how anyone can use it to develop astounding applications. Add a
little code and it gets even better. If you are familiar with Javascript, CSS or the
many other program languages that make up web and mobile apps, the Alpha
world is definitely your oyster. Low code or a lot of code, the development time
you will save is truly astonishing.

Whats in a name?

ALPHA FOUR

ALPHA FIVE

ALPHA ANYWHERE

If you have been a long-time member of the Alpha family, you are likely to
be familiar with the progression from Alpha Four to Alpha Five to Alpha Anywhere. However, if you are a new user, it may be a bit confusing. I liken it to my
blended family. Those in the know can figure out the relationships others need
a two page diagram.
Heres an Alpha Software history lesson.
Alpha Software began back in the DOS days with its initial database product
called Alpha Four.
The change from DOS to Windows required an entirely new way to develop
databases, hence the name change to Alpha Five.
In time web design was added to its capabilities. The Grid offered a revolutionary way to use any data type with simple pick and click design.
Then along came smart phones and tablets, creating the mobile era. The UX
component was originally designed as a Dialog component,* but early experimentation showed it was ideal for mobile due to its low payload. Work began on
expanding its use and the component name was changed from Dialog to UX
(short for User Experience).
Alpha Five Versions 1 - 11 were sold as independent entities.
In order to fully describe its versatility, the name was changed to Alpha Anywhere (powered by Alpha Five Version 12). The fee structure was changed to
subscription.
All of that seems fairly straight forward, except that Alpha Five V12 remains
the engine for Alpha Anywhere. That is why you will find the program files for
Alpha Anywhere in the c:\ Program Files (x86) > A5V12 \ directory.
It also explains why Alpha Anywhere is not version specific. In other words,
even though the most recent release is promoted as Alpha Anywhere 3.0, it is
still powered Alpha Five V12. Because it is sold by subscription, the versions
just meld one into the other.

*. Typically a Dialog asks the user for input.

CHAPTER 1. DAZZLING DESIGN


Welcome!

What this book is about


This book is for developers who already have experience with Alpha Anywhere. You have either completed the exercises in Alpha Anywhere Web &
Mobile, The Basics and More for 3.0 Volume 1 or are comfortable with creating
basic web and/or mobile applications with Alpha Anywhere.
Our purpose is to cover certain elements in greater detail. A good portion
focuses on UX Component and its List Control, because they are the key to
mobile applications. They are also useful for web applications, hence we recommend all developers become familiar with their wide range of uses. We have
also included some additional Grid features and you will find an excellent collection of menus for both types.
The recently developed offline features are covered in depth. That means
the end use can modify his/her database even if he/she is not connected to the
Internet. As with other Alpha features, this can all be done with little or no coding. Or you can go to town with CSS, JavaScript JSON and all the other goodies
in the HTML5 package.

Should I use Grid or UX components?


On a basic web application, both components work well. But mobile is a special case because it needs touch enabled controls and only the UX supports
touch. It is also lightweight meaning that carries a small payload, another
mobile requirement.
The decision gets complicated because many laptops and even some desktop
systems are moving to touch enabled. If you still have a mouse and keyboard
navigating in the Grid is fine, but if touch is desirable (now or in the future), the
UX adds that option.
Previously, when there was a mix of hardware, the common method was to
build two isolated applications. One for desktop web and another for phones
and tablets.
The UX has evolved, however, and now takes on many features of the Grid.
For example, a UX List control can work just like a Grid and even have a Detail
View, making it entirely possible to build a fully featured application without
using Grids. They still have their place, though, as they are very easy to build
when the goal is to show lists of data.
The UX has a Responsive Layout feature that allows the developer to
specify sizes and other properties according to the device on which it is running. This allows one component to run on multiple devices.
It is still common, however, to define separate components for desktop and
mobile in order to take advantage of the different real estate available and other
features.
This is facilitated by using the App Launcher component.
The App Launcher component creates a single entry point.* It makes an

Ajax callback that passes back a wealth of information to the server about
the device, thus determining which pages or components should be loaded.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

This means a single URL can be used to show desktop optimized pages and

forms or launch components and pages made for the smaller footprints of
phones and tablets.
It even makes it possible to change style sheets based on whether the device
is an iPhone or an Android.
THE CHOICE IS YOURS

Ultimately, the system for which you are developing will determine the decision. No matter what your particular situation, you can rest assured that Alpha
Anywhere gives you the tools to get the job done efficiently.

How to use this manual


Please be sure to review this section because it includes important information.

ABC Seminars
ABC Seminars is the Alpha Anywhere application that comes with this book.
Be sure to install it on your computer (see Introduction, page ix).
It contains working Web Projects and
completed samples of the components.
Once installed, it becomes the home base
for all the exercises.
Your opening screen should look as at
left.
If you have opened directly at the Web
Projects Control panel, click the Menu
tab at the bottom of the screen to view
the menu.
This application is unique to this book. In
other words, you cannot use ABC Seminars for Volume 1 with this book.

CONNECTION STRINGS

Several connection strings have already been created. In most cases, they
will connect automatically.
One connection is just for Liberty Manuals users, the others come with your
Alpha Anywhere software package.
Liberty Manuals database:
ABC_Seminars_Access:
c:\Alpha_WebMobileBook_3.0_Volume2 \
ABC_WebMobile_Lessons\ SQL: Choose ABC_Seminars_Access.

*. The App Launcher, itself.

CHAPTER 1. DAZZLING DESIGN


Detaching the Working Preview Window

Alpha Software databases:


Alpha Sports, Northwind, Contact Manager and Notes.
c:\Alpha_WebMobileBook_3.0_Volume2 \
ABC_WebMobile_Lessons\ SQL

If you have changed the location of the book files or have any other problem,
update them as follows:
a. Web

Projects Control Panel: Click SQL on the upper toolbar.

b. Select

AlphaDAO Connection Strings.

c. Modify

the path as necessary.

For more information on creating and modifying connection strings, See


Creating and Managing Connection Strings on page 362.

Detaching the Working Preview Window


There is a new feature in Working Preview hat you may find quite useful if
you have two monitors or a wide screen monitor that permits you to show windows side-by-side.

Previously, the only Working Preview option was Internet Explorer. The
addition of Google Chrome makes it even more powerful. You now have:
The ability to detach the WP window.
Access to Chrome Debugger (advanced developers).

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Detaching the Working Preview window lets keep it open while you are
working. This means you can make edits to your component and see them
reflected in the preview immediately, without the need to switch back and forth
between the Design and Working Preview tabs.
Heres how to set it up.
a. Open

any component that uses


Working Preview (UX, Grid, etc.) in
Design mode.

b. Go

to Working Preview.

Note the hyperlinks at the bottom


of the screen.
SWITCH TO CHROME
c. Click

Internet Explorer.

d. Click

Switch to Chrome.

You are advised that the WP window will need to be re-opened in


order to see the change.
e. Click

OK.

You are returned to Design mode.


f. Re-click

Working Preview to see


the new hyperlinks at the bottom of the
window.
Using Chrome.
Open Chrome Debugger.
Detach Working Preview
Window.

g. Click

Detach Working Preview Window.

WP opens in a separate window. Move it to the second monitor or arrange as


desired on the wide-screen monitor.
REFRESH OR AUTOREFRESH

ATTACH WP
SETTINGS SAVED

RETURN TO IE

The Detached WP window provides


two refresh options. You can click the
Refresh button each time or set it to
refresh automatically.
Automatic refresh is not recommended for large components because the
delay in updating the WP window will make setting properties seem sluggish.
To re-attach the WP, click Attach Working Preview Window.
The settings are saved with each component. In other words, you can have IE
running in one component and Chrome running in others.
The default becomes the last one you used.
To return to Internet Explorer,

CHAPTER 1. DAZZLING DESIGN


Understanding the Client / Server model

a. Click

Using Chrome.

b. Click

Switch to Internet Explorer.

RELOAD PAGE

If things do behave as you think they should, even after refreshing the display, click Reload Page.

GO TO ALPHA VIDEO

To review the above instructions and learn how to use the Chrome Debugger,
see the following:
Videos > Filter: Enter Working Preview. Choose:
UX and Grid Component > UXV12-9. Using Chrome for Working Preview - Debugging Javascript using the Chrome Debugger. 2 videos.

Understanding the Client / Server model


We put this in every book because the principles are vital to understanding
how web and mobile applications work and the terminology used in their setups.
Almost any active operation requires a round trip
from client to server and back.
CLIENT / SERVER RELATIONSHIP

Client/server describes the relationship between


two computer programs in which one program, the
client [the browser], makes a service request from
another program, the server [the 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 the 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 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.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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.*
This Wickipedia chart shows an analysis of clients and servers:

Characteristics of a client

Request sender is known as client


Initiates requests
Waits for and receives replies.
Usually connects to a small number of servers at one time
Typically interacts directly with end-users using a graphical user interface

Characteristics of a server

Receiver of request which is sent by client is known as server


Passive (slave)
Waits for requests from clients
Upon receipt of requests, processes them and then serves replies
Usually accepts connections from a large number of clients
Typically does not interact directly with end-users

Xbasic and the web


Now that we understand that applications designed for use on the web differ
from those for the desktop, lets translate that into what you can and cannot do
without using JavaScript.
An Alpha Anywhere Xbasic user asks, How can I use Xbasic on the

Alpha Anywhere page to capture a value changed on the client browser by


JavaScript without making a request to server.

*. Client/Server definition: SearchNetworking.com; http://searchnetworking.techtarget.com/sDefinition/0,,sid7_gci211796,00.html,


Jan. 23, 2008.
. Client / Server: http://en.wikipedia.org/wiki/Client-server, Jan. 23, 2008
. Xbasic is Alpha Anywheres programming language.

CHAPTER 1. DAZZLING DESIGN


What is best? SQL or DBF???

The answer is he cant, because Alpha Anywhere code only exists and

works on the server. Client side actions must be done in JavaScript.


Other examples needing JavaScript are dynamic lookups and capturing
actions and events.
You can, however, use Xbasic to enhance many areas of your web application. You can use it to add features to a web page. You can write Dialog Event
Scripts. You can write Server Event Scripts.
ALPHA ANYWHERE
OPERATIONS

The desktop side of Alpha Anywhere has a feature called Operations. It


contains utilities allow the non-programmer to perform both simple and complex data manipulations, such as posting and updating records. While you cannot run a saved operation directly from an A5W* page or web component, you
can copy its Xbasic code and place it into a script in an A5W page.
To see the complete list of operations, go to the Control Panel > Operations
tab and click New.

THE GOOD NEWS

The folks at Alpha Software keep making the web easier and easier to use.
There are builders for web components you just pick from the options. New
features are constantly being added. There is brilliant security. And lots more.

But. They cant provide everything because they can't change the HTML standards nor 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.

What is best? SQL or DBF???


By now, most of you should know that the folks at Alpha Software recommend SQL files in web/mobile applications, rather than the native DBF files
that come with Alpha Anywhere. In addition to the following reasons, there is
one that may be even more compelling.
DISCONNECTED APPS

The most recently added feature, the ability to create mobile applications that
work when the end user is disconnected from the Internet require SQL.
Heres more food for thought from Jerry Brightbill of Alpha Software, an
expert programmer in both DBF and SQL file types. Here is a synopsis of our email exchanges.

MY QUESTION

I understand that SQL is preferable to DBF for large databases.

*. A5W pages are created with Alpha Anywheres built-in HTML editor.
. See Chapter 4.
. Reprinted from Volume 1 of this series.

10

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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.?
I have been using SQL (SQL Server) exclusively for several 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:

JERRYS RESPONSE

http://www.foxdev.com/VFPonSQLSGeneric.pdf
However, it does have a few contradictions.
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

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.

COST

*. Both MySQL and SQL Server Express are free and work well with Alpha Anywhere. You can certainly start there and upgrade only
if necessary.

11

CHAPTER 1. DAZZLING DESIGN


What is best? SQL or DBF???

COMPLEXITY

CONCLUSIONS

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 front-ends 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.
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.
If you think the time has come to consider converting your Alpha
Anywhere database to SQL, check out the Converting from DBF to
SQL Theres a Genie for That on page 410.

But. Keep in mind that while we use SQL in most of the exercises in this book, they
will also work with DBF. *

On with the show!


Now that we have the preliminaries out of the way, lets see what kind of
prestidigitation you can perform with the Powerful Prodigys tantalizing treasure, the List Control!
. Editors note: No need to spend extra $$$ on a report writer, because there is one built into Alpha Anywhere. See the Alpha Anywhere Report Writer, Reporting and Charting Made Easy by Susan Hussey Bush. Available at www.libertymanuals.com.
*. Is this a mixed message SQL is best, but it is OK if you use DBF. I suppose so. In the long run, the choice is yours. SHB
. The study of the UX component began in Volume 1 in the chapter entitled, Powerful Prodigy.

12

Chapter 2.

Luscious Lists (UX)

Long or short
Regardless of their lengths, theres no doubt that lists are a great way to display your data.
But it doesnt stop at there - lists have lots more uses. This chapter will give you the settings
that will get you started.

CHAPTER 2. LUSCIOUS LISTS (UX)

What youll find here


Topic
Using a List Control to Filter a Report

Description
Review from Volume 1

Understanding List Control sources:

16
24

A. Using Static data

25

B. Using Data from a SQL Database

26

C. Using a DBF Data Source

29

D. Using a Custom Data Source

30

Improving the Appearance of Lists:


A. Adjusting the Column Widths

36
Flex definition good for Mobile apps.

B. Understanding Fill Container options

37
38

C. Adjusting the Length of a List

Define the length absolutely or relatively.

42

D. Defining FreeForm Layouts

Multiple layouts.

44

E. Defining Computed Columns

New column based on contents of two other


fields, i.e.: Fullname = First name + Lastname.

53

F. Displaying Images

Display from database and conditional.

57

G. Defining Conditional Styling

Formatting based on contents of row or field.


Server-side and client-side.

60

H. Understanding Record Limits & Pagination

65

Improving the Way Lists Work:

71

A. Adding Buttons

Add buttons, show conditionally.

72

B. Grouping Records

Breaks with headers.

76

C. Creating Cascading Lists

80

D. Using List Rows to Edit the Database

87

Searching and Filtering Lists:

93

A. Understanding Server- and Client-side Searches


and Filters

These will help the end user find data quickly


and easily.

93

B. Creating Server-side Searches

DropdownBox, Textbox, Keyword searches.

95

C. Creating Client-side Searches

Textbox, Key press searches.

101

D. Searching and Navigating Records

Use Slider, List, Navigation Icons with Keyword


Search.

103

E. Creating Geography Searches

Video Library:More List Control Features

14

Page

107
Video references for additional topics.

108

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How this Chapter is Organized


Lists display data from a database or other resource. They are common in
mobile applications, but are useful in web apps, too.
To kick off this chapter, we have reprinted an exercise from Alpha
Anywhere Web & Mobile Made Easy, The Basics and More for Version 12 Volume 1. It will serve as either a refresher for those of you
who completed it there or an introduction for those who missed it.
The exercise shows how to create and use a List Control that displays
data from a database and how to use it to filter a report. Since it uses
the Mobile Simulator, it also serves as a quick review on creating
mobile applications.
Then we will dig into the many refinements available for the List Control
and show how to enhance its appearance and the way it works. Then we will
show how to set up searches and filters that behave much the way a Search part
does for a Grid.

Shortcuts to the builders


LIST BUILDER

ACTION JAVASCRIPT

Lists are defined at the List Builder. There are three ways to open it:
(1) Double click on the
List control itself.
(2) Select the List control, go to Properties:
Double click on List
Builder.
(3) Select the List control, go to Properties >
List Builder: Click the
button.
Action Javascript is used quite often. In the List Builder, that can mean a lot
of steps if you need to edit it. There is an easier way.
(1) At the UX Builder, click Menu.
(2) Choose Action Javascript Editor.
(3) Choose the desired action.
It is up to you to remember which action is where, however,
because this shortcut does not reveal the event where it was
defined.

15

CHAPTER 2. LUSCIOUS LISTS (UX)


Using a List Control to Filter a Report

Using a List Control to Filter a Report*


COMPLETED COMPONENT

The completed component for this section is OpenReport. The original is in


the Mailing List Web Project. A copy is also in the List Control Web Project.
The List Control has much of the functionality of a read-only Grid component. It can present lists from multiple sources. Here are just a few:
A static list of items, such as ball, balloon, bicycle.
A full or filtered list of records in a SQL or DBF Table or View.
Resources from the web, such as a list of stocks and bonds.
Once the list has been defined, it can be used in a variety of ways.
In this example, we will use a list to display records
from the Customer Table of the AlphaSports database. This list will then serve as a filter for a report.
When a record is selected and a button is clicked, a
report will open, displaying the records for customers in the selected state.
This UX component uses Panel Cards and a Panel
Navigator combined with a List Control and a Button.
Since this is a refresher, we will begin by opening the finished component
and seeing how it works.

1. Web Projects Control Panel > List Control Web Project: Open OpenReport in Design mode.
2. Go to Working Preview.
*. This section is reprinted from Alpha Anywhere Web & Mobile Made Easy, The Basics and More for Version 12 - Volume 1, Chapter
3, page 117. Originally entitled Understanding Panel Navigators and the List Control.
. See Video # 13, List Control - Multiple Data Sources - SQL, DBF, Static Data, Custom (Xbasic) and Javascript.
. If you need a refresher on Panel Navigators, watch this video: UX_V12----46. Panel Navigator.

16

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

3. Select a record in the list and click the Show customers in selected
state button.
4. When the state list appears, drag back to return to page 1.
Understanding how this component was created is essential to making the
most of the List Control feature. It is easy enough to produce a list its what
you can do with it makes it an important application tool.

Creating the UX component


The instructions on how to create this mobile application sample are
reprinted here for your convenience. If you are comfortable with the above, you
can go directly to the next section: Understanding List Control sources: on
page 24.
5. Web Projects Control Panel: Create a new UX component and save as
MyOpenReport.

Adding a List Control


This control will list certain fields and all of the records in the table.
6. Expand the Data Controls menu option.
7. Scroll down to [List] and click.
Dialog Title: New Control

8. Name: list1 (each list should have a unique name).


9. Label position: Choose None. (We will put the label in a header.)
10. Click OK.
The [list1] control is placed in the workspace and its properties open to the
right.
LIST PROPERTIES

PROPERTIES: [LIST1]
List Properties: Click the button to open the List Builder.

The builder has four tabs, Data Source, Fields, Properties and List Layout.
11. Edit as follows:
TAB: DATA SOURCE
Data Source Type: Choose SQL.
SQL DATA SOURCE

Connection String: Click the button.


Use a Named Connection string. Choose AlphaSports.*
Method for defining SQL query: Choose FieldsFromTable.
Table name: Click the button and choose Customer.
Field list: Click the button and choose the following fields:
Customer Id.

*. If there is any problem connecting, see Using connection strings developed for this book on page 361.

17

CHAPTER 2. LUSCIOUS LISTS (UX)


Using a List Control to Filter a Report

Firstname.
Lastname.
Bill_City.
Bill_State-Region.
TAB: FIELDS
Accept defaults.
TAB: LIST PROPERTIES
Accept defaults.
TAB: LIST LAYOUT
a. Move

all Table fields to Columns in List.

b. Click

Preview List in bottom left of dialog.

We see that the column names could be shortened for better display. Also, the
Customer ID and State columns could be narrower.
COLUMN PROPERTIES

PROPERTIES: CUSTOMER_ID
Heading: Change to ID.
Column width: .5in

COLUMN PROPERTIES

PROPERTIES: BILL_STATE_REGION
Heading: Change to State.
Column width: .75in

COLUMN PROPERTIES

PROPERTIES: FIRSTNAME, LASTNAME, CITY


Shorten the rest of the column headings as follows:
Firstname to First; Lastname to Last, Bill_city to City.

12. Click Preview List again to check the display.


13. Click OK to close the List Builder.
SET LIST WIDTH

Next, we will set the width of the List to 100%.


This can be done in the Properties > List Properties >
Width setting, but there is an even easier way.
14. With the control selected, click the % button on the
toolbar and choose 100%.
The value is automatically entered in the Properties section.

Adding a Panel Card


15. Select List1 and click Panels > Panel Card.
16. Insert opening and closing tags? Yes. (Click Insert Around)
I know you are tempted, but DONT go to Working Preview yet, because we
have two more things to discuss before we go there.
17. Save the component.

18

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Viewing the report


We have added a report for you.
It shows the customers in the
AlphaSports.mdb
database,
*
organized by State. The List
Control that we just created will
be used to filter the report.
To see the report and test the
connection, go to:
18. Web Projects Control Panel
> Reports (inset).
19. Double click on CustomersByState.a5rpt to open it.
This report requires the following connection string: AlphaSportsMDB. If

the connection is not made automatically, do the following:


a. Top

toolbar: Click SQL.

b. Choose
c. Edit

AlphaDAO Connection Strings.

the path as follows:

:\Alpha_WebMobileBook_3.0_Volume2 \ ABC_WebMobile_Lessons\ SQL: Choose AlphaSports.


d. Double

click on the report again to confirm that it opens.

Once the connection string exists, the report will connect to it


automatically.

20. With the report open in Design mode, click the Preview button on the
report design toolbar (red circle) and look it over (screen shot above).
21. Click Exit Preview when finished and then close the report design window.
22. Return to the MyOpenReport UX component.
PANEL CARD FOR OPENED
REPORT

Next, we will add a Panel Card that will receive the opened report (yellow
below).
23. In the list of controls, select [PANEL CARD END: PANELCARD_1] (pink).
24. Navigator > Panels: Click on Panel Card.
25. Accept the defaults and click Insert After.
Note that this is Panel Card 2.

*. Learn how to make this report and others in Alpha Anywhere Report Writer, Reporting and Charting Made Easy (for Desktop, Web
and Mobile applications) by Susan Hussey Bush. Available at www.libertymanuals.com.
. Instructions for creating this report are in Alpha Anywhere Report Writer, Reporting and Charting Made Easy. For desktop, web and
mobile applications. Available at www.libertymanuals.com.

19

CHAPTER 2. LUSCIOUS LISTS (UX)


Using a List Control to Filter a Report

Adding a button that opens a filtered report


Since it is a client-side action, Javascript is used to define buttons. We will
use Action Javascript to write the code for us. The button will open the report
and then filter it based on the State value in the selected record.
CLICK VS ON CLICK

UX components have two sets of Javascript actions. (For example, you can
use either click or onClick to define what happens when the button is clicked.)
As its name implies, the first group works for both mobile and web. The second
is best reserved for web apps.
Javascript (Touch, mouse, pointer events) > click.
Recommended for mobile and web applications.
Javascript > onClick.
The original, designed for web applications. Works with mouse /
pointer.
To begin, we will insert the button that opens the report after the List Con-

trol. Then we will define the action to be taken when the button is clicked.
26. In the builder listing, select [list1].
27. Navigator > Other Controls: Click on [Button].
BUTTON PROPERTIES
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON]
Button text: Change to Show customers in selected state.
click: Click the button. Enter as follows:
a. Editing
b. Click

mode: Choose Action Javascript.

Add New Action.

c. Categories:
d. Actions:
e. Click

Choose Reports.

Choose Open a Report, Label or Letter layout.

OK.

Dialog Title: Action Javascript - Edit a Report, Label or Letter layout


f.

Layout print definition > Report name: Click the button.

Dialog Title: Report Print Genie


g. Layout

type: Report.

h. Layout

name: Click Select.

Dialog Title: Select Layout


i.

Choose MyCustomersByState.

j.

Click OK.

Dialog Title: Report Print Genie


k. SQL

20

Filter: Click Build.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Specify Filter

FILTERING WITH A LIST


CONTROL

We will use a field in the List control to filter the report.


l.

Define the filter as follows:

Bill_state_region='{List::list1::BILL_STATE_REGION}'
Clicking Insert field from Current Component will bring up the
second half of the filter.
Dont forget the quotes.
m. Click

HTML VS PDF

OK twice.

Reports can be viewed in two formats PDF and HTML.


PDF works best for Free-form reports.*
HTML works best for Layout Table reports.
Since ours is a Layout Table style report, we will choose HTML. We dont

need the print/export options, however, so we will remove them.


Dialog Title: Action Javascript - Edit a Report, Label or Letter layout
n. Layout

Print Definition > Initial View: Choose HTML.

o. HTML

Report Viewer Options. Uncheck the following.

Export to Excel, Export to Word, Export to Text & Print.


TARGET WINDOW, DIV,
PANE

Next, we will tell Alpha Anywhere where to display the report. Options are
Window, DIV, Tabbed UI Pane, Download, Xbasic, Panel and Dynamic Panel.
We want to show the report in the Panel Card 2, the
one that we created for it (see Panel card for opened
report on page 19).

p. Target

Window, DIV

Target: Choose Panel.


Target Panel: Choose PANELCARD_2.
q. Click

OK.

28. Comment: Enter Open CustomersByState report. (Click OK)


Dialog Title: Edit Click Event.

29. Click Save.


30. CTRL + S to save the Component.
Oops we have an error here. Alpha Anywhere notifies us all Panels in a UX
must be contained within a single top level Panel Layout or Panel Navigator. We
currently have 2 Panels at the top level of the Component.
Adding a Panel Navigator will get us back on track.
*. Alpha Anywhere has two report styles, Free-form and Layout Table. This one is a Layout Table.
. The tips window at the bottom of the Properties list describes how these are used.

21

CHAPTER 2. LUSCIOUS LISTS (UX)


Using a List Control to Filter a Report

31. Click OK to dismiss the error message.

Adding a Panel Navigator


We will use a Carousel style Panel Navigator in this example. If you have
watched the videos like good boys and girls, you will know that this permits the
end user to switch between panels using a swipe motion with the fingers. On a
standard computer, this is accomplished by using the mouse to drag from one
panel to the other.
PANEL NAVIGATOR
STYLES

There are several styles, all of which can be seen in Panel Navigator Properties > Navigator type. The default is Carousel, which is the one we will use
here. The others are: Programmatic, TabButtons, TabBand, List and OrientationChange.
32. Controls list: Select the top control and drag to the bottom until all controls are selected.
33. Navigator > Panels: Click [Panel Navigator].
34. Insert opening and closing tags = Yes. (Click OK)
The Panel Navigator surrounds the controls (aqua below)
35. Save and go to Working Preview.

36. Display: Choose iPhone 4 (horizontal).


37. Select the record for Lee Ann Mederos, NY.
38. Scroll down in the phone simulator (yellow above) until you see
the button (green) and click.
The report is shown in Panel 2.
39. Using the mouse, drag the report panel slowly to the right (simulating a finger swipe on an actual phone) until you can see both panels.
40. Continue the swipe until Panel 1 comes completely into view.
41. Test the design with the other device simulator displays.
42. Return to Design mode.

22

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Giving the panel a header with a title


A title will identify the
purpose of the pane.
Placing it in a header
will give a more finished
look.

43. Right click on the Panel Card: PANELCARD_1 control (pink


above).

ADD HEADER

44. Select Header and click Yes to turn it on.


ADD STATIC TEXT

The title is created with a Static Text control.


45. Select the PanelHeader: CONTAINER_1 control (yellow above).
46. Navigator > Other Controls: Select Static Text.

STATIC TEXT
PROPERTIES

CENTER TEXT

CONTAINER BEGIN
PROPERTIES

PROPERTIES: [STATIC_TEXT]
Static text: Enter Customers By State.

We want the title to be centered in the header. This is done in the PanelHeader properties.
PROPERTIES: [PANELHEADER: CONTAINER_1]
Container alignment: Change to Center.

47. Save and go to Working Preview.


48. Scroll down to see the button.
Next, we will move the button to the top of the display where it will be easer
to see.

Placing the button at the top of the panel


CONTAINER CONTROL

We want to place the button at the top of the display, under the header and
lock it into position so it will always be in view, even when the user scrolls to
see more records. This action uses a Container control.

23

CHAPTER 2. LUSCIOUS LISTS (UX)


Understanding List Control sources: Using a List Control to Filter a Report

49. Return to Design mode.


50. Controls list: Select [Button: Show customers in se].
51. Using the arrows on the toolbar, move it above [list1].
52. Navigator > Containers: Select Container.
53. Insert opening and closing tags: Yes. (Click Insert Around)
CENTER BUTTON

CONTAINER BEGIN
PROPERTIES
BUTTON PROPERTIES

Now we will center the button. This is done in the Container begin properties. We also need to change the button width.
PROPERTIES: [CONTAINER: CONTAINER_2]
Container alignment: Choose Center.
PROPERTIES: [BUTTON: SHOW CUSTOMERS IN SE]
Container width: Enter 100%.

54. Save and go to Working Preview.


55. Select a record and click the button.
56. Use the cursor to drag back to the contacts list.

57. Close the component when you are finished or leave it open for the next
exercise.
GO TO ALPHA VIDEO
RPT_V12-2

See the following to learn more about alignment.


Videos > Filter: Enter Align. Choose:
RPT_V12--2. Using HTML Reporting in a Mobile Application.
See also B. Aligning Buttons in Panel Cards on page 124.

Understanding List Control sources:


Now that you have an understanding of how lists work and how they can be
used, it is time to dig into the details about the various data source types that are
available.

24

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Data can come from an SQL or DBF database, a Static list, an Xbasic function that is used to call the list (Custom) or a Data Series (like that in a chart).
A UX can have multiple lists. Each can have the same or a different data
source. Because the each work independently, the sources can be the same or
different type. This series of exercises will show how that works.
We will cover the following types:
Using Static data on page 25.
B. Using Data from a SQL Database
D. Using a Custom Data Source
Using a Custom Data Source on page 30.
The videos are listed on page 36.

A. Using Static data


Static means the data does not change and is hard coded into the component, meaning it can only be changed within the UX itself. While the display
methods are fairly sophisticated, it is best used for short, unchanging lists.
1. Web Projects Control Panel: Create a new, blank UX Component.
2. Controls > Data Controls: Click List. Name = Static_data. (Click OK)
3. Save the component as MyDataSources.
4. Properties > List Properties: Click the button.
5. Data Source Type: Choose Static.
6. Static Data > Static Data: Click the button.
a. Static

Choices: Click Sample data with headers to enter the data.


DATA WITH HEADERS

Data is entered with pipe


delimiters (the pipe key is
located above the \ on most
computers).
The top row (yellow)
defines the column titles.
There can also be headers
(pink) that further organize
the data.

25

CHAPTER 2. LUSCIOUS LISTS (UX)


Understanding List Control sources: Using Data from a SQL Database

FIELDS

HEADER TEXT

DATA

The first row (yellow above) defines the field names (see step 7):
Firstname | Lastname | City | State.
The second row (pink above) defines header text (optional):
{'*title' : 'Existing Customers'}
Rows 3 - 6 specify the data using this format:

HEADER TEXT

John | Smith | Boston | MA


Row 7 defines another header text row.

DATA

{'*title' : 'Prospects'}
Rows 9 - 11 specify the rest of the data.

SPECIFY DATA TYPE

You can also define the data type for each column by including it in the column name.
a. Click

Advanced Options to see an example:

Product Id=N | Description | Price=N


1 | Apple iPad | 499
2 | Microsoft mPad | 799

The dialog also shows how header text can be placed as above.
b. Close

the dialog.

7. Click OK.
Once the field names have been specified, all lists have the same options.
8. Go to the Fields tab.
The fields defined in step are shown, with their types. Server- and Client-side formatting can be defined as with any other type of list.
9. Go to the List Layout tab.
10. Columns in List: Add Firstname, Lastname, City and State.
11. Click OK.
12. Save the component and go to Working Preview to see the list (inset
above).
13. When finished, return to Design mode.

B. Using Data from a SQL Database


This exercise continues from the previous one. The MyDataSources UX

component should be open in Design mode.


We encourage you to do this section even if you are using a DBF data type
because we hope that you will eventually switch to SQL!
Lists that are composed of data from an SQL database are displayed using a
Connection String in the usual manner (see step 11 on page 17).

26

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

1. Add another List Control. Name: SQL_List_Filtered


2. List Properties: Open the List builder. (Properties > List Properties)
3. Data Source Type: Choose SQL.
4. SQL Data Source > Connection string: Choose AlphaSports.

Defining the query


There are two ways to define the query.
FieldsFromTable. The Table name and fields are selected in turn as
we did in the above exercise.
Custom: Uses the SQL Genie to create the Select Statement.
Since we used the first option in the previous exercise, we will use Custom
this time.
5. Method for defining SQL query: Click the button and choose Custom.
(Click OK)

Using the SQL genie


This builder makes it easy to create your own SQL Select Statements by
defining the Query (yellow below) at the relevant tabs: Properties, Tables, Columns (Fields), Filter and Order.
6. SQL Statement: Click the button.
a. Tables

tab > Selected Tables: Click Add Table and choose Customer. (Click OK)

b. Columns

tab: Choose Customer_id, Firstname, Lastname, Com-

pany.
c. Filter

tab:

Column/Expression: Choose Company.


Operator: Choose is before.
Value/Expression: Click the button.
Literal Value: Choose GroveMart
d. Order

tab:

Double click on Company to place it in Selected Sort Columns.

27

CHAPTER 2. LUSCIOUS LISTS (UX)


Understanding List Control sources: Using Data from a SQL Database

e. Click

FILTER & ORDER

OK.

As we learned from personal experience, it is easy to forget which settings


are where, so keep this in mind:
Filtering and Ordering of the data is done in the SQL Genie.
Display order and selection of the columns is done at the List Builder
> List Layout tab.
Next, we will choose the columns to be displayed.
7. List Layout tab > Columns in List: Add and order as follows:
Company, Firstname, Lastname, Customer_id.
We want the Customer_id column to be centered.

COLUMN PROPERTIES

COLUMN PROPERTIES: CUSTOMER_ID


Data in-line style: Click the button.
a. Text

> Alignment: Choose Center. (Click OK)

8. Click OK to close the List Builder.


Before previewing, we will change the height and width.
LIST PROPERTIES

PROPERTIES: [SQL_LIST_FILTERED]
Height: 1.5in
Width: 6in.

28

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

9. Save the component and go to Working Preview.


The
second
list
appears below the
first one. They have
different sources and
act independently.
The list from the SQL
table shows only
three records, due to
the filter.
Next, we will add a
list from a DBF
source.
10. Return to Design
mode.

C. Using a DBF Data Source


This exercise continues from the previous one. The MyDataSources UX

component should be open in Design mode.


If you are using a SQL database, you can skip this section and go to Using
a Custom Data Source on page 30.
While SQL is highly recommended, you can also use DBF data sources. The
builders should be familiar to users of this data type, so we will just give the
entries.
1. Add another List Control. Name: DBF_List.
2. Go to the List Builder. (Properties > List Properties)
3. Data source type: Choose DBF.
4. Data source: Click the button.
a. Tables

tab: Click Add Table and choose Clients.

b. Field

tab: Choose Client_Id, First_Name, Last_Name, Company.

c. Click

OK.

5. Filter: At the Expression builder, enter:


Company < G
6. Order: At the Order Builder, choose Sort by: Company.

29

CHAPTER 2. LUSCIOUS LISTS (UX)


Understanding List Control sources: Using a Custom Data Source

FILTER & ORDER

It is easy to forget which entries are made where. Keep the following in mind
as you work:
Filtering and ordering of data is selected here (Data Source tab).
Order and selection of columns is made at the List Layout tab.
7. List Layout tab > Columns in List: Add as follows:
Company, Last_Name, First_Name. Client_Id.
8. Click OK to close the List Builder.
Next, we will make the list a bit wider.

LIST PROPERTIES

PROPERTIES: [DBF_LIST]
Width: 8in

9. Go to Working Preview.
The list appears below
the SQL list. We now have
three independent lists,
each with its own data
source, order and filter.
Now we will add another
this time the data will
come from an entirely different type of source.
10. Return
mode.

to

Design

D. Using a Custom Data Source


This section continues from the previous ones. MyDataSources should be

open in Design mode.


Even if you do not plan to use an alternate data source, we suggest you complete the exercise because it has some important tips on copying Xbasic
from sample components.
So far, we have examined how to use static data and that which comes from a
database. There may come a time, however, when you need to access data from
a source on the web. This is where the Custom data source comes into play.

30

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

In this exercise, we will get data from the Yahoo! finance web server.* First,
we will show historical data for GM; then we will define a drop down box from
which we choose other stocks.
This does require the use of Xbasic, but we will give you all the code. If the
need arises, you should be able to able to adapt it to your particular situation.
VIDEO! SEE P. 36

You may want to watch the videos on the Custom Data Source first and then
come back here for the settings.

Defining the function


Before we can define the List Control, we need to prepare the Xbasic Function. Here is the process for including user defined Functions in components:
The Xbasic script is defined in the Code section.
The script is then referenced elsewhere in the component the List
Builder, in this case.
1. To go Code > Xbasic functions.
ENTERING THE CODE

There are two ways to enter the code. You can type it in or copy and paste
from a sample component. We have reproduced the code below so you can
examine it and have it for future reference, but for this exercise, we will copy
and paste it from our sample.

Returning a single value


To begin, we will get the data for a single stock, General Motors. Its ticker
symbol is GM.

2. Open the DataSources UX component in Design Mode and go to Code


> Xbasic Functions.
3. Highlight the entire script and press CTRL + C.
4. Go to your component (MyDataSources) and paste the code.
This code has been set up to illustrate both scenarios described in the videos.
A. Return a single value (GM) or
B. Return the value selected in a DropDownBox.

*. The Yahoo! finance service is designed to be very easy to use and its free!. To get more information, Google http ichart.finance.yahoo.com table.csv parameters. We thought this site was interesting: http://www.wikijava.org/wiki/Downloading_stock_market_quotes_from_Yahoo!_finance, although you may prefer one of the others.

31

CHAPTER 2. LUSCIOUS LISTS (UX)


Understanding List Control sources: Using a Custom Data Source

COMMENT IN / OUT CODE

Currently, the action is set to get the value from the DropDownBox, so we
need to comment in / out some of the code so we can switch to single value.

5. Select the code for Option B (highlighted above left) and click Comment Out.
Single quotes are placed at the left of each line. This tells Alpha Anywhere to ignore these lines.
6. Select the code for Option A (arrow above) and click Un-Comment
Out.
This line is now active and the code should appear as No. 2 above.
Here is the script. The line for getting data from a single source is in red.

THE CODE

function getData as c (e as p)
HARD CODE TO A
SINGLE VALUE

'Set the ticker to GM


dim ticker as c = "GM"
dim dt as d = date()

SET UP DATES

dim yearN as n = year (dt)


dim monthN as n = month (dt) - 1
dim dayN as n = day (dt)
if monthN <= 0 then
monthN =12
yearN = yearN-1
else
monthN= monthN-1
end if
dim year as c = ""+yearN
dim month as c = ""+monthN
dim dayNumber as c = ""+dayN

32

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

YAHOO URL

dim url as c = "http:// chart.finance.yahoo.com/


table.csv?a="+month+"+&b="+dayNumber+"&c="+year+"&s="+ticker
dim data as c = http_get_page2 (url)
'data returned by yahoo is chr(10) delimited, not crlf delimited!

CHANGE DATA TO CRLF


DELIMITED
SORT DATA OLDEST ON TOP
DEFINE COLUMN TITLES

'data is returned with newest data on top. We want oldest data on top, so
sort the data.
data= word(data,2,chr(10), 999999)
data = strtran(data,",","|")
data = sortsubstr(data, chr(10), "A")
dim heading as c
heading = "Date|Open|High|Low|Close|Volume|AdjClose"
data = heading + crlf() + data
getData = data
end function

Defining the List Control attributes


Now we are ready to define the List Control. We will also make it a bit wider
and place its label above the list.
7. Controls > Data Controls: Add another List Control. Name: Custom_List.
FIELD LABEL
LIST PROPERTIES

PROPERTIES: [CUSTOM_LIST]
Position: Choose Above.
Width: 8in.
List Properties: Click the button.
a. Data

Source Type: Choose Custom.

33

CHAPTER 2. LUSCIOUS LISTS (UX)


Understanding List Control sources: Using a Custom Data Source

b. Custom

> Xbasic function name: Click the button and enter the name
of the function, getData.

c. Click

the Fields tab.

If you have properly defined the function, the fields will appear. If not, you
will get an error message and its back to the drawing board.
d. Click

the List Layout tab and select the fields.

e. Click

OK.

8. Go to Working Preview to see the GM records displayed with oldest


records first.
9. When finished, return to Design mode.
Next, we will define a DropDownBox that selects the stock.

Returning the value from a drop down box


Creating a drop
down box for the
selection is easier
than you might
think.
In this case, we
will use a Static
list of four stocks,
identified by their
ticker names:
General Motors = GM, Yahoo = Yhoo, Google = Goog, Apple = Aapl.
We will also change the display to show the most recent stock prices first.

34

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

This exercise will use the same code as in the previous one. We need only

create the DropdownBox and make two modifications to the script.

Defining the drop down box


10. Controls > Data Controls: Add a DropdownBox control to the list.
Name: Ticker.
11. Move it above [Custom_List] and remove the Break.
Now its time to set up the choices for the DDBox. We also need to refresh
the data when a change is made in the box. While were at it, well set the
default value to GM and move the label above the box
FIELD PROPERTIES

PROPERTIES: [TICKER]
Default value: Enter GM.
Choices: Click the button.

DROP DOWN BOX


PROPERTIES

a. Choices
b. Enter

are: Choose Static.

the following, each on a separate line:

GM
YHOO
GOOG
AAPL
c. Click
JAVASCRIPT

OK.

onChange: Click the button.


a. Editing
b. Enter

mode: Text mode.

the following:

{dialog.object}._refreshListData('Custom_List');
[Custom_List] is the name of the List Control.
FIELD LABEL

c. Click Save.
Position: Choose Above.

Modifying the code


All we need to do now is modify the existing code slightly.
12. Go to Code > Xbasic functions.

35

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Using a Custom Data Source

CHANGE FROM HARD CODED DATA SOURCE


TO DROP DOWN BOX

13. Select the line in yellow and click Comment Out (or add an apostrophe before the
line).
14. Un-Comment Out the lines shown in pink
by selecting and then clicking the button or
removing the apostrophe before each.

NEWEST DATA FIRST

This time we want to see the newest data first.


15. Comment Out the following line:
data = sortsubstr(data, chr(10), "A")
Since we have already set up the List Control, there are no changes there.
16. Save the component and go to Working Preview.
17. Make some selections from the Drop Down Box.
18. Close all open components when you are finished.

GO TO ALPHA VIDEO
UXL_V12--1,3

Videos > Filter: Enter List Control. Choose:


UXL_V12--1. List Control - Introduction (Static data source).
UXL_V12--3. List Control - Multiple Data Sources (SQL, DBF and
Custom data sources).

Improving the Appearance of Lists:


The default settings for lists work fairly well, but there are customization
methods that will improve their appearance. In this section, we will show how
to adjust column widths, display the data in a row type format rather than columns, give some interesting image display options, and create conditional
styles, text and items.
A. Adjusting the Column Widths
B. Understanding Fill Container options
D. Defining FreeForm Layouts
E. Defining Computed Columns
F. Displaying Images
G. Defining Conditional Styling
H. Understanding Record Limits & Pagination
The videos follow each section.

36

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

A. Adjusting the Column Widths


COMPLETED COMPONENT

The completed UX component for this section is List_Appearance (in the

List Controls Web Project).


VIDEO! SEE P. 38

While completing the previous exercises, you no doubt noticed that the column widths were not always ideal. Sometimes they were larger than necessary
and other times they were too small.
There are three ways to specify list widths:
Relative: You can define their relative size so that regardless of the
width of the list itself, the columns will maintain their proportions.
Absolute: You can define with inches, points, pixels, etc.
Combination: You can make certain columns relative and others
absolute.

Defining relative (flex) column widths


By default, column widths are set at a special setting called flex(1). This
means that, regardless of the width of the list itself, column widths will be proportionately equal to each other.
The following screen shot shows:
The default view [all columns = flex(1)] in iPhone vertical and
Adjusted flex widths in iPhone vertical and horizontal.

We have a component ready for you to explore this feature. Since relative
column width is important for mobile applications, we have set it up with a
Panel Card and the Mobile Simulator.
1. WPCP > List Controls Web Project: Open List_Appearance in Design
mode.
LIST WIDTH

This List control has the following setting for the width of the list itself:
Properties > List properties: Fill container = Yes.
2. Flex_Width List Control: Go to the List Builder > List Layout tab.
3. Examine the widths for each of the columns.
<LogicalRowNumber> = flex(1)

37

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Understanding Fill Container options

Firstname = flex(3)
Lastname - flex(4)
City = flex(3)
State - flex(2)
FLEX CALCULATION

To see how the numbers are calculated, go to the width of any column and
click the button. Heres a recap of what it says but keep this in mind:
You dont have to know any of this in order to effectively use flex. Just
experiment and it wont be long before you have a sense of how it works.
Flex columns automatically grow to consume the available space. If you
have only one flex column, the number you specify is irrelevant. However, if
you have more than one flex column, the number is relative to the size of that
column and relative to the other flex columns.
Alpha Anywhere uses the following formula to compute the actual width
Adds all of the flex numbers and
Divides the total width of the flex columns by this number and
Multiplies this number by each flex columns flex number property.
For example, say you have a list that is
10in wide with 4 columns with these widths:
1in, flex(1), flex(2), 2 in.

The combined width of the flex columns will be 7in (10in - 1in - 2in = 7in).
The actual size of each flex column will be:
flex(1) = (7/3) in
flex(2) = 2 * (7/3) in

4. Click Cancel (twice) and go to Working Preview.


5. Examine results at iPhone and iPad horizontal and vertical views to
see the manner in which the relative widths are maintained.
6. Close the component when finished.
GO TO ALPHA VIDEO
UXL_V12--5

The above is fully demonstrated in this video.


Videos > Filter: Enter List Control. Choose:
UXL_V12--5. List Control Flex Column Widths.

B. Understanding Fill Container options


COMPLETED COMPONENT

The completed UX component for this exercise is listsInPanels_revised (in

the List Controls Web Project).


There are several ways to take advantage of the Fill Container option
available for List Controls in mobile applications. You can fill the full width of

38

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

the Panel Card, place the list within a container border or place a border around
the list.

VIDEO! SEE P. 42

For this example, we will use a sample UX component supplied with the
video. We have downloaded it for you and placed it in the List Control Web
Project. If possible, watch the video first and then come back here for the settings.
1. WPCP > List Control Web Project: Open the listsInPanels_revised
UX component.
We have revised the component slightly for added clarity. The original
is also available (under the name, listsInPanels).
2. Go to Working Preview and click the buttons (A, B, C, D) to see the
various displays.*
Button C: In order for the map to display, an Internet connection on
the current machine is required. Does not affect the exercises, just display of the map at Working Preview.
3. Return to Design mode. We will examine the settings in reverse order.

Filling the width of the container


This is the simplest option one we used in the preceding exercise.
LISTS

Demonstrated with Button D.


This List is inside PanelCard_4.
PROPERTIES: [LIST_FILLCONTAINER]
LIST PROPERTIES

Fill container = Yes.

*. This component uses a Panel Navigator with a TabBand style (discussed in Chapter 3).

39

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Understanding Fill Container options

MAPS

Demonstrated with Button C.


This List is inside PanelCard_3.
The Map component also has a fill container setting.
PROPERTIES: [MAP_FILLCONTAINER]
MAP PROPERTIES

Fill container = Yes.

Placing a border around the list


In the videos, it might appear
that one needs to know CSS
in order to set the borders.
Not so. We can pick most of
the selections at the Style
Editor.
We do not want these Lists
to fill the entire width of the
component, so they are
placed in containers.
The container settings define
the following:
Container_3 (red box):
Defines the placement and
padding for both Lists.
Container_2 (yellow): Defines padding and border type, color and
width for the top List.
Container_4 (aqua): Defines border type, color and width for the
lower List
CONTAINER BEGIN
PROPERTIES

PROPERTIES: [CONTAINER_3]
Container alignment: Left.
Container width: 100%.
Container style: Click the button.
Padding > All: 20px.

CONTAINER BEGIN
PROPERTIES

PROPERTIES: [CONTAINER_2]
Container alignment: Center.
Container width: 100%.
Container style: Click the button.

40

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

There are two tabs, Property and CSS Text.


a. Property

tab: Choose the following:

Border:
Style: Choose Solid.
Width: Enter 1px.
Color: Choose Red.
Padding > All: Enter 20px.
b. CSS

Text tab: Enter the following at the bottom of the list (yellow):

border-radius: 10px;
c. Click

CONTAINER BEGIN
PROPERTIES

OK.

PROPERTIES: [CONTAINER_4]
Container alignment: Left.
Container width: 100%.
Container height: 3in
Container style: Click the button.
Border:
Style: Choose Solid.
Width: Enter 1px.
Color: Choose Green.
The settings are the same for both Lists.

LIST PROPERTIES

PROPERTIES: [LIST_BORDERREDROUNDED] & [LIST_BORDERGREEN]


Fill Container: Yes.

Placing a border around the


container
You can also place a border around the container, rather than the list itself.
Again, the border settings are defined in the
container.
This time the list does not fill the container.
Instead, we will specify the height and width.

CONTAINER BEGIN
PROPERTIES

PROPERTIES: [CONTAINER_5]
Container alignment: Left.
Container width: 100%.
Container style: Click the button.
Border:
Style: Choose Solid.
Width: Enter 1px.

41

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Adjusting the Length of a List

Color: Choose Red.


Padding:
Top: 0px
Left: 20px
Right: 20px
Bottom: 0px
LIST PROPERTIES

PROPERTIES: [LIST_BORDEROUTSIDERED]
Height: 3in
Width: 100%
Fill container: No.

4. Close the component.


Videos > Filter: Enter List Control. Choose:

GO TO ALPHA VIDEO
UXL_V12--41

UXL_V12--41. Placing List Controls inside Panel Cards - Options to


fill or not fill the Panel Card.

C. Adjusting the Length of a List


COMPLETED COMPONENT

The completed component is ListLength (List Control Web Project)

You can define the length of a list absolutely or you can have it fill the available space.
ABSOLUTE LENGTH

You can enter a defined length at:


List properties > Height.

AVAILABLE SPACE

The default length for a list is 3 inches. To have it fill the available space, you
could set it to a length longer than the length of the device in portrait mode (15
inches worked in our test).
List properties > Height: 15in.

VIDEO! SEE P. 43

You may find it better, however, to define it relatively, rather than absolutely.
Just entering a percentage in List properties > Height, however will not work for
reasons well explained in the video.
To accomplish this goal, you will need to use a Panel Layout and set its flow
to Top to Bottom.*

*. Panel Layouts are detailed in Chapter 3.

42

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

This exercise does more than just fill the


length of the device. It goes a step further
by adding a textbox at the bottom. The
goal is to fill the available space with the
list (yellow) yet always leave room to the
textbox (pink).
We have a component ready for you.
Since this is simply a matter of knowing
how to define the settings, we just show
you where they are.
1. WPCP > List Control Web Project:
Open ListLength in Design mode.
This component is based on the Customer table in the
Alpha Sports database.
It uses a Panel Layout, two Panel Cards, a List control and a Textbox control named Input that has a
Watermark label (places the label inside the textbox).
We will take the settings in turn.

PANEL LAYOUT PROPERTIES

LIST PROPERTIES

PANEL SIZE AND DOCK


OPTIONS

FIELD PROPERTIES

PROPERTIES: [PANEL LAYOUT: PANELLAYOUT_1]


Layout flow direction: TTB.
PROPERTIES: [LIST1]
Fill container: Yes.
PROPERTIES: [PANEL CARD: PANELCARD_2]
Layout size: 50px.
Since this is a Top to Bottom flow, size governs the height.
PROPERTIES: [INPUT]
Variable name: Input.
Width: 100%.

TEXTBRX PROPERTIES

Watermark: Yes.
Watermark text: <FieldLabel>

2. Go to Working Preview and test it in all the device simulators.


The list fills the available space, yet always leaves room for the input control.
3. Close the component without changes.
GO TO ALPHA VIDEO
UXL_V12-43

Videos > Filter: Enter List. Choose:


UXL_V12--43. Why Setting List Height to a Percentage Fails and How
to Solve the Problem.

43

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining FreeForm Layouts

D. Defining FreeForm Layouts


COMPLETED COMPONENT

The completed UX components for this exercise are FreeFormLayout_Ori-

entationChange and FreeFormLayout_Select (List Controls Web Project).


VIDEO! SEE P. 52

HOW IT WORKS

In addition to Columnar lists, you can also define custom list layouts called
FreeForm* layouts. This is especially handy for mobile applications where you
might want one style for landscape orientation and another for portrait.
Well show you how to move from columnar to freeform by changing the
device orientation (mobile) or by choosing from a combo box (web apps see
inset below).

The settings are defined in the List Builder:


At the List Properties tab:
Enable the Multiple layouts option.
Opens the Multiple Layouts tab.
At the Multiple Layouts tab, identify the layouts.
At the List Layouts tab, define the layouts.
Mobile only: Return to the List Properties tab:
Enable Orientation change option.
Specify Portrait and Landscape layouts.

We have a practice UX ready for you. It uses fields from the AlphaSports
database and filters out records without a company name. First, we will do the
orientation change and then we will set up the combo box.
1. WPCP > List Control Web Project: Open the FreeFormLayout_Practice UX in Design mode.
2. Save as MyFreeFormLayout_OrientationChange.

*. Do not confuse this with FreeForm areas in Grids. In this case FreeForm describes a layout style, not a section of the component.

44

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

3. List1: Open the List Builder.

Adding another layout


You can have as many layouts as you like.
4. Go to the List Properties tab.
a. Multiple

layouts > Has multiple layouts: Yes.

5. Go to the Multiple Layouts tab (newly opened).


First, we will change the Layout name from Default and then we will add a
new layout.
a. Layout

name: Click the button and change to Columns. (Click OK)


b. Click

Add (button at left of dialog).

Layout Name: Enter FreeForm.


Type: Choose FreeForm. (Click OK)
FRIENDLY NAME

This is what the user will see.


c. Friendly

name: Enter FreeForm.

DEFAULT LAYOUT

This option is for when you have multiple layouts


that display on the same page.
d. Type:

Choose FreeForm.

FREEFORM TYPE

Can be Vertical, Horizontal or Snaking.


e. Freeform

type: Choose Vertical.

The items in yellow above will be used to identify the layout List Layout
page coming up next.

Defining the layout


Now it is time to define the layouts. This consists of selecting fields in the
usual manner for the Columns layout and defining the code for the FreeForm
layout.

45

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining FreeForm Layouts

6. Go to the List Layout


tab:
A new Select Layout option
appears at the bottom of the
dialog.
7. Select Layout > Layout:
Choose Columns to see the
familiar column selections
(inset).
As you can see, we have
already selected the fields
for this layout.
8. Select Layout > Layout:
Choose FreeForm
(Freeform - Vertical).
This is the Name, Type and
FreeForm Type that we
selected on the Multiple
Layouts page (yellow on
page 45).
9. Enter the following, using the field placeholders in the left column:
ID No: {CUSTOMER_ID} Company: <b>{COMPANY}</b> <br />
{FIRSTNAME} {LASTNAME} <br />
{BILL_CITY}, {BILL_STATE_REGION} {BILL_POSTAL_CODE}<br />
{BILL_COUNTRY}
LINE BREAKS

Note the HTML tags at the lower left (aqua above).


Use <br /> NewLine to create new lines.
<b> indicates bold. End bold with </b> as for Company above.

Switching layouts by changing the device


orientation
DONT FORGET THIS!

Were almost done. Just need to identify which layouts are used where.
10. Go to the List Properties tab.
Multiple layouts:
a. Auto-select
b. Layout

for landscape: Choose Columns.

c. Layout

for portrait: Choose FreeForm.

11. Click OK.

46

layout on orientation change: Yes

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

12. Save the component and go to Working Preview.


13. Switch between the Horizontal and Vertical views to see the different
layouts.
14. Return to Design mode.
Next, we will change the layouts by using a combo (drop down type) box.

Selecting the layout style with a combo box


You cannot have both a Panel Card and a list selector, so we will save this
component under a new name and remove the panel card.
While it is not necessary to remove the above orientation settings from the
List Builder, your component would be cleaner if you did.
15. Save
the
component
MyFreeFormLayout_Select.

as

16. Delete the Panel Card (both sections).


17. Turn off the Mobile Simulator
(uncheck Mobile above the component
list).
18. Defined Controls: Add a List-Selector control.
a. Associate
b. Place

with list1. (Click OK)

it above list1.

19. Go to Working Preview and use the combo box to switch back and
forth between layouts
20. Close the component.

47

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining FreeForm Layouts

Using a template to design the freeform layout


VIDEO! SEE P. 52

There is a large and sophisticated group of templates that


will save you the time and
effort of writing your own
code. You will like them a
lot once you get the hang of
using them, but the setup can
be a bit tricky at first.
For this example, we will
use the component that
comes with the video. We
have downloaded it for you.
21. WPCP > List Controls Web Project: Open ux_list_template_practice
in Design mode.
22. Go to Working Preview to view the columnar layout.
No question that this needs improvement.
23. Return to Design mode.
24. Save the component as MyUX_list_template.
25. list List: Open the List Builder.
Data source: Uses the Customers and Orders tables from the Northwinds database.
As you saw at Working Preview, this practice component has been set up
with Columns. We want only one layout and we want it to be Freeform, so we
will change it.
26. Go to the List Properties tab.
Layout Properties:
Layout type: Change to Freeform.
Freeform type: Vertical.

27. Go to the List Layout tab.

48

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

28. Click Pre-defined Templates to open the selection.

Dialog Title: List Template Picker

29. Choose the top template.


At this time, we will simply accept the default properties.
Images are discussed on page 51.
Disclosure icons are discussed on page 51.
30. Click OK to open the Map Template Placeholders dialog.
Above screen shot color coded to identify placeholders.
MAP TEMPLATE
PLACEHOLDERS

The tricky thing about filling in the Map Template Placeholders dialog is that
you no longer have a reference as to which placeholders relate to which fields.
Also, you may want to use multiple fields as in the case of Detail (aqua above)
or you might want Lastname + Firstname but only one field can be entered
here.
This can all be adjusted once the code is on the page, so dont worry about it
too much. Just consider this a starting point.
31. Map Template Placeholders: Fill in as follows:
Context = CustomerID.
Level1 = CompanyName
Level2 = ContactName.
Summary: CountOfOrderid
Detail = ContactTitle.
32. Click OK (Alpha Anywhere fills in the code).
33. Click Quick Preview to see what we have so far (inset below).

49

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining FreeForm Layouts

34. Click OK to close the preview.

TERMINOLOGY

Once the code is on the page, you can adjust as necessary. Note that the terms
used in the Map Template Placeholders dialog are not always the same as those
in the code, nor are they always in the same order. However, you can identify
them by the field names.
35. Click Zoom window so you can see the entire script.
ListItemLabelContext = CustomerID (Context).
ListItemLabelMain = CompanyName (Level 1).
ListItemLabelSub = ContactName (Level 2).
ListItemDetail consists of:
CountOfOrderid (Summary) and ContactTitle (Detail)

ADJUST CODE

The next step is to modify the code to include the address fields.
36. Using the left menu, add the
Address, City and Country placeholders as at left.
Note that City and Country are simply
entered with a space between them:
{City} {Country}
If, for example, your contact name was in two fields (first name and last
name), you could have entered Firstname in the Map Template Placeholders
dialog and then added Last name like this:
ListItemLabelSub">{firstname} {lastname}
37. Click OK to close the Zoom window.
Before we leave this area, there are two more items we need to discuss,
Images and Sub- or Dynamic Templates.

50

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

IMAGES

You can add an


image to a template.

a. Click

Pre-defined Templates to open the List Template Picker.

b. Select

a template and go to its Properties.

c. Image

on left: Yes.

At this writing, there is no entry for Images in the Map Template Placeholders dialog, so you will need to identify it manually.
If the image is coming from a field in the table, be sure to include it in
the DataSource > Fields selection so it appears in the Placeholder list.

SUB (DYNAMIC)
TEMPLATES

In many cases, you will probably want to use this list to open another component or list. These are called Sub- or Dynamic Templates.
DISCLOSURE ICON

The List Template Picker


has a graphic entitled Disclosure icon. It is generally
used in conjunction with a
sub-template,
indicating
there is more to follow.

The disclosure icon is available in three different styles: Bold, Subtle and
User Defined.
d. Click

Cancel to leave the List Template Picker dialog and return to


the List Layout Template.

There is a dialog with instructions and examples of how sub-templates are


created.
a. Click How

JAVASCRIPT NOTES
ELSE CONDITION

to make a dynamic template (above the code).

This dialog contains the following notes about writing Javascript:


The else condition that selects a sub-template is defined as follows:
If none of the prior conditions is true: {condition:else}
Also acceptable: {condition:1==1}

51

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining FreeForm Layouts

CASE SENSITIVE

LOGICAL EXPRESSION

Remember: Javascript is case sensitive.


Right: data.State (for a field named State).
Wrong: data.state
Logical expressions use two equals (=) signs.
Right: data.State == MA
Wrong: data.State = MA
Copy template to clipboard (bottom of dialog) places the following code on
the clipboard.
{*if State == 'MA'}
put template for 'MA' here
{*elseif State == 'CA'}
put template for 'ca' here
{*else}
put else here
{*endif}
b. Close

the Dynamic Template dialog.

Now its finally time to see the results of your work.

38. Click OK to close the List Builder.


39. Save the component and go to Working Preview.
40. Close the component when finished.
GO TO ALPHA VIDEO
UXL_V12--4, 6, 35, 37

Videos > Filter: Enter List Control. Choose:


UXL_V12--4. List Control - Columnar vs. Freeform Layout.
UXL_V12--6. List Control - Multiple Layout.
UXL_V12--35. List Control - Freeform List Template - Pre-defined
Templates.

Exploring more videos


You may also find the information in these videos useful.
HORIZONTAL SCROLLING

A list control is laid out vertically by default. However, there may be times
when you want it laid out horizontally.

The behavior is the same as for vertical, in that the list will scroll if there is
more data than can be displayed on the screen. It is only appropriate for
Freeform layouts because horizontal layouts are meaningless for columns.
The settings can be found at:

52

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

List Builder > List Properties tab: Layout Properties:


Layout type: Choose Freeform.
Freeform type: Choose Horizontal.
GO TO ALPHA VIDEO
UXL_V12-26

This video demonstrates horizontal scrolling and pagination with both the
FetchMore and AutoFetchMore methods (discussed on page 67.)
Videos > Filter: Enter List Control. Choose:
UXL_V12--26. List Control - Horizontal Scrolling.

SNAKING COLUMNS

Snaking columns display the data across the page from top to bottom and left
to right, as illustrated by the numbers under the photos in this screen shot.

As in Horizontal Scrolling above, this feature is available for freeform layouts only. The settings are located at:
List Builder > List Properties tab: Layout Properties:
Layout type: Choose Freeform.
Freeform type: Choose Snaking.
GO TO ALPHA VIDEO

Videos > Filter: Enter List Control. Choose:


UXL_V12--27. List Control - Snaking Column Layouts.
UXL_V12--28. List Control - Snaking Column Layout using CSS and
Media Queries.
Advanced users only. See Snaking Layout with CSS & Media
Queries on page 111.

E. Defining Computed Columns


COMPLETED COMPONENT

The completed UX component for this exercise is ComputedColumns (in

the List Controls Web Project).


VIDEO! SEE P. 57

Columns can be added to the layout that combine data in the current row. For
example, the Lastname and Firstname fields might be used to create a new column named Fullname. These are called computed columns.

53

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining Computed Columns

As long as the fields have been selected for the list (yellow below), their columns may or may not appear on the layout. In other words, you could display
Full_name (green), but not Firstname / Lastname (yellow).

Columns can be computed either Server-side or Client-side.


SERVER-SIDE

Server-side uses a combination of Xbasic and HTML, therefore you have the
full power of Xbasic at hand. This means you can also create tables of data or
just about anything else you would like to display in the new column.
CLIENT-SIDE

Client-side uses Javascript and displays very quickly. The


screen shot above shows the server-side result, but the same
can be achieved with a client-side calculation.
In both cases, builders are available that make these dynamically computed columns easy to define.

Defining server-side calculations


The Custom Control is used to create server-side calculations. It combines
Xbasic with HTML, permitting you to add attributes such as bold to the text.
The Custom Control is a feature of the List Builder.* They can each be set up to
display the same way, so the one you choose will likely be dependent on the
data you want to see. Remember that client-side is always faster than serverside, so that should be the choice if the data can be shown there (as in our examples). If not, server-side will do the job quite well, too.
We have a practice component ready for you.
1. WPCP > List Control Web Project: Open ComputedColumns_Practice in Design mode.
2. Save as MyComputedColumns.
3. Server-side List: Go to the List Builder.
*. At this writing, there is no control named Custom in the UX Builder list of Data Controls or Other Controls.

54

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Data Source tab: Uses the Customer table from the AlphaSports SQL

database with the following fields: Customer_id, Firstname, Lastname, Company.


4. Go to the Fields tab.
a. Click the Add Item button

(below fields list).


b. Choose
c. Name:

Custom Control.

Enter Full_name.

d. Fields

list: Select
Full_name (Custom Control).

e. Custom Control Properties

> Definition: Click the


button.
HTML & XBASIC

The script appears. We need only replace the section identified by the faint
yellow background (inset below). If you do not know HTML, this may appear
intimidating, but it really uses Xbasic with HTML tags that are enclosed in
quotes, the same as text in an Xbasic expression.
<b> starts a bold section.
</b> ends the bold.

NOTE

In the following, Full_name (as in Full_name_render) is the name of the


Custom Control.
f.
OVERWRITE THIS

WITH THIS

Overwrite the text with the faint yellow background as follows:

Full_name_render = <<%html% Specify the HTML to be


returned.%html%
Full_name_render = "Fullname: <b>" + ds.data("FIRSTNAME")+ " " +
ds.data("LASTNAME") + "</b>"
The proper code for the fields is easily entered by means of the Insert button
at the top left of the dialog (gold arrow above).
The display says data.Firstname, but the entire expression is actually
entered: ds.data("FIRSTNAME")

55

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining Computed Columns

VALUES IN CURRENT ROW


(DS ARGUMENT)

The ds argument (red above) passes in the current values for each of the
fields in the current List row.
g. Click

OK.

5. Go to the List Layout tab.


The computed column now appears in Available Fields.
a. Add the Full_name field to Columns in List and place as at
left.
b. Make

COLUMN PROPERTIES

the following adjustments (hey, its good review).

PROPERTIES: CUSTOMER_ID
Heading in-line style: Change to text-align; center;
Data in-line style: Change to text-align; center;
Column width: Enter flex(1)

COLUMN PROPERTIES

PROPERTIES: FULL_NAME
Heading: Change to Customer.
Column width: flex(3)

COLUMN PROPERTIES

PROPERTIES: COMPANY
Column width: flex(2)

6. Click OK.
We need to make the display a bit wider.
LIST PROPERTIES

PROPERTIES: [SERVERSIDE]
Width: Change to 6in

7. Save the component and go to Working Preview to inspect.


8. When finished, return to Design mode.

Defining client-side calculations


Client-side calculations use Javascript. You can also use HTML tags, but be
sure to test thoroughly, because not all Browsers support them.
9. ClientSide List: Go to the List Builder.
Data Source tab: This list uses the same database, table and fields as
the above exercise.
10. Go to the List Properties tab.
a. Computed Columns > Computed columns:
Click the button.
b. Enter the following, using Insert field name
for fields.

56

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

data.FN = 'Fullname: ' + '<b>'+data.FIRSTNAME +' '+


data.LASTNAME+'</b>'
In Javascript, field names are preceded by data. as in data.FIRSTNAME.
data.FN = (red above) defines a new column named FN.
Be sure to test the HTML tags. Not supported in all Browsers (worked for us
in Chrome).
11. Go to the List Layout tab.
The computed column appears in the list of
Available Fields as a virtual field.
a. Add

FN (Virtual) to Columns in List as at left


(green).

b. Adjust

the column properties as step b on


page 56.

12. Click OK.


Just need to make the list a bit wider and were done.
LIST PROPERTIES

PROPERTIES: [CLIENTSIDE]
Width: Change to 6in

13. Save the component, go to Working Preview to inspect.


The lists should be identical.
14. When finished, close the component.
GO TO ALPHA VIDEO
UL_V12--8, 9

Videos > Filter: Enter List Control. Choose:


UXL_V12--8. List Control - Custom Control Columns (Server-side).
UXL_V12--9. List Control - Computed Columns (Client-side).

F. Displaying Images
COMPLETED COMPONENT

The completed component is Images (List Control Web Project).


VIDEO! SEE P. 60

You can display images from a database (data bound) or


from a stock of built-in Alpha Anywhere images.
The latter is excellent for quickly identifying the contents of a column as at the left, where a green ball identifies Last_name = Bush and a red one marks records
where Last_name = Hussey. You can also use any other
images just add them to the project.

57

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Displaying Images

Displaying images from the database


For the most part, images are displayed just like other fields, but there are a
couple of things you need to know.
The image type must be identified. The default is .JPG. If you are
using another, you will need to change the setting (see below).
Image display uses a lot of resources, therefore you will want to either
limit the number of records displayed in a given page or set the list to
automatically fetch more records once the given limit has been
reached.*
You can also have the image display in a character field that contains
the name of the image (this is explained in the videos).
PNG, JPEG, GIF, BMP, OLEBMP
IMAGES

If you are using an image file type


other than .jpg, do the following.
a. Open

the List Builder.

b. Data

Source tab: Specify the data


source type, table and fields (including
the image field) in the usual manner.
c. Go

to the Fields tab.

d. Select

the image field.

e. Image Properties > Image type: Choose


the file type.
f. Go to the List Layout tab and add the
fields (including the image field) in the
usual manner.

Next, we will show how to add an image based on the contents of the row.

Defining conditional images


Graphics always add interest to an application.
SYSTEM IMAGES

Alpha Anywhere make it easy to add icon type images because a large list
of built-in images is available. Since they are a part of the system, they do not
need to be added into the project.

CUSTOM IMAGES

You can also use your own images, but they must be loaded into Web Projects Control Panel > Images in order for the system to recognize them.
We have a component ready for you.
1. WPCP > List Control Web Project: Open Images_Practice in Design
mode.
2. Save as MyImages.

*. See Auto fetching records on page 71.

58

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

3. List1: Open the List Builder.


DATA SOURCE AND FIELDS

This time the data source is an SQL database called ABC_Seminars_Access.


It uses the Employees table and several fields have been selected, including an
embedded image file.
The Photo_embedded field has nothing to do with this exercise on conditional images, but it does give an example of an database image as we discussed
above (Displaying images from the database on page 58).
4. Go to the Fields tab.
5. Click Add Item (bottom of fields list) and choose Dynamic Image.
6. Name: Enter image1. (Click OK)

DYNAMIC IMAGE PROPERTIES

PROPERTIES: IMAGE1 (DYNAMIC IMAGE)


Image definition: Click the button.
Dialog Title: Conditional Image
a. Click

Add Condition.

b. Expression:

Enter:
Last_name = Hussey

c. Image

Name: Click Select.

You can choose either a


built-in image or one in the
web project or a fully qualified image URI.*

d. Built-in
e. Filter
f.

image: Click the button.

on: Enter green.

Choose the large green ball. (Click Insert)

g. Click

OK twice.

Dialog Title: Conditional Image


h. Click

Add condition again.

i.

Expression: Enter Last_name = Bush

j.

Image Name: Click Select.

k. Built-in
l.

image: Click the button.

Filter on: Enter red and choose the large red ball. (Click Insert)

m. Click

OK three times.

7. Go to the List Layout tab.


*. Data URI Scheme: The data URI scheme is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include
data in-line in web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single HTTP request rather than multiple HTTP requests,
which can be more efficient.
http://en.wikipedia.org/wiki/Data_URI_scheme 12.15.2013

59

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining Conditional Styling

8. Add the image1 field to Columns in List (top position).


This is a small image, so we will change the column width.
COLUMN PROPERTIES

PROPERTIES: IMAGE1
Column width: flex(.5)

9. Click OK.
10. Save the component and go to Working Preview to inspect.
11. Close the component when finished.
GO TO ALPHA VIDEO
UXL_V12--7, 11

If you are working with images from a database, be sure to watch the series
on Data Bound Images below.
Videos > Filter: Enter List Control. Choose:
UXL_V12--7. List Control - Dynamic Image.
UXL_V12--11. List Control - Working with Images - Data Bound
Images.

G. Defining Conditional Styling


COMPLETED COMPONENT

The completed components are UX_conditionalstyle and listClientsideCon-

ditionalStyle (List Control Web Project).


The appearance of fields can be based on values in the row. In other words,
all or part of the record might be red, bold, italic if the country is USA. Underlining and various other formatting options are also available.

You can also define alternate row colors and background colors for items
such as buttons (screen shot on page 63).

60

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

VIDEO! SEE P. 65

SERVER-SIDE

CLIENT-SIDE

For this section, we will use a component from the Videos help section. We
have downloaded it and placed it in the List Control Web Project. If possible,
watch the video first and then come back here for the settings.
Conditional formatting can be done server-side or client-side. This example
uses four different methods. Heres the break down:
Uses Xbasic. You can write any code that you need. Well show you how to
do this:
If Country = USA, record is red.
If Country = USA, City field is red, bold, italic.
Uses Javascript, Again, we use simple expressions, but you can write any
Javascript that you need. Well show you how to do this:
If Country = UK, record is blue.
If Country = Germany, CustomerId field is underlined.
Since we are working with a prepared component, we will just give the settings, rather than taking you through a practice component.

Defining server-side conditional formatting


Conditional server-side formatting can be done in both List Properties (for
the entire record) and/or defined for an individual field (Fields tab).

1. WPCP > List Control Web Project: Open UX_conditionalstyle in


Design Mode.
2. Go to Working Preview and scroll through the records to see the formatting for USA records.
The entire record is red and the City field is red, bold, italic.
3. Return to Design mode and go to the List Builder.
Data Source: This list is based on the Customer table of the Ms Access
Northwind database. Several fields have been selected.
ENTIRE RECORD ROW

First, we will show how to format the entire record row.

61

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining Conditional Styling

FORMAT ENTIRE RECORD ROW

4. Go to the List Properties tab.


a. Conditional

Row Style >


Server-side computation:
Click the button.

b. Click

Add Condition.

c. Logical

Expression: Enter
Country = USA

Note the aids for inserting Field


names and Functions.
d. Style:

Choose Use basic

style.
e. Choose

the desired formatting option(s) (in this case,


the font color is red).

f. Click

Cancel twice.

In this case, the record row has already been defined, so the field inherits
those settings. In other words, the City field font is already red. We just need to
make it bold, italic.

SINGLE FIELD

5. Go to the Fields tab.


SERVER-SIDE

PROPERTIES: CITY (C)


Conditional style: Click the button.
a. Click

Add condition.

b. Logical
c. Style:

Expression: Enter Country = USA

Use basic style. Choose Bold, Italic. (Click Cancel twice)

Now we will explore the client-side options.

Defining client-side conditional styling


All client-side conditional formatting for client-side records is done at the
List Builder > List Properties tab.

ENTIRE RECORD ROW

6. Go to the List Properties tab.


7. Conditional Row Style > Client-side computation: Click the button.

62

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

This time the


expression is written in Javascript.
a. Click

Insert
Fieldname. Select
data.Country (C).
b. Complete

as fol-

lows:
data.Country =
'UK'
c. Style: Use basic
style: Choose Blue
Font color.
d. Click Cancel
twice.

SINGLE FIELD

Fields are also formatted at List Properties.


8. At the List Properties tab, go to:
Javascript - Render Time > OnBeforeItemDraw

9. Click the button.


a. Enter

as above:

if(data.Country == 'Germany') {
data.CustomerID = '<u>' + data.CustomerID + '</u>';
}
b. Click

Cancel (twice).

10. Close the component (the next exercise uses a different one).

Understanding the onItemDraw event


The onItemDraw event is a client-side action that can be used to set background colors of rows and items such as buttons.*
*. Adding buttons to List Controls is discussed on page ______

63

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Defining Conditional Styling

It can also place text from a field in the row


on an item as in the last record where the
button name has been changed to match the
Lastname field.
There are three things happening in this
example:
If State = Ma, yellow background for
button.
If Lastname = Dawkins, put field
name on button.
Alternate the row colors.
This is all done with a single script written
at List Properties.
VIDEO! SEE P. 65

Again, we will use a prepared Alpha component, so we will simply explain


the settings. If at all possible, watch the video first.
11. WPCP > List Control Web Project: Open the listClientsideConditionalStyle UX component.
12. Go to Working Preview to inspect.
13. Return to Design mode and open the List Builder.
Data source: Static data from sample list.
14. Go to the List Properties tab.
15. Javascript > Render Time > onItemDraw: Click the button.

64

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

The following Javascript has been entered, much of which was written using
the Insert aids at the bottom of the dialog (blue underline).
Element Placeholders are fields / buttons in row.
Click Examples of typical onItemDraw event handlers to see sample code

for alternate row colors.


PLACE FIELD VALUE ON
BUTTON

if(data.State == 'CO' ) {
var e = {listElement:btn1};
e.innerHTML = data.Lastname;
}

FORMAT BUTTON
BACKGROUND

if(data.State == 'MA') {
e = {listElement:btn1}
e.style.backgroundImage = 'none;';
e.style.backgroundColor = 'yellow';
}

ALTERNATING ROW
COLORS*

if( (index % 2) == 0 ) {
ele.style.backgroundColor = '#8496c6';
} else {
ele.style.backgroundColor = '#7685f8';
}

16. Click Cancel twice.


17. Close the component.
GO TO ALPHA VIDEO
UXL_V12--12, 13

Videos > Filter: Enter List Control. Choose:


UXL_V12--12. List Control - Conditional Styling - Server Side and Client-side.
UXL_V12--13. List Control - Client-side Conditional Styling - Using
the onItemDraw Event.

H. Understanding Record Limits & Pagination


Record limits specify the number of records to be displayed, either all records
or a limited number.
VIDEO! SEE P. 71

Pagination means to separate the list content into pages, rather than bringing
up all records at one time. Although this is useful in many situations, it is particularly valuable when working with data that contains a large number of images
since they take considerable resources to display and bringing them up in
batches or pages is more efficient.

*. To learn how to specify CSS colors, see Using the Database Explorer on page 402.

65

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Understanding Record Limits & Pagination

There are six ways to present data:


RECORD LIMIT

No record limit: All the records in the table.


Record limit: Returns a specific number of records.

PAGINATION

Navigate by record: Click a button to go from one record to the next,

bringing up new pages as necessary.


Navigate by page: Click a button to bring up a new page of records.
The previous page is no longer visible.
More records: Click a button to bring up another page of records.
All records displayed to that point remain visible.
Auto fetch more: When the end of the current list is reached, a new page
is displayed. When the end of that page is reached, another is called up and
so on until all have been displayed. Previous records remain visible.
VIDEO! SEE P. 71

We dont have a database with a large number of images, so we leave it to the


video to show how these options affect the display experience.
We will, however, show you how the options are enabled. We have a demo
component ready for you.
1. WPCP > List Control Web Project: Open the Pagination UX component in Design mode.
2. Go to Working Preview.

Viewing the options


There are six frames that demonstrate the record limit and pagination methods. Each of the examples uses a separate list control. They are all set to display
data from the AlphaSports SQL database.
NO LIMIT & RECORD LIMIT

The top frames, show how Lists appear with no limit on the number of
records displayed (below left) and when limited to 5 records (below right).
3. No Record Limit: Scroll through the records to see the entire table.
4. Record Limit: Only the 5 records shown are available.

66

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

NAVIGATE BY RECORD OR
PAGE

The next two frames also show only five records, but the rest of the records
can seen be by clicking the navigation buttons or icons below the lists.
5. Navigate by record: Select a record and then click Next. Continue to the
end of the list to display the next page of records.
6. Navigate by page: Select a record and then click the next page icon.
The page numbers are shown by using predefined controls (yellow
below).
7. Choose a page from the combo box (green).

FETCH MORE AND AUTO


FETCH MORE

The bottom frames display the FetchMore and AutoFetchMore options.

8. Click the More records button in the left frame three times.
Each time you click the button, another page of records is added. Note
that this option continually loads more records, adding a slider when
there are more than fit in the designated area (inset above).
The number of records at the top left (green) is the total number in the
database.

67

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Understanding Record Limits & Pagination

9. Click in the Auto Fetch More listing and arrow down.


The pagination for this list has been set to 20 records. When you get to
about record 18 or 19, the next page will appear.
10. Watch the Page number (yellow above) to see it change as more
records are added automatically.
11. Return to Design mode.
Each option has its own List Control. First, we will give an overview of the
settings and then we will show how each is defined.

Setting record limits and pagination


The record limit and pagination settings are in the
List Builder > Data Source tab.
Record limit. Determines the number of
records displayed, either all or a specific limit.
Data Pagination: By default, pagination is
turned off. Once it is enabled, there are three
methods:
Navigation Buttons.
FetchMore.
AutoFetchMore.
The page size is also defined here.

Adding navigation buttons or icons


After choosing Navigation Buttons at the List Builder (above), return to the

UX Builder.
The List Control has a special set of record navigation buttons and icons. In
addition to placing the buttons, it also identifies whether navigation is by page
or by record.
UX Builder > Defined Controls:
List - Navigation Buttons
List - Navigation Icons

Do the following to add them:

68

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

a. Select

the List that is to receive the buttons (so they are located properly and you dont have to move them later).

b. Click

one of the above options (buttons or icons).

c. Select

the List Control with which the buttons/icons should be asso-

ciated.
d. Choose
e. Click

Navigate by page or by record.

OK twice.

Identifying the page or record


The List Control also has a special set of static text elements that identify the
current page or number of records in the table. You can also select a specific
page.
List - Page number. (Displays Page x of x green below).
List - Page selector. (Displays a drop down box gold arrow below).
List - Record count. (Displays Records:76 (where there are 76 records
in the table yellow below).
Do the following to add them:
a. Select the List that is to receive the text (for
location purposes).
b. Click

one of the above options.

c. Select

the List Control with which the text


should be associated.
d. Move

Static Text above the List, if desired.

Note that List-Page selector has two


parts. Be sure to keep them together.
e. Click

OK.

Now we will run through the settings for each of our examples.

Limiting the number of records displayed


Record limits are specified by entering one of the following at the List
Builder > Data Source tab.
NO LIMIT

12. No_record_Limit List: Go to the List Builder > Data Source tab.
a. Data

RECORD LIMIT

Source > Record Limit = -1

13. Record_Limit List: Go to the List Builder > Data Source tab.
a. Data

Source > Record Limit = 5.

69

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Appearance of Lists: Understanding Record Limits & Pagination

Navigating with buttons or icons


As we have seen, buttons can be added take the user from record to record
or from page to page. This is a two-step procedure.
First, the Navigations Buttons setting is selected in the List
Builder;
Then the buttons are added at the UX Builder.

14. Nav_by_record List: Go to the List Builder > Data Source tab.
a. Data

Source > Record Limit = -1

Always use this setting when Paginating.


b. Data

Pagination:

Paginate data: Yes.


Page size = 5.
Pagination method = Navigation Buttons.
c. Close
d. At

the List Builder.

the UX Builder, add buttons or icons as described on page 68.

15. Nav_by_page List: Go to the List Builder > Data Source tab.
a. Data

Source > Record Limit = -1

Always use this setting when Paginating.


b. Data

Pagination:

Paginate data: Yes.


Page size = 5.
Pagination method = Navigation Buttons.
c. Close
d. At

the List Builder.

the UX Builder, add buttons or icons as described on page 68.

Fetching more records


Do this to add a button that displays additional buttons when it is clicked.
16. More Records List: Go to the List Builder > Data Source tab.
a. Data

Source > Record Limit = -1

Always use this setting when Paginating.


b. Data

Pagination:

Paginate data: Yes.


Page size = 5.
Pagination method = FetchMore.
Fetch More control text: More records
Fetch More control type: Button.
Options are Button or DIV.
Fetch More control style: Leave blank to accept default.

70

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Fetch More container style: Text-align: center;


c. Close

the List Builder.

Auto fetching records


Do this to automatically add more records to the list as the user scrolls to the
end of the limit.
TROUBLE SHOOTING

Selection must be larger than will fit in the window


on the component when it is first displayed. In other
words, if we select only 5 records here, auto fetch
will not work and there will just be an endless spinning circle at the bottom of the record list (red circle).

17. AutoFetchMore List: Go to the List Builder > Data Source tab.
a. Data

Source > Record Limit = -1

Always use this setting when Paginating.


b. Data

Pagination:

Paginate data: Yes.


Page size = 20.
Pagination method = AutoFetchMore.
c. Close
GO TO ALPHA VIDEO
UXL_V12_15 - 17

the List Builder.

Videos > Filter: Enter List Control. Choose:


UXL_V12--15. List Control - Pagination Methods.
UXL_V12--16. List Control - Pagination - Navigation Buttons.
UXL_V12--17. List Control - Continuous Scrolling - 'AutoFetchMore'
Pagination Method.

Improving the Way Lists Work:


Lists can have buttons and the data can be organized into groups. You can
also display them in cascading lists. There are sophisticated methods for populating the lists and, like Grids, the List Control has excellent searching and filtering options.
In this section, you will find:
A. Adding Buttons on page 72.
B. Grouping Records on page 76.
C. Creating Cascading Lists on page 80.
D. Using List Rows to Edit the Database on page 87.

71

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Adding Buttons

A. Adding Buttons
COMPLETED COMPONENT

The completed component for this section is Button_withFilter (List Con-

trol Web Project).


VIDEO! SEE P. 76

The video shows how to open another UX component. We will open a report
instead. The settings for opening a UX are on page 76.
Lists can have buttons
that open other UX
components, reports,
etc. At the beginning
of this chapter, we
reviewed how to add a
button to a UX Component that opens a
report (page 20). This
time, we will place a
button in the List,
itself.
We will also use this
exercise to build on
previous ones by
applying color to the list and the button, as well as labeling the button with text
and the contents of a field in the row.
We have a component ready for you. It is based on the AlphaSports SQL
table and contains Static Text and List controls surrounded by a Frame.
The Static Text tells the user to select the row and then click the button
because the row must have focus in order for the buttons report filter to work.
1. WPCP > List Control Web Project: Open Button_withFilter_Practice
in Design mode.
2. Save the component as MyButton_withFilter.
3. List1 List: Go to the List Builder.
4. Go to the Fields tab.
5. Click Add Item > Button. Name: btn1.

BUTTON PROPERTIES

PROPERTIES: BTN1 (BUTTON)


onClick: Click the button.
a. Click

Create/edit Javascript Actions.

Dialog Title: Define Javascript Actions


b. Click

Add New Action. Name: OpenReport. (Click OK)

c. Read

the Notice and click OK to close.

d. Select

72

OpenReport and click Edit Action.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Edit unbound Event


e. Editing
f.

mode: Action Javascript: Click Add New Action.

Filter list: Enter Report.

g. Choose

Open a Report, Label or Letter layout.

Dialog Title: Action Javascript - Open a Report, Label or Letter layout


h. Report

name: Click the button.

Dialog Title: Report Print Genie


i.

Layout name: Select CustomersByState

j.

SQL Filter: Click Build.

Dialog Title: Specify Filter


k. Filter:

Enter the following:

BILL_STATE_REGION='{List::list1::BILL_STATE_REGION}'
Look familiar? Thats because we used the same filter at Filtering with a
List Control on page 21. Head back there for a review if you need help building the expression.
l.

Click OK three times.

m. Comment:
n. Save

Enter OpenStateReport.

the Action Javascript.

Dialog Title: Define Javascript Actions


o. Click

OK.

Dialog Title: Edit Javascript


p. Click

Run a Javascript Action.

q. Select

OpenReport. (Click OK)

Alpha Anywhere enters the following:


{dialog.object}.runAction('OpenReport');
r.

Click OK.

6. Go to the List Layout tab.


7. Add the button to Columns in List and place it at the bottom.

Enhancing the appearance of the button


Now its time to take a look at what we have so far.
8. Click Preview List (bottom left of the List Builder).
The button is seriously plain at this point. We want to dress it up a bit and
describe its purpose to the user. At the same time, we will apply the alternating
row colors to the list itself (using a different set of colors this time).* To do so,
well modify the onItemDraw script that we wrote on page 65.
9. Go to the List Properties tab.

*. To find out how to select your favorite CSS colors, see Using the Database Explorer on page 402.

73

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Adding Buttons

10. Javascript - Render Time > onItemDraw: Click the button.


a. Javascript

PLACE TEXT & FIELD VALUE


ON BUTTON

FORMAT BUTTON
BACKGROUND

ALTERNATING
ROW COLORS

code: Enter the following (be sure to use the helpers):*

{
var e = {listElement:btn1};
e.innerHTML = 'Customers in: '+'<b>'+data.BILL_STATE_REGION+'</b>';
e.style.backgroundImage = 'none;';
e.style.backgroundColor = 'yellow';
}
if( (index % 2) == 0 ) {
ele.style.backgroundColor = '#EBF5FF';
} else {
ele.style.backgroundColor = '#F4FAFF';
}
11. Click OK.
12. Click Preview List.
The color has been applied, but the buttons have a ragged appearance due to
the font display of the states. Well fix that next.
13. Close the Preview.

BUTTON ATTRIBUTES

Button attributes are established in two places. Some are at the Fields tab and
others are at the List Layout tab. Keeping them straight can sometimes be confusing at least it was for us. We found it helped to think of it this way:
If the attribute affects the appearance of the button itself
(width), go to the Fields tab.
If the attribute affects the button placement in the column
(centering), go to the List Layout tab.
As you go along, use Preview List (bottom left of List
Builder) to check the results of your settings.

BUTTON WIDTH

First, we will even out the widths of the buttons.


14. Go to the Fields tab.

BUTTON PROPERTIES

PROPERTIES: BTN1 (BUTTON)


Style: Click the button.
Positioning and Size > Width: Enter 1.5in

*. Of course, you could always copy and paste from the completed component, Button_withFilter.

74

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

CENTER BUTTON IN
COLUMN

COLUMN PROPERTIES

Next, we will center the button in the column and change the heading.
15. Go to the List Layout tab.
PROPERTIES: BTN1
Heading: Change to Open Report For:
Heading in-line style: Click the button.
Text > Alignment: Choose Center.
Data-in-line style: Click the button.
Text > Alignment: Choose Center.
Column width: Enter flex(4)

16. Click Preview List to see the results (above screen shot). (Click Close)
17. Click OK.
LIST WIDTH

The width of the list has been set at 100% so it fills the Frame.
18. Save the component and go to Working Preview.
19. Test the buttons.

IMPORTANT NOTE

Be sure to select the row first to give it focus.


You might want to give a row focus when the component is initially
displayed. (See Now well test it out. on page 91.)
20. Close the component when you are finished.

Showing a button conditionally


It is easy to create a show/hide expression so you can display the button only
under certain conditions.
In this example, we have
created a condition where
the button is shown only
for persons where the
Bill_state_region is Massachusetts.

21. WPCP > List Control Web Project: Open Button_ShowHide in Design
mode.
22. Go to Working Preview.
Heres how it was done:
23. Return to Design mode.
24. List1 List: Go to the List Builder > Fields tab.

75

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Grouping Records

CLIENT-SIDE

PROPERTIES: BTN1 (BUTTON)


Show/hide expression: Click the button to see the expression:

BILL_STATE_REGION = MA
This expression uses a special Xbasic syntax that will be converted to
Javascript (explained in the video).
Field names must be entered in caps because Javascript is case sensitive.

25. Click Cancel twice and close the component without saving.

Opening another UX component


The first video (see below) shows how to use a button
to open another UX component. The actions are similar
to opening a report, but there are a couple of differences. We repeat them here for your convenience.
a. At

step g on page 73, choose Open a UX component.

b. Fill

in the dialog as at left.

UX name: Select the UX to be opened.


Populate UX Component with Data from a table: Yes.
Primary key source: Choose ControlsOnCurrentComponent.
Control(s) on Current Component: Select the control
that contains the Primary Key.
c. Click
GO TO ALPHA VIDEO
UXL_V12--10, 14

OK and continue from step o on page 73.

Videos > Filter: Enter List Control. Choose:


UXL_V12--10. List Control - Inserting Buttons into the List.
UXL_V12--14. List control - Conditionally Showing Items in a Row.

B. Grouping Records
In this exercise, we will organize records into groups and include a summary
field.
VIDEO! SEE P. 80

76

This feature is very easy to define and is described very well in the video.
Therefore, we will just give the settings.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Our demo component has the same


setup as the one in the video, except
that we dressed it up a bit by adding
a Panel Card and placing the navigation buttons in its footer.
The list contains data from the Customer table of the Northwinds database.
The data is grouped on the Country
field and has a count of the number
of records in each group.
Groups are maintained when the
columns are sorted.
The list is paginated, with buttons.
Lets look at the demo.
1. WPCP > List Controls Web Project: Open Groups_Demo in Design
mode.
2. Go to Working Preview and set the display to iPhone horizontal.
The Group Header displays the country name and record count.
3. Click on the column titles to sort the data.
The Groups are maintained.
4. Use the cursor to scroll the records to the bottom of the page.
There are nine records for Brazil, but only three fit on the page.
5. Click Next to go to the second page.
6. Use the cursor to scroll the records to the top of the page.
The Group Header for Brazil says Continued and the rest of the
records appear.
7. Return to Design mode.
8. List1 List: Go to the List Builder.
There are three areas where settings are defined:
Data Source tab: Group breaks and Pagination.
List Layout tab: Column sorting.

Defining the group breaks


9. Go to the Data Source tab.
10. Group breaks:
Has group breaks: Yes.
Break field: Choose Country.
Break is case-sensitive: No.

77

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Grouping Records

Break groups: Choose Automatic.


Group header template: Click the button and enter the following

expression below by using the aids:


Customer: {f_upper(lower(<BreakValue>))} ({summary.Country.count})
{iif(headerFlags.continued,"Continued...","")}

UPPER / LOWER CASE

a. Type:

Customer: (followed by a space)

b. Click

Insert <BreakValue> Placeholder.

The default for the header case is all caps (ARGENTINA). We want the first
letter to be capitalized and the rest lower (Argentina). This is done by adding
Xbasic to the placeholder.
c. Enter

the following Xbasic between the curly brackets (red):

{f_upper(lower<BreakValue>))}
d. Type

a space.

e. Click

Insert summary value.

Field: Select Country.


Summary type: Choose Count. (Click OK)
f.

CONTINUATION HEADER

Type a space.

When the records are carried over from one page to another, a Continuation
Header is a good idea. Requirements:
List is based on a SQL data source.
List has Group Breaks turned on.
List is Paginated.
Pagination method is set to Navigation Buttons.
g. Click Insert continuation header flag. (Click OK)
Now well set the Pagination.

Defining the pagination


11. Continue on the Data Source tab.
a. Data

Pagination:

Paginate data: Yes.


Page size: 10.
Pagination method: Choose NavigationButtons.

Defining the column sorting


By default, column sorting is set to client-side. This does not work with
Group breaks because it would remove them. Changing the sorting to Serverside, however, will maintain them.
12. Go to the List Layout tab and repeat the following for each column.

78

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

COLUMN PROPERTIES

PROPERTIES: ALL COLUMNS


Can sort: Yes.
Sort where: Choose Server-side.

SERVER SIDE SORT


EXPRESSION

Once the sorting is set to server-side, another option, Server-side sort expression, opens, allowing you to define custom sorts. The default is to sort on the
field name, but you can also write a SQL expression that includes more fields.
13. Click Cancel to close the List Builder without changes.

Adding the buttons


Since we have enabled Pagination with navigation buttons, the next step is to
place them in the layout.
14. Defined controls: Click List-Navigation Buttons.
a. Choose

List1. (Click OK)

15. Place as desired (we put them in a Panel Footer).


16. Close the component without changes.
Next, we will show another way to define the header.

Using the header text


lookup dictionary
There may be times when you want to place a
different value in the header than the field
name. For example, you might have a classification that is stored in the database by a value
that would not be clear to the user.
In our example, the Code field contains the
values, 1, 2 and 3, indicating Good, Average
and Below Average.
17. WPCP > List Control Web Project: Open
GroupsLookupDict_Demo in Design mode.
18. Go to Working Preview.
The Group Header reflects the value in the Code field.
Now lets see how this was done.
19. Go back to Design mode.

79

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Creating Cascading Lists

20. List1 List: Go to the List Builder > Data Source tab.
The list is based on static data, although it could as easily be based
on a table. To view it, do the following:
21. Data Source Type: Static.
22. Static data: Click the button.
a. Click
b. Add

c. Click

LOOKUP DICTIONARY
DEFINITION

Sample data with headers.

the Code field as at left.


OK.

The Group Breaks are set up in the usual manner. except that Group header
text lookup dictionary replaces Group header template.
23. Group Breaks:
Has group breaks: Yes.
Break field: Choose Code.
Group header template: None.
Group header text lookup dictionary: Click the button.
a. Enter

the following:

1=Good
2=Average
3=Below Average
b. Click

OK.

24. Click Cancel to close the List Builder.


25. Close the component without changes.
GO TO ALPHA VIDEO
UXL_V12--18, 19, 25

The last video gives additional information on Server-side sorting.


Videos > Filter: Enter List Control. Choose:
UXL_V12--18. List Control - Grouping.
UXL_V12--19. List Control - Grouping - Lookup Dictionary for Break
Value.
UXL_V12--25. List Control - Sorting Data - Server-side vs. Client-side.

C. Creating Cascading Lists


COMPLETED COMPONENT

The completed component for this section is CascadeList (List Control Web
Project).
The List Control has the ability to open other lists in sequence, called cascading lists. There is no limit to the number of cascading lists that you may have in
a given chain.

VIDEO! SEE P. 87

80

The videos demonstrate cascading lists You can either watch them first or
head straight to our sample to see how this feature works.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

1. WPCP > List Control Web Project: Open CascadeList in Design mode.
2. Go to Working Preview.
3. Click on a country and then click on a city to see the company appear
in the third pane.
Our cascade will have a grandparent to parent to child relationship:
Cascades are not difficult to create, however, there are many settings and it is easy to miss one or
two. If your component does not
display properly, that is most
likely the cause.
We will start from scratch this
time because we want to be sure
you have a full understanding of
how these lists work.

There are some settings that we havent encountered before. We will begin
by describing them so that you will have a sense of how they function and
where they are located. Just read over the explanations for now because we will
also give the settings for each list as we come to them.
Using arguments in filters on page 81.
Setting unique values on page 82.
Setting unique values on page 82.
Turning off column titles on page 82.
Defining list width at the List Builder on page 82.
Using the SQL Genie on page 86.

Using arguments in filters


This component will have three lists, List_Country (grandparent), List_City
(parent) and List_Company (child). Filters connect them.
List_Country: Top list. No filter necessary.
List_City: Filtered on its parent, List_Country.
List_Company: Filtered on both its grandparent (List_Country) and
its parent (List_City).
Our filters are based on two arguments:
WhatCountry will get its value from {List_Country}.
WhatCity will get its value from {List_City}.
Therefore, the filters are defined as follows:
List_City is filtered on its parent list:

81

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Creating Cascading Lists

Country is equal to WhatCountry.


List_Company is filtered on both its grandparent and parent lists:
Country is equal to WhatCountry.
City is equal to WhatCity.

Arguments and Filters are created at the List Builder > Data Source tab. In
both cases, we will use the first option. The second is described at Using the
SQL Genie on page 86.
Arguments:
Arguments: Click the button.
SQL Statement > SQL Genie > Filter tab: Click Define Arguments.
Filters:
Filter: Click the button.
SQL Statement > SQL Genie: Filter tab.

Once the lists have been created, the arguments can be defined at any time.
With this in mind, well create all three lists first and then define them in turn.

Setting unique values


We want to display only one instance of each country, city and company. In
an SQL database, the Distinct setting accomplishes this purpose.

The setting can be found in two places, both of which are found at the

List Builder > DataSource tab.


Distinct: Check Yes to display only unique values. (Default is No.)
SQL Statement > SQL Genie > Properties tab: Choose Distinct.

Turning off column titles


By default, titles appear for each column. They can be turned on/off at the
List Builder > List Properties tab.
Layout Properties: Show column titles.

Defining list width at the List Builder


Previously, we have defined the width of the list itself at the UX Builder. It
can also be set at the List Builder > List Properties tab:
List Properties: Width.

82

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Defining the component


Now its time to define component. It will have three lists.
4. WPCP > List Control Web Project: Create a new UX component.
You can keep the sample open.
5. Save as MyCascadeList.
6. Data Controls: Add three List controls, named as follows:
List_Country.
List_City.
List_Company.
7. Do the following to remove labels and page breaks.
a. All

lists: Right click on the list: Choose Label Position = None.

b. List_Country

& List_City: Right click on the list: Choose Toggle

Break.

Defining the cascading lists


We will begin with the first list. Well also get the Arguments out of the way.
8. List_Country List: Go to the List Builder > Data Source tab.

List_Country

a. Data

Source Type: SQL.

We need two arguments. We will define them both now.

ARGUMENTS

b. Arguments:

Click the button.

Dialog Title: Define Arguments


ARGUMENT #1
WHAT COUNTRY

c. Click

Insert New Argument.

Argument name: Enter WhatCountry


Data type: Character.
Argument binding: Set value at Run-time. (Click OK)
Argument binding > Value: Choose {List_Country}.

ARGUMENT #2
WHAT CITY

d. Click

Insert New Argument.

Argument name: Enter WhatCity.


Data type: Character.
Argument binding: Set value at Run-time. (Click OK)
Argument binding > Value: Choose {List_City}. (Click OK)

9. Continue at the Data Source tab.


Lots of steps here, so be careful to get them all!
e. SQL

Data Source:

Connection String: Choose Northwind.


Method of defining SQL query: FieldsFromTable.
Table name: Choose Customers.
Field list: Choose Country.

83

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Creating Cascading Lists

Filter: None.
Order: Country.
Distinct: Yes.
SQL Statement: Should read:
SELECT DISTINCT Country FROM Customers ORDER BY Country
f.

Parent List:
Has parent list: No.

g. Return

Value:

Return value type: Choose Field.


Return field: Choose Country.
See Troubleshooting on page 86.
Next, we will change the width of the list and turn off column headings.

10. Go to the List Properties tab.


a. List

Properties > Width: 2in.

b. Layout

Properties > Show column titles: No.

11. Go to the List Layout tab.


a. Columns

in List: Country.

12. Click OK to close the List Builder.


13. Save the component and go to Working Preview to be sure the
Country list is displayed properly.
On to defining the next list.
List_City

14. List_City List: Go to the List Builder > Data Source tab.
a. Data

Source Type: SQL.

b. Arguments:
a. SQL

Already defined (page 83).

Data Source:

Connection String: Choose Northwind.


Method of defining SQL query: FieldsFromTable.
Table name: Choose Customers.
Field list: Choose City.
Filter: Click the button.
Enter Country = :WhatCountry. (Click OK)
Based on parent record.
Order: City.
Distinct: Yes.
SQL Statement: Should read:
SELECT DISTINCT City FROM Customers WHERE Country = :WhatCountry
ORDER BY City
b. Parent

List:

Has parent list: Yes.

84

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Parent list id: Choose List_Country.


c. Return

Value:

Return value type: Choose Field.


Return field: Choose City.
See Troubleshooting on page 86.
We will change the list width and remove the column headings here, too.

15. Go to the List Properties tab.


a. List

Properties > Width: 2in.

b. Layout

Properties > Show column titles: No.

16. Go to the List Layout tab.


a. Columns

in List: City.

17. Click OK to close the List Builder.


18. Save the component and go to Working Preview.
19. Select a country to see the city appear.
Now its time to define our last list but remember that, in actuality, you
may have as many cascades as you like.
List_Company

20. List_Company List: Go to the List Builder > Data Source tab.
a. Data

Source Type: SQL.

b. Arguments:
a. SQL

Already defined (page 83).

Data Source:

Connection String: Choose Northwind.


Method of defining SQL query: FieldsFromTable.
Table name: Choose Customers.
Field list: Choose CompanyName.
Filter: Click the button.
Enter: Country = :WhatCountry AND City = :WhatCity
Order: CompanyName
Distinct: Yes.
SQL Statement: Should read:
SELECT DISTINCT CompanyName FROM Customers
WHERE Country = :WhatCountry AND City = :WhatCity ORDER BY CompanyName
b. Parent

List:

Has parent list: Yes.


Parent list id: Choose List_City.
c. Return

Value:

Return value type: Choose Field.


Return field: Choose CompanyName.
See Troubleshooting on page 86.

85

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Creating Cascading Lists

We will change the width and remove the column headings here, too.

21. Go to the List Properties tab.


a. List

Properties > Width: 2in.

b. Layout

Properties > Show column titles: No.

22. Go to the List Layout tab.


a. Columns

in List: CompanyName.

23. Click OK to close the List Builder.


24. Save the component and go to Working Preview.
25. Select a country and a city to see the company appear.
TROUBLESHOOTING

We found it was easy to miss the Return Value settings. If it is not set for the
parent, the child will not work properly.
In other words, if List_Company and List_City are working, but
List_Company is not,
Double check to see that Return Value is defined for the parent
(List_City).

Using the SQL Genie


The video shows using the SQL Genie to create both the Distinct and Filter
settings. Heres how to do it that way:
a. List_Company

list: Go to the List Builder > Data Source tab.

b. SQL

Data Source > SQL Statement: Click the button.

DISTINCT

c. SQL

Genie: Properties tab > Query Properties > Distinct: Yes.

FILTER

a.

Go to the Filter tab and enter the filters as below.

Column/Expression: Country.
Operator: is equal to
Value/Expression: Click the button.
Enter a literal value: Click Insert Argument.
Choose WhatCountry. (Click OK)
Notice that you can also define arguments from this
dialog.
b. Repeat

86

to add the second filter:

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

City is equal to :WhatCity


c. Click
GO TO ALPHA VIDEO
UXL_V12--20, 40

OK twice to close the SQL Genie.

The first video below describes the actions we have illustrated above. The
second shows a more involved set of cascading lists, illustrated below.
Videos > Filter: Enter List Control. Choose:
UXL_V12--20. List Control - Cascading Lists.
UXL_V12--40. Complex Example of Cascading List Controls.

D. Using List Rows to Edit the Database


COMPLETED COMPONENT

The completed component for this exercise is EditDatabase (List Controls

Web Project).
This exercise shows how to add a Detail View to a List in a UX component
that is suitable for standard web applications with a steady connection to the
Internet.
If you are building mobile applications or others that need to operate in a
disconnected or offline state, please use the Detail View in Chapter 4.
VIDEO! SEE P. 91

Lists present data in a read only format.


There will be times, however, when you
want to use a list to read the data and be
able to modify the database at the same
time. This is done by combining and connecting the List to data bound fields in the
UX.
DETAIL VIEW (UPDATEABLE)

The end result is similar to an updateable


Detail View in a Grid.

87

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Using List Rows to Edit the Database

The user selects the record in the list and the fields (Textbox controls) are
populated with data from the list. Edits can then be made and the data submitted, after which, the modification is reflected in the list.

We have a practice component ready for you.


DATA BINDING

Both List and Fields are bound to the RegisteredUsers table in the
ABC_Seminars_Access database, but they are not yet connected to each other.
1. WPCP > List Control Web
Project:
Open EditDatabase_Practice in
Design mode.
2. Save as MyEditDatabase.
3. Go to Working Preview and
select a row.
The Fields are not populated. Well do that now.

4. Return to Design mode.

Populating the fields with list row data


In databases, the term populate means to fill with records. In this case, we
want to select a row in the List and then fill the Textbox controls with values in
that record.
First, we will identify the Primary Key. The rest of the work is done at List
Properties.
5. RegUsers_List List: Go to the List Builder > Data Source tab.
a. SQL

Data Source > Primary Key: Choose CustomerId.

b. Return

value type: Choose PrimaryKey.

6. Go to the List Properties tab.


a. Javascript

Run Time > onSelect: Click the button.

Dialog Title: List Control System Events


b. Click

88

Create/edit Javascript Actions.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Define Javascript Actions


c. Click

Add New Action. Name: PopulateControls. (Click OK twice)

d. Click

Edit Action.

Dialog Title: Edit unbound Event


e. Action
f.

Javascript > Add New Action.

Filter: Enter Populate. Choose Populate Controls in UX Component with data from Tables. (Click OK)

Dialog Title: Populate UX Controls


g. Method

for specifying primary key: Choose Read from Dialog Con-

trols.
h. Controls

to read primary key from: Click the button.

Select RegUsers_List.
i.

Click OK.

j.

Comment: Enter Populate using Primary Key from List.

k. Save

the Action Javascript. (Click OK)

Dialog Title: List Control System Events.


l.

Click Run a Javascript Action. Choose Populate Controls. (Click


OK)
The following code is entered:
{dialog.object}.runAction('PopulateControls');

m. Click

OK to return to the List Builder.

If we stop at this point, the fields will be filled when the user click on a row
in the list, but it would be even better if a row were selected and its fields were
filled in when the component was first opened.

Giving a row focus when the list is initially rendered


By disallowing a null selection, the first row will have focus when the
component is opened.
7. Continue at the List Properties tab.
a. List

Properties > Allow Null selection: No. (Click OK)

Automatically populating controls when list


is initially rendered
Because the code sets the value in the list a bit later, an additional step is necessary to populate the controls when the list is first opened.
8. Continue at the List Properties tab.

89

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Using List Rows to Edit the Database

9. Go back to Javascript - Run Time > onSelect:


Click the button.
a. In the events list (left side), scroll down to
afterRenderComplete.
b. Click

Run a Javascript Action.

c. Choose

Populate Control. (Click OK)

d. Adjust the code as follows to add a


100 millisecond delay.

setTimeout(function() {
{dialog.object}.runAction('PopulateControl');
},100);
e. Click

OK twice.

10. Save the component and go to Working Preview.


The first row has focus and the fields are populated.
11. Select more rows to see the detail filled in.
f.

Click OK twice.

Next, we will add the buttons.

Adding buttons and refreshing the list


Submit/Reset and New Record buttons are added in the usual way. What is
different here is an additional step in the Action Scripting for the Server-side
code in order to refresh the list.
REFRESH LIST

When changes are made to the database, the List must be refreshed in order
to for them to be seen there (step below).
12. Return to Design mode.
13. Place the following buttons below the [Team] control.
Defined Controls: Submit-Reset and New Record Button.
14. Remove the break after [Button: Reset].

SERVER-SIDE CODE

In order for submit button to work, the server-side code must be added.
15. Events > Server-side: Select afterDialogValidate.
16. Place the cursor in the code above the dotted line.
17. Click Action Scripting > Save Submitted Data to Table(s).
a. Accept

the default name. (Click OK)

Dialog Title: Save Submitted Data to Tables


b. Save

Data > After submit action: Choose Edit record just submit-

ted.
c. Refresh

List Controls:

Refresh List Controls: Yes.


List controls to refresh: Choose RegUsers_List.

90

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

d. Click

OK twice.

Now well test it out.

Editing the data and viewing the result in the list


18. Save the component and go to Working Preview.
19. Select the record for Pearl Bush. (Shes one of my dogs!)
20. Change Firstname to Pearly Girl. (Click Submit)
The changed value is reflected in the List.
21. Select a record and remove the User Name so the field is blank.
22. Click Submit.
An error message is reported from the database because this field may
not be blank (be a zero based string).
23. Click the New Record button and add the following.
Hank Bush, User Name: Trouble, Team: T2. (Click Submit)
Hank is our other dog - a Springer Spaniel. Hes always into something!
TROUBLE SHOOTING

Weve shown a lot of steps here and it will be easy to mess things up when it
comes time for you to apply this to your application.
If you change tables, add fields or otherwise mess with the underpinnings of
your component after the Action Javascript has been defined, it will need to be
regenerated. Action Javascript is used in two places in this exercise:
In the List > List Properties > Javascript - Runtime > onSelect event.
In the Events > Server-side afterDialogValidate event.
Regenerate as follows:
a. Go

to the Action Javascript.

b. Click

Edit.

c. Click

OK to regenerate the code.

24. Close the component.


GO TO ALPHA VIDEO
UXL_V12--30

This video has a companion component. We have downloaded it for you and
placed it in the List Control Web Project. It is entitled listControlToSelectCurrentRecord and is essentially the same as our sample (EditDatabase), except that it
uses the Northwinds database. We did not use it in the exercise because we
wanted to give you a way to edit the records.
Videos > Filter: Enter List Control. Choose:
UXL_V12--30. List Control - Populating Data Bound UX Component
controls when the selection in the List is changed.

Understanding List vs. List + Field in onSelect event


An option was added after the video was produced that permits the developer
to select the list and field in the onSelect event. Heres how that relates to the
above exercise.

91

CHAPTER 2. LUSCIOUS LISTS (UX)


Improving the Way Lists Work: Using List Rows to Edit the Database

In step h on page 89 above, you were given the option of choosing the List or
the List plus the field name (yellow). If you chose that option, you could skip
step m on page 89 because it would be redundant to do both since they both reference the Primary Key.

If you do select a List + field value, the code may need to be modified. If you
get error messages at Working Preview, try this in step l on page 89 (onSelect
event):
if (this.initialized) {dialog.object}.runAction('PopulateControls');

And this in step 9 on page 90 (afterRenderComplete event).


a. Remove

all code from the workspace.

b. Click Run a Javascript Action. Choose PopulateControls to enter the

following: {dialog.object}.runAction('PopulateControls');
c. Click

OK.

Populating unbound controls with data from a list


In the previous exercise, we populated
controls that were bound to a database.
You can also use a list to populate
unbound controls.
DETAIL VIEW (READ ONLY)

This allows you to show more data than


is in the list, behaving much like a readonly Detail View in a Grid.
The video shows how to do this
with or without a button.
To learn how to use a layout like the one at the far left, go to Using a template to design the freeform layout on page 48.
GO TO ALPHA VIDEO
UXL_V12--39

92

Videos > Filter: Enter List Control. Choose:


UXL_V12--39. List Control - Populate controls on a UX Component
with Data from Current Row in a List Control.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Searching and Filtering Lists:


Lets face it having thousands or millions of records in a database isnt
worth anything if you cant find them. We went looking for the difference
between the terms, searching and filtering. Heres what we found:
Searching: the engine searches for your criteria, and shows any result
found.
Filtering: the engine searches the same way, but excludes things you
tell it to ignore.*
Not much difference, I think youll agree. Call it what you may and both
terms are used in Alpha Anywhere the results are the same for this series.
Criteria is picked from a drop down box or entered into a textbox and the
results are displayed in the List. Depending on the situation, a button may be
needed to execute the search.
In addition to standard searches, certain database types also allow you to create Geographical searches. Heres what well cover in this section:
A. Understanding Server- and Client-side Searches and Filters on
page 93.
B. Creating Server-side Searches on page 95.
C. Creating Client-side Searches on page 101.
D. Searching and Navigating Records on page 103.
E. Creating Geography Searches on page 107. (Overview only)
There is also a Search Part, similar to the type used in the Grid. It is
described in Chapter 4.

A. Understanding Server- and Client-side


Searches and Filters
COMPLETED COMPONENT

VIDEO! SEE P. 103

The completed component is Searches (List Control Web Project)

The video also shows the behind the scene search process. You will also find
it useful in understanding how to debug a component.
Searching in the List Control can be done either Server-side or Client-side.
Which you use when will depend on how and where you want to search. Serverside opens options like using various control types for criteria selection and

*. http://wiki.answers.com/Q/What_is_the_difference_between_searching_and_filtering. 12.30.2013

93

CHAPTER 2. LUSCIOUS LISTS (UX)


Searching and Filtering Lists: Understanding Server- and Client-side Searches and Filters

specifying the column(s) to be searched. Client-side is faster, but supplies


results from all columns.

Searches can be set up in several ways.


SERVER-SIDE

Server-side searches offer the most style options. The user can choose from a
DropDownBox or enter either an explicit value or a range by using QBF (Query
By Form syntax) if it has been enabled.* Keyword searches can also be defined.
Search criteria can be set to specific fields.

CLIENT-SIDE

You cant beat the speed of Client-side searches. You can define the criteria
in a textbox with a button executing the action or a key press search where
you enter criteria and the search completes as you type.
Search criteria always applies to all fields.
In all cases, the search is performed on the entire list, regardless of the current list display.

*. See QBF Syntax on page 97.

94

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

We have added a button that displays the full list so


the user does not have to clear the search criteria to
see it. The List-Record count control shows the
number of records currently displayed (green above
and at left.
We have also dressed up the display with frames
and have placed the control titles for a pleasing
appearance You may add these to your component,
if you like.
In the schematic at left, Server-side controls are
shown in yellow and Client-side in pink.
Although we will use a practice component for the
actual exercises, you may find it helpful to review
the completed component first to see what were
aiming for.
1. WPCP > List Control Web Project: Open the
Searches UX component in Design mode.
2. Go to Working Preview.
3. Experiment with the various search methods.
4. You can leave the component open as a reference, if you like.
IMPORTANT NOTE

We show the DropdownBox and Textbox searches combined into groups,


however they can also be used independently.

B. Creating Server-side Searches


Server-side searches take place in the server by means of an AJAX callback.
We will show how to create DropdownBox and Textbox searches. While
defined as a set, they can be used independently, as well as together.

95

CHAPTER 2. LUSCIOUS LISTS (UX)


Searching and Filtering Lists: Creating Server-side Searches

Our first search will enable the user to pick one or


more values from a DropDownBox.
We have set up a practice component that has a list
based on the Customer table from the AlphaSports
database.
1. WPCP > List Control Web Project: Open
Searches_practice in Design mode.
2. Save as MySearches.

Ordering the list


We like things in order, so we will set the list to display alphabetically by State and City when it initially
displays. The user can also sort by clicking the column
titles in the usual manner. Ordering is done in the List
Builder.
3. List1 List: Go to the List Builder > Data Source tab.
4. Order: Click the button.
a. Choose

the fields, separated by a comma.

BILL_STATE_REGION, BILL_CITY, LASTNAME


b. Click

OK twice to close the List Builder.

Adding the DropdownBox control


Presenting a list of values from the database will make user selection quick.
We will allow him/her to choose a single or multiple values.
5. Data Controls: Click DropdownBox. Name: States.
6. Move the DDBox control to top of list.
MULTIPLE SELECTIONS

The default for DropdownBox Height is 1, meaning it displays only one field. It stands to reason that it would need to
be larger for multiple field selections.
The Height must be increased (minimum 2) in order for the
Multi-select allowed option to open. Well do that first and
then well define the choices.

FIELD PROPERTIES
DROP DOWN BOX
PROPERTIES

PROPERTIES: [STATES]
Width: 2in.
Height: Enter 5
Multi-select allowed: Choose Multiple.
Choices: Click the button.

96

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Define Choices for States (DropdownBox)


a. Choices
b. Data

are: Dynamic.

Source type: AlphaDAO.

c. AlphaDAO

Connection string name: Choose AlphaSports.

d. AlphaDAO

SQL SELECT statement: Click the button.


Dialog Title: SQL Select
e. Genie

tab:

Table: Choose Customer.


Field to display: Choose
BILL_STATE_REGION.
f. Click

Preview Data in Query to


see a list of the states.

g. Close

the Query.

h. Click

OK twice.

Adding a search button


The DropdownBox presents the list of states, but we need a button to actually
execute the search.
QBF SYNTAX

QBF (Query By Form) syntax is Alpha Anywheres classic search method.*


It is not required for single selections in a DropdownBox, but it is necessary
when multi-select is turned on. Heres why:
If you select MA and NC, Alpha writes it as MA, NC and there is no
such value in the State field, therefore no records will be returned.
QBF turns MA, NC into MA or NC, therefore records for MA and NC
will be returned.
Dialog Title: UX Builder

7. Other Controls: Click Button.


8. Move the button above the list.
BUTTON PROPERTIES
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: SEARCH FULL LIST]


Button text: Enter Search Full List.
click: Click the button.
a. Action

Javascript > Add New Action.

b. Filter:

Enter List. Choose Filter Records in a List Control.

c. Click

OK.

Dialog Title: Filter Records in a List Control


d. List

control name: Choose list1.

e. Define

search fields: Click the button.

*. QBF Syntax is detailed in Volume 1 of this series. You can also find it at Alpha Anywhere Documentation. Enter Query by Form and
choose the document of that name. Scroll down for the table that contains the syntax.

97

CHAPTER 2. LUSCIOUS LISTS (UX)


Searching and Filtering Lists: Creating Server-side Searches

Dialog Title: Specify Search Fields and Search Options


f.

Click Add.

g. Select
h. Field
i.

the States (DropdownBox) control. (Click OK)

to search: Choose BILL_STATE_REGION (C).

Search option: Click the button.

Dialog Title: Search Options

Choose 2:
Is contained in (may be case sensitive - depends on the database).
Look over the list to see the other options available. (Click OK)
Dialog Title: Specify Search Fields and Search Options
j.

Allow QBF syntax: Yes.

k. Click
l.

OK twice.

Comment: Enter Search by State.

9. Save the Action Javascript.

Adding a button that refreshes a list


This button will save the user the trouble of clearing the search criteria in
order to see the full list by refreshing it.
10. Other Controls: Click Button.
11. Move the button above the list.
BUTTON PROPERTIES
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: SHOW FULL LIST]


Button text: Enter Show Full List.
click: Click the button.
a. Action

Javascript > Add New Action.

b. Filter:

Enter List. Choose List Control Actions.

c. Click

OK.

Dialog Title: List Control Actions


d. Action
e. List
f.

name: Choose Refresh data.

id(s): Choose list1. (Click OK)

Comment: Enter Refresh list. (Click OK)

g. Save

the Action Javascript.

Adding a record count


Having a count of the records in the current list is useful and easy to do.
12. Defined Controls: Choose List-Record Count. List Control: List1.
13. Place above the list.
14. Save the Component and go to Working Preview.
SORTING

98

The default sort order is State, City, Last name. It is worth spending a couple
of minutes to see exactly how it works.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

a. DropdownBox:
b. Click

Choose MA and click Search Full List.

the Lastname column title to put the records in that order.

c. Click

the Show Full List button to display all the records. Maintains
the current sort.

d. Click

the State column title to see the records returned to the default
sort order.

MULTIPLE SELECTIONS

15. Drag to select multiple states and click Search Full List to return those
records. (CONTROL + CLICK is also enabled.)
Next, we will add a textbox search to the drop down box.

Creating a textbox search


You are not limited to a single search value or control style, as you will see
by this exercise. This time we will use a textbox control where the user types in
search criteria for the City field that can be used independently or in conjunction
with the drop down box.

Both will use the same button (green) we just need to modify it to include
data from the textbox control.
This search is performed on all records in the designated field. In other
words, los will bring up both Rancho Palos Verde and Los Angeles.
To refine further, type more criteria, such as los a to bring up only
Los Angeles.
It can also be used in combination with the drop down box. QBF searches
can also be enabled (aqua).
16. Return to Design mode.
17. Data controls: Click Textbox. Name: City.
18. Place the control below the States drop down box control.
Next, well add the City textbox to the button search criteria.
JAVASCRIPT- (TOUCH, MOUSE,
POINTER EVENTS)

PROPERTIES: [BUTTON: SEARCH FULL LIST]


click: Click the button.
Filter Records in a List Control: Click Edit Action.

99

CHAPTER 2. LUSCIOUS LISTS (UX)


Searching and Filtering Lists: Creating Server-side Searches

a. Define

search fields: Click the button.

Dialog Title: Specify Fields and Search Options


b. Click

Add.

c. Select
d. Field

the City control. (Click OK)

to search: Choose BILL_CITY (C).

e. Search
f.

option: Choose 2.

Allow QBF syntax: Yes. (Click OK twice)

g. Save

the Action Javascript.

19. Save the component and go to Working Preview.


20. Test the results by entering data in the City textbox alone and in combination with the States drop down box. Click the Search Full List button
to execute the searches.
Next, we will add a different type of search that will search three fields at
the same time.

Adding a keyword search


Keyword searches can be defined to include criteria in one or more fields
that you specify. They are created with a combination of textbox and button, as
we did above.
In this case, the search will take place in the State, City and Lastname fields.

21. Return to Design mode.


22. Data Controls: Click Textbox. Name: Keyword.
23. Place the control below [Button: Search Full List] and
remove the break.
24. Other Controls: Click Button.
25. Place below the [Keyword] textbox.
BUTTON PROPERTIES
JAVASCRIPT- (TOUCH, MOUSE,
POINTER EVENTS)

100

PROPERTIES: [BUTTON: KEYWORD SEARCH]


Button text: Enter Keyword Search.
click: Click the button.
a. Action

Javascript: Click Add New Action.

b. Filter:

Enter List. Choose: Filter Records in a List Control.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Filter Records in a List Control


c. List

Control name: Choose list1.

d. Keyword
e. Search

search: Yes.

input field: Choose Keyword.

Name of control that will receive the search criteria.


f.

Search fields: Choose LASTNAME (C), BILL_CITY (C),


BILL_STATE_REGION (C).

g. Click

OK twice.

h. Comment:
i.

Enter Keyword search State, City, Lastname fields.

Save the Action Javascript.

26. Save the component and go to Working Preview to test it out.


27. Enter ca in the textbox and click Keyword Search.
The search criteria appears in the Lastname, City and State columns.
This wraps up our Server-side searches. On to Client-side.
28. Return to Design mode for the next section.

C. Creating Client-side Searches


This section continues from the previous one. MySearches should be open

in Design mode.
As expected, Client-side searches are speedy because they take place in the
browser. The downside (if it matters to you) is that they always search all fields.

Creating an all fields search with a button


1. Data Controls: Add a Textbox. Name: ClientSide.
2. Place it below [Button: Keyword Search] and remove the break.
3. Other Controls: Add a Button below [ClientSide].
BUTTON PROPERTIES
JAVASCRIPT- (TOUCH, MOUSE,
POINTER EVENTS)

PROPERTIES: [BUTTON: SEARCH ALL FIELDS]


Button text: Enter Search all fields.
click: Click the button.
a. Action

Javascript: Click Add New Action.

101

CHAPTER 2. LUSCIOUS LISTS (UX)


Searching and Filtering Lists: Creating Client-side Searches

b. Filter:

Enter List. Choose List Control Actions. (Click OK)

c. Action

name: Choose Filter List - Client-side.

d. List

id: Choose list1.

e. Search

field: Choose ClientSide.

This is the name of the control that will receive the search criteria.
f.

Click OK.

g. Comment:
h. Save

Enter Client-side search.

the Action Javascript.

4. Go to Working Preview.
5. Enter ca in the search box. Click Search all fields.
Now were on to the last of our sample searches.

Creating key press searches


Key press means that, as the user types the criteria, the filtering takes place
automatically. These are the easiest of all to define because no button is needed.

ONKEYUP EVENT

The Textbox control has an event called onKeyUp where we will use Action
Scripting, same as we did for the Button click events.
6. Return to Design mode.
7. Data Control: Click Textbox. Name: QuickSearch.
8. Place below [Button: Search all fields]

JAVASCRIPT

PROPERTIES: [QUICKSEARCH]
onKeyUp: Click the button.
a. Action

Javascript: Click Add New Action.

b. Filter:

Enter List. Choose List Control Actions. (Click OK)

c. Action

name: Choose Filter List - Client-side.

d. List

id: Choose list1.

e. Search

field: Choose QuickSearch.

This is the name of the control that will receive the search criteria.

102

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

f.

Click OK.

g. Comment:
h. Save

Enter Client-side quick search.

the Action Javascript.

9. Go to Working Preview.
10. Enter los a in the textbox to see only Los Angeles records.
11. Close all components.
GO TO ALPHA VIDEO
UXL_V12--22 - 24

The videos contain a great deal of information on debugging and coding in


general. Be sure to watch them if you are headed in that direction.
Videos > Filter: Enter List Control. Choose:
UXL_V12--22. List Control - Server-side Searching - Search Part Style
and Keyword Style.
UXL_V12--23. List Control - Server-side Searching -Specify an
Explicit Filter.
UXL_V12--24. List Control - Client-side filtering.

D. Searching and Navigating Records


COMPLETED COMPONENT

The completed component for this section is Ux_CustomList_RecordNavigator (List Controls Web Project).

VIDEO! SEE P. 107

In the previous exercises, we showed several searching and filtering methods. But, thats not the end of the options. We will wrap up this chapter with a
component that employs several of the List Control features weve already
encountered, plus a couple of new ones.
This exercise combines searching with navigating. Once the
sub-set of records is found, the
user can get record detail in
three different ways.
(1) A Slider.
(2) The List itself.
(3) Record navigation icons.
We will use the sample component that comes with the videos, detailing only the features
we havent already presented.*
The rest, we will leave to the
video and to your exploration.

*. The video opens with a list built into the Action Javascript. Since the List Control offers far more options, we are skipping it.

103

CHAPTER 2. LUSCIOUS LISTS (UX)


Searching and Filtering Lists: Searching and Navigating Records

As you will see, navigation is all about Primary Keys because that is the
value on which the records are connected to the slider, the list, the navigation
icons and even the search button.
1. WPCP > List Controls Web Project: Open
UX_CustomList_RecordNavigator in Design mode.
2. Go to Working Preview.
3. Enter ger in the search box. (Click Search)
4. Use the Slider and Navigation Icons.
5. Select a record in the List.
Pay attention to the detail view as you experiment with the List, Slider and
Record Navigation Icons. Notice that everything remains synchronized.
Lets see how this was designed.
6. Go to Design mode.
COMPONENT SPECS

This component has fields and a list that are bound to the Northwind database.
Since we are using a prepared component, we will examine the settings and
then Cancel out without making any changes.

Navigator #1: The Slider


The slider is referenced in two places, the Server-side Action Scripting and the Search button Action Scripting. The first creates it for all
records and the second connects it to the keyword search button so
that it synchronizes with the found records.
We will create the slider for all records here. The found records slider is
defined at Configuring the Keyword Search on page 106.
SLIDER MESSAGE

The Slider Message appears above the slider. In this case, it identifies the
total number of records in the database. The message for the number of found
records is defined in the Search button (page 106).

PLACEHOLDER

Before a Slider can be defined, it requires a Placeholder control (yellow


above). The placeholder is referenced in a couple of places, so we will get it out
of the way first. Be sure to give it a name you will recognize easily.
7. Other Controls: Click Placeholder.

PLACEHOLDER PROPERTIES
SERVER-SIDE CODE

PROPERTIES: [PLACEHOLDER]
Id: SLIDERNAVIGATOR.

Next, we will examine the Action Scripting that loads the Primary Keys and
defines the Slider.
It uses Load Primary keys for Parent Table Action Scripting.
8. Events > Server-side > onDialogInitialize: Place the cursor in the Exe-

104

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

cuteServerSideAction code and click Action Scripting > Edit Action.


Dialog Title: Load Primary Keys for Parent Table of Dialog
a. Has

slider control to select active record: Yes.

b. Slider

Placeholder ID: SLIDERNAVIGATOR.

c. Slider message:
({recordNumber} of {recordcount}) &nbsp;<b>{PrimaryKeyDescription}</b>
d. Slider

width: 6in.

e. Slider

record prefix: Record:

f.

Slider message position: Above.

g. Click

Cancel.

9. Return to the Controls section.

Navigator #2: The List


The list itself is also serving as a Navigation aid. For this to happen, the Primary Key must be identified. In addition, a Freeform template is used
10. List1 List: Go to the List Builder
> Data Source tab.
a. SQL

Data Source > Primary key:


CustomerID.

b. Return

Value > Return value type:


PrimaryKey.

11. Go to the List Properties tab.


c. Layout

Properties > Layout type: Freeform.

12. Go to the List Layout tab.


The code has been defined for the first choice in Pre-defined Templates.*

13. Click Cancel to return to the UX Builder.

Navigator #3: The Navigation Icons


This time we are using Navigation Icons that navigate the record, not the list.
14. Defined Controls: Record-Navigation Icons.
SERVER-SIDE CODE

Navigation icons and buttons require that the Primary Keys be loaded. We
have already done that (step 8 on page 104).

*. See Using a template to design the freeform layout on page 48.

105

CHAPTER 2. LUSCIOUS LISTS (UX)


Searching and Filtering Lists: Searching and Navigating Records

Configuring the Keyword Search


We need to connect the search
button to the Slider control so
its message updates to show the
number of found records.
To do so, we will use a different
Action Scripting action than in
our previous searches.
SLIDER MESSAGE

This time the Slider Message will identify the found records. The button
click event will repeat the settings we used for the all records slider (page 104).

PLACE HOLDER

Remember that Sliders always require a Placeholder control. This example


uses the same one created in step 7 on page 104.
We added a Watermark in order to identify
the search fields.

WATERMARK

15. Data Controls: Textbox control. Name: search.


TEXTBOX PROPERTIES

PROPERTIES: [SEARCH]
Watermark: Yes.
Watermark text: Company, City, Country.

16. Other Controls: Button.


BUTTON PROPERTIES
JAVASCSRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: SEARCH]


Button text: Search.
click: Click the button.
a. Action

Javascript > Edit Action.

Dialog Title: Edit Click Event

The action used here is Get Primary Key values for Records in

Query.
a. Click

Edit Action to see the definition.

Dialog Title: Get Primary Key List


b.

Table Filter / Order:


Method for specifying filter/order: ComputeFromSubmittedValues.
Keyword search: Yes.
Search input field: search.
This is the name of the Textbox control.
Keyword search fields: Click the button:
CompanyName, City, Country. (Click OK)

c. Slider

Control:

Has slider control to select active record: Yes.


Slider Placeholder ID: SLIDERNAVIGATOR.

106

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Show slider message: Yes.


Slider message:
({recordNumber} of {recordcount}) &nbsp;<b>{PrimaryKeyDescription}</b>
Slider width: 6in
Slider message prefix: Record:
d. Click

Cancel twice.

17. Go back to Working Preview to review how it all works, if you like.
18. Close the component without saving.
GO TO ALPHA VIDEO
UXL_V12--38

Videos > Filter: Enter List Control: Choose:


UXL_V12--38. Using a Custom List Control to Navigate the Current
Record in a Data Bound UX Component.

E. Creating Geography Searches


There is a comprehensive set of videos that explain how to do Geography
searches. The component used in the videos is downloadable, as is the sample
SQL Server database.
Here are some things you need to know in order to implement this feature:
ABOUT THE SEARCH

This type of search has a Location field type and requires a database that
supports the geography data type, such as:
SQL Server, MySQL, Oracle, DB2, SQL Server Express, etc.

ABOUT THE DATABASE


DOWNLOAD

The SQL Server Airports sample database download consists of a zip file
containing these files:
airports.bak
mysql_us_airports.sql

SQL SERVER EXPRESS

MY SQL

Microsoft SQL Server Express and MySQL are both free. Here are some tips
on using them:
Use the airport.bak file.
SQLServer Management Studio has an option to restore a database that is
available when you right click on the item database in the tree on the left.
Use the mysql_us_airports.sql file.
It is suggest you also use Navicat to manage your databases. It has a set of
commands that are executed in order to create the database.

SAMPLE DATABASE

We have downloaded the sample database files for you. Go to:


c:Alpha_WebMobileBook_3.0_Volume2 ABC_WebMobile_Lessons\
Samples \ GeographySearch.

SAMPLE COMPONENT

We have also downloaded the component:


List Control Web Project: Ux_airport.

107

CHAPTER 2. LUSCIOUS LISTS (UX)


Video Library: More List Control Features

In order to use the UX component, you will need to create a connection


string called Airport. Once the string has been created, the component should
activate properly.
If you use a different name (other than Airport) for the connection string, you
will need to select it from the List Builder.

GO TO ALPHA VIDEO
UXL_V12--33, 34

To learn how to do Geography Searches, view the following videos:


Videos > Filter: Enter List Control. Choose:
UXL_V12--33. List Control - Geography Searches.
UXL_V12--34. List Control - Geography Searches - Mobile.

Video Library:
We have come to the end of our exercises on the List Control, but not to the
end of its features. Most, but not all of the following involve programming of
one sort or another.

More List Control Features


LIST ROW ELEMENTS

108

There may be times when you have parallel events, such as:
A button or image in a row with a click or onClick event.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

The row itself may also have a click or onClick event.

You might want to suppress the row level event from firing. This video
shows how to do that.
Recommended for all users. No programming required.
Videos > Filter: Enter List Control. Choose:
UXL_V12--36. List Control - Understanding Event Propagation When
Clicking on Elements in a List Row.
.SETVALUE & .GETVALUE

The standard Javascript methods (.getValue() and .setValue() ) of the UX


object can be used to set and get the 'value' of the variable that bound to the list.
Videos > Filter: Enter List Control. Choose:
UXL_V12--2. List Control - .SetValue and .GetValue Methods of the
UX Component.

RAW DATA

The 'RawData' control type returns the data 'asis' from the data source. No HTML mark up is automatically added, as is the case when you choose the
'Label' or 'Image' control type. Use the 'RawData'
control type when you want complete control over
how the HTML for the field should be created.
When you use the 'RawData' control type, you must
put the HTML markup in the template.
For example, say you have a field called 'MyImage' that contains an Image
URL. If you set the control type to Image, then in the template, you would simply place this placeholder: {MyImage}.
But, if you set the control type to 'RawData', the template would then be:
<img src="{MyImage}" />
Videos > Filter: Enter List Control. Choose:
UXL_V12--29. List Control - 'RawData' Control Type.

109

CHAPTER 2. LUSCIOUS LISTS (UX)


Video Library: More List Control Features

ROW EXPANDERS

A common use in a
List is expanding the
current row to show
additional information.
There are two ways to
load the additional data
with and without an
Ajax callback.
The first set of videos shows how the additional information can
be pre-loaded, so that
when the row is expanded, no callback is necessary. The second set shows how
to define with an Ajax callback.
Videos > Filter: Enter List Control. Choose:
UXL_V12--31. List Control - Adding a 'Row Expander' to the List.
UXL_V12--32. List Control - 'Row Expander' - Populating the row
expander using an Ajax Callback.

SORTING

We have covered sorting in several places in this chapter. This video explains
what happens behind the scene when sorting takes place.

Videos > Filter: Enter List Control. Choose:


UXL_V12--25. List Control - Sorting Data - Server-side vs. Client-side.

110

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

MOVE DATA FROM ONE


LIST TO ANOTHER

The List Control is highly programmable. Rows can be added, inserted,


deleted, moved and reordered. This video gives an extensive tour of some of the
methods available.

Videos > Filter: Enter List Control. Choose:


UXL_V12--21. List Control - Methods - Populating List, Moving Data
from One List to Another - Moving Rows Up and Down.
HIDE/SHOW DIV IN
FREEFORM LAYOUT

When you create a list control


with a free-form template, you
might want to use Javascript to conditionally show/hide elements in the
List. This is easily done by putting
the elements you want to show/hide
in a div.
This video shows how the
onItemDraw event is used to control
the visibility of the div.
Videos > Filter: Enter List
Control. Choose:
UXL_V12--37. List Control - Free-form Layout - Conditionally Hide/
Show a Div in the Free-form Template.

SNAKING LAYOUT WITH


CSS & MEDIA QUERIES

For advanced developers. This video shows how CSS can be defined to use
CSS media queries in order to set the number of columns in the 'snaking grid'
based on the width of the list control. This method is more complex than simply

111

CHAPTER 2. LUSCIOUS LISTS (UX)


Video Library: More List Control Features

setting the layout style to snaking, but there is more control over how the snaking Layout is defined.

Videos > Filter: Enter List Control. Choose:


UXL_V12--28. List Control - Snaking Column Layout using CSS and
Media Queries.
NOTES APP

There is an application that shows how versatile the List Control can be. We
suggest you look at the videos to see if it is something youd like to explore
further.
We have downloaded the components and database and have established the
Connection String for you, but there is a final step that needs to be completed
in order to use it.
a. Go

to the video identified below.

b. Click

Download component to get the zip file.

c. Unzip

the files to you desktop or other location.

d. Open

the ReadMe and follow instructions for placement of the NotesApp


folder.

e. Return
f. Go

to Alpha Anywhere.

to the WPCP > Notes Web Project that holds two components.

g. Use

the videos to understand how they have been designed.

The database is in the following location:


c:Alpha_WebMobileBook_3.0_Volume2 ABC_WebMobile_Lessons\

SQL\Notes.mdb.
IMPORTANT NOTE

This application has been developed by Alpha Software. If you have any
questions or problems, please contact them not Liberty Manuals!
Videos > Filter: Enter List Control. Choose:
UX_V12--49. Sample 'Notes' Application - Using CSS to Customize the
Appearance of a List Control.

112

Chapter 3.

Priceless Panels (UX)

Panels are electric and exciting


And can be used in all types of applications! True, this signature feature is a must for
mobile, but you can use them in desktop web apps, too.
Remember the Alpha Anywhere slogan design once and take it anywhere!

CHAPTER 3. PRICELESS PANELS (UX)

What youll find here

Topic
Understanding Panel Cards, Panel Navigators and Panel Layouts

115

Understanding Quick Panels

119

Defining Panel Cards:

122

A. Aligning Text in Headers and Footers

122

B. Aligning Buttons in Panel Cards

124

C. Creating an Action Sheet and a Panel Window

128

D. Defining Fixed Positions for Objects

133

Defining Panel Navigators:

135

A. Understanding Navigation

135

B. Adding Locater Icons

144

C. Change Layout on Orientation Change

145

D. Defining a Custom onSwipe Event

146

Defining Panel Layouts:

147

A. Understanding Flow in Panel Layouts

148

B. Understanding how Panel Card size affects Panel Layouts

150

C. Understanding Docking

151

D. Docked Panel Display: Docked Panel Controller button

153

E. Docked Panel Display: Flow Collapse Button

156

F. Docked Panel Display: Nested Panel Layouts

158

Video Library: More on Panels

114

Page

160

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How this Chapter is Organized


Panels can be used in all types of applications, but are a integral part of
mobile apps. We covered the basics in Volume 1 of this series and gave a quick
refresher in Chapter 2, so you should already be familiar with them to a certain
degree.
In this chapter, we will dig deeper so that you can benefit from this essential
element that makes Alpha Anywhere so special. At the same time, we will detail
many need to know panel particulars.
IMPORTANT NOTE

These exercises have been organized by Panel Card, Panel Navigator and
Panel Layout. When a feature is applicable to more than one panel type, we
have placed it where we think it will be most useful. For example, Headers and
Footers are the same for all panels, but they are detailed only in the Panel Cards
section.

Understanding Panel Cards, Panel Navigators and Panel


Layouts
Theres no better way to understand Panels than to watch the video series:
GO TO ALPHA VIDEO

Videos > Filter: Enter Panel: Choose:


UX_V12--3.Tutorial Explaining Panel Layouts, Panel Navigators and
Panel Cards.

We realize, however, that it may be hard to retain all the options (at least it
was for us), so this section will give a recap, using the excellent graphics contained therein.*

115

CHAPTER 3. PRICELESS PANELS (UX)


Understanding Panel Cards, Panel Navigators and Panel Layouts

The Alpha Anywhere system is composed of Panel Cards, Panel Navigators


and Panel Layouts.
Panel Cards hold the elements that the user sees and with which he/she
interacts.
Panel Layouts allow you to see multiple Panel Cards at once. They can
be combined with Panel Navigators and additional Panel Layouts.
Panel Navigators take you from one Panel to the next.
Applications can be used on any type of device, phone, mini- or full size tablet
or desktop machine. The platform is irrelevant because they are viewed in a
Browser, meaning that they work in PCs, MAC, etc.
PANEL CARD

A Panel Card holds UI (User Interface) items such as a Textbox, Button or


List. It may or may not have a Header / Footer.
PANEL NAVIGATOR

A Panel Navigator is a container that allows the transition from one Panel
Card to the next. The transition can be with a swipe gesture, button click or
other user action as defined by the developer.

*. Thanks to Alpha Software for permission to reprint the illustrations from the video series.

116

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

PANEL LAYOUT

Panel Layouts are used when you want to show multiple panels on the screen
at the same time. Direction indicates placement and flow of Panel Cards.

COMBINATION

Panel Cards, Layouts and Navigators are easily combined, presenting the
opportunity for complex arrangements.

117

CHAPTER 3. PRICELESS PANELS (UX)


Understanding Panel Cards, Panel Navigators and Panel Layouts

VERSATILITY

Panel Cards, Layouts and Navigators can be applied to virtually any mobile
application. For example, the iPhone Stock app would be designed like this (run
grab yours now to see what we mean).

Desktop web applications also come into play because you can take full
advantage of the generous screen real estate. The New York Times website format could be emulated like this.

Now that you have a sense of how high your apps can fly, lets dig into the
details.

118

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Understanding Quick Panels


COMPLETED COMPONENT

The completed components for this section are QuickPanelsBasic and

StocksApp (Panels Web Project).


Quick Panels is a genie that makes adding Panel
Cards, Panel Layouts and/or Panel Navigators really
fast. You can also add Static Text.
Like a lot of new things, we found it does have a bit
of a learning curve, but, once you become familiar
with it, you will reach for it often. It can be used for
both new and existing control lists.
Well start with a simple one first and then do one that
matches the iPhone Stocks application above. Well
also introduce you to the pre-defined layouts that will make your job even easier
and faster.
VIDEO! SEE P. 122

Before you start, you need to know what you want to accomplish. In this
case, we want a simple layout like the one above.
Panel Card with Header and Footer and Static Text in the body.
1. WPCP > Panels Web Project: Create a new blank UX Component.
2. Controls > Panels: Click Quick Panels.
The available panels are in the left pane.

3. Click Explain syntax for entering commands.


Note that the design is in a tree format. These indents (tabs) are very important. The controls wont be properly entered without them.
4. Close the description.

119

CHAPTER 3. PRICELESS PANELS (UX)


Understanding Quick Panels

HEADERS / FOOTERS

Headers and footers can be automatically added. This is one of our favorite
options because it is easy enough to remove them if it turns out you dont need
one or the other.
5. Suppress prompt for header/footer when adding Panels: No (red circle
above).
a. Double
b. Click

click {PanelCard} to enter it into the command area.

Header and Footer at the prompt to enter the following:

{PanelCard-HF}
c. Double
d. Place

click {Static Text} to add it to the next line.

the cursor before the line and press Tab or click Insert a tab.

{PanelCard-HF}
{StaticTextObject}
e. Click

OK to enter the controls (inset above).

Now wasnt that fun?


6. Activate the mobile simulator: Mobile = Yes.
7. Save the component as MyQuickPanelsBasic and go to Working Preview to inspect.
Now well copy the
iPhone Stocks app on
page 118.
8. Return to Design mode.
9. Delete all the controls.
10. Save as
MyStocksApp.
11. Panels: Click Quick
Panels.
12. Enter controls as at
left.
TIPS

Indent and Outdent:

You can use ether Insert


Tabs or the Tab key to
indent. Backspace will
outdent.
Header/Footer: You can
manually adjust the code
by adding/removing HF as needed.
Copy / Paste: You can copy and paste panels and objects.

120

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Static Text Objects: Use freely because they will help identify Panel

Cards when testing the Quick Panel results. You can always remove
them later if they are not needed.
13. Click OK.
In order to mimic the Stock apps behavior, we need to change the flow for
the Panel Layout to Top to Bottom.
PANEL LAYOUT PROPERTIES

PROPERTIES: [PANEL LAYOUT: PANELLAYOUT_1] (H) (LTR)


Layout flow direction: Change to TTB.

14. Save and go to Working Preview.


15. User the cursor to swipe the bottom panel cards.
The top Panel stays in place (yellow) while the bottom (below the
dotted line) moves, just as in the
Stocks app.

Using predefined templates


Pre-defined templates save even more time. They are found in two places
the Quick Panels genie and when you create a new UX.
16. Return to Design mode.
QUICK PANELS GENIE

17. Panels > Quick Panels: Click Insert pre-defined layout.


At this writing, there are five options:
(A) Panel Navigator (Carousel)
with 3 Panel Cards (text object in
each PC)
(B) Same as A with Header /
Footer.
(C) Panel Layout with 2 Panel
Cards (text object in each PC)
(D) Same as C with H/F.
(E) Split-view. Creates a menu
(see page 282).

18. Click Cancel twice.


19. Close the component.
NEW UX TEMPLATES

There is also selection at the new UX templates.


20. WPCP > New UX component: Create UX Component from template.

121

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Cards: Aligning Text in Headers and Footers

(A) Panel card with Header,


Title, Buttons.
(B) Panel Card with H/F, Title,
Buttons with button list.
(C) Panel Navigator (Programmatic) with Header and 3
PC. (Next button navigation.)

21. Click Cancel.


GO TO ALPHA VIDEO
UX_12-33

Videos > Filter: Enter Quick. Choose


UX_V12--33. Quick Panel Genie.

Defining Panel Cards:


You know by now that Panel Cards hold controls such as Buttons, Textboxes,
Lists anything that you want to show the user or use to interface with him/her.
If you are at all unsure about Panel Card basics, we refer you to Volume 1 in this
series. A refresher can be found at Using a List Control to Filter a Report on
page 16.
This section will cover additional items we think you will find useful.
A. Aligning Text in Headers and Footers on page 122.
B. Aligning Buttons in Panel Cards on page 124.
C. Creating an Action Sheet and a Panel Window on page 128.
D. Defining Fixed Positions for Objects on page 133.
IMPORTANT NOTE

Header/Footer exercises apply to all Panel types. In other words, A Header is


a Header is a Header (and the same goes for a Footer).

A. Aligning Text in Headers and Footers


COMPLETED COMPONENT

The completed component for this section is PanelCard_Demo (Panels Web

Project).
VIDEO! SEE P. 124

In this section, we will center align the Header / Footer text both horizontally
and vertically and use a Class to format the text.
1. WPCP > Panels Web Project: Open PanelCardDemo_Practice in
Design mode.

122

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

2. Save as MyPanelCardDemo.
3. Go to Working Preview.
Right now, the Header and Footer of this
component are pretty plain. However, it
wont take much to improve the appearance. We will center the text, horizontally
and vertically and, at the same time,
apply some interesting styles.
4. Return to Design mode.

Centering the text

HORIZONTAL
VERTICAL

Centering the Static Text horizontally and vertically is done in two different
places.
Horizontal centering is set in the Header / Footer Container properties.
Vertical centering is done by choosing a Class in Static Text properties.
First, we will center horizontally and then we will take care of the vertical
alignment.

CONTAINER BEGIN
PROPERTIES

PROPERTIES: [PANELHEADER: CONTAINER_1]


Container alignment: Choose Center.

Understanding CSS Classes


CSS Classes are pre-defined text formats. We
will use one to identify the formatting.
The text will be vertically centered at the
same time.
The choices available for the Class are dependent upon the style that has been set at UX Properties > Style name in this case, MobOlive.
PROPERTIES: [STATIC TEXT: HEADING]
STATIC TEXT PROPERTIES

Class: Click the button.


The list of Classes for the current style
(MobOlive) is presented.
a. Select MobOliveHeading and click the

+ sign to place it in Selected.

The Preview pane shows how it will appear.


b. Click

OK to enter:

Class: MobOliveHeading

This hard codes the setting to MobOlive, but suppose you want to change the
style at a later time? No problem. One small adjustment and it will work for any
style.

123

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Cards: Aligning Buttons in Panel Cards

c. Overtype

MobOliveHeading with the following:

Class: {dialog.style}Heading

5. Go back to Working Preview.


Looks good in MobOlive.
Lets try another style.
6. Return to Design mode.
7. UX Properties > Style name: Choose MobBlue. (Click OK)
8. Go to Working Preview to see the heading format maintained.
9. Return to Design mode > Controls.
Now its time to tackle the Footer. First, we will center the Footer text and
then apply the new Class.
Any CSS Class is available even those not in
the list. Well use one that we got from the video.
Well also change to another Style.

CONTAINER BEGIN
PROPERTIES
STATIC TEXT PROPERTIES

PROPERTIES: [PANELFOOTER: CONTAINER_2]


Container alignment: Choose Center.
PROPERTIES: [STATIC TEXT: FOOTER TEXT]
Class: Enter the following: {dialog.style}Text

10. UX Properties > Style name: Choose IOS.


11. Save the component and go to Working Preview to inspect both the
Header and Footer in this style.
12. Close the component when finished.
GO TO ALPHA VIDEO
UX_V12-41

Videos > Filter: Enter Panel. Choose:


UX_V12--41. How to Vertically Center Text in a Panel Header or
Footer.

B. Aligning Buttons in Panel Cards


COMPLETED COMPONENT

The completed components for this section are aligningControls, Aligning-

Controls-Revised and absolutePositionOfAContainer (Panels Web Project).


VIDEO! SEE P. 127

124

The ability to align Buttons is important in all types of applications. We will


show how to do this in the Panel Card itself and in Headers and Footers.
Then we will explain how to maintain positioning when the button is in a
show/hide condition.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Aligning buttons in the Panel Card itself


We will use the sample component that comes with the video. We have
downloaded it for you and will show how it was designed.
1. WPCP > Panels Web Project: Open aligningControls in Design mode.
2. Save as MyAligningControls because
we will be making some changes.
3. Go to Working Preview to inspect.
4. Return to Design mode.
Each button is placed in its own Container.
The Container settings determine button
placement.

CENTER BUTTON

CONTAINER BEGIN
PROPERTIES
LEFT BUTTON

CONTAINER BEGIN
PROPERTIES
RIGHT BUTTON

CONTAINER BEGIN
PROPERTIES

The settings for ButtonCenter are in CONTAINER 5.


PROPERTIES: [CONTAINER: CONTAINER_5]
Container alignment: Center.
Container width: 100%.

The settings for ButtonLeft are in CONTAINER 6.


PROPERTIES: [CONTAINER: CONTAINER_6]
Container alignment: Left.
Container width: 50%.

The settings for ButtonRight are in CONTAINER 7.


PROPERTIES: [CONTAINER: CONTAINER_7]
Container alignment: Right.
Container width: 50%.

Aligning buttons in the


Header / Footer
We show the buttons in the Panel Card Footer, but they
could just as easily be placed in the Header.
The sample shows only two buttons, but we will add a
third so you can really get an idea of how simple this is
to do.

TAB STOP CONTROL

The key is the Tab Stop. A Button is added to the Header or Footer and the
Tab Stop control is placed after it.

125

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Cards: Aligning Buttons in Panel Cards

5. Other Controls: Add a Button. Name: Center.


6. Place it after the first Tab Stop control (yellow).
7. Other Controls: Add a Tab Stop control.
8. Place it below Button: Center.
Thats it you are done!
9. Save the component and go to Working Preview to see your new
button, happily residing in the center position. (inset above).
10. Return to Design mode.

Making a button conditional and maintaining its


position
You can define a Show/Hide condition for a button so that it appears under
some circumstances, but not in others. When you do so, you are given the
option of collapsing the space previously occupied or preserving it.
COLLAPSE VS. PRESERVE

The Client-side Show/Hide condition offers two ways to hide the button,
Collapse or Preserve.
Collapse: The element is hidden by setting its display property. The element no longer takes up space in the HTML document. This means that
elements to the right and below this element will shift to occupy the space
formerly consumed by this element. (Default)
Preserve: The element is hidden by setting its
visibility property. The element continues to take up
space in the HTML document. This means that
elements to the right and below this element will
not move.
We will use ButtonLeft button to demonstrate. We
need to begin by adding the Textbox that will hold
the conditional value.++
11. Defined Controls: Add a Textbox control. Name: Company.

SHOW / HIDE EXPRESSION

CLIENT SIDE PROPERTIES

Now well define the Show/Hide expression for the button.


PROPERTIES: [BUTTON: BUTTONLEFT]
Show/hide expression: Click the button.
a. Enter

the following expression:

Company = Liberty
This expression is case sensitive.
b. When

object is hidden: (choose) Preserve space taken by object.

12. Save the component and go to Working Preview.


ButtonLeft does not appear because the textbox is blank.

126

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

13. Enter Liberty in the Company textbox. (Remember its case sensitive.)
14. Press Tab to see the button.
15. Enter Liberty2 and press Tab again. The button is gone.
16. Close the component.

Positioning elements absolutely


You can also define an absolute position for buttons and other elements. For this demonstration, we will use another UX component
that has been supplied with the video. This particular example
shows a header in a Panel Navigator, but the same settings can be
applied to Panel Card headers.
We will review the component settings without making changes.
17. WPCP > Panels Web Project: Open absolutePositionOfAContainer
in Design mode.
18. Go to Working Preview.
19. Change to different device views to see that ButtonRight
always maintains its position.
20. Return to Design mode.
ButtonRight has been placed in a Container that is inside the
Panel Header. The settings are defined in the Container.

CONTAINER BEGIN
PROPERTIES

PROPERTIES: [CONTAINER: CONTAINER_2]


Container style: Click the button.
a. Padding

> All: 6px.

b. Positioning

and Size:

Position: Absolute.
Top: 0px.
Right: 0px.
c. Click Cancel.
Prevent container float: Yes.

21. Close the component without changes.


GO TO ALPHA VIDEO
UX_V12-77, UXM_V12-2, 8, D23

Videos > Filter: Enter Panel. Choose:


.UX_V12--77. Show/Hide Buttons in panel Header/Footer Without
Messing Up Button Alignment.
UXM_V12--2. Aligning Controls in a Panel Card - Using Containers
and the Tab Stop Control.
UXM_V12--8. Using Absolute Position to Control the Placement of
Elements

Videos > Filter: Enter Container: Choose:

127

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Cards: Creating an Action Sheet and a Panel Window

D23. Understanding the 'Prevent container Float' property on a container control. How to eliminate unwanted vertical space when a clientside show/hide expression hides a control. Advanced developers.
See also Placing data on a pre-defined form on page 231.

C. Creating an Action Sheet and a Panel Window


COMPLETED COMPONENT

The completed component for this section is ActionSheet_PanelWindow

(Panels Web Project).


VIDEO! SEE P. 133

Apple has a menu type sheet,


called an Action Sheet. Its purpose is
to present a series of actionable elements, such as buttons. The Action
Sheet opens when the user clicks on
a button and usually displays at the
bottom of the screen, although it can
be configured to display elsewhere.

There is a second type of window that can also be called


up. This one is referred to as a
Panel Window. Again, the
user clicks a button, this time
opening a new window onto
which a message has been
placed
Each of these conditions is
created with Action Javascript
and a special genie that makes
it all very easy

128

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

We have a UX component ready for


you to define the button actions. It
uses a control type that we havent
come across before, so that is also
on your to learn list.
1. Open
ActionSheet_PanelWindow_Practice
in
Design
mode.
2. Go to Working Preview to see
what we have so far.
Our goal is to have the Archive, Delete and Cancel buttons appear only when
the Open Action Sheet button is clicked.
3. Return to Design mode.
The buttons are in CONTAINER_1.
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: OPEN ACTION SHEET]


click: Click the button.
a. Action

Javascript > Add New Action.

b. Filter

list: Enter Open. Choose: Open a pop-up Ajax Window/


Overlay.

Dialog Title: Action Javascript - Open a Generic Ajax Window


c. How

is window content set? Choose Contents of a Container.

d. Container
e. Click

id: Choose CONTAINER_1.

Pre-defined window styles.

Dialog Title: Pre-Defined Window Styles

At this writing, there are two pre-defined window styles, Panel (com-

ing up next) and Action Sheet.


f.

Select Action Sheet.

g. Action

Sheet properties:

Has title: No.


Window height: Leave blank to let Alpha Anywhere define the
proper Action Sheet height.
h. Click

OK.

Dialog Title: Action Javascript - Open a Generic Ajax Window


i.

Notice that certain properties will be overwritten: Click Yes.


The settings are filled in.

j.

Click OK.

k. Comment:
l.

Enter Open Action Sheet.

Save the Action Javascript.

129

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Cards: Creating an Action Sheet and a Panel Window

Closing the action sheet container window


Even if you do not know Javascript, there are excellent helpers everywhere
in Alpha Anywhere. Heres one we think you will find particularly useful.
INSERTING A METHOD

When trying to find the correct code, think about what the action is doing and
enter it into the Filter (green). We tried cancel with no luck, but close did the
trick. Once you have something that looks appropriate, get more info from the
Examples window (red circle). You can even copy the sample code to the clipboard, as we will do next.

We will set the Cancel button to close the Action Sheet.

CANCEL BUTTON

JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: CANCEL]


click: Click the button.
Dialog Title: Edit Click Event
a. Text

mode: Click Insert UX Component method

Dialog Title: Insert Method


b. Filter:

Enter Close. Choose:

{dialog.Object}.closeContainerWindow(ele);

The Examples pane (circled above) gives sample code for closing this window (yellow). It can be copied to the clipboard and used to write the script.

SAMPLE CODE

c. Read

the example in the right pane.

d. Click

Copy example to clipboard.

e. Click

Close.

Dialog Title: Edit Click Event


f.

COMMENT

130

Press CTRL + V to Paste the contents of the clipboard into the work
area (both notes and code).

//A button on the Dialog will close the window in which the Dialog is hosted.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

CODE

{dialog.Object}.closeContainerWindow(this);
g. Save

the Javascript.

4. Repeat for Archive and Delete buttons, if you like.


If not, just remember they wont do anything if you click on them.
5. Go to Working Preview.
The Archive, Delete and Cancel buttons no longer appear.
6. Click Open Action Sheet to bring them up.
7. Click Cancel to close the container window.
8. Return to Design mode.

Creating a panel window


Next, we will open a window that uses the Free-form Layout control. It is not
a separate Panel Card, but does behave like one. (Screen shot on page 133.)
First, we have to add the Free-form Layout control. This is the new control
we told you about at the top of the exercise.
FREE-FORM LAYOUT
CONTROL

The Free-form Layout s a container that contains any HTML markup that
you want AND placeholders for other controls that have been hidden. It's purpose is to allow for arbitrary placement of controls. The concept is similar to a
Free-form control in a grid
It also differs from a Static Text object in that it does not reside on a Panel
Card, but is separate from it.
The name of the control is Free-form
Layout, but, when placed in the controls
list, it goes by the name, [Free-form Container].
9. Containers: Add a Free-form Layout control.
10. Place it inside Container_2 as above.
Next, we will define it.

FREE-FORM HTML

PROPERTIES: [FREE-FORM CONTAINER]


Free-form layout: Click the button.
a. Click

MESSAGE

HTML Editor and write a message.

Heres what we put in the completed component:


Hello!
Hope you are enjoying the exercises in this book. Isn't Alpha Anywhere a great
program? If you agree, please send Richard Rabins richard@alphasoftware.com
a note - and copy me on it susan@libertymanuals.com.
Subject line: I use Alpha Anywhere to:
Body: Let us know how you use Alpha or tell us your favorite thing about
it. A word or two about this book would be nice, too!

131

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Cards: Creating an Action Sheet and a Panel Window

Thanks - Susan Bush


b. Click

Save and then OK.

Now for the button definition.


JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: OPEN PANEL WINDOW]


click: Click the button.
a. Action

Javascript > Add New Action.

b. Filter

list: Enter Open. Choose: Open a pop-up Ajax Window/


Overlay.

Dialog Title: Action Javascript - Open a Generic Ajax Window


c. How

is window content set? Choose Contents of a Container.

d. Container
e. Click

id: Choose CONTAINER_2.

Pre-defined window styles.

Dialog Title: Pre-Defined Window Styles


f.

Select Panel.

g. Panel

properties:

Has header: Yes.


Header text: Enter Welcome.
Has close button in header: Yes.
Close button text: Close.
Close button justification: Left.
Slide in from: Right.
Window sub-theme: Enter Panel.
This sub-theme will make the window appear like a standard Panel Card.
h. Click

OK.

Dialog Title: Action Javascript - Open a Generic Ajax Window


i.

Notice that certain properties will be overwritten: Click Yes.


The settings are filled in.

j.

Click OK.

k. Comment:
l.

Enter Open Panel Window.

Save the Action Javascript.

11. Save the component and go to Working Preview.


12. Click the Open Panel Window button.
BTW, Richard Rabins* and I really would like to hear from you. Our email
addresses are above.
13. Click Close to dismiss the window.
14. Close the component.
*. For those of you who are new to Alpha Anywhere, Richard Rabins is the Co-Chairman and CEO of Alpha Software, Inc.

132

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

GO TO ALPHA VIDEO
UX_V12-6

Videos > Filter: Enter Panel. Choose:


UX_V12--6. Mobile Window Styles - Action Sheets and panel Windows.

D. Defining Fixed Positions for Objects


COMPLETED COMPONENT

The completed component for this section is fixedPositionOverlays (Panels

Web Project).
VIDEO! SEE P. 135

By default, objects are placed relative to one another because the normal
flow is from Left to Right and Top to Bottom.
For example, if you
have Control_1 and
Control_2, they will
be displayed in that
order (LTR or TTB).
There may be times,
however, when you
want to fix an object
absolutely. That can
be done for the entire
layout (gold arrow) or
for an individual
panel card (pink).
We will use the sample component that comes with the video and go

through the settings without making any changes.


1. Open fixedPositionOverlays in Design mode.
2. Go to Working Preview.
3. User your mouse to swipe to the second Panel Card.
The button on the gray bar (fixed pos in Layout) floats on top of the
second card.
There are two more fixed position buttons on Panel Card 2.
PANEL OVERLAY
CONTAINER

All use a Container type called PanelOverlay.


4. Go back to Design mode.

133

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Cards: Defining Fixed Positions for Objects

5. Go to Containers > Container: Container Type: PanelOverlay.


The fixed pos in Layout button (gold arrow) is placed in the
Panel Navigator. It floats over both pages.
The other buttons, fixed pos button 1 and fixed pos button 2
(pink) are placed in the Panel Card so they appear only on
that page.

6. Click Cancel.
FIXED POSITION OBJECT
FOR LAYOUT

In order for an object to appear on all pages in the layout, it is placed in a

Panel Navigator.
These settings are defined in the PanelOverlay container and will posi-

tion the button 70 px from the bottom and 10px from each side.
CONTAINER BEGIN
PROPERTIES

PROPERTIES: [PANELOVERLAY: CONTAINER_3]


Sub-type: PanelOverlay.
PanelOverlay bottom: 70px.
PanelOverlay left: 10px.
PanelOverlay right: 10px.

BORDER WITH RADIUS EDGE

The color and border with radius edges are optional. They have been used to
make the control easier to see.
Container style: Click the button.
a. Background

FIXED POSITION OBJECT


FOR PANEL CARD

CONTAINER BEGIN
PROPERTIES

color: Pick a dark gray. This one is rgba(0,0,0,.5).

b. Click

the CSS Text tab and complete for the border.


background-color: rgba(0,0,0,.5);
border-radius: 10px;

c. Click

OK.

In order for a fixed position object to appear on a single page, it is placed in a


Panel Card. These settings are defined in their Panel Overlay containers:
Button 1 is 110px from the top and 110px from the left side.
Button 2 is 10 px from the bottom and 10px from the right side.
PROPERTIES: [PANEL OVERLAY: CONTAINER_1]
Sub-type: PanelOverlay.
PanelOverlay top: 110px.
PanelOverlay left: 110px.

134

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

CONTAINER BEGIN
PROPERTIES

PROPERTIES: [PANEL OVERLAY: CONTAINER_2]


Sub-type: PanelOverlay.
PanelOverlay bottom: 10px.
PanelOverlay right: 10px.

7. Review again at Working Preview, if you like.


8. Close the component when finished.
GO TO ALPHA VIDEO
UX_V12-15

Videos > Filter: Enter Panel. Choose:


UX_V12--15. Fixed Position Content when Using panels - 'PanelOverlay' Containers.

Defining Panel Navigators:


Panel Navigators take the user from one Panel Card to another. The can be
used with or without Panel Layouts. There is a large variety of navigation aids
that include those that are device specific, those that use buttons and one that
creates list style menus that can have security applied.
In addition to navigating between cards and layouts, the Panel Navigator can
accomplish other tasks. Heres what we will cover in this section:
A. Understanding Navigation on page 135.
B. Adding Locater Icons on page 144.
C. Change Layout on Orientation Change on page 145.
D. Defining a Custom onSwipe Event on page 146.

A. Understanding Navigation
COMPLETED COMPONENTS

There are eight completed components for this section (Panels Web Project).
They all begin with panelNav: One each for Carousel, Orientation, Programmatic, Tab Buttons and two each for TabBand and List.

VIDEO! SEE P. 144

There are six Navigation types. Which one you use where depends on the
number of Panel Cards and the styling that you would like. They fall into three
basic categories that we will call Device Specific, Buttons and List. Some may
be placed on the Panel (page) others go only in Header/Footer.
All are designed for use in mobile applications. Some work better than others
in web or desktop applications, however. Here is an overview:

DEVICE SPECIFIC

Mobile applications only. While Carousel will work in desktop situations,


swiping is obviously better for mobile devices.

135

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Navigators: Understanding Navigation

Carousel: The user navigates by swiping from one card to another.


Best for limited number of Panel Cards.
Orientation change: Navigation occurs when device orientation is changed

from vertical to horizontal and vice versa.


(2) Panel Cards only.
BUTTONS

Button navigation is suitable for all types of applications.

Programmatic: Buttons are defined to go from one card to another.


Full control because Javascript / Action Javascript used for button and

swipe definition.
Buttons may be placed on the page or in Header/Footer.
Tab Buttons: Navigation buttons are placed in the Header or Footer.
Limited to number of buttons that will fit in Header/ Footer.
Tab Band: Same as Tab Buttons, but with styling options.
Limited to number of buttons that will fit in Header/ Footer.
LIST

The List style is used when there are a large number of Panel Cards. There
are two styles, Buttons and List. Not available for Header/Footer. Also suitable
for all application types.
Uses static list created in Panel Navigator (not List control).
Security can be applied to all or part.
Show/Hide expressions available for all or part.
List: Uses a List for navigation.
Buttons: Uses Buttons for navigation.

Using the device for navigation


There are two methods that can be considered device specific, Carousel and
Orientation. There is also an onSwipe event.

136

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

CAROUSEL

We have used Carousel frequently, but there is a setting with which you may
not be familiar, Loop Navigation.
1. WPCP > Panels Web Project: Open panelNav_carousel in Design
mode.
a. Go

LOOP NAVIGATION

to Working Preview and swipe from card to card.

When Loop Navigation is turned on, the


swiping is continuous from the last card
back to the first. In other words, when you
reach the last card, you are taken back to
the first. The same happens in reverse.
b. Continue

swiping when you get to Panel Card 3 to loop around to


Panel Card 1.

PANEL NAVIGATOR
PROPERTIES

c. Go

in the reverse direction from PC 1 to PC 3.

d. Go

to Design mode.

PROPERTIES: [PANEL NAVIGATOR: PANELNAVIGATOR_1] (CAROUSEL) (LTR)


Navigator type: Carousel.
Flow direction: LTR (Left to Right)
Loop navigate: Yes.
e. Close

the component without changes.


ORIENTATION

In this type, the transition from one Panel


Card to the next occurs when the device is
rotated from vertical to horizontal and back.
This style is limited to two Panels.
May be 2 Panel Cards, 2 Panel Layouts or a
combination.*

2. WPCP > Panels Web Project: Open panelNav_orientation in Design


mode.
a. Go to Working Preview and test by
changing orientations.

Notice the animation as the orientation


change takes place.
b. Return

to Design mode.

This component has two Panel Cards.

PANEL NAVIGATOR
PROPERTIES

PROPERTIES: [PANEL NAVIGATOR: PANELNAVIGATOR_1] (ORIENTATIONCHANGE) (LTR)


Navigator type: OrientationChange.
Portrait orientation Panel: PANELCARD_1.

*. To see how this works with a combination of Panel layout and Panel Card, see C. Change Layout on Orientation Change on
page 145.

137

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Navigators: Understanding Navigation

Landscape orientation Panel: PANELCARD_2.


Animation: Slide.
Other options: None; Fade; Slide left, right, up or down.
Animation duration: 400 (milliseconds).
Flow direction: LTR (Left to Right).
c. Close

ON SWIPE EVENT

the component without changes.

You can also use the Javascript > onSwipe event to add a swipe action.
See Defining a Custom onSwipe Event on page 146.
See Configuring the swipe action on page 281.

Using buttons for navigation


There are several methods for defining navigation buttons, Programmatic,
Tab Buttons, Tab Band (see also Using lists for navigation on page 141).
PROGRAMMATIC

When the Panel Navigator is set to Programmatic, you can define custom
buttons and swipe events by writing your own Javascript. In some cases, you
can also use Action Javascript. We will show how to define buttons here. Swipe
is covered on page 146.
Buttons can be placed in the Header/
Footer or on the Panel Card.
3. WPCP > Panels Web Project: Open
panelNav_programmatic in Design
mode.
a. Go

to Working Preview.

b. Click the buttons to go from panel to


panel.
c. Return

to Design mode.

This component has:


1 Panel Navigator.
3 Panel Cards.
3 Buttons (arrows).

PANEL NAVIGATOR
PROPERTIES

PROPERTIES: [PANEL NAVIGATOR_1] (PROGRAMMATIC) (LTR)


Navigator type: Programmatic.
Animation: Slide.
Animation duration: 400 (milliseconds).

138

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: GOTO PANEL 2]


click: Click the button.
Action Javascript > Add New Action.
Filter: Panel. Choose: Panel Actions.
Action name: Choose Set Active Panel.
Target panel name: PANELCARD_2.
Animate: Yes. (Click OK)
Save the Action Javascript.

JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: GOTO PANEL 3]


click: Click the button.
This time, the Javascript is shown. This is the script created by the
Action Javascript above.

{dialog.object}.panelSetActive('PANELCARD_3');
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES: [BUTTON: GOTO PANEL 1]


click: Click the button.
Repeat one of the above steps to set PANELCARD_1 as the active
panel.
d. Close

the component without changes.

Tab Buttons are placed in the


Panel Navigator Header or Footer.
Number of Panel Cards is
limited to number of buttons
that will fit across the
Header/Footer.

TAB BUTTONS

4. WPCP > Panels Web Project: Open panelNav_tabButtons in Design mode.


a. Go

to Working Preview.

b. Click

the buttons to go from panel to panel.

c. Return

to Design mode.

The Panel Navigator has a Header with 3 Buttons.


(the buttons could also be in the Footer).
Button Properties > Ids for each are BUTTON_1,
BUTTON_2 and BUTTON_3.
There are 3 Panel Cards.

139

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Navigators: Understanding Navigation

PANEL NAVIGATOR
PROPERTIES

PROPERTIES: [PANEL NAVIGATOR: PANELNAVIGATOR_1] (TABBUTTONS) (H) (LTR)


Navigator type: TabButtons.
Animation: Slide.
Animation duration: 400 (milliseconds).
Tab buttons: Click the button.
The Buttons were defined as follows:
Click Add Button Controller.
Button Id: BUTTON_1.
Panel Id: PANELCARD_1.
Repeat for Button_2 and Button_3.
Close the button definition dialog.
Row direction: LTR.
d. Close

the component without changes.


TAB BAND

Tab Band is by far the simplest to design


because buttons are automatically created
based on the Id or Display name of the
Panel Card. It also has pre-defined display
options. While its appearance is similar to
Tab Buttons, its configuration is quite different.
Buttons can be in Header or Footer. Number of Panel
Cards limited to number of buttons that will fit. Left justified. No spacing options.
In this case, there are 3 Panel Cards.
Limited to number of buttons that will fit.
5. WPCP > Panels Web Project: Open panelNav_tabBand_top and
panelNav_tabBand_bottom Design mode
a. Go

to Working Preview for each to see the displays.

The style used in the Header is called Base. The Footer uses Bottom. They
are interchangeable so you can use either style in either place.

STYLES

HEADER DEFINITION

PANEL NAVIGATOR
PROPER5TIES

The Panel Navigator is defined first and then the Panel Cards.
b. Go to Design mode for panelNav_tabBand_top
PROPERTIES: [PANEL NAVIGATOR: PANELNAVIGATOR_1] (TABBAND) (LTR)
Navigator type: TabBand.
Tab band location: Top.
Tab band sub-theme: Base.
Animation: Slide.

140

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Animation duration: 400 (milliseconds).


Flow direction: LTR.
PANEL CARD PROPERTIES

PROPERTIES: [PANEL CARD: PANELCARD_1]


Id: PANELCARD_1.
Display name: Pane 1.
If display name is blank, Id will be used.

PANEL CARD PROPERTIES

PROPERTIES: [PANEL CARD: PANELCARD_2]


Display name: Pane 2.

PANEL CARD PROPERTIES

PROPERTIES: [PANEL CARD: PANELCARD_3]


Display name: Pane 3.

FOOTER DEFINITION

Only two of the Footer settings are different.


c. Go to Design mode for panelNav_tabBand_bottom.
d. Repeat

PANEL NAVIGATOR
PROPER5TIES

above except as follows:

PROPERTIES: PANEL NAVIGATOR: PANELNAVIGATOR_1] (TABBAND) (LTR)


Tab band location: Bottom.
Tab band sub-theme: Bottom.
e. Close

both components without changes.

One more style to go, Lists. It is multi-purpose and can be used for both

Button and List menus.

Using lists for navigation


This type of navigation list is created in the Panel Navigator and is different
than the List control.* It is most often used when there are a large number of
panel cards. The list is static and may have sub-lists.
Security can be applied to one or more items.
Show/Hide can be applied to one or more items.
Cannot be used in Header/Footer.
LIST OR BUTTONS STYLE

There are two styles, List and Buttons. The styles can be mixed. In other
words, you can have a button that opens a sub-list in either buttons or list style
or vice versa.

*. To use the List control for navigation, see See Building a Menu with Docked Panels on page 275.

141

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Navigators: Understanding Navigation

Both styles are defined in the same basic way. The choice is made in

the List definitions dialog (page 143).

6. WPCP > Panels Web Project: Open panelNav_List_ListStyle and


panelNav_List_ButtonsStyle in Design mode.
a. Go to Working Preview for both and
click the Lists/Buttons to see how they
work.

The List Heading (My Items List) is not


shown in the video because we added it.
b. Return

to Design mode for both compo-

nents.
Both components use the same basic structure.
Whats noteworthy here is that this component has only

three panel cards. The Panel Navigator creates the additional pages that hold the lists and/or buttons.
A separate Button is needed, however for the, Back
button that appears on the sub-pages (gold arrow above
and green at left).
BACK BUTTON SHAPE

The pointed shape of the Back button is included with the


IOS style, defined at:
UX Properties > Style name.
c. Continue with the panelNav_List_ListStyle.
This explanation applies to both List and Button styles.
PANEL NAVIGATOR
PROPERTIES

PROPERTIES: [PANEL NAVIGATOR: PANELNAVIGATOR_1] (LIST) (H) (LTR)


Navigator style: List.
Animation: Slide.
Animation duration: 400 (milliseconds).
List definition: See List definition below.
Since the List Definition dialog is a bit involved, we will skip ahead to
the Back button settings and then return here.

NAVIGATION BUTTONS

142

Has Back button: Yes

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Back button id: Choose BACK.


LIST DEFINITION

Lists are defined as follows:


d. Return
e. Click

to Panel Navigator Properties > List definition.

the button.
The List is defined at the Tree Data Genie.
Items can be added all at once or individual siblings and
children can be added later.
To begin list:
Click Add item - Sibling and enter lines in a
tree format (inset). Press TAB to indent.
Additional items:
Sibling: Same level as selected line. In other
words, if List item 2 is selected, the new item
will be on the same level.
Child: Item is a level below selected line.
Editing (gold arrows):
Move items in tree by using arrows at top.
Promote and demote with arrows at left.
Delete with Xs at bottom of list.

ITEM TYPES

There are two types of Items:


Leaf: List items that open panel cards (yellow).
Branch: Those that open a sub-list (green).

HEADINGS

Headings can be added for both the main List and for Branches (purple).

STYLE

The style is defined separately for the main List and for Branches
Main List: Click Set List Properties and select List or Buttons (above
screen shot).
Branches: Defined in Properties (red circle below).

SECURITY GROUPS

Security groups can be defined at all levels.

SHOW / HIDE

Server-side Show / Hide conditions can be specified at all levels.

LEAF AND BRANCH


PROPERTIES

Properties are entered as follows:

LEAF PROPERTIES

PROPERTIES: MY LIST
Item type: Heading.

143

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Navigators: Adding Locater Icons

Heading text: Click the button and enter: My Item List.


LEAF PROPERTIES

PROPERTIES: LIST ITEM 1 & LIST ITEM 2 & LIST ITEM 3


Item type: Item.
Item: <Item name> (List item 1, 2 or 3)
Target Panel: Select Panel Card (PANELCARD_1, 2 or 3)

SECURITY
SERVER-SIDE

Security Groups: Click button to define.


Show/hide expression: Enter Xbasic expression (no builder available).
Determines if the item should be shown. Can use session variables. Item
shown if expression is blank or evaluates to true. If expression cannot be
evaluated, item is shown.

BRANCH PROPERTIES

PROPERTIES: SUB LISTS


Item: <name> (Sub Lists)
Child list style: Choose List or Buttons.

SECURITY
SERVER-SIDE

Security Groups: Click button to define.


Show/hide expression: Enter Xbasic expression as above.
f.

Close the Tree Data Genie.

g. Close
GO TO ALPHA VIDEO
UX_V12-46

both components without changes.

Videos > Filter: Enter Panel. Choose:


UX_V12--46. Panel Navigator - Overview of Different Methods of
Navigating Panel Cards in a Panel Navigator.

B. Adding Locater Icons


COMPLETED COMPONENT

The completed component is LocaterIcons (Panels Web Project).

Locater Icons show which panel the user is on. They change as
the panel is changed and the panels can be switched by clicking
them.
1. WPCP > Panels Web Project: Open LocaterIcons in
Design mode.
2. Go to Working Preview.
3. Swipe from one card to the next and notice the icons change.
4. Click the icons to change the pages.
5. Return to Design mode.
The component has a Panel Navigator and three Panel Cards.
Locater Icons are added simply by enabling an option. In this
case, the Panel Navigator is set to Carousel, but it will work with
the other options, too.

144

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

PANEL NAVIGATOR
PROPERTIES

PROPERTIES: PANEL NAVIGATOR: PANELNAVIGATOR_1] (CAROUSEL) (LTR)


Navigator type: Carousel (or any other type).
Flow direction: LTR (Left to Right)
Has indicator: Yes.

NAVIGATOR POSITION
INDICATOR

Indicator location: Auto.


The location is based on the Flow Direction. LTR will place it at the bottom. TTB (Top to Bottom) will place it to the right side.
Also available: Top, bottom, left, right, element (positions in a specific
element).

6. Try some alternate settings, if you like.


7. When finished, close the component without changes.
Videos > Filter: Enter Panel. Choose:

GO TO ALPHA VIDEO
UX_V12-11

UX_V12--11. Locater icons for Panel Navigator.

C. Change Layout on Orientation Change


COMPLETED COMPONENT

The completed component is UxComponent_ChangingLayoutOnOrienta-

tionChange (Panels Web Project).


Previously, we saw how templates can be used to change the data display
when switching from portrait to landscape in a List control. This condition is
different in that it controls how many panel cards are shown when the device
orientation is changed.
VIDEO! SEE P. 146

We will use the component supplied with the video.


1.

WPCP > Panels Web Project: Open UxComponent_Changing


LayoutOnOrientationChange in Design mode.
2. Go to Working Preview.
3. Mobile simulator: Go to iPhone horizontal to
see one card displayed (green).
4. Go to iPhone vertical to see two panel cards
displayed (red and blue).
5. Return to Design mode.

145

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Navigators: Defining a Custom onSwipe Event

This component has the following:


(1) Panel Navigator.
(1) Panel Layout with 2 Panel Cards for
Portrait 1 and Portrait 2 (yellow).
(1) Panel Card for Landscape (aqua).
All thats needed next are a couple of settings in
the Panel Navigator.

PANEL NAVIGATOR
PROPERTIES

PROPERTIES: [PANEL NAVIGATOR: PANELNAVIGATOR_1] (ORIENTATIONCHANGE) (LTR)


Navigator type: OrientationChange.
Portrait orientation Panel: PANELLAYOUT_1.
Landscape orientation Panel: PANELCARD_3.
Animation: Slide.
Animation duration: 400 (milliseconds).
Flow direction: LTR.
h. Close

GO TO ALPHA VIDEO
UXM_V12-4

the component without changes.

Videos > Filter: Enter Panel. Choose:


UXM_V12--4. Automatically changing the entire layout of the UX
component on a device Orientation Change event.

D. Defining a Custom onSwipe Event


COMPLETED COMPONENT

VIDEO! SEE P. 147

The completed component is onSwipeEvent (Panels Web Project).

In addition to using Carousel mode in the Panel Navigator, you can also
define your own custom swipe action.
Custom actions can be defined for swiping left, right, up or down.
1. WPCP > Panels Web Project: Open onSwipeEvent in Design mode.
This component has 2 Panel Cards wrapped
in a Panel Navigator.
The Panel Navigator is set to Programmatic.
On page 138, we showed how to define buttons for the Programmatic navigation mode,
now we will show how to customize swiping.

146

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

PANEL NAVIGATOR
PROPERTIES

PROPERTIES: [PANEL NAVIGATOR: PANELNAVIGATOR_1] (PROGRAMMATIC) (LTR)


Navigator type: Programmatic.
Animation: Slide.
Animation duration: 400 (milliseconds).
Flow direction: LTR (Left to Right).
We want to go from one panel card to another, so the onSwipe events are

defined there.
JAVASCRIPT

PROPERTIES: [PANEL CARD: PANELCARD_1]


OnSwipe: Click the button.
The code is as follows:
if(e.swipeDirection == 'left') {
{dialog.object}.panelSetActive('PANELCARD_2')
}
a. Click

Information on how to write the OnSwipe event handler to see


the other conditions.

b. Close

JAVASCRIPT

the Javascript editor.

PROPERTIES: [PANEL CARD: PANELCARD_2]


OnSwipe: Click the button.
The code is as follows:
if(e.swipeDirection == 'right') {
{dialog.object}.panelSetActive('PANELCARD_1')
}
c. Close

the Javascript editor.

2. Go to Working Preview to test the results of the scripts.


3. When finished, close the component without changes.
GO TO ALPHA VIDEO
UXM_V12-7

Videos > Filter: Enter Panel. Choose:


UXM_V12--7. Adding Custom swipe Events t*o Panels.

Defining Panel Layouts:


Panel Layouts are used to display multiple Panel Cards.* They can also hold
Panel Navigators and additional Panel Layouts. Since they are capable of creating complex layouts, they might seem a bit intimidating at first. Once understood, however, you will find you can easily build an amazing variety of
designs. Its all about planning ahead.

*. While it is not a requirement, Panel Layouts usually contain two or more Panel Cards. For an example of a situation where you
might need only one, see Adjusting the Length of a List on page 42. That exercise does use two Panel Cards, however it could use
a single card if the Textbox control was not needed.

147

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Layouts: Understanding Flow in Panel Layouts

We recommend sketching your design on a piece of paper. Once you have an


idea of what youd like to accomplish and understand the following principles,
the rest will fall into place.
Headers / Footers: Panel Layouts use the same Headers and Footers as do
Panel Cards, therefore those discussions apply here, as well.
Heres what you ll find in this section:
A. Understanding Flow in Panel Layouts on page 148.
B. Understanding how Panel Card size affects Panel Layouts on
page 150.
C. Understanding Docking on page 151.
D. Docked Panel Display: Docked Panel Controller button on
page 153.
E. Docked Panel Display: Flow Collapse Button on page 156.
F. Docked Panel Display: Nested Panel Layouts on page 158.
See also:
Adjusting the Length of a List on page 42.
Aligning buttons in the Header / Footer on page 125.
Positioning elements absolutely on page 127.
More on Panels on page 160.
Building a Menu with Docked Panels on page 275.

A. Understanding Flow in Panel Layouts


COMPLETED COMPONENT

The completed component for this section is PanelLayoutSimple (Panels

Web Project).
Since a Panel Layout usually consists of two or more cards it is important to
understand how they will display. Flow direction of the Panel Layout and size of
the Panel Cards are the primary contributing factors.
If there is not enough room to display all the panel cards, Alpha Anywhere
will dock (hide) them as necessary. If they are docked, a button and/or swipe
action will be necessary to bring them into view.

Understanding flow direction


The position of the Panel Cards is determined by the Panel Layout. There are
four placement options:

148

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

HORIZONTAL

LTR = Left to Right. Flow is left


to right. (Default)
RTL = Right to Left. Flow is
right to left.
VERTICAL

TTB = Top to Bottom. Flow is


top to bottom.
BTT = Bottom to Top. Flow is
bottom to top.

We have a practice component


where you can experiment to see exactly how this works. This UX
component has the following
Panel Layout with a Header.
Two Panel Cards, each containing a Textbox and a Button
surrounded by a Frame. The Button is for display purposes
only; in other words, if you click on it, nothing will happen.
The Mobile simulator is on.
As we go along, we will indicate the primary Preview mode
(iPhone Vertical, Horizontal, etc.). It is also a good idea to check
out the others.
1. WPCP > Panels Web Project: Open PanelLayoutSimple in
Design mode.
Notice that the Panel Layout Id is followed by (LTR), indicating
that its flow direction is Left to Right, the default (red circle).
2. Go to Working Preview.
3. Set the mobile simulator to iPhone Horizontal.
4. Inspect and return to Design mode.
Now well see what happens when we change to the other modes. LTR is
the most common, with TTB coming next, so well do that one now.
PANEL LAYOUT PROPERTIES

PROPERTIES: PANEL LAYOUT: [PANELLAYOUT_1]


Layout flow direction: Change to TTB.

5. Go to Working Preview, inspect at iPhone Horizontal and Vertical.


6. Return to Design mode.
7. Repeat above changing first to RTL and then to BTT.

Understanding before & after


The terms before and after are used in Panel Layout design. The meaning of
these terms depends on the Panel Layouts flow direction.

149

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Layouts: Understanding how Panel Card size affects Panel Layouts

For example, if the flow direction is LTR, then:


Before means Panel Card(s) to the left of the designated Panel.
After means Panel Card(s) to the right.

8. Close the component without changes.

B. Understanding how Panel Card size affects


Panel Layouts
The size of a Panel Card in a Panel Layout refers to its width for an LTR or
RTL flow or its height for TTB or BTT flow.
If there is not enough
room to display a Panel
Card,
it
will
be
docked. This means
all or part of it will be
hidden.
In some cases, there
might be enough room
to fully display a card in a device that is in horizontal mode, but not in vertical.
The width of a card is specified at:
Panel Size and Dock Options.
By default, when there are two Panel Cards, each will take up 50% of the
space allotment as shown above left. Three cards will each take 1/3, etc.
Size is set by three definition types. You can define for as many cards as you
like. Definition types can be mixed.
Percentage: 100%, 50%, 66.67%, 33.33%, 25% or any range in
between.
Pixels, Inches, etc. Size can also be determined with standard CSS
settings.
Positive number = percentage of available space.
(25% = Card takes 1/4 of available space)
Negative number = available space minus space specified.
(-10px = Card takes all of available space minus 10px).
Flex: Flex(1), Flex(2), etc.

You can also specify a minimum size for a card (see page 152).
The next section will show how Docking works.
GO TO ALPHA VIDEO
UXM_V12-12

150

Videos > Filter: Enter Panel. Choose:


UXM_V12--12. Overview of different methods for specifying the size
of a Panel in a Panel layout.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

C. Understanding Docking
COMPLETED COMPONENT

The completed component for this section is PanelLayoutDocked (Panels


Web Project)
When a Panel Card is docked, it is hidden from view. This happens automatically when there is not enough room to display the card. In that instance, Alpha
Anywhere docks (hides) it. Panel Cards can also be docked intentionally as in
the case of a menu list that is need for only a few moments. Docking it moves it
out of the way to enlarge the primary workspace.
Once a Panel Card has been docked, a button or other action, such as swiping, is needed to bring it into view.
Size of the Panel Card and size of
the device determine automatic
docking. In the example at left,
Panel 1 has been set to flex(1)
and Panel 2 has been set to
flex(2). Both cards are fully displayed in iPad Vertical, but Panel
1 is partially docked in the
iPhone simulations.
We have a UX component ready
for you. Initially there is no entry
in the width setting, but it is the
equivalent of flex(1) or 50% for each. Well change it so we can see how
docking works.
1. WPCP > Panels Web Project: Open PanelLayout_Practice in Design
mode.
2. Save it as MyPanelLayoutDocked.

PANEL SIZE AND DOCK


OPTIONS
PANEL SIZE AND DOCK
OPTIONS

PROPERTIES: [PANEL CARD: PANELCARD_1]


Layout size: Enter flex(1)
PROPERTIES: [PANEL CARD: PANELCARD_2]
Layout size: Enter flex(2)

3. Go to Working Preview: iPhone Vertical.


Panel Card 1 is partially hidden by Panel Card 2.
4. Go to iPhone Horizontal.
More of Panel Card 1 appears.
5. Go to iPad Vertical.
There is now enough space to view both cards fully.
6. Return to Design mode.
Now, well see what happens when we change the flow direction.

151

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Layouts: Understanding Docking

PANEL LAYOUT PROPERTIES

PROPERTIES: PANEL LAYOUT: [PANELLAYOUT_1]


Layout flow direction: Change to TTB.

7. Return to Working Preview: iPhone Horizontal.


Panel 2 is displayed, but part of Panel 1 is cut off.
8. Use the mouse to scroll Panel 1 until the rest
comes into view.
Notice the scroll bar at the right of the window
(gold arrow).

MINIMUM SIZE

You can also specify the minimum size for a card. If there is
not room for other cards, they will be docked.
PROPERTIES: PANEL CARD: PANELCARD_1]
PANEL SIZE AND DOCK OPTIONS

Layout size: Remove entry (blank). (Press TAB)


Opens Minimum size option.
Minimum size: Enter 3in.

9. Go to Working Preview to inspect in horizontal and vertical modes.


Notice that once a card is fully docked (completely hidden),
it cannot be retrieved. Not to worry. Well show you two ways to bring it into
view
10. Return to Design mode, remove the Minimum size from Panel Card 1
and enter in Panel Card 2.
11. Go to Working Preview to see the results.
12. Return to Design mode.
13. Remove the Minimum size from Panel Card 2.
We suggest you experiment, using the other Panel Layout > Layout Flow
Directions and Panel Card sizes to get a good sense of how this works. Sometimes the results surprised us!
14. When finished, save and close the component.
DOCKED PANEL DISPLAY

Docked Panel Cards are typically displayed by means of a button or swipe


action.* There are two types of buttons, docked panel controller buttons and
flow collapse buttons.
Both are used with Panel Layouts. We will look at them next.

*. See Configuring the swipe action on page 281.

152

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

D. Docked Panel Display: Docked Panel Controller


button
COMPLETED COMPONENT

The completed component for this section is jQueryDemoSimple (Panels

Web Project).
A Docked Panel Controller button displays a specific docked panel card.
Typically, it is used to bring up a card that has an action, such as a menu
selection. Once the selection has been made, the panel is re-docked to
allow for more workspace
VIDEO! SEE P. 155

These buttons are defined, not in their click or onClick events, but in the
Panel Layout properties
We will use one of the components supplied with the
video. The others have also been downloaded and are
in the Menu Web Project. This one has the following:
1 Panel Layout, 3 Panel Cards, 2 Lists and
2 Buttons.
The Lists contain Static data with menu items.
The Buttons are in the Main Panel Card header.
Their actions are defined in the Panel Layout.
1. WPCP > Panels Web Project: Open
jQueryDemoSimple in Design mode.
2. Go to Working Preview.

HOW IT WORKS

In order to follow the upcoming discussions, pay special attention to the


names of the panel cards and the way the docked panels are displayed.
This component has three panel cards, LEFTMENU,
MAINPANELCARD and RIGHTMENU.
The component opens at the main panel card.

LEFTMENU is defined

to be docked before the


main panel card.
RIGHTMENU is
docked after main panel.
When the buttons are
clicked, the menu panel
cards slide into view, forcing the main panel card to move right or left.
3. Click the Left Menu button to open the panel.
4. Click again to dismiss the it.

153

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Layouts: Docked Panel Display: Docked Panel Controller button

5. Repeat with the Right Menu button.


6. Return to Design mode.
This exercise has some new terminology. Lets get it out of the way first, so
the settings make sense.

Understanding the display methods


Docked panels can be displayed in three ways, Over, Slide and Push. This is
defined in the Panel Layout properties.
Over displays the docked panel on top of the main panel.
Slide shifts the main panel to the left or right depending on the Dock
Options setting. (Default)
Push shifts the main panel to the left, right, top or bottom, depending
on the flow direction.
In this case, we are using a single condition, Slide. If you wish to have more
than one condition, you will need additional Panel Layouts. This is explained in
F. Docked Panel Display: Nested Panel Layouts on page 158.

Understanding dock lock flow


If this option is selected (default), the menu panel becomes modal when it
displays. This means other panels are locked so the user cannot interact with
them. Clicking on a locked area will return the menu panel to a docked state.

Understanding the dock options


We noted earlier that to dock a Panel Card means to hide it. There is another
term that is commonly used, collapse. There is a full set of ways that Panel
Cards can be hidden.
None.
Collapse-before and -after.
Auto collapse-before and -after.
Portrait collapse-before and -after.
Landscape collapse-before and -after.
Self portrait collapse-before and -after.
Self landscape collapse-before and -after.
These terms specify the initial dock state for the Panel Card.
None (or blank entry) means the Panel Card will be visible if there is
sufficient space on the device.
Options prefixed with portrait or landscape will be docked based on
the device orientation.
Options prefixed self-portrait or self-landscape will be docked based
on the orientation of the Panel Layout (which may or may not match
the device orientation).
OK, now we can get to the settings.

154

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Defining the buttons


The buttons are defined in the Panel Layout properties.
PANEL LAYOUT PROPERTIES

PROPERTIES: [PANEL LAYOUT: TOPPANEL] (LTR)


Docked panel display method: Slide.
Dock lock flow: Yes.
Docked Panel controller button: Click the button.

Two Button Controllers have been added. Heres how they were defined.
a. Click

Add Button Controller.

Button Id: Choose


LEFTMENUBUTTON.
Panel Id: Choose LEFTMENU.
b. Click

Add Button Controller.

Button Id: Choose


RIGHTMENUBUTTON.
Panel Id: Choose RIGHTMENU.
c. Close

PAGE SIZE AND DOCK


OPTIONS

the dialog.

PROPERTIES: [PANEL CARD: LEFTMENU]


Layout size: 200px.
Dock: collapse-before.
This means the panel card will collapse (be docked) to the left of the
main panel card.

PAGE SIZE AND DOCK


OPTIONS

PROPERTIES: [PANEL CARD: RIGHTMENU]


Layout size: 200px.
Dock: collapse-after.
This means the panel card will collapse (be docked) to the right of the
main panel card.

TO BE CONTINUED

Learn how to add even more features to this component. See:


Docked Panel Display: Nested Panel Layouts on page 158.
Building a Menu with Docked Panels on page 275.
7. Close the component without changes.

GO TO ALPHA VIDEO
UX_V12-78

Videos > Filter: Enter Panel. Choose:


UX_V12--78. Building a Menu System in a UX Component Using
Docked Panels in a Panel Layout.

155

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Layouts: Docked Panel Display: Flow Collapse Button

E. Docked Panel Display: Flow Collapse Button


COMPLETED COMPONENTS

The completed components for this section are flowCollapse and flowCol-

lapse_Revised (Panels Web Project).


The purpose of a flow collapse button is also to increase workspace.
It docks / undocks one or more panels before or after the main one
a style you have used often. At left is an example a flow collapse button used to hide (dock) the calendar in Ms Outlook.
As you learned in the previous exercise, docking and undocking are also
referred to as collapsing and expanding. As you have probably figured out, this
is the case with the Flow Collapse button.

VIDEO! SEE P. 158

HOW IT WORKS

LTR
RTL
TTB
BTT

Panels are collapsed according to the Panel Layout flow.


In our example, there are three panel cards two menus and a main
panel (see screen shot below).
Depending on the Panel Layout flow, the menus would be collapsed as
follows:
Collapsed / expanded to the left of main panel (see screen shot below).
Collapsed / expanded to the right of main panel (as in above screen shot).
Collapsed / expanded above main panel.
Collapsed / expanded below main panel.
Only one button is necessary because it toggles between collapse and
expand.
If more than one direction is desired, Panel Layouts can be nested (see
page 158).
We will look at two pre-defined components in this section. The first was
supplied with the video. The second is one that we revised.
1. WPCP > Panels Web Project: Open flowCollapse in Design mode.
2. Go to Working Preview.
This particular components display is limited to larger devices due to the
size of its panel cards.
3. Device simulator: Go to iPad Horizontal.

156

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

4. (A) Click the


first collapse button (gold arrow) to
see the far left panel
become docked.
5. (B) Click the
second collapse
button (red circle)
to see that panel
become docked.
6. (C) Click each in
turn again until
both panels reopen.
7. (A) Click the second collapse button again to see both panels become
docked. Result = (C)
8. Change to iPhone Horizontal and iPhone Vertical.
9. If there is a collapse button, click it.
There is not sufficient room to display the menu cards, so it does not operate
properly or may not even be there at all. There is a reason for this that we will
examine shortly, but first, lets look at the Flow Collapse button settings.
10. Return to Design mode.

Defining the settings


WHICH CARD GETS
BUTTON?

This time, the settings are for the Panel Card that comes after the one you
want to collapse. In other words:
To collapse Panel Card 1, put the button on Panel Card 2.
To collapse Panel Card 2, put the button on Panel Card 3.
Therefore, in this case, Panel Cards 2 & 3 have Flow Collapse buttons.
Panel card width plays an important part in display. In this case, the width
has been specified for all panel cards.

WIDTH

We will take the settings in turn.


PANEL SIZE AND DOCK
OPTIONS

FLOW COLLAPSE BUTTON

PROPERTIES: [PANEL CARD: PANELCARD_1] (H)


Layout size: 200px.
Dock: None (or blank).
PROPERTIES: [PANEL CARD: PANELCARD_2] (H)
Has flow collapse button: Yes.
Button id: masterbutton.

PANEL SIZE AND DOCK


OPTIONS

Layout size: 200px.


Dock: None (or blank).

157

CHAPTER 3. PRICELESS PANELS (UX)


Defining Panel Layouts: Docked Panel Display: Nested Panel Layouts

FLOW COLLAPSE BUTTON

PROPERTIES: [PANEL CARD: PANELCARD_3] (H)


Has flow collapse button: Yes.
Button id: FLOWBUTTON.

PANEL SIZE AND DOCK


OPTIONS

Layout size: Blank.


Minimum size: 200px.
Dock: None (or blank).

11. Close the component without changes.


SIZE MATTERS

The reason that these settings work only on a larger device is due to the
width of the Panel Cards, especially Panel Card 3. By making the following adjustments to the widths, we were able to make everything fit
on an iPhone Vertical.
12. WPCP > Panels Web Project: Open flowCollapse_Revised in
Design mode.
Note the following changes:
PANEL SIZE AND DOCK
OPTIONS
PANEL SIZE AND DOCK
OPTIONS

PROPERTIES: PANEL CARD 1 & 2


Layout size: 100px.
PROPERTIES: PANEL CARD 3
Layout minimum: Entry removed (now blank).

13. Go to Working Preview > iPhone Vertical.


All of the Panel Cards fit, so the Collapse Buttons display properly.
14. Test them out and view in other device layouts.
15. Return to Design mode.
BUTTON APPEARANCE

The Flow Collapse button can be given any appearance you like. As soon as
the selection is chosen, a full range of HTML and image options open for
both the Collapse and Expand states
16. Close the component without changes.
GO TO ALPHA VIDEO
UX_V12-84.

Videos > Filter: Enter Panel. Choose:


UX_V12--84. Adding a 'Flow Collapse' button to panels in a Panel Layout in order to hide/show Panels.

F. Docked Panel Display: Nested Panel Layouts


COMPLETED COMPONENT

The completed component is jQueryDemo (Panels Web Project).


This exercise is continued from D. Docked Panel Display: Docked Panel

Controller button on page 153.

158

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

There will be times when you want the dock behavior to expand beyond a
single action. You may, for instance, desire different display behaviors on each
side of the main panel. Or, you may want to collapse / expand menus on both
sides of the main page.
Since only one of these options is available for each Panel Layout, the solution is to add another by nesting it within the first.
VIDEO! SEE P. 155

We will use the second component provided with the video series. It displays
two docked menus, one sliding out from the left and another coming in from the
right and placed over the main panel.*

1. WPCP > Panels Web Project: Open jQueryDemo in Design mode.


2. Go to Working Preview and click the buttons to see it in action.
3. Return to Design mode.
TOPPANEL (GREEN)

The first Panel Layout is at the top. It contains:


1 Panel Card (LEFTMENU) and a List (leftmenu).
CENTERPANEL (YELLOW)

The second Panel layout comes next. It contains:


2 Panel Cards (MAINPANELCARD and RIGHTMENU).
MAINPANELCARD contains:
Header and 2 Buttons (Left Menu & Right Menu)
RIGHTMENU contains:
1 List (rightMenu)

The Panel Layout settings are as follows:


PANEL LAYOUT PROPERTIES

PROPERTIES: [PANEL LAYOUT: [TOPPANEL] (LTR)


Docked panel display method: Slide.
Dock lock flow: Yes.
Docked Panel controller buttons: Click the button.
Button Id; LEFTMENUBUTTON.

*. See Understanding the display methods on page 154.

159

CHAPTER 3. PRICELESS PANELS (UX)


Video Library: More on Panels

Panel Id: LEFTMENU.


PANEL LAYOUT PROPERTIES

PROPERTIES: [PANEL LAYOUT: CENTERPANEL] (LTR)


Docked panel display method: Over.
Dock lock flow: Yes.
Docked Panel controller buttons: Click the button.
Button Id; RIGHTMENUBUTTON.
Panel Id: RIGHTMENU.

4. Close the component without changes.


TO BE CONTINUED

To learn how to put the menu items to use, go to Building a Menu with
Docked Panels on page 275.

Video Library:
This section contains video references that may also be of interest.

More on Panels
STORE / RESTORE STATE

GO TO ALPHA VIDEO

UX Components can use complex layouts that involve multiple


Panel Cards inside Panel Navigators
and Panel layouts. You might want
to persist the state of the Panel (i.e.
remember which Panel Card in a
particular Panel Navigator is active
and which Panels in a Panel Navigator have been docked) so that you
can later restore this state. This video shows how this can be done.
Videos > Filter: Enter Restore. Choose:
UX_V12--67. Storing and restoring the 'state' of a UX Component with
multiple Panels. Includes downloadable component.

PREVENT USER FROM


LEAVING INCOMPLETE
FORM

160

A common design pattern in a mobile application is to have multiple Panel


Cards inside a Panel Navigator. If one of the Panel Cards contains a form, you
might want to prevent the user from navigating to another Panel Card if the
form has been edited, but not yet been saved.
This video shows how this is done using the Panel Navigator's onBeforePanelActivate event. The same techniques can be used in a PanelLayout.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

In addition to accomplishing the above, it also has an example of an Alert


message that you might find useful.

The copy for the Reset button warning is defined at:


UX Properties > Customization.
Since no action has been defined for the Submit button, nothing will happen
even if you do click it.
GO TO ALPHA VIDEO

Videos > Filter: Enter Panel. Choose:


UX_V12--68. Preventing a Panel from losing focus.
Sample component has been downloaded:
Panels Web Project: PreventPanelNavigationIfDirty.

EMBEDDED UX - ON PANEL
ACTIVE EVENT

GO TO ALPHA VIDEO

A common practice when designing mobile applications is to break a large


application into multiple smaller UX components and then embed components
in Panel Cards in the 'master' UX component. When you do this, it is useful to
be able to execute code whenever a child UX component gets focus.
This video show how the
onPanelActive client-side event in a
child UX will fire whenever the
Panel Card in which it is embedded
gets focus.
Uses a Panel Navigator.
See also Understanding Responsive Layout Design on page 238.
Videos > Filter: Enter Panel. Choose:
UX_V12--75.Embedded UX Components - Understanding the
onPanelActivate event. Includes downloadable components.

161

CHAPTER 3. PRICELESS PANELS (UX)


Video Library: More on Panels

DYNAMICALLY ADD /
REMOVE PANEL

GO TO ALPHA VIDEO

When you create a UX


component that uses a Panel
Navigator, you typically
define the Panels (Cards, Layouts and child Navigators)
that this panel navigator controls at design-time.
You can also dynamically
add new panels to a Panel
Navigator at run-time by calling the .addPanel() method of
the panel navigator object.
Similarly, you can remove
panels from a Panel Navigator at run-time.
Videos > Filter: Enter Panel. Choose:
UX_V12--48. Dynamically adding Panels to a Panel Navigator.
Includes downloadable component.

162

Chapter 4.

Offline or Online (UX)

You are always in balance


With Alpha Anywhere due to advanced design that permits data edits even when the device is
offline. And, whats more these features work when youre online, too!
Online or off, the Detail View and Search parts for the UX are excellent for everyone!

CHAPTER 4. OFFLINE OR ONLINE (UX)

What you will find here


Topic
How the Chapter is Organized
Understanding the terminology

Understanding Disconnected (Offline) Applications

Page
165
169

169

Understanding the design approach

171

Understanding development

172

Creating a List with Detail View and Search Part

176

Creating a Disconnected Application

189

Understanding Hierarchical Data

197

Viewing Local Storage contents

201

Data Connection: Comparing Data Binding & List Detail View Methods

207

Associating a List Detail View with an Existing List

208

Adding a List Search Part to an Existing List

210

Adding More Buttons

212

More Notes

213

Mobile applications:
The material in this chapter is suitable for both web and mobile applications. In order
for use in mobile apps, however, Panels must be added. They are discussed fully in
Chapter 3.
Enhanced genie: There is a genie on the Alpha Software drawing board that will automatically add the panels. It may be installed by the time you read this. Be sure to update
your software!

164

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How the Chapter is Organized


Bet you thought you knew everything about the UX List
Control after all, just a short while ago you worked your
way through one hundred plus pages. Wrong! The features
keep coming and coming and coming.
The latest addition to Alpha Anywhere is the ability to work
regardless of whether or not an Internet connection is available. This has been referred to by noted mobile database
critics as the elephant in the room* because it is so critical
and usually necessitates complicated code.

Hurrah! The folks at Alpha Software have come up with a


Offy, the offline elephant greeted attendees at the
2014 Alpha Developer Conference in Boston.

solution that is surprisingly easy to implement because a


genie writes the code! This is truly a situation where it will
take longer for us to tell you about it than it will for you to
complete the component.

But. Theres even more to it than that.


Everyone. . Even those with a constant connection will love the new List
Detail View and the genie that creates it. If you are coming from the Grid world,
you know that a Detail View is generally used to update, edit and/or remove
records.
And. Theres also a new search feature. Just like the Grid, the UX now has its
very own built-in Search Part.

Understanding the terminology


Before we start, we need to be sure you know about crud SQL CRUD, that
is and some other terminology.
CRUD

CRUD means Create, Read, Update, Delete.

It is generally referred to in the following manner:


CRUD operations, CRUD actions or generating SQL CRUD statements.
OFFLINE - DISCONNECTED

CLIENT SERVER

The terms offline and disconnected are used interchangeably. They refer
to when the end user is temporarily disconnected to the Internet because he/she
moves out of range or the connection is lost for some other reason.
This condition is especially prevalent in mobile applications.
The client is the browser and the server is the database.

*. If you were lucky enough to attend the 2014 Alpha Developers Conference in Boston, you met Offy, the offline elephant who
symbolized Alpha Anywhere solution to the problem faced by all mobile developers.

165

CHAPTER 4. OFFLINE OR ONLINE (UX)


How the Chapter is Organized

LIST DETAIL VIEW

In the Chapter 2, we showed how to add a Detail View to a UX List. * It connected to the data by means of Data Binding. The Detail View discussed here
differs in that it connects directly to the data. This means you can have multiple
lists with multiple data associations. This version is referred to as List with
associated Detail View, sometimes shortened to List Detail View because it is a
specific feature of the UX. It has been designed especially for use in disconnected apps, although it can be used in online applications, too.
Detail Views are used to edit data and enter new records.
All disconnected applications must have an associated Detail View
part.
Detail Views can also be used for standard online applications.

SEARCH PART

The UX Search Part also functions like the one for the Grid in that it finds
records that meet certain criteria. However, it also has another use for disconnected applications.
While online, the Search Part is used to download a sub-set of records
to Local Storage (see below) so they are available when disconnected.

SAVE SYNCHRONIZE

In the Detail View we discussed on page 87, a Submit button is used to commit the data to the server. In the List Detail View, Save and Synchronize buttons
are used instead.

. See Understanding the Client / Server model on page 8.


*. See Using List Rows to Edit the Database on page 87.
. See Data Connection: Comparing Data Binding & List Detail View Methods on page 207.

166

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Save: Saves the CRUD operation to Local Storage (see below).


Synchronize:
Sends the data from Local Storage to the server and commits it.
(Required).
Refreshes data in Local Storage. (Optional)
DIRTY RECORDS

When a record has been edited, but not yet synchronized back to the server
database, it is considered to be dirty. Inherited dirty occurs when a child
record has been saved, but not yet synchronized.
After an edit or new record is saved, markers are used to indicate:
Dirty records (default* is

bright orange triangle).


Record has been saved, but not yet
synchronized.
New records (default is blue tri-

angle).
Record that has been added and saved, but not synchronized.
Inherited dirty records (default is pale orange triangle).
Parent of a dirty child.

Markers are removed when the data is synchronized.


LOCAL STORAGE

When disconnected, Alpha Anywhere takes advantage of a feature called


Local Storage, a part of browser architecture that is available to all applications
that use HTML5. Theres nothing for you to do, its just in there Safari, Internet Explorer, Firefox, Chrome, etc.
In mobile apps Alpha Anywhere writes data directly to Local Storage.
Response is lightning fast because no server call back is required for
CRUD operations.
On the desktop, data is written to a file and is slightly slower, but still
faster than callbacks to the server.
Well see how Alpha Anywhere takes advantage of this feature shortly, but
for now, lets just take a quick look at the element itself.
With HTML local storage, web pages can store data locally within the user's
browser. Earlier, this was done with cookies. However, local storage is more
secure and faster.
The data is not included with every server request, but used ONLY
when asked for.
It is also possible to store large amounts of data, without affecting
website performance.

*. All markers can be modified with CSS. See Format Markers, Errors, warnings on page 214.
. See Understanding Hierarchical Data on page 197.

167

CHAPTER 4. OFFLINE OR ONLINE (UX)


How the Chapter is Organized

The data is stored in name/value pairs, and a web page can only access data
stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB)
and information is [not] transferred to the server [until directed to do so].*
There is an brief video that we recommend you take a moment to watch
(right now if you can). It explains the architecture of all applications that use
Local Storage. Click or Google the following or see the address in the footnote.
HTML5: Understanding local storage architecture | lynda.com tutorial
PUSH PULL

The terms push and pull are used to describe sending data from Local
Storage to the server and back.
Push to the server means sending the saved CRUD operations to the
server where they are committed. In most cases, this is a two-step
operation.
First, the end user clicks the Save button in order to save the edits to
Local Storage.
He/she then clicks a Synchronize button to push the edits to the server.
Pull from the server means refreshing the records with any changes

that may have been made while disconnected.


Performs AJAX callback to the server. Can be time-consuming and
place a heavy payload on the server, so it should be used with discretion.
DATA TYPES

The genies and other procedures described in this chapter are for SQL databases to which you can connect to directly. Alpha Anywhere automatically generates all of the SQL necessary to perform the CRUD and synchronization
operations. There is very little, if any, work that you have to do.
If you are using other data types, you will need to call stored procedures or
web services to perform CRUD operations against your data store. In these
cases, Alpha Anywhere allows you to write custom handlers to populate your
Lists and synchronize the data in the Lists.**

VIDEOS

There is a fine collection of videos that fully illustrate working with Detail
Views, Search Parts and Disconnected Applications. We have referenced them
at the end of our exercises, but if you want to watch them first, go to:
Videos > Filter: Enter Disconnected. Choose from the selection.
Well pick up the rest of the lingo as we go along. Right now, its time to see
how all this works. Not being ones to re-invent the wheel, we jumped all over
the Alpha Software description of this latest offering. From this point to
page 176, most of the material comes from there. Thanks, Alpha!

*. http://www.w3schools.com/html/html5_webstorage.asp 10.12.14.
. Lynda.com. HTML5: Understanding local storage architecture. YouTube Video: http://www.youtube.com/watch?v=ap8feAn0d6A
. The Save and Synchronize operations can be combined. See Change Save button action on page 186.
**.These procedures are described in the document referenced at Documentation on page 214. Open the document and search for
Custom Handlers for Synchronization Tasks.

168

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Understanding Disconnected (Offline) Applications


The Forrester Report and AlwaysOn outline the problem and the solution.
THE PROBLEM

Companies are adopting a business technology (BT) agenda with a focus on


driving great customer experience, yet these experiences are increasingly delivered on devices with transient network connections.
Developers strive to satisfy customers in their mobile moments, but cannot
make assumptions about the constancy, quality, or even existence of an individual's network connection. Therefore offline support will be a crucial consideration for nearly every future modern application.
Unfortunately, our experience shows that offline support is the mobile app
feature continually under-scoped by developers and over-simplified by stakeholders. This report dives into the nuances of offline, its varying flavors, and
why it's often the most expensive (and valuable) infrastructure service mobile
dev teams will implement.*

THE SOLUTION

Alpha Software, which was selected as one of AlwayOn's Global 100


Companies to Watch, has developed the industry's first mobile application
deployment environment with robust offline support built-in, solving the challenges addressed by the [above] Forrester report.
The new software, Alpha Anywhere 3.0, allows offline-capable transactional business apps to be built, without adding any cost or time.
The leading independent research firm recognizes Alpha Anywhere as a
low-code application platform, which supports a very robust solution for
HTML5 implementation.

PUTTING IT SIMPLY

Suppose your salespeople work in areas without an Internet connection. How


are they to place orders, update customer information, etc.? You certainly cant
expect them to revert to pencil and paper!

Of course not!
HOW IT WORKS

Heres a common scenario.


a. Before he/she leaves home or the office or other location with an Internet connection, a batch of records is downloaded.
The device phone, tablet, etc., uses Local Storage to retain the downloaded records in memory so they are available offline.
b. While

out on the road, the sales person will be able to:

.To see the full document, open the Overview page for any UX Component. Click on the link for disconnected apps at the bottom.
*. Facemire, Michael and Hammond, Jeffrey S. with Mines, Christopher and Wheeler, Eric; The Offline Mobile Challenge - Tackling
Mobile Apps' Most Important And Difficult Feature, Forrester Report, September 26, 2014
https://www.forrester.com/The+Offline+Mobile+Challenge/fulltext/-/E-RES117610
. Taser, Alex, Alpha Software launches robust offline mobile solution, AlwaysOn SQL Server Blog, October 1, 2014.
http://aonetwork.com/blogs/Alpha-Software-launches-robust-offline-mobile-solution

169

CHAPTER 4. OFFLINE OR ONLINE (UX)


Understanding Disconnected (Offline) Applications

Edit the stored records.


Enter new records.
Mark records as deleted.
c. To

do so, the user clicks a Save button for each CRUD operation he/
she wants to keep and rows are marked as dirty.
d. When the connection is re-established, the user simply clicks/taps
on a Synchronize button and all edits made to date are pushed to
the server and the server database is updated.
Edits can all be pushed at the same time or sent in batches.
e. At

the same time, records can also be pulled from the server,
refreshing the records with edits made by others after the user went
off-line.

CONFLICTS / ERRORS

Conflict errors (called write conflicts) occur when another user edits and
saves a field in a record that you have also edited, but not yet saved. Other errors
occur when the user tries to give the field a value that is rejected by a server-side
validation rule or by the database server.
If there are any conflicts or errors when the data is synchronized, they
are displayed.
The end user can then choose the correct version and/or fix the data.
He/she then re-clicks the Synchronize button.

WEB OR MOBILE

Its not just mobile app developers that are concerned with absent connectivity. Some areas of the world cant count on 24/7 Internet connections, even
when they are locked in one place. Thats where the UX comes in because, as
you know well by now, it is an welcome bonus for web, as well.

EDITS NEVER LOST

Because data is persisted to Local Storage on the device, edits are never lost.
If the application terminates for any reason (i. e. the mobile device
runs out of power), the edits are kept in Local Storage.
When the application is restarted, List data and all edits are automatically retrieved from Local Storage and displayed.
Form variables are also persisted to Local Storage.
Therefore, if a user is in the middle of filling in a long form and the
application terminates, the edits are saved.
When the application reloads, the form is restored to its edited state.

FLAT OR HIERARCHAL
DATA

The data can be flat or hierarchical.


Flat data is simply a list of rows (i.e. a list of customers).
An example of hierarchical data is:
Data from the Customer List and
Data for each order that the customer has placed and
The details for each order.
This is also referred to as a Parent / Child relationship.

170

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Understanding the design approach


Alpha Anywhere takes a different approach to disconnected applications
than others, as can be seen in the diagrams below.
THE OTHERS

The approach often taken by other applications is to create a replica of a subset of the master database in an on-device database.
The on-device database is typically
implemented as a native application that
runs on the device.
The application on the mobile device
performs its CRUD operations against
the local replica database not against
the master database on the server.
The local replica database synchronizes
with the server database independently of
the application.
ERROR HANDLING

When a replication error occurs, the ondevice replica database knows about the
error, but the application itself does not.
Therefore, special code needs to be
added to the application to query the
replica database to find out if there were
errors and then resolve them.
Because HTML5 applications are unable to talk to native or hybrid applications., something like PhoneGap is required for communication with the ondevice replica database.
ALPHA ANYWHERE

The Alpha Anywhere approach allows you to create pure HTML5 applications that can operate in disconnected mode.

171

CHAPTER 4. OFFLINE OR ONLINE (UX)


Understanding Disconnected (Offline) Applications

Because
The data is persisted to Local Storage, a standard HTML5 feature.

How does that happen?


The application caches edits in
Local Storage. When data is synchronized with the server, the communication
is
between
the
application and the server database.
Actually the communication is
between the application and the
Application Server, which in turn
communicates with the server database.

This is exactly how a connected


application operates.

Therefore. Alpha Anywhere disconnected applications and connected applications work in essentially the same manner!
Bottom

line: Few or no changes have to be made to an


application in order for it to work when it is disconnected!
Now that, we can comprehend!

Understanding development
The List control and its associated Detail View are the fundamental building
blocks of disconnected apps. Data binding is automatic for SQL databases.
A GENIE, OF COURSE!

A special genie makes setting up a List control with a Detail View and
Search Part very easy. In fact, there are actually three genies.
The first creates a new List and its associated Detail View and Search
Part in a single step (page 176).
The second lets you quickly set up a Detail View for an existing List
control (page 208).
The third adds a Search Part to an existing component (page 210).

DIRTY DATA

Data is considered to be dirty when an edit has been made, but not yet pushed
back to the server.
In the case of disconnected applications, data that has been saved, but
not yet synchronized is considered to be dirty.

172

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Alpha Anywhere marks dirty rows and fields follows:*


Edited record: When the user
edits a value in the Detail View
and then clicks the Save button,
the corresponding row in the
List is updated and marked as
dirty (orange triangles at left).
Edited field: You can also
define a marker that shows
which field has been edited as
in the following screen shot.
New Record: When a new
record is added and the Save button is clicked, a blue triangle marks the
record row (above screen shot).

The user can continue making as many edits as desired before synchronizing with the server. When the Synchronize button on the UX is clicked, all
of the saved edits up to that point are submitted to the server. If there are no
errors, the orange and blue indicator icons and field markers are removed.
Row markers are added automatically by Alpha Anywhere. Field markers
use a custom CSS Class (see page 193).
CSS for all markers can be customized (see Format Markers, Errors,
warnings on page 214).
ERRORS

If an error occurs while the List is being synchronized, a red triangle will be
added to the orange one.

For example, in the image above, the value of the Lastname field was set to a
very long value (too long to fit into the corresponding field in the server database). Therefore, when the data was synchronized, the server reported an error.
The full text of the error is shown by selecting the row and clicking on
More (above right).
See also Understanding write conflicts on page 175.

Understanding synchronization
Synchronizing is the act of updating the database with edits made while disconnected. This is done with the Synchronize button.
*. The Customization section in the Detail View pane in the List Builder provides complete control over the CSS used to display dirty
rows. So, if you dont like the orange triangle in the top right corner of the row, you can easily change it.

173

CHAPTER 4. OFFLINE OR ONLINE (UX)


Understanding Disconnected (Offline) Applications

SYNCHRONIZE BUTTON

The genie automatically adds a Synchronize button to the Detail View. When
the user clicks the button, all previously uncommitted changes are pushed back
to the server in this manner:
A JSON object is sent to the server. This object has only the edited
rows from each List. For each row in the JSON package sent to the
server, the original and updated value for each field is available.
If the List is based on SQL data, Alpha Anywhere will generate the
SQL CRUD statements automatically.
If the List is based on a custom data source (such as a web service),
then you will be responsible for writing your own server-side synchronization handler.*

SYNCHRONIZATION
POLICY

The Synchronization Policy determines when the data in Local Storage will
be used to update the database and if Local Storage is to be refreshed with any
changes that were made while offline.
Terminology:
Client-to-server synchronization: Data from Local Storage is committed
to the database. Has two options:
a. Save and Synchronize operations are combined into one step. Initiates Ajax callback each time an edit takes place. Usually used in
applications that are connected, but has fall back for when disconnected:
If connected, edits are committed.
If not connected, record is marked as dirty and waits for Synchronize to
be executed.
b. Save and Synchronize are always two separate steps. No Ajax call-

back until Synchronize is executed. Usually used for disconnected


apps.
Server-to-client synchronization: Data from the database refreshes
records in Local Storage. This can place a heavy load on the server, so it
should be used with prudence.
OPTIONAL BUTTONS

There are two optional synchronization buttons that can help ease the load of
the Server-to-Client refresh.
See Refresh List Data - Incremental and Refresh List Data on page 213.

*. See Data types on page 168.


. Synchronization policy is defined at: List Control Properties (see Detail View Tab on page 183).

174

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Understanding write conflicts


A write conflict occurs when some other user updates a record before the
second user has a chance to synchronize the edits that he/she has made.

Keep in mind that:


The original value in the field is stored in the List when the field is
edited, and is submitted to the server when data is synchronized.
The server then compares that value to its current value.
If they match, all is well and the new value is accepted.
If not, a write conflict is said to occur.

Heres a typical example of a write conflict.


User A edited the second record above, changing the first word in the
CompanyName field from Antonio to Anthony.
But, before he got a chance to synchronize his edit, User B changed the
word to Tony and synchronized it, making the new server value Tony
Moreno Taqueria.
When User A eventually tried to synchronize his edits, he received a

write conflict because the current value in the server record (Tony
Morneo Taqueria) no longer matches his original value (Antonio
Moreno Taqueria).
RESOLUTION

Alpha Anywhere offers the user a way to resolve the conflict.*

*. The developer can resolve them programmatically by writing an onWriteConflict server-side event handler.

175

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a List with Detail View and Search Part

When the user taps on the write conflict message, a pop-down menu appears
with these options.
Single field conflict: Use mine or Use theirs.
Multiple field conflicts may be resolved individually or all at once.
Use mine, Use theirs, Use mine for all fields or Use theirs for all fields.
USE THEIRS

USE MINE

When the user selects the Use theirs option, the field is set to the value currently stored in the database.
When the user selects the Use mine option, the Synchronize button must be
re-clicked in order to re-submit the edits to the server.
Write conflict checking can be turned off.* But just remember that if you do
so, the last person to update the field always wins!
Thats enough theory for the time being. Well hit a few more must knows
at the end of the chapter, but in the meantime, lets see how this all works.

Creating a List with Detail View and Search Part


COMPLETED COMPONENT

The completed component is Detail View (List Control Web Project).


In a UX Component, the Detail View is associated with the List Control. The
List control can also a have a Search Part, so well add that, too.

DETAIL VIEW

As we have seen, the Detail View is a requirement for disconnected applications. However, it is also useful for standard List Controls in the UX. Although
it is similar in appearance and use to a Grid Detail View, there are some differences.
Grids cannot be used for disconnected applications.

*. See Write Conflict checking on page 213.


. The credit goes to the folks at Alpha Software for the previous ten or so pages.

176

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

In the UX, the data must be saved and then synchronized in order to be

pushed to the server.*


This example will be for a standard (connected) UX, but, as we will
see later, it can easily be converted to a disconnected application.
SEARCH PART

In the previous chapter, we learned several ways to design searches. This lesson will explore the new built-in Search Part. It, too, is similar to the one in the
Grid (inset above)

FIELDS LIST

The Detail View and Search Part can have the same fields as the current row
or different ones. Our example will have the following:
Customerid, CompanyName, ContactName, City and Region.
Same as the above.
The above fields plus the following: Address, PostalCode, Country, Phone
and Fax.

LIST CONTROL
SEARCH PART
DETAIL VIEW

1. WPC > List Control Web Project: Create a new, blank UX component.
2. Save it as MyDetailView.

Using the genie to do it all in one step


As noted earlier, there is a genie that will create the List control, the Detail
View and the Search part all at the same time.We will make some adjustments
later but only a few will be necessary.
3. Data Controls: Click List.
a. Create

a single new control > Name list1.

b. Click

the List Control - Quick Setup Genie button (bottom of window). (Only available on the single control page red above.)

Dialog Title: List Builder > List Control - Quick Setup Genie

LIST PROPERTIES

LIST DATA SOURCE TYPE


LIST DATA SOURCE
DEFINITION

4. Fill in as follows:
Height: 3in
Width: 8in
Data source type: Choose SQL (default).
Connection string: Choose Northwind.
Method for defining SQL query: Choose FieldsFromTable.
You could use the SQL statement builder to create your own, if you like.
Table Name: Choose Customers.
Field list: Choose all except Fax.
All fields to be used in List and/or Detail View must be selected here.
If you forget some, you can add them later (page 185).

*. These steps can be consolidated. See Change Save button action on page 186.
. Very little will need to be changed to make it disconnected. Look for the notes in red as you do the exercise and then see Creating a
Disconnected Application on page 189.

177

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a List with Detail View and Search Part

Has Detail view: Yes.

DETAIL VIEW

Fields in Detail view: <AllFieldsInListQuery> (default)


Detail View is editable: Yes.
Detail View control type: TextBox (default).
Detail View buttons: <DefaultList> (default)
Fields in List display: Click the button.
Choose: CustomerID, CompanyName, ContactName, City, Region.
Enclose Detail View in: Choose Container.
Other options: Frame, None.
Add placeholder for global errors: Yes.
Persist Data to Local Storage: No.

DISCONNECTED
APPLICATIONS #1

DEBUG INFO

SEARCH PART

We are not building a disconnected application at this time so we will


not save the data to Local Storage.*

Debugging is explained in the video, so we wont use it here. Of course, you


can turn it on if you like.
Add placeholder for debug information: No.
Has Search Part: Yes.
Search Part type: IndividualControls (default).
Search Part fields: Click the button.
Choose: CustomerID, CompanyName, ContactName, City, Region

DISCONNECTED
APPLICATIONS #2

Delay populate List till active search: No.


Since we are connected, we will elect to show all records.
Recommended this setting be Yes for disconnected apps so that the
list starts empty and populates when the user executes the search.
Enclose Search Part in: Container (default).
Other options: Frame, None.
Add placeholder for search debug information: No.

5. Click OK.

*. See Local Storage on page 167.


. See List population on page 190.

178

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

The controls for both the Search Part (yellow), the List and the Detail View
(aqua) are added to the UX. How sweet is that!

And. The connection has been made to the database. In other words, there is no
need to bind the data.*
6. Go to the Browser.
The Search Part is on top, the List comes next and the Detail View is at
the bottom (scroll down, if necessary).
There are no records because we indicated we wanted to delay the list
until the Search was entered (see Search part on page 178).
7. Maximize the Browser window.
DETAIL VIEW POSITION

The position of the Detail View depends on the screen width available. Since
our List setting is 8in, the Browser window needs to be quite wide in order to fit
all the buttons in the Detail View.
If your display is wide enough, the Detail View will move to the right
side. If not, it will stay below the List.
Remember that it has no Panel Cards, thus it is not ready for a mobile
app at this time. We will show you some menus in Chapter 6 that
will consolidate the display.
8. Search > City: Enter London.
Six records are returned.
9. Click on each in turn and watch the Detail View change.

*. See Data Connection: Comparing Data Binding & List Detail View Methods on page 207.
. A revised genie that adds panels is on the Alpha drawing board and may be available by the time you read this.

179

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a List with Detail View and Search Part

Performing CRUD operations


An updateable Detail View generates a SQL statement that creates, reads,
updates and/or deletes records abbreviated as CRUD. If you are used accomplishing these operations in the Grid Detail View, there is one major difference.
Instead of having a Submit button that commits record(s) to the database, you first click Save and then Synchronize.
Lets give it a try.
10. Choose the first London record (Around the Horn).
11. Address:
Change
Hanover Sq. to Hanover
Square.
The Save button
becomes active.
12. Click Save.
The record is marked as
dirty and the Synchronize button is enabled.
You can also mark the
field as dirty. Well do
that shortly.*
13. Add a new record to see it marked with a blue triangle.
14. Click Synchronize.
The record is pushed back (committed) to the database.
15. Return to the component in Design mode.

Locating the properties


There are some important concepts to understand when it comes to further
defining the UX Detail View and Search Part properties. Because they were created with a genie and are connected to the List, we found it easy to get confused
about what is where. We strongly suggest you review this section carefully
because it can save you a ton of development time.
UX BUILDER

*. See Mark dirty field on page 193.

180

The UX Builder now contains the following:


Search Part controls (text boxes and buttons) in a Container.
List Control.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Detail View controls (text boxes, buttons and a placeholder) in a Con-

tainer.

The individual controls are managed here in the usual way. In other words, if
you want to change the properties of [SEARCH_ContactName] make it wider,
change its color, etc., do it here.
LIST BUILDER

The List builder now has two more tabs, Search Part and Detail View. We
will look at them, as well as the others that have been modified by the genie.

16. Select the List and go to List Properties.

DATA SOURCE TAB.

If you did the previous chapter, you are totally familiar with this builder, but
there are some principles we believe are worth repeating here. There are also
some additions.* We will take the tabs in turn because each has important settings that you need to know about.
Identifies the Data Source Type and Connection String.
SQL Statement:

*. Certain properties have been marked for Advanced users. Please refer to the property notes for more information.

181

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a List with Detail View and Search Part

All fields needed for the List, Search Part and Detail View must be
FIELDS TAB

selected here. They can be added and removed in the usual manner.*
The following properties are available for each field.
Server- and Client-side Properties (display, show-hide, etc.)
Detail View Properties:
Default value Javascript (Advanced users).
Updateable: Yes or No.
Check for write conflicts: Yes or No.
Blank is NULL (Advanced users): Default = No.
Security groups.
Server-side permission expression (Advanced users).
Search Properties: Defines the type of search.
a. Select

a field and click the Search Properties button.

While not all the fields are in the Search Part, the default is the
same for all.
Search option. Briefly stated, the applicable options
are:
1 = Exact match.
2 = Is contained in.
3 = Starts with.
4 = Wildcard,
Allow QBF (Query by Form) syntax: Yes or No.
Genie default = No.
Advanced Search Options for Server-side searches are also available.
b. Click
LIST PROPERTIES TAB

Cancel.

The Genie has filled in the following:


List Properties:
Has Detail View: Yes.
Has Search Part: Yes.
Persist to Local Storage: No.
No: Connected apps.
Yes: Disconnected apps.
Height: 3in
Width: 8in

Now we can finally get to the new Detail View and Search Part tabs.
*. See Add Field / Control on page 185.
. For search type details, select Search Properties > Search option (highlighted in screen shot) and read the notes.
. Documentation Viewer page title: Search Part Query by Form Search Syntax V10.

182

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

DETAIL VIEW TAB

This is where the properties of the Detail View itself are set. The genie has
filled in this section, so well just look at it for now. We will return to it when we
show how modify its properties.
Detail View Properties:
Detail view type: FieldMap or Container.
The genie has mapped the
fields, so the option is set to
FieldMap. We will discuss
Container later.
Detail view field map:
Click the button.
The genie has mapped the
fields.
Ajax callback to refresh
row on select: No.
Synchronization policy:
Click the button.

These settings are


very important. We will
return to them shortly, so for
now well just look* them
over. Please read over the
notes for a full explanation
of the options.
Synchronization policy (cont.)
Perform client-to-server synchronization whenever user saves edits to

a row in a List: Yes or No. (Genie default = No)


Yes: Combines actions of Save & Synchronize buttons. When the user
clicks the Save button, data is submitted to the server. Good when connected.
No: When Save button is clicked, row is marked as dirty. Synchronize
button required to submit data to server. Good for disconnected.
Perform a server-to-client synchronization whenever a client-to-

server synchronization is performed. Yes or No. (Default = No)


Advanced. Please read Alpha Anywhere notes carefully before selecting
this option. Can place heavy load on the server.
Auto-commit detail view on row select: Yes or No. (Default = Yes)
Yes: When makes a change to the data in the Detail View and then clicks on a
different row in the List, the Detail View edits are automatically saved. Good
for disconnected apps, but could cause trouble for connected ones.
*. See Understanding synchronization on page 173 and Modifying Detail View properties on page 185.

183

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a List with Detail View and Search Part

No: The user will not be able to select a different row in the List until the
changes are saved or discarded.
Synchronization batch size: Default = 0.
If a large number of records have been edited while offline, the data can be
synchronized in batches.
Set batch size to 0 to send all dirty rows at once.
We will look at this in detail on page 192.
Dirty control class name: Choose a CSS class name to mark dirty fields.
See Mark dirty field on page 193.

17. Please review the other settings for this tab.

SEARCH PART TAB

18. Notice the button at the bottom Detail View - Quick Setup Genie. We
will return to that later.
As expected, this section defines the search part settings. Heres a quick
review of the settings.
Search Part style:
IndividualControls.
We accepted the genie default, Individual Controls, therefore a control for each
field in the Search Part was placed in the
UX Builder.
It is best to make this selection at the
genie level. While you can change it
here, it will take some adjustment of the existing controls.
Other options:
SingleKeywordControl. Uses a single textbox for query. Searches in all fields
specified.
QueryByForm: Detail View does double duty by also performing searches.
Search part field map: Click the button.
The genie has mapped the fields.
Delay populate List till active search: Yes or No.
Yes: List is empty upon initialization until search is completed.
No: List is populated upon initialization.
Set search maximum result size properties: Yes or No. (Default = No)
Important for disconnected apps where you want to be sure not to return too
much data to the client (too many records to the user).
No: No limit.
Yes: Opens definition property. Click the button for full explanation of why
this is recommended for mobile apps.
Debugging info: Yes or No. Displays debugging info for testing.

LIST LAYOUT TAB

This section defines list layout style in the usual manner.


19. Click Cancel to leave the List Builder without changes.

. See Auto Commit on page 192.

184

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Modifying Detail View properties


I dont know about you, but, much as I love genies, theres always something
I need to add, delete or change after I have defined the genie actions. Now that
you have carefully gone over the above settings, you should pretty much know
where everything is, but here are a couple more hints.
20. Continue at the UX Builder.
DETAIL VIEW CONTROLS

CONTAINER BEGIN
PROPERTIES

ADD FIELD / CONTROL

DATA SOURCE TAB

It is easy to identify the container with the Search fields because the controls
all say SEARCH. The Detail View controls arent identified, however, so you
may want to give the container a description. It wont appear in the controls list,
but you can always look at the Properties if you have a lot of controls and think
you might loose track.
Alternatively, you could rename the Container ID.
PROPERTIES: [CONTAINER: CONTAINER_1_2]
Description: Enter Detail View for List1.

Suppose you want to add a new control to the Detail View.


Theres another genie that makes this very easy. Well
demonstrate by adding the Fax field. It will appear below
the Phone field in the Detail View.
This is best done inside the List Builder because the field
must be added to the SQL Select Statement and thats where you will
find the genie.
21. List1: Go to List properties.
22. SQL Data Source > SQL Select Statement. Click the button.
a. Columns
b. Click

DETAIL VIEW TAB

tab > Available columns: Put Fax in Selected Columns.

OK.

23. Click Detail View - Quick Setup Genie (button at bottom right of
builder).

185

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a List with Detail View and Search Part

Dialog Title: List Detail View - Quick Setup Genie


a. Create

controls on the UX to display the List Detail View: Yes.

b. Choose

Create UX controls for selected un-mapped columns in

List.
In this case either choice would work, but this will let us see what
is happening.
Columns in List = fields in SQL statement.
Un-mapped = columns that are in the List, but have not yet
been mapped to a control.
c. Click

Select.

Dialog Title: Select List Columns

The newly added Fax column (field) appears.


d. Fax:

Yes. (Click OK twice)

Dialog Title: Select Position for New Controls

Now we will tell the builder to place the Fax control after Phone.
e. Select
f.

the Phone control.

Choose: After. (Click OK)

Dialog Title: Create new UX Controls

We will identify the label position here to match the existing controls.
g. Label

position: Choose Left.

h. Label

justification: Choose Left. (Click OK twice).

24. At the UX builder, notice a new control has been created for Fax and it
is located under the Phone control.
CHANGE SAVE BUTTON
ACTION

186

As we noted earlier, data is committed to the database only after both the
Save and Synchronize buttons have both been clicked/tapped. While this is great
for applications that may not always be connect to the Internet, it may be seen as
double work for times when a connection is constant.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

You can combine the actions of both buttons into one and still have a fallback to a possible disconnected situation.

However. Keep in mind that, when the button actions are combined, each
click of the Save button initiates a call back to the server. Just fine if you are
online, but no so neat for offline.

DETAIL VIEW PROPERTIES

25. Go to the List builder > Detail View tab.


Synchronization policy: Click the button.
a. Read

the Terminology explanation.

We want to push the data back to the server and store it in the
remote database, therefore we are concerned with Client-toserver synchronization.
b. Perform

a client-to-server synchronization whenever user saves edits


to a row in a List: Yes.
When the Save button is clicked, the edits are pushed back to the
server (committed). As long as there is an Internet connection,
the Synchronize button is not needed.

If no connection is available, the row will be marked as


dirty and the user will need to synchronize at a later time.

Auto-commit detail view on row select: No.


This forces the user to click the Save button so that edits are not committed accidentally.
c. Click

OK.

26. Click OK to close the List Builder.


One more change and then well take a look at everything.
MODIFY CONTROL WIDTH

By default, the Detail View controls are a bit narrower than we would like.
Since they are listed in the UX builder, this modification is the same as for any
other UX control. Well first set the value for one and then paste it to the others.
27. Continue at the UX Builder.

187

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a List with Detail View and Search Part

PROPERTIES: [COMPANYNAME]
FIELD PROPERTIES

Width: Enter 4in


a. Click the Paste current property button on the toolbar.
b. Select

all the fields in the Search and


Detail View parts.

c. Click

Set Properties.

28. Save the component.

Searching and editing records when online


Since we have modified the Save button, the records will be submitted to the
server with a single click as long as we are connected to the Internet.
29. Go to Working Preview.
The Fax field has been added to the Detail View and the textboxes
have been widened for the Search and Detail View sections.
30. Search > City: Enter paris,madrid to find those records.
31. Click Search.
32. For the first record (Martin Sommer), change the Contact Title from
Owner to President.
33. Click Save.
If you have an Internet connection, the data is immediately pushed
back to the server and the Synchronize button remains inactive.*
34. Experiment with other searches and edits.
As you can see, the Detail View and Search Parts work well in a standard
web environment.
Next, we will see what it takes to make this UX component function in a
disconnected environment.
35. Return to Design mode and keep the component open if you are continuing to the next section.
GO TO ALPHA VIDEO
UXL_V12-54, 56

Videos > Filter: Enter Detail View or Search Part. Choose:


UX component - List Control.
UXL_V12-54. Introduction to the List Control Detail View.
UXL_V12-56. List Control Search Part.

*. If you are not online, the record is marked as dirty but, in order to be synchronized, the Persist to Local Storage option must be
checked. See Persist and Restore on page 189.

188

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Creating a Disconnected Application


COMPLETED COMPONENT

The completed component for this section is DisconnectedApp (List Control


Web Project).
This exercise continues from the previous one. The MyDetailView UX component should be open in Design mode.

IMPORTANT NOTE

Most of the settings in this section can be completed at the genie. We are
doing them separately so you will understand them better and learn where they
are located.
If you have been paying attention to the notes that we highlighted in red in
the previous exercise, youll have an idea of what needs to be added or changed.
Some of these options may also desirable for standard web applications.
To begin, we will save the component under a different name.
1. Save the MyDetailView component as MyDisconnectedApp.

Defining Local Storage settings


As we stated earlier, saving to Local Storage* is the primary method for storing the sub-set of records to be used while in a disconnected state.
Local Storage acts as an in memory database.
For a moment, assume your data source contains millions of records of customers all over the world. On a given day, a salesperson might be calling on customers in Michigan, USA or London, England. He/she will have no need for
information on customers in Ireland or Belgium or Massachusetts that day.
While Local Storage is fairly large (about 5 mg), it would be information
overload in terms of time and storage space to try to download everything.
The Search Part is used to define the criteria for the download.
When the Persist to Local Storage option is selected (see below), the
data is automatically placed in Local Storage. The next search overwrites the existing data.
In other words, if the first search is for Paris, the customers in Paris are
written to Local Storage.
If the end user then executes a search for London, the Paris data is
overwritten with the values for the London records.
Well show you how that works later, but for now all you need to know is
that it happens automatically, with no effort on your part!
PERSIST AND RESTORE

Local Storage has two important types of settings, persisting and restoring.
Persist means to save to Local Storage.

*. See Local Storage on page 167.


. In development: You will soon be able to gain more download space by wrapping your application in PhoneGap (see page 214), but,
even so, an efficient design will restrict the download to a selected group is records.
. See Viewing Local Storage contents on page 201.

189

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a Disconnected Application

Found at List Builder (see LIST PROPERTIES below).


Define for each individual List.
Restore means to send the data from Local Storage back to the com-

ponent.*
Found at UX Builder (see LOCAL STORAGE below).
Define once for all Lists in component.
Data will not have to be re-entered if the browser shuts down unexpectedly.

The Local Storage options can be defined in two places, the List Control Quick Setup Genie or at List Properties.
List Control Setup Genie: See Disconnected Applications #1 on
page 178.
Checking this option in the genie automatically completes the settings
below.
List & UX Properties: Define as below.
LIST PROPERTIES

2. List1: Go to List Properties > List Properties tab.


Persist data to Local Storage: Yes.
There are also three settings in UX properties that need to be checked.
3. Click OK to close the List Builder.

LOCAL STORAGE

4. Go to UX Properties.
Persist variable values: Yes.
Restore variables from Local Storage: Yes.
Restore data in List controls from Local Storage: Yes.
Now that we have a place to store the data and a way to get it back, we can
prepare it for download to the device.

Defining the Search Part settings


While in a connected state, the user downloads the records specific to the
days tasks by defining a Search. There are two important considerations,
List Population.
Maximum download size.
LIST POPULATION

Since only a subset of records is to be download, the Search Part should be


designed so that it opens with no records showing. The user then enters the
search criteria, thus populating the list and initiating the download to Local
Storage.
Delaying the population of records can be defined in two places, the List
Control - Quick Setup Genie or at List Properties.

*. This has nothing to do with refreshing data from the server. That is covered in List Builder > Detail View tab > Synchronization Policy.

190

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

List Control Setup Genie: See Disconnected Applications #2 on

page 178.
List Properties: Define as below.
MAXIMUM DOWNLOAD SIZE

It is important to guard against a situation where the user performs a search


returns too large a subset of the master database. This would result in an excessively long time to download the search result to the mobile device or would
download more data than can fit into memory or storage in the browser. There
are two ways to define this:
Number of rows.
Payload size.
Payload size is typically the more important setting because a large number
of rows that have a very short record length would not result in a large payload
and might not be excessive in terms of download time or memory storage.
Payload size is defined by the number of bytes.
If you remember, Local Storage holds about 5 mg. Well look at this more
closely a bit later, but, heres a quick calculation that shows 5 mg is a lot of data,
especially when you take into consideration that the entire Northwinds database
is only 33, 124 bytes!
4,000,000 bytes = 3.8147 mg.

IMPORTANT NOTE

Even if the user performs a search that satisfies the rules specified here, there
is still a chance that the data will fail to load successfully because there may not
be enough free space in Local Storage. If this happens, the developer has two
options:
Require the user to enter a more restrictive search or try to free space
in Local Storage.*
If the user does define search criteria that returns a result that violates the
maximum search size properties, the following event fires:
onSearchResultTooLarge
This event can be used to display some user interface, such as an Alert,
to instruct on entering a more restrictive search.
Now we will define the Search Part properties.

SEARCH PROPERTIES

5. List1: Go to List Properties > Search Part tab.


Delay populate List till active search: Yes.
Set search maximum result size properties: Yes.
Maximum search size properties: Click the button.
a. Maximum

number of records in search result: 100 rows.

Our database sample is small, so it doesnt matter here. As noted


above, however, the payload size is typically a better option.

*. See Viewing Local Storage contents on page 201.

191

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a Disconnected Application

Defining the Detail View settings


Always remember that all disconnected applications MUST have a Detail
View.

Because. Thats how the CRUD operations are handled. (We knew you knew
that!)
We have several things to do here:
Define a custom CSS Class and use it to identify dirty fields.
Return the Save button to its original settings.*
Automatically save the record when a new row is selected.
Define the batches of data that will be returned to the server.
CUSTOM CSS CLASS

We will create a custom CSS Class to identify fields that have been edited
and saved, but not yet synchronized. This exercise will also serve as an introduction to using the built-in CSS Editor that can be used throughout Alpha Anywhere to define your own font and field formats.

BATCH SYNCHRONIZATION

If the end user will be performing CRUD operations on a large number or


records while in a disconnected state, you may want to limit the number of
records that are submitted at one time so he/she can view the synchronization
progress.

ABORT SYNCHRONIZATION

In addition to showing a progress bar, we will add a Cancel button that will
abort the synchronization.
Clicking the Cancel button will allow the end user to stop sending
additional batches of data to the server.
Clicking Cancel will not, however, prevent a batch that has already
been sent from being processed on the server.

AUTO COMMIT

There are two ways to save a record:


Click the Save button.
Select the next row.
The second option is a time saver, but could get the end user in trouble if he/
she is distracted or moves too quickly.
In this situation, committing to the server will actually be a two-step process
(Save > Synchronize), the record will be marked as dirty when the end user
clicks on another row, making the edits visible.

CAUTION!

But. If the Save button action has been changed to combine Save and Synchronize into a single step when a connection is available, clicking on another row

*. We previously modified the button so that it would Save and Synchronize in one step while connected. See Change Save button
action on page 186.
. See Change Save button action on page 186.

192

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

will actually commit the edit to the server and it happens fast so be careful
when using this action.*

Creating a custom CSS Class


This exercise will also open the doors to further customization of the appearance of fonts, buttons and other elements of your design.
We have seen how dirty rows are
marked (red circle). You can also
mark a dirty field one that has
been saved, but not yet synchronized (gold arrow). This will help
if the end user gets distracted
while modifying data. By clicking
on a dirty row, the dirty fields will
be identified in the Detail View.
This is done by creating a custom CSS Class. Alpha Anywhere has a builder
that makes this easy.

But. There are a couple things you need to know if you are new to CSS.
CSS selectors allow you to select and manipulate HTML element(s).

SELECTORS

CSS selectors are used to find (or select) HTML elements based on their
id, classes, types, attributes, values of attributes and much more.
Classes are called selectors.
Class names ALWAYS begin with a leading period (.) This requirement is
not specific to Alpha Anywhere, it is specific to CSS as in:

CLASS NAMES

.dirtyField
Marking a dirty field with a custom CSS Class is a two-step process:

MARK DIRTY FIELD

a. Create

the custom CSS Class.

b. Identify

the class name for the dirty field control.

Custom CSS classes can be created in two different places. Well do it at UX


Properties and then show you the second location.
CSS

6. Go to UX Builder > Properties.


Local CSS definitions: Click the button.
This class will be local to the component.

*. You can test this out with the MyDetailView component designed in the previous section.
. http://www.w3schools.com/css/css_selectors.asp

193

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a Disconnected Application

Dialog Title: CSS Editor


a. Click

the + button at the top of the dialog (red circle).

Dialog Title: Add Selector


b. Click

Insert > Special Characters > . Class.

We stated above that all class names require a leading period.


there are other conventions, too. This menu will help you identify which you need.
c. Complete
d. Click

the name as follows: .dirtyField

OK.

Now we will define the attributes a pale yellow background with a dark red dotted border.
Dialog Title: CSS Editor
e. Select
COLOR / BACKGROUND

.dirtyField and define properties as follows:

Background: Click the button.


Dialog Title: Background Genie
f.

Type: Choose Custom.

g. Color:

Go to the Color Picker and choose Pale Yellow. (Click OK)

Background (cont.): Drill down to see the attributes.


Color: The CSS color number (#fffc0) has been entered.
BORDER

Border style: Choose dotted.


Border Width: Click the button and enter 3 px.
Border Color: Click the button and choose Dark Red.
The CSS color is entered (#80000).
The preview at the top should reflect your choices (screen shot above).
h. Click

194

OK to close the CSS Editor.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Next, we will identify the class name for the dirty field
control.
7. Go to UX Builder > Controls.
8. List1: Go to the List Builder > Detail View tab.
DETAIL VIEW PROPERTIES

Dirty control class name: Click the button.


a. Available
b. Click

CSS Class Names: Select dirtyField.

Edit local CSS at bottom (green check).

This is the second place where CSS Classes for


dirty fields can be defined and/or edited.
c. Cancel

out of the CSS Editor without changes.

d. Click the + button (circled at left) to enter the class

into Selected. (Click OK)


e. Check
*

to be sure the entry appears in the property

box.

Completing the Detail View options


We will now complete the synchronization and auto-commit settings.
DETAIL VIEW PROPERTIES

9. List1: Continue at List Properties > Detail View tab.


Synchronization policy: Click the button.
a. Perform

a client-to-server synchronization whenever user saves edits


to a row in the list: No.
This will mark the edited rows as dirty.
Click Synchronize button to push edits to server.

Auto-commit detail view on row select: Yes.


This option is better for disconnected apps than connected ones because
a record could get committed accidentally.
Synchronization batch size: Enter 10.
This will send a maximum of 10 rows at a time to the server.
You may choose fewer if you intend to test on your remote device.

10. When finished, click OK to close the List Builder.


11. Save the component.

Using the database records when offline


As we noted earlier, the Search Part is used for defining the records to be
downloaded to the device, such as a tablet or phone or even a desktop in certain
areas.
*. This is more important than you might think. We experienced times when we thought the entry had been made, but it had not.
. See Auto Commit on page 192.

195

CHAPTER 4. OFFLINE OR ONLINE (UX)


Creating a Disconnected Application

THE PROCESS

Records are downloaded when the connection is available.


Edits are made while offline. If the browser terminates for any reason, edits

will be retained.
CRUD operations are synchronized when the user is back online.
First, we will download,
edit and save some
records. Then we will
close Working Preview to
simulate the browser
shutting down and then
re-open it to restore the
work in progress. The
edits will then be synchronized.
DOWNLOAD RECORDS

12. Go to Working Preview.


13. Search part > City: Enter Paris,London.
EDIT RECORDS

14. Edit a record by changing the CompanyName or ContactName.


15. Select the next record.

DIRTY MARKERS

The first record is saved and a dirty marker appears in the row

(orange triangle shown in box above).


The field in the Detail View is also marked as dirty by means of a

mustard color background in the field.


16. Edit the next record and click the Save button.
The current record and field(s) are marked as dirty.
17. Experiment with editing and saving records.
TERMINATE BROWSER

Now we will simulate what would happen if the browser is terminated,


whether accidentally or intentionally. This illustrates the Local Storage Restore
options defined above (see Persist and Restore on page 189).
18. Return to Design mode.
19. Re-open Working Preview.
The active search and marked records are restored.

SYNCHRONIZE RECORDS

196

In order to synchronize, an Internet connection is required. As soon as one is


available, the end user clicks the Synchronize button. The records are then
saved back to the server database.
If there are any write conflicts or validation errors, they are reported (see
page 175) and the user is given the opportunity to correct them.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

20. Click the Synchronize button.


All edits are persisted (saved) back to the server database.
All row / field dirty markers are removed.
21. Return to Design mode.
22. Leave the component open if you are continuing to the next section.
GO TO ALPHA VIDEO
DISCONNECTED SERIES

There is an excellent series of videos that describes Detail Views, Search


Parts and the development and use of Disconnected applications.
Videos > Filter: Enter Disconnected. Choose:
UX Component - Disconnected Applications.
DIS_V12-1. Introduction.
DIS_V12-2. Editing Data While Offline and then Synchronizing
the Data.
DIS_V12-14. Delaying Populate List Till Active Search.
DIS_V12-15. Setting Maximum Number of Records that a Search
can Return.
DIS_V12-16. Persisting Data to Local Storage.

Understanding Hierarchical Data


COMPLETED COMPONENT

The completed component for this section is DisconnectedParentChild (List


Control Web Project.
This section continues from the previous one. MyDisconnectedApp should
be open in Design mode.
Hierarchical is another new term for some of us but not a new concept. It
just means data with a parent-child relationship. For example, Customers have
orders and orders have order details. They break down to:
Customers (parent)
Orders (Child #1)
Order details (Child #2)
Disconnected apps work as well with hierarchical data as with flat data
coming from a single table.

VIDEO! SEE P. 201

You may want to watch the videos first for this section. The concepts are
very easy to grasp once you see them in action. Return here for the settings.
First, we will save the MyDisconnectedApp component under a new name.
This exercise will go quickly because we will just add one child. You could,
of course, add as many children as necessary.

PRE-LOAD DATA

In order for the child data to be loaded, the Pre-Load Data option must be
checked (see PARENT LIST below). It will automatically be persisted to Local
Storage if that option has been defined for the parent.

197

CHAPTER 4. OFFLINE OR ONLINE (UX)


Understanding Hierarchical Data

1. Save MyDisconnectedApp as MyDisconnectedParentChild (its easier


to spell than hierarchical :)
The UX already has a List Control for the parent (the Customers table in the
Northwind database. Now we will add a child List (Orders table).
2. UX Builder: Select the last control (Container End)
3. Data Controls: Choose [List].
Dialog Title: New Control
a. Name

& Label: Orders.

A recognizable name is a good idea when there are a lot of controls.


b. Click

the List Control - Quick Setup Genie button.

Dialog Title: List Control - Quick Setup Genie


c. Fill
LIST DATA SOURCE
DEFINITION

DETAIL VIEW

in as follows:

Connection string: Choose Northwind.


Table name: Choose Orders.
Field list: Select the first four fields.
Has Detail View: Yes.
Fields in Detail View: <AllFieldsInListQuery>
Detail View is editable: Yes.
Detail View control type: TextBox.
Detail View buttons: <DefaultList>.
Fields in List Display: <AllFieldsInListQuery>
Enclose Detail View in: Frame.
Frame label: DetailView.
Add placeholder for global errors: Yes.
Add placeholder for debug information: No.
Feel free to add this if you like.

DISCONNECTED OPERATION

Persist to Local Storage: No.


The Pre-load data option below replaces this one.

PARENT LIST

Has parent list: Yes.


Parent list id: Click the button and choose List1.
Pre-load data: Yes.
Important. Loads child data for each parent record.

Linking field - parent List: Click button and choose CustomerID.


Linking field - this list: Click button and choose CustomerID.
4. Click OK.
The new Orders List control and its associated Detail View controls
are added.

198

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

SETTINGS

If you should need to change them later, the settings for the above can be
found at:
List Builder:
Data Source tab > Parent List.
Detail View tab.

5. Save the component and go to the Browser (Full Preview).


Also displays in Working Preview, but Browser gives larger window
so its easier to see the parent and child at the same time.
6. Search > City: Enter London.

CHANGE EXISTING
RECORD

First we will change some existing child records (screen shot above).
7. Customers (parent list): Select the 2nd record, BSBEV (Bs Bever-

199

CHAPTER 4. OFFLINE OR ONLINE (UX)


Understanding Hierarchical Data

ages).
8. Orders (child list) record number 10471 > EmployeeID: Change to 9.
9. Click the next record.
A row dirty marker appears on the first record noting it has been
saved.
The default for the Auto-Commit property = Yes.*

10. Change the EmployeeID values for the next two orders (any number
from 2 - 9).
11. Click Save.
Detail View: Field has mustard colored background.
Orders List: Rows bright orange dirty markers.
Customers List: Parent has pale orange inherited dirty marker.
Indicates parent has one or more dirty children.
ENTER NEW RECORD

Next, we will enter a new child record.


12. Return to the Orders Detail View: Click New Record.
13. Fill in the following fields:
a. Employee
b. Order
c. Click

ID: 5.

Date: 10/16/2014 or the current date.

Save.

The record is marked with a blue marker (circled below).


The parent record is marked with an inherited dirty marker (see
above).

14. Click Synchronize.


All markers are removed.
*. List Builder > Detail View > Auto-commit detail view on row select. See Auto Commit on page 192.

200

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

The parent linking field and record auto-increment fields are automat-

ically filled in (right above).


15. Return to Alpha Anywhere.
VARIABLE NAME

In an effort to be super-organized, we tried changing


the Field Properties > Variable Name for the parent
from [List1] to [Customers]. Not a good idea
because we lost the ability to search. Probably
because the Search Part uses the variable name
somewhere in the association code. As soon as we
changed it back to [List1] everything worked again.
Best to think ahead and give the proper name from
the start as follows:
a. Data

Controls: Select [List]

b. At the New Control dialog, define the Name of the list


(arrow).

Do not change the Variable name at Field Properties.

16. Close the component.


GO TO ALPHA VIDEO
DIS_V12-1, 7

We recommend you watch all of these videos. They explain very clearly how
hierarchical data is processed.
Videos > Filter: Enter Disconnected. Choose:
DIS_V12-1. Introduction. Video #3: Introduction to Hierarchical Data
Structures.
DIS_V12-7. Working with Hierarchical Data. 3 videos.
Video #3 shows what happens when a new order is entered.
We have downloaded the component for you.
List Control Web Project: ux_cust_order_details.

Viewing Local Storage contents


COMPLETED COMPONENT

The completed component for this section is DisconnectedViewLocalStorage


(List Control Web Project).
Weve talked a lot about Local Storage, so you should be very comfortable
with the concept by now. If not, go back and read over the following sections:
Local Storage on page 167.
Defining Local Storage settings on page 189.
Now its time to actually see the data that is stored there at any given time.

KEYS

Local Storage uses keys to identify its contents.


All Alpha Anywhere key names begin with ALPHA_

201

CHAPTER 4. OFFLINE OR ONLINE (UX)


Viewing Local Storage contents

Key names can consist of randomly generated GUIDs (Globally


Unique Identifiers) or you can name them yourself (see Naming the
space on page 206).

Understanding the Local Storage Manager control


The UX Builder has a special control that allows you to see what is currently
being stored in Local Storage. This is really a development tool and is not
intended for the end user. It permits you to view the entire contents of Local
Storage, not just the Alpha Anywhere keys. You can also use it to delete keys.
We will use the component created in the previous exercise that uses hierarchical data. It has a parent with one child. We have saved a practice copy for
you.
1. WPCP > List Control Web Project: Open
DisconnectedViewLocalStorage_Practice in Design mode.
2. Save the component as MyDisconnectedViewLocalStorage.
3. Select the last control on the list [Frame End - FRAME_1].
4. UX Builder > Defined Controls: Click UX-Local Storage Manager to
enter it into the list.
5. Go to Working Preview.
6. Search > City: Enter London. (Click Search)
7. Scroll to the bottom of the page.
MENU

The Local Storage Manager


control has created a new section for the keys. It headed by a
Menu button that gives access
to:
All Keys, Keys for this app
only or All keys excluding keys
for this app.
8. Click the Menu > Show keys > All keys.
If you do not see any keys, go back to step 6 to enter search criteria.

KEYS

202

In our case, we have been doing quite a bit of testing with several different
components, so there are 14 keys in our list. The total size is 20,432 bytes.
Yours may show something different. Notice the following:

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

The number of keys and total


size are indicated at the top of the
list (yellow).
All of the keys created by Alpha
Anywhere begin with ALPHA
(aqua). When in actual operation,
the mobile device may have keys
from other programs, because this
is a shared resource.
The size for each key is shown to
its right (green).

Next, we will look at the keys for this app only. Each component generates
three keys, regardless of its size or the number of children it may have.
9. Click Menu > Show Keys > Keys for this app only.
There are three keys.

They each begin with Alpha (aqua) and have the same Guid (pink).
They have different endings, however.
LIST.LIST1 = All data in the list the parent and any children it might
have.
_INFO. Information about the component itself.
_VARIABLES. Variables and data contained therein for the Search and
Detail View fields. Includes children.

You dont have to take our word for it you can actually see the values in the
keys! Well look at the List key first.

203

CHAPTER 4. OFFLINE OR ONLINE (UX)


Viewing Local Storage contents

LIST KEY

10. First key (ending in LIST.LIST1): Click Show.

Our first test showed this key to have 8,854 bytes, a later test showed 9,262,

so the results seem to vary slightly here.*


The first 1000 bytes of data is displayed (aqua).
If you look carefully, you can see the CustomerID for the first record
in the row (AROUT) and all its data, including fields for its Detail
View and the child records from the Order table.
INFO KEY

The _INFO key shows date and time the component was last used, friendly
name, description, version.
11. _INFO Key: Click Show.

VARIABLE KEY

The _VARIABLE key shows the Search Part and Detail View variables and
the data contained therein for the currently selected row.
12. List1: Select the first row (ContactName = Thomas Hardy).
13. _VARIABLE Key: Click Show.

*. We have made edits to the database during book proofing, which may account for the difference. In any case, it is much too slight to
worry about.

204

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

If you do not see data for Thomas Hardy, click the Show key again to

close and once more to re-open (see Refresh Data below).

14. Examine the data carefully to see the variables and data (Search and
Detail View fields for both customer and order lists).
REFRESH DATA

When you do a new search or change rows with the key data showing, you
will need to refresh the display.
a. Click

Show to close the key display.

b. Click

Show again to reopen it.

The display should show the proper data.


DELETE A KEY

You can delete a key. It will be rebuilt when needed again.


15. Select the _VARIABLES key.
16. Click Menu > Delete Keys > Selected key.
17. Confirm deletion.
18. Go to Design mode.
19. Return to Working Preview.

REBUILD KEY

20. Rebuild the key as follows:


a. Search
b. Go

> City: Enter Paris.

to the Local Storage Manager.

c. Click

Menu > Show Keys > Keys for this app only.

Three keys appear. (If necessary click Show all keys first and then
the above to refresh the display.)

205

CHAPTER 4. OFFLINE OR ONLINE (UX)


Viewing Local Storage contents

21. _VARIABLES key: Click Show to see the Search variables for Paris and
the first contact, Mary Bertrand.

Naming the space


We have seen that Alpha Anywhere can assign GUIDs as key names. You
can also specify your own. This will help you to more easily identify them.
While were at it, well give the namespace a friendly name and a description.
These factors will make identification much easier in the even you decide to
write additional code for managing Local Storage.
22. Go to Design mode.
LOCAL STORAGE

23. Go to UX Builder > Properties.


Namespace: Enter My_app.
Namespace friendly name: Order taking.
Namespace description: Edit existing and enter new orders.
24. Go to Working Preview.
25. Search > City: Enter London.
26. Local Storage Menu: Choose Show keys > Keys for this app only.
The new name for the Namespace is used for all keys (green).

27. _INFO key: Click Show.


The Friendly Name and Description are displayed (yellow above).

206

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Freeing up space
As you have seen, Local Storage is a shared resource and it is limited. The
exact limitation is a function of your device. In order to free up storage space for
an application on a device, it might be necessary to delete storage being used by
some other application that is no longer in use. As we have seen, the UXLocalStorage control can allow you to look at the existing keys and delete extraneous ones, if necessary.
SIZE

The space allotment of Local Storage is about 5 mg (megabytes). You can


use the following calculation as a guide in determining how much available
space you need for your application.
4,000,000 bytes = 3.8147 mg.

METHODS FOR LS
MANAGEMENT

The UX component has several methods that make it easy for advanced
developers (uses JavaScript) to add functionality to their components to manage
the data in Local Storage. They are described in the document referenced at
Documentation on page 214.

Data Connection: Comparing Data Binding & List Detail


View Methods
Data Binding is the process by which controls in the UX component are
connected to data in a database (see page 88). Prior to Version 3.0, it was the
only way to connect the UX to data. However, as we have seen here, defining
Lists with an associated Detail View presents another method.
While this procedure is required for mobile applications, it also presents a
second option for standard applications. Here is a review on how they compare.
DATA BINDING

The Data Binding procedure binds data at the UX level. This means the
UX can only perform CRUD actions against a single set of linked tables.

LIST DETAIL VIEW

A List with its associated Detail Views permit CRUD actions against multiple independent sets of tables because you can have multiple Lists on the UX,
each with its own definition. In other words, binding is done at the List level.

WHICH TO USE?

Data Binding can be used for any control on the UX component. List Detail
View can be used only with data in a List control.
If you are using a SQL database, you have a choice. The one you use is a
matter of personal preference. Each has its advantages.
If you are using a data type other than SQL, Data Binding is probably preferable because the Synchronize button requires additional coding and the
Submit button does not.
See Using List Rows to Edit the Database on page 87 to create a
Detail View that works for any data type.

SQL DATA

ALL DATA TYPES

207

CHAPTER 4. OFFLINE OR ONLINE (UX)


Associating a List Detail View with an Existing List

If you are building a mobile application, List Detail View is the only option

MOBILE APPS

that works in a disconnected state.


You can add Detail Views and/or Search Parts to existing components. Well
discuss them next.
Videos > Filter: Enter contrasting data binding. Choose:

GO TO ALPHA VIDEO

UXL_V12-55. Contrasting Data Binding at the UX Level with Data


Binding at the List Level to Update a SQL Database.

Associating a List Detail View with an Existing List


The completed component is DetailViewAddList (List Control Web Project).

COMPLETED COMPONENT

We have seen how to use a genie to create a List, associated Detail View and
Search Part all in one step (page 176). Now we will show how to add just the
List Detail View to an existing List control.
Remember that this Detail View can only be used with SQL data unless you
create custom handlers*, therefore this option is less likely to be attractive to the
average user who is using DBF data.
DBF users: Use the Detail View discussed at Using List Rows to Edit
the Database on page 87.
If, on the other hand, you are using the SQL data type for your database, the
Detail View offers another way to connects lists to data, especially if you want
to multiple Lists that are connected to multiple sets of tables as noted in the previous section.

*. See Documentation on page 214.

208

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Adding the List Detail View


This process also has a genie, so the procedure is quite simple. We have a
component ready for you. It has a List based on the Northwind SQL database.
1. WPCP > List Control Web Project: Open
DetailViewAddToList_Practice in Design mode.
2. Save the component as MyDetailViewAddList.
LIST PROPERTIES

3. List1: Go to the List Builder > List Properties tab.


Has Detail View: Yes.
Opens the Detail View Tab.

4. Go to the Detail View tab.


5. Click Detail View - Quick Setup Genie (button at bottom of window).
Dialog Title: List Detail View - Quick Setup Genie
a. Create

controls on the UX to display the List Detail View: Yes.

b. Create

UX controls for all un-mapped columns in List: Yes.

c. Add
d.

buttons to the List Detail View to perform actions: Yes.

Create buttons for most commonly used actions: Yes.


See Adding More Buttons on page 212 for information on other
available buttons.

e. Click

OK.

Dialog Title: Select Position for New Controls


f.

Select the target control. The new control(s) will be added before or
after the target control: Choose [list1].

g. Position

(bottom of window): Choose After. (Click OK)

Dialog Title: Create new UX Controls


h. Wrap

the control in a Container? Yes.

i.

Type: Choose Frame.

j.

Frame label: Edit / Add Customers (Click OK)

Dialog Title: List builder


k. Click

OK again to close the List Builder.

Notice: The Return value type must be set to Primary Key


since the List has a Detail View. The Return value type property has been updated.
l.

Click Close.

Now we will make a couple of adjustments to the controls.


Dialog Title: UX Builder

PROPERTIES: [LIST1]
a. Remove
LIST PROPERTIES
FIELD LABEL

the break.

Width: 5.5in
Label: Customers.
Position: Above.

209

CHAPTER 4. OFFLINE OR ONLINE (UX)


Adding a List Search Part to an Existing List

6. [Button: Delete Record]: Add a break.


This will make the display narrower by breaking the buttons into two
lines.
7. Save and go to Working Preview.
8. Test by editing existing records and/or adding new ones.
9. Close the component when finished.
GO TO ALPHA VIDEO

Videos > Filter: Enter Detail View. Choose:


UX component - List Control.
UXL_V12-54. Introduction to the List Control Detail View.
This video is also referenced on page 188 so you may have
already seen it.

Adding a List Search Part to an Existing List


COMPLETED COMPONENT

The completed component is SearchPartAddToList (List Control Web Project).


Just as we added a List Detail View to an existing
UX component, we can also add the Search Part
at a later time.
And, yes, theres a genie for this one too.
We will use the same practice component that we
used in the previous exercise.

1. WPCP > List Control Web Project: Open


DetailViewAddToList_Practice in Design mode.
2. Save it as MySearchPartAddToList.
LIST PROPERTIES

3. [list1]: Go to the List Builder > List Properties tab.


Has Search Part: Yes.
Opens a Search Part tab.

4. Go to the Search Part tab.


SEARCH PART STYLES

210

There are three search styles:


Individual Controls. Creates an entry box for specified fields.
Keyword Search. Combines specified fields into one entry box.
Query by Form. Requires List Detail View. Uses Detail View fields
for search criteria (see page 211).

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

KEYWORD SEARCH
SEARCH PROPERTIES

This time, instead of using Individual Controls as we did before, we will use
a single keyword.
Search Part style: Choose SingleKeywordControl.
Keyword search fields: Click the button.
Choose CompanyName, ContactName, City, Country.

Keyword search control: Will be filled in by genie in next step.


5. Click Search Part - Quick Setup Genie (bottom of window).
Dialog Title: List Search Part - Quick Setup Genie
a. Create
b. Add

a UX control for a keyword search: Yes.

buttons to the UX component to perform Search part actions:

Yes.
c. Click

OK.

Keyword search control above has been filled in with:


LIST1_KEYWORDSEARCH.

6. Click OK again to close the List Builder.


7. Go to Working Preview.

Tips on using the Search Part


If you try a new search and the list is blank, try the following:
Synchronize any changes before attempting a new search.
Sometimes when you are testing you may forget that you have saved,
but not synchronized.
Click the Clear filter button.
If the above doesnt work, go to Design mode and then back to Work-

ing Preview.

Using Query by Form


Query by Form is a search method that finds records based on fields in the
form. If the UX has a List Detail View, those fields can also be used to find
records, eliminating the need for a separate Search Part.* The settings are
located at:
List Builder > Search Part tab > Search Part style.
The buttons for this style are explained at Understanding the Search Part
buttons on page 213.
GO TO ALPHA HELP

Query by Form (QBF) syntax is outlined at:


Documentation > Filter: Enter Query by Form.
Scroll down for the Syntax table.

GO TO ALPHA VIDEO

All Search styles are described in this video set:

*. See QBF Syntax on page 97.

211

CHAPTER 4. OFFLINE OR ONLINE (UX)


Adding More Buttons

Videos > Filter: Enter search part. Choose:


UX Component - List Control:
UXL_V12-56. List Control Search Part. 4 videos and a downloadable component.

Adding More Buttons


In addition to the basic buttons that we have used here, the List Detail View
and List Search Part have others that you may find useful. The UX Builder has
two controls:
List Detail View buttons.
List Search Part buttons.
Well take a look at both of them.

Understanding the List Detail View buttons


1. UX Builder > Defined Controls: Choose List Detail View buttons.
Dialog Title: Select Buttons for the Lists Detail View
a. Choose
b. Select

the list to which you want to apply the buttons.

the buttons.

The buttons and their uses are identified.


BUTTON METHODS

See document referenced at Documentation on page 214 for JavaScript


methods for List Detail View buttons.

UNDO EDITS

The standard Undo Edits (Reset) button returns the original field value
before the record is saved.
To return to the original value(s) after the Save button has been clicked, use
Undo Row Edits This will also undelete a deleted row. Must be clicked before
synchronization.

List Detail View Buttons (most commonly used in blue)


Save

Save edits made to the List Detail View back to the List.

New Record

Starts editing a new record. Any default values for a new record are filled
into the Detail View.

Delete Record

Marks the selected record in the List as deleted.

Undo Edits (Reset)

Undo edits made in the Detail View (before the edits have been saved
back to the List).

Undo Row Edits

Undo edits to the current row or un-delete deleted row in List (after data is
saved to the List, but not yet pushed to the server).

Synchronize

Pushes all edits made to the List back to the server to synchronize with the
server database

Synchronize Current Row

Same as 'Synchronize' but only synchronizes edits in the current row.

212

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

List Detail View Buttons (most commonly used in blue)


Synchronize All

Synchronizes data from ALL Lists on the UX component - user will not
have to press Synchronize buttons for each List.

Refresh List Data - Incremental

Performs an 'incremental' refresh of the List data. Server is queried to find


records that have been edited since the List was initially populated. Only
edited and new records are sent to the browser. This might be a substantially smaller payload than the original payload to populate the List. Rows
in the List that have been edited are not updated.

Refresh List Data

Refreshes all of the data in the List. You can only perform a full refresh if
the List is 'clean' (i.e. has no edits that have not yet been synchronized).

Show data in list

(Used for debugging only.) Shows data in the current row of the List.
Requires placeholder defined at:

List Builder > Detail View tab > Other.


a. Debugging

info: Yes.

b. Placeholder

for debugging info: Yes.

Understanding the Search Part buttons


2. UX Builder > Defined Controls: Click List Search Part buttons.
Dialog Title: Select Buttons for the Lists Search Part
a. Choose
b. Select

the list to which you want to apply the buttons.

the buttons.

The buttons and their uses are identified.

List Search Part Buttons Search Part is set to Individual Controls or Keyword Search
Submit Search (Search)

Submit the Search Part to execute the search.

Clear Search (Clear Filter)

Remove the filter that was applied by the Search Part.

List Search Part Buttons Search Part is set to Query by Form:


Query by Form Mode ON

Turn Query by Form mode on

Query by Form Mode OFF

Turn Query by Form mode off

Submit query

Submit the Query form to execute the search

Clear search

Remove the filter that was applied when the Query form was submitted

Clear controls

Clear the controls in the Query form

More Notes
WRITE CONFLICT
CHECKING

Write conflict checking can be turned on/off at the individual field level at
the List Builder > Fields tab > Check for write conflicts property.
If you uncheck this property then the last person to update a field
always wins!

213

CHAPTER 4. OFFLINE OR ONLINE (UX)


More Notes

TABLE PROPERTIES

The following may be specified at: List Builder > Detail View tab > Table
Properties.
Permissions: Specify if a CRUD operation is permitted.
Security: Assign security groups for CRUD operations, such as who
is permitted to delete records.
Geography: Geography fields and Location Information.
Server-side Permissions and Events: Server-side Permission Expressions and Server-side Events pertinent to the table.

FORMAT MARKERS,
ERRORS, WARNINGS

All markers that indicate dirty and new records can be modified with CSS,
as can other error notifications and warnings.
See You Tube video on page 215.
See also List Builder > Detail View tab > Customization.

PANELS

The samples given here need Panels in order to be used for mobile applications. They are fully described in Chapter 3.
Coming soon from Alpha: A genie that does this for you!*

DEBUG INFO

Adding a debug window to the component is described in the videos referenced at Disconnected Series on page 215. They show how the debugger can
be used to view the SQL statements that are generated for the CRUD operations.
The debugger can be turned on at:
List Builder > Detail View tab > Other > Debugging info.

PHONE GAP

PhoneGap will give access to the devices local file system, rather than just
the browsers Local Storage (typically limited to 5 mg as we have discussed).
As such, there will be access much more storage space it will actually be
dependent only on the memory of the device.
At this writing, an app running with the PhoneGap App builder, the UX List
control is not using the local file system. However, it is actively in the design
stage and should be available soon perhaps by the time you read this!
See also

DOCUMENTATION

There is an excellent page that contains full documentation for disconnected


applications. We have covered a great deal of it in this chapter, but the advanced
developer will find more information, including the following.
Resolving Write Conflicts Programmatically - The onWriteConflict Event.
Custom Handlers for Synchronization Tasks.
Client-side Events.
Delay Populate and Custom Data Sources.
Persisting Data to Local Storage
Persisting Variables.

*. As we go to press, we understand there is a genie in the works that will create the full mobile application. It may be installed by the
time you read this. Be sure to update your software.

214

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Local Storage Settings.


Managing Local Storage.
Methods for Managing Local Storage.

This document is not located in the Documentation section. To see it:


a. Open
b. Go

any UX Component.

to the Overview page.

c. Click

the link at the bottom:


Click here for information on how to build disconnected
mobile applications with the UX component.

VIDEOS
DISCONNECTED SERIES

All users: If you have not already seen them we recommend everyone watch
the videos referenced at page 197. Here they are again.
Videos > Filter: Enter Disconnected. Choose:
UX Component - Disconnected Applications.
DIS_V12-1. Introduction.
DIS_V12-2. Editing Data While Offline and then Synchronizing
the Data.
DIS_V12-14. Delaying Populate List Till Active Search.
DIS_V12-15. Setting Maximum Number of Records that a Search
can Return.
DIS_V12-16. Persisting Data to Local Storage.

YOU TUBE VIDEO

Advanced users: For an in-depth example of a disconnected application that


has rich a mobile interface, watch this YouTube video. It is aimed at developers
with a solid understanding of the UX component who also have strong Javascript and CSS skills.
http://www.youtube.com/watch?v=ILMjGkxxuV4&feature=youtu.be

We have downloaded the component, but have not tested it beyond noting
that it displays best in the browser. It is in a separate folder.
a. Go

to WPCP > List Controls Web Project > Web Components.

b. Double

click on the OffilineDemo1 FOLDER (top of components

listing).
c. Choose
d. Go

offlinedemo1 UX component.

to the Browser to view.

215

CHAPTER 4. OFFLINE OR ONLINE (UX)

Notes:

216

Chapter 5.

Optimizing the UX

Hit your target


Just as the funnel helps the arrows reach dead center, the UX will have your design in the
hands of your customers with great accuracy. Theres no end to the arrows in its quiver!
Containers create columns and invoices and lots, lots more. Make your layout responsive
that means it will always look fabulous on any device. Save time and trouble by letting your
component define the table structure! And, of course, we have more tips for you, too.

CHAPTER 5. OPTIMIZING THE UX

What youll find here


Topic

Description

Page

How the Chapter is Organized

219

Defining Containers:

219

A. Creating a Tabbed Interface

Create a Tabbed interface

220

B. Using the Container Control

See page 219 for list of sub-topics.

221

C. Using Containers to Align Controls

Use percentages to align block of controls.

236

Choosing the Correct Device Layout:


A. Understanding Responsive Layout Design

237
Your application will look awesome on all
devices.

B. Creating a Complex Responsive Design

Creating Tables Based on Controls:

238
243

Why should you work when Alpha can do


it for you?

244

A. Creating a Single Table Based on Controls in a UX

244

B. Creating Multiple Tables Based on a UX with


Repeating Sections

249

More UX Elements:

254

Refreshing the table

254

Hints for Data Binding

258

Viewing 1000s of Rows in a List

255

Adding a Scroller to a List

257

Displaying a Video or Web Page

260

More Good Stuff

262

Organizing a complex UX component

262

Recalculating the HTML and JavaScript

262

Internationalization

262

Lookups

262

Validating data entries

262

Permissions and security

263

Menus: To create menus for the UX component, see Chapter 6.

218

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How the Chapter is Organized


You have begun to divine the depth of the UX component. In this chapter, we
continue to delight your desires with more delicacies!
CONTAINERS

We begin with the section on Containers. Keep in mind that there is a Containers menu selection (gold arrow in screen shot below) and a Container control that has many sub-types, each of which is tasked to a specific condition
(green arrow below). For example:
The most basic Container control sub-group is called None. It creates columns, defines a group of show-hide controls and helps line things up.
Invoices are created with the Repeating Section sub-type.
The terms are not always obvious to the uninitiated, so you are to be forgiven
if you find them puzzling. Not to worry. By the time you have completed this
section, the concepts should be clear and, of course, you can always return
here for specific conditions when you are developing your own application.

RESPONSIVE LAYOUTS

Then we move on to another feature with a tricky term Responsive Layout.


It simply means that you can define which view can be seen on which device.
For example, you can define which view to display when the component is
opened on a phone, tablet or desktop device. Alpha Anywhere responds not
only to the device, but its orientation, browser or what ever else you tell it to!
Easy to set up youre going to love this feature.

CONTROLS BECOME
TABLE FIELDS

In most cases, you will probably bind the UX to existing tables and fields.*
But, suppose you want to dig into the UX and start designing from there? No
problem. You can use the controls to create tables and fields in your SQL or
DBF database.

TIDBITS

We close the chapter with more notes on UX features. You may not need
these every day, but they will come in handy when you do.

Defining Containers:
At this writing, there are five types of containers, all of which are found
in the UX Builder > Containers menu selection (gold arrow at left).
Frame, is one we have already used several times.
We saw how Free-Form Layout works on page 117.
Tab Control and Tab Pane are always used together, as we will explain
below.
There is also a control called Container that is extremely versatile,
with many sub-types that we will detail here (green arrow).

*. Data Binding is covered in Volume 1.

219

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Creating a Tabbed Interface

TAB CONTROL & TAB PANE

Heres what youll find in this section. The name of the control is in the left
margin.
A. Creating a Tabbed Interface
Using the Tab Control and Tab Pane controls on page 220.
B. Using the Container Control
Understanding the Container control on page 221.

CONTAINER > NONE

Creating columns on page 223.

CONTAINER > NONE

Defining a show/hide condition for a group of controls on page 224.


Creating invoices and other master / detail relationships on page 224.

CONTAINER > REPEATING


SECTION

Grouping controls in UX with Panels on page 225.

CONTAINER > CONTROL


GROUP

Placing buttons in groups on page 226.

CONTAINER > BUTTON GROUP

Creating a SpinList controls on page 227.

CONTAINER > SPIN LIST


CONTROL

Displaying controls in a different place on the layout on page 227.

CONTAINER > INJECTIBLE


CONTENT

Opening controls in a pop-up window on page 228.

CONTAINER > WINDOW

Assigning flexible widths to UX controls on page 229.

CONTAINER > FLEX LAYOUT

Placing data on a pre-defined form on page 231.

CONTAINER > ABSOLUTE


LAYOUT

Using CSS to override spacing of controls on page 235.

CONTAINER > NO FLOAT


CONTAINER > NONE

C. Using Containers to Align Controls on page 236.

The samples for this section are found in the Containers Web Project.

A. Creating a Tabbed Interface


COMPLETED COMPONENT

The completed component for this section is TabContainer (Containers Web

Project).

Using the Tab Control and Tab Pane controls


The Tab Control and Tab Pane containers are always used together. The Tab
Container creates the holder and the Tab Pane container defines the individual
panes. Depending on the style, they appear as tabs or as buttons with pointers.

220

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

1. WPCP > Containers Web Project: Open the TabContainer UX component in Design mode.
2. Go to Working Preview.
STYLES

The effect (buttons w/pointers or tabs) is dependent on the style. This one
is iOS. Well also take a look at MobBlue.
3. Click the buttons to go from Name to Address.
4. Return to Design mode.
5. Properties > Style name: Change to MobBlue.
6. Return to Working Preview to see the difference in both color and tab
appearance.
7. Close the component without changes.

B. Using the Container Control


COMPLETED COMPONENT

The completed components for this section are found in the Containers Web

Project. Their names match either the exercise title or the sub-type.

Understanding the Container control


The Container control governs display of controls. At this writing, it has
twelve sub-types (aka types).
None (page 223).
Used for general grouping of controls.
Creates columns.
RepeatingSection (page 224).
Used for creating invoices and other Master/Detail relationships.
PanelHeader and PanelFooter.
Same as those created when you right click on a Panel Card, Navigator or Layout and choose Header or Footer.

ControlGroup, ButtonGroup and SpinListGroup.


Governs display of grouped controls. Individual control borders are suppressed and a separator line is inserted when appropriate.

Injectible Content (page 227).


Combine with a Placeholder to position content in a different place in
the display than its physical location in the component.
PanelOverlay (page 133).
Creates a fixed position for objects.

221

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using the Container Control

Window (page 228).


Save screen space by placing certain controls in a pop-up window.
FlexLayout (page 229).
Assign a flex width to UX controls that changes with screen orientation.
AbsoluteLayout (page 231).
Position controls precisely.
NoFloat (page 235).
Removes all default formatting in preparation for CSS overrides.
Advanced.

We will explore all in this section, except PanelHeader, PanelFooter and


Panel Overlay because they were covered earlier (see page references above).
Before we move on, however, lets quickly review how the Container control
is used and see where you can get help as you work.
1. WPCP > Containers Web Project: Open the Container Demo UX
component in Design mode.
2. Select the Name - Zip controls.
3. Containers: Click Container.

Dialog Title: Insert Container

4. Click Explain Different Container Types.


Dialog Title: Container Help

5. Click each type in turn for an explanation.


6. Video series: Click Click here to watch a video demonstration of different control types.
This series of videos gives an excellent overview and we recommend that
you watch them. All are covered except PanelOverlay. Other videos are also
available in the Video Finder, but this overview is found only here.
7. Close the Container Help.

222

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Containers can be selected from this dialog or at the Properties section. We


will insert the container type called None and then show how it can be
changed in Properties.
Containers can be inserted around, before or after the selected control(s).
Dialog Title: Insert Container
a. Choose
b. Click

None.

InsertAround.

The container is inserted around the selected control(s). (Yellow above)


SUB-TYPE

In Properties > Container Begin Properties, the container type is referred to


as the sub-type and may be changed at any time.
a. Select

[Container: CONTAINER_1] (gold arrow above).


b. Properties

Pane > Container Begin Prop-

erties > Sub-type.


c. Click

the drop down arrow for the selec-

tion.

8. Close the component without changes.


Go To Alpha Video D4

See step 6 on page 222 for an overview. We recommend you watch this
series, as well as the following:
Videos > Filter: Enter Container. Choose:
D4. Dialog Component - Complex Layout Using Frames, containers,
Tabs and Accordions.
Additional videos noted where applicable.
Now well run through the Container control sub-types and their uses.

Creating columns
NONE
CONTAINER SUB-TYPE

Columns are easily created by using a Container with the type set to None,
and turning off the break.
9. WPCP > Containers Web Project: Open Columns in Design mode.
The First and Last Names are in one container. The address fields are
in another.
Turning off the Container End break (red circle), places them side-byside if there is room. If not, they will appear one under the other.
This setting for this container is at:

223

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using the Container Control

Containers > Container: Container type: Choose None.

a. [Container

End: CONTAINER_1]: Turn off the break.

Select the control, right click and choose Toggle Break or click
the Toggle Break button above the controls list.
b. Go

to Working Preview > iPhone Horizontal to see both columns.

c. Go

to iPhone Vertical.

There is a single column because there is not enough space for


two.
WATERMARK SAVES SPACE

Except for Date, the textbox controls use the Watermark property to put the
labels inside to save space. Heres a reminder on where to find it.
d. Return

TEXTBOX PROPERTIES

to Design mode.

PROPERTIES: <TEXTBOX CONTROL>


Watermark: Yes.
Watermark text: <FieldLabel>.

Defining a show/hide condition for a group


of controls
NONE
CONTAINER SUB-TYPE
(CONT.)

This container setting is also useful if you need to create a show/hide condition for a group of controls because it is faster than setting the condition for each
control.
a. Wrap

the controls in a Container > Sub Type = None.

b. Container

begin > Client Side Properties: Define the Show/hide


expression.

10. Close the component without changes.

Creating invoices and other master / detail


relationships
REPEATING SECTION
CONTAINER SUB-TYPE

224

The Repeating Section sub-type is used for forms with a Master / Detail relationship, such as invoices. This is fully explained in Volume 1 of this series,* so
well just give a quick refresher here.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

11. WPCP > Containers Web Project: Open RepeatingSection in Design


mode.
a. Go

to Working Preview.

b. Inspect

and return to Design mode.

The number of lines and other Repeating Section properties are defined at:
Container begin > Repeating section: Repeat count and many other
options.
12. Close the component without changes.
Go To Alpha Video D13

Videos > Filter: Enter Repeat. Choose:


D13. Dialog Component - Repeating Sections - scrollable containers.

Grouping controls in UX with Panels


CONTROL GROUP
CONTAINER SUB-TYPE

Typically used in UX components that use Panels. Controls inside a ControlGroup container are rendered as follows:
Border around input controls is hidden.

*. Alpha Anywhere Web & Mobile Made Easy, The Basics and More for Version 12, by Susan Hussey Bush. Chapter 7, page 399.
Available at www.libertymanuals.com.

225

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using the Container Control

Each row of controls is separated by a divider line (with breaks).

13. WPCP > Containers Web Project: Open ContainerDemo in


Design mode.
a. Wrap

the City, State and Zip fields in a Container with a subtype of ControlGroup.

b. Go

to Working Preview to inspect.

c. Return

to Design mode.

d. Remove
e. See

the breaks after City & State.

the difference at Working Preview.

Placing buttons in groups


BUTTON GROUP
CONTAINER SUB-TYPE

This exercise continues from the previous one. ContainerDemo should be

open in Design mode.


Buttons inside a ButtonGroup container are grouped together.
They are rendered with no horizontal
space between them and will look
like a single, complex control.
f. Add

3 buttons to the component.

g. Wrap them in a Container with a ButtonGroup sub-type.


h. Go

to Working Preview.

i. Save as MyContainerControlButttonGroup.

14. Close the component.

226

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Creating a SpinList controls


SPIN LIST GROUP
CONTAINER SUB-TYPE

By now you have figured out that this next container will turn a group of
controls into a list that spins with a finger on a touch enabled screen or with the
cursor on others.
15. WPCP > Containers Web Project: Open SpinList in Design
mode.
a. Go to Working Preview and spin
away.
b. Return

to Design mode.

Months list: We used a predefined list to define the Month


control.
a. Select

the Month control.

b. Properties
c. Click

> Spin List Properties > Static Data: Click the button.

Pre-Defined Lists (green) to see the options available.

The other lists were created manually.


16. Close when finished.

Displaying controls in a different place on the layout


INJECTIBLE CONTENT
CONTAINER SUB-TYPE

The UX component is designed to show controls in a left to right, top to bottom order. There may come a time, however, when you want to place the controls in one place and have them displayed in another.
You can have them appear in a placeholder location or in a DIV.
In other words, this Container sub-type injects the content into another place
in the component.
17. WPCP > Containers Web Project: Open ContainerDemo in
Design mode.
a. Other controls: Add a Placeholder
above the Name control.
b. Add two more textbox controls
below Zip: Country and ID No.
c. Wrap the new controls in a Container

> Injectible Content sub-type.

CONTAINER BEGIN
PROPERTIES

PROPERTIES: INJECTIBLE CONTENT: CONTAINER_1]


Sub-type: Injectible.

227

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using the Container Control

Injectible target type: Placeholder.


Injection target placeholder: Choose PLACEHOLDER_1.

18. Save the component as MyInjectibleContainer.


19. Go to Working Preview to inspect and close when finished.

Opening controls in a pop-up window


WINDOW
CONTAINER SUB-TYPE

One way to save screen space in mobile applications is to place some of the
controls in a window that pops-up when a button is clicked.
20. WPCP > Containers
Web Project: Open ContainerDemo in Design
mode.
a. Wrap

City, State and Zip in


a Container > Window subtype.

b. Other Controls: Place a button under the address control.


c. Save

BUTTON PROPERTIES
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

as MyWindow.

PROPERTIES: [BUTTON: ADDRESS]


Button text: Enter Address.
click: Click the button.
a. Action

Javascript > Add New Action.

b. Filter

list: Enter Container. Choose Show Container Window.


(Click OK)

c. Display

Window > Container ID: Choose CONTAINER_1. (Click

OK)
d. Comment:
e. Save

Show Container 1. (Click OK)

the Action Javascript.

21. Save and go to Working Preview.


22. Click the Enter Address button to bring up the window.
Note that the window can be enlarged (red circle above).
23. Close the component.

228

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Assigning flexible widths to UX controls


FLEX LAYOUT
CONTAINER SUB-TYPE

Previously, we discussed using flex widths for fields inside a List control.
When flex(1) is assigned to one field and flex(2) to another, they always display
proportionately across the page, regardless of the screen size available. The
FlexLayout container type does the same for controls in the UX itself.
In this example, we have a button with a fixed width and a drop-down box
with a flex width. The button always stays the same, but the drop-down box
changes with the device orientation. This also works in a Browser window the
drop-down box resizes as the window is expanded or contracted.

24. WPCP > Containers Web Project: Create a new, blank UX component.
a. Add

the following controls:

Drop-down box (Name = State) and a Button.


b. Save

as MyFlexLayout.

c. Wrap
VERY IMPORTANT

the controls in a Container > FlexLayout sub-type.

There should be no breaks in this container sub-type.


d. Turn

off the breaks after the drop-down box and button controls.

At first, the width settings might seem a bit confusing because they are
defined in two places:.
The width of all controls (drop-down box, button and container)
should be 100%.
The actual and flex widths of the drop-down box and button controls
are specified in the container builder.
We will use another pre-defined list here.
FIELD PROPERTIES
DROP DOWN BOX
PROPERTIES

PROPERTIES: [STATE]
Width: Enter 100%.
Choices: Click the button.
Choices are: Static.
Click Pre-Defined Lists. Choose State Names. (Click OK twice)

BUTTON PROPERTIES

PROPERTIES: [BUTTON]
Width: 100%.

229

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using the Container Control

The FlexLayout is designed in the container builder.


CONTAINER BEGIN
PROPERTIES

PROPERTIES: [FLEXLAYOUT: CONTAINER_1]


Container width: 100%.
Flexible layout width settings: Click the button.
Double click [State}.
Control width: Enter flex(1).
Click OK.
Double click [BUTTON_1].
Control width: Enter 80px.
Click OK.
Flex container width: 100%
(same as Container width above).
Click OK.
e. Wrap

all controls in a Panel

Card.
f. Mobile

= Yes.

g. Save and go to Working Preview and view in horizontal and


vertical modes.

VIEW IN BROWSER

Next, well see how this works when a Browser window is resized.
h. Return

to Design mode.

i.

Mobile: Uncheck.

j.

Go to the Browser. (Full Preview)

k. Resize

the width of the Browser window to see how the flex layout is
maintained.

25. Return to Alpha Anywhere and close the component.

230

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Go To Alpha Video
UX_V12-69

Videos > Filter: Enter Container. Choose:


UX_V12--69. Responsive Design - Dynamically resizing controls on
orientation or window size change. Understanding the FlexLayout container.

Placing data on a pre-defined form


ABSOLUTE LAYOUT
CONTAINER SUB-TYPE

In most cases, the default positions of the controls is fine because they are
logically laid out with pre-defined spacing. There may be a time, however,
when you want to use the layout of a pre-defined form. This is done with the
AbsoluteLayout container sub-type.
This is the most complex of the container sub-types and you will benefit
from watching the videos first. They go
into detail on how it works, so we will
just give the highlights on using the control. Keep in mind that it is far more
powerful than we illustrate here. For
example, you can:
Create tab or genie style forms when
there are multiple pages.
Apply validation rules.
This really is fun to use it may take a
bit of fiddling to get the controls positioned exactly, but, all things considered,
its really a great design element.
First, well take a look at the completed component so you will have a sense
of how it works.
26. WPCP > Containers Web Project: Open AbsoluteLayout in Design
mode.
27. Go to Working Preview > iPad (vertical).
The background comes from an image file that has been added to the Web
Project.
WPCP > Images: FormBackground.jpg.
28. Click the radio buttons for Sex and the check boxes for height and
weight.
29. Enter a note in the memo.

SUBMIT DATA

While we have not bound the example data to a table, that is how the form
would typically be used. While you can print the finished copy to a PDF, there
are some limitations (see Print Form to pdf on page 235). Be sure to look
them over before starting out on your project.

231

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using the Container Control

If the data was bound to a table, clicking the Enter my information button
would submit the data to the table. This form did not happen to have one, but in
a real world situation, you would probably want a reset button, so we added it.
And, dont forget to define the Server-side Code in the usual manner.
Events > Server-side > afterDialogValidate > Action Scripting > Save
Submitted Data to Table (see Server-side code on page 90).
30. Close the component.
31. WPCP > Containers Web Project: Open AbsoluteLayout_Practice in
Design mode.
32. Save as MyAbsoluteLayout.
In order for the spacing to be correct, The
Label position for all controls must be set to None
and the Label alignment set to Left.
a. Name

control: Right click. Select: Label Position >


Set all controls > None.

b. Name

control: Right click. Select: Label Alignment


> Set all controls > Left.

c. Wrap

all controls in a Container > AbsoluteLayout


sub-type.

RADIO BUTTONS & CHECK BOXES

To begin, we will prep the Radio Buttons and Checkboxes so they can be split into individual items for
exact placement on the form.
SIZE AND APPEARANCE

The size and appearance of the Radio Buttons and Check Boxes are designed
in their properties in the usual manner.
RadioButton Properties > Custom appearance designer or
CheckBox Properties > Custom appearance designer.*

CONTROL TYPE

PROPERTIES: [SEX]
Control Type: Radio Button.
Choices: Click the button to see the following entry:

RADIO BUTTON PROPERTIES

Choices are: Static.


Static Choices:
Male|M.
Female|F.
NOTE

We could have just entered M and F because we will be suppressing the


labels (below).

*. This is explained in Volume 1 of this series.

232

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

When the buttons are split (following step), they will become known as
Sex:1 and Sex:2 in the AbsoluteLayout designer, so you will want to keep track
of the entry order.
Custom layout when in AbsoluteLayout container: Yes.
This splits the radio buttons into separate items for exact positioning on
the form.
Suppress labels when in AbsoluteLayout container: Yes.
Our form has labels, so we dont need them.
CONTROL TYPE
CHECK BOX PROPERTIES

PROPERTIES: [SIZE]
Control type: Checkbox.
Choices: Click the button to see the following entry:
Choices are: Static.
Static Choices:
Height|H.
Weight|W.
See NOTE above. The same conditions apply to check boxes.
Custom layout when in AbsoluteLayout container: Yes.
Suppress labels when in AbsoluteLayout container: Yes.

IMPORTANT NOTE

BUTTON PROPERTIES

In order for buttons to display properly in an AbsoluteLayout container, their


height and width must be set to 100%.
PROPERTIES: [BUTTON: ENTER MY INFORMATION] & [BUTTON: RESET]
Width: 100%.
Height: 100%.

The rest of the settings are in the AbsoluteLayout container properties. First,
we will add the background image and then go to the designer.
CONTAINER BEGIN
PROPERTIES

PROPERTIES: [ABSOLUTELAYOUT: CONTAINER_1]


Container alignment: Left.
Container width: 665 px.
Container height: 540 px.
Has background image: Yes.
Background image:
a. Choose
b. Click

Image in Web Project or Style.

Select > Select from Web Project Folder.

c. Choose

FormBackground.jpg. (Click OK twice)


Now that we have an image with which to work, we can
design the layout.

Absolute positions for controls: Click the button.


The background image appears, with the controls listed in
the left pane. Note that there are two controls each for Sex
and Size (yellow below).

233

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using the Container Control

The design process is as follows:


a. Select

a control from the left panel.

b. Draw

a box where you want on in the form.

The controls will appear in front of any background that might be on the
form. If you are at all familiar with using the Alpha Anywhere Report Editor for
Freeform reports, this designer will be easy to understand because the usage is
similar.
There are dynamic guidelines that make it easy to
align objects. (These are lines that shoot out to another
object when you are close to an edge.)
Precise placement and sizing is done by Shift + Clicking on multiple objects and choosing Edit Selected from
the toolbar.
Choices include alignment, horizontal or vertical distribution and size matching. All can be based on the
first or last selection.
Delete: To delete a drawn area, select it and click
Delete. (No warning, but there are Undo/ Redo
options.)
Snap to Grid / Guidelines is also available.
Exact positioning is available in the Properties pane
for each control.
c. Select

Name and draw in its space.

d. Select

Sex:1 and draw a box over the Male radio button as below.

e. Repeat
f. Click

for the other controls as at left.

OK.

33. Go to Working Preview to inspect.


34. Return to Design mode and adjust positioning as necessary.
Note the size and definition of the radio button and check box
controls can be changed (see Size and Appearance on
page 232).

234

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

PRINT FORM TO PDF

The form can be printed to a PDF file. The PDF is created by placing a button on the layout.
Limitations. There are some limitations to this feature. Only text will be
rendered. The fancy radio buttons and check boxes will not. You can use
this exercise to see what works and what does not.
35. Other controls: Place a Button above the Absolute Layout container.

BUTTON PROPERTIES
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

PROPERTIES:
Button text: Print to PDF
click: Click the button.
a. Action

Javascript > Add New Action.

b. Filter:

Enter Absolute.

c. Choose:

Absolute Layout Container - Create PDF. (Click OK)

d. Absolute

Layout Container name: Choose Container_1.

e. Filename:
f.

Enter MyTempFile.

Action: Choose Download


Alternately, you can choose Xbasic and define a custom action
that will be taken when the PDF is generated.

g. Click

OK.

h. Comment:
i.

Download to PDF.

Save the Action Javascript.

36. Save the component and go to Live Preview > Full Preview.
37. Click the Print to PDF button to open the form.*
38. Close the component.
Go To Alpha Video
UX_V12-82

This seven-part series describes this sub-type in detail and should be watched
by anyone planning to use it.
Videos > Filter: Enter Container. Choose:
UX_V12--82. Positioning controls at absolute locations on the screen
using the WYSYWIG builder. Understanding the AbsoluteLayout container.
UX_V12-82. Absolute Layout Container - Save as PDF.
See also Positioning elements absolutely on page 127.

Using CSS to override spacing of controls


NO FLOAT
CONTAINER SUB-TYPE

The final Container sub-type is NoFloat. This removes all spacing around the
controls so that you can customize it with CSS. Advanced.
39. WPCP > Containers Web Project: Open ContainerDemo in Design
mode.

*. At this writing, the text appears correctly for Name and Describe your athletic ability, but the radio buttons and check boxes are not
filled in correctly. We have report this to Alpha and, hopefully, it will be fixed by the time you read this.

235

CHAPTER 5. OPTIMIZING THE UX


Defining Containers: Using Containers to Align Controls

40. Save as MyNoFloat.


a. Wrap
b. Go

the Name - Zip controls in a Container > None.

to Working Preview to see the standard spacing.

c. Return

to Design mode.

d. Change
e. Return

the container sub-type to NoFloat.

to Working Preview to see the spacing removed.

f. Return

to Design mode and specify the NoFloat Container


properties to obtain the spacing that you desire.

41. Save and close the component when finished.

C. Using Containers to Align Controls


COMPLETED COMPONENT

The completed component is is AlignControls (Containers Web Project)


Weve talked a lot about aligning controls because it is important to have a
well ordered display. There is yet another method that you will find very useful
and easy to employ.
Placing the controls in a
container and fixing sizes
to percentages will assure
alignment, regardless of
the display.

1. WPCP > Containers Web Project: Open AlignControls in Design


mode.
2. Go to Working Preview > iPhone Vertical.
The controls take up 75% of the available width and the group is both
right- and left-aligned.
3. Examine in the other display modes to see the percentages and alignment remain the same.
4. Return to Design mode.
Heres how it was done:
PREP FIELDS

Do the following to prepare the fields:


a. [Name]

control: Right click. Choose Label Position > Set all controls > None.

b. Turn

236

off breaks after City and State.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

c. Watermark

SET FIELD WIDTHS

FIELD PROPERTIES

all fields (see Watermark saves space on page 224).

Then set the widths for each field.


PROPERTIES: [NAME] & [ADDRESS]
Width: 100%
d. Repeat

above for City, State and Zip, using the following widths.

City: 50%, State: 25%, Zip: 25% (line adds up to 100%).


ADD CONTAINER

Next, add a the container and set its width.


e. Wrap

CONTAINER BEGIN
PROPERTIES

the controls in a Container > None.

PROPERTIES: [CONTAINER: CONTAINER_1]


Container width: 75%.
Of course, you could use 100% or any other percentage.

The value in following this procedure is that you are always in control of
field widths. You may also have multiple containers to align several groups of
controls, if you like. Turning off breaks between containers gives you even
more alignment options.
Go To Alpha Video
D62

Videos > Filter: Enter Container. Choose:


D62. Understanding Difference Between 'Control Width' and 'container
Width' Layout Mode.
Editors note: Our tests showed that specific widths mentioned in this
video did result in correct alignment, even when not used with a container. This is likely due to program adjustments made since the video
was released. The principle of using containers in this situation, however, is still valid and recommended.

Choosing the Correct Device Layout:


We have already seen that you can design both columnar and freeform layouts that change depending on the orientation of the device (page 44).

But. Suppose you need more than that. Suppose you want to design layouts for
one or more specific set-ups? Maybe you want one layout for an iPhone and
another for Android. How about getting down and dirty with Safari, and Opera
and Firefox or simply any device that supports a mouse?

237

CHAPTER 5. OPTIMIZING THE UX


Choosing the Correct Device Layout: Understanding Responsive Layout Design

Theres a genie for that! And you will be surprised how easy it is to use.
This feature is called responsive layout design.

The samples for these exercises are in the Misc Web Project.

A. Understanding Responsive Layout Design


COMPLETED COMPONENT

The completed component is responsiveDesignBasic (Misc Web Project).

NON TECHY TYPES

This exercise starts out a bit on the technical side. Dont let that deter you,
however. You can do this it will make sense when you watch the video or do
the exercise!

DEVICE ORIENTATION

A responsive layout is defined as one that changes based on the type of


device used phone, tablet, table or desktop monitor.
You can also specify the type of browser or other set-up. At this writing, the
following may be defined:
Firefox, IE, Opera, Safari,
Android, Galaxy, iPhone, iPad, Kindle, Mobile, Mouse supported, Playbook, Tablet, TouchPad.
Orientation (landscape or portrait).
Width and/or height (is equal to, greater than, less than).
IOS Version, User defined Agent or Basic Scroller, WebKit, Windows,
Xoom.

BROWSERS
DEVICES

SCREEN

OTHER

The above may also be combined.


HOW IT WORKS

Once one or more of the above is defined, rules are specified for each in
order to:
Modify properties on a Panel Card, Layout or Panel Navigator, Container, such as:
Specify flow direction (LTR, TTB, etc.)
Show/Hide Panel Header/Footer.
Add / Remove CSS Class Names to Header, Footer, Body, Root.
Define custom Javascript actions.

238

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Select the active layout in a List control.


Define position/size for controls in an AbsoluteLayout container.

For example, you may wish to define behavior when in Landscape or Portrait
screen orientation. In one, you might want to show the Panel Card header, but
not in the other. Or display a List in two columns in one and four in the other. If
this all seems interesting, then continue on, because this is just what youll learn
in our first example.

Creating a simple responsive design


This example will show how the Responsive
Layout genie works. Since the mobile device
simulator displays horizontal and vertical
screen orientation easily, we will demonstrate
with them. However, you could just as easily
specify iPhone or iPad devices and view the
results without leaving Alpha Anywhere. To
really get a sense of how it all works, you will
want to see the device and Browser settings in
action. Once you get the basics, it will be easy
to test them out, too.
VIDEO! SEE P. 244

We have downloaded the sample components that come with the video. *
The one we are using here has a Panel Card with a
Header and a List control.
The List control has two layouts, Horizontal (four
columns and Vertical (two columns) as shown in the
above screen shot.
The goal is to show the four column view in Landscape mode, without a
Header. In Portrait, we will only display two columns, but will show the Header.
1. WPCP > Misc Web Project: Open responsiveDesignBasic in Design
mode.
2. Go to Properties > Responsive Layout Settings.
Before we go to the genie, lets look at the other options.
Apply responsive layout settings: Turns the settings on or off.
Responsive rules mode:
FirstTrue (default): The rules are evaluated until the first true rule is
found and then that rule (ONLY that rule) is applied.
AllTrue: All rules that are true are applied (not just the first one). The
active rule is set to the LAST rule that was applied.

*. The components have been renamed as follows: responsiveDesign1 changed to responsiveDesignBasic; responsiveDesign2 changed
to responsiveDesignComplex.

239

CHAPTER 5. OPTIMIZING THE UX


Choosing the Correct Device Layout: Understanding Responsive Layout Design

Understanding the Responsive Layout genie


Lets see how the genie works.
3. Responsive layout settings: Click the button.

STEP 1

STEP 2

STEP 3

RULE #1

RULE #2

There are three steps:


Define Rule.
Identifies a particular device, orientation, etc.
When a rule is true, the corresponding actions are performed.
Define Action.
A list of actions to perform when a rule (above) is true.
Define Action Properties.
Properties are set for each Rule.
This component has two Rules, landscape and portrait. Each Rule has two
Actions. The names of the Actions are the same for each, but the Action Properties are different. Click each in turn to see the properties change.
Rule #1 Landscape sets the list layout to horizontal. Rule #2 Portrait
sets it to vertical.
Rule #1 Landscape modifies the properties to hide the header, Rule #2
Portrait shows it.
Rule Name: Landscape.
Action #1: Set List layout to Horizontal (4 columns).
Action #2: Hide the Header.
Rule Name: Portrait.
Action #1: Set List layout to Vertical (2 columns).
Action #2: Show the Header.
You may have as many Rules and Actions as you need.

Defining Rule #1: Landscape


Heres how Rules are defined:
4. Click Add Rule.

240

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

5. Rule Name: Landscape.


May be anything you like, but it is best to give it a meaningful name.
The expression is written in Javascript. There are aids to help write it.
a. Click Insert field to bring up the list of screen and device selections

EXPRESSION

(right below).
b. Choose
c. Click

screen.orientation (C landscape or portrait).

Insert equals operator.

Javascript requires a double equals sign (= =).


d. Enter

landscape

Result:screen.orientation = = landscape

JAVASCRIPT OPERATORS

FIELD TYPES
NUMERIC (IN PIXELS)
CHARACTER
LOGICAL

MIXED

The Javascript Operators are as follows:


And: && (double ampersand).
Equals: = = (double equals sign).
Or: | | (double pipe symbol).
There are three field types, numeric, character and logical. Here are some
examples of how to use them in expressions.
screen.width >= 300 && screen.height <= 600
screen.orientation = = portrait
device.isOpera
device.isOpera == true
(device.isOpera && device.orientation == 'landscape') || device.isSafari

Defining the actions for Rule #1


Two actions have been defined for the landscape
Rule, as follows:
ACTION #1
a. Click

Add Action.

b. Choose:
c. Select

Select active layout in a List control.

list1. (Click OK)

241

CHAPTER 5. OPTIMIZING THE UX


Choosing the Correct Device Layout: Understanding Responsive Layout Design

SELECT LIST LAYOUT


SETTINGS

PROPERTIES: SELECT ACTIVE LAYOUT IN A LIST CONTROL (LIST1)


Apply settings: Yes.
List Name: list1.
List Layout Name: Vertical.

ACTION #2

a. Click

Add Action.

b. Choose
c. Select

SHOW/HIDE PANEL HEADER/


FOOTER

Modify Properties on a Panel Card. (Click OK).

PANELCARD_1. (Click OK)

PROPERTIES: MODIFY PROPERTIES ON A PANEL CARD (PANELCARD_1)


Header: Show.

Defining Rule #2: Portrait


The name and expression for Rule #2 are:
Rule Name: portrait; Expression: screen.orientation

= = portrait

Defining the actions for Rule #2


The Actions for Rule #2 are the same as those for Rule #1, but with different
settings. This time the List is set to the layout named Vertical and the Panel Card
Header is displayed.
ACTION #1
SELECT LIST LAYOUT
SETTINGS

PROPERTIES: SELECT ACTIVE LAYOUT IN A LIST CONTROL (LIST1)


Apply settings: Yes.
List Name: list1.
List Layout Name: Vertical.

ACTION #2
SHOW/HIDE PANEL HEADER/
FOOTER

PROPERTIES: MODIFY PROPERTIES ON A PANEL CARD (PANELCARD_1)


Header: Show.

Viewing the JavaScript


Advanced users will be pleased to know that all Javascript is readily visible
and editable.
6. Right click on the top Action.
There are three tabs that show:
Current Action for Selected
Rule.
All Actions for Selected
Rule.
All Actions for All Rules.

Other helpful features


RULE SETS

242

You can save rule sets and then load them at a later time.
Save rule set and Load rule set.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

COPY PROPERTIES

a. Select

the property you want to copy.

b. Click

Apply property to multiple rules.

7. Close the genie and the component.


Now that you have the idea, lets get a bit fancier.

B. Creating a Complex Responsive Design


COMPLETED COMPONENT

The completed component is responsiveDesigncComplex (Misc Web Proj-

ect)
This example also uses Rules for Landscape and Portrait modes, but this time
we will show how it can be used with a Panel Navigator, a Panel Layout and
three Panel Cards.

1. WPCP > Misc Web Project: Open responsiveDesignComplex in


Design mode.
2. Go to Working Preview iPhone Horizontal & Vertical.
This time the display changes significantly.
3. Return to Design mode and go to Properties > Responsive Layout Settings and examine the settings.
This time there are six settings for each, including a separate Javascript Action.
JAVASCRIPT ACTION

4. Right click on the Javascript action and then click the All Actions for
All Rules tab to examine the code.
To add a Javascript Action, click Add Action and choose Javascript.
Define the code as desired.
5. Close the component when finished without saving.

243

CHAPTER 5. OPTIMIZING THE UX


Creating Tables Based on Controls: Creating a Single Table Based on Controls in a UX

Go To Alpha Video
UX_12 - 69
& 72

The second of these videos describe Responsive Layout design as illustrated


above. The first shows how to dynamically resize controls. Be sure to watch it
for additional information.
UX_12-69. Responsive Design - Dynamically Resizing Controls on
Orientation or Window Size Change - Understanding the FlexLayout
Container.
UX_12-72. Responsive Layout - Modifying the Design of a Component Automatically Based on the Device and Screen Orientation.

Creating Tables Based on Controls:


In Volume 1, we showed how to binds fields to an existing table. But, suppose you
dont yet have a table? Alpha Anywhere will save you the time and trouble of manually
going to the database to create one.
You can simply use the controls in your dialog as the basis for the fields in the table.
Creating the table in this manner automatically binds the data.
As always, this works with both SQL and DBF databases.
The sample components are in the Misc Web Project.
IMPORTANT NOTE

As you are aware, the UX Component was originally named Dialog Component. Certain items still carry the old name, such as videos. Another place is
in the Genie we will use in the upcoming exercises.
Its title has been updated, but, at this writing, the
rest of the content has not (yellow at left). Each
of the steps also contain multiple references to
Dialog or Dialog Component.
So that you can follow along, we have used the
descriptions as they are written today. Please
mentally substitute UX Component for Dialog as
you work through the steps and use other parts of
the Data Binding section.

A. Creating a Single Table Based on Controls in a UX


COMPLETED COMPONENT

The completed component is UX_BindSimple (Misc Web Project)


This section will focus on creating a single table for a UX without repeating
sections. The next will show how to create multiple tables for one that does
have repeating sections.

VIDEO! SEE P. 249

244

We suggest you begin by watching the first video in the series, do these exercises and then watch #2 & 3. They concentrate on data entry and show how to
use the debugging feature.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Creating the alias


Alpha Anywhere actually uses Aliases,
rather than table names to identify connections between components and
tables.
In the past, we have let Alpha Anywhere
assign them automatically. That worked
because Alpha knew what table to use.
In this case we dont yet have a table, so
we need to assign the Alias manually
and then name the table. It is recommended they be the same, but they can
be different.
This sample component is a copy of the Customers-Simple Template.
1. WPCP Misc Web Project: Open UX_BindSimple_Practice to open for editing.
2. UX Builder: Click Data Binding.
3. Click Create new table(s) to match the controls on your UX component.
Dialog Title: Make Table(s) for UX Component Controls Step 1 (upper).
a. Click

MULTIPLE ALIASES

the following tab: Step 1 - Define Table Aliases and Tables.

There may be times when you want to send the data to multiple tables.
For example, you might want to send the customer information to both the
invoice_header and customer tables.
If that is the case, click When would I need to specify more than one
table alias for more information.

SINGLE ALIAS

We just need one alias at this time.


b. Properties
c. Specify

> Table aliases: Click Add.

the table alias name: MyCustomersNew. (Click OK)

245

CHAPTER 5. OPTIMIZING THE UX


Creating Tables Based on Controls: Creating a Single Table Based on Controls in a UX

Binding the table fields


Since we have only one level in this UX (no Repeating Sections), the fields are automatically bound to the Table Alias that we just defined (yellow below).
Dialog Title: Make Table(s) for UX Component Controls. Step 1 (lower).

Defining the field specifications


The next step is to define the width of the table fields. This can be done one at a time
or by group. Well do a bit of both.
ONE AT A TIME

d. Select
e. Size

GROUP

f.

the CustomerId line.

(lower right): Enter 5.

SHIFT + DN ARROW: Firstname to Country.


Note the warning that you are setting properties in multiple sections at once (red font above).

g. Size:
ONE AT A TIME

Enter 30.

h. Select
i.

State: Change size to 2.

Select PostalCode: Change size to 5.


FIELD NAMES

You may change the field names, if desired. This will not
change name of the control.
FIELD TYPES

In this example, the fields are all Character type. If you have
other types in your application, adjust as necessary.

246

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Defining the table


4. Click the following tab (top of dialog):
Step 2 Define Table Properties.
Dialog Title: Make Table(s) for UX Component Controls. Step 2.
j. Table

Properties > Table name: MyCustomersNew.

k. Global

Table Properties > Table type: DBF.

Creating the table


We will use a DBF example here so you can quickly see the results of the
exercise within Alpha Anywhere. SQL users would choose that option instead
and specify the Connection String in the usual manner.
l. Click the following tab (top of dialog):

Step 3 Create Table(s)


Dialog Title: Make Table(s) for UX Component Controls. Step 3.

You have the choice of creating the


table now or saving the settings and
creating the table later. Well do it now.
m. Click

Create table(s).

Table create is confirmed.


n. Close

the confirmation dialog.

o. Click

Close to exit the Make Tables

dialog.

Viewing the table


5. Web Projects Control Panel: Click Control Panel (upper toolbar).
6. Tables/Sets tab: Double click on MyCustomersNew to see the fields.

Understanding primary keys


When you use the genie to create the table, as we have here, Alpha Anywhere automatically creates a primary key.

247

CHAPTER 5. OPTIMIZING THE UX


Creating Tables Based on Controls: Creating a Single Table Based on Controls in a UX

This Primary Key is Numeric and Auto-Increment.


It will be automatically updated each time a new record is added. It is not related in
any way to the CustomerId field.

Changing the field binding


At this point, the CustomerId field is just another field. The value would need to be
entered manually by the end user, as with any other field. You can change this, however.
At the UX level, you can connect the CustomerId control to the
MyCustomersNew_Id field.
In order to do this, the field types must match, so you must do one of the following:
Change the field type from numeric to character at the table level or
Change the control type from character to numeric at the UX level.
This decision will likely be based on whether you are using a SQL or DBF table.
Many DBF users prefer character type IDs.
SQL requires numeric.
IMPORTANT NOTE

RESTRUCTURE TABLE

We will change the field type because it illustrates a very important step that must be
taken after any table structure changes have been made to a database of any type, so
SQL users please follow along, too.*

7. Control Panel > Tables/Sets tab: Right click on MyCustomersNew:


Choose Restructure Table.
a. MyCustomersNew_Id
b. Save

REFRESH TABLE

field: Change field type to Character.

and close Restructure.

Since we have changed the structure of the table, we must refresh the table.

8. Return to the UX.


c. UX

Builder > Data Binding.

d. Click Refresh table information after editing table


schema(s).
e. Confirmation

CHANGE BINDING

dialog: Click OK.

Now we can change the data binding.


f. Go

to Design Mode.

PROPERTIES: CUSTOMERID
DATA BINDING

Field name: Choose mycustomersnew_id (C). (Click OK)

*. DBF users: There are additional steps that may be taken, such as deleting the CustomerId field in the table because it is no longer
relevant and renaming the primary field at the table level.

248

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

SUBMIT BUTTON EVENT

The component has a Submit button that is used to enter data into the table.
Before we can use it, we need to complete its Server-side Event. You should
already be familiar with this process, but heres a refresher, just in case.
a. Click

Events > Server-side.

b. Server-side

Events: Choose: afterDialogValidate.

c. Place

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

d. Click

Action Scripting.

e. Choose

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

Dialog Title: Specify Action Name


f.

Name: Accept the default.

g. Click

OK.

Dialog Title: Save Submitted Data to Tables


h. Save

Data > After submit action: Choose Edit record just submit-

ted.
i.

Display debugging info: No.*

j.

Click OK.

9. Save the component.


10. Go to Working Preview and enter a record.
11. Press Submit.
The CustomerId field is returned.

12. Return to the table and inspect.


13. Close the table.
14. Save the UX as MyUX_BindSimple and close.
Next, we will show how to use a UX to create multiple tables.
Go To Alpha Video D10

The videos for this section are:


Videos > Filter: Enter Dialog. Choose:
D10. Dialog Component - Data Binding - Creating Tables to Match the
dialog Layout. (3 videos). #1 Creates table. #2 & 3 Show data entry.

B. Creating Multiple Tables Based on a UX with


Repeating Sections
COMPLETED COMPONENT

The completed component is UX_BindRepSec. (Misc Web Project)


This section will build on the skills in the previous exercise by creating
tables for a UX that has a Master/Detail format. These components have
Repeating Sections and require tables with a one-to-many relationship.

*. For advanced users wishing to check their Xbasic code.

249

CHAPTER 5. OPTIMIZING THE UX


Creating Tables Based on Controls: Creating Multiple Tables Based on a UX with Repeating Sections

VIDEO! SEE P. 254

We suggest you begin by watching this video series.


To achieve this condition, Aliases and Tables are created for the Top Level
(parent) and for each Repeating Section (child). The records are connected by
Linking Field(s).
In this case, we have only one Repeating Section, but you could have as
many as you like.
1. Web Projects Control Panel > Web Projects: Open
UX_BindRepSec_Practice.
2. Examine the component to see the Repeating Section Container.
3. UX Builder: Click Data Binding.
4. Click Create new table(s) to match the controls on your UX component.
Dialog Title: Make Table(s) for UX Component Controls Step 1 (upper)
a. Tab:

Step 1 - Define Table Aliases and Fields.

Creating the aliases


Alpha Anywhere analyzes the UX and creates
a Logical Section for each part of the component. In this case, there are two:
<Top Level>: Customer name information
(yellow).
Container_2: The Repeating Section (aqua).
We will need an Alias for each.

b. Logical Dialog Sections:


Select <Top Level>.
c. Properties > Table Aliases:
Click Add.
d. Specify

the table alias name:


Enter my_customer_header.

e. Click

OK.

f. Logical Dialog Sections: Select

Container_2.
g. Properties > Table Aliases:
Click Add.
h. Specify

the table alias name:


Enter my_customer_address.

i. Click

250

OK.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Selecting the linking field


As expected for one-to-many relationships, there
must be a field that links the tables. This is commonly a unique ID field, but it could be a combination of fields, such as last_name + first_name.
We recommend auto-increment ID fields
because they assure the links will be unique, producing the proper result.
Dialog Title: Make Table(s) for UX Component Controls
Page 1 (upper)
j. Properties

> Linking Field(s): Click Select.

k. CustomerId

= Yes. (Click OK)

Defining the field specifications


The process for defining the table fields is the same as for a single table. In this case,
however, you have probably already figured out that you will need to select the Logical
Dialog Sections to access each set of fields.
Dialog Title: Make Table(s) for UX Component Controls Page 1 (lower).

l.

Logical Dialog Sections: Select <Top Level>.

m. Define

Field Specifications as shown above (see page 246).

n. Logical

Dialog Sections: Select Container_2.

o. Define

Field Specifications as shown above.

Defining the tables


Table names can be the same as the Aliases or different. We will keep them the same.
Again, we will use DBF files, but you could use SQL.
It should come as no surprise that tables will need to be identified for each section.
p. Click

the following tab (top of dialog):


Step 2. Define Table Properties.

251

CHAPTER 5. OPTIMIZING THE UX


Creating Tables Based on Controls: Creating Multiple Tables Based on a UX with Repeating Sections

Dialog Title: Make Table(s) for UX


Component Controls Step 2
q. Table Aliases:
Select my_customer_header.
r. Table

Properties > Table name:


Enter my_customer_header.

s. Table Aliases:
Select my_customer_address.
t. Table

Properties > Table name:


Enter my_customer_address.

u. Global

Table Properties >


Table type: Choose DBF.

Creating the table


v.

Click the following tab (top of dialog): Step 2. Create table(s).

Dialog Title: Create table(s)


w. Click

the Create table(s) button.

x. Click

OK to close the confirmation dialog.

y.

Click Close to exit the Make Tables dialog.

Defining the submit button code


As always, the next step is to define the Server-side code for the Submit button.

5. Repeat instructions at Submit button Event on page 249.


TESTING THE SETTINGS

6. Go to Working Preview.
a. CustomerId:

Enter 105.

b. Enter

your name and address information.

c. Click

Submit.

7. Go to Control Panel > Tables/Sets tab: Inspect the new tables.


Alpha Anywhere has created Primary Keys for both.

252

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

The Linking Field is CustomerId but, at this point, the value must be filled
in manually. I dont know about you, but that doesnt work for me! Fortunately, its a simple fix at the table level.

The screen shot above shows two test records.


Field #1 (pink) shows the Primary Keys inserted by the genie.*
CustomerId (yellow) is the Linking Field.
The first record had no entry in CustomerId at the dialog level.
It was filled in manually in the second.

Changing the linking field to auto-increment


This Linking Field follows the same principles of any other for a one-to-many relationship. The field entry in the parent table is automatically entered into the child
table(s).
Alpha Anywhere created CustomerId fields in both tables because we identified it as
the Linking Field (see page 251).
We need adjust only the parent.
Do not change the child to auto-increment because that would disallow data
entry. Alpha Anywhere needs to place the linking value in the field.
NOTE

This following is for DBF tables. For SQL, follow the usual procedure for
defining Auto-Increment fields at the table level.
8. Control Panel > Tables/Sets tab: Right click on my_customers_header. Choose Edit Field Rules.
9. CustomerID field: Field types > Extended Field Types: Choose AutoIncrement.
10. Save and close Field Rules.

TESTING

11. Return to the component and go to Design mode.


This clears the UX for a new record, otherwise you would be editing the current one.

12. Go to Working Preview.

*. See Understanding primary keys on page 247.

253

CHAPTER 5. OPTIMIZING THE UX


More UX Elements: Refreshing the table

a. Enter a new record, this time being sure to add multiple


addresses.
b. Click

Submit.

The next CustomerId is returned.

13. Go to the tables to see the entries.

The CustomerId field links each record.


Note that the Primary Key fields are auto-incrementing independently.
HIDING A CONTROL

You may wish to hide the CustomerId field on the layout.


a. Select

the control.

b. Properties

Go To Alpha Video D12

> Field Properties > Hide = Yes.

Here are the videos for this section.


Videos > Filter: Enter Multiple. Choose:
D12. Dialog Component Creating Multiple Tables to match the Structure of a Dialog Component that has one or more Repeating Sections. (4
videos)

More UX Elements:
Here are some additional notes that you will find useful. Be sure to look them over.

Refreshing the table


VERY IMPORTANT

We put this one first because you need to remember it.


If, at any time after initially binding the data, you add fields to the table or change
the data type of fields, you must refresh the table at the dialog level.
a. Dialog
b. Click

254

Builder > Data Binding.

Refresh table information after editing table schema(s).

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Viewing 1000s of Rows in a List


COMPLETED COMPONENT

The completed component is listVirtualizationDemo (List Control Web


Project.)

LIST VIRTUALIZATION

Huge lists of data are easily handled by using List Virtualization. It optimizes
the list for a large number of rows by permitting the rapid display of long lists
even thousands of records. The rows are displayed in small batches, with the
each batch coming up extremely quickly. You can also add a scroller that locates
individual records in the entire list.
See Adding a Scroller to a List on page 257.

VIDEO! SEE P. 256

The video has a companion component. We have downloaded it and will use
it for the demonstration.

Virtualizing a list
This exercise will demonstrate the speed with which 10,000 rows of data can
be loaded into the list.
The sample component has a button that generates random data.
The data is then added to two
lists. The top list has been Virtualized. The bottom list has not.
The purpose is to illustrate download time and navigation for
both.
The sample component generates
random data to simulate a long
list. The video demonstrates with
1,000 rows first and then moves
to 100,000. We tried 100,000 and
the virtualized loaded immediately, but the non-virtualized took forever. As a matter of fact, we finally gave
up and had to use Bill Gates three finger salute to close Alpha Anywhere and
start over.*
We found 10,000 records demonstrates the feature well, so we have modified
the component accordingly at:
JavaScript functions > Row 28.
var count = 10000
HOW IT WORKS

The principle to understand here is that the virtualized list loads only a few
rows at a time (50 in this case). The non-virtualized must load every record.
1. WPCP > List Control Web Project: Open listVirtualizationDemo in

*. If you are in need of a break, Google Bill Gates 3 finger salute, select the ibtimes.com article and watch two amusing videos.
http://www.ibtimes.com/control-alt-delete-bill-gates-admits-windows-three-finger-salute-was-mistake-video-1411396.

255

CHAPTER 5. OPTIMIZING THE UX


More UX Elements: Viewing 1000s of Rows in a List

Design mode.
2. Go to Working Preview.
3. Click Generate Random Data.
Notice: 10,000 rows are generated. (Click OK)
4. Click Populate List (virtualized).
Population occurs instantly.
5. Click Populate List (not virtualized).
Be patient it will load, but it does take 30 seconds or so.
6. Scroll through the records in the top list.
The Virtualized list has a Next after the
first 50 rows.
Number of rows defined at Size below.
7. Click Next to bring up the next 50 rows.
Comes up instantaneously.
8. Scroll up to see Previous.
This was set to 10 records.
Defined at Offset below.

Heres where to go for the Virtualization settings.

SETTINGS

9. Return to Design mode.


10. [listVirtualized]: Go to the List Builder > List Properties tab.
LIST VIRTUALIZATION
SIZE

OFFSET

Virtualization type: Dynamic.


Size is the number of rows that will appear in a single page.
Size: 50.
Offset is the number of records from the previous page that will remain on
the page after Next is clicked. Read the Alpha notes for a full explanation.
Offset: 10.
11. Examine the other settings and then click Cancel to close the List
Builder without changes.
12. Close the component.

Go To Alpha Video
UX_12-102

256

Videos > Filter: Enter Virtual. Choose:


UX_12-102. List Virtualization - Optimizing the List for a Large Number of Rows.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Adding a Scroller to a List


A scroller can be added to any list. It is especially useful for long lists of data
(see Viewing 1000s of Rows in a List above).
The scroller can be
defined to show one or
more fields in the record,
such as CompanyName
plus ContactName. Be
careful not to give too
much information, however. It is best to aim for
quick scan readability.
VIDEO! SEE P. 257

The video has a companion component that we have downloaded.


1. WPCP > List Control Web Project: Open listScrollerDemo in Design
mode.
2. Go to Working Preview > iPhone 5 (horizontal).
3. Slide the scroller to view the company names.
4. Release to go to a given record.
Heres where youll find the settings.

SET UP

5. Return to Design mode.


6. [listCustomers]: Go to the List Builder > List Properties tab.
LIST SCROLLER

Has scroller: Yes.


Scroller message type: Template.
Scroll message template: Click the button.
The scroller message is defined with HTML plus
placeholders.
{CompanyName} will produce the name of the
company as above.
{CompanyName] Contact:{ContactName] will produce the scroller at left.

Scroller customization: Click the button for a full range of options.


7. Click Cancel to close the List Builder without changes.
8. Close the component.
Go To Alpha Video
UX_V12-103

Videos > Filter: Enter scroller. Choose:


UX_V12-103. Using the List Scroller to Move Through the Rows in a
List.

257

CHAPTER 5. OPTIMIZING THE UX


More UX Elements: Hints for Data Binding

Hints for Data Binding


Here is a collection of items that you will find useful when the controls are
bound to data in a table.
See also Data Connection: Comparing Data Binding & List Detail View
Methods on page 207.

Reviewing or changing data binding


You can review the Data Binding at any time. You can also change the mapping.
VIEW BINDING FOR A SINGLE FIELD:

1. Open the UX in Design mode.


The examples here apply to any component.
2. UX Menu: Click Controls.
PROPERTIES: STATE
DATA BINDING

Table alias: clients.


Field name: state.
CHANGE BINDING FOR A SINGLE FIELD:

To map the control to another field in the table:


a. Field

name: Click the button and choose desired field.

VIEW / CHANGE BINDING FOR MULTIPLE FIELDS

You can also review and/or change a group of binding settings.


a. UX

Menu: Click Data Binding.

b. Click

Bind the controls on your dialog to one or more existing tables.

c. Click

one of the following:

Specify Tables.
Bind Tables to Repeating Sections.
Bind Dialog Controls to Table Fields.

Clearing the data binding


If you want to remove the data bindings, do the following:
a. UX

Menu: Click Data Binding.

b. Click

258

Remove all Data Binding settings. (bottom of list)

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

When you copy controls to the clipboard, all attributes, including mapping are honored. If you want to use the controls for another purpose, you can use the above to clear
the bindings.

CLIPBOARD

Adding and binding new controls


It is very likely that you will add controls to the UX after you have bound the data.
Fortunately, Alpha Anywhere makes it very easy to add new fields and update the bindings.
If you have an existing table that has the field to which you want to bind, the job is
pretty straightforward. If, on the other hand, the table doesnt have the proper field, it
takes a bit more thought.
EXISTING TABLE /
HAS FIELD

If you are working with an existing table that already has the field to which you want
to bind the control, do the following:
a. Add

the control to the UX.

In this example, we have named the control: MyNewControl.


DATA BINDING

PROPERTIES: MYNEWCONTROL
Table alias: Click the button and choose the table.
Field name: Click the button and choose the field.

EXISTING TABLE /
NEED FIELD

If you have used the UX to build the table, you will need to add the new field(s) to
the table, as well as bind them.
Use this method for any existing table where the Field Properties > Data
Binding section (above) is not available for the control.
Be sure to close any open tables before doing these steps.
a. Web
b. UX

Projects Control Panel: open UX_BindRepSec for editing.

Menu: Click Controls.

c. Select
d. Add
e. UX
f.

the Firstname control.

a new control named MyNewControl.

Menu: Click Data Binding.

Click Create new table(s) to match the controls on your Dialog component.

g. Go

to the Step 1. Define table tab.


Alpha Anywhere recognizes the new field (yellow).
It will appear in the proper Logical Section, in this
case, <Top Level> (aqua).
h. Fill

in the following for the right pane:

Table Alias: Click Set and choose the table.


Size: Enter field width.
i. Click

the Step 3. Create Table(s) tab.

j. Click

Create Table(s).

If the receiving table(s) are still open, you will get a warning.
Click Save Settings and exit the genie.

259

CHAPTER 5. OPTIMIZING THE UX


More UX Elements: Displaying a Video or Web Page

Close the tables and then return to Create Table.


Here is confirmation dialog that
was returned when we added the
new field to customer_header.
Since no new fields were added to
customer_address, it was found,
but not modified.

Assigning a primary key


It is best to assign the Primary Key for the data bound UX, rather than leaving it to
Alpha Anywhere. Heres what happens if you do not specify.
DBF tables: When the primary key is left blank,

record number (recno()) is used as the primary key.


SQL tables: The first column with an auto-increment field is used.
For SQL tables that have more than one column in
the primary key, the ORDER in which the columns
are selected IS IMPORTANT.

Primary Keys are defined at:


UX Menu > Data Binding: Click
Specify Primary Keys and Sequences.
Advanced users: You can use code to assign the Primary
Key manually.

Displaying a Video or Web Page


COMPLETED COMPONENT

IFRAME CONTROL

The completed component is UX_IFrame (Misc Web Project).


IFrame stands for Inline Frame.* If you add this control to your UX, it places a box
on the layout that can be connected to a URL. The control is located at:
UX Menu > Other Controls: IFrame.

*. a computer-friendly video format designed by Apple to optimize the process of working with video recorded with your camera
or camcorder. http://support.apple.com/kb/HT3905. 9.16.2012.

260

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

To show a video - or any other web page - all


you need is the URL and the rights to use the
video. (YouTube videos are off limits.) You can,
however, test with Alpha Anywhere videos.
We have set up a UX so you can see how it
works.
a. WPCP Misc Web Project: Open
UX_IFrame in edit mode.
b. Open

in a Browser.

The video will run in Working Preview, but it


will be very small and you will have difficulty
following it. The browser shows it in the full
defined size.

This UX plays Video #D44 that describes


the IFrame features (see below).
FIREFOX FIREBUG

It also describes using Firefox Firebug, an add-on that you may find useful.*
Non-programmers will find it a bit on the technical side, but we think its still
worth watching.
c. To

start the video, click the arrow in the usual way.

d. After

watching, return to the component in Design Mode to review


the set-up.

These settings are very basic. Refer to the video for a more elegant set-up.
IFRAME PROPERTIES

PROPERTIES: [IFRAME]
IFrame URL: http://www.ajaxvideotutorials.com/V11Videos/DialogComponent_WorkingWithIFrames.swf
Style: height: 16in; width: 12in;
Settings are found at Style Editor > Position.
Size displays properly in the Browser, but not in Working or Live Preview.

Go To Alpha Video

Have fun experimenting with this one.


Videos > Filter: Enter iframe. Choose:
D44. Working with an IFrame on a Dialog.

*. To get Firebug, open Firefox. Go to Tools > Add Ons. In the Search box (upper right corner), enter Firebug.

261

CHAPTER 5. OPTIMIZING THE UX


More UX Elements: More Good Stuff

More Good Stuff


Organizing a complex UX component
If your UX consists of a large number of fields, you can organize
them into pages. Alpha Anywhere makes this very easy. It is
well described in the video.

Go To Alpha Video
Videos > Filter: Enter Dialog. Choose:
D9. Dialog Component - Genie Style.

Recalculating the HTML and JavaScript


Recomputes the HTML and JavaScript that the control will render. (For advanced
users.)
a. UX

Menu > Controls: Click Menu (toolbar above list).

b. Choose

Recalculate Selected or All Controls.

Internationalization
Go To Alpha Video

It is quite simple to take your component to the world with language and text
dictionary tags. The process is quite simple and is described in this video.
Videos > Filter: Enter International. Choose:
c. UX_V12-98.

Internationalization - Language and Text Dictionary

Lookups
You can enhance your UX with Grid features, such as Lookups.
Lookups are discussed in Volume 1 of this series.
Go To Alpha Video

The first part of this video demonstrates lookups in a UX component.


Videos > Filter: Enter Dialog. Choose:
D5. Dialog Component - Copying Controls from one Component to
Another.

Validating data entries


You will be designing for a variety of end users who are, more often than not,
untrained. That means validation for data entry is critical to the successful project.
We discussed this topic in Volume 1 of this series.

As a quick reminder, rules can be defined:


Declaratively (choose selections from pre-defined lists). Great for non-programmers and often faster for programmers.
Using code either JavaScript for client-side or Xbasic for server-side. You
programmers will have a field day!

262

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Go To Alpha Video

There are 10 yes, count them 10 videos on using validation in dialogs. It will take
about 50 minutes to watch them all, but it will be worth it.
Videos > Filter: Enter Validating. Choose:
D8. Dialog Component - Validating Data.
d.

Tags

Permissions and security


You can apply security settings to the UX
component. Security is fully detailed in Volume 1.
e. UX Menu > Data Binding: click
Permissions and Security.

PhoneGap
PhoneGap is a mobile application development tool that can be used in conjunction with Alpha Anywhere.While it is beyond the scope of this manual to
describe how this is done, there are several instructive videos on the topic.
Go To Alpha Video
UXPG_V12-2

See the following video for an introduction to using PhoneGap to create your
own native shell for a mobile application.
Videos > Filter: Enter PhoneGap. Choose:
UXPG_V12-2. How to Build PhoneGap Projects.

263

CHAPTER 5. OPTIMIZING THE UX

Notes:

264

Chapter 6.

Masterful Menus

Make it easy to find


Youve worked hard to define the data, now its time to show it off. These menu systems will gently guide your users in the right direction with friendly formats.

CHAPTER 6. MASTERFUL MENUS

What youll find here


Topic

Description

Page

How the Chapter is Organized

267

Menus for Mobile Applications:

269

A. Understanding the Menu Builder

Buttons guide the user from one element to


another.

270

B. Building a Menu with Docked Panels

Menu selections fly out. Design can be simple


or complex.

275

C. Understanding Split View Menus

If the window size is large enough, the menu is


shown with a panel, otherwise it is docked until a
button is tapped.

282

Menus for Web Applications:

266

289

A. Understanding the Tabbed UI Builder

Quick and easy. Website in a component! Recommended!

289

B. Understanding the Page Layout Builder


component

Use an A5w page to organize like items. Can be


put in Tabbed UI.

303

C. Understanding the Navigation System

Places a horizontal or vertical bar from which


child menus drop down or fly out.

309

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How the Chapter is Organized


This is where it all comes together. You will find these mobile
and web menus just what you need to organize all your data.

And. Its all about presentation. A fine restaurant goes the


extra mile to deliver a plate to your table that looks delicious.
You are sold before you take the first bite.

And. Alpha Anywhere takes presentation seriously with elegant answers that combine your selection of components, web
pages and/or reports into tidy packages. This chapter presents
your recipe for success!
WEB VS. MOBILE

When it comes to menus, there is a definite split in technique between what


works best for web applications and what works best for mobile where its all
about efficiency and touch.
For example, the Tabbed User Interface (Tabbed UI) is our all time favorite
because it is so easy to set up and functions brilliantly, is a champ when it comes
to web applications, but falls short in performance in mobile apps. Not to worry,
however, because the UX has its own menu system that will give mobile users
just what they expect and then some.
With this in mind, we have split this chapter into separate sections, Mobile
and Web. Heres some advice deciding which to use.
Mobile only developers: Use the UX component menu systems.
Web only developers: Use the Tabbed UI, Page Layout or Navigation System menus.
Combination developers: Consider two systems.
Web: The Tabbed UI is really easy to set up and can be used for all
component types and web pages.
Mobile: The UX component menus take more effort to set up, but
theyre what you need for mobile.
Define who gets what with the Responsive Layout system that we
described in the previous chapter (page 238).
Undecided: Know you want web, but are undecided about mobile?
Begin with the Tabbed UI. It will handle all component types, including the UX.
You could also begin with the UX Menu Builder because it uses buttons, but it is not as sophisticated as the Tabbed UI.
The bottom line is mobile menus can always be added later.

UX MENUS

Mobile. Mobile menus are designed with the UX component. We will show
you how to use the Menu Builder and other quick start aids. Then well examine
a complex system with fly out panels and some more interesting methods we

267

CHAPTER 6. MASTERFUL MENUS


How the Chapter is Organized

think you will find fabulous. Once you understand the principles, we know you
will be off and running with your own design. (See styles below).
TABBED UI

PAGE LAYOUT BUILDER

NAVIGATION SYSTEM

Web: Organizes components, pages and reports with buttons and tabs. This
builder even adds a Home page. Easiest & fastest.

Web. Creates complex page layouts


for grids, pages and reports. You can
tuck them inside Tabbed UIs, too.

Web. This component creates


a menu bar that navigates
between pages. It can be set
up to go across the page or
down the side.
One thing is for sure no
matter where you plan to send
your
application,
some
mighty pretty packaging
awaits. Yum!

268

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Menus for Mobile Applications:


We will begin with menus for mobile applications because weve been working with the UX up to now and it seems like a natural continuation. If you do not
plan to develop mobile applications at this time, you can skip to the web menus
(page 289).
In Volume 1, we showed how to create a menu that uses a combination of
parent and child UX components.

This time we will work with three more types.

MENU BUILDER

Above left: The Menu Builder (left above) uses buttons to access components, reports, etc.

DOCKED PANELS

Above right: The opening screen displays a panel card with button(s) in the
header. The menu options are docked.
If there is enough room to display them (like in iPad) they will appear.
If not enough room (like in iPhone), they will be hidden until the button is pushed.
When buttons are pushed, menus either push the panel card out of the
way or display on top of the original panel.

269

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Understanding the Menu Builder

SPLIT VIEW

Below: The Split View menus (below) also use docked panels and may or
may not have panels. This exercise also shows how to add icons with the
included Font-Awesome* Library. Code can also be applied for menu selections.

While all these menus could be used in a desktop / mouse situation, most are
really designed for touch enabled devices. Heres the directory for this section:
A. Understanding the Menu Builder on page 270.
B. Building a Menu with Docked Panels on page 275.
C. Understanding Split View Menus on page 282.
See also:
Volume 1, Chapter 3: Creating a UX Menu.

A. Understanding the Menu Builder


COMPLETED COMPONENT

The completed component for this section is MenuBuilder (Menus Web

Project).
The Menu Builder is tucked inside the button click or onClick event. It
can be defined with either Action Scripting, a JSON string or an Xbasic
Function.
VIDEO! SEE P. 282

We will show how to do the first and let the videos explain the more
advanced features.

*. Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just
about whatever you want. Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: Font Awesome by
Dave Gandy - http://fontawesome.io.
http://fortawesome.github.io/Font-Awesome/license/
9.5.2014
. Available at www.LibertyManuals.com.

270

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

These menus build on skills weve used previously, so you shouldnt have
any trouble creating them. The trick is not losing your place in the nested Action
Scripting actions. Well identify the dialog titles as we go along and, as before
in these multi-layered situations, we hope everyone winds up in the same place
at the end!
ALSO AVAILABLE FOR GRIDS

This builder can be used with Grids, as well as UX components.


Our menu will open a couple of filtered reports, a grid and another UX. In
most cases, whatever element you plan to access must be part of the current web
project. To that end, we have borrowed a SQL report, the grid and the UX
from other web projects by copying them to the Menus Web Project. The exception is DBF reports.* They just need to be in the current database, as you will
see. Heres what well be using for this exercise:
Reports:
NJ Customers: Control Panel > Reports tab > ClientsList (filtered
DBF report).
MA Customers: WPCP > Menus Web Project > Reports > CustomersByState (filtered SQL report).
Components:
UX: WPCP > Menus Web Project > AbsoluteLayout.
Grid: WPCP > Menus Web Project > ClientRegistration.

Creating the menu


As we said above, the Menu Builder is defined inside the click or onClick
event of a button. We will open the completed component first so you can see
how it works. Then we will create a new one from scratch.
1. WPCP > Menus Web Project: Open MenuBuilder in Design mode.
2. Go to Working Preview and click the Menu button.
3. Experiment with some of the menu options to open the reports and
components.
4. When finished, close the component.
5. WPCP > Menus Web Project: Create a new, blank UX component.
6. Save as MyMenuBuilder.
7. Properties > Style name: Choose MobBlue.
8. Controls > Other Controls: Add a Button control.
BUTTON PROPERTIES

PROPERTIES: [BUTTON]
Button text: Menu.

*. SQL reports defined at the database level also fall into this category. In most cases, however, it is best to define reports based on
SQL data at the Web Project Level.

271

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Understanding the Menu Builder

JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)

click: Click the button.


a. Action
b. Filter

Javascript > Add New Action.

list: Enter Menu. Choose: Menus. (Click OK)

Dialog Title: Action Javascript - Dropdown Menu


c. Method
d. Menu

or defining menu: Menu Builder.

definition: Click the button.

Dialog Title: Tree Data Genie


e. Create

a Tree by adding siblings and children as at left.

Defining the leaf items


Heres where the Action Javascript gets tricky because there are so many layers. Well show how to do the first and then you can complete the others. Before
we start, examine the properties options available for each leaf.
Icon: Choose from built-in or user-defined icons.
Security: Full security options are available.
Show/Hide: You can define Server-side show/hide expressions.
LEAF PROPERTIES

PROPERTIES: NJ CUSTOMERS
onClick: Click the button.
Dialog Title: Edit Action
a. Click

Create/Edit Javascript Actions.

Dialog Title: Define JavaScript Actions


b. Click

Add New Action.

c. Specify

a unique name for the action: Enter NJ Cust. (Click OK

twice)
d. Select

NJ Cust and click Edit Action.

Dialog Title: Edit unbound Event


e. Action
f.

Javascript > Add New Action.

Filter list: Enter report. Choose Open a Report, Label or Letter


layout. (Click OK)

Dialog Title: Action Javascript - Open a Report, Label or Letter layout


g. Report

name: Click the button.

Dialog Title: Report Print Genie


h. Click

Select.

Dialog Title: Select Layout


i.

Select ClientsList.

Three of the available reports are based on


DBF data in the current database (aqua). The
fourth is a SQL table and is part of the current
web project (yellow). We will use a DBF table
here and the SQL one for MA customers.
j.

272

Click OK.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Report Print Genie


k. Filter:

Click Build and define as follows:

state is equal to nj (Click OK)


l. Order:

Click Build and define as follows:

Sort by: last_name. (Click OK twice)


Dialog Title: Action Javascript - Open a Report, Label or Letter layout
m. Initial

View: PDF.

HTML option does not work with DBF reports.*


n. Click

OK.

o. Comment:
p. Save

Open ClientList report, State = NJ. (Click OK)

the Action Javascript.

Dialog Title: Define Javascript Actions


q. Click

OK.
Dialog Title: Edit action
r. Click

Run a Javascript Action.

Dialog Title: Select Javascript Action to Run


s. Choose

NJ Cust. (Click OK)

Dialog Title: Edit action


t. Click

OK.

Dialog Title: Tree Data Genie

Define other leaves as follows:


u. MA

Customers:

Action name: MA Cust.


Use Action Javascript to open a report as above.
Report name: CustomersByState.
Filter: Bill_State_Region = MA
Order: Lastname.
v.

UX:
Action name: Open UX Component.
Use Action Javascript to open a UX component.
Component name: AbsoluteLayout.

w. Grid:

Action name: Open Grid Component.


Use Action Javascript to open a Grid component.
Component name: ClientRegistration.
x. When

finished, Click OK to close the Tree Data Genie dialog.

*. If you do choose HTML for a DBF report, at runtime you will get a somewhat mysterious error message saying that the report must
be Layout Table style. Making this correction does not clear the error message, but changing the initial view to PDF does.

273

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Understanding the Menu Builder

POINTER ICON

The Menu Builder has two styling options, with and without pointer icon(s).
The effect is dependent on the style of the UX itself.
If the style is MobBlue or a similar style, the option will add a pointer
to the button (below left).
If you are using either IOS or IOS7 style, the pointer will appear
regardless of the Menu Builder setting.

Dialog Title: Action Javascript - Dropdown Menu


y.

Menu Properties > Has pointer icon: Yes.


See notes above. IOS and IOS7 always have pointers.

z.

Pointer position: Auto.


Other options are Top, Bottom, Left and Right.

aa. Menu

Animation > Animation: Yes.

Full selections of animation styles, speeds, etc. is available.


ab. Click

OK.

ac. Comment:
ad. Save

Define Menu Builder.

the Action Javascript.

Hopefully, you will now be at the UX builder.


9. Save the component and go to Working Preview and examine the
results of all your hard work!
MOBILE DEVICES

As always, if you plan to use this for mobile devices, add a Panel Card in the
usual manner.
ACTION JAVASCRIPT EDITING SHORTCUT

This one place where the Javascript Actions shortcut can really
come in handy if you need to make some edits. Weve seen it
before, but it is worth a review here.
10. Return to Design mode.
11. Click Menu (above controls list) and choose Javascript
Actions Editor.
The existing actions are displayed and can be edited, deleted or
renamed from here.

274

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

CAUTION

Keep in mind that if you rename here, it


will affect connections made elsewhere.
For example, renaming one of these connections means the Javascript in the Tree
Data Genie will no longer be valid unless
you go in and change the code to the
renamed action.
This editor is ideal, however for editing the
action itself.
12. Close the component.
Videos > Filter: Enter Menu. Choose:

GO TO ALPHA VIDEO
UX_V12-19, 20, 21

UX_V12--19. Menus - Displaying pop-up menus when the user clicks a


button.
UX_V12--20. Populating Menus using a JSON String or an Xbasic
Function. Advanced developers.
UX_V12--21. Menus - Advanced features - menus can include forms,
buttons, etc. Advanced developers.

B. Building a Menu with Docked Panels


COMPLETED COMPONENT

The completed components for this section are jQueryDemo, jQueryDemo-

Simple, RichNavigation (Menus Web Project).


This menu style uses a list that comes into sight with the click of a button or
swipe action and moves out of the way when the selection has been made. It is
especially good for small devices like phones because the menus do not take up
any screen real estate when they are not in use. This type of menu employs
Docked Panels.*
Docked Panels can have
two different behaviors.
They can either push the
Panel Card out of the
way or they can move
over top of it. This exercise will demonstrate
both.
HOW IT WORKS

The initial view shows only the main Panel Card. When the user clicks a button in the header, the docked Menu moves into view. He/she then selects an item
on the list and is taken to the specified Panel Card.

*. See Understanding Docking on page 151.

275

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Building a Menu with Docked Panels

We have downloaded the sample components for you, but there is a step you
need to take in order for it to display properly.
SLATE STYLE

The component uses a Style called Slate. At this writing, it is still in development, but can be used anyway because it was provided in your download package.
First, check to see if it is in your Style selection.
a. Open

any UX component in Design mode.

b. Properties

> Style name. Click the button.

See if Slate is listed.

If not, do the following:


a. Go

to the following location:

c:Alpha_WebMobileBook_3.0_Volume2 ABC_WebMobile_Less
ons \ Samples.
b. Copy

the Slate folder to the following location:

c:\ProgramFiles (x86) > a5v12 > CSS.

If there is already a folder under that name, DO NOT overwrite it because the
existing one should be the latest version.
c. Return

to Alpha Anywhere when you are finished.

If you prefer, you can choose another Style for the component at:
UX Builder > Properties > Style name.
VIDEO! SEE P. 282

Three components came with this explanatory video. When you look at the
Menus Web Project, you will see that we have downloaded all of them for you
jQueryDemo, jQueryDemoSimple and RichNavigation. Since the last has all
the settings, we will go directly there. The others are simpler versions of the
same thing, as you will see in the video.*
We will examine the settings for this component without making changes.
1. WPCP > Menus Web Project: Open Rich Navigation in Design mode.
2. Go to Working Preview iPhone Horizontal.
If your display does not match the style shown in the screen shots, it is
likely that you have not added the new Style folder. See Slate Style
on page 276. You may, of course, use a different style, if you wish.
Before beginning the following steps, note that we are at Main Panel Card 1.
(Refer to the above screen shots.)
3. Click the Left Menu button.
The menu slides in and pushes Main Panel Card 1 out of its way.
4. Select Item2.
Main Panel Card 2 is now in view.

*. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
http://en.wikipedia.org/wiki/JQuery

276

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

5. Click Right Menu.


The menu comes out on top of the first panel card.
6. Select Item4.
Main Panel Card 4 is now in view.
Now well see how this was set up.
7. Go to Design mode.

Understanding the Panel Layouts


Notice that there are two Panel Layouts, TopPanel and CenterPanel.
TOPPANEL

TopPanel contains a Panel Card with a List called leftmenu. The List contains Static data with the items we saw
in step 3.
CENTERPANEL

CenterPanel contains:
A Panel Navigator

(Programmatic) with a
Header that contains the
Left- and Right Menu
buttons (pink).
A Panel Card with a
List called rightmenu
(yellow). This List contains the Static data we
saw in step 5 on
page 277.
CenterPanel also has
four more panel cards, each of which contains a Static Text
Object. They are entitled:
MAINPANELCARD_1.
MAINPANELCARD_2.
MAINPANELCARD_3.
MAINPANELCARD_4.

Configuring the menu lists


For illustration purposes, both Lists are defined the same way.* They are
based on Static data that is written in the usual manner. We do want to call attention to the freeform layout, however, because it is different than others weve
seen up to this point.
*. In a real life situation, the left and right menus would be different unless, for some reason you needed two identical menus.

277

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Building a Menu with Docked Panels

8. Leftmenu and Rightmenu Lists: Go to the List Builder > Data Source
tab. (Properties > List Properties > List Properties)
a. Static

Data: Click the button.

There are five items, Menu, Item1, Item2, Item3 and Item4, all
on separate lines. The top line, Menu is the field name.

9. Go to the List Properties tab > Layout Properties:


b. Layout

type: Freeform.

c. Freeform

type: Vertical.

10. Go to the List Layout tab.


The {Menu} Placeholder is in the Template workspace.
11. Close the List Builder without changes.

Configuring buttons for docked panels


Unlike others weve encountered, buttons that open/close
Docked Panels do not have click nor onClick events. Instead,
they are configured in the Panel Layout properties.
In the following explanations, we will refer to the docked
panels as Menu Panels.
DOCKED PANEL
DISPLAY METHOD

Docked panels can be displayed in three ways:


Over: Displays Menu Panel on top of the existing panel.
Slide: Menu Panel shifts existing panel to the right.
Push: Menu Panel pushes existing panel to left, right, top or bottom
depending on the flow direction.

DOCK LOCK FLOW

If this option is selected (default), the Menu Panel becomes modal when
it displays. This means other panels are locked so the user cannot interact with
them. Clicking on a locked area will return the Menu Panel to a docked state.

DOCKED PANEL
CONTROLLER BUTTONS

These are the Left Menu and Right Menu buttons that open the docked panels. Their click actions are set here.

PANEL LAYOUT PROPERTIES

PROPERTIES: [PANEL LAYOUT: TOPPANEL] (LTR)


Layout flow direction: LTR.
Docked panel display method: Slide.
Dock lock flow: Yes.
Docked Panel controller buttons: Configured as follows:

278

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

a. Click

the button

b. Click

Add Button Controller.

c. Button

Id: Choose
LeftMenuButton.

PANEL LAYOUT PROPERTIES

d. Panel

Id: Choose LeftMenu.

e. Click

OK twice.

PROPERTIES: [PANEL LAYOUT: CENTERPANEL] (LTR)


Layout flow direction: LTR.
Docked panel display method: Over.
Dock lock flow: Yes.
Docked Panel controller buttons: Configured as follows:
a. Click

the button.

b. Click

Add Button Controller.

c. Button

Id: Choose RightMenuButton.

d. Panel

Id: Choose RightMenu.

e. Click

OK twice.

Configuring the docked Panel Cards


We need to specify the size of the docked panel cards and tell Alpha Anywhere where to store them.
Specifies the collapse location as before or after the current panel card.
Can be specified for auto, portrait and landscape.
Before and after are determined by the direction of the layout (LTR,
TTB, etc.)

DOCK

PANEL SIZE AND


DOCK OPTIONS

PANEL SIZE AND


DOCK OPTIONS

PROPERTIES: [PANEL CARD: LEFTMENU]


Layout size: 200px
Dock: Collapse-before.
PROPERTIES: [PANEL CARD: RIGHTMENU]
Layout size: 200px
Dock: Collapse-after.
Now were in for a bit of code.

Configuring the menu selections


Next, we need to define which menu selections open which Panel Cards.
This does require a small amount of coding. The same process is used for both
the leftmenu List and the rightmenu List. Watch the video for full explanations
of the code.
12. Leftmenu List: Go to the List Builder.

279

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Building a Menu with Docked Panels

LIST EVENTS SHORTCUT

A quick way to open events for the list is at the bottom of the List Builder.
13. Click List Events (lower left).

It is the same as going to:


List Properties tab > Javascript - Run Time > More Events
By default, only the Defined Events appear. Uncheck (red circle) to see all
events.

ON CLICK EVENT

14. The following has been entered:


selectMenuItemLeft(this.selectionData[0].Menu);
selectMenuItemLeft is the name of a Javascript function (coming up).
Menu is the name of the field (see step a on page 278).
this.selectionData[0] identifies the current row. (Click More Help to
learn more.

15. Close the List Builder without changes.


16. Repeat for the rightmenu List. This time the code says:
selectMenuItemRight(this.selectionData[0].Menu);
17. Close the List Builder (no changes).
Next, we will look at the JavaScript.
18. UX Menu: Go to Javascript functions.
JAVASCRIPT FUNCTION

This code defines what happens when a Panel Card is selected.


pObj.hideDock(); re-hides the Docked Panel after the selection is made.
function selectMenuItemLeft(item) {
var pObj = {dialog.object}.panelGet('TOPPANEL');
pObj.hideDock();
if(item == 'Item1') {dialog.object}.panelSetActive('MAINPANELCARD_1');
if(item == 'Item2') {dialog.object}.panelSetActive('MAINPANELCARD_2');
if(item == 'Item3') {dialog.object}.panelSetActive('MAINPANELCARD_3');
if(item == 'Item4') {dialog.object}.panelSetActive('MAINPANELCARD_4');

function selectMenuItemRight(item) {
var pObj = {dialog.object}.panelGet('TOPPANEL');

280

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

pObj.hideDock();
if(item == 'Item1') {dialog.object}.panelSetActive('MAINPANELCARD_1');
if(item == 'Item2') {dialog.object}.panelSetActive('MAINPANELCARD_2');
if(item == 'Item3') {dialog.object}.panelSetActive('MAINPANELCARD_3');
if(item == 'Item4') {dialog.object}.panelSetActive('MAINPANELCARD_4');

As we said earlier, this example uses the same definition for both Lists. Normally, you would specify them individually. You can simply cut and paste the
code from the sample and modify to match your menu selections.

Configuring the swipe action


In addition to opening the docked panel menus with the button, a swipe
action has also been defined. Sometimes we found it was a bit difficult to swipe
with the mouse. Perhaps you will have a different experience. In any case, it will
likely be much more satisfactory with a finger.
19. Go to Working Preview.
20. Swipe left and right to bring in and dismiss the menus.
21. Return to Design mode.
JAVASCRPT

PROPERTIES: PANEL LAYOUT: [TOPPANEL] (LTR)


onSwipe: Click the button and enter the following:

if(e.swipeDirection == 'left') {
//if left dock is currently hidden, then show right dock, otherwise hide the left dock
var pObj = {dialog.object}.panelGet('TOPPANEL');
if(pObj.state.dockPanelShown) {
//Hide left dock panel
pObj.hideDock();
} else {
{dialog.object}.panelSetActive('RIGHTMENU');
}

} else if(e.swipeDirection == 'right') {


var pObj = {dialog.object}.panelGet('CENTERPANEL');
if(pObj.state.dockPanelShown) {
//Hide RIGHT dock panel
pObj.hideDock();
} else {
{dialog.object}.panelSetActive('LEFTMENU');
}

}
COPY THE CODE

Writing the event handler is easy when you just copy and past the code.
22. Click Information on how to write the onSwipe event handler.
The Copy Example button will put the code on the clipboard.

281

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Understanding Split View Menus

23. Close the Javascript editor without changes.


24. Close the component.
GO TO ALPHA VIDEO
UX_V12-11, 78

While there are quite a few steps here, we believe most would agree that
Alpha Anywhere wins this fight hands down.*
Videos > Filter: Enter Menu: Choose:
UXM_V12--11. Panel layout - Understanding the Different Ways in
Which a Docked Panel Can Be Shown - 'Over', 'Slide' and 'Push'.
UX_V12--78. Building a Menu System in a UX Component Using
Docked Panels in a Panel Layout.

C. Understanding Split View Menus


COMPLETED COMPONENT

The completed component is SplitView (Menus Web Project).

Split-view combines a Menu Panel and a Master Panel, wrapped in a Panel


Layout. If the window size is large enough, the Menu is shown next to the Master, otherwise it is collapsed.
This is another style that uses Docked Panels (explained in the previous exercise).
Carefully reviewing these setting will also give you hints that you can use in
other parts of your application.
There are three styles, all of which are extremely easy to create, thanks to the
Quick Panel genie. We show how to set them up and their settings so that you
can modify them to suit your situation.

STANDARD

PANELS & ICONS

Above left: Creating a standard split view menu on page 283.


Creates menu only. (Average users)
Above center: Creating a split view menu with icons & panels on
page 284.

*. When you watch the video, you will understand this comment!

282

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Uses Panels for initial view and menu options. Menu options have

icons. (Average users)


CODE

FONT-AWESOME

Above right: Understanding the ListMenu control on page 288.


Same as above, but uses code to define menu options. (Advanced
users)
The second and third parts introduce the Font-Awesome collection of icons
that is included with the software (next to the menu items in the above screen
shots).

Creating a standard split view menu


While this menu does not appear as enticing as the following ones, but please
review it for the basic settings for a Split View. (Nothing will happen when you
click on the menu options thats in the next one.)
1. WPCP > Menus Web Project: Create a new, blank UX Component.
2. Save as MySplitViewStandard.
3. Controls > Panels: Click Quick Panels.
4. From the left menu, double
click [Pre-defined Split View]
to place it in the syntax area.
(Click OK)
The controls are automatically
defined:
Panel Layout with Header and
two Panel Cards (MenuPanel and
Masterpanel)

5. Mobile: Yes.
6. Go to Working Preview >
iPad Vertical.
Both the menu and master
panel card where the selections
would appear are visible.
7. Go to iPhone Vertical.
There is not enough room for both the menu and selection area, so a
menu button is placed in the header.
Now, lets take a look at the settings. We will run them from top to bottom.
8. Return to Design mode.
PANEL LAYOUT PROPERTIES

PROPERTIES: [PANELLAYOUT: PANELLAYOUT_1] (H) (TTB)


Layout flow direction: LTR.
Docked panel display method: Over.
Dock lock flow: Yes.

283

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Understanding Split View Menus

Docked Panel controller buttons: Click the button.


a. Button

Id: MENUBUTTON; Panel Id: MENUPANEL.

For more information see Docked Panel controller buttons on


page 278.
b. Close

PANEL SIZE AND DOCK


OPTIONS

the dialog.

PROPERTIES: [PANEL CARD: MENUPANEL]


Layout Size: 200px
Dock: auto-collapse-before.
This determines the width of the menu panel. If there is not enough
room, it should be docked before the main panel (to the left).

LIST PROPERTIES

PROPERTIES: [MENULIST]
Fill container: Yes.
List properties: Click the button.
Data Source Type: Static.
Static data: Click the Button.
a. Static

choices:

Field name: MenuItems.


Menu items: Item1 through Item11.
b. Click
c. Go

Cancel.

to the List Properties tab > Layout Properties.

Layout type: Freeform.


Freeform type: Vertical.
d. Go

PANEL SIZE AND DOCK


OPTIONS

to the List layout tab.

e. Note

the freeform layout.

f. Click

Cancel to close the List Builder.

PROPERTIES: [PANEL CARD: MASTERPANEL]


Layout size: Blank.
This allows the display area to fill the maximum available.
Minimum size: 300px.
This means that if less than 300 pixels is available with the menu open,
it should be docked.

9. Close the component.


Now that you understand Split View basics, we can explore the more fully
developed options. Since the average user is more likely to use Panels for menu
item display, well detail that one.

Creating a split view menu with icons & panels


Again, Alpha Anywhere does most of the work for you. All that is left is to
identify what goes in the Panels.

284

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

There are two ways to set up this menu, with Quick Panels as we did in the
previous exercise or to use a UX template. We will use Quick Panels so you will
know where it is. If you prefer to use the template, do the following:
a. Create

a new UX component.

b. Select:

Create UX Component from a template.

c. Choose:

MobileAppFramework_with_SplitViewMenu. (Click OK)

d. Continue

at step 14 on page 285.

10. WPCP > Menus Web Project: Create a new, blank UX


component.
11. Save it as MySplitViewIconsPanels.
12. Controls > Panels: Click
Quick Panels.
13. From the left menu, double
click {Pre-defined:SplitviewWithIconsAndPanels}
to
place it in the syntax area.
(Click OK)
The genie created the follow-

ing controls:
Panel Layout with Header and one Panel Card (MenuPanel) followed by a
Panel Navigator with 11 Panel Cards (Homescreen and 10 Action Panel Cards).
Note that there is another container inside the Panel Header. Well explain why
when we get to it.

14. Mobile: Yes.


15. Go to Working Preview.
16. Notice: You will most likely get a notice about loading the Font-Awesome library. Click OK to accept.
17. View in both iPad and iPhone Vertical to see that it has the same
menu docking as in the previous exercise.
18. At iPhone Vertical, swipe to open the menu instead of clicking the
button.
19. Return to Design mode.
COMMENT CONTROL

The first control in this UX is a Comment. It contains notes on component features. Unlike commenting in code, this does not turn on/off. It is a
separate control found in the Other Controls section and can be defined
with Plain Text or HTML.

285

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Understanding Split View Menus

20. Select the comment control and click Show comments for current control on the toolbar above the controls.
Now we will look at the rest of the controls, working from top to
bottom.
PANEL LAYOUT PROPERTIES

PROPERTIES: [PANEL LAYOUT: PANELLAYOUT] (H) (LTR)


Layout flow direction: LTR.
Docked panel display method: Over.
Dock lock flow: Yes.
Docked Panel controller buttons: Click the button.
a. Button

Id: MENUBUTTON; Panel Id: MENUPANEL.

b. Close the dialog.


Animation: Slide.

Animation duration: 200.


JAVASCRIPT

onSwipe: Click the button to see the code.

In order to center the header text


and left align the button, a Container control has been added to
the Panel Header.

HEADER TEXT & BUTTON


ALIGNMENT

CONTAINER BEGIN
PROPERTIES

CONTAINER BEGIN
PROPERTIES

<SPAN>

STATIC TEXT PROPERTIES

PROPERTIES: [PANELHEADER: CONTAINER_1]


Container alignment: Center.
This centers the Header text.
PROPERTIES: [CONTAINER: CONTAINER_2]
Container alignment: Left.
This left aligns the button.

The next control uses an HTML tag called <span>* to create an ID that identifies the text in the header. It will be used in the List control onClick event (see
Header code on page 287). The ID is shown in green below.
PROPERTIES: [STATIC TEXT: PANEL HEADER]
Static text: Click the button.
a. Click

the Source tab to see the HTML.

<span id="{dialog.componentName}APPPANELHEADER">Panel
Header</span>
b. Close

PANEL SIZE AND DOCK


OPTIONS

the HTML Editor.


PROPERTIES: [PANEL CARD: MENUPANEL]
Layout size: 200px.
Dock: auto-collapse-before.

*. The <span> tag provides a way to add a hook to a part of a text or a part of a document When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript.
http://www.w3schools.com/tags/tag_span.asp. 2.16.14

286

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

LIST PROPERTIES

PROPERTIES: [MENULIST]
Fill container: Yes.
List properties: Click the button.
Data Source Type: Static.
Static data: Click the button.

FONT AWESOME ICONS

Not only does the static data list look different than before
(see above), we have a new option, Insert/Edit CSS Icon
that we have not seen before because it was added after we
began this book. The Static Choices reflect their CSS code.
Fortunately, we dont have to know any of that.
21. Click Insert/Edit CSS Icon > CSS icon from Font
Awesome to see the library.
Also take note of the Action field (aqua above) because it
appears in the Header after the selection has been clicked.
We will look at that in a moment.
22. Close the Font Awesome library and Static Data dialog.
23. Go to the List Properties tab.
24. Layout Properties:
a. Layout

type: Free form.

b. Freeform

HEADER CODE

type: Vertical.

The code gets the value of the Action field (above) and places it in the header
when the menu item is clicked and uses the span id defined earlier to enter the
static text (<Span> on page 286). *
25. Javascript - Run Time > onClick: Click the button.

*. This code does double duty for this and the Split View menu with Icons that we will examine next. The developers have simply commented out the sections that do not apply.

287

CHAPTER 6. MASTERFUL MENUS


Menus for Mobile Applications: Understanding Split View Menus

a. Examine

the code and close the editor when finished.

26. Go to the List Layout tab.


View the Freeform Layout.
{Image} is the name of the field that holds the
CSS Icons and [Menu Name} holds Menu1,
Menu2, etc. (See Static data above).
27. Close the List Builder.
PANEL NAVIGATOR
PROPERTIES

PROPERTIES: [PANEL NAVIGATOR: PROGRAMMATIC] (LTR)


Navigator type: Programmatic.
Animation: Slide-left.
Animation duration: 200.
Flow direction: LTR.

PANEL SIZE AND DOCK


OPTIONS

HIDE/SHOW PANEL
DISPLAY

Layout size: Blank.


Minimum size: 500px.
Phones: Setting the minimum size to 500 pixels means that, on most

phones, the MenuPanel will be hidden, regardless of the orientation of the


phone. It will be shown when the user taps on the icon in the header.
Tablets: With this setting, the MenuPanel will always appear on tablets.
If you want the menu to always be hidden, even on a tablet, then simply set
the minimum size to a large number.
The rest of the controls are easy to understand and are ready for definition.
While 10 Panel Cards have been supplied, you may have more or fewer,
depending on your needs.
28. Close the component.

GO TO ALPHA VIDEO

The following section has a video that describes modifying Icons and CSS in
a list menu (page 289).

Understanding the ListMenu control


COMPLETED COMPONENT

The sample components for this section are ListMenu and SplitViewCode
(Menus Web Project)
The UX has a pre-defined control entitled ListMenu. It automatically creates
a List Control with Icons that can be further defined with code. It produces a
very similar result to:
Quick Panels > {Predefined:Splitview with Icons}

ADVANCED

This feature requires knowledge of JavaScript. Users should also be aware


that the Split View Menus described above are often more useful for mobile
applications.
29. WPCP > List Control Web Project: Create a new, blank UX Component.

288

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

30. Save the component as MyListMenu.


31. Defined controls: Select ListMenu.
32. Go to Working Preview.
33. Click on the lines to see Alerts come up.
ON CLICK CODE

LIST PROPERTIES

The code for the onClick actions (in this case the Alerts) is defined in the List
control builder.
PROPERTIES: [LISTMENU]
List properties: Click the button.
a. Go

to the List Properties tab.

b. Javascript
GO TO ALPHA VIDEO
UX_V12-90

> Run time > onClick event.

This video quickly describes editing the CSS Icons (see previous exercise).
Videos > Filter: Enter list menu. Choose:
UX_VB12-90. Using CSS Icons in a List List Menus

Menus for Web Applications:


Web applications have a complete assortment of pre-designed web components that make organizing and presenting your collection of components,
reports and pages very easy.
We will begin with the Tabbed UI and Page Layout components. The next
section will handle the Navigation System.
A. Understanding the Tabbed UI Builder on page 289.
B. Understanding the Page Layout Builder component on page 303.
We will switch to the Grid Component Demo Web Project for this section.

A. Understanding the Tabbed UI Builder


COMPLETED EXAMPLE

Component: ABC_Menu; Page: TabbedUI_ABC_Menu.

(Grid Component Demo Web Project)


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 just march down the left or right side.
Tabbed UI can be used with all web components, including the UX.

289

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Tabbed UI Builder

And the best part is that you already know how to add most of its elements.
Lets take a close look at its design.

LEGEND

(1), (2) and (3 & 8) are defined in the Tabbed UI Properties section.
(1) See Change page name on page 300.
(2) See Head content on page 300.
(3) See Adding a header on page 297.
(4) Click the << to collapse the buttons panel for a wider page display.
(5) and (7) The Home page tab is automatically included and a properties

option opens the HTML Editor for home page text, pictures, etc. (see Adding and editing objects on page 300).
(6) Buttons are pre-defined for Grid Components,
Reports, A5W, HTML and External Web Pages, PDF
Documents.
At the design level, the buttons are enhanced with:
Containers: Tab Control and Pane, Container, Tree
Control and Branch.
Other Controls: Static Text, Image, Button, Hyperlink, Frame and Spacer.
HOW IT WORKS

290

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). Grids function independently,

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

so the AJAX callback is for the active grid only. Lets take a look at the completed component.

1. WPCA > Grid Component Demo Web Project: Open ABC_Menu in


Design mode.
2. Click the buttons in the left pane to open some components.
3.

Note the tabs that appear for easy access.

Are you excited? We think this development is delightful!

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

Creating a Tabbed UI
As we have seen, the Tabbed UI can open components, reports, A5W and
HTML pages, as well as external pages and PDF documents. As always, there is
a builder.
4. WPCP > Grid Component Demo Web Project: Create a new Tabbed
UI Component.
New > Web Component > Tabbed UI Builder.
5. Save as MyABC_Menu.

291

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Tabbed UI Builder

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


UI Controls and Tabbed UI Properties (yellow).
6. Overview: Read the description. As usual, we will cover the steps
outlined there.

Adding controls
7. Tabbed UI Controls > Tabbed UI Buttons: Click Component.
Dialog Title: Insert Tabbed UI Pane

Button type: You can use either Buttons

or Hyperlinks.
Object Type: Available options:
Component.
Report Layout.
A5W page.
Static HTML page.
External (web) page.
PDF document.

Except for External pages, all must be


located in the current Web Project.
Filter: Useful for finding objects in a
long list.
Edit button opens HTML Editor for further formatting button label text.
c. Button

type: Choose Button.

d. Object

type: Choose Component.

e. Object

Name: Choose Clients.a5wcmp (Grid).

f.

Button/Hyperlink text: Enter Client Info (Grid).


Default is name of grid, report, etc.
Can also be changed in Properties (page 293).

g. Pane

label: Client Info.

Can be same as or different than button above.


May also be changed in Properties.
h. Button

width: Accept the default: 1.5in

May also be changed in Properties.


i.

PROPERTIES

292

Click OK.

Once an object is added to the list, its properties become available. Most are
self-explanatory.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

8. Repeat the above steps to add the following. Accept defaults for Button and
Tab Names. We will change them shortly.
Components:
Client Registration (Grid)
UX_BindRepSec (UX)
UploadImageGrid (Grid)
UploadFileUX (UX)
Calendar System (Calendar)
Report: ClientsList (Report).
A5W Page: MaintenancePge.a5W.*

9. Save and go to Live Preview.


10. Allow Alpha Anywhere to turn on the
Application Server, if necessary.

DISPLAY NOTES

Live Preview is best because reports and Maintenance components are not

visible in Working Preview.


Some items, such as child grids with tabs, may not display properly. For
those, the Browser is better.
The screen shot above shows some of the features:
A button for each object is at the left.
Header Text: Good place for a logo and welcome message.
Home page can be designed in HTML.

FEATURES

11. Click the UploadFileUX button to see the pane and its tab appear
(inset).
12. Close the pane by clicking its x (red circle).
13. Return to Design mode.
RENAME BUTTON & TAB

TABBED UI BUTTON/
HYPERLINK PROPERTIES

You can give the buttons and tabs any name(s) you like. The settings are in
two locations.
PROPERTIES: [TABBED UI BUTTON: CLIENTREGISTRATION (GRID COMPONENT)]
Button text: Change to Seminar Registrations (Grid).
Pane title: Change to Registrations.
This action changes the name of the Tabbed UI Button control to:
[Tabbed UI Button: Seminar Registrations (Grid) (Grid Component)]
The original filename can be viewed at Component Definition > Component name.

14. Change other names/tabs as follows:


UX_BIND REP SEC

Button text: Enter Client Info (UX)

*. The Maintenance Page contains the Maintenance Component, a DBF only utility that packs and indexes tables.

293

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Tabbed UI Builder

Pane title: Enter Client Info


UPLOAD IMAGE GRID:

UPLOAD FILE UX

CALENDAR SYSTEM

CLIENTS LIST

MAINTENANCE PGE

Button text: Upload Images (Grid)


Pane title: Upload Images
Button text: Upload Files (UX)
Pane title: Upload Files
Button text: Calendar (Calendar Component)
Pane title: Calendar
Button text: Clients List Report
Pane title: Clients List Report
Button text: Pack/Index Tables
Pane title: Pack/Index Tables

15. Go to Live Preview > Full Preview to review the buttons.*


16. Review tab names by clicking on the buttons.

Adding frames
Frames will allow us to organize the items for better viewing. Be sure to
select the fields first and then click the Containers button.

a. Select

the first three objects (yellow above).

b. Click

Containers.

c. Choose

Frame.

Insert opening Frame Begin & closing Frame End tags: Yes.
Label: Client Info. (Click OK)
d. Repeat

as follows:

Select the next two components (Uploads).


Insert frame. Label: Upload File/Image
Select the Calendar component.
*. If you get a Navigation warning, see Understanding the browser navigation warning on page 297.

294

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Insert frame. Label: Calendar


Select the Report.
Insert frame. Label: Reports
Select the A5W page.
Insert frame. Label: Maintenance

17. Save and go to Live Preview.


18. Inspect the Frames.
19. Return to Design mode.

Adding tabs
Tabs further organize the items.

20. Select all the components and their Frames.


21. Containers: Click Tab Control.
22. List three panes (right above):
Components.
Reports
Maintenance
23. Click Insert Around.
24. Use arrows at top of controls list to move the Tab Panes as above (left
panel).

295

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Tabbed UI Builder

25. Save and go to Live Preview.

Currently, we are presented with the Before view as seen above. In order to
get the After view, we need to expand the widths of the Buttons and its Panel.
26. Return to Design Mode.

Changing width of buttons and panel


BUTTON WIDTH

Width can be set for individual buttons or a group of buttons. We will change one
and then use the Paste Properties utility to copy it to the others.

27. Change button widths as follows:


PROPERTIES: CLIENT INFO (GRID) COMPONENT
TABBED UI BUTTON/HYPERLINK PROPERTIES

Style: width: Enter 2.5in


a.

Select the property.

b. Click Paste current property value to multiple controls. (Button above controls list - green inset at left.
c. CTRL
d. Click

PANEL WIDTH

+ CLICK all the button controls.

Set Properties.

28. Go to Tabbed UI Properties > Tabbed UI Properties > Button panel


style: Change to 3.65in.
29. Go to the Browser to inspect the revised button and panel widths.
Before we complete the Tabbed UI component, here are a couple of notes.
30. Return to Design mode.

296

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Understanding the browser navigation warning


When you go live, you wont want the end user to accidentally leave a page
without saving new or changed data. Alpha Anywhere provides for this with
confirmation option. Settings are found at:
Tabbed UI Properties > Tabbed UI Properties >
Prompt when navigate away from page. Check Yes.
(Default)
While testing, however, this message can become annoying because it needs to be dismissed each time you preview your work. It can be dismissed by unchecking the option. Just remember to
add it back in when you are ready to go live.
TABBED UI PROPERTIES

31. Go to Tabbed UI Properties.


Prompt when navigate away from page: No (Default = Yes)

Giving the page a URL title


TABBED UI PROPERTIES
(CONT.)

You can give the Tabbed UI page a title that will appear in the Browsers
URL or tab (#1) in screen shot on page 290).
Page title: Enter ABC Seminars.
Now well finish up the Tabbed UI by giving it a header and a footer.

Adding a header
Its easy to add a logo and text.
LOGO

Adding a logo is like adding any other picture at the HTML Editor.
TABBED UI PROPERTIES
(CONT)

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


a. Make

a line above the sample text.

b. Click

Insert Image.

c. Select

ABC_Seminars_LogoSmall.jpg.

If the image you want is not in the list, click Add Image to Project.
Path to book images is: c:\Alpha_WebMobileBook_3.0_Volume2
\ ABC_WebMobile_Lesson\Images\
d. Change

the text to Welcome to ABC Seminars.

e. Change

the font to Arial, t (24pt).

f.

Click Save.

Adding a footer
TABBED UI PROPERTIES
(CONT.)

Typically, footers contain company information and/or links to other pages in


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

the following or other text of your choosing:

297

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Tabbed UI Builder

Liberty Manuals Company - 1806 Rte 35, Suite 104 - Oakhurst, NJ 07755.
b. Center
LINK TO PAGES

the text.

To add links to other pages, as seen in the footer of some websites:


c. Type

the text and then select it.

The Hyperlink button will become active.


d. Click

on it to add the URL.

e. Click

Save.

Adding home page content


As we have already seen, the tab for the Home page is automatically added
when the Tabbed UI is created. Its content is defined within the Tabbed UI.
There are two ways to define it:
Link to another web page or site or
Create a Local page with the HTML Editor.
We will do both so you can see how they work.
DEFINE A LOCAL PAGE

32. Continue at Tabbed UI Properties.


HOME PAGE

Home page tab title: Home.


Home page HTML source: Choose

Local.
Home page HTML: Click the button.

a. Enter
b. Go

some text as at above.

to the Browser to view.

c. After

inspecting the home page, return to Alpha Anywhere.

33. Save the component.


34. Go to the Browser to see how it has all come together in a nice, tidy
package.
LINK TO OUTSIDE WEB
PAGE

298

This example will show how to link to another website. While it is unlikely
you will want to include an entire site in the Tabbed UI, you may well want to

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

develop the Home page outside of it because its Editor does not offer all the
options of the one used to create regular A5W pages.

We wont save this configuration, but it is worth looking at.

35. Return to Design Mode.


HOME PAGE

36. Go to Tabbed UI Properties:


Home Page > Home page tab title: Home.
Home page HTML source: Choose URL.
Home page URL: Enter http://www.LibertyManuals.com (or
another site of your choosing).
The full address, including the http:// is required.

37. Go to the Browser.


The website now appears in the Home page of the Tabbed UI.
38. Return to Alpha Anywhere.
39. Close the component without saving
The following notes are important, so please dont stop yet!

Understanding A5W pages for Tabbed UIs


In most cases, components are manually to the A5W page.* Tabbed UIs are
different.

*. The A5W Page is a special Alpha Anywhere web page that can contain Web Components, HTML and Xbasic code. Its use is discussed in Volume 1.

299

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Tabbed UI Builder

When you first saved the component in step 5 on page 291, an A5W page

was automatically created. Lets take a look.


40. WPCP > Grid Component Demo Web Project: A5W Pages.
The default name for the page is: TabbedUI_ABC_Menu. Its preview is at

left.
IMPORTANT NOTE

The Source code has automatically been defined. 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 are automatically added to
the page definition when the component is saved.

CHANGE PAGE NAME

The default for the page name is the component name preceded by TabbedUI_. You can eliminate the prefix and give the page a different name at:
Tabbed UI Properties > Container A5W Page > A5W Page name.

HEAD CONTENT

You can also add plain text to the page header (#2 in screen shot on
page 290) at:
Tabbed UI Properties > Container A5W Page > Use defined head
content. Click the button and define the text.

DELETE PAGE

If you delete a component, you must also delete it in the Tabbed UI.

Adding and editing objects


Now that you have a sense of how the Tabbed UI works, lets return for a moment to
see some of the modifications that can be made to the components and other objects.
These settings are in the Properties panel.

EDITING AN OBJECT

a. Select

a component.

Note that Edit Object (below list) becomes active.


When you click on it, you will be taken directly to the component or other object for
editing.
ADDING OTHER CONTROL
TYPES

The following controls can also be added.


a. Tabbed

UI Controls Menu: Click Other Controls to see:

Static Text, Image, Button, Hyperlink, IFrame, Spacer.


PROPERTIES SEARCH

300

To find the various settings, click the Properties link (yellow highlight
above). This is the same as the Search Properties hyperlink in Grid components.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

CONTAINERS & OTHER


CONTROLS
BUTTONS / HYPERLINKS

Tab Controls, Tab Panes, Frames, etc. all have their own settings.
The Buttons / Hyperlinks can be renamed and otherwise customized.
Javascript > onClick: Action Javascript is available for both buttons and

hyperlinks.
AUTO REFRESH

TABBED UI BUTTON/
HYPERLINK PROPERTIES

PANE HEADER

Components, Reports and Pages can be set to refresh automatically when


they get focus.
PROPERTIES: <OBJECT>
Auto refresh on focus: Default = No.

Handy for adding instructions or notes. Appears below the tab for the object.
PROPERTIES: [TABBED UI BUTTON: ENTER CLIENT INFO (UX) (UX COMPONENT)]
PANE HEADER

Has pane header: Yes.


HTML: Click the button and add text as at left

(yellow highlight).
41. Click Save.

FILTER

Filters entered at this level are in addition to any defined for the component
itself. For example:
Clients grid component:
Component level: If we define a filter at Grid > Query, such as
Last_name = anderson.
Tabbed UI level: If you then search for records where: Last_name =
bush.
Result: No records will be found.
Grids: Filters are defined in Properties > Grid Definitions. You can set both

Base and User Filters (see Base & User Filters on page 39).
Reports: Filters are defined in Properties > Report Definitions.You can also
set PDF options, such as Watermarks and Passwords.
ORDER

When ordering records, the Tabbed UI definition takes precedence over the
component setting. For example:
Clients grid:
Component level: If we put the component records in last_name order.
Tabbed UI level: Order by first_name
Result: First_name order. The original grid remains unchanged.
Grids: Order is defined in Properties > Component Definition > Order.
Reports: Order is defined in Properties > Report Definition > Order.

301

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Tabbed UI Builder

REPORT DISPLAY

Reports will display more quickly in HTML than as PDF files. HTML also
gives the advantage of transfer to Excel. In order for this to work, however, your
reports should be Layout Table style. (Our example is a Freeform style report,
so it doesnt work there.) For more information, see the video series noted
below.

Understanding linked resources


Advanced users only.

Tabbed UI Properties has an option at Other >


Linked Resources that adds links for child grids
with locally defined CSS.
To learn more:
a. Go

to Tabbed UI Properties.

OTHER

Linked Resources: Click the button.


b. Click

Explain why it is necessary to define linked


resources.
RECOMMENDATION

In most cases, everything will work fine. Only add linked resources if there
is a problem without them.
42. Close all open components.

Additional options
GO TO ALPHA HELP

For more information on this feature, we recommend you review the documentation pages, where some videos are also referenced. All, regardless of version number, are currently valid.
Documentation > Filter: Enter Tabbed UI.
Select from the many topics.

GO TO ALPHA VIDEO 25, 27,


RPT_V12-1.

There are more than twenty videos on the Tabbed UI builder. We recommend
you start with two of the earlier ones and then go on to the more advanced. Of
special note are videos on using the Tabbed UI with Image Gallery Components
and other features.
Videos > Filter: Enter Tabbed UI. Choose:
Version 10 Videos:
25. Tabbed UI Builder.
27. Window Options. Using Action JavaScript.
Reports:
RPT_V12-1. HTML Reporting.

302

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

B. Understanding the Page Layout Builder component


COMPLETED EXAMPLES

Components: Page Layout: Customer, PageLayoutTabsOpen and PageLay-

outTabsButtons; Tabbed UI: PageLayoutTUI. (Grid Component Demo


Web Project)
A5W Page: PageLayout_Customer. Also a page in the TabbedUI component. (Grid Component Demo Web Project)
This tool lets you create complex pages, allowing you to
place multiple objects in various arrangements. Objects can
be loaded when the page is
opened or when a button or
hyperlink is clicked. They can
appear vertically or side by
side, in tabs or accordions.
Data is accessed only for the
active grid so, even if are several grids on a page, each acts
independently.
The design interface is similar
to the Tabbed UI Builder, so we
will concentrate on giving you
some ideas of how you can take
advantage of this feature. This
time we will begin with two videos and then view some components that we
have prepared to demonstrate additional display options. Then we will modify
the Page Layout component and show how it is automatically updated in the
Tabbed UI.
1. Watch both Parts 1 & 2 of the following topic and then return here for
notes and additional layouts.
GO TO ALPHA VIDEO

#26

Videos > Filter: Enter Page Layout. Choose:


26. Page Layout Builder.

We have set up two grids that demonstrate how this works:


PageLayoutTabsOpen and PageLayoutTabsButtons.
The first takes a few moments to load because all grids are
set to open when the page is loaded.
The second opens faster because grids dont load until the
buttons are clicked. And the, each will load independently.
Lets see them in action.
2. WPCP > Grid Component Demo Web Project:
Open PageLayoutTabsOpen in Edit mode.

303

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Page Layout Builder component

3. Go to the Browser.
The Working message shows the AJAX call back for the three grids.
4. Return to Alpha Anywhere.
5. Open the PageLayoutTabsButtons component in Edit mode.
This component also has multiple grids in tabs, but with components
set to open when a button is clicked. Display is super quick.
6. View in the Browser.
BUTTON / HYPERLINK BEHAVIOR

You can have buttons and/or hyperlinks. They display one under the other
initially (Setup #2 above), but each stays with its object when clicked (left).
7. Click the Clients button.
When the grid opens, the second button falls below.
8. Click Close to close the window (red circle).
9. Return to Alpha Anywhere.
As we see here, button position is relative to the grid that is being opened.
If you want the buttons to stay relative to each other, use a Tabbed UI.

Entering the display settings


The display of each individual object can be controlled. They can be side-byside; they can initially be open or closed. They can be viewed on the page or in
pop-up windows. You can have buttons or hyperlinks.
Lets examine some of the settings.
10. For each of the following examples, select the object in the usual way
and go it its Properties to see the settings.
SIDE-BY-SIDE

The video demonstrates videos being placed side by side on the page by turning off the break. In order for this to work, the grids need to be narrow enough
to fit on the browser page. If they are too wide, they will be shown one under
the other.

OPEN OR CLOSED

As we saw above, objects may or may not be loaded when the page opens.
The setting is for each individual object, so you can decide which should be
open initially and which should be closed until a button (or hyperlink) is
clicked.

EMBEDDED OBJECT
PROPERTIES

Show Mode: Options:


When page is loaded.
When a button is clicked.

304

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

BUTTONS / HYPERLINKS

EMBEDDED OBJECT
PROPERTIES

If you choose When a button is clicked above, the next step is to define the
Object Position where you want the object to open relative to the button. After
that, select the Button Type (button or hyperlink).
Object position: Options:
Above, below, right (default), left or freeform.
Button type: Button (default) or Hyperlink.
WINDOW TYPE

The objects can be viewed on the page, in popup windows or in a Tabbed


UI (see below).
WINDOW PROPERTIES

Window type: Options:


On page, Popup modal or modeless, Tabbed UI.
HIDE WINDOW

The above options add a hyperlink so the end user can hide the window
(red circle previous page). You can change the wording of the link (green).
If you choose On page above, you can also
control whether or not the end user can hide
the window. (pink).
Can hide window? Default = No.

WINDOW PROPERTIES

11. Close the without saving any changes you may have made.

Displaying a Page Layout component in a Tabbed UI


You cannot add a Page Layout or other component to an A5W page that
holds a Tabbed UI because the latter must be alone on the page. Nor can you
choose a Page Layout component from within the Tabbed UI Builder.
But. You can place a Page Layout component on an A5W page and add the
page to the Tabbed UI objects.
If an object has been defined to open when a button is clicked, there are several ways for it to display when inside a Tabbed UI. It can appear on the page or
in separate modal or modeless windows. It can also be set to appear in its own
tab.
Heres the process
a. Create a new A5W page, add some text and place a Page Layout com*

ponent on it.

b. Add

the page to the Tabbed UI.

We have a sample for you that will show how the display settings work. You
can use this sample as a guide for your own application.
The first example will show the grid displayed on the same page, the second
will show how to modify the display so that the component appears in its own
*. See Creating the A5W page on page 308.

305

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Page Layout Builder component

tab. The tricky part here is moving back and forth between the different types of
components. The elements are:
PageLayoutTUI (Tabbed UI component).
Customer (Page Layout component)
For simplicitys sake, we will close all open components and then open these
two so we can easily switch back and for between them.
12. If you have not already done so, close all open pages and/or components.
13. WPCP > Web Components: Open Customer and PageLayoutTUI in
Design mode.
DISPLAY ON SAME PAGE

The sample has been set up to display the component on its page (red border
inset below).
14. Go to Design mode for the Customer component to look at this setting:

WINDOW PROPERTIES

PROPERTIES: [PAGELAYOUTPART:CUSTOMEREB (GRID COMPONENT)]


Window type: OnPage.

15. Switch to the PageLayoutTUI component and go to the Browser.


16. Click the Pages tab.
17. Click the PageLayout_Customer button.
There are two grids, CustomerEB
and ControlType. The first will open
when its button is clicked, the second opened when the page was
loaded.
18. Click the CustomerEB button.
The grid opens on the page, next
to the button.
19. Return to Alpha Anywhere.
DISPLAY IN SEPARATE TAB

Next, we will set the CustomerEB grid to display in its own tab (screen shot
below).
20. Go to the Customer component in Design mode.

WINDOW PROPERTIES

PROPERTIES: [PAGELAYOUTPART:CUSTOMEREB (GRID COMPONENT)]


Window type: Choose Tabbed UI Pane.

21. Save the component.


Must be saved in order for change to appear in the Tabbed UI.

306

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

22. Switch back to PageLayoutTUI.


23. Go to the Browser.
24. Select Pages > PageLayout_Customer: click the CustomerEB button as
before.
Instead of opening on the same page,
the component opens in its own tab
(yellow).
Next, we will learn about external web
pages, but lets see one in action while
we are here.
25. Click the PageLayout_Customer
tab (green above).
26. Click the Go to
LibertyManuals.com
hyperlink on the
page.
The site opens in
the Tabbed UI as it
did in the previous
exercise.
Lets see how that
was set-up.

Adding an external web page


External Web Pages are those outside the project or even outside Alpha Anywhere. In the previous exercise, we added an external web page actually a
whole site to the Tabbed UI Home page. This time it defined in the Page Layout component and the settings were transferred to the Tabbed UI.
This exercise will also demonstrate that, as long as you continue to save your
changes to the original component, both the A5W page and the Tabbed UI will
update automatically.
27. Return to Alpha Anywhere.
28. Go to the Customer component in Design mode.
The page was defined as follows:

307

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Page Layout Builder component

a. Page

Layout Parts: Click External


Web Page.

b. Choose Only show object when user


clicks a button/hyperlink.
c. Button

type: Hyperlink.

d. URL: http://www.LibertyManuals.com

Be sure to include the http:/


e. Button

/ hyperlink text: Go to LibertyManuals.com


f. Show object: Below button/hyperlink.

(Click OK)

Next, the window size was modified to contain the object.


WINDOW PROPERTIES

PROPERTIES: [PAGE LAYOUT PART: GO TO LIBERTYMANUALS.COM ]:


Window type: Tabbed UI.
Window height: 8in
Window width: 10in
Window title: Liberty Manuals Website
Resizeable: Yes (default)
g. The

component was then saved.

The save transfered the settings to the Tabbed UI component.

Creating the A5W page


Most of you are familiar with using A5W pages, but heres a quick runthrough in case you need it. You can open the following to see an example:
Web Projects Control Panel > A5W
Pages: PageLayout_Customer.
Heres how it was designed.
a. Create

the Page Layout component.

b. WPCP > A5w pages: Create a new


blank page.
c. Enter

desired text:

d. Click

Insert Component (red box above) and choose Customer Page


Layout component.

e. Save

the page.

Whenever the component is updated and saved, the page is automatically


updated, too. In other words, once you have designed the page (text, pictures,
etc.) you can pretty much forget it and then focus on the component for other
changes that may be needed.

308

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

29. Close all open components.


Go to A5 Video #26, 38

Videos > Filter: Enter page name below.


26. Page Layout Builder. (2 videos)
38. Using Arguments in the PageLayout and TabbedUI Components to
Filter Records. Demonstrates opening a Page Layout or Tabbed UI
based on the current row of the grid.
Video Finder filter: Some videos on this topic can be found by entering
Page Layout in two words and others require camel case (PageLayout).

C. Understanding the Navigation System


Our final menu is based on the Navigation System component. While most
developers use the Tabbed UI, some prefer this style because it is familiar to
users.
The Navigation System component places horizontal or vertical toolbars on
A5W pages.

Menus can have all entries on a single level, or can have child entries,

which in turn can have child entries.


Menus can have either a horizontal or vertical layout.
The display of a list of child entries can be caused by either clicking
on or by moving the mouse over the parent entry.
This menu style is more time consuming to develop than the others weve
seen. It also requires advance thought and planning because it is based on a
series of A5W pages that must be created before the component is designed.
For instructions, we refer you to the Alpha Documentation page (no videos
available for this topic). We will also give some notes that you may find useful.
DESIGN INSTRUCTIONS

Go to the following to learn how the component is designed:


Documentation > Filter: Enter Navigation System. Choose:
Creating Navigation System Components.

This page gives six steps for creating the toolbar. Improvements have been
made to the component since the page was written, so the steps should be corrected to read as follows:*
a. Create

your pages.

309

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Navigation System

b. Define

the way that you want to navigate between these pages.

c. Create

a Navigation System component that reflects this definition.

d. Add

the Navigation System component to each page.

e. Publish

the web project to see the menu bar.

We suggest you read the page and the following notes so that you have a
sense of how the Navigation System works. Once you know the basics, you will
be able to explore further on your own.

Sample application
We have designed a sample Navigation System. The menu toolbar is shown
in yellow below. It is composed of the following:
Navigation System
component:
Home.
A5W Pages:
ABC_Home
ABC_ClientHobbies
ABC_Registrations
ABC_Maintenance
ABC_PageLayout

To run it, do the following:


1. WPCP: Click Publish.
a. Select

profile: Choose Local Webroot.

b. Publish:
c. Launch

All files in project.

browser after files are published: Yes.

d. Page

to show: Choose ABC_Home.

e. Click

Publish.

The system will open in the browser. Click on the menu options to open the
selections.

*. The last three steps, adding a table, inserting the component into it and adding code are now included in the component design. The
table and code are added automatically when you place the component on the page.

310

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Developing a plan
Before you can begin developing the navigation system component, you
need a plan and some pages because the pages need to be identified in the component.
Sketch the menu bar and decide what information it will hold.
Create A5W pages and give them meaningful names its easy to get
confused later on if you use generic names like page 1, page 2, etc.
After the component has been designed, place it on each page.
Once you have the basic structure, you can work back and forth to refine it.
You can add more pages and, for the most part, change the look of the menu bar
as you go along.
First, well look at what goes into component design.
2. Web Projects Control Panel > Web Components > New > Web Component: Choose Navigation System. (Click OK)
There are three sections: Description, Navigation System and Information.

Understanding the description page


The first page, Description, tells about the component and previews it. The
type and style are defined here or in the next section. Sample previews are in the
right pane. The bottom pane will show your design as you work.
TYPE

You can have either


horizontal or vertical menus.
HORIZONTAL
MENUS

Horizontal layouts
create drop down
menus for the first
layer.
When there is
more than one layer
in a Horizontal lay-

out, the sub-menus both drop down and fly out.


VERTICAL MENUS
STYLE

In a vertical layout, the sub-menus fly-out to the side.

As with all components, you can define the Style.


3. Navigation Type: Choose Horizontal.
If you get an Empty Tree error message, click OK.

CHANGING THE MENU


TYPE

If possible, determine the menu type at the onset and stick to it. Once you
have placed the component on the page, the cells of the table are set. If you

311

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Navigation System

decide later to change the layout from Horizontal to Vertical, you will need to
delete the TABLE (both cells) and re-insert the component in order to maintain
the proper relationship between the menu and the content.
In other words, if you changed from Horizontal to Vertical, the menu bar
would change, but the placement would not, resulting in a vertical menu in the
top cell. The menu will function, but it will look strange.
Be sure to delete the both cells of the table and remember to save after the
deletion. If you have done it properly, Alpha Anywhere will ask permission to
delete the code. (Click Yes)

Understanding the component settings


The next page defines the Navigation System.
4. Left
panel:
Choose Navigation System
The center
window will
show the tree as
it develops.
The right window contains the
properties for
the various elements.
ROOT SETTINGS

The Root Settings define the properties of the navigation system itself. They
determine the following:
Display: Horizontal or Vertical.
Menu Event: The manner in which the menus are opened:
By clicking (onclick)
By passing the mouse over the item (onmouseover).
Width and Height: Optional.
Determines size of the buttons on the menu bar. Leave blank for automatic sizing. Width: Default = 1in.
Style: Various style choices.

SECURITY

This Security setting varies only with the version of Alpha Anywhere.
Version 8 & later: Group based. (Default)
Alpha Anywhere will always be Group based.
Earlier versions: Level based.

5. Navigation System: Define as follows

312

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

ROOT SETTINGS

Display method: Horizontal toolbar


Menu event: onclick.
Width: 50px
Height: Leave blank
Style: GrBlue
SECURITY

Security Model: Group based (default).

Understanding the menu structure


CHILDREN & SIBLINGS

To create the menu, children and siblings are added.


NODES

Once a child or sibling has been


added, it is called a node.
TREES

A parent and its children are called a


tree.
6. Click Add Child.
The child is added. Its properties
are called Node Settings.

Adding and deleting children, siblings, nodes and


trees
We will go over the Node Settings shortly, but first we need to understand
what happens when you add children and siblings and delete nodes and trees.
7. Click on Navigation System (yellow) and proceed
as follows to create a tree that looks like the screen
shot at the far left.
a. Click

Add Child twice more.

b. Click

Add Sibling two times.

c. Click

Add Child again.

In effect, you have created the tree at above right.


NAMING NODES
NODE SETTINGS

Nodes are name in the Properties section.


Text: Enter desired name.

313

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Navigation System

Moving the nodes


The arrows on the left side are used to reposition the menu items. This will
take some getting used to because nodes must be moved with their children.
NOTE

The following example is a bit hard to see because the nodes are automatically renumbered each time they are moved. It will make more sense when
[text] is renamed. The important thing is to understand is what will happen
before you delete a node or a tree.
UP AND DOWN ARROWS

8. Click 5 - [text].
9. Click the up arrow at the side of the tree (red circle) once.
The level number changes to 4.

LEFT AND RIGHT ARROWS

Promotes and demotes.


10. Click the left arrow.
The node and its child is promoted and moved up to position 4.
As you have probably guessed, the right arrow does the demoting.

Undo & redo


As you might expect, Undo and Redo (red circle below) reverse your actions.
Redo will become active after an Undo. Remember these buttons because you
may not always get what you expect!
11. Click Undo and then click Redo.

Deleting nodes
Next, we will delete some nodes (children and siblings)
DELETE NODE

12. Click 6 - [text].


13. Click Delete Node.
The node is deleted (yellow above).
DELETE TREE

14. Click 2- [text].


15. Click Delete Tree.
The tree is deleted (green above left.)
You may want to experiment further with the arrows and buttons so that you

have a clear understanding of what you can accomplish.

314

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Understanding node settings


TYPES: There are three node setting types: Link,
Separator and HTML.
Link: Link to the page to be opened or link to
another node.
Parent nodes open child nodes.
The last node in the chain opens the page.
Available for all nodes.
Separator: Changes the node into a line that separates links or
labels (HTML).
Designed for Vertical layouts. and shows more in some
styles than in others (gold arrow at left).
Not available for parent nodes.
HTML: Changes the node to a label as Reports at left.
Some formatting changes do not show at Preview, however
they will show when viewed in the Browser.
SECURITY GROUPS

If security is enabled, defines which groups can see the menu items.

BUTTON HIGHLIGHT RULES

For advanced users. See help file reference on page 320.

ITEM ID

Xbasic users can define an Item ID.

ONCLICK JAVASCRIPT

Advanced users can enhance the Javascript, if desired. No Action Javascript


genie.

TEXT

This is where the [text] is re-named.

ICON

You can add an Icon, if you wish. Choose from the following:
Web Project Images.
Built-in Alpha Anywhere Images.
URL for external image.

URL & FALLBACK URL

Defines the page to be opened.

If the node DOES NOT have children, the setting is entitled URL.

315

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Navigation System

If the node DOES have children, the parent node(s) will be entitled Fall-

back URL because, in that case, the primary page is defined at the child
level.
TARGET

When left blank, the page will open in the Navigation System window.
Advanced users can set a different target window, if desired.

Previewing the Navigation System menu


The Preview window (yellow) shows how the component
will look.
16. Delete the existing nodes.
17. Create a tree as in the screen shot at left.
a. One

child + two siblings + one child + one sibling.

b. Click

3-[text] and add a sibling.

c. Click

Preview.

d. Click

the down arrow on the third link to see its children as

above.

Preview is actually a refresh. The button becomes


active when two or more nodes have been added, It is grayed
out when the change is saved or the display is current.

Switching from onclick to onmouseover


Navigation System > Root Settings > Menu event has two settings, onclick
and onmouseover. With the first, it is necessary to click to open the menu item.
The second opens when the cursor passes over the link.
Previewing the switch from onclick to onmouseover was is spotty in our
tests. Sometimes the change worked at Preview and other times it didnt. Try
saving the component and closing and then reopening.

Using the information page


18. Click Information in the left panel of the component.
This is the same Information page that we have used in earlier components. It is used for annotating the component.
19. Close the component without saving or keep it open if you are continuing to the next section.

Including a Tabbed UI
You can add the page that contains a Tabbed UI to the Navigation System,
but, since it must be alone a page, the Navigation System component cannot be
added. The menu bar on other pages will open the Tabbed UI page as any other,
but the end user will need to click the Browsers back button to return to the
other pages in the system.

316

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

WORK AROUND

There are two places where you can add the above instruction.
a. Open

the Tabbed UI component in Design mode.

b. Tabbed

UI Properties: Enter the instruction in one of the following:

Container A5W Page > User defined head content.


Home page > Home page HTML.
NAMING

To change the page name to match the others in the system, see Change
page name on page 300.

Inserting the component on the pages


Once you are satisfied with the basic design of your component, it is time to
place it on the menu pages. It doesnt have to be perfect you will still have the
opportunity to edit the component as much as you like. Each time you save it,
the pages will be updated, too.
20. Go to the HTML editor for the first of the page you created earlier.
21. Click Insert Component.
The Insert Component dialog
for Navigation System components has two additional selections, Selected Button and
Container.
SELECTED BUTTON

Typically, in a menu structure,


the button for the current page
is highlighted so that you know
what page you are on (inset).
CONTAINER

This option places the Navigation System component in a


table* so that the page is laid
out properly (see below).
IMPORTANT NOTE

While you could always create a table later, there is only one shot at selecting the button. If you miss it, delete the entire table, say Yes when Alpha Anywhere asks if it can delete the code and then re-insert the component with a
container.

*. You can skip

317

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Navigation System

UNDERSTANDING THE CONTAINER

A component is placed on the page in a container. The


container is actually a 2-cell table. The component placeholder is on top or at the left and identifies the type as
horizontal or vertical. A cell for page content is below
or at the side, depending on the menu type.
The page content cell is for any additional copy and/or
components. It will automatically expand as content is
added as below (yellow).

MODIFY TABLE BORDER

You can modify the border of the table to make it fit across the page. Another
advantage is that it puts bar within a border.
22. Move your cursor over the outside of Navigation component until
it turns into a size all cursor (inset) and then click to see the boxes
that outline the table (screen shot at left).
Be sure to get the frame and not just the component.
23. Right click: Choose Table > Properties.
Dialog Title: Table Properties

WIDTH

The width of the table can be defined either in pixels or as a percentage of the width of the page.
a. Specify

width: Check the box.

b. 90%

BORDERS
c. Size:

d. Color:
e. Click

318

Blue

OK (twice).

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

CENTERING

To center (or otherwise change the alignment of a table on the page), select it
as in step 22 on page 318 and click Center on the toolbar (same button as for
centering text).
VIEW PAGE IN BROWSER

24. Click
Execute to see the page in your browser.
Utilities is highlighted on the menu bar and the MaintenanceComponent appears.
Do not try to test the links until you set up all the
pages and Publish them.

Viewing the Navigation System


Testing is done from Web Projects Control Panel > Publish because all the
new and edited files must be published before the links can be tested.
a. Web

Projects Control Panel > Publish.

Files to Publish: All files in project.


Launch page: Choose the first page in your system.
b. Click

the links to review.

Adjusting the menu items


You can adjust the component as necessary. Any saved changes will be
reflected on the pages. Keep the following in mind:
Repositioning: You can move the menu items around, but remember that
children cannot be separated from their parents. See Moving the nodes on
page 314.
Adding and deleting: You can add or delete items at any time. You can
delete individual nodes or a tree (parent and children). See Adding and
deleting children, siblings, nodes and trees on page 313.
Changing the layout: If you change the layout from Horizontal to Vertical
or vice versa after putting the Navigation System component on the page,
delete the original table and re-insert the component for proper display. See
Changing the menu type on page 311.

Troubleshooting
If you have a problem with pages displaying,
Turn the Application Server off and then restart it.
Re-publish all files the project.
500 NOT FOUND ERROR:

If you delete a component, be sure that the entire table is also deleted and
allow Alpha Anywhere to delete all code.
25. Close all open pages and components.

GO TO A5 HELP

The following pages are available.

319

CHAPTER 6. MASTERFUL MENUS


Menus for Web Applications: Understanding the Navigation System

Documentation > Filter: Enter Navigation System. Choose:


Navigation System Components. (See page 319 for notes on the this
article.)
Navigation Component Server side Show-Hide Expression V11.
Web Applications Navigation System Component - Using International
Characters V10.

320

Chapter 7.

Gifted Grids

Options on top of options on top of


options
Grid Components are truly gifted and talented
because they have so many choices Tabular, Form
and Stacked Columnar, Read-only or Updateable, DBF

CHAPTER 7. GIFTED GRIDS

What youll find here


Topic
How the material is organized

Page
323

Component Type
Choosing Read Only or Updateable

323

Understanding Editing Options for Updateable Grids

327

Using a Grid Template to Save Time and Trouble

335

Using a Stacked Columnar Layout

338

Using a master template

342

Adding a collapse bar

343

Understanding the Form (Columnar) Component

344

Grid > Data Source


Understanding Arguments

351

Grid > Query


Understanding Arguments

351

Understanding Arguments

351

Understanding Arguments

351

Go to Working Preview.
Ordering Records

355
355

Events & Information

322

Taking a Quick Look at the Code Section

356

Annotating the Grid Component

357

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How the material is organized


Its time to return to Grids. Much as we love the UX, Grids still have their
place in your design if web is what you want. A significant advantage is that
they are automatically bound to tables, so thats a step you can skip. We discussed them in detail in Volume 1, but there were some areas that we were
unable to cover, due to space considerations. So, if you are agree that grids are
great, be sure to get the goods here!
GRID BUILDER NAVIGATOR

The directory on the opposite page and the navigator at left show what you
will find in this chapter.
We will learn about Read only and Updateable and discuss more editing features and learn about templates.
Grids that are Updateable (or Editable) open another part called
Update Settings and well tell you all about it.
Weve already done a lot of work with standard grid components, so
well concentrate on the other types, Stacked Columnar and Form
(Columnar), the most flexible. Stacked Columnar is less popular
because it can take up a lot of space on the page, but weve worked up
a neat little example that opens some interesting possibilities.
Accordion containers and a Collapse Bar tuck the Search
and Grid parts into a such small space youll find it hard to
believe.
After that, well tell you about the Grid > Data Source
options.
Then on to the many elements of the Grid Query, including
working with a View, creating an Argument and using it in a filter,
and ordering records.
Finally, we will touch on Events and Information.
This chapter will use the Grid Component Demo Web Project.

Choosing Read Only or Updateable


One of the first decisions for a component is whether or not it will be updateable. It can be a determining factor in the type of grid that is used, so we will
tackle it first. There are three places where the decision can be made:
Component Type page (before fields have been selected). See below.
Query page. See Query page read only on page 326.
Fields page (after fields have been selected). See Converting later
on page 325.
1. Create a new blank grid component.
2. Go to Component Type.

323

CHAPTER 7. GIFTED GRIDS


Choosing Read Only or Updateable

TERMINOLOGY

The question to ask yourself is, Do I want to allow the


user to edit or add table records and, if so, where is the
best place to do that? We noted earlier that (1) Update
= change field or record, (2) Insert = add new record
and (3) Delete = delete a record.
Read only means that none of the above is allowed.
Updateable means that the end user will be allowed
to do any or all of the above.
Only Grids and Detail View parts may be updateable. Search parts are just for searching.
IMPORTANT STUFF!

If its late and youre falling asleep, splash some water on your face because
this next part is vital to your understanding! The presentation of fields in the
Grid is all about Control Types.

CONTROL TYPES

Fields can be set up to be one of many control types, the most common of
which are Label and TextBox.
A Label is static. The field value cannot be changed, as the following Preview test will show.

LABEL

3. Grid is: choose Read only.


TEXTBOX

4. Try to put your cursor in the Grid in the Preview. Cant be done.
A TextBox is dynamic. The field value appears and it can be changed by the
user. If it is blank, data can be entered into it, thus adding to and/or changing the
data in the table. The Preview window illustrates this, too.
5. Grid is: choose Updateable.
The control type changes to textbox.
6. Put your cursor in one of the text boxes in the Preview. You can actually
remove the sample text.*
See where were going?

READ ONLY

Read only means that Alpha Anywhere will set up the Grid or Detail View
with Labels. The user can look at the data, but not change it. Like an airline
schedule. You can search it and look at it, but you certainly cant change it. In
Application Server language, the data is displayed in a Label control type.

UPDATEABLE

Updateable means that the data can be changed, added to or deleted. In this
case, Alpha Anywhere automatically creates TextBoxes in the Grid or Detail
View. This control type permits the user to change his/her address in a Mailing
List, for example. You will still be able to:
Allow/disallow record update, insert and/or delete.
Set up security permissions, as we illustrated in Volume 1.

*. This wont hurt anything as changes dont have any effect on the Previews.

324

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Use other control types. There are other styles, such as drop down

boxes and links that can be combined with labels and textboxes.

Converting later
There may come a time when you
want to be able to change from readonly to editable. Once you have
selected the fields, the option is no
longer available at the Component
Type page. If you try, you will be
instructed to go to the Fields section
where you can make the change.
Well take a look at how that works.
7. Close the new component without
saving and open Editing_Practice.

8. Go to Working Preview.
This grid has a read-only
Detail View.
Fields have been selected
for both the Detail View and
the Grid.
9. Return to Design Mode.
10. Save it as MyEditing.

Understanding the updateable and editable notices


Once the fields have been selected, Updateable is not available at this window. If you try,
you will get one of these messages.
a. Give

it a try - click Updateable for each gold


arrow and red circle above.

b. Click

OK to dismiss the notices.

Our goal is to actually to do the editing in the


Grid, not the Detail View. The procedure is the
same for both, its only the section that is different.
NOTE

Editable and Updateable are used interchangeably within Alpha Anywhere.

325

CHAPTER 7. GIFTED GRIDS


Choosing Read Only or Updateable

11. Go to Grid > Fields.


12. Note that the Control Type for the fields is Label.
13. Click the editable? hyperlink above the Selected list (red box).
This time the Notice says that if Read Only has
been set in the Query section, it cannot be
changed to Updateable. At first glance, this
might be confusing. If you dont read it carefully, you might think they were talking about
the Component Type section.
QUERY PAGE READ ONLY

But. Theres another place that Read only can be defined.


TABBED UI NAVIGATOR: QUERY (DBF).*
There is a Read only checkbox next to the Primary Key button.

14. Check Read only. Two things happen:


a. Query page: The Primary Key
button is removed.

Fields page: The editable option at the top of Grid >


Fields is disabled.

b.

Now that you know where all the Read only options are, lets make the Grid

fields editable.
15. Uncheck Read only and go back to Grid > Fields.

Changing a read-only Grid to updateable (editable)


Three things will happen when you check
the editable? box. (the next step).
a. The

field control types will be changed from


Label to Textbox (see Results below).

b. The

Detail View part will be automatically


removed (see below).

c. An

Update Settings section will be added to


the Navigator (yellow highlight at left).

REMEMBER THIS!

If you make your Grid updateable after the fields are selected, the Detail
View (if you have one) will be immediately removed (without confirmation)
because an updateable Grid cannot have a Detail View.
16. Check the box next to editable?

*. This discussion also holds true for SQL databases.

326

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

RESULTS

A notice appears with a list of eligible fields.


If one or more of the fields is not eligible for change a link
or drop down box, for example it will be excluded from the
list.*
There is no way to Cancel out of this box. To exit, you must
do one of the following:
a. Accept

all of the fields that are checked by default and click

OK.
b. Uncheck
c. Click

the fields that are not to be converted and click OK.

Select None and click OK.

d. If

you do not want to make the grid editable, Select None,


click OK, return to Component Type and check Read only.

17. Click OK to make all the fields updateable.


18. Go to Working Preview to see the Updateable (Editable) grid.

The Detail View has been removed and three new record lines have

been added at the bottom.


19. Save the component.
This exercise continues in the next section.

Understanding Editing Options for Updateable Grids


This section continues from the previous one. MyEditing should be open in

Design mode).
COMPLETED COMPONENT

The finished component for this section is Editing.

*. Control types are discussed in Volume 1.

327

CHAPTER 7. GIFTED GRIDS


Understanding Editing Options for Updateable Grids

Now that our grid is editable, its


time to go over some editing
options. You can either read all
about it or experience the changes
for yourself by choosing the various
options and going to Working Preview to see the results of each
change.
TABBED UI NAVIGATOR: GRID >
UPDATE SETTINGS
EDITING PROPERTIES

All except those noted in green are

also available for editable Detail Views.


DIRTY OR CLEAN

No, its not time to dump your grid in the bathtub. Dirty and clean are terms
used to describe fields that are or are not in the process of being edited.
Dirty fields or rows have changes made
that have not yet been saved (top row).
Clean ones are unedited and/or have
been saved (bottom row).

Field validation setting

Do you want validation rules to be applied to all the fields or only those that
have been changed. Options are:
Dirty fields only (default) or All fields.

Row edit style

Options are: AllRows (default) or RowOnDemand.


You can choose whether fields are immediately available for editing or appear at
first as labels and then open for editing
when an action is taken. At left, the row
opens for editing when the pencil is clicked.
AllRows
has
another setting:

ALL ROWS

Allow individual rows to be saved = Yes (default) or No.


The default is to allow multiple rows to be edited and saved individually by

clicking Save in the Row Status Column (see below) or all at once by clicking the Submit button.
If you uncheck this option, the Row Status column is removed. Only the
Submit button is shown and it must be clicked each time to save the record.
a. Row Status column. Click the save button that
becomes active for a dirty row or press F9.
b. Click

328

the Submit button at the bottom of the dialog

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

RowOnDemand

ROW ON DEMAND

opens 2 different
settings.

One edit row at a time does just what it says.


Lazy edits does not query the database to get the current data, so the

switch to edit mode happens faster. However, if Refresh data on row


dirty (below) is checked, it will refresh as soon as the user starts editing the row.
New records edit style
ALWAYS SHOW

Options are: AlwaysShown (default) and ShowOnDemand.


When a grid has a Detail View, it is usually used
for adding new records. When there is not a Detail
View, new record boxes are added at the bottom of
the grid or you can have them replaced by a hyperlink in the Navigation Bar.*
Show on Demand

SHOW ON DEMAND

opens two more


options.
Hide new record row after insert (user will need to click the link each

time he/she wants to add a new record).


New records button label. Default is New Records.
Abort update if any row has
error

If any row has a validation error, should the other rows without errors be
updated?
Abort update if any row has error = Yes or No (default).

Error

This has to do with the manner in which error messages for records that do
not meet validation requirements are presented to the user. To understand this,
we need to create a validation rule and then violate it.
1. Go to Grid > Fields.
DISPLAY SETTINGS

PROPERTIES: LAST_NAME
Validation rules: Click the button.
a. General
b. Click

> Require value = Yes. (Click OK)

Working Preview.

c. Remove the value from any Last name and then press F9, Save or
Submit.
d. Place

the cursor on the red icon for the message.

*. A hyperlink is the default for Detail View.


. Well talk more about Validation in the next chapter.

329

CHAPTER 7. GIFTED GRIDS


Understanding Editing Options for Updateable Grids

There are many ways in which the error message can be defined.
Error Style: Block, Inline, Tip, Icon (default above) and Global.
Error Icon: The default icon can be used (above) or another can be
selected.
Show errors in pop-up window = Yes or No (default above)
GO TO ALPHA VIDEO 7 & 60

There are two videos that explain these options in detail.


Videos > Filter: Enter Error. Choose the following:
#7 Error Reporting Styles.
#60 Showing row level errors in a pop-up window.

2. Return to Design.
TABBED UI NAVIGATOR: GRID > UPDATE SETTINGS > EDITING PROPERTIES.
Row refresh method after
edits

How should the row be refreshed after editing? Options are:


Auto-select: Let Alpha Anywhere choose the best method (default).
Full page: Slowest, but assures that all summary fields and linked
records are refreshed.
Single row: Only refreshes data in the row.
Minimal: Fastest, but will not update Summary fields.

Refresh data on row dirty

When the user begins editing the row, should an AJAX callback be executed
to get current data?*
Refresh data on row dirty = Yes (default) or no.

Honor DBF field rules

Should Alpha Anywhere Field Rules be honored?


Honor DBF field rules = Yes (default) or no.

Editing data with RowOnDemand


Well start editing with the Row edit style set to RowOnDemand. The grid
will open with the rows as labels. An action is needed to open a row for editing.
EDITING PROPERTIES

TABBED UI NAVIGATOR: GRID > UPDATE SETTINGS


Row edit style: RowOnDemand.
New records edit style: ShowOnDemand
Hide new record row after insert: Yes.
New records button label: Type Click to enter a new record.

*. See Understanding multi-user editing on page 334.

330

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

3. Click Working Preview.


Note that there is no submit
button, rows are not open for
editing and there are no new
record rows at the bottom of
the grid.

SUBMIT BUTTON

EDIT, SAVE, CANCEL, DELETE

NEW RECORD ROWS

EDITING

Governed by: Row edit style.


AllRows = Button.
RowOnDemand = No Button.
Governed by: Row edit style and Allow individual rows to be saved.
RowOnDemand. Click the pencil or double click on a row to open
editing.
AllRows > Allow individual rows to be saved.
Governed by: New records edit style and Hide new record row after insert.
AlwaysShown = New record rows at top or bottom of grid (see also
New records at top on page 333).
ShowOnDemand > Hide new record row after insert.
4. Double click on a row to open it for editing.
5. Click the black x to cancel edit mode.
6. Click the pencil to re-open for editing.
7. Make a change to a record makes it dirty.
The Save and Undo changes buttons become

active.
8. Click Undo changes or press ESC to cancel
changes. (Click OK to confirm)
9. Click Click here to enter new record.
Three new record rows reopen.
10. Enter a new record for Mary Jones and press
F9 or click Save.
The new record rows disappear and the new
record is at the bottom of the grid.
11. Click the red X to delete the record you just entered
above.
12. At the confirmation dialog, click OK.
Records can only be deleted one row at a time.

331

CHAPTER 7. GIFTED GRIDS


Understanding Editing Options for Updateable Grids

Editing data with AllRows


Next, we will reverse some of the above settings, to open with all rows in
edit mode.
13. Return to Design view and make the following changes:
EDITING PROPERTIES

TABBED UI NAVIGATOR: GRID > UPDATE SETTINGS


Row edit style: AllRows;
New records edit style: AlwaysShown;
Allow individual rows to be saved: Yes.

14. Go to Working Preview.


This time there is a submit button, all rows are open for editing and the new
record rows are at the bottom of the grid. If your grid does not look like the
above, see Refresh below.
REFRESH

Sometimes, after changing settings, Working Preview does


not show your properties changes. If that happens, do this:
a. Press F5. You will go to the Preview tab (F5 is the Hot Key for
that tab as you can see at the left).
b. Then

DELETE

EDITS

click the Working Preview tab again.

Note also that there is now a Delete column at the right of the grid (gold
arrow above). Multiple records can be deleted by checking them and clicking
Submit.
15. Make the following edits (check marks above):
Top record: Change Geoff to Jeffrey; 4th record: Remove the last
name; 1st new record: Enter MARY.
16. Click the Submit button.

VALIDATE VIOLATION

Two red icons

appear because
the Last_name
field requirement
that we set in
step a on
page 329 was
violated.
CANCEL A CHANGE

First, we will resolve the change from Geoff to Jeffrey by canceling it.
17. Click Undo changes for the first
record (red circle) or press ESC.
18. Click OK at the confirmation dialog.

332

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

VALIDATION RULES

There are two types of validations rules, those set at the component level and
those set in Field Rules (Alpha Anywhere and Passive-Link tables). (See also
Volume 1.)
The Application Server checks validation at both the component level and
the Field Rules level. Component level is always honored. Field Rules are also
honored as long as the following is set.
Honor DBF rules = Yes (default).

IMPORTANT NOTE

Component level rules are honored only in the grid for which they are
designed.
19. Click OK.
20. Put your cursor on the
red error ball.
The error is described.

VIDEO! SEE P. 334

These videos give a demonstration of how the above works.


In reality, both of these errors would need to be resolved in order for the user
to continue. We dont have to do that, however.
21. Click the Design tab and then go back to Working Preview.
Unsaved records are reset to their original contents.
There are a couple of other settings worth noting while were here.

HIGHLIGHT ROW

Perhaps you have already noticed that the row becomes pale blue when your
mouse hovers over it.
If you look closely, you
will see there are actually
two highlight levels. The
row becomes darker when
it is selected.
These settings are
located at Properties > Layout Options:
Highlight on hover and Highlight on
select.

(Defaults = Yes)
NEW RECORDS AT TOP

The new record rows dont have to be at


the bottom of the grid. They can also be
at the top. The setting is located at:
Update settings > Permissions > New
record rows position: Top or Bottom.
Requires that:
Editing properties > New records edit
style = Always shown.

333

CHAPTER 7. GIFTED GRIDS


Understanding Editing Options for Updateable Grids

Trapping actions
If a user begins editing a row and then goes to another page without saving
the data, he/she will receive a warning that the edits will be lost if they leave
without saving.*

Being consistent
As we said at the outset, there are a lot of choices to be made. We only advise
that you maintain consistency in your application. Unless there is a very good
reason, dont have a Submit button on one grid and not on another. Dont allow
saving individual rows on one and not the other. Remember, you probably
bought Alpha Anywhere because it was user friendly. Your users will appreciate
your efforts to make it easy on them, too.
And this leads us to another great feature that will help with consistency

Templates. Coming up next.

Understanding multi-user editing


We cant leave editing, however, without discussing what happens when more
than one user edits a row at the same
time. If your application is accessed by
multiple people, chances are they will go
to the same data on the same (or similar)
grid at the same time.
OPTIMISTIC RECORD LOCKING

Alpha Anywhere uses a process called


Optimistic Record Locking to prevent
duplicate entries at the same time by different users.
A. If Jane begins an edit and
B. John edits and saves first,
C. When Jane clicks Submit, she
will get a write conflict message
that explains the differences in
the
values. She can then choose
the proper one.
Not to worry your edits are safe!
GO TO ALPHA VIDEO #5

Theres a great video that shows how this works:


Videos > Filter: Enter Multi-user editing.
22. Save and close the component.

*. I suppose your were expecting me to say something about mouse traps here hey, I dont want to be too predictable!

334

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Using a Grid Template to Save Time and Trouble


When you created a grid, you probably noticed the template option. Templates can get you off to a quick start and our favorite part help with that
consistency we mentioned above.
To avoid going in and out of this dialog repeatedly, well give an overview of
the options and then use a system template and create one of our own.
1. Create a new Grid component and this time stop at the templates page.
2. If necessary, click DBF (yellow in following screen shot).
The projects available to date are shown.

SYSTEM TEMPLATES

System templates have been provided for both DBF and SQL file types.
SQL users:
a. Click SQL (red circle above) to see
the list at left.

If you open an SQL template, the next

time you come to this dialog, it will be


the default.
b. Re-click

DBF when you are finished.

3. Click System Templates > Enter record Form (DBF).


As soon as you select it, instructions are entered into the Preview window (partial view above).

335

CHAPTER 7. GIFTED GRIDS


Using a Grid Template to Save Time and Trouble

You can create your own custom templates and save them at the Local, Project
or Global levels (see Creating a template on page 337).

CUSTOM TEMPLATES

4. Click Local Templates > EditingGridComponent (DBF).


EDIT DESCRIPTION

5. Click Edit description (bottom left of dialog).


The description for this Custom Template (yellow above) can be
edited at any time. Ours is very basic because we chose not to use the
HTML Editor.
Descriptions of System Templates (arrow above) are more elaborate
because the HTML Editor was used. They cannot be edited.
6. Click Close.

FILE NAMES

In order to see your templates in either the DBF or SQL lists, they must contain (DBF) or (SQL) including the parenthesis in the name. Otherwise
they will appear only in the Show > All list.
7. Click Show: All to see the test we created to
prove our point
8. Click How to create your own Grid Component Templates.
.We will show you how to create a template, but it is always good to
know that you can return here for a quick refresher.
9. Click OK to close the instructions.

Move, delete or rename templates


Windows Explorer is used to move, rename or delete templates. The Manage
templates hyperlink will take you to the folders in which they are stored.
Dialog Title: Select Grid Component Template

10. Click
Manage templates.
Dialog Title: Manage Grid Templates
a. Choose

Projects tem-

plates.
b. Click

336

OK.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Windows

Explorer opens
at the proper
folder.
When a template is created, so are the
folders into
which they are
placed.
11. Close
Explorer.

Using the system templates


When you use a template, you have the choice
of having the Description travel with you to
the component for assistance in design or not.
If you take it with you, it will stay open until
you close it. Process is as follows (dont do it
now because we need the template window to
stay open).
a. Select

a template.

b. Open

help window (bottom right of template


dialog) = Yes. (Click OK)

12. Click Cancel to close the Templates dialog.

Creating a template
This is really, really, REALLY easy to do. It literally takes seconds to create a
template based on a component you have created. Not only will it look like
yours, it will have all the features Detail View, Search Part and all the settings.
You can develop your own personal style and stay with it. Now there are no
excuses for not having the most consistent application in the web world!

337

CHAPTER 7. GIFTED GRIDS


Using a Stacked Columnar Layout

13. Open the MyEditing


grid component (or any other
component) in Edit mode.
14. Top menu: File > Save as
template.
15. Name: My Editing Formats (DBF).
Remember to include
(DBF) or (SQL) in the file
name.
16. Give it a good description can even be done
with HTML.
17. Choose the level at which
you want to save it: Local,
Project or Global (see notes
at left).
18. Click OK and confirm.
19. WPCP: Create a new grid component and stop at the templates screen.
20. Select your new template and click OK.
A new, untitled grid based on MyEditing opens. It has all the features
that you designed earlier, including an updateable grid.

Using a Stacked Columnar Layout


COMPLETED COMPONENT

The finished component for this section is StackedColumnar.


As we have already seen, there are three pre-set Grid Layout styles, Tabular,
Form (Columnar) and Stacked Columnar.
Stacked Columnar is used less than the other component styles. Probably
because it can take up a lot of room on the page since the default layout places
titles atop the fields and records stacked one on top of the other.

338

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

But. It doesnt always have to be that way, as well show you next.

Well also introduce some


other features like Accordion
Containers and Collapse Bars.
They can take even a large
grid and reduce it down to a
very small size.
This is an important exercise, because it introduces
important features that can be
used in other grid formats,
too.
In the preview at left, note
that the labels are above the
fields.
1. Create a new, blank grid component.
2. Choose Stacked Columnar; Grid is Updateable
and add a Search Part.
3. Grid > Data Source = Alpha Anywhere .dbf Table.
4. Grid > Query: Table name = Clients.
5. Grid > Fields: Select and order as at left.
6. Search > Fields: Select and order as at far left.
7. Save the component as MyStackedColumnar.
8. Go to Working Preview and scroll down to see
how the records are stacked on top of each other.
9. Return to Design mode.

339

CHAPTER 7. GIFTED GRIDS


Using a Stacked Columnar Layout

Grouping fields into rows


SPECIAL CONTROLS

Special Controls will let us combine the fields into groups so they wont be
so spread out. We can also add labels and spacers.
These special controls are added to the Selected list and have
properties of their own. As you can see from the list below, you can
add buttons, hyperlinks and images. You can even link another grid
to the component. Well do all that later.
In this exercise, we will use Merge Cells Begin and End to group
fields together in rows and Static Text to add labels for the groups.
A Row Spacer will add a finishing touch.
10. Grid > Fields.
11. Click Insert... at the bottom of the Available Fields list.
12. Choose Merge Cells Begin and click OK.
13. Move it under Client ID.
14. Click Insert again and choose Merge Cells End. (Click OK)
15. Move it below Last_name.
16. Add another set of Merge Cells Begin & End and place so that your
Selected list looks like the one at the left.
17. Click Working Preview.

Instead of the fields being on top of each other, they are now side-by-side in
two groups.
18. Return to Design mode.

Adding static text labels


Static text is just that text that doesnt change works perfectly for a
label.

340

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

19. Return to Design mode and click insert.


20. Add two Static Text controls and place them under Merge Cells Begin,
1 & 2 as at left.
21. Click on them in turn modify their Field Properties as follows:
PROPERTIES: [STATIC TEXT].1
STATIC TEXT PROPERTIES

Static text: Click the button and enter Name: in the HTML edi-

tor. Color it Dark Red and make it Bold. (Click Save)


STATIC TEXT PROPERTIES

PROPERTIES: [STATIC TEXT].2


Static text: Repeat as above, except type Company, City, State,

Zip:
22. Save and go to Working Preview.
Pretty neat, dont you think? Next,
well change some of the Update Settings as we did in before.
23. Return to Design mode.
LAYOUT OPTIONS

EDITING PROPERTIES

TABBED UI NAVIGATOR: GRID > PROPERTIES


Rows of data: 1 (This will get rid of the stacks.)
TABBED UI NAVIGATOR: GRID > UPDATE SETTINGS
Row edit style: RowOnDemand.
New records edit style: ShowOnDemand.
Hide new record row after insert: Yes.
New records button label: New records.

24. Save and go to Working Preview.

Adding a merge cell heading


25. Return to Design > Grid > Fields
MERGE CELL PROPERTIES

PROPERTIES: [MERGE CELLS BEGIN]. 1


Row heading: Type Click pencil to edit.
Heading In-line Style > Font > Color: Blue.

Adding a row spacer


Next, well add a spacer so its not so crowded at the bottom.

341

CHAPTER 7. GIFTED GRIDS


Using a Stacked Columnar Layout

26. Click Insert and put a Row


Spacer at the bottom of the fields
list.
27. Click Working
Looking good!

Preview.

But. Were not done yet! More exciting stuff to come, so hold off a moment
before you take a break.

Using a master template


This template serves a totally different purpose than the one we used above.*
The Master Template defines the placement of the various parts of your component on the page and/or places them in containers. Well use an accordion style
this time and check out the others later.
ACCORDION CONTAINER

Each grid will be placed in a container that is opened and closed by clicking
on a bar.

28. Go to Design mode.


MASTER TEMPLATE

TABBED UI NAVIGATOR: GRID > PROPERTIES


Use a master layout template: Yes.
Master layout template style: Accordion Container.
Search pane label: Search.
Grid pane label: Clients.
Accordion style: Multiple.
Initial open panes: Search, Grid.

29. Save and go to Working Preview.


30. Click the Search title bar.
The Search part disappears.
31. Click the Clients bar.
Both are collapsed.
32. Play around a bit and then go back to Design mode.

*. Creating a template on page 337.


. See on page 322.

342

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

ACCORDION STYLE

MASTER TEMPLATE

INITIAL OPEN PANES

MASTER TEMPLATE

There are two Accordion styles, Multiple


(default) and Single. The difference is that
with Multiple, the Search and Grid parts
both stay open and you toggle back and
forth between them. With Single, only one is open at a time. Lets try that next.
TABBED UI NAVIGATOR: GRID > PROPERTIES
Accordion style: Single.

The number of open panes and which one


opens first are both your choice. Above, we
had both panes open, with Search opening first. This time well just open
Search; the grid will be opened by clicking on Clients, at which time Search will
close.
Initial open panes: Search.
33. Go to Working Preview.
The Search part is open and the grid is closed.
34. Click Clients to open the grid the search closes.
35. When finished testing, return to Design mode.

Adding a collapse bar


Now well tuck everything into a single bar that opens and closes with a single click.

LAYOUT OPTIONS

TABBED UI NAVIGATOR: GRID > PROPERTIES


Can collapse grid: Yes.

36. Go to Working Preview.


37. Last name: Enter and.
38. Press ENTER or click Search.
39. Click the Clients bar.
The Search part closes and Clients shows 3
records are found.

40. Select 5 records from the record navigator to see them all.
41. Click Collapse Grid.

343

CHAPTER 7. GIFTED GRIDS


Understanding the Form (Columnar) Component

Hows that for a space saver?.

If you have just been reading this exercise and not actually doing
it, you really need to see Accordion Containers and Collapse
Bars in action to appreciate them. You can go back and forth
from Search to Clients and then collapse it all into an inch high
bar.

Are you impressed? We have just touched on the layout possibilities. Grids
certainly arent just grids. And we did it all with Stacked Columnar, probably
the least used of the styles. Form is even more flexible and thats coming up
next.
GO TO ALPHA VIDEO 13, 14

By now, Im sure youre not surprised to learn that there are videos on Master Templates and the Collapse Bar. Go to:
Videos > Filter: Enter Master Templates.
Videos > Filter: Enter Collapse Bar.
42. Save and close the component.

Understanding the Form (Columnar) Component


COMPLETED COMPONENT

The completed grid component for this section is FormSnake.


The Form (Columnar) grid component is the most flexible type of grid. In
early versions, it was called Columnar, hence the double name from here on
in, well just refer to it as Form. Well do one exercise here and refer you to Volume 1 for further discussion. This one will have a Detail View and employ some
variations on the elements we used in Volume 1.
1.

WPCP > Grid Component Demo Web Project: Open


FormSnake_Practice in Edit mode.

344

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

It is a read only Form

component, with an
updateable Detail View.
The Data Source is .DBF
and Query > Table is clients.
Fields have been added
for both the Grid and the
Detail View.
2. Click Read More
(checked at left).

The information window describes the flexibility of the Form component


and mentions frames, accordions and tabs. We already know about accordions and well use a frame in this exercise.
TAB CONTROLS

Tab Controls allow you to sort fields with a tabbed interface (yellow at left).
They are defined at Grid > Fields > Insert. *
FORM STYLE: Form layouts usually show only one record a a time.

What may seem mysterious to you (it was to me at


first) is the reference to snaking forms. Turns out this
grid format is typical of many shopping carts, such as
Amazon.com and our own, LibertyManuals.com. In
the screen shot at left, for example, images of our
books are grouped with prices and hyperlinks to
detail pages. They are side by side and snake their
way from left to right and top to bottom. Thats what
well do next.

*. See on page 322.

345

CHAPTER 7. GIFTED GRIDS


Understanding the Form (Columnar) Component

3. Go to Working Preview.
At the beginning, Form looks very much like
Stacked Columnar, with the records placed one atop
the other. One difference is that instead of the labels
being above the fields, they start out next to the
field, as you might see in a desktop form.
4. Scroll down to look at the images. They are different sizes because thats how they were added to the
table.
We will correct the image display size and group
the fields with a Special Control called a Frame.
5. Return to Design mode and go to Grid > Fields.
There are three fields, Last_name, Photo and Client_id.

Resizing images
We will keep the images quite small because when you enlarge an image it
may become pixilated. Better to go from large image to small than the reverse.
Problem is that images take up space in the database. Best of all, import them at
the correct sizes.
PROPERTIES: PHOTO
IMAGE PROPERTIES

Inline Style: Click the Button.


Position tab > Size: Width: .5 inch; Height: .5 inch.

6. Go to Working Preview to see the revised sizes.

Grouping fields with a frame


Field can be organized into groups by using a frame. There are two styles
and they can have titles (called labels) that identify the group.
7. Return to Design > Grid > Fields.
8. Click Insert. (Hyperlink below Available Fields)
Tabs, Frames and Containers have been added to the list of Special Controls that we used in the previous exercise.
9. Click Frame Begin. (Click OK)
The Insert Frame dialog asks for the name of the frame (optional)
and if you also want a Frame End. to be automatically added.

346

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

10. Frame label: Type Hobby and add a closing [Frame End] tag. (Click
OK)
11. In the Selected list, move Frame:Hobby to the top and Frame: End to
the bottom as at left.
12. Go to Working Preview to see the frame around each group of fields.
13. Return to Design mode.

Snaking the records


Its finally time to snake those records. There are two formats:
TBLR: Top to bottom, left to right.
LRTB: Left to right, top to bottom.
The option opens after the number of repeating
columns is increased (default =1).

LAYOUT OPTIONS

TABBED UI NAVIGATOR: GRID > PROPERTIES:


Repeating columns: 3.
You may need to click in another row to open Snaking style.
Snaking style: TBLR.

14. Go to Working Preview.


CELL SIZE

Right now, the width of the Last_name field is controlling the width of the field module. We can make
it consistent by adjusting its cell width and height.
15. Return to Design mode.
ROW PROPERTIES

PROPERTIES: LAST_NAME.
Cell in-line style: Click the button to open the Style Editor.
Position > Size: Width and Height.

You can enter the dimension in

any way you like. We used inch


before so this time will use pixels,
another measurement style.
16. Enter as above and click OK to
see how it is entered in the textbox.
height: 50px; width: 100px;
You can also type it directly into

the text box, just be sure to keep


the semi-colons.

347

CHAPTER 7. GIFTED GRIDS


Understanding the Form (Columnar) Component

Next, well change some of the field labels:

17. Change row labels as below and enter a colon and a space after each.
ROW PROPERTIES

PROPERTIES: LAST_NAME, PHOTO & CLIENT_ID


Row label for Last_name: Last name:
Row label for Photo: Symbol:
Row label for Client_id: Client ID:

18. Go to Working Preview.


Refresh display if necessary (press F5 or click the Preview tab).
Next, well work on the Detail View.
19. Return to Design mode.

Opening the Detail View in a window


We need to specify the link so we can open the Detail View to the proper
record. Well also have the Form component close when the Detail View opens
and vice-versa.
DISPLAY PROPERTIES
LINK PROPERTIES

DETAIL VIEW DISPLAY

PROPERTIES: CLIENT_ID.
Control type: Link.
Link address type: DetailView link
TABBED UI NAVIGATOR: DETAIL VIEW > PROPERTIES.
Method to display Detail View: Choose Click a hyperlink field.
Hyperlink field: Client ID.

DISPLAY OPTIONS

Detail view window position: OnPage.


Pre-fetch data: Yes
Only show Detail View on request: Yes
Hide Grid part when Detail View is visible: Yes

20. Go to Working Preview


21. Click a Client ID link to open the Detail Image and close the grid.
22. Click the x at the bottom of the Detail View (circled).
This time, the DV closes and the Grid opens.
23. Return to Design mode.
Next we will filter the records and group them by Hobby.

Filtering the records


We want to group the records by hobby, but some of them have photos
instead of symbols. In order to separate them out, we added a field
called Has_symbol that we will use as a filter. This is done in the Query
pane.

348

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

TABBED UI NAVIGATOR: GRID > QUERY (DBF)


Filter: Click the smart button to open the Expression Builder and enter

the following: Has_symbol = .t. (Click OK)

Grouping the records


Grouping records is particularly useful for snaking grids. This is simple
enough to do, but there are a few steps. We will use the Hobby field as the group
break.
First, we will add the Hobby field to the grid so its
value can be used, and hide it so its row doesnt display.
Next, we will change the snaking style to LRTB (Left to
Right Top to Bottom) the only one that supports grouping and adjust the rows of data that display.
Then, we will turn on group breaks and define the breaking field and the headers and footers.
The final step will be to set the header and footer to display flush left.
24. Go to Grid > Fields.
25. Add the Hobby field to selected (bottom of list).
ROW PROPERTIES

PROPERTIES: HOBBY
Hide row: Yes.

LAYOUT OPTIONS

TABBED UI NAVIGATOR: GRID > PROPERTIES


Snaking Style: LRTB.
Rows of data: 20.

GROUP BREAKS

Has group breaks: Yes.

349

CHAPTER 7. GIFTED GRIDS


Understanding the Form (Columnar) Component

Define group breaks: Click the button.

a. Break
b. Has

field: Click Select and choose the Hobby field.

Group Header? Yes.

c. Replace

the text that says Enter group break HEADER text here (yellow highlight above with:
Type Hobby:
Click Insert field: Choose Hobby. (Click OK)
Result: Hobby: {Hobby}

SUMMARY FOOTER

Next, we will add a footer that gives the count of the records in the group.
d. Has

Group Footer? Yes.

e. Replace

Enter group break FOOTER text here with:

Type Count:
Click Insert Summary Field. Choose Last_name (or any other
field doesnt matter since were just counting records).
Summary type: Choose count. (Click OK)
Result: No of participants: {[[groupSummary.Last_name.count]]}

350

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

ALIGN HEADER / FOOTER


a. Click Help on How

to Specify the
Header or Footer for instructions on
placement.

Hmmmm. I sure hope you can


understand that. Not so sure that
I do. Anyway, I can explain how
to go from the default (inset at
left) to flush left.
To make them flush left, we will need to remove a line of code for

each.
b. Delete

the Header line shown in green in the above screen shot. Just
remove the code and leave a blank space.

c. Repeat
d. Click

for the Footer.

OK

26. Save and go to Working Preview.


Now, tell the truth wasnt that fun? Hope you enjoyed dessert, because the
rest of this chapter is more like cough syrup necessary to the health of your
application, but not very tasty at least to me. You techy types should love, it
though. And the rest of you, please persevere.
27. Save and close the component.

Understanding Arguments*
COMPLETED COMPONENT

The finished component for this section is Argument.

The dialog at left asks the end user to choose a state from a list in a
drop down box that, in turn, is used to filter the grid. In other words, if
the user chooses CT, the records for that state will appear.
Defining the Argument automatically creates the dialog. It can be either
simple (below) or customized by adding a header and footer and
optional Cancel button (left).
The Argument can get its value by prompting or from a Variable. We
will use the former.
*. This sections is reprinted from Volume 1, so if you have already done it, you can skip ahead.
. Variables fields that hold temporary data. They are discussed in Volume 1.

351

CHAPTER 7. GIFTED GRIDS


Understanding Arguments

THE COMPONENT

We will use the argument to ask for records containing a certain state, thus
binding the argument to the State field.
The field to which the argument is bound must be in Selected.
If you are using a View, be sure it is included in the Fields in View list so
you can add it to Selected.
The field does not have to appear in the grid (can be hidden).

Defining the argument


First, we will create a dialog that employs a text box for user input.
Then we will change the control type to a drop down box and customize the Prompt and Prompt Page.
1. WPCP: Grid Component Demo Web Project: Open Argument_Practice in Edit mode. It is set up as follows.
Read-only tabular grid with Search part.
DBF data source, based on the clients table.
Grid Fields: First_name, Middle_initial, Last_name, City, State.
Search part fields: First_name, Last_name, Company, State
TABBED UI NAVIGATOR: GRID > QUERY (DBF)

2. Click the Define Arguments button.

Dialog Title: Define Arguments


a. Click

Insert New Argument.

Dialog Title: New Argument


b. Argument
c. Data

name: WhatState.

type: Character. (Click OK)

Dialog Title: Define Arguments

Fill in the following in the right pane. Note explanations in the tip win-

dow.
d. Get

argument value from: Choose Always prompt for value.

e. Preview

352

value: Leave blank.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

PREVIEW VALUE

The purpose of the Preview value, is to avoid having to enter a value each
time the component is tested. For example, if the Preview value = NJ, the Argument dialog will be bypassed and the NJ records will appear at the PREVIEW
tab. Clicking Working Preview will always bring up the dialog.
To avoid confusion, we will leave it blank for the exercise. You can go back
and try it out it later to see how it behaves.

Defining the prompt


The Prompt asks for user input. It consists of text and a control type. There
are four types of controls, Drop Down Box, List Box, Radio Button, TextBox.
All have Choices except TextBox.
Dialog Title: Define Arguments
a. Define

Prompt: Click the button.

Dialog Title: Define Prompt


b.

Prompt Text: Enter What State?

c. Control

Type: Choose Text Box. (Click OK twice).

Using the argument in a filter


Now that we have the argument, we can use in a filter expression.*
3. Filter: Click the smart button
to open the Expression Builder.
Note the Argument option in
the Expression Builder at far
left.
d. Press

F2 to open the Insert Field window. Choose State. (Click


Insert)

e. Press
f.

= (the equals sign)

Press F10 to open the Insert Arguments window. Choose WhatState.


(Click OK)
The expression is entered: State=:WhatStateArgument
The colon is part of the syntax and indicates to Alpha Anywhere
that this is an argument.

g. Click

OK.

The filter expression is entered into the Filter text box.

Testing the argument and filter


Time to see how this all works.
4. Save the component as MyArgument.

*. To create a filter without using an argument, use the Filter Builder (explained in Volume 1). The Expression Builder is detailed in
Alpha Anywhere Made Easy, The Basics and More for the Desktop (available at www.libertymanuals.com).

353

CHAPTER 7. GIFTED GRIDS


Understanding Arguments

5. Go to Working Preview.
The argument comes up.
6. What State: Enter NJ.
(Click Submit)
The grid comes up with
records where the state = NJ.
If there had not been any NJ records, No records in query would have been
returned (above left).
Now that you have a basic understanding of how an argument works, we
will dress it up a bit by changing the control type and make it a bit more
user friendly.

Adding a drop down box


7. Return to Design mode.
8. Grid > Query: Click Define Arguments.
Dialog Title: Define Arguments
a. Define

Prompt: Click the button.

Dialog Title: Define Prompt


b.

Prompt Text: Enter What State would you like?

c. Control

Type: Choose Drop Down Box.

CHOICES

These values will appear in the drop down box.


d. Choices:

Click the button.

Dialog Title: Enter list of choices


e. Enter

the following: NJ, CT, TX, MN, OR, WA. (One on each line).

f. Click the A-Z button at the right to sort in alphabetical order. (Click
OK twice)

Defining the prompt page


You can put text above and below the prompt and include Submit and Cancel
buttons The text is optional, as is the Cancel button.
Dialog Title: Define Argument

9. Click the Define Prompt Page button (at bottom of


dialog).

354

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Define Prompt Page


g. Text

above form: Click the button.


HTML Editor: Type and format Enter state. (Click Save)

h. Text

below form: Click the button.

HTML Editor: Type and format Thank you for choosing a

state. (Click Save.)


10. Click the Preview button to see the entries. (Click OK (twice)
11. Click OK again to close the Define
Arguments window.
12. Go to Working Preview.
13. What state would you like? Choose
WA. (Click Submit)
You can test the other state values by
going back and forth from Working Preview to Design.
14. Return to Design mode.
15. Save the component and keep it open for the next exercise.
GO TO ALPHA HELP

There are several pages on Arguments.


Documentation > Filter: Enter Argument.

Ordering Records
This exercise continues from the previous one. The MyArgument* web com-

ponent should be open.


COMPLETED COMPONENT

The finished component for this section is Argument.


An order filter uses fields. In this case, we want to see the records that have
been chosen for a given state in Last name, First name, Middle Initial order. The
use of the Order Builder is very straightforward. The only notes are the Expression Builder button and binoculars at the bottom right of the window.
1. Grid > Query: Order: Click the smart button.

*. If you did not do the previous exercise, you can open Argument.

355

CHAPTER 7. GIFTED GRIDS


Taking a Quick Look at the Code Section

2. Enter the following order:


Sort by: Last Name.
then, sort by: First Name.
then, sort by: Middle Initial.
REVERSE ORDER

Click on the A-Z buttons to

reverse the order. Can be done


for one or more fields.
VIEW EXPRESSION

You may go to the Expression


Builder (button at lower right)
at any time, but if you do so, you cannot return to the Order Builder unless you
clear the work space.
To see the expression and still keep the Order Builder, click on the binoculars (red circle above).
The expression is: Last_name+First_name+Middle_initial.
You can also copy the expression at this window and use it in other
expressions.
i. Click

Close.

3. Click OK to close the Filter Builder.


SORT DIRECTION

4. Sort direction: Ascending (default).


5. Click Working Preview.
6. Choose TX from the drop down
box.
7. Click Submit.
The records follow the sort order.
8. Save the component.

Taking a Quick Look at the Code Section


This section continues from the previous one. MyArgument should still be

open.
Code can be developed for both Server-side and Client-side Events and
Functions. This section is for advanced users and it is beyond the scope of this
book to instruct on the use of these events.

356

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Events direct component behavior. For example, OnGridInitialize fires when


the grid opens. When you click on an event, the code is displayed. Click for info
on this event brings up a description.
1. Grid Builder Navigator: Select Events and click
on CanSearch or any other
event.
2. Click Click for info on
this event below the Events
window.
3. Click Close.

Editing
events
Undo edits becomes active

when the code has been


changed.
Default function prototype resets back to the default code.
4. Test by typing something in one of the windows
as at left.
5. Click Default Function Prototype.
A warning asks if you want to overwrite changes.
6. Click Yes to return the code to the default.
7. Click Zoom to open the Code and Interactive
Window editors. (Click Cancel)

Annotating the Grid Component


This section continues from the previous one. MyArgument should still be

open.
Weve said it before and well say it again annotate, annotate, annotate!
Describe your component now, while its fresh in your mind. Youll love yourself later.
1. Grid Builder Navigator: Select Information.
a. Description:
b. Created
c. Last

Enter Clients by state.

by: Enter your name (may be grayed out).

updated by: Enter your name.

357

CHAPTER 7. GIFTED GRIDS


Annotating the Grid Component

d. Dates created and updated: Entered by Alpha Anywhere (not change-

able).

2. Comments: Filtered with Argument that asks What state would you
like. Drop down list of acceptable states. No security.
We recommend you note security here, one way or the other.

3. Save and close the component.


Now wasnt that worth the time and trouble? We repeat, In the web world,
grids are the greatest!

358

Chapter 8.

Sexy SQL Secrets

No magic just great design


The prestidigitation is in Alpha Anywheres astonishing aptitude for adapting to almost
any type of data. Once the connection is made, youll feel like you are waving a magic wand
because your application comes together so easily!
Enough talk on with the show!

CHAPTER 8. SEXY SQL SECRETS

What youll find here


Topic
How the Chapter is Organized

361

Creating and Managing Connection Strings

362

Using connection strings developed for this book

361

Understanding the data source

362

Editing an existing connection string

362

Creating a new connection string

363

Using an existing connection string in a Grid

363

Creating an Ad Hoc (temporary) connection string in a Grid

364

Understanding connection strings in a UX component

365

Creating a SQL Select Statement

368

Understanding Alpha Anywhere Reports:

371

A. Creating SQL Reports

372

B. Printing SQL Reports

374

Creating SQL Reports


More Important Info:

360

Page

372
376

Understanding server connections

376

Using Alpha Anywhere with SQL on the Desktop

377

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How the Chapter is Organized


By this time, you should be very comfortable with using basic Connection
Strings in order to use SQL databases with Alpha Anywhere. However, there
are additional Connection String options with which you may not be familiar, as
well as some other SQL / Alpha Anywhere features that we want to be sure you
know about.
Well start with Connection Strings and then describe the internal SQL Select
Statement genies. After that, well give you some notes on how SQL Reports
are handled and really important info that you should know before you take
your project live.
And lets not forget the desktop side. Alpha Anywhere has two utilities that
can bring all its user friendly and sophisticated design features to you as the
developer, while still keeping your data in its original format.
This chapter uses the Grid Component Demo Web Project.

Using connection strings developed for this book


We have set up several connections strings for you for the lessons in the
book. One is just for Liberty Manuals users, the others come with your Alpha
Anywhere software package. Please adjust the settings if you have any trouble
with the existing connections. Editing is described on(page 362.
ABC SEMINARS

For your convenience, we have included the following databases with your
book files:
Liberty Manuals database:
ABC_Seminars_Access:
:\Alpha_WebMobileBook_3.0_Volume2 \ ABC_WebMobile_Lessons\
SQL: Choose ABC_Seminars_Access.
Alpha Software databases:
Alpha Sports, Northwind, Contact Manager and Notes.
Same as above.

ALPHA SOFTWARE

IMPORTANT NOTE

Here are the actual locations of the Alpha Software files.


Northwind: c:\ Program Files (or Program Files x86) > a5v12 (or latest
version) > MDB Files: Choose Northwind.
Alpha Sports: Same as above, except choose AlphaSports.
Contact Manager: Same as above, except as follows:
MDB Files > Sample Applications: Choose Contact Manager.
If you use the Alpha Software default locations above, you will be able to
view the data, but not update it because Windows 7 and later will not let you
change files in the Program Files directory.* Therefore, we recommend using
the ABC Seminars paths.

*. There is a way to do this, but its just easier to use ABC Seminars paths.

361

CHAPTER 8. SEXY SQL SECRETS


Creating and Managing Connection Strings

Creating and Managing Connection Strings


You can add connections on the fly when you create components, but the
quickest way to create and manage your connections is at the Web Projects Control Panel. The following screens handle creating and editing them.

Above: #1. AlphaDAO Connections, #2 Edit AlphaDAO Connections, #3 Create SQL Connection String

Understanding the data source


Alpha Data Access Objects (Alpha DAO) is Alpha Softwares proprietary
connection method. It is similar to Microsoft ActiveX Data Objects (DAO), but
better because AlphaDAO allows the use of AJAX (Asynchronous JavaScript
and XML). AJAX is built-into Alpha Anywhere, resulting in superior response
times without additional coding.
1. WPCP: Click the SQL button on the toolbar.
2. Choose AlphaDAO Connection Strings.
The strings created for this book are listed.
3. Click each in turn to see the existing paths.

Editing an existing connection string


Changing the path of an existing string is quite simple. In this case, our databases are all MS Access, but they could easily be another Connection Type.
4. Select AlphaSports and click Edit.
Dialog Title: Edit AlphaDAO Connection

5. Click Build.

362

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Create SQL Connection String

6. File Name: Change the path as necessary. (Click OK twice)


The new path will appear in the listing.

Creating a new connection string


When you create a new connection, you will give the connection a name,
specify the Connection (database) Type and File Name path. You can also specify Passwords if you desire.
Dialog Title: AlphaDAO Connections

7. Click the New button.


Dialog Title: Edit AlphaDAO Connection

8. Connection Name: MyNewConnection.


9. Click Build.
Dialog Title: Create SQL Connection String

10. Connection Type: Choose from the following:


Access, ADONET, DB2, Excel, MySQL, ODBC, Oracle, Oracle
Light, Paradox, PostgresPlus, PostresSQL, Quick Books, QuickBooksOnline, SQLServer
11. File Name: Navigate to the database location.
12. User: Admin (default) or specify other user.
13. Optional settings:
Password, Database Password, Workgroup File.
Timeout settings (Login, Connection, Query).
14. Click Test Connection.
Good connection will result in Succeeded notice.
15. Click OK twice.
Dialog Title: AlphaDAO Connections

The new connection will appear in the listing.

Using an existing connection string in a Grid


We have already seen how to use existing strings, but heres a quick review.
The settings are saved with the component, but may be changed later, if desired.
NAMED CONNECTION
STRING

Existing connections are called Named Connection Strings.

363

CHAPTER 8. SEXY SQL SECRETS


Creating and Managing Connection Strings

16. WPCP: Create a new, blank Grid


Component or open an existing one.
17. Data Source: Choose SQL Database accessed via AlphaDAO (Alpha
Data Access Objects).
18. Query > Connection Type: Choose
Use Named Connection String.
19. Click Select to choose the connection.
20. Click Connect to connect the component to the database.

Creating an Ad Hoc (temporary) connection string


in a Grid*
You can also create a string that is not saved for future use. The connection
will be saved with the component, but will need to re-created in order to use it
elsewhere. This type is created at the component level.
21. Repeat step 16 and step 17 above.
22. Query > Connection Type: Choose Specify Connection String.
SPECIFY CONNECTION
STRING

This option goes straight to Create SQL Connection String.


23. Connection Type: Choose Specify Connection String.
24. Click Build to define the string as
above.
a. Click

OK.

The Zoom button opens the Edit Connec-

tion String dialog in case you need to make a


change after the connection is created.

*. Ad hoc is a Latin phrase meaning for this. It generally signifies a solution designed for a specific problem or task, non-generalizable, and not intended to be able to be adapted to other purposes.
http://en.wikipedia.org/wiki/Ad_hoc

364

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Understanding connection strings in a UX


component
As you know by now, Grids are always connected to a database, but UX
Components may or may not be connected. Connecting a UX is referred to as
binding the data. This was covered in Volume 1, but heres a quick refresher.
25. WPCP: Create a new UX component or open an existing one.
26. UX Builder Menu: Click Data Binding.
27. Click Bind the controls on your UX to fields in one or more existing tables.
28. Click Specify Tables.

Dialog Title: Select Table(s)

29. Table type: Choose SQL.


30. SQL Connection String: Click Select.
Dialog Title: Connection String

EXISTING, TEMPORARY,
EXCEL, ACCESS

You have the option of:


Using a named connection string.
Specifying a connection string (see temp
Connecting directly to an Access Database or Excel File.

31. Click Edit saved connection.


EDIT EXISTING OR ADD
NEW CONNECTION
LIST DETAIL VIEW

This opens the AlphaDAO Connections dialog where you can edit

existing connections or add new ones.


The List Detail View presents another method for connecting to the data.
See Data Connection: Comparing Data Binding & List Detail View
Methods on page 207.

Completing the SQL Query Pane in a Grid


COMPLETED EXAMPLE

SQLView

There are certain elements of the SQL Query pane that bear a further look.

365

CHAPTER 8. SEXY SQL SECRETS


Completing the SQL Query Pane in a Grid

1. WPCP: Create a new, blank Grid Component.


2. Save it as MySQLView.
3. Data Source: Choose SQL Database accessed via AlphaDAO
4. Continue at Grid > Query (AlphaDAO).
Connection Type: Use Named Connection String.
Connection String: Choose Northwind.
5. Click Connect.
Grids can be based on the following:
TABLE OR VIEW

Existing tables or views (see below).

SQL SELECT STATEMENT

Creates a view that does not exist in the database (see Creating a SQL
Select Statement on page 368).

STORED PROCEDURE

Stored Procedures are compiled SQL code stored in the database. Calling
stored procedures as opposed to sending over query strings improves the performance of a web application. Not only is there less network traffic since only
short commands are sent instead of long query stings, but the execution of the
actual code itself also improves. The reason is because a stored procedure is
already compiled ahead of time. Stored procedures are also cached by SQL
Server when they are run to speed things up for subsequent calls.*

Using table or view


We will use an existing View.
REMEMBER TO REFRESH

If you change the structure of the


table or view after selecting it for the
component, you will need to refresh the
field list (red circle at left) in order for
the changes to be reflected in the grid.
a. Base

on: Choose Table or View.

b. Table/View

name: Click Select.

*. Documentation > Filter: Enter Calling SQL Stored Procedures. David Brown explains the benefits with examples.

366

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dialog Title: Select Table

By default, only Tables are listed.


Other options are Views, Linked and
System Tables and Aliases. You can
include Catalogs, Owners and Schemas.*
c. Table

types: Check Views (Table


should remain checked).
Note the icons that differentiate
between Tables and Views.

d. Available

Tables and Views: Choose


Category Sales for 1995 (View). (Click
OK)

The rest of the Query page options are similar to DBF, so well just take a

quick look.
DEFINE ARGUMENTS

Same as for DBF. See Understanding Arguments on page 351.


FILTER

Filters are entered in the standard SQL format.


a. Filter:

Click the button.

Dialog Title: Specify Filter

The filter is entered here in the

standard Access format.


To enter a field, highlight it and
click the > (green at left).
b. Click

Cancel.

ORDER
a. Order

by: Click the button.

To enter field names, click the >.

Use the Comma button to separate


fields.
DESC is also available.
b. Click

READ ONLY?
SELECT PRIMARY KEY

Cancel.

Same as DBF. See Query page read only on page 326.


Alpha Anywhere looks for ID field(s) and automatically marks as Primary
Key(s).

*. Owners & Schema: SQL Server 2005 introduces the concept of schemas as opposed to object owners found in previous versions.
For a full description of the differences, go to http://www.sqlteam.com/article/understanding-the-difference-between-owners-andschemas-in-sql-server. Catalogs: Some SQL databases also use catalogs. They are just another type of container for database
objects, typically a container around schemes. http://hsqldb.org/doc/guide/databaseobjects-chapt.html.

367

CHAPTER 8. SEXY SQL SECRETS


Creating a SQL Select Statement

SELECT SEQUENCE

Databases like Oracle, use sequences to generate the next available value for identity (i.e.
Primary Key) columns.
a. Click the Select Sequence button to see the dialog at left.
b. Click

SELECTING AND DEFINING


COMPONENT FIELDS

Cancel.

Fields are added and properties are defined in the same manner as for DBF
tables.
6. Go to Grid > Fields.
7. Move both fields from Available into Selected.
PROPERTIES: CATEGORYNAME
COLUMN PROPERTIES

Column heading: Change to Category


Cell in-line style: Position > Width = 1.5in
PROPERTIES: CATEGORYSALES
DISPLAY SETTINGS

Display format: Choose the following Pre-defined for-

mat:
$123,456.00.
COLUMN PROPERTIES

Column heading: Change to Sales

8. Save and go to Working Preview.


Next, we will create a SQL Select Statement.

Creating a SQL Select Statement


This section continues from the previous one. MySQLView should be open

in Design mode.
COMPLETED COMPONENT

The completed component is SQLSelect.


When SQL Select Statement is chosen, the Query page takes on a different
appearance.
1. Go to Grid > Query (AlphaDAO).

368

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

The screen shot below shows the pane with the statement filled in.

For this exercise, we will use the component designed in the previous section and save it under a new name.

2. Save MySQLView as MySQLSelect.


a. Base

on: SQL Select Statement.

b. Click

Edit SQL in Query Builder.

Dialog Title: SQL Genie (screen shot below)


a. Tables

tab: Click the Add Table button.

Dialog Title: Add Table


b. Available

Tables: Choose Orders. (Click OK)

Dialog Title: SQL Genie


c. Tables

tab: Click the Add Table again.

Dialog Title: Add Table


d. Available
e. Linking
f.

Tables: Choose Order Details. (Click Next)

Fields: Choose Order ID for both.

Click Define Join Type.

369

CHAPTER 8. SEXY SQL SECRETS


Creating a SQL Select Statement

JOIN TYPES

There are two types of joins, Inner and


Outer.
Inner Join: Includes only records
where the joined fields from both tables
are equal (default).
Outer Join: Three options for including all records are described.
g. Join

type: Choose Inner.

h. Click

SQL WINDOW

OK and then Finish.

As the options are selected, the SQL Select Statement is written (pink
above). The code may be accepted as written by the Genie or edited manually at
this window.
ADDING FIELDS

The
fields
are
selected at the Columns tab.
Dialog Title: SQL Genie
i. Click the Columns
tab.
j. Choose

the fields as

at left.
FILTER & ORDER

Filtering and Ordering are also defined


here at the SQL
Genie (see tabs at
left), rather than in
the Query pane.
PREVIEW

There are two ways to preview the data


after the Columns have been selected.
Click the Preview tab.
Click Execute Query at the bottom of
the SQL Genie (opens Preview tab).
k. Click

EDITING THE SQL

370

OK to return to Grid > Query (AlphaDAO).

The SQL Select Statement on the Grid > Query page is read only.
To edit, click the Edit SQL in Query Builder button.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

PRIMARY KEYS

This time our view contains ID numbers, so Alpha Anywhere looks for and chooses them as the Primary Keys.
You can change if desired.
a. Primary

Key: Click Select Primary Key.

The following IDs are checked by default.


Orders = Order ID.
Order_Details = Order ID & Product ID.
Note the Table is read-only and Primary key is auto-

increment options (yellow).


b. Click

Cancel.

Selecting fields for the Grid


Now that we have the Query page defined, its time to select the component fields in the usual manner. The process is the same as we have done previously, but, since we are using a grid that already has fields, we need to
remove the originals and replace them with the new ones.
3. Go to Grid > Fields.
4. Selected: Click Un-select all fields. (Click Yes to confirm)
5. Available: Click Select all fields and then remove <RowNumber> and
<LogicalRecNo>

6. Click Working Preview.


7. Save and close the component.

Understanding Alpha Anywhere Reports:


Alpha Anywhere has an excellent built-in report writer, eliminating the need
for an outside program. It works with both DBF and SQL files. We have
detailed its use in the Alpha Anywhere Report Writer, Reporting and Charting
Made Easy.*
*. Available at www.libertymanuals.com.

371

CHAPTER 8. SEXY SQL SECRETS


Understanding Alpha Anywhere Reports: Creating SQL Reports

DBF REPORTS

DBF users will create reports at the Control


Panel > Reports section in the usual manner.

SQL REPORTS

SQL reports are designed


at the Web Projects Control Panel and are stored in
the Reports (Project) section and become a part of
the specific project.

The design process is the same for both file types. As is so often the case in
Alpha Anywhere, only the connection is different. Heres a quick look making
the connection and well even wind up with a report at the end!

A. Creating SQL Reports


COMPLETED REPORT

The completed report is Quick Report Demo.a5rpt. (Reports section of the

Grid Component Demo Web Project)


The connection process is the same as we have already seen. You can have
Named (saved) or Ad Hoc (temporary) connections for Reports, Letters and/or
Labels. Heres a quick review on getting started:
1. WPCP: Select Reports (Project) and then click New on the toolbar.
2. Choose Create New Report.
3. Click Use Quick Report. (Click OK)
Dialog Title: Specify DataSource

4. Choose Named Connection String.


5. Connection string name: Choose Northwind. (Click Next)
Dialog Title: Specify DataSource (Page 2)

6. Select the following:


Columns from a table or view.
Tables/Views: Categories
Columns: *(all columns)

372

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

7. Click Next.
Dialog Title: Design-Time Properties

When working with a Report in Design mode, it is not necessary to retrieve


all of the records in the SQL query.
8. Click Explain advantages of retrieving fewer records.
9. Maximum number of records to retrieve: 0
Enter 0 to retrieve all records (default).
We dont have very many records, so we will retrieve them all.
10. Click OK.
The Quick Report Genie opens.

Creating a quick report


It only take s a few moments to create a basic report.
11. Columns tab:
Use the arrow at
the right of Available Fields (circled) to put all
into the Selected
Fields column.
Note that each
column has properties that can be
specified.
12. Click the Preview tab to view the report.
13. Click the magnifying glass (red circle) to make the report larger.

373

CHAPTER 8. SEXY SQL SECRETS


Understanding Alpha Anywhere Reports: Printing SQL Reports

This is only the beginning of what you can do with reporting in Alpha Anywhere. You definitely should get our book!*
14. Save the report as My Quick Report Demo.

B. Printing SQL Reports


There are some important things to know about printing SQL Reports. They
can be printed in two different ways. Both are discussed thoroughly in the following A5 Help page.
GO TO ALPHA HELP

Documentation > Filter: Enter Working with SQL Reports


The following is quoted from the page:

OVERVIEW

There are two different approaches to building a SQL Report.


Documentation > Filter: Enter Create a named data source, then
build one (or more) reports based on that data source definition. In
this case you may edit the data source definition separately from the
report. The report definition includes the name of the data source.
Create an ad hoc data source and report. In this case the report definition
includes the definition of the data source. You cannot share this data source
definition.
In addition there is an important distinction between the data source definition and the report definition.
The data source definition retrieves a set of records from a SQL database.
The process of retrieving these records can use filter (WHERE or HAVING)
and order (ORDER BY or GROUP BY) expressions.
The report definition works with the set of records specified by the data
source definition. It can apply additional filter, order, or grouping expressions. These expressions will define what you see on the report.

*. Just in case you forgot, we are referring to the Alpha Anywhere Report Writer, Reporting and Charting Made Easy. Another Susan
Hussey Bush favorite that is available at www.LibertyManuals.com.

374

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

This Help page continues with specific instructions on


accessing reports.

Publishing the SQL reports library


In order for reports to publish properly, there is a checkbox
on the Publish dialog that must be checked. We will
explain its purpose and then you can explore printing
reports on your own.
1.

Web Projects Control Panel click Publish.

2. Publish Database Library (contains SQL Report definitions): Click Whats This.

3. Click OK to close the dialog when you are finished reading it.

375

CHAPTER 8. SEXY SQL SECRETS


More Important Info: Understanding server connections

Setting the default value


The final tip (yellow above) announces that You can
define a default value for this checkbox when you
define the Profile.
4. Click the pencil on the Publish dialog (red circle
above) to open the Web Project Profiles dialog.
Dialog Title: Web Project Profiles
MISCELLANEOUS

Default for Publish Database Library flag = Yes

5. Click Cancel (twice) to close the dialogs without changes.


6. Close all open components, reports, etc.

More Important Info:


There are a couple more things you need to know about using SQL databases
with Alpha Anywhere.

Understanding server connections


PLEASE TAKE A MOMENT READ
THIS

Following are comments by Jerry Brightbill of Alpha Software on server


connections. Please be sure to go over this carefully before taking your remote
database live.

Testing vs. live


When using the web, the connection string has to be one that will work from
the web server, which may be different that the one used on the desktop. For
example, you may be using a local SQL table for testing, and will use a different
one at deployment. Or the network addresses may be different. This has caught
many users who are unfamiliar with remote server technologies, and it is sometimes difficult to set up, as the connection string for the server must have the
same name as the local, but may not be verifiable using a local connection.

Using a professional hosting service


I asked him Is this something that a professional hosting service can help
with? He responded:
Whoever maintains and controls the data server would have to supply the
connection info, such as the IP or network address, user name, password, database name. The application server must be able to access the data server, either
on a local network (not always possible) or from an IP address with port info.
The hosting service would have to work with the owner of the data to set up a
proper connection

376

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

For example, a server may be a SQL Server with an IP address of 40.1.1.500


from the app server. If the server is accessed by a name, it might be used in place
of the IP address. The UserName might be dataServer with some password. The
database might be named mydatabase. The resulting connection string would be
something like
{A5API='SQLServer',Server='40.1.1.500',UserName='dataServer',Password='',Database='mydatabase'}
This might be the same address as used during development, if the developer
is lucky enough to have an owner of the data set up a connection that matches the
final setup. If not, the local string may be very different.

Understanding portability
OR

Revising a connection string brings forth two questions:


Will the change be global to the application?
Does it need to be made within each component?
A5V10 and later shows just the name placeholder. So you might see
tmpl.cs.ConnectionString = ::name::Connection1
This is very portable, as the name doesn't change and the system finds the current info for the Connection1 connection at runtime. The connection info is
saved in the 'a5_application.a5i' file that is published automatically. To use the
proper named string, you may need to create a new connection string using the
data as used by the deployed app and save it with the same name as the original
connection used for development. Then publish just one page or component to
recreate the 'a5_application.a5i' file with the new connection info.

Using Alpha Anywhere with SQL on the Desktop


There are two more Alpha Anywhere features of which you should be aware.
They are especially important now that web components can be used on the
desktop because you can use the same form in both places and maintain your
original file format. How sweet is that!
The desktop side of Alpha Anywhere offers two ways to connect your SQL data
with Alpha Anywhere, Active- and Passive-Link tables. Both are fully
explained in Alpha Anywhere Made Easy, The Basics and More for the Desktop
V12.

Using web application components on the desktop


Alpha Anywhere users can use their web components on the desktop, another
reason to consider connecting your data to Alpha Anywhere.

377

CHAPTER 8. SEXY SQL SECRETS

Notes:

378

Chapter 9.

Heavenly Help Plus!

Ordinary help is old school


Alpha Anywhere help is one of the best weve seen. It puts the extraordinary
number of help topics and videos at your fingertips.
The newly revised Video Library uses the List Control to make it easy to find
just what youre looking for. Definitely a plus!

CHAPTER 9. HEAVENLY HELP PLUS!

What youll find here


Topic

Page

How the Chapter is Organized

381

Understanding the Documentation Viewer (DV)

382

Getting off to a strong start

382

Display and navigation

382

Searching for topic pages

384

Saving page references

387

Taking notes

388

Printing topics

390

Updating the documentation

390

Window style

391

Restoring open pages

391

Sending feedback

391

Using the Video Finder

392

Filtering

392

Refreshing

393

Preferences

393

You may have seen this chapter before because we add it to almost all
our books its that important!

But. Dont run off. Theres new information on using the Video Library, so
be sure to look it over (page 392).

380

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How the Chapter 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 keyword, 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.1
VF: You will need an Internet connection to view the videos.
The Documentation Viewer and Video Finder will find all the references
seamlessly and you wont even have to leave the Alpha Anywhere environment. The Documentation and Videos buttons are on the main toolbar and are
available at either the Web Projects Control Panel or the Control Panel.2

WHERE DO I LOOK?

The Video Finder is the first place to look for web and mobile coverage. The
Documentation Viewer also contains many useful pages, so be sure to go there
for additional information.

Why Plus? You may be wondering why we entitled this chapter Heavenly
Help Plus. The answer is that theres been an improvement to the Video Finder
that you will really appreciate. Finding videos is easier than ever, now.

1. See Image display on page 382.


2. 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

381

CHAPTER 9. HEAVENLY HELP PLUS!


Understanding the Documentation Viewer (DV)

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.

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

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

382

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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 some-

times 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.
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

the page.

c. Click 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.

383

CHAPTER 9. HEAVENLY HELP PLUS!


Understanding the Documentation Viewer (DV)

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.
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.

384

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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.
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.

385

CHAPTER 9. HEAVENLY HELP PLUS!


Understanding the Documentation Viewer (DV)

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.
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.

386

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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.

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.

387

CHAPTER 9. HEAVENLY HELP PLUS!


Understanding the Documentation Viewer (DV)

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.

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 389).
a. Enter

388

trim in the Filter box.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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
AFTER 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

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

Do the following to retrieve the page:


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

> Table for user notes: Click to Define.

389

CHAPTER 9. HEAVENLY HELP PLUS!


Understanding the Documentation Viewer (DV)

b. Choose

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


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.

390

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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.

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.

391

CHAPTER 9. HEAVENLY HELP PLUS!


Using the Video Finder

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 388) 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 web/mobile.
They are easy to follow and you will find them extremely helpful. Each is identified by Number, Category and Description. Some of the numbers have prefixes, as M38 below. Others do not. Even though many created for earlier
versions, they are still applicable.
1. Open Alpha Anywhere and click Videos on the main toolbar.1
Available at Web Projects Control Panel and Control Panel.

2. Enter a Filter.
The Category list comes up, with the number for each listed at the left
(in parenthesis).

Filtering
At this writing, only simple searches are available. There is no provision for
and, or, etc. That is on the Alpha to do list, however, so keep an eye out
for a Search Syntax hyperlink next to the filter box.

1. If you dont see the Videos button, go to Help > Video Finder. The button is coming soon promise!

392

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Refreshing
Just as with the DV, you will need to refresh the video content from time to
time. You can do it manually or add it to your preferences (see below).

Preferences
You can define the Window style and set an automatic update.

3. Click Preferences on the toolbar.


WINDOW STYLE

There are two window style options, MDI and Modeless.


a. Choose

MDI (default) or Modeless.

MDI: This is the standard view (default). Recommended if you


are using a single monitor. (See below for wide screen monitors.)
Modeless: If you are using two or more monitors, you can drag
the VF window to one of them and keep it open while you are
working. This also works if you have a wide screen monitor and
want to place the Alpha Anywhere workspace on one side and the
Video Library on the other.
MODELESS WINDOW
STYLE

If you choose the Modeless style, a Menu button will automatically be added
when the screen is too narrow to display both the categories and the video list.
When the Menu button is clicked, the category list slides out on top of the
video list (yellow below).

393

CHAPTER 9. HEAVENLY HELP PLUS!


Using the Video Finder

Do you recognize the Docked Panel? Of course you do. We learned all about
them at Building a Menu with Docked Panels on page 275. That leads us to
one of the more interesting aspects of the new Video Library it was built using
the List Control! Watch the video below to learn all about it.
AUTOMATIC UPDATE

If the number of days since the last time the Video Library was updated is
more than this number of days, the Video Library will be updated automatically
when the Video Finder is loaded.
b. Automatically

update Video Library every 5 days. (Default)

Set to 0 to turn off automatic updates.

4. Click OK or Cancel to close the Preferences dialog.


If you make a change and click OK, the Video Finder will be closed
and reopened to make the change.
Can you believe thats all there is to Video Finder? Were done!
GO TO ALPHA VIDEO

See how the Video Finder was developed with the List Control.
Videos > Filter: Enter Video Finder. Choose:
VF_V12-1. Finding Videos in the Video Library.

394

Chapter 10.

Practical Pointers

The final pieces of the puzzle


Hang in a little longer because this chapter has some important tips. Take a
quick look now and keep them in mind as you get to work on your application.

CHAPTER 10. PRACTICAL POINTERS

What youll find here


Topic
How the Chapter is Organized

Description

Page
397

Tips for Everyone


Searching for Properties

397

Changing the In-line Style

398

Pre-Defined Packages (aka Feature Packs)

399

Using Functions and Expressions

400

Webroot Folder

401

Using the Database Explorer

402

Picking CSS Colors

403

Tidbits

403

Tips for Advanced Users


Exploring Error Messages

405

Saving Expressions in the Script Library

406

Exploring Xbasic References

407

DBF Users Only


Converting from DBF to SQL Theres a Genie for
That

410

Creating a Maintenance Component

411

More Info

396

Help!

415

More Books from Liberty Manuals

416

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

How the Chapter is Organized


This chapter has all sorts of tips and tricks that didnt fit anywhere else.
Some, we thought youd like (or need) to know about, others were found while
poking around the Documentation pages.
As usual, the chart on the opposite page gives the listing. We have separated
the groupings into a somewhat arbitrary list of those for everyone and those
for advanced users. Regardless of your level of experience, we think youll
find it useful to look over the entire chapter.
DBF VS SQL

Now that were just about at the end of the book, it may be time for DBF
users to think about switching to SQL. Remember that discussion way back in
Volume 1? Then check out the video for the Database Upsize Genie on
page 411.

Tips for Everyone


Searching for Properties
As you have undoubtedly noted, the list of component properties is extensive. In fact, one is tempted to say there are a gazillion of them! Not to worry
there's a great search feature that will help you find the one you want.
Lets say we want to add shading to the rows of the grid, but dont know
where the setting is located. Looking through all the options to find the setting could be quite time consuming. The Search Properties feature makes
the job much easier.
a. Open
b. Go

any Grid component in edit mode.

to Grid > Properties

The Properties Search will be found above the properties list. It


will appear as below:
Grids: Click the Search Properties hyperlink in

the upper right corner of the builder.


Other components: Click the magnifying glass
symbol next to Properties.

397

CHAPTER 10. PRACTICAL POINTERS


Changing the In-line Style

c. Find

what: Type shad into the box.

d. Choose

Alternate row shading (Shading and


Dividers) and then click the Find Property button
at the bottom of the dialog.

Learning the terms


What we especially like is that it finds both
options and headings. In the above example,
you get several shots at finding the one for
which you are looking. Any word alternate, row, shading, dividers even and
will bring up the relevant group.

Finding properties
Here are a couple of tips on searching.
WHAT PROPERTY?

TYPE-IN BOX

To be sure you are looking in the right place, ask yourself what property will
be affected. It is unlikely that you will find the car in the living room. Grids, for
example, have several sections.
Will it affect the entire Grid, the Detail View or the Search part?
Rows are part of the above.
Will it affect only the field?
Columns are found here.
Is it one of the Update Settings?
A separate section for updateable Grids and part of properties for
the Detail View.
Its better to search for part of the word than the whole thing.
Shad finds shading, but shade doesnt.

Changing the In-line Style


In addition to the basic font attributes, there are many other In-line Style
options. The practice grid provides the opportunity to experiment with the various options.
1. WPCP > Grid Component Demo Web Project: Open InLine-

398

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Style_Practice in Edit mode.


2. Grid > Fields > Company > Field properties > Label Properties > Inline style or any other In-line style option.

Watching where you are


working!
The In-line Style Editors are found in
many places. Just remember that different places give different effects, so be
sure you are in the right place!
For example, lets say you want to put a
border around the Company field in each
record. Your first instinct may be to go to
Label Properties because this is a Label
control type. Wrong!
The proper place is Column Properties
> Cell in-line style.
To format the column heading, choose
Heading in-line style (both in yellow).
3. Close the component when finished.

Pre-Defined Packages (aka Feature Packs)


There are several pre-defined packages that were released with earlier versions that you may find useful. Each is complete with videos that describe their
use. They were originally released as Feature Packs and were available only
at an extra charge. This is no longer the case, so you can ignore all such references. Alpha Anywhere includes all functionality.

Categories
GRID COMPONENT

UX COMPONENT

At this writing, here are 17 categories:


(1) Mapping and Geography Searches.
(9) Miscellaneous.
(1) Proximity Search Control.
(4) Calendar Control.
(2) Slider Control.
(2) Power Search for Grid Component.
(2) Record Navigation.
(1) Live Linked Embedded Grids.
(2) Power Search for Embedded Report.

399

CHAPTER 10. PRACTICAL POINTERS


Using Functions and Expressions

(7) Map Control.


(15) Chart Control.
(1) List Control.
REPORTS
MISCELLANEOUS

(1) Reports.
(1) Desktop Applications.
(1) Database Upsize Genie.
See Converting from DBF to SQL Theres a Genie for That on
page 410.
(1) Flying Start Genie.

GO TO A5 VIDEO

To see the entire set, go to:


Videos > Filter: Enter FP.

Using Functions and Expressions


Xbasic Functions and Expressions are used throughout Alpha Anywhere.
Liberty Manuals has several books on the topic. All are by Susan Hussey Bush,
except as noted.
Alpha Five Xbasic Toolbox.
Understand how he multitude of tools that are built into Alpha
Anywhere make programming easier and quicker.
Alpha Five V11 and later.
Suitable for all versions of Alpha Anywhere.
Alpha Anywhere Xbasic Workbook by Dr. Peter Wayne.
Gives working examples of Xbasic scripts.
Originally titled Alpha Five: Xbasic for Everyone.
Suitable for all versions of Alpha Anywhere.

Alpha Anywhere Functions Directory.


Designed with the advanced user in mind. All of the functions are
listed in one place!
Suitable for all versions of Alpha Anywhere.

Alpha Five Functions Handbook


Did you know that most Xbasic functions have been around since
Alpha Five Version 5?
This book details over 200 of the most common - the ones every
developer will use every day for server-side expressions.
Alpha Five Version 5 and later.

400

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Suitable for all versions of Alpha Anywhere.

Advanced users: See also Exploring Xbasic References on page 407.

Webroot Folder
By default, Alpha Anywhere stores its files in the Webroot folder. This happens automatically the first time you publish the application.
When you go on to creating your own application, you can either continue to
use the Webroot or create another folder and give it a name of your choosing. If
you do continue to the Webroot, you may want to either remove the book files
or delete the Webroot folder entirely and let it start over.
If you delete it, the following will happen.
The Application Server will create a new folder the next time you
Publish a project.
If you have other web projects, A5Webroot will also be rebuilt when
you republish them. (Dont forget to republish the Security files,
also.)
If you prefer not to delete the entire folder, you can just remove any
unwanted files.
a. Close

Alpha Anywhere.

b. At Windows Explorer,

delete the A5Webroot folder. In most comput-

ers, it is found at

c:\a5webroot
The next time you Publish a web project, you will get the following message:
The folder c:\A5Webroot does not exist. Would you like to create this folder
now?

c. Click

Yes.

The folder will be created and your files will now be up-to-date for this book.
PUBLISHING HISTORY

You may also want to clear the publishing history. It is found at:
Web Projects Control Panel > Publish > Clear Publishing History.

401

CHAPTER 10. PRACTICAL POINTERS


Using the Database Explorer

Using the Database Explorer


The Database Explorer is a very powerful utility that has been designed for
users of remote (SQL) databases. As you will see, it is far more than a list of
tables, sets and fields.
The Database Explorer is available at the Web Projects Control Panel and
from the HTML Editor.
Web Projects Control Panel: Top Menu > Tools > Database Explorer.
a. Open

the explorer as above.

b. Drill

down a table to open the menus as below.

c. Click

the option to open the layout.

HTML Editor as follows:


a. Web Projects Control Panel > A5W Pages: Open the MainMenu page

in Edit mode.
b. Top

menu > Task List > Database Explorer.

The explorer opens in a pane to the right of the editor. The listing
is shown, but other actions are not available at this pane.
The following screen shot shows the right-click options for the Northwind Access
database that we added to the explorer by clicking the plus sign (red circle). Navigating
to the database creates the Connection String.

You can do the following:


SQL BACKEND
DATABASES

402

Open at the Web Projects Control Panel.


Count table rows in a back-end SQL database table.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Create a report, label, or letter layout for a back-end SQL database

table.
Create a Passive-Link table based on a back-end SQL database table.
Create a SQL Expression by calling the SQL Command Window or
SQL Genie.
Create an Alpha Five .DBF Table with the data from a back-end SQL
database table.
Display a column's data from a back-end SQL database table.
Display data from a back-end SQL database table.
Generate SQL syntax for a back-end SQL database table.
Add or remove database(s) from the Database Explorer listing.
Remove table(s) or view(s) from the Database Explorer listing.
View the properties of any table field (in parenthesis after the field).
GO TO ALPHA HELP

Full instructions for using the Database Explorer can be found at:
Documentation > Filter: Enter Database Explorer.

Picking CSS Colors


Occasionally, you will be required to enter the CSS colors by their numbers.
We ran across that situation at Alternating row colors on page 65. Advanced
users probably know about this site, but we thought it was worth noting for the
rest of us.
3schools.com is a great resource for things like this. Go to:
http://www.w3schools.com/cssref/css_colornames.asp

Color names supported by all browsers


140 color names are defined in the
HTML and CSS color specification (17
standard colors plus 123 more). The
table below lists them all, along with
their hexadecimal value
The 17 standard colors are: aqua,
black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red,
silver, teal, white, and yellow.

Tidbits
Some things you may find useful.

403

CHAPTER 10. PRACTICAL POINTERS


Tidbits

Correcting Calculated Fields terminology


GO TO ALPHA HELP

Documentation > Filter: Enter Creating and Using Calculated Values.


The above page gives an excellent example of variables that most Alpha Five
DBF users will understand and an important notation for everyone.
Alpha Five documentation and software has traditionally referred the values
that you calculate and place on a layout as calculated fields. However, these
values are not fields, because they are not stored in a table. They are temporary
variables that are created and calculated on demand.
A calculated value may be displayed, but not edited [by the end user]. Typically, you compute a calculated value based on the values of several other fields
in each.

Relative URLs
by Stephanos Piperoglou
URLs are used to locate anything, anywhere. Since their scope is so
large, they often get very long.
It is often the case that we can abbreviate URLs in the form of relative
URLs. All the URLs we've looked at until now were absolute URLs. They identified a resource independent of their context.
The URL http://WebReference.com/html/ identifies HTML with Style
whether it's typed into your browser, scribbled on a napkin in a bar for a friend
or just remembered in your head. Relative URLs are a way to identify a resource
relative to their context. To give a rough analogy, if you're in your house with
some friends and someone asks where your next-door neighbor Mark lives,
you'll probably say Oh, he's next door. You probably wouldn't say On a
planet called Earth, in the United Stated of America, in Acmetown, on 32 Foobar St. if this conversation is taking place in the living room of 31 Foobar St.
For one thing, it's a waste of breath.
Relative URLs are something like that; they're the equivalent of saying
down the road, turn left, walk on for a few blocks, you can't miss it. They only
make sense if they are given within a certain context. And this context is called
a Base URL.
As we mentioned earlier, relative URLs can only be used with generic
URLs like the ones described by the http scheme. The reason for this is that all
generic URLs, like those defined by the http scheme, have a path name. The
Base URL of a resource is everything up to and including the last slash in its
path name. Here are some examples:
Table 1: Examples of Absolute and Base URLs. (Base is in blue)
Absolute URL

404

Base URL

http://WebReference.com/

http://WebReference.com/

http://WebReference.com/html/

http://WebReference.com/html/

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

http://WebReference.com/html/about.html

http://WebReference.com/html/

http://WebReference.com/foo/bar.html?baz

http://WebReference.com/foo/

Now, say that in the document


http://WebReference.com/html/about.html
I want to refer to the document
http://WebReference.com/html/links.html.
So I would is use the relative URL
links.html.

This will be added to the base URL to form the URL that I want to match.*

Tips for Advanced Users


We think you will find these hints useful if you use Xbasic and/or HTML.

Exploring Error Messages


GO TO ALPHA HELP

Documentation > Filter: Enter Configuring Internet Explorer.


As you design pages for your application, you are bound to
have errors in your Xbasic scripts. To help in identifying the
error, you can change from the friendly error messages to
those that identify pages lines with syntax errors.
a. Start > (Windows) Control Panel > (Switch to classic view) > Choose

Internet Options.

b. Click

the Advanced tab.

*. http://www.webreference.com/html/tutorial2/3.html 5/28/2010. We have quoted only the beginning of the article. You may wish to
visit the page for more information.
. Today, there are a multitude of ways to find Windows settings on your computer. The following shows how we found them using
Microsoft XP Professional. SHB

405

CHAPTER 10. PRACTICAL POINTERS


Saving Expressions in the Script Library

c. Clear show friendly HTTP error


messages.
The list is pretty long. Noting

the position of the scroll bar


(dotted line) should help you
find it.
The result is that you (the
developer) will get error messages (red box) that show the
point of the error.

Adding the server signature


The notation at the bottom of the error message (green box above) is configured at:
Web Projects Control Panel > Web > Application Server > click
Errors tab.
Include server signature on error pages = Yes.

Saving Expressions in the Script Library


GO TO ALPHA HELP

Documentation > Filter: Enter Compiling Scripts and Functions.


Documentation > Filter: Enter Using AEX files in your Grids V10.

Compiling your scripts into a library (AEX) file


You can accumulate your scripts and functions in the Compiled Script
Library, a file with an .AEX extension.
IMPORTANT NOTE

If your project has an .aex file, you MUST list it in the Project Properties or it
wont be loaded (Web Projects Control Panel > Project Properties).
The above page details the reasons for organizing your functions and scripts
in such a manner:
Compiling scripts and functions into an AEX file is of interest to developers who have developed libraries of scripts and functions that they want use
with a lot of different databases, or who have scripts and functions that they
want to protect, so that no one can see their source code. In addition, code in a
compiled library will execute slightly faster.

406

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

You can encrypt your scripts by placing compiler instructions in their


source code.
This A5 Help page continues with instructions on putting your scripts into a
library.

Exploring Xbasic References


The following help pages are some of the many that cover basic code writing
for web and mobile applications.

Understanding Xbasic
GO TO ALPHA HELP

Documentation > Filter: Enter Understanding the Programming


Process.
Documentation > Filter: Enter How Pages are rendered.
Xbasic 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 database (workspace) application easier. Many commonplace tasks that would take
many lines of code in another language take only a single line of Xbasic.
It 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, forms, and reports much easier and the development of database [and
web] applications much faster.
The beginning programmer may want to take a side trip to go through the
Getting Started with Alpha Five and Learning Xbasic tutorials. This will help
you understand many of the fundamental concepts of the Alpha Five 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 Learn to use its table of contents, index, and search
utilities to find the information you need. You will also find a very supportive
and helpful developer community eager to answer your questions at the Alpha
Five Message Board.

GO TO ALPHA HELP

Documentation > Filter: Enter a5w. Finds more help pages.


See also the following page names:
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

407

CHAPTER 10. PRACTICAL POINTERS


Exploring Xbasic References

Web Application Functions. Web functions and links to syntax.


Compiling Scripts and Functions. How to save frequently used

scripts and functions for future use.

Using the Xbasic tools


The Web Projects Control Panel contains links to several tools that will help
in compiling your Xbasic scripts. Heres where to find them and brief descriptions of their uses. We have also included A5 Help references for more information on each feature.
TRACE WINDOW

Web Projects Control Panel: Top Menu, choose

View > Trace Window.


The Trace Window is a good place for testing and
debugging scripts. On the desktop side, you will also
be referred here for error messages too long and/or
too numerous to be placed in a dialog box.
Alpha Help page: OLE Object Automation
Browser.
CODE EDITOR

Web Projects Control Panel: Top

Menu, choose View > Code Editor.


The Code Editor is used for creating scripts. Both the Xbasic Editor
and Action Scripting Editor are
available. New functions can be
created.
.Alpha Help pages: Using the Xbasic Code Editor and Using the Interactive Window.
This is like a separate program and has many useful code development
features.

408

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

OLE AUTOMATION BROWSER

Web Projects Control Panel: Top Menu,


choose View > OLE Automation Browser.
The OLE Automation Browser allows you to
investigate the properties, methods, events, and
constants of ActiveX controls on your computer. It is used in conjunction with the Xbasic
Code Editor.
The list on the left side of the dialog switches
between views of the controls' product names
and programmatic names (what you actually
use when you are programming). The list of on
the right displays a scrollable list of the information that you will need to successfully use
the control. It is used in conjunction with the
Code Editor.
Alpha Help page: OLE Object Automation
Browser.
DEBUGGER

Web Projects Control Panel: Top Menu, choose View >

Debugger.
The Script Debugger allows the programmer to step

through an Xbasic script or function and watch as Alpha Five


executes each line. You can selectively debug only portions of
your code by placing debug(1) (start debugging) and debug(0)
(end debugging) commands around the code of interest. You
can set breakpoints and examine the value of variables.
Alpha Help page: Script Debugger.
SCRIPT RECORDER

Web Projects Control Panel: Top Menu,

choose View > Script Recorder.


The Script Recorder Window allows you

to write Xbasic code while performing the


actions you want to take. Just turn it on,
proceed from action to action and the code
will be written for you. It is a good way to
learn Xbasic.
Alpha Help page: Script Recorder.
GO TO ALPHA HELP

To find additional material on using the above, go to:


Documentation > Filter: Enter the name of the feature.

409

CHAPTER 10. PRACTICAL POINTERS


Converting from DBF to SQL Theres a Genie for That

Assuring successful script writing


We repeat Dr. Peter Waynes advice: An Xbasic expert from its earliest days,
he says There are two types of developers. Those who annotate their scripts
and those who wish they had. Some scripts, like this one, are easy to understand. As you build more complicated ones, you will find reading your native
tongue is much easier than trying to decipher code many months after it was
written. There may come a time when you need to add or remove an action or
troubleshoot the script. Clear and comprehensive notes will make that job significantly easier.
To make notes on your code, start the line with an apostrophe. Correctly
entered, the text will turn blue.

Additional videos
There is a collection of videos for advanced users at:
Videos > Category: Choose Understanding Server-side Events in a
Grid Component.
See also Using Functions and Expressions on page 400.

Tips for DBF Users Only


There are two features about which DBF users should know.
If you decide to move from DBF to SQL, there is a genie that you may
find useful.
If, on the other hand, you do choose to stay with DBF, you should
know about the Maintenance Component.

Converting from DBF to SQL Theres a Genie for That


As we explained on page 10, there are many benefits to using a SQL database for the data storage in your application, including the following:
More robust data storage.
Much more scalable - you can have many more simultaneous users of
your application.
Better multi-user performance.
True client/server architecture.
Better for multi-user applications that work over IP networks (i.e. the
Internet).
There is a genie that facilitates the transition.
DATABASE UPSIZE GENIE

410

Converts DBF files to SQL. For developers who have developed a desktop
application in Alpha Anywhere that uses Alpha Anywhere's native .dbf tables
for data storage.

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

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 V10FP4

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.

Creating a Maintenance Component


COMPLETED COMPONENT

The completed component for this section is MaintenanceComponent.


Maintenance components pack and/or re-index tables. Alpha Anywhere
(DBF) users will find this a handy tool. It is not applicable to SQL databases.
As are other components, the Maintenance component is placed on a web
page. In this exercise, we will create a component, place it on a page and
demonstrate its use.
The tables affected are those of the current web project. The following screen
shots show both pack and reindex, however a single option may also be selected
at Form Navigator > Options (see below).
1. Web Projects Control Panel: Web project: MyGridComponentDemo.
Web Component: Click New.
Choose Web Component. (Click Next)
Choose Maintenance. (Click OK)

411

CHAPTER 10. PRACTICAL POINTERS


Creating a Maintenance Component

FORM
NAVIGATOR

There are three

layout types,
Tabular, Columns and
Stacked Columns. Each also
has a simple layout version.
2. Experiment
with the various
layout types.
3. Click the Preview button on the toolbar to see the changes in the lower
half of the window.
LAYOUT OPTIONS

TABBED UI NAVIGATOR: FORM > LAYOUT


Layout Type: Tabular, Columns, Stacked Columns
Use Simple Style = Yes.

4. Click Form > Options.


Pack and Reindex each have
the same component selections. You can show one or
the other or both.
The following may be done
for either Pack or Reindex.
PACK OPTION
PROPERTIES

TABBED UI NAVIGATOR: FORM > OPTIONS > PACK


Show Option = No.

5. Click Preview on the toolbar to see the new version.


Only Reindex shows.
6. Show Option: Recheck so that both Pack and Reindex appear.

412

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Choosing tables for packing/reindexing


You can give the user the option of packing / reindexing all tables in the database at one time, a single table or selected tables. Again, well work with Pack.
ONE OR ALL TABLES

TABBED UI NAVIGATOR: FORM > GRID > PACK.


PACK OPTION PROPERTIES

Show Select all Tables = Yes.

7. Click Preview.
8. Click the drop down box (red circle at left).
The <All Tables> option appears at the top of the
list.
SINGLE TABLE ONLY

You can also elect to show only a single table as follows:


TABBED UI NAVIGATOR: FORM > GRID > PACK.
PACK OPTION PROPERTIES

Show Select all Tables = No.

9. Click Preview.
10. Click the drop down arrow again.
The <All Tables> option is gone and the user may now pack only one table at
a time.
COMBINATION OF TABLES

Next, we will allow a combination of tables to be selected. Again, we will


work with Pack, but remember this also works for Reindex. In order to change
the drop down box to a combo box where more entries can be seen, the height
needs to be greater than 1.
TABBED UI NAVIGATOR: FORM > GRID > PACK
PACK OPTION PROPERTIES

Show Select all Tables = Set back to Yes.


Height = 5.
When Height is greater than 1, Multi-select allowed opens.
This setting controls the height of the box as at left. Be sure to make it large
enough to be used comfortably.
Multi-select allowed: Choose Multiple.

11. Click Preview.


The selection box changes to a Combo Box.
12. Test by making some selections with CTRL + CLICK and/or SHIFT + CLICK.
(At this point you are only viewing nothing will happen until the
component is placed on an A5W page.)

413

CHAPTER 10. PRACTICAL POINTERS


Creating a Maintenance Component

TABBED UI NAVIGATOR: FORM > GRID > REINDEX


Build a Reindex section using one of the above styles so you can test

it, too.
TABBED UI NAVIGATOR: FORM > PROPERTIES
Review the available properties.
TABBED UI NAVIGATOR: INFORMATION
Fill in the standard Information textboxes.

13. Save the component as MyMaintenanceComponent and close.


14. Create a new, blank A5W page.
15. Save it as MyMaintenancePge.
16. Type: This page will Pack and Reindex the clients table.
17. Click Insert Component and select MyMaintenanceComponent.

Testing the component


The next steps will actually pack and reindex the tables.

18. Click Execute.


If grayed out, turn on the
Application Server.
The page opens in your
Browser.
19. Pack: Click the drop
down list arrow and choose
PROCESSING
SOME TABLES NOT UPDATED

<All tables>. (Click RUN)


The maintenance component is replaced by a
processing statement.
The menu for the desktop (database) application is open (click Menu tab at bottom of
screen). Since Alpha Anywhere cannot
update open tables, we get a report back that
the table could not be updated, just as we
would if we had updated at the desktop.
20. Click OK.
21. Reindex: Choose any table except the menu table.
22. Click Run.

COMPLETE

The table is reindexed and a completed page

appears.This message can be customized.


23. Click OK.
Return to Alpha Anywhere. Save and Close the page.

414

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Help!
As with any program, there will be times when you have a problem that
requires further assistance. Here are some ideas for those situations.

Alpha Software website


http://www.alphasoftware.com
In addition to the usual information on products and technical support
offered by Alpha Software, there is a very active message board (see below).
Before you pick up the phone, give the message board a try.
THE ALPHA COMMUNITY

The Alpha community is unique. Rarely will you come upon such a dedicated group of users who are willing to share their knowledge. I personally have
had perplexing problems solved by fellow users.

MESSAGE BOARD

We recommend the Alpha Anywhere Message Board on the website as the


first place to go with your questions. The Message Board is superbly designed
and very easy to use. The volunteers who offer their time and expertise are true
Alphaholics.
First, do a search on your problem. The solution may already be there!
Next, put your problem out there. Be sure to click the box to get an e-mail
response to the thread. That means whenever someone responds to your
question, you will be notified.
You will have the opportunity to continue to correspond via the open forum
of the Bulletin Board or to initiate direct contact with the person replying to
your question.
Check out the Message Board today!
www.alphasoftware.com > Support tab > Message Board

SOFTWARE UPDATES

You can check for updates from within the program at Help > Download
Patches.

TECHNICAL SUPPORT*

Free Technical support is limited to installation and start up issues and is


limited to 30 days after purchase.
Paid Technical support is also available.
Phone: (781) 229-4500.
For current information on additional technical support, visit the Support
section on the website.

LINKED IN

ALPHA SOFTWARE, INC.

Join the Alpha Anywhere Users group on LinkedIn.


For specific questions on learning Alpha Anywhere, go to the Message Board (see above).
Alpha Software Inc.

*. Policies and fees subject to change without notice.

415

CHAPTER 10. PRACTICAL POINTERS


More Books from Liberty Manuals

70 Blanchard Road.
Burlington, MA 01803-5100
Phone: (800) 451-1018 or (781) 229-4500
Fax: (781) 272-4876
For current information on the company, go to www.alphasoftware.com >
About Us.

Tips and tricks


Heres a website that offers useful information at
no charge:

PROCTOR & PEAKE

www.proctorandpeake.com/
Frances Peake, professional Alpha Anywhere
developer and former Alpha Five technical support staffer, offers general tips on her website.
She also acts as a consultant for those developing their own applications. If you have questions on web, mobile or desktop
applications, you can contact her at frances@proctorandpeake.com.
Want to see a site developed with Alpha
Anywhere?

ALPHA TO GO.COM

www.AlphaToGo.com
Steve Wood has also developed a template that makes it easy to get your web
application started. He is also an Alpha Anywhere instructor.
His e-mail is: steve@alphatogo.com.
INDEPENDENT APPLICATION DEVELOPERS NETWORK

A network of Alpha Anywhere developers who do everything from consulting on individual situations to developing entire applications.
www.iadn.com
Includes an extensive portfolio of applications that have been developed
by network members.

More Books from Liberty Manuals


Be sure to visit www.libertymanuals.com to explore out complete collection
of books on Alpha Anywhere. Here are some we think youll especially enjoy.
Alpha Anywhere Web & Mobile Made Easy for 3.0 Volume 1.

416

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Designing reports
Alpha Anywhere has a built-in report writer that works
for desktop, web and mobile applications.
Alpha Anywhere Report Writer by Susan Hussey
Bush

Learning Xbasic
If you want to take advantage of the coding options available with Alpha Anywhere, you will need to become familiar
with Xbasic. Xbasic is a variant of Visual Basic that is more powerful and easier
to use. Liberty Manuals has the following books:
LEARNING XBASIC

Alpha Five Xbasic Toolbox by Susan Hussey Bush


Alpha Anywhere Xbasic Workbook by Dr. Peter Wayne

FUNCTIONS

Alpha Anywhere Functions Directory by Susan Hussey Bush


Alpha Five Functions Handbook by Susan Hussey Bush

All are available at www.libertymanuals.com.

417

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Index
Please note: Most of this book
covers the UX component, therefore
its items are indexed by feature,
rather than listed under UX. Grid
items, on the other hand, are prefixed
by Grid.
In other words, Buttons for the
UX are listed under Buttons and
Grid buttons are listed under Grid >
Buttons.

A
ABC Seminars 5
Accordion Bar 343
Action Javascript
Regenerate 91
Action Sheet 128 , 130
ADO 362
AEX Library 406
AllRows 332
Alpha Anywhere
Assistance 415
Help system 382
Name 3
Alpha Five 3
Alpha Four 3
Alpha Software Inc. 3
Company Information 415
Message Board 415
Technical Support 415
Website 415
Alpha To Go.com 416
AlphaDAO 362
Annotate 357
Apple
Action Sheet 128
Arguments 351 , 352 , 353
Choices 354
Control Type 353 , 354
Drop down box 354
Preview value 353
Prompt 353 , 354
Page 354

B
Backup 402
Buttons

(See also List Control)


(See also Panel Card)
Actions
Click 20
onClick 20
Place in groups 226
Record navigation 68
Search, execute 97
Submit/Reset 90
UX
Align 24
Define 20
Open another UX 76

C
Calculated Fields 404
Cascading lists
See List Control
Classes, CSS 123
Create Custom 193
Client
Definition 165
Client Server Model 8
Code
Client-side 356
Comment in / out 32
Server-side 356
Code Editor 408
Collapse Bar 343
Columns
(See also Container control)
Create 223
Comment control 285
Connection String 5
ABC Seminars 361
Ad Hoc 364
Alpha Software 361
Existing
Edit 362
Use in Grid 363
For book 361
New 363
UX Component 365
Consistency 334
Container control 221
(See also UX > Containers)
Border 41
Columns 223
Definition 219
Field width 237
Show/Hide 224
Sub-type
AbsoluteLayout 231

Button Group 226


FlexLayout 229
Group 225
Injectible Content 227
NoFloat 235
None 223 , 224 , 237
PanelOverlay 133
Repeating Section 224
SpinList 227
Window 228
Containers Menu
Definition 219
Controls
Align 236
Assign flexible widths 229
Connect to database 259
Display in different place 227
Display in pop-up window 228
Group controls with panels 225
Override spacing 235
CRUD
(See also List Detail View)
Definition 165
CSS 235
Classes 123
Create custom 193
Media Queries 111

D
Data
Place on pre-defined UX
form 231
Validation 262
Data Binding 88
Change 258
Clear 258
New Controls 259
Review 258
Vs. List Detail View 207
Database
Connect to SQL table 5
Table
Create from controls 244
Database Explorer 402
Database Upsize Genie 410
DBF
Convert to SQL 410
Data, filter 30
Vs. SQL 10
Debugger 409
Desktop
Components use on 377
Device (see Mobile device)

419

INDEX

DFB Query
Data
Order 30
Dirty record / field
Definition 167
Disconnected Apps 169
(See also List Detail View &
Search Detail View)
(See also Local Storage)
Create 189
Definition 165
Development 172
Dirty Field, mark 193
Documentation 214
Hierarchical Data 197
List Detail View 192 , 195
PhoneGap 214
Records
Commit 192
Use 195
Search / Edit records 188
Search Part 190
Synchronization 173
Abort 192
Batch 192
Write Conflicts 175
DIV 21
Docked Panels
(See also Menus > Mobile)
Buttons 155
Flow Collapse 156
Settings 157
Display 154
Dock Lock flow 154
Dock options 154
DP Controller button 153
Panel Layout
Nested 158
Docking
See Docked Panels
See Menu
See Panel Layout
Documentation Viewer 382
Breadcrumbs 384
Expression Builder, using in 386
Favorites Tab 387
Image display 382
Notes 388
Directory 389
Pages
Close 383
Restore 391
Save reference
Favorites 387

420

Lists 387
Search Results Tab 386
Searching 384
Filter 384
Full text search 384
Multiple criteria 385
Synchronized 386
Table of Contents Tab 385
Topics
Custom 389
Navigation 382
Printing 390
Refresh 391
Update 390
Window
MDI 391
Modeless 391
Drop down box control
List Control 34 , 96

E
Editable 326
Error message
Configure 405
Server signature 406
Expression Builder
Function help 386
Expressions 400

F
Feature Packs 399
Database Upsize Genie 410
Fields
Populate 88
Filter
(See also Arguments & Search)
DBF data 30
SQL data 28
Firefox Firebug 261
Flex width 37
Calculation 38
Font Awesome Icons 287
Footnotes viii
Functions 400

G
Geography searches 107
getValue 109
Grid
Annotate 357
Code 356

Collapse Bar 343


Convert to Read Only 325
Data Source
(see also SQL)
Detail View
Open in window 348
Editable 325
Events
Edit 357
Fields
Control Type 324
Label 324
Textbox 324
Dirty 328
Editable 326
Filter
Records 348
Form (Columnar) 344
Frame
Group fields 346
Group
Fields 340
Records 349
Images
Resize 346
Layout types 338
Master Template 342
Accordion style 343
Merge Cell 341
Multi-user editing 334
Order Records
Direction 356
Reverse order 356
Query pane
SQL 365
Read-only 323 , 324
Change to Updateable 326
Query pane 326
Records
Order 355
Row edit style 328
Row Spacer 341
Rows
Highlight 333
New records 333
Snaking
Records 347
Special Controls 340
Stacked Columnar 338
Static Text 340
Template 335
(see also Master Template)
Create 337
Custom 336

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Move, Delete, Rename 336


System 335 , 337
Update settings 327 , 328 , 329 ,
330

AllRows 332
New record rows 333
RowOnDemand 330
Updateable 323 , 324 , 325
Validation 333
Grid Component vs. UX
Component 4
Grid Components
Properties
Locate 398
Search for 397 , 398
Grid Search part 325

H
Hierarchical Data 197
HTML
Recalculate 262
Span tag 286
HTML Editor
Database Explorer 402

I
IADN 416
Icons
Record navigation 68
iFrame control 260
Incomplete form
Prevent user from leaving 160
Independent Alpha Five
Developers 416
In-line Style 399
Internationalization 262
Invoices
See Container control >
Repeating Section

J
Javascript 280
Field types 241
Operators 241
Recalculate 262

K
Keyword search 100

L
Large Applications
(See also Responsive Layout)
How to handle 161
Liberty Manuals 416 , 417
Linked Resources 302
List Control
Action Javascript, edit 15
Appearance 36
Arguments 81
Attributes 33
Border 40
Builder
How to open 15
Buttons 70 , 72
Alignment 75
Appearance 73
Attributes 74
Width 74 , 75
Cascading Lists 80
Column width
Relative 37
Create 17
Data
Edit 91
Move to another list 111
Populate 88
Data Source
Custom 30
DBF database 29
SQL database 26
Static 25
Web (non db) 30
Database
Edit 87
Div
Hide/Show 111
Fill Container 38
Filter 81
Groups
Lookup Dictionary 80
Header
Change value 79
Icons 70
Layout
Column
Compute 53
Title 82
Width 37
Combo box 47
Conditional Style 60
FreeForm 44 , 111
Template 48
Images 57

Orientation change 46
Snaking 111
Videos 52
Length 42
List Virtualization 255
Lists, long 255
Lookup Dictionary 79
Navigation 70
Icons 105
List 105
Slider 104
Order 96
Page / Record info 69
Pagination 65
Populate
Initial rendering 89
Unbound controls 92
Raw Data 109
Records
Column sort 78
Count 98
Fetch 70 , 71
Group 76
Limit display 65
Navigation 79 , 103
Paginate 78
Search 103
Unique values 82
Refresh List 98
Reports
Filter 16
Row
Give focus 89
Row Expander 110
Scroller 257
Searches
All fields 101
Client-side 93 , 101
Geography 107
Key press 102
Keyword 100 , 106
Records 103
Server-side 93 , 95
Textbox 99
Sorting 110
Width 18 , 82
List Detail View
(See also Disconnected Apps)
Create 176
CRUD operations 180
Debugg 178
Description 166
Existing List 208
Genie 177

421

INDEX

Position 179
Properties 180
Modify 185
Vs. Data Binding 207
List Search Part
Create 176
Genie 177
Maximum download size 191
Properties 180
ListMenu control 288
Local Storage
Define settings 189
Definition 167
Keys 201
Delete 205
Rebuild 205
Manager 202
Namespace 206
Persist / Restore 189
Refresh data 205
Space, free up 207
View contents 201
Lookup 262

M
Maintenance component 411
Error message 414
Form navigator 412
Layout Type 412
Test 414
Master Template 342
Master/Detail
See Container control,
Repeating Section
Media Queries 111
Menus
Mobile 280
Also suitable for web
Docked Panels 269 , 275 , 278
Buttons 278
Controller Buttons 278
Display 278
Dock Lock Flow 278
Lists 277
Menu selections 279
onClick event 280
onSwipe, define 281
Panel Cards 279
Panel Layouts 277
ListMenu 288
Menu Builder 269 , 270
Action Javascript 274
Create 271

422

Leaf items 272


Pointer icon 274
Split View 270 , 282
Header 286
Hide/Show display 288
Icons, Panels 284
Standard 283
Web 289
(See also Menus > Mobile)
Navigation System 309
Border for table 318
Container 318
Nodes, Siblings,
Trees 313
Security 312
Tabbed UI, add 316
Page Layout 303
Buttons / Hyperlinks 305
External web page 307
Pop-up window 305
Tabbed UI, display in 305
Tabbed UI 289
A5W pages 299
Browser warning 297
Buttons 296 , 301
Containers 301
Edit objects 300
Filter 301
Footer 297
Frames 294
Header 297
Home page 298
Hyperlinks 301
Linked Resources 302
Local page 298
Order 301
Other Controls 301
Pane header 301
Panels 296
Refresh 301
Tabs 295
URL title 297
Merge Cell 341
Mobile device
(See also Responsive Layout)
Landscape/Portrait 239
Layout 237
Menus(see Menus)
Orientation change display 238
Swipe action 146

N
Navigation System component

See Menus > Web


Nodes 313
Notes App 112

O
Offline Apps
(See Disconnected Apps)
Definition 165
OLE Automation Browser 409
onItemDraw 63
onSelect 91
onSwipe 138 , 146 , 281
Order
DBF data 30
SQL data 28

P
Page Layout Builder component
See Menus, Web
Pane 21
Panel Card 115 , 116
Add to UX 18
Buttons
Align 124
Conditional 126
Define 122
Docked
Display 152
Header 23
Header / Footer 120
Align Buttons 125
Static Text 122
Minimum size 152
Objects
Absolute position 127 , 133
Fixed position 134
Size 158
Store / Restore state 160
Width 157
Panel Layout 115 , 117
"After" 149
"Before" 149
Define 147
Docking 151
Flow 148
Objects
Fixed position 134
Panel Card size 150
Properties 121
Panel Navigator 22 , 115 , 116 , 134 ,
135

Device orientation change 145

ALPHA ANYWHERE WEB & MOBILE MADE EASY


The Basics and More for 3.0 - Volume 2

Dynamic Panel
Add / remove 162
Incomplete form 160
Locator Icons 144
Navigation 135
onSwipe event 138 , 146
Store / Restore state 160
Styles 22
Buttons 136 , 138 , 141
Carousel 137
Device 136
List 136 , 141 , 143
Loop Navigation 137
Orientation 137
Programmatic 138
Tab Band 140
Tab Buttons 139
Panel Window 128 , 131
PanelOverlay Container 133
Panels
Group controls 225
Templates 121
Peake, Frances M. v, 416
Permissions 263
PhoneGap 214 , 263
Primary Key(s)
SQL 367
Proctor & Peake.com 416
Pull data
Definition 168
Push data
Definition 168

Q
QBF Syntax 97
Query
Arguments (see Arguments)
Query by Form 97
Quick Panels 119
Genie 121

R
Raw Data 109
Record Locking
Optimistic 334
Records
Filter 348
Group 349
Relative URL 404
Reports 375
DBF 372

Filter with List Control 16 , 21


HTML vs PDF 21
Learn how to design 417
Open with button in UX 20
SQL 372
Create 372
Print 374
Publish 375
Quick Report 373
Reset button
Create 90
Responsive Layout 238
Actions 241
Complex 243
Definition 219
Genie 240
Javascript, view 242
Rules 240
Simple 239
Row Spacer 341
RowOnDemand 330

S
Script Library 406
Script Recorder 409
Security 263
Select Sequence
Oracle 368
Server
Definition 165
setValue 109
Show/Hide
See also Container control
Define for controls 224
Siblings 313
Simultaneous user access 334
Spin list 227
SQL
Connect to database 5
Connection
Portable 377
Data Source 362
Filter 367
Hosting 376
Library 375
More information 377
Order 367
Primary Key(s) 371
Publish Database Library 375
Query
Arguments (see Arguments)
Filter 367

Order 367
Primary Key 371
Server connection 376
SQL Builder 368
Testing 376
Vs. DBF 10
SQL Genie
Distinct records 86
Filter 86
SQL Query 27
Data
Filter 28
Order 28
Genie 27
SQL Select Statement
(see SQL Builder)
Static data
(See List Control > Data Source)
Specify type 26
Static Text
Align 23
Static Text control 23
Submit button
Create 90
Synchronization Policy 183
Syncronize
Definition 166

T
Tab Control
Tab Pane control
Tabbed Interface
See Container control
Tabbed UI component
See Menus > Web
Table
Create from controls 244
Multiple
Create from controls 249
Pack 413
Reindex 413
Single
Create from controls 244
Target
Window 21
Technical Support
(See Help)
Trace Window 408
Trapping 334
Trees 313
Troubleshooting
Error messages 405

423

INDEX

U
URL, Relative 404
UX
Containers
(see also Container control)
Tab Control 220
Tab Pane control 220
Controls
Move 23
Create 17
Data Controls
DropDownBox 34 , 96
Defined controls
ListMenu 288
List-Page number 69
List-Page selector 69
List-Record count 69
Embed Multiple Panels 161
Organize in pages 262
Other controls
Slider 104
Static Text 23
Primary Key
Assign 260

424

Search Part
Definition 166
Table
Refresh 254
Templates 121
Trouble shoot 91

V
Validation 262
Video
Display 260
Video Finder
Filter 392
Refresh 393
Using 392
Virtualize List 255

W
Wayne, Dr. Peter 410
Web Components
Desktop, use on 377
In-line Style (see In-line Style)

Web page
Display 260
Working Preview Window
Chrome 7
Detatch 6
Inernet Explorer 7
Re-attach 7
Refresh 7
Reload Page 8
Settings 7

X
Xbasic 407
Books for learning 417
Code Editor 408
How works on web 9
OLE Automation Browser 409
References 407
Scripts, writing 410
Toolbox 408
Videos 410

Web & Mobile Made Easy


The Basics and More for 3.0Volume 2

How to design with Alpha Anywheres revolutionary concepts for web and
mobile applications.

Learn how to control the List control.

Learn how to created disconnected apps. This is the solution for when the
user is offline.

Whats inside

Dazzling Design Alpha Anywhere performs design magic on all types of devices!
Luscious Lists Part 1 Learn how lists display data delightfully!
Luscious Lists Part 2 Online or offline.your apps are always available!
Priceless Panels What you need to know about making mobile marvelous!
Optimizing the UX Even more ways to create astonishing applications!
Masterful Menus Be it mobile or webthese menus make you master of the universe!
Gifted Grids If web is your preference, grids are your BFFs!
Sexy SQL Secrets Beyond the Connection String!
Heavenly Help Plus Video and Documentation Help is even better now!
Practical Points An assortment of aids for your application!

Theequipmentyouwillneedtohavetousethisbook:

BOOKSHELF CATEGORY:
ALPHA ANYWHERE /SOFTWARE/INTERNET/WEB & MOBILE DESIGN

You will need to have the Alpha Anywhere program in


stalled on your computer. Informa on on purchasing the
programmaybefoundatwww.alphaso ware.com.

AlphaAnywherewasformerlyknownasAlphaFive.

Licensingisrequiredtoputyourapplica ononline.

A companion CD containing the working databases for the


bookisincludedwiththehardcopyofthismanual.

Liberty Manuals are published by


Liberty Manuals Company, 1806 Rte 35, Suite 104, Oakhurst, NJ 07755.
1-732-842-3000

LIBERTY

USA $69.95

MANUALS

www.LibertyManuals.com

Das könnte Ihnen auch gefallen