Creating Modern UI PowerBuilder Framework using native objects

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

©2019 Appeon Limited and its subsidiaries. All rights reserved.
Zulmach
October 30th, 2019
Creating Modern UI Framework
Us...

DISCLAIMER
This presentation was authored by volunteer(s) in the Appeon community. This is not a work
for hire by Appeon. ...

page
3https://elevate.appeon.com
• Typical (Common) Powerbuilder Application UI
• The search for great UI
• Business Appli...

Key Skills
Recent Projects
https://elevate.appeon.com
Linkedin.com/in/zulmach
Zulkifli Machmur (Zulmach)
• 2019 - Consulta...

About
https://elevate.appeon.com
It’s a Community of professional freelancers, providing Consultancy,
Courses, Creation an...

page
6https://elevate.appeon.com
• Window
• Title Bar
• Menu Bar
• Toolbar
• MDI Window
• Controls
Typical (Common)
PowerB...

page
7https://elevate.appeon.com
• OCX Controls
• PBX Canvas
• Custom Controls
• Other 3rd Party
• Native Method
The Searc...

page
8https://elevate.appeon.com
• Simple
• Clean
• Touchscreen
• Web
• Mobile
• Theme
• Animation
• and more …
Modern App...

page
9https://elevate.appeon.com
• Splash
• Login
• Masthead
• Home /Dashboard
• Launcher
• Message Box
• Status Bar
• Abo...

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Live Demo

Mobile Demo

End of Demo

page
21https://elevate.appeon.com
• Resources
• Tools
• Design Pattern
• MDI
• Window Object
• Datawindow Object
• Express...

https://elevate.appeon.com
Framework
Resources
page
22
• True Type Font Icon:
• https://ionicons.com/v2/
• https://aka.ms/...

https://elevate.appeon.com
Framework
Resources
page
23
• Color References :
• https://www.materialui.co/colors
• https://m...

https://elevate.appeon.com
Framework
Resources
page
24
• Tools : Character Map :
• https://www.microsoft.com/en-
us/store/...

https://elevate.appeon.com
Framework
Resources
page
25
• Images as Needed :
• Backgrounds
• Gradients
• Buttons
• Icons
• ...

page
26https://elevate.appeon.com
Basic Things
to Know
Desktop Web Mobile
1 MDI Style   
2 Fonts   
3 Window Open/Cl...

page
27https://elevate.appeon.com
• Framework for all : Desktop, Web and Mobile
• MDI Style Desktop only took one Taskbar ...

https://elevate.appeon.com
Framework Design
Pattern
page
28
MDI Frame
MDI Sheet
 Modules Launcher
 Masthead
 Message Ba...

https://elevate.appeon.com
UI Framework Building Blocks :
MDI Frame Window Object : w_bed
page
29
• mdi! type Window Objec...

https://elevate.appeon.com
UI Framework Building Blocks :
MDI Sheet Window : w_sheet
page
30
• popup! Type Window Object
•...

https://elevate.appeon.com
UI Framework Building Blocks :
Splash Window : w_splash
page
31
• Inherited from w_sheet
• Put ...

https://elevate.appeon.com
UI Framework Building Blocks :
Login Window : w_Login, dwo_login
page
32
• Inherited from w_she...

https://elevate.appeon.com
UI Framework Building Blocks :
Masthead Datawindow : dwo_title
page
33
• External Datasource
Da...

https://elevate.appeon.com
UI Framework Building Blocks :
Module Launcher : w_modules, dwo_modules
page
34
• Inherited fro...

https://elevate.appeon.com
UI Framework Building Blocks :
Toolbar Datawindow Object : dwo_toolbar
page
35
• External Datas...

https://elevate.appeon.com
UI Framework Building Blocks :
Action List Window : w_action, dwo_action
page
36
• Inherited fr...

https://elevate.appeon.com
UI Framework Building Blocks :
Message Bar Window : w_msgbar, dwo_msgbar
page
37
• Inherited fr...

https://elevate.appeon.com
UI Framework Building Blocks :
Welcome (Home) Window : w_home, dwo_home
page
38
• Inherited fro...

https://elevate.appeon.com
UI Framework Building Blocks :
Master Sheet Window : w_mst, dwo_mst
page
39
• Inherited from w_...

https://elevate.appeon.com
UI Framework Building Blocks :
Master List Window : w_mst_list, dwo_mst_list
page
40
• Inherite...

https://elevate.appeon.com
Expressions and
Scripts
page
41
• Expressions in datawindow
will take effect immediately
• Not ...

How to

https://elevate.appeon.com
Other
Possibilities
page
43
• Ribbon
• Tiles
• Cards
• Graph
• Carousel
• More to UI/UX and Usa...

https://elevate.appeon.com
Design Limitation :
(Disk) Space is the Final Frontier
page
44
• Creativity is without limit
• ...

https://elevate.appeon.com
Notes from UI/UX
Experts
page
45
• UI Design Principles
• Structure
• Simplicity
• Visibility
•...

https://elevate.appeon.com
Souvenir for attending :
Framework Source Code
page
46
• Download from :
• http://pbdev.id/elev...

https://elevate.appeon.com
Using Local
Fonts
page
47
function long AddFontResourceExW( readonly string as_FontFile, ulong ...

https://elevate.appeon.com
Q&A
Time
page
48

Connect with the
Appeon Community
Follow Appeon and community members to
get the latest tech news.
twitter.com/AppeonPB
En...

Thank You
zulmach@pbdev.id
+628155555368

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1066413 views
Storytelling For The Web: Integrate... by Chiara Aliotta 986196 views
Artificial Intelligence, Data and C... by OECD Directorate ... 930965 views
How to Leverage AI to Boost Employe... by SocialHRCamp 396116 views
2024 State of Marketing Report – by... by Marius Sescu 223818 views
Everything You Need To Know About C... by Expeed Software 238978 views

View on Slideshare

1 of 50 Ad

View on Slideshare

1 of 50 Ad