1. Appeon Mobile Project Experience Sharing
Based on Visual Shop Mobile Apps for CSI

2. CSI’s Visual Shop is a mature and complex PB desktop app.
CSI wants to reuse the business logic on mobile but they have only PB development expertise.
CSI decided to leverage the Appeon project team to mobilize their app. CSI extracted 4 smaller PB apps from Visual Shop; Appeon used these PB apps as prototype to develop the final mobile apps.
Appeon allocated 2 PB developers to develop the mobile UI and native features, tune the performance, and work around PB features.
Appeon successfully finished the 4 mobile apps in 4 months. Notice that this is not PB app migration, it’s new mobile app development.
Project Background

3. Overall thoughts on the mobile UI and UX design
Use SDI + vertical navigation pane, instead of MDI + traditional file menu
Create UO dynamically and open it with animation effects (sliding)
Use native mobile features such as zoom, gestures, screen orientation and lock, map, making phone calls, etc.
Encapsulate mobile-style controls to be re-used easily
Mobile UI and UX Design

4. Mobile UI and UX Design Sliding
Slide animation is one of the popular effects for view (window) transitions in the mobile app.
Right-to-left and bottom-to-top slide animations are implemented in the Appeon mobile app.
Mobile UI and UX Design

5. Screen Mobile UI and UX Design Implementation
View sliding from right to left
1. Place the view to the right of the screen and set it to visible.
2. Modify the X coordinate of the view in a loop to have the slide to left effect.
View sliding from bottom to top
1. Place the view to the bottom of the screen and set to visible.
2. Modify the Y coordinate of the view in a loop to have the slide to top effect.
Mobile UI and UX Design

6. Mobile UI and UX Design Screen Orientation Implementation
Mobile devices have much smaller screens compared to PC, and different models have different screen sizes. To design a UI fit to different screen sizes, we need to adjust the object size and location/layout in the Resize event. To simplify the processing of Resize event we suggest locking the screen orientation.
By default, the app should be locked to landscape view in tablets, while locked to portrait view in smart phones.
In smart phones, although the view is locked to portrait, some layouts (such as reports) are better represented in landscape. You can consider to rotate the screen automatically.
Lock the screen rotation using the of_setapprotationlock function of eon_mobile_awsex object.
Set the screen orientation using the of_setapporientation function of eon_mobile_awsex object.
Lock the screen rotation using of_setapprotationlock first and then set the orientation using of_setapporientation, to avoid the screen rotated by the OS Accelerometer and locked in the wrong orientation.
Set the il_apporientation property of each view
Set the screen orientation in the ue_activate event according to the il_apporientation property
Mobile UI and UX Design

7. Mobile UI and UX Design Zoom Implementation
Since mobile device has a smaller screen, sometimes it’s not convenient to view data especially for large amounts of data in reports or graphs; therefore, being able to zoom the report or graph allows users to easily view the data.
We coded double-tap event to enlarge the UO and fonts. (Appeon Mobile support using pinch to zoom in MDI Window not in UO.)
Register the UO in the view ue_open event with the percentage to enlarge. The UO is in normal state now.
When double-tapping a UO which is in normal state, record the original size of the UO and font first, and then enlarge the UO according to the percentage registered. The UO is in zoom-out state.
When double-tapping a UO which is in zoom-out state, restore the size of the UO according to the original size recorded. The UO is back to the normal state.
Mobile UI and UX Design

8. Mobile UI and UX Design Gestures Implementation
Gestures are special but common feature on the mobile device. It provides excellent human–computer interaction experience.
In the app, it’s very important to recognize the gestures in the DataWindow and support scrolling data.
Appeon Mobile does not support multi-touch gestures, it can only recognize simple gestures through MouseMove and Timer events.
In the app, we implement the swipe gesture in the DataWindow so it can show previous/next page of data.
Call the of_setdwmousemovemode function of eon_mobile_awsex object to enable support for the pbm_dwnmousemove event ID of DataWindow.
Detect the pointer position changes in the DataWindow MouseMove event. Trigger the Timer event and record the original position of the pointer.
In the Timer event, if PointerX/PointerY stays unchanged, it indicates that the gesture is completed, and by analyzing the original position and the current position, we can tell the type of gesture and do the corresponding processing.
Mobile UI and UX Design

9. Mobile UI and UX Design Hint Text Feature Search box Implementation
Input box and search box with hint text are widely used in mobile apps because they are very useful in making the mobile UI concise and easy to use.
Appeon 2015 provides the appeonsethinttext() API to set hint text in Single Line Edit controls. We use this feature a lot in the Appeon mobile app.
We encapsulate a Search box so it can be re-used conveniently.
Search box is made up of two controls: a Single Line Edit (sle_search) and a picture button (p_remove).
Use the Appeon API appeonsethinttext() to set the hint text for sle_search.
Add a ue_change event (with pbm_enchange ID) to sle_search, to detect text changes in sle_search.
In the ue_change event, show or hide p_remove according to whether sle_search.text is null.
When the user hits , clear the text from the box.
Mobile UI and UX Design

10. Mobile UI and UX Design Hide Navigation Pane Implementation
In native phone apps, the app will be in full screen view once logged in, and will only show the navigation pane when the user taps the icon.
The navigation pane will be hidden when the user taps any area outside of the pane.
Compared to hide the pane in the clicked event of each object, we use the window Timer event to check the location of pointer (which is much simpler):
1. When the pane is visible, trigger the window Timer event.
2. In the Timer event, call PointerX()/PointerY() functions to obtain the current location of the cursor (or the finger).
3. If the cursor (or the finger) is not within the area of pane then hide the pane and close the Timer event.
Mobile UI and UX Design

11. Mobile UI and UX Design Mobile-style Tab Header Implementation
Considering the performance impacts, we give up using the Tab control, instead, we simulate and encapsulate a mobile-style tab header, and use it to simulate tab controls.
Use RoundRectangle and StaticText to simulate the tab header.
Display font and background in different colors when the tab header is selected or un-selected, so as to simulate the clicked effect of a tab header.
Mobile UI and UX Design

12. Mobile UI and UX Design Map Implementation
Get coordinate via Google Service
Call the PostURL function of inet object to pass the following requests:
Get the coordinate from the returned XML string:
...
<location>
<lat> </lat>
<lng> </lng>
</location>
Map
Implementation
Get the coordinates of a location
Usually the address (not the coordinate) will be stored in DB, so we need to call the Google Service to get the coordinate first.
Display the map
Call the Appeon API eon_mobile_mapex object to display the map, and add the address and the coordinate as an annotation to the map. The map can also switch between several views (satellite, 3-D, etc.) and show the current location.
Navigation
eon_mobile_mapex object does not support navigation currently. We call the Google Map Web app or the native app via URL Scheme and utilize its navigation feature to show driving directions from the current location to the customer location.
Map is one of the hot features in many mobile apps.
The app is requested to show the annotation and the location of a customer in the map, and also show the driving directions from the current location to the destination.
Mobile UI and UX Design
Call Google Map
Call the hyperlinktourl function of inet object and pass the following URL to call Google Map native app or Web app.
Call Google Map Web App
Call Google Map native App
comgooglemaps://?saddr=&daddr=xxxx&dirflag= driving

13. Mobile UI and UX Design Make Phone Calls Implementation
The app requires ability to make phone calls to the customer.
Call the HyperlinkToURL() function of the inet object and pass the following parameter: tel:xxxxxxxx
Mobile UI and UX Design

14. Performance Optimization
Releasing Memory In-time
Implementation
Mobile devices have much less memory than PC. To ensure the app runs smoothly it’s important to release memory in-time.
Call the Appeon API of_getfreememory() to get the available free memory whenever opening a new view (window).
If the free memory is less that a specified value close any de-activated views to release the memory.
Performance Optimization

15. Performance Optimization
Tab Controls
Implementation
Tab control is commonly used in PB applications because it makes the UI organized and easier to use. And due to this reason, a Tab control usually contains many tab pages, and each tab page contains many objects.
Although Appeon Mobile supports the Tab control, it’s not recommend to use it because it has tendency to hog memory and its not appealing UX on mobile.
Use encapsulated UO to emulate Tab control:
Encapsulate the objects from each tab page to a separate UO.
Encapsulate the objects that emulates the tab header.
Performance Optimization

16. Performance Optimization
Faster View Transition
Implementation
Creating a UO is time-consuming. If the UO is created repeatedly every time when the view is switched, the view transition will not be smooth; therefore, if the memory is sufficient, we should avoid creating a UO repeatedly.
Create the UO when the view is opened for the first time.
When deactivate the view, if the free memory is sufficient set the view to invisible instead of closing it.
When activate the view again next time set the view to visible.
Performance Optimization

17. Performance Optimization
Complex Nested Reports
Solution
This app has a very complex reports, which contain child reports nested over 4 levels. One of the repeatedly nested child report has 120 (4*30) columns which are set to auto-height.
This causes no problem at the Appeon Server side, but it turns out to render slowly at the device side. It takes at least 4 minutes to render this complex UI on a mobile device.
Set the column height to a fixed value.
Use expression to set the column visible property.
Set the detail band of DataWindow to auto-height.
This shortens the rendering time to 10 seconds.
Performance Optimization

18. Performance Optimization
Minimize Server Calls
Use Appeon Labels
Call the of_startQueue()/of_commitqueue() functions of appeon_nvo_db_update object to group multiple server calls into one “group”.
Performance Optimization

19. Workaround Obtain Regional Settings Solution:
The original PB app gets the local datetime format and currency symbols from the Windows registry. But mobile OS do not have such registry to use.
Call String function to obtain the locale settings:
To obtain the local datetime format:
To obtain the local currency symbols: left(string(100,"[currency]"),1)
string(100,“[currency]” )
ect
$100
¢100
Workaround
To obtain the date string ls_date in the shortdate format
ls_date = string(date(2011,4,5),"[shortdate]")
Replace the numbers in ls_date according to the following table:
11 ->YY
2011->YYYY
4->M
04->MM
5->D
05->DD
To get the local datetime format on the mobile device
e.g.
4/5/2011 -> M/D/YYYY
04/05/2011 -> MM/DD/YYYY

20. Storing User Settings
Solution
PB applications typically retain the user settings (for example, whether to remember password) in the INI file at the client side. But Appeon is designed to replace the INI file if the app is redeployed or the INI file is edited in AEM.
Use the Appeon registry emulation to store the information on the server-side, which will not be replaced or overwritten.
Call RegistrySet/RegistryGet to set or read the information.
Go to AEM > Application > PB Features > Registry Mode > [your app], and set the Registry Mode to Use Appeon registry emulation.
Workaround

21. Thank You!