concept the type of window used is MDI style, chosen for several reasons including, easy communication between objects, can appear like a Single Page Application, where all the windows will appear in the MDI workspace, then if deployed to Appeon Web , MDI will be inside the browser and not like the SDI window that is displayed outside the browser as if it were like a desktop application that is called through a browser, whereas if the window is displayed in a browser it will look like a web page

1. Create Sliding Window
in PowerBuilder
For use in Hamburger Menu Style
zulmach@pbdev.id
Copyright©2020
pbdev.id

2. Agenda
• Part 1 : Concept
• Part 2 : Creating Objects
• Part 3 : Writing Script
• Part 4 : Running it
pbdev.id

3. Part 1 : Concept
pbdev.id

4. Concept
• Hidden Menu Drawer is now common to user
• MDI Style
• Simple communication with other object
• Can be appear like Single Page
• All open window is in MDI workspace
• When deploy to Appeon Web, it will reside inside the browser
• Frame window as Container
• Sliding menu is sheet window that moves by the timing object
• Most script will be in the ancestor
pbdev.id

5. Object Layout
Ancestor
Sheet
Window,
Popup,
No Border,
No Titlebar
With Timing
Object
Datawindow
as title bar
Sliding
Content
Descendant
Sheet Window
pbdev.id
Sliding Menu
Descendant
Sheet
Window
MDI Frame
Window

6. Objects List
#
Object
Name
Type Remark
1 m_frame Menu Mandatory for MDI
Window
2 w_frame Window Frame as container
3 w_sheet Window Ancestor for sliding
window
4 t_slide Timing
object
Handle window slide
movement
5 m_sheet Menu We might need it to
access function using
its shortcut
6 u_titlebar Datawindow
control
Title bar replacement
for window sheet
pbdev.id
#
Object
Name
Type Remark
7 dwo_titleb
ar
Datawindow
object
Content of u_titlebar
showing some icon and
text for window title
8 w_home Window Will example of
concrete object of
entry point window
9 w_feature Inherited
from
w_sheet
Will example of
concrete object of
content window
10 w_sliding
menu
Inherited
from
w_sheet
This will be the
window sliding
hamburger menu

7. Tools : Icon image
• https://icons8.com/
• Free icon library
• Download Pichon App from
Windows Store
pbdev.id

8. Tools : True Type Font
• Using Roboto TTF
• Download from
https://www.fontsquirrel.com/fo
nts/roboto
• Caution :
• Cannot be used in Appeon Mobile
and Appeon Web
pbdev.id

9. Tools : Color Reference
• https://www.materialui.co/colors
• Choose color code RGB for use in
PowerBuilder
• Click on any color and your RGB
code is copied to clipboard
• Paste it in you PowerBuilder Code
pbdev.id

10. Part 2 : Creating Object
pbdev.id

11. Create Workspace and Target
• Create from scratch your Workspace
• And Application target
pbdev.id

12. Video of creating Workspace and Target

14. Create m_frame and w_frame
pbdev.id

15. Video of creating m_frame and w_frame

17. Create m_sheet and w_sheet and
timing object
pbdev.id

18. Video of creating m_sheet and w_sheet and
timing object

20. Create dwo_titlebar
pbdev.id

21. Video of creating dwo_titlebar

23. Create u_titlebar
pbdev.id

24. Video of creating u_titlebar

26. Place u_titlebar on w_sheet
pbdev.id

27. Video of placing u_titlebar on w_sheet

29. Create w_home and w_feature
pbdev.id

30. Video of creating w_home and w_feature

32. Create w_slidingmenu
pbdev.id

33. Video of creating w_slidingmenu

35. Part 3 : Writing Script
pbdev.id

36. Script of pbsliding Application Object
pbdev.id

37. Video of script pbsliding Application Object

39. Instance variable of w_sheet
pbdev.id

40. Video of w_sheet instance variable

42. Script of u_titlebar
pbdev.id

43. Video of script u_titlebar

45. Script of w_sheet
• Window w_sheet will have
option to be slide or not
• Sliding will have 4 directions
(RIGHT, LEFT, UP, DOWN)
• When open, w_sheet will be
placed outside of client area
(mdi_1)
• If w_sheet deactivate it will be
close
pbdev.id

46. Video of script w_sheet

48. Script of w_slidingmenu
pbdev.id

49. Video of Script of w_slidingmenu

51. Script of w_home, w_feature and
w_frame
pbdev.id

52. Video of Script of w_home, w_feature and
w_frame

54. Part 4 : Running it
pbdev.id

55. Video of Running

57. Download Sliding Window Source Code
pbdev.id

58. • Thank You
• Question and Answer
• Email : zulmach@pbdev.id
• Twitter : twitter.com/ppowerbuilder
• Facebook : facebook.com/powerbuilder.pemula
• Linkedin : linkedin.com/in/zulmach
• Youtube : youtube.com/c/pemulapb
• Blog : zulmach.wordpress.com
• pbdev.id Community Website : pbdev.id
• Whatsap : +628155555368
Q&A
pbdev.id