Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
Sponsored by
North Carol...
2
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Introduction
• 1. Ex...
3
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
Goals
The goal of this...
4
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
Environment
MacBook Ai...
5
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Agenda
• 1. Explain ...
6
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Planner Datawindow
T...
7
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Windows Based Planne...
8
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Tablet Based Planner...
9
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Planner Datawindow C...
10
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Treeview Datawindow...
11
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Treeview Control
• ...
12
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Child Windows
• Bot...
13
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Datawindow Reports
...
14
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Calendar Datawindow...
15
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Planner Datawindow ...
16
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Consideratio...
17
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No ...
18
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
Scroll
Mousemove
Left...
19
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No ...
20
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No
...
21
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No ...
22
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No ...
23
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No ...
24
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No ...
25
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 1, No
...
26
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 2, Dra...
27
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 2, Dra...
28
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 2, Dra...
29
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 3, Men...
30
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 3, Men...
31
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 3, Men...
32
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 3, Men...
33
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 3, Men...
34
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 4, Tre...
35
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 4, Tre...
36
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Design Issue 4, Tre...
37
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Tablet Only Functio...
38
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Tablet Only Functio...
39
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Tablet Only Functio...
40
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Tablet Only Functio...
41
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Tablet Only Functio...
42
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Tablet Only Functio...
43
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Resources
If you co...
44
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Resources
Also an A...
45
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Thanks!!!!
Thanks t...
46
Building the Future March 2014
Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference
• Contact
Email: bwoo...
Upcoming SlideShare
Loading in …5
×

2014 North Carolina Powerbuilder User Group Conference

973 views
893 views

Published on

Demonstrating advanced Powerbuilder dynamic datawindow techniques on an iPad device using Appeon Mobile

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
973
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2014 North Carolina Powerbuilder User Group Conference

  1. 1. 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. 2. 2 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 3. 3 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference 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. 4. 4 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference 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. 5. 5 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 6. 6 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 7. 7 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Windows Based Planner Datawindow
  8. 8. 8 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Tablet Based Planner Datawindow
  9. 9. 9 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Planner Datawindow Common Objects/Functions • Treeview datawindow • Treeview control • Multiple child windows in a main window viewing area • Report datawindow • Calendar datawindow
  10. 10. 10 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Treeview Datawindow • Both versions use the treeview datawindow. However the tablet version uses a different selection method that will be discusses later.
  11. 11. 11 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Treeview Control • Both versions use the treeview control. The treeview item contains a reference to each planner control.
  12. 12. 12 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 13. 13 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Datawindow Reports • Both versions have datawindow reports showing a list corresponding to the selected planner window.
  14. 14. 14 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Calendar Datawindows • Both versions have similar calendar datawindows for date picking. The tablet version has been modified for touch functionality
  15. 15. 15 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Planner Datawindow Differences in Objects/Functions • Mouse • Drawing Objects • Menu • Treeview Datawindow • Table Functions
  16. 16. 16 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 17. 17 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 18. 18 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference 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. 19. 19 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 1, No Mouse! • • 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. 20. 20 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 21. 21 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 1, No Mouse! 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. 22. 22 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 1, No Mouse! 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. 23. 23 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 1, No Mouse! 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. 24. 24 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 1, No Mouse! 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. 25. 25 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 26. 26 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 27. 27 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 2, Drawing • 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. 28. 28 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 2, Drawing • 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. 29. 29 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 3, Menus • The windows version uses menus and dropdown menus for navigation.
  30. 30. 30 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 3, Menus • 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. 31. 31 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 3, Menus • 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. 32. 32 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 3, Menus • 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. 33. 33 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 3, Menus • 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. 34. 34 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 4, Treeview Datawindow • As mentioned prevously the treeview datawindow on the tablet works just like the windows version.
  35. 35. 35 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 4, Treeview Datawindow 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. 36. 36 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Design Issue 4, Treeview Datawindow 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. 37. 37 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Tablet Only Functions • Offline Mode • Rotation • Barcode Scanning Tablet functions all enabled using objects the Appeon workarounds.pbl
  38. 38. 38 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 39. 39 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Tablet Only Functions, Offline Mode Offline Mode is setup in the Application Profile Configuration
  40. 40. 40 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Tablet Only Functions, Offline Mode 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 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 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 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 ll_ret = inv_offline.of_checkappeonserver()IF ll_ret = 1
  41. 41. 41 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 42. 42 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 43. 43 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 44. 44 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 45. 45 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • 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. 46. 46 Building the Future March 2014 Charlotte PowerBuilder ConferenceCharlotte PowerBuilder Conference • Contact Email: bwoolley@yahoo.com Skype: bwoolley Website: www.dw-extreme.com LinkedIn: Buck Woolley Currently residing in San Diego CA.

×