Tells you about how native object like datawindow could give your application a modern look, with simple approach like using True Type Font and other method, hope you find it usefull and made your way to alternatif more modern UI rather than traditional Powerbuilder UI creation
2. DISCLAIMER
This presentation was authored by volunteer(s) in the Appeon community. This is not a work
for hire by Appeon. The views and opinions expressed in this presentation are those of the
author(s).
Its contents are protected by US copyright law and may not be reproduced, distributed,
transmitted, displayed, published or broadcast without the prior written permission of
Appeon. All rights belong to their respective owners.
Any reference to third-party materials, including but not limited to Websites, content,
services, or software, has not been reviewed or endorsed by Appeon. YOUR USE OF THIRD-
PARTY MATERIALS SHALL BE AT YOUR OWN RISK.
Appeon makes no warranty of any kind, either express or implied, including but not limited
to, the implied warranties of merchantability, fitness for a particular purpose, or non-
infringement. Appeon assumes no responsibility for errors or omissions.
3. page
3https://elevate.appeon.com
• Typical (Common) Powerbuilder Application UI
• The search for great UI
• Business Application UI/UX Design Pattern
• Demo
• Creating the Framework
• Other Possibilities
Session
Agenda
4. Key Skills
Recent Projects
https://elevate.appeon.com
Linkedin.com/in/zulmach
Zulkifli Machmur (Zulmach)
• 2019 - Consultant. Government owned hospital, PT. Rumah Sakit
Pelabuhan, Member of Indoneisa Port Companies, Jakarta
• 2018 – Consultant, Developer, Multi Finance System, PT. Astrido
Pacific Finance, Jakarta
• 2017 – Consultant in Partner with PT. Intisoft Mitra Solusi. Migrate
PowerBuilder Application to Appeon on State of Jakarta Owned Bank,
Bank DKI, Jakarta
• Graphic Design
• Sketch & Drawing
• PowerBuilder
• SQL
Author
Profile
page
4
twitter.com/ppowerbuilder
instagram.com/pemulapowerbuilder
5. About
https://elevate.appeon.com
It’s a Community of professional freelancers, providing Consultancy,
Courses, Creation and Content that related to Appeon, PowerBuilder,
PowerServer, and former Sybase’s Products
Community
Profile
page
5
pbdev.id Partners
27. page
27https://elevate.appeon.com
• Framework for all : Desktop, Web and Mobile
• MDI Style Desktop only took one Taskbar Button
• MDI Frame will sits inside Browser Window (Appeon Web)
• MDI Frame will take full screen size (Appeon Mobile, with menu
items hidden)
• Possible to hide MDI Sheet Titlebar
• Menu Object Can be used to Capture Shortcut Key while its
hidden (Desktop and Web)
Why MDI
Style?
29. https://elevate.appeon.com
UI Framework Building Blocks :
MDI Frame Window Object : w_bed
page
29
• mdi! type Window Object
• Act as container
• Attached Mandatory Menu
Object with Hidden items
that can capture shortcut key
• With no toolbar (please…)
• Handle common MDI Frame
functionalities (eg: resize)
MDI Frame Window Object
MDI Frame
30. https://elevate.appeon.com
UI Framework Building Blocks :
MDI Sheet Window : w_sheet
page
30
• popup! Type Window Object
• Might have Menu Object with
Hidden items that can
capture shortcut key
• Custom Sliding open and
close animation (default
animation properties only
work on desktop)
MDI Sheet Window
MDI Sheet
31. https://elevate.appeon.com
UI Framework Building Blocks :
Splash Window : w_splash
page
31
• Inherited from w_sheet
• Put Datawindow Control
• Create Datawindow Object
• GIF Animation only works on
desktop
• Use Image Sequence and
Timing to Simulate the
animation
Splash Window
MDI Sheet
32. https://elevate.appeon.com
UI Framework Building Blocks :
Login Window : w_Login, dwo_login
page
32
• Inherited from w_sheet
• Datawindow Object
• With nice login image
• External columns to get input
• Create user event to handle
Login Processing
Login Window
33. https://elevate.appeon.com
UI Framework Building Blocks :
Masthead Datawindow : dwo_title
page
33
• External Datasource
Datawindow Object
• Displaying Title of current
Active Module Window
• Navigation to Modules
Launcher
• Access to Common Actions
• User Profile, Logout, Exit, etc.
Masthead Dataindow Object
Application Identity
34. https://elevate.appeon.com
UI Framework Building Blocks :
Module Launcher : w_modules, dwo_modules
page
34
• Inherited from w_sheet
• Hidden menu items to
capture shortcut key
• Datawindow Object with
Database table data source
for modules list
• Module Name
• Module Window Object Name
• Used to limit user’s access to
modulesModules Launcer
Modules Launcher
35. https://elevate.appeon.com
UI Framework Building Blocks :
Toolbar Datawindow Object : dwo_toolbar
page
35
• External Datasource
Datawindow Object
• With Columns for Toolbar
placeholder
• Icon Name
• Icon Picture
• Event Name
• Expressions and Scripts to
handle placement
Toolbar datawindow Object
Toolbar
36. https://elevate.appeon.com
UI Framework Building Blocks :
Action List Window : w_action, dwo_action
page
36
• Inherited from w_sheet
• External Datasource
Datawindow Object
• With Columns like Toolbar
placeholder
• Icon Name
• Icon Picture
• Event Name
Action List Window
Action List
37. https://elevate.appeon.com
UI Framework Building Blocks :
Message Bar Window : w_msgbar, dwo_msgbar
page
37
• Inherited from w_sheet
• External Datasource
Datawindow Object
• With Columns
• Icon Picture
• messagetext
Message Bar Window
Message Bar
38. https://elevate.appeon.com
UI Framework Building Blocks :
Welcome (Home) Window : w_home, dwo_home
page
38
• Inherited from w_sheet
• Put Datawindow Control
• Create Datawindow Object
• Displaying User Info
• Other info :
• Reminder
• Notification
Home Window
Module Name
39. https://elevate.appeon.com
UI Framework Building Blocks :
Master Sheet Window : w_mst, dwo_mst
page
39
• Inherited from w_sheet
• Masthead Datawindow
• Toolbar Datawindow
• Datawindow for Input Master
Data
Master Sheet Window
Master Sheet
Module Name Toolbar
Master Datawindow Object
40. https://elevate.appeon.com
UI Framework Building Blocks :
Master List Window : w_mst_list, dwo_mst_list
page
40
• Inherited from w_sheet
• Datawindow Object with
query to database table
• Put a search box that might
be used for filtering data
Master List Window
Master List
44. https://elevate.appeon.com
Design Limitation :
(Disk) Space is the Final Frontier
page
44
• Creativity is without limit
• There will always more
storage spaces
• Limited by PB Features?
There will be workaround or
it became features that
Eventually will be released on
next version (ex: Theme,
RibbonBar, etc)
Space is the Final Frontier
46. https://elevate.appeon.com
Souvenir for attending :
Framework Source Code
page
46
• Download from :
• http://pbdev.id/elevate2019
• Youtube channel :
• https://www.youtube.com/channel/UCbn3
GqvzKeneDQuy8JvoSIQ?sub_confirmati
on=1
• Instagram :
• instagram.com/pemulapowerbuilder/
• Twitter :
• twitter.com/ppowerbuilderThis Framework is for Giveaway
47. https://elevate.appeon.com
Using Local
Fonts
page
47
function long AddFontResourceExW( readonly string as_FontFile, ulong aul_FontCharacteristics, ulong
aul_Reserved ) library "GDI32.dll" alias for "AddFontResourceExW“
function boolean RemoveFontResourceExW( readonly string as_FonfFile, ulong aul_FontCharacteristics,
ulong aul_Reserved ) library "GDI32.dll" alias for "RemoveFontResourceExW"
constant long FR_PRIVATE = 16
constant long FR_NOT_ENUM = 32
AddFontResourceExW("pathtofontsyourfont.ttf",FR_PRIVATE + FR_NOT_ENUM,0)
49. Connect with the
Appeon Community
Follow Appeon and community members to
get the latest tech news.
twitter.com/AppeonPB
Encourage us with a “like”, see cool pics, and
get notified of upcoming events.
facebook.com/AppeonPB
Share important Appeon videos with others;
no account registration required.
youtube.com/c/AppeonHQ
linkedin.com
Build up your career profile, and stay in
contact with other professionals.
Discussions, tech articles and videos, free
online training, and more.
community.appeon.com
https://elevate.appeon.com
page
49