2014 North Carolina Powerbuilder User Group Conference

Building the Future March 2014

Charlotte PowerBuilder Charlotte PowerBuilder ConferenceConference

Sponsored byNorth Carolina PowerBuilder User Group

Advanced Datawindow Techniques Using Appeon Mobile 1.5Migrating 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



• Treeview Datawindow

• 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• Treeview Datawindow• 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

MousemoveLeft 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




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




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: [email protected]: bwoolleyWebsite: www.dw-extreme.comLinkedIn: Buck Woolley

Currently residing in San Diego CA.

Technology

2014 North Carolina Powerbuilder User Group Conference