Tech Articles


Tile Menu Style using Datawindow Object


Updated sample with added features from pbdev.id blog

Have you ever wanted Windows Tile Menu Style on your application? this datawindow object can give you way to have it.
Just add row data to set Image, Text and size of the tile.

Its an external #datawindow #object of #powerbuilder that displaying your data rows with #Tile #Menu visual style, no need to script. just add row on your datawindow object in design time to set the image, text and tile size. It will show tile menu as you edit the the data rows.

This is step by step on how to :

  1. Create an N-UP, external datawindow with columns to hold tileid, tileicon, tilename, tilesize, tilecolor, and tileevent. In this article we use 6 rows per detail

 

  1. Delete all controls from datawindow, to clear up space

  1. Save you datawindow with dwo_tiles name
  2. Create 6 rectangle to be the tile of each row per detail

 

  1. Set each rectangle properties using expression in the table below.

Take note the size of the rectangle say we set to 500 in powerbuilder unit, and 40 for the space between two tiles,

 

Control

Property expression

x

width

visible

r_1

500 * ( 0 )
+ 40 * 1

500 * tilesize[0]

if ( isnull ( tilesize[0] ) , 0 , 1 )

r_2

500 * (tilesize[0])

+ 40 * 2

500 * tilesize[1]

if ( isnull ( tilesize[1] ) , 0 , 1 )

r_3

500 * ( tilesize[0] + tilesize[1])

+ 40 * 3

500 * tilesize[2]

if ( isnull ( tilesize[2] ) , 0 , 1 )

r_4

500 * (tilesize[0] + tilesize[1] + tilesize[2] )

+ 40 * 4

500 * tilesize[3]

if ( isnull ( tilesize[3] ) , 0 , 1 )

r_5

500 * (tilesize[0] + tilesize[1] + tilesize[2] + tilesize[3])

+ 40 * 5

500 * tilesize[4]

if ( isnull ( tilesize[4] ) , 0 , 1 )

r_6

500 * (tilesize[0] + tilesize[1] + tilesize[2] + tilesize[3] + tilesize[4] )

+ 40 * 6

500 * tilesize[5]

if ( isnull ( tilesize[5] ) , 0 , 1 )

 

 

  1. Try to add 8 rows to your datawindow and right click to check the sharedata, and see what happen. Enter different tilesize with value 1 or 2

 

 

  1. Whoaala your tile is ready

 

 

 

  1. Now you repeat the same thing for the Icon and Tile Name. use expression to put them into the position you want.
  2. Done

 


will be share this on the #Indonesia #PowerBuilder #Developer #Coexist event
visit #zulmach blog for more information https://zulmach.wordpress.com

 

Comments (8)
Wednesday, Jan 22 2020

"Kool"!

1

Monday, Feb 17 2020

Good afternoon.
I try to repeat your example - but there are questions.
Can you post your example?
Thanks.

1
Monday, Feb 17 2020

Download running example
From my blog : https://wp.me/paI5-ah

0

Monday, Feb 17 2020

Download rumning example
From my blog : https://wp.me/paI5-ah

0

Monday, Feb 17 2020

Thank you.
Wonderfully!
Have you tried adding some hover effect?
Can you show a sample code for clicked event or mouse move?

1
Monday, Feb 17 2020

In datawindow control you can find mousemove event you can try put some script there.
I would use mouseup to catch which control on what row user tap it getitemstring to trigger on user event

0

Thursday, May 12 2022

Hi Zulmach
I tried your example but I've some problems getting the getrow() when I click on a Menu Item.
I set a MessageBox in a clicked event of the datawindow:
MessageBox("Hai cliccato sulla riga" , string(getrow()))
If I click on the first Item MessageBox gives me 1
If now I click on the first Item of the second row the messagebox send me 1 againg!!??
If I click again on the first Item of the second row the messagebox send me 8 (Correct) ??
And again for every jump from one row to another
Do you have the same issue? Have you solved?
Thanks

Comment was last edited 3 years ago by Giuseppe moglia
0
Tuesday, May 17 2022
0

Find Articles by Tag

JSONGenerator Debug Sort Excel PowerBuilder (Appeon) Elevate Conference Design Icon Outlook Bug PostgreSQL CI/CD Filter ActiveX PBDOM Authentication Expression PowerBuilder Compiler 32-bit License SqlExecutor JSONParser HTTPClient TortoiseGit UI Themes Error JSON RibbonBar Builder PostgreSQL ODBC driver DataWindow UI Modernization Window Android Repository Database Connection COM Export Encryption PowerServer Mobile Authorization UI Installation Configuration WinAPI Visual Studio WebBrowser .NET Std Framework Open Source PowerScript (PS) SnapDevelop DragDrop .NET DataStore Charts Platform GhostScript Interface Source Code CoderObject .NET Assembly Resize Debugging Event Handling Event SQL Server PDFlib Script Text Jenkins External Functions OAuth 2.0 File Menu ODBC Data iOS PFC BLOB PDF Database Table DLL Application C# Class Migration OLE SqlModelMapper Source Control Database Painter Oracle Windows 10 Icons Encoding Variable Debugger XML MessageBox Database 64-bit RichTextEdit Control Trial Web Service Proxy Syntax Performance Database Object RESTClient Event Handler RibbonBar Web API Database Table Schema Azure InfoMaker Transaction Mobile TFS OrcaScript PBVM PowerServer Web SQL Model SVN DataWindow JSON PowerBuilder Graph Array Automated Testing Windows OS DataType PBNI TreeView Export JSON Branch & Merge CrypterObject API Deployment TLS/SSL Import Testing SOAP OAuth Import JSON SnapObjects Messagging Database Table Data REST DevOps Stored Procedure SDK Database Profile NativePDF Validation IDE Linux OS Git Service