Beruflich Dokumente
Kultur Dokumente
www.LibertyManuals.com
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.
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
The file transfer to the mobile device begins as soon as it hits the DropBox folder.
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.
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...
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.
Volume
En
cl
os
ed
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
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
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
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.
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
viii
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-
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.
VIDEOS
cises.
Note: The Alpha Anywhere program is necessary to open
the lesson files.
ix
INTRODUCTION
Support
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.
8.
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-
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
xi
TABLE OF CONTENTS
xii
Video Library:
More List Control Features ...............................................................................108
xiii
TABLE OF CONTENTS
Video Library:
More on Panels...................................................................................................160
xiv
5 Optimizing the UX
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
xv
TABLE OF CONTENTS
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
xvi
xvii
TABLE OF CONTENTS
7 Gifted Grids
xviii
10 Practical Pointers
xix
TABLE OF CONTENTS
Index
xx
...............................................................................................................419
Chapter 1.
Dazzling Design
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
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.
Ajax callback that passes back a wealth of information to the server about
the device, thus determining which pages or components should be loaded.
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.
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.
If you have changed the location of the book files or have any other problem,
update them as follows:
a. Web
b. Select
c. Modify
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).
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
b. Go
to Working Preview.
Internet Explorer.
d. Click
Switch to Chrome.
OK.
g. Click
ATTACH WP
SETTINGS SAVED
RETURN TO IE
a. Click
Using Chrome.
b. Click
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.
Computer transactions using the client/server model are very common. For
example, to check your bank account from your computer, a client program in
your computer forwards your request to a server program at the bank. That program may in turn forward the request to its own client program that sends a
request to a database server at another bank computer to retrieve your account
balance. The balance is returned back to the bank data client, which in turn
serves it back to the client in your personal computer, which displays the information for you.
CENTRAL IDEA IN
NETWORK COMPUTING
The client/server model has become one of the central ideas of network
computing. Most business applications being written today use [this] model.
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
Characteristics of a server
The answer is he cant, because Alpha Anywhere code only exists and
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.
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
*. A5W pages are created with Alpha Anywheres built-in HTML editor.
. See Chapter 4.
. Reprinted from Volume 1 of this series.
10
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?
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
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. *
12
Chapter 2.
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.
Description
Review from Volume 1
16
24
25
26
29
30
36
Flex definition good for Mobile apps.
37
38
42
Multiple layouts.
44
53
F. Displaying Images
57
60
65
71
A. Adding Buttons
72
B. Grouping Records
76
80
87
93
93
95
101
103
14
Page
107
Video references for additional topics.
108
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
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
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.
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
*. If there is any problem connecting, see Using connection strings developed for this book on page 361.
17
Firstname.
Lastname.
Bill_City.
Bill_State-Region.
TAB: FIELDS
Accept defaults.
TAB: LIST PROPERTIES
Accept defaults.
TAB: LIST LAYOUT
a. Move
b. Click
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
18
b. Choose
c. Edit
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
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
c. Categories:
d. Actions:
e. Click
Choose Reports.
OK.
type: Report.
h. Layout
Choose MyCustomersByState.
j.
Click OK.
20
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.
o. HTML
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
OK.
21
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.
22
ADD HEADER
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.
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
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%.
57. Close the component when you are finished or leave it open for the next
exercise.
GO TO ALPHA VIDEO
RPT_V12-2
24
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.
25
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
DATA
{'*title' : 'Prospects'}
Rows 9 - 11 specify the rest of the data.
You can also define the data type for each column by including it in the column name.
a. Click
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.
26
tab > Selected Tables: Click Add Table and choose Customer. (Click OK)
b. Columns
pany.
c. Filter
tab:
tab:
27
e. Click
OK.
COLUMN PROPERTIES
PROPERTIES: [SQL_LIST_FILTERED]
Height: 1.5in
Width: 6in.
28
b. Field
c. Click
OK.
29
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
30
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.
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.
*. 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
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 UP DATES
32
YAHOO URL
'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
PROPERTIES: [CUSTOM_LIST]
Position: Choose Above.
Width: 8in.
List Properties: Click the button.
a. Data
33
b. Custom
> Xbasic function name: Click the button and enter the name
of the function, getData.
c. Click
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
e. Click
OK.
34
This exercise will use the same code as in the previous one. We need only
PROPERTIES: [TICKER]
Default value: Enter GM.
Choices: Click the button.
a. Choices
b. Enter
GM
YHOO
GOOG
AAPL
c. Click
JAVASCRIPT
OK.
the following:
{dialog.object}._refreshListData('Custom_List');
[Custom_List] is the name of the List Control.
FIELD LABEL
c. Click Save.
Position: Choose Above.
35
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.
GO TO ALPHA VIDEO
UXL_V12--1,3
36
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.
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
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
38
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.
*. This component uses a Panel Navigator with a TabBand style (discussed in Chapter 3).
39
MAPS
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
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
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
PROPERTIES: [LIST_BORDEROUTSIDERED]
Height: 3in
Width: 100%
Fill container: No.
GO TO ALPHA VIDEO
UXL_V12--41
You can define the length of a list absolutely or you can have it fill the available space.
ABSOLUTE LENGTH
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.*
42
LIST PROPERTIES
FIELD PROPERTIES
TEXTBRX PROPERTIES
Watermark: Yes.
Watermark text: <FieldLabel>
43
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).
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
DEFAULT LAYOUT
Choose FreeForm.
FREEFORM TYPE
The items in yellow above will be used to identify the layout List Layout
page coming up next.
45
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
c. Layout
46
as
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
48
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
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
IMAGES
a. Click
b. Select
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 disclosure icon is available in three different styles: Bold, Subtle and
User Defined.
d. Click
JAVASCRIPT NOTES
ELSE CONDITION
51
CASE SENSITIVE
LOGICAL EXPRESSION
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
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
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
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).
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
54
Data Source tab: Uses the Customer table from the AlphaSports SQL
Custom Control.
Enter Full_name.
d. Fields
list: Select
Full_name (Custom Control).
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
WITH THIS
55
The ds argument (red above) passes in the current values for each of the
fields in the current List row.
g. Click
OK.
COLUMN PROPERTIES
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
56
b. Adjust
PROPERTIES: [CLIENTSIDE]
Width: Change to 6in
F. Displaying Images
COMPLETED COMPONENT
57
b. Data
d. Select
Next, we will show how to add an image based on the contents of the row.
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.
58
Add Condition.
b. Expression:
Enter:
Last_name = Hussey
c. Image
d. Built-in
e. Filter
f.
g. Click
OK twice.
i.
j.
k. Built-in
l.
Filter on: Enter red and choose the large red ball. (Click Insert)
m. Click
OK three times.
59
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.
You can also define alternate row colors and background colors for items
such as buttons (screen shot on page 63).
60
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.
61
b. Click
Add Condition.
c. Logical
Expression: Enter
Country = USA
style.
e. Choose
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
Add condition.
b. Logical
c. Style:
62
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
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).
63
64
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
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';
}
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
PAGINATION
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
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).
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
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
68
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
c. Select
ciated.
d. Choose
e. Click
OK twice.
c. Select
OK.
Now we will run through the settings for each of our examples.
12. No_record_Limit List: Go to the List Builder > Data Source tab.
a. Data
RECORD LIMIT
13. Record_Limit List: Go to the List Builder > Data Source tab.
a. Data
69
14. Nav_by_record List: Go to the List Builder > Data Source tab.
a. Data
Pagination:
15. Nav_by_page List: Go to the List Builder > Data Source tab.
a. Data
Pagination:
Pagination:
70
17. AutoFetchMore List: Go to the List Builder > Data Source tab.
a. Data
Pagination:
71
A. Adding Buttons
COMPLETED COMPONENT
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
c. Read
d. Select
72
g. Choose
j.
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.
m. Comment:
n. Save
Enter OpenStateReport.
OK.
q. Select
Click OK.
*. To find out how to select your favorite CSS colors, see Using the Database Explorer on page 402.
73
FORMAT BUTTON
BACKGROUND
ALTERNATING
ROW COLORS
{
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
BUTTON PROPERTIES
*. Of course, you could always copy and paste from the completed component, Button_withFilter.
74
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
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
CLIENT-SIDE
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.
b. Fill
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.
77
a. Type:
b. Click
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
{f_upper(lower<BreakValue>))}
d. Type
a space.
e. Click
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.
Pagination:
78
COLUMN PROPERTIES
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.
79
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
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.
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.
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.
81
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.
The setting can be found in two places, both of which are found at the
82
b. List_Country
Break.
List_Country
a. Data
ARGUMENTS
b. Arguments:
c. Click
ARGUMENT #2
WHAT CITY
d. Click
Data Source:
83
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:
b. Layout
in List: Country.
14. List_City List: Go to the List Builder > Data Source tab.
a. Data
b. Arguments:
a. SQL
Data Source:
List:
84
Value:
b. Layout
in List: City.
20. List_Company List: Go to the List Builder > Data Source tab.
a. Data
b. Arguments:
a. SQL
Data Source:
List:
Value:
85
We will change the width and remove the column headings here, too.
b. Layout
in List: CompanyName.
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).
b. SQL
DISTINCT
c. SQL
FILTER
a.
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
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.
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
87
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.
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.
b. Return
88
d. Click
Edit Action.
Filter: Enter Populate. Choose Populate Controls in UX Component with data from Tables. (Click OK)
trols.
h. Controls
Select RegUsers_List.
i.
Click OK.
j.
k. Save
m. Click
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.
89
c. Choose
setTimeout(function() {
{dialog.object}.runAction('PopulateControl');
},100);
e. Click
OK twice.
Click OK twice.
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
Data > After submit action: Choose Edit record just submit-
ted.
c. Refresh
List Controls:
90
d. Click
OK twice.
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
b. Click
Edit.
c. Click
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.
91
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');
following: {dialog.object}.runAction('PopulateControls');
c. Click
OK.
92
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
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.
94
95
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
are: Dynamic.
c. AlphaDAO
d. AlphaDAO
tab:
g. Close
the Query.
h. Click
OK twice.
b. Filter:
c. Click
OK.
e. Define
*. 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
Click Add.
g. Select
h. Field
i.
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.
k. Click
l.
OK twice.
b. Filter:
c. Click
OK.
g. Save
98
The default sort order is State, City, Last name. It is worth spending a couple
of minutes to see exactly how it works.
a. DropdownBox:
b. Click
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.
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)
99
a. Define
Add.
c. Select
d. Field
e. Search
f.
option: Choose 2.
g. Save
100
b. Filter:
d. Keyword
e. Search
search: Yes.
g. Click
OK twice.
h. Comment:
i.
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.
101
b. Filter:
c. Action
d. List
e. Search
This is the name of the control that will receive the search criteria.
f.
Click OK.
g. Comment:
h. Save
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.
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
b. Filter:
c. Action
d. List
e. Search
This is the name of the control that will receive the search criteria.
102
f.
Click OK.
g. Comment:
h. Save
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 completed component for this section is Ux_CustomList_RecordNavigator (List Controls Web Project).
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
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.
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
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
b. Slider
c. Slider message:
({recordNumber} of {recordcount}) <b>{PrimaryKeyDescription}</b>
d. Slider
width: 6in.
e. Slider
f.
g. Click
Cancel.
b. Return
Navigation icons and buttons require that the Primary Keys be loaded. We
have already done that (step 8 on page 104).
105
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
WATERMARK
PROPERTIES: [SEARCH]
Watermark: Yes.
Watermark text: Company, City, Country.
The action used here is Get Primary Key values for Records in
Query.
a. Click
c. Slider
Control:
106
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
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.
The SQL Server Airports sample database download consists of a zip file
containing these files:
airports.bak
mysql_us_airports.sql
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
SAMPLE COMPONENT
107
GO TO ALPHA VIDEO
UXL_V12--33, 34
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.
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.
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
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
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.
110
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
setting the layout style to snaking, but there is more control over how the snaking Layout is defined.
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
b. Click
c. Unzip
d. Open
e. Return
f. Go
to Alpha Anywhere.
to the WPCP > Notes Web Project that holds two components.
g. Use
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.
Topic
Understanding Panel Cards, Panel Navigators and Panel Layouts
115
119
122
122
124
128
133
135
A. Understanding Navigation
135
144
145
146
147
148
150
C. Understanding Docking
151
153
156
158
114
Page
160
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.
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
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
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
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
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.
119
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
{PanelCard-HF}
c. Double
d. Place
the cursor before the line and press Tab or click Insert a tab.
{PanelCard-HF}
{StaticTextObject}
e. Click
120
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
121
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
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.
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
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
c. Overtype
Class: {dialog.style}Heading
CONTAINER BEGIN
PROPERTIES
STATIC TEXT PROPERTIES
124
CENTER BUTTON
CONTAINER BEGIN
PROPERTIES
LEFT BUTTON
CONTAINER BEGIN
PROPERTIES
RIGHT BUTTON
CONTAINER BEGIN
PROPERTIES
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
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.
Company = Liberty
This expression is case sensitive.
b. When
126
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.
CONTAINER BEGIN
PROPERTIES
b. Positioning
and Size:
Position: Absolute.
Top: 0px.
Right: 0px.
c. Click Cancel.
Prevent container float: Yes.
127
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.
128
b. Filter
d. Container
e. Click
At this writing, there are two pre-defined window styles, Panel (com-
g. Action
Sheet properties:
OK.
j.
Click OK.
k. Comment:
l.
129
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.
CANCEL BUTTON
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)
{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
d. Click
e. Click
Close.
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.
CODE
{dialog.Object}.closeContainerWindow(this);
g. Save
the Javascript.
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
MESSAGE
131
b. Filter
d. Container
e. Click
Select Panel.
g. Panel
properties:
OK.
j.
Click OK.
k. Comment:
l.
132
GO TO ALPHA VIDEO
UX_V12-6
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
133
6. Click Cancel.
FIXED POSITION OBJECT
FOR LAYOUT
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
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
CONTAINER BEGIN
PROPERTIES
b. Click
c. Click
OK.
134
CONTAINER BEGIN
PROPERTIES
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.
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
135
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.
136
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
PANEL NAVIGATOR
PROPERTIES
c. Go
d. Go
to Design mode.
to Design mode.
PANEL NAVIGATOR
PROPERTIES
*. 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
ON SWIPE EVENT
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.
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.
to Design mode.
PANEL NAVIGATOR
PROPERTIES
138
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)
{dialog.object}.panelSetActive('PANELCARD_3');
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)
TAB BUTTONS
to Working Preview.
b. Click
c. Return
to Design mode.
139
PANEL NAVIGATOR
PROPERTIES
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
FOOTER DEFINITION
PANEL NAVIGATOR
PROPER5TIES
One more style to go, Lists. It is multi-purpose and can be used for both
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
Both styles are defined in the same basic way. The choice is made in
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
NAVIGATION BUTTONS
142
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
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
SHOW / HIDE
LEAF PROPERTIES
PROPERTIES: MY LIST
Item type: Heading.
143
SECURITY
SERVER-SIDE
BRANCH PROPERTIES
SECURITY
SERVER-SIDE
g. Close
GO TO ALPHA VIDEO
UX_V12-46
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
PANEL NAVIGATOR
PROPERTIES
NAVIGATOR POSITION
INDICATOR
GO TO ALPHA VIDEO
UX_V12-11
145
PANEL NAVIGATOR
PROPERTIES
GO TO ALPHA VIDEO
UXM_V12-4
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
PANEL NAVIGATOR
PROPERTIES
defined there.
JAVASCRIPT
b. Close
JAVASCRIPT
*. 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
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.
148
HORIZONTAL
149
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
C. Understanding Docking
COMPLETED COMPONENT
151
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
152
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
LEFTMENU is defined
153
154
Two Button Controllers have been added. Heres how they were defined.
a. Click
the dialog.
TO BE CONTINUED
GO TO ALPHA VIDEO
UX_V12-78
155
The completed components for this section are flowCollapse and flowCol-
HOW IT WORKS
LTR
RTL
TTB
BTT
156
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
157
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
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.
158
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.*
159
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
160
EMBEDDED UX - ON PANEL
ACTIVE EVENT
GO TO ALPHA VIDEO
161
DYNAMICALLY ADD /
REMOVE PANEL
GO TO ALPHA VIDEO
162
Chapter 4.
Page
165
169
169
171
Understanding development
172
176
189
197
201
Data Connection: Comparing Data Binding & List Detail View Methods
207
208
210
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
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
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.
166
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
angle).
Record that has been added and saved, but not synchronized.
Inherited dirty records (default is pale orange triangle).
Parent of a dirty child.
*. All markers can be modified with CSS. See Format Markers, Errors, warnings on page 214.
. See Understanding Hierarchical Data on page 197.
167
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
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
THE SOLUTION
PUTTING IT SIMPLY
Of course not!
HOW IT WORKS
.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
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.
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
170
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
Because
The data is persisted to Local Storage, a standard HTML5 feature.
Therefore. Alpha Anywhere disconnected applications and connected applications work in essentially the same manner!
Bottom
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
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
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-
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.
174
write conflict because the current value in the server record (Tony
Morneo Taqueria) no longer matches his original value (Antonio
Moreno Taqueria).
RESOLUTION
*. The developer can resolve them programmatically by writing an onWriteConflict server-side event handler.
175
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.
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.
176
In the UX, the data must be saved and then synchronized in order to be
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.
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
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
DETAIL VIEW
DISCONNECTED
APPLICATIONS #1
DEBUG INFO
SEARCH PART
DISCONNECTED
APPLICATIONS #2
5. Click OK.
178
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
180
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.
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
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
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.
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
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.
183
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.
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.
184
CONTAINER BEGIN
PROPERTIES
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.
OK.
23. Click Detail View - Quick Setup Genie (button at bottom right of
builder).
185
b. Choose
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.
Now we will tell the builder to place the Fax control after Phone.
e. Select
f.
We will identify the label position here to match the existing controls.
g. Label
h. Label
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.
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.
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
OK.
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
PROPERTIES: [COMPANYNAME]
FIELD PROPERTIES
c. Click
Set Properties.
*. 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
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.
Local Storage has two important types of settings, persisting and restoring.
Persist means to save to Local Storage.
189
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
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.
*. This has nothing to do with refreshing data from the server. That is covered in List Builder > Detail View tab > Synchronization Policy.
190
page 178.
List Properties: Define as below.
MAXIMUM DOWNLOAD SIZE
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
191
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
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
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
will actually commit the edit to the server and it happens fast so be careful
when using this action.*
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:
a. Create
b. Identify
*. You can test this out with the MyDetailView component designed in the previous section.
. http://www.w3schools.com/css/css_selectors.asp
193
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
g. Color:
194
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
box.
195
THE PROCESS
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
DIRTY MARKERS
The first record is saved and a dirty marker appears in the row
SYNCHRONIZE RECORDS
196
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
DETAIL VIEW
in as follows:
DISCONNECTED OPERATION
PARENT LIST
198
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.
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
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
ID: 5.
Save.
200
The parent linking field and record auto-increment fields are automat-
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.
KEYS
201
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:
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
LIST KEY
Our first test showed this key to have 8,854 bytes, a later test showed 9,262,
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
If you do not see data for Thomas Hardy, click the Show key again to
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
b. Click
REBUILD KEY
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
21. _VARIABLES key: Click Show to see the Search variables for Paris and
the first contact, Mary Bertrand.
206
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
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.
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.
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
207
If you are building a mobile application, List Detail View is the only option
MOBILE APPS
GO TO ALPHA VIDEO
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.
208
b. Create
c. Add
d.
e. Click
OK.
Select the target control. The new control(s) will be added before or
after the target control: Choose [list1].
g. Position
i.
j.
Click Close.
PROPERTIES: [LIST1]
a. Remove
LIST PROPERTIES
FIELD LABEL
the break.
Width: 5.5in
Label: Customers.
Position: Above.
209
210
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.
Yes.
c. Click
OK.
ing Preview.
GO TO ALPHA VIDEO
211
the 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.
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
Undo edits made in the Detail View (before the edits have been saved
back to the List).
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
212
Synchronizes data from ALL Lists on the UX component - user will not
have to press Synchronize buttons for each List.
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).
(Used for debugging only.) Shows data in the current row of the List.
Requires placeholder defined at:
info: Yes.
b. Placeholder
the buttons.
List Search Part Buttons Search Part is set to Individual Controls or Keyword Search
Submit Search (Search)
Submit query
Clear search
Remove the filter that was applied when the Query form was submitted
Clear controls
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
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
*. 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
any UX Component.
c. Click
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.
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
b. Double
listing).
c. Choose
d. Go
offlinedemo1 UX component.
215
Notes:
216
Chapter 5.
Optimizing the UX
Description
Page
219
Defining Containers:
219
220
221
236
237
Your application will look awesome on all
devices.
238
243
244
244
249
More UX Elements:
254
254
258
255
257
260
262
262
262
Internationalization
262
Lookups
262
262
263
218
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
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).
219
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.
The samples for this section are found in the Containers Web Project.
Project).
220
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.
The completed components for this section are found in the Containers Web
Project. Their names match either the exercise title or the sub-type.
221
222
None.
InsertAround.
tion.
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
a. [Container
Select the control, right click and choose Toggle Break or click
the Toggle Break button above the controls list.
b. Go
c. Go
to iPhone Vertical.
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.
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
b. Container
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.
to Working Preview.
b. Inspect
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
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
the City, State and Zip fields in a Container with a subtype of ControlGroup.
b. Go
c. Return
to Design mode.
d. Remove
e. See
to Working Preview.
i. Save as MyContainerControlButttonGroup.
226
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.
b. Properties
c. Click
> Spin List Properties > Static Data: Click the button.
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
CONTAINER BEGIN
PROPERTIES
227
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
BUTTON PROPERTIES
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)
as MyWindow.
b. Filter
c. Display
OK)
d. Comment:
e. Save
228
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
as MyFlexLayout.
c. Wrap
VERY IMPORTANT
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
Card.
f. Mobile
= Yes.
VIEW IN BROWSER
Next, well see how this works when a Browser window is resized.
h. Return
to Design mode.
i.
Mobile: Uncheck.
j.
k. Resize
the width of the Browser window to see how the flex layout is
maintained.
230
Go To Alpha Video
UX_V12-69
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
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
b. Name
c. Wrap
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:
232
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
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
c. Choose
233
b. Draw
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
d. Select
Sex:1 and draw a box over the Male radio button as below.
e. Repeat
f. Click
OK.
234
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
b. Filter:
Enter Absolute.
c. Choose:
d. Absolute
e. Filename:
f.
Enter MyTempFile.
g. Click
OK.
h. Comment:
i.
Download to PDF.
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.
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
c. Return
to Design mode.
d. Change
e. Return
f. Return
control: Right click. Choose Label Position > Set all controls > None.
b. Turn
236
c. Watermark
FIELD PROPERTIES
above for City, State and Zip, using the following widths.
CONTAINER BEGIN
PROPERTIES
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
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
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.
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
BROWSERS
DEVICES
SCREEN
OTHER
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
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.
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
STEP 1
STEP 2
STEP 3
RULE #1
RULE #2
240
EXPRESSION
(right below).
b. Choose
c. Click
landscape
Result:screen.orientation = = landscape
JAVASCRIPT OPERATORS
FIELD TYPES
NUMERIC (IN PIXELS)
CHARACTER
LOGICAL
MIXED
Add Action.
b. Choose:
c. Select
241
ACTION #2
a. Click
Add Action.
b. Choose
c. Select
= = portrait
ACTION #2
SHOW/HIDE PANEL HEADER/
FOOTER
242
You can save rule sets and then load them at a later time.
Save rule set and Load rule set.
COPY PROPERTIES
a. Select
b. Click
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.
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
Go To Alpha Video
UX_12 - 69
& 72
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.
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.
MULTIPLE ALIASES
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
245
d. Select
e. Size
GROUP
f.
g. Size:
ONE AT A TIME
Enter 30.
h. Select
i.
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
k. Global
Create table(s).
o. Click
dialog.
247
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.*
REFRESH TABLE
Since we have changed the structure of the table, we must refresh the table.
CHANGE BINDING
to Design Mode.
PROPERTIES: CUSTOMERID
DATA BINDING
*. 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
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
b. Server-side
c. Place
your cursor above the blue line in the code workspace as indicated above.
d. Click
Action Scripting.
e. Choose
g. Click
OK.
Data > After submit action: Choose Edit record just submit-
ted.
i.
j.
Click OK.
249
e. Click
OK.
Container_2.
g. Properties > Table Aliases:
Click Add.
h. Specify
i. Click
250
OK.
k. CustomerId
l.
m. Define
n. Logical
o. Define
251
s. Table Aliases:
Select my_customer_address.
t. Table
u. Global
x. Click
y.
6. Go to Working Preview.
a. CustomerId:
Enter 105.
b. Enter
c. Click
Submit.
252
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.
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
253
Submit.
the control.
b. Properties
More UX Elements:
Here are some additional notes that you will find useful. Be sure to look them over.
254
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.
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
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.
SETTINGS
OFFSET
Go To Alpha Video
UX_12-102
256
SET UP
257
b. Click
c. Click
Specify Tables.
Bind Tables to Repeating Sections.
Bind Dialog Controls to Table Fields.
b. Click
258
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
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
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
c. Select
d. Add
e. UX
f.
Click Create new table(s) to match the controls on your Dialog component.
g. Go
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
IFRAME CONTROL
*. 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
in a Browser.
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
d. After
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
*. To get Firebug, open Firefox. Go to Tools > Add Ons. In the Search box (upper right corner), enter Firebug.
261
Go To Alpha Video
Videos > Filter: Enter Dialog. Choose:
D9. Dialog Component - Genie Style.
b. Choose
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.
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
262
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
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
Notes:
264
Chapter 6.
Masterful Menus
Description
Page
267
269
270
275
282
266
289
289
303
309
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
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
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
NAVIGATION SYSTEM
Web: Organizes components, pages and reports with buttons and tabs. This
builder even adds a Home page. Easiest & fastest.
268
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
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.
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
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
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
JAVASCRIPT - (TOUCH,
MOUSE, POINTER EVENTS)
PROPERTIES: NJ CUSTOMERS
onClick: Click the button.
Dialog Title: Edit Action
a. Click
c. Specify
twice)
d. Select
Select.
Select ClientsList.
272
Click OK.
View: PDF.
OK.
o. Comment:
p. Save
OK.
Dialog Title: Edit action
r. Click
OK.
Customers:
UX:
Action name: Open UX Component.
Use Action Javascript to open a UX component.
Component name: AbsoluteLayout.
w. Grid:
*. 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
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.
z.
aa. Menu
OK.
ac. Comment:
ad. Save
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
CAUTION
GO TO ALPHA VIDEO
UX_V12-19, 20, 21
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.
275
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
b. Properties
c:Alpha_WebMobileBook_3.0_Volume2 ABC_WebMobile_Less
ons \ Samples.
b. Copy
If there is already a folder under that name, DO NOT overwrite it because the
existing one should be the latest version.
c. Return
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
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.
277
8. Leftmenu and Rightmenu Lists: Go to the List Builder > Data Source
tab. (Properties > List Properties > List Properties)
a. Static
There are five items, Menu, Item1, Item2, Item3 and Item4, all
on separate lines. The top line, Menu is the field name.
type: Freeform.
c. Freeform
type: Vertical.
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.
278
a. Click
the button
b. Click
c. Button
Id: Choose
LeftMenuButton.
d. Panel
e. Click
OK twice.
the button.
b. Click
c. Button
d. Panel
e. Click
OK twice.
DOCK
279
A quick way to open events for the list is at the bottom of the List Builder.
13. Click List Events (lower left).
ON CLICK EVENT
function selectMenuItemRight(item) {
var pObj = {dialog.object}.panelGet('TOPPANEL');
280
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.
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');
}
}
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
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.
STANDARD
*. When you watch the video, you will understand this comment!
282
Uses Panels for initial view and menu options. Menu options have
FONT-AWESOME
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
283
the dialog.
LIST PROPERTIES
PROPERTIES: [MENULIST]
Fill container: Yes.
List properties: Click the button.
Data Source Type: Static.
Static data: Click the Button.
a. Static
choices:
Cancel.
e. Note
f. Click
284
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:
c. Choose:
d. Continue
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.
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
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
CONTAINER BEGIN
PROPERTIES
CONTAINER BEGIN
PROPERTIES
<SPAN>
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
<span id="{dialog.componentName}APPPANELHEADER">Panel
Header</span>
b. Close
*. 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
LIST PROPERTIES
PROPERTIES: [MENULIST]
Fill container: Yes.
List properties: Click the button.
Data Source Type: Static.
Static data: Click the button.
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
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
a. Examine
HIDE/SHOW PANEL
DISPLAY
GO TO ALPHA VIDEO
The following section has a video that describes modifying Icons and CSS in
a list menu (page 289).
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
288
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
b. Javascript
GO TO ALPHA VIDEO
UX_V12-90
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
289
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,
so the AJAX callback is for the active grid only. Lets take a look at the completed component.
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
Adding controls
7. Tabbed UI Controls > Tabbed UI Buttons: Click Component.
Dialog Title: Insert Tabbed UI Pane
or Hyperlinks.
Object Type: Available options:
Component.
Report Layout.
A5W page.
Static HTML page.
External (web) page.
PDF document.
d. Object
e. Object
f.
g. Pane
PROPERTIES
292
Click OK.
Once an object is added to the list, its properties become available. Most are
self-explanatory.
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.*
DISPLAY NOTES
Live Preview is best because reports and Maintenance components are not
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.
*. The Maintenance Page contains the Maintenance Component, a DBF only utility that packs and indexes tables.
293
UPLOAD FILE UX
CALENDAR SYSTEM
CLIENTS LIST
MAINTENANCE PGE
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
b. Click
Containers.
c. Choose
Frame.
Insert opening Frame Begin & closing Frame End tags: Yes.
Label: Client Info. (Click OK)
d. Repeat
as follows:
294
Adding tabs
Tabs further organize the items.
295
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.
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.
b. Click Paste current property value to multiple controls. (Button above controls list - green inset at left.
c. CTRL
d. Click
PANEL WIDTH
Set Properties.
296
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)
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
e. Change
f.
Click Save.
Adding a footer
TABBED UI PROPERTIES
(CONT.)
297
Liberty Manuals Company - 1806 Rte 35, Suite 104 - Oakhurst, NJ 07755.
b. Center
LINK TO PAGES
the text.
e. Click
Save.
Local.
Home page HTML: Click the button.
a. Enter
b. Go
c. After
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
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.
*. 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
When you first saved the component in step 5 on page 291, an A5W page
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.
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.
EDITING AN OBJECT
a. Select
a component.
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.
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
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
(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
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.
to Tabbed UI Properties.
OTHER
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.
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
#26
303
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.
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
304
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 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.
ponent on it.
b. Add
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
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
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
306
307
a. Page
type: Hyperlink.
d. URL: http://www.LibertyManuals.com
(Click OK)
desired text:
d. Click
e. Save
the page.
308
Menus can have all entries on a single level, or can have child entries,
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
b. Define
c. Create
d. Add
e. Publish
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
b. Publish:
c. Launch
d. Page
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
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.
Horizontal layouts
create drop down
menus for the first
layer.
When there is
more than one layer
in a Horizontal lay-
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
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)
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.
312
ROOT SETTINGS
b. Click
c. Click
313
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.
Deleting nodes
Next, we will delete some nodes (children and siblings)
DELETE NODE
314
If security is enabled, defines which groups can see the menu items.
ITEM ID
ONCLICK JAVASCRIPT
TEXT
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.
If the node DOES NOT have children, the setting is entitled URL.
315
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.
b. Click
c. Click
Preview.
d. Click
above.
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
WORK AROUND
There are two places where you can add the above instruction.
a. Open
b. Tabbed
To change the page name to match the others in the system, see Change
page name on page 300.
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.
317
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
b. 90%
BORDERS
c. Size:
d. Color:
e. Click
318
Blue
OK (twice).
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.
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
319
320
Chapter 7.
Gifted Grids
Page
323
Component Type
Choosing Read Only or Updateable
323
327
335
338
342
343
344
351
351
Understanding Arguments
351
Understanding Arguments
351
Go to Working Preview.
Ordering Records
355
355
322
356
357
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.
323
TERMINOLOGY
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
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
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.
b. Click
325
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.
b. The
c. An
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?
326
RESULTS
OK.
b. Uncheck
c. Click
d. If
The Detail View has been removed and three new record lines have
Design mode).
COMPLETED COMPONENT
327
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).
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.
ALL ROWS
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
RowOnDemand
ROW ON DEMAND
opens 2 different
settings.
SHOW ON DEMAND
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
Working Preview.
c. Remove the value from any Last name and then press F9, Save or
Submit.
d. Place
329
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
2. Return to Design.
TABBED UI NAVIGATOR: GRID > UPDATE SETTINGS > EDITING PROPERTIES.
Row refresh method after
edits
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.
330
SUBMIT BUTTON
EDITING
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
DELETE
EDITS
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
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
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.
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
333
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
*. I suppose your were expecting me to say something about mouse traps here hey, I dont want to be too predictable!
334
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.
335
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
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.
10. Click
Manage templates.
Dialog Title: Manage Grid Templates
a. Choose
Projects tem-
plates.
b. Click
336
OK.
Windows
Explorer opens
at the proper
folder.
When a template is created, so are the
folders into
which they are
placed.
11. Close
Explorer.
a template.
b. Open
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
338
But. It doesnt always have to be that way, as well show you next.
339
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.
340
Static text: Click the button and enter Name: in the HTML edi-
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
341
Preview.
But. Were not done yet! More exciting stuff to come, so hold off a moment
before you take a break.
Each grid will be placed in a container that is opened and closed by clicking
on a bar.
342
ACCORDION STYLE
MASTER TEMPLATE
MASTER TEMPLATE
LAYOUT OPTIONS
40. Select 5 records from the record navigator to see them all.
41. Click Collapse Grid.
343
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.
344
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).
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.
345
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
346
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.
LAYOUT OPTIONS
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.
347
17. Change row labels as below and enter a colon and a space after each.
ROW PROPERTIES
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
348
PROPERTIES: HOBBY
Hide row: Yes.
LAYOUT OPTIONS
GROUP BREAKS
349
a. Break
b. Has
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
e. Replace
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
to Specify the
Header or Footer for instructions on
placement.
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
OK
Understanding Arguments*
COMPLETED COMPONENT
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
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).
name: WhatState.
Fill in the following in the right pane. Note explanations in the tip win-
dow.
d. Get
e. Preview
352
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.
c. Control
e. Press
f.
g. Click
OK.
*. 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
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.
c. Control
CHOICES
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)
354
h. Text
Ordering Records
This exercise continues from the previous one. The MyArgument* web com-
*. If you did not do the previous exercise, you can open Argument.
355
Close.
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
Editing
events
Undo edits becomes active
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
357
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.
358
Chapter 8.
361
362
361
362
362
363
363
364
365
368
371
372
374
360
Page
372
376
376
377
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
*. There is a way to do this, but its just easier to use ABC Seminars paths.
361
Above: #1. AlphaDAO Connections, #2 Edit AlphaDAO Connections, #3 Create SQL Connection String
5. Click Build.
362
363
OK.
*. 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
EXISTING, TEMPORARY,
EXCEL, ACCESS
This opens the AlphaDAO Connections dialog where you can edit
SQLView
There are certain elements of the SQL Query pane that bear a further look.
365
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.*
b. Table/View
*. Documentation > Filter: Enter Calling SQL Stored Procedures. David Brown explains the benefits with examples.
366
d. Available
The rest of the Query page options are similar to DBF, so well just take a
quick look.
DEFINE ARGUMENTS
Cancel.
ORDER
a. Order
READ ONLY?
SELECT PRIMARY KEY
Cancel.
*. 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
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
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
mat:
$123,456.00.
COLUMN PROPERTIES
in Design mode.
COMPLETED COMPONENT
368
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.
b. Click
369
JOIN TYPES
h. Click
SQL WINDOW
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
370
The SQL Select Statement on the Grid > Query page is read only.
To edit, click the Edit SQL in Query Builder button.
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
Cancel.
371
DBF REPORTS
SQL REPORTS
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!
372
7. Click Next.
Dialog Title: Design-Time Properties
373
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.
OVERVIEW
*. 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
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
376
Understanding portability
OR
377
Notes:
378
Chapter 9.
Page
381
382
382
382
384
387
Taking notes
388
Printing topics
390
390
Window style
391
391
Sending feedback
391
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
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.
381
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.
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
that particular page is opened, the images will be displayed even when you
are not on-line.
ENLARGING THE VIEWING
AREA
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
b. Select
the page.
c. Click OK.
One page is always open. The system requires that at least one page
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
the arrow at the right side of the tabs for a list (red circle
above).
b. Select
c. Click
383
BREADCRUMBS
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
Yes or No.
b. Preferences
c. Select
TRIM Function.
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:
arrow).
b. Click
Go (red circle).
384
MULTIPLE SEARCH
CRITERIA
b. Enter
Search again.
e. Enter
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
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
b. Synchronize
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
386
or
press F1.
HOW EB HELP WORKS
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.
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
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.
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
b. Name
The original pages in the list are now open in the right pane.
c. Open
d. Click
e. Name
f.
Click OK.
Alpha Anywhere recognizes that you have changed the list and
asks if you want to overwrite.
g. Overwrite
DELETING PAGES
b. Name
c. Click
d. Delete
e. Click
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
b. Select
c. Click
TRIM Function.
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
User Notes.
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!
b. Choose
c. Specify
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
EDIT
DELETE
a. Click
b. Confirm
NOTES DIRECTORY
deletion.
To identify and/or change the directory where the Notes are stored, go to:
a. Preferences
389
b. Choose
SQL or DBF.
c. Complete
dialog as indicated.
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
b. Click
Acrobat.
MULTIPLE PAGES
Printing multiple pages will result in a PDF document with a Table of Contents and Bookmarks.
a. Open
b. Click
e. Click
f. Click
OK.
tion.
390
OK.
You are then notified that the DV will be closed and reopened.
c. Click
SETTING A REMINDER
OK.
b. Right
You can have Alpha Anywhere remind you to refresh topics when you open
the DV.
a. Preferences
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
b. Preferences
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
391
b. Enter
c. Click
Send Feedback.
This feature is not available if you add notes (page 388) to the topic page.
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
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.
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
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
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
Description
Page
397
397
398
399
400
Webroot Folder
401
402
403
Tidbits
403
405
406
407
410
411
More Info
396
Help!
415
416
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.
397
c. Find
d. Choose
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.
398
Categories
GRID COMPONENT
UX COMPONENT
399
(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
400
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,
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
b. Drill
c. Click
in Edit mode.
b. Top
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.
402
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.
Tidbits
Some things you may find useful.
403
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/
http://WebReference.com/html/about.html
http://WebReference.com/html/
http://WebReference.com/foo/bar.html?baz
http://WebReference.com/foo/
This will be added to the base URL to form the URL that I want to match.*
Internet Options.
b. Click
*. 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
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
Understanding Xbasic
GO TO ALPHA HELP
GO TO ALPHA HELP
407
408
Debugger.
The Script Debugger allows the programmer to step
409
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.
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.
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.
411
FORM
NAVIGATOR
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
412
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
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
413
it, too.
TABBED UI NAVIGATOR: FORM > PROPERTIES
Review the available properties.
TABBED UI NAVIGATOR: INFORMATION
Fill in the standard Information textboxes.
COMPLETE
414
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.
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
SOFTWARE UPDATES
You can check for updates from within the program at Help > Download
Patches.
TECHNICAL SUPPORT*
LINKED IN
415
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.
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.
416
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
FUNCTIONS
417
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
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
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
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
N
Navigation System component
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
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
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
How to design with Alpha Anywheres revolutionary concepts for web and
mobile applications.
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
AlphaAnywherewasformerlyknownasAlphaFive.
Licensingisrequiredtoputyourapplica ononline.
LIBERTY
USA $69.95
MANUALS
www.LibertyManuals.com