2014 North Carolina Powerbuilder User Group Conference

Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
Sponsored by
North Carolina
PowerBuilder User Group
Advanced Datawindow
Techniques Using Appeon
Mobile 1.5
Migrating the Planner Datawindow
component to the iPad.
Buck Woolley

2
• Introduction
• 1. Explain what the planner datawindow is.
• 2. Demonstrate some of the features that needed to be migrated.
• 3. Demonstrate the planner datawindow on an iPad mini.
• 4. Discuss some of the design differences used to take advantage of
touch screen functionality
• 5. Discuss some of the differences between techniques used on a
Windows device compared to a touch device to create similar effects.
• 6. Conclusion

3
Goals
The goal of this project was to take a complex Powerbuilder dynamic
datawindow application and to attempt to move it to a tablet (iPad Mini)
using Appeon Mobile to determine how much functionality can be moved
and how much must be compromised or redesigned.
One consideration was not to simply move the UI ‘as is’ with minor changes
but to create an ideal tablet based UI that best uses the capability of a
tablet device while preserving as much of the original functionality as
possible.

4
Environment
MacBook Air 11
Parallels Desktop 7
Windows 7.0
Powerbuilder 12.5
Appeon Mobile 1.5
Tablet:
iPad Mini Retina
Appeon Workspace
SQLAnywhere Ultralite Database

5
• Agenda
• 1. Explain and demonstrate the planner datawindow on Windows and
on the iPad.
• 2. Present some of the functionality and objects that are common.
• 3. Present the functionalities that are different and discuss some of the
differences between techniques used on a Windows device compared
to a touch device to create similar effects.
• Mouse
• Drawing Object
• Menu
• Treeview Datawindow
• 4. On line resources and conclusion

6
• Planner Datawindow
The planner datawindow is a dynamically created datawindow that allows
users to apply events, schedules, tasks or physical objects to a datetime
grid. In the demo the tasks are classes or students applied to instructors.
It is completely mouse driven. It allows users to select and ‘draw’ a task
and apply it to an instructor on the grid. It also lets users move, copy,
extend and delete events.
Both versions are database driven using SQL Anywhere on Windows and
an Ultralite database on the ipad. The application is compiled using
Appeon Mobile 1.5 to run disconnected, there is no server database.

7
• Windows Based Planner Datawindow

8
• Tablet Based Planner Datawindow

9
• Planner Datawindow Common Objects/Functions
• Treeview datawindow
• Treeview control
• Multiple child windows in a main window viewing area
• Report datawindow
• Calendar datawindow

10
• Both versions use the treeview datawindow. However the tablet
version uses a different selection method that will be discusses later.

11
• Treeview Control
• Both versions use the treeview control. The treeview item contains a
reference to each planner control.

12
• Child Windows
• Both versions can open multiple child planner windows within a main
window viewing area. The planner windows can be moved around and
arranged with this viewing area

13
• Datawindow Reports
• Both versions have datawindow reports showing a list corresponding to
the selected planner window.

14
• Calendar Datawindows
• Both versions have similar calendar datawindows for date picking. The
tablet version has been modified for touch functionality

15
• Planner Datawindow Differences in Objects/Functions
• Mouse
• Drawing Objects
• Menu
• Table Functions

16
• Design Considerations
• 1. No mouse! No click, doubleclick, right/left click
• 2. No arrow with a precise point. Fat finger.
• 3. (Not much space.)
• 4. Less horsepower
• 5. Keyboard not convenient. Not really used for the planner.
• 6. More hardware goodies.
• 7. No ‘MDI’, no windows or menus in the traditional sense. Appeon
Mobile takes care of this.

17
• Design Issue 1, No Mouse!
• In order to keep the appearance the same and to allow the display
of a significant time interval without the need to scroll, I decided to
keep the cell widths and heights the same on the tablet version as
on the windows version.
• This is no problem when you
have a nice exact mouse
pointer in Windows to precisely
point to February 11.

18
Scroll
Mousemove
Left click
mousemove• Design Issue 1, No Mouse!
To achieve events like scroll, click,
right/left click and drag, I
created an NVO emulate the
different mouse functions based
on the fingers used.

19
•
• On a tablet, users use their finger as a substitute for the mouse and
pointer
This works quite well. As
you can see, I have
precisely selected a date
sometime in mid February
for rows 5 to 9.

20
• Design Issue 1, No
Mouse!
To solve the mouse issue I
created a virtual mouse
that uses an icon that
represents a mouse and its
options. The mouse is
controlled by the users
finger. The mouse is quite
small on a smaller device,
however it is easy to
control. An additional data
field is used to display the
cell or data beneath the
pointer.

21
The mouse icon is a transparent .png
image that contains two mouse
icons, each with a different purpose.
The left mouse mimics moving a
mouse with no mouse buttons
pressed. It just moves the pointer on
the screen. The right mouse mimics
the moving the mouse with the left
button down. This is for creating and
moving objects on the plan
datawindow. The pointer mimics the
arrow on a Windows screen.
Mousemove Left Click
Drag
Pointer

22
To precisely point to a location on
the screen there is an arrow
within the mouse icon. The
arrow is on top rather than
below to keep from being
blocked by fingers. The
precision of the location is as
good as the pointer in
windows.

23
Since the mouse is virtual and it
is possible to move the mouse
to a place where it cannot be
retrieved there is a mouse
home button that will move the
mouse back to its original
position.

24
I discovered quite by accident that a .png file with a transparent
background, while not transparent when running in Powerbuilder is
transparent on the iPad. Also the clunky 3D raised border on a text
object is rendered flat with nice rounded corners on the iPad.
The motion is very smooth and fast

25
• Design Issue 1, No
Mouse!
Since the mouse is virtual, it
can be modified depending
on its context. For example
if the pointer is on a bar then
an additional ‘mouse option’
is created to display a report
selection window. This
technique can be used to
replace drop down menus.

26
• Design Issue 2, Drawing
• Tasks are ‘drawn’ onto the planner grid using the mouse. The
object being drawn is a round rectangle datawindow object. Its x
and width properties are adjusted from the mousemove event from
the planner datawindow control.
The object is only
drawn if the mouse is
moved with the left
mouse button pressed.

27
• The same method was used on the iPad. However, it seems the
moving of the bitmap control firing modify commands and the actual
execution of the commands on the datawindow seemed
asynchronous.
The bar would draw in a
very jerky way. A que of
modify commands would fire
at once and the redrawing of
the background delayed the
whole process. It would not
be acceptable...
Now what....

28
• Instead of using a round rectangle object in the datawindow I
decided to use a static text control on top of the datawindow.
Fortunately again the static text with 3D raised border renders
perfectly on the iPad to look like a round rectangle datawindow
object
=

29
• Design Issue 3, Menus
• The windows version uses menus and dropdown menus for
navigation.

30
• The tablet menu is fine for options
that are not frequently used.
However, there can be alot of
tapping and scrolling to get to
options that may be buried in the
menu....

31
• For commonly used functions I decided to use button icons. These
are arranges along the edges so the user does not need to release
the device to trigger them.
Buttons on the left side trigger list
functions or functions affecting the
arrangement of all open plans
=

32
• The buttons on the right side trigger functions for the
currently active plan. These functions are performed
by various menu functions in the windows version.

33
• Radio buttons are quite small on a table and not
practical so the Action area was pushed out to
the edge for ease of use.
• The current action is always highlighted.
=

34
• Design Issue 4, Treeview Datawindow
• As mentioned prevously the treeview datawindow on the tablet works
just like the windows version.

35
However, the process of expanding
and collapsing depends on pressing
the expand/collapse icon which is
sized for the arrow and not for the
finger.

36
To make this process more user friendly
the expand and collapse processing was
moved to the leftbuttondown event. In
this event the collapse() and expand()
functions are fired depending on the
results of the isexpanded() function. The
user simply presses anywhere on the
row to collapse and expand it. When a
data row is pressed then it is selected.

37
• Tablet Only Functions
• Offline Mode
• Rotation
• Barcode Scanning
Tablet functions all enabled using objects the Appeon
workarounds.pbl

38
• Tablet Only Functions, Offline Mode
Introduced in Appeon 1.5, offline mode allows apps to be
generated that can be run offline, without a wifi connection.
Once connected the option is available for data synchronization.
The advantage of offline mode is that software demos can be
created without the need for a server database. Demo users can
create their data locally and not interfere with other users or
needing a login. A database connection is not required.

39
Offline Mode is setup in the Application Profile Configuration

40
In offline mode the app is not refreshed every time its started. The
user must request a refresh. This is done with the eon_offlineex user
object in the appeon_wrokaraounds.pbl.
The following code checks for a server connection, checks for an
updated app and applies the update if the user requests it.
ll_ret = inv_offline.of_checkappeonserver()IF ll_ret = 1
THENll_ret = inv_offline.of_checkupdate()IF ll_ret > 0
THENinv_offline.of_applyupdate(TRUE)END IFEND IF

41
• Tablet Only Functions, Rotation
In order to most efficiently utilize the screen space, the
presentation has been locked to landscape to the app does not
rotate.
This is done with the user object eon_mobile_aws user object in
the appeon_wrokaraounds.pbl.
The following code locks rotation in the landscape format.
inv_mobile_aws.of_setapprotationlock(1)

42
• Tablet Only Functions, Bar Code Capture
Additional tablet functionality is added using the barcode capture
capabilities which are enabled by the eon_mobile_barcodeex
user object.
The of_read() function of the user object invokes the tablets bar
code capture and returns a string with the contents of the
barcode
inv_barcode.of_read(ls_data,ii_format)
In the planner this functionality is used to emulate a person
checking in and out documents.

43
• Resources
If you connect with me
through Linkedin you
will have access to
some presentations
that go into more detail
on the techniques I
used in the planner
datawindow.

44
• Resources
Also an Appeon
Mobile bugzapping
game based on the
Minesweep game will
be available. The
Powerbuilder source
code for the bugzap
will also
be available.

45
• Thanks!!!!
Thanks to Armeen Mazda and the engineers at Appeon for
making a most fantastic product. After taking an X-code class
and spending weeks hammering together a simple iPhone
calculator, I find what they have done with Powerbuilder is
nothing short of amazing.

46
• Contact
Email: bwoolley@yahoo.com
Skype: bwoolley
Website: www.dw-extreme.com
LinkedIn: Buck Woolley
Currently residing in San Diego CA.

2014 North Carolina Powerbuilder User Group Conference

Recommandé

Recommandé

Contenu connexe

Similaire à 2014 North Carolina Powerbuilder User Group Conference

Similaire à 2014 North Carolina Powerbuilder User Group Conference (20)

Dernier

Dernier (20)

2014 North Carolina Powerbuilder User Group Conference