MODULE: DynamicDialogs - creating complex GUIs the easy way

Share your advanced PureBasic knowledge/code with the community.
PureLust
Enthusiast
Enthusiast
Posts: 466
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

MODULE: DynamicDialogs - creating complex GUIs the easy way

Post by PureLust »

[Update 01.01.2018]
- little bugfix on WebGadget (URL-Param was not working right)
- changed include-Path in Demos, to work on Linux as well (now using '/' instead of '\')
- added Support for Menus and StatusBars (see HERE how to use).

[Update 21.01.2017]
- little bugfix on TrackBar-Gadget
- added massive GUI-Example from André to Demo-Folder.

[Update 28.12.2016]
- fixed a little bug, which could cause problems while using container-gadgets (update available at orig. Link see below).
- cleaned up command overview in this post (see below)
- added info for 'CloseDialogWindow(DialogNr)' in command overview (see below), which should be used to close a dialog or window

[original post]

Hi there,

I'm glad to publicize my finished 'DynamicDialogs' - a Module that enables you to create professional looking and resizeable GUIs in a very easy way.
It is already in use by some users from the german-forum (like André, matbal and me) and it really helps a lot if you develop applications with dynamic and resizeable GUI.
It has also been testet under Linux and MaxOS by matbal and seems to work fine there as well.

It's based on PBs Dialog-Library, but it bypasses a lot of it's drawbacks (such as: no AutoComplete, no SyntaxCheck, no Command-Help, no Font- or Image-Support, etc.).
But it provides you with all the great benefits the Dialog-Library offers (such as: easy lineup and resize of Gadgets, extremely easy and clever (weblike) way to create complex layoutet GUIs).

If you already had a look at PBs Dialog-Library, you should be able to use DynamicDialogs within a few Minutes.
If you have never used the Dialog-Library just have a look at the description to get a general understanding about the Layout-Elements such as vBox(), GridBox(), ...
I've included some Demos. So may have a look at them to get a closer understanding of how to use DynamicDialogs.
Once you get used to it, it's quite easy and very handy.

Because the Source and the Demos are too big to post in this thread, you can download the zipped-folder HERE.

Example of a resizeable GUI (inspiderd by Michael Vogel):
Image

General way to use:
-------------------------------
1. Just include the AddOn which provides the syntax of your choise (see description later on about the available AddOns)
2. Use "UseModule ..." to activate Modul Commands
3. Create your Dialog (your Window / Form / GUI ... or whatever you would like to call it)
4. Open your Dialog-Window (with Function: OpenDialogWindow())


The XML-Dialog Elements:
---------------------------------------------------------------------
DynamicDialogs provides all XML-Elements which are supported by PBs Dialog-Libray.
Further on it has additional support for 'Font'-Elements (see below), ImageIDs in ImageGadgets and it does support Menus and StatusBars.

During the development and use of DynamicDialogs I become aware, that it could be handy to have different syntax-types, to fit ones actual needs.
So the Command-Syntax for the XML-Elements has been splittet from the Main-Module and outsourced into separate 'AddOns'.
Each AddOn provides a slightly different Syntax, so you can choose the AddOn with the Syntax that fits your needs most.

Available AddOns (the AddOns will XInclude the Main-Module automatically):

Code: Select all

DynamicDialogs_plain					- Functions have a plain syntax (e.g. Button(ID, Name$,...))
DynamicDialogs_suffixed				- same Syntax as the 'plain'-Version, but with a suffix of '__' (e.g. Button__(ID, Name$, ...).
												So they differ more from existing commands or functions.
												Further I includet a little tool ('DynamicDialogs_Suffix Indentation-Injector.exe') which
												teaches the PB-Editor to indent these 'suffixed' commands correctly.
DynamicDialogs_suffixed_IDonly		- also with a suffix, but Syntax requires/supports the ID only, not the Name$ - (e.g. Button__(ID, ...)
DynamicDialogs_suffixed_NameOnly	- also with a suffix, but Syntax requires/supports the Name$ only, not the ID - (e.g. Button__(Name$, ...)
So you can choose, if you want a plain Version or a suffixed Version (which supports sourcecode indentation), or if you prefer an ID-only or a Name-only Version.


Here is a List of the supported XML-Elements (with Syntax-Type from the AddOn: 'DynamicDialogs_suffixed') and some general Functions:
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
[HINT:] Nearly all Parameters are optional. For more Information about the Parameters, have a look at the next post in this thread.

Code: Select all

; =====  General-Functions  =====

OpenDialogWindow(DialogNr, XML$ [, ...]) ; opens a Window from a generated XML-Dialog
CloseDialogWindow(DialogNr)              ; closes the Dialog-Window and cleans up all parameters and pointers
CheckDialog(XML$ [, ErrorMessageType])   ; to check, if a Dialog-Definition is OK (not really necessary, also done by OpenDialogWindow())

ClearXML()                               ; clears or resets the so far created XML-Code
GetXML()                                 ; Get the so far created XML-Code
SetXMLOutputFormat(Attribut, Value)      ; defines, how the generated XML-Code will be formated (indent-size, tab or space, ...)

; =====  ordinary Gadgets =====

Button__       (ID, Name$, Text$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ButtonImage__  (ID, Name$, Image1, Image2, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Calendar__     (ID, Name$, Date , Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Canvas__       (ID, Name$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
CheckBox__     (ID, Name$, Text$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ComboBox__     (ID, Name$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
DateTime__     (ID, Name$, Mask$, Date, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Editor__       (ID, Name$, Text$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ExplorerCombo__(ID, Name$, Path$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ExplorerList__ (ID, Name$, Path$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ExplorerTree__ (ID, Name$, Path$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
HyperLink__    (ID, Name$, Text$, Color, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
IPAddress__    (ID, Name$, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Image__        (ID, Name$, ImageID , Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ListIcon__     (ID, Name$, FirstColumnTitle$ , FirstColumnWidth, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ListView__     (ID, Name$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Option__       (ID, Name$, Text$, Group, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ProgressBar__  (ID, Name$, Min, Max=100, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ScrollBar__    (ID, Name$, Min, Max=100, Value, PageLength=50, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Spin__         (ID, Name$, Min, Max=100, Value, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
String__       (ID, Name$, Text$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Text__         (ID, Name$, Text$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
TrackBar__     (ID, Name$, Min, Max=100, Value, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Tree__         (ID, Name$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Web__          (ID, Name$, URL$, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Scintilla__    (ID, Name$, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)

Font__         (FontName, Height, Style=0)
FontByID__     (FontID)

; =====  Layout Elements (need 'End...'-Command to close)  =====

Dialogs__      ()
Window__       (ID, Name$, Titel$, Flags, Width, Height, MinWidth=0, MinHeight=0, MaxWidth=0, MaxHeight=0, XmlParam$)
vBox__         (Expand, Align, Spacing, XmlParam$)
hBox__         (Expand, Align, Spacing, XmlParam$)
GridBox__      (Columns, ColSpacing, RowSpacing, ColExpand, RowExpand, XmlParam$)
MultiBox__     (Expand, Align, Margin$, XmlParam$)
SingleBox__    (Expand, Align, Margin$, Expandwidth, Expandheight, XmlParam$)
Empty__        (Width, Height, XmlParam$)

EndDialogs__   ()   
EndWindow__    ()  
EndVBox__      ()    
EndHBox__      ()     
EndGridBox__   ()  
EndMultiBox__  ()
EndSingleBox__ ()

; =====  Container Elements  (PureBasic Gadgets, which can contain other Gadgets - need 'End...'-Command to close)  =====

Container__    (ID, Name$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Frame__        (ID, Name$, Text$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Panel__        (ID, Name$, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
ScrollArea__   (ID, Name$, ScrollAreaWidth, ScrollAreaHeight, ScrollStep, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Splitter__     (ID, Name$, FirstMinSize, SecondMinSize, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)
Tab__          (Text$, Margin$)

EndContainer__ ()
EndFrame__     () 
EndPanel__     ()  
EndTab__       ()     
EndScrollArea__()
EndSplitter__  ()

HINT: Instead of using the specific 'End...'-Command , you could use 'CloseNode__()' in any Case.
It may look 'a bit heavy' at the first look, but in general it's quite handy to use and really helps a lot if you develop Applications with resizeable GUI.

Maybe it could be of some use for you.

Any questions or comments are welcome. ;)
Last edited by PureLust on Tue Jan 02, 2018 5:54 pm, edited 11 times in total.
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
Joris
Enthusiast
Enthusiast
Posts: 735
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by Joris »

Thanks for this great job.

I found that resizeable GUI from Michael already very interessting. Knowing it's quit a job to get such things done, your sources will become very handy.
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
PureLust
Enthusiast
Enthusiast
Posts: 466
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by PureLust »

Joris wrote:Thanks for this great job.
Thanks for the nice comment ... you are welcome. ;)

Following you will find some rudimentary Information about the available Parameters:
----------------------------------------------------------------------------------------------------------------------

First of all: Most of the Parameters for the XML-Elements are optional.
So you can simply use (e.g.) 'Button__()' to create a ButtonGadget().

Lets have a look at the Parameters (e.g. for CheckBox__()):
Syntax: CheckBox__ (ID, Name$, Text$, Flags, Width, Height, Align, Margin$, ColSpan, RowSpan, XmlParam$)

ID - as described in PBs Dialog-Library, it's the Number of the Gadget (like ButtonGadget(Gadget#,...))
Name$ - the Dialog-Library provides a way, to access a Gadget by a given name, so you can give the Gadget a Name here.
Text & Flags are identical to the equivalent Gadget-Parameters

Width & Height are the initial width & height (if Gadget will not be auto-resized)

Align - Here you can specify, how the Gadget will be aligned in its surrounding area (does only work, if Gadget will not be auto-resized)

Available Flags for Align:
#alignTop
#alignBottom
#alignLeft
#alignRight
#alignCenter

#alignTopLeft
= #alignTop | #alignLeft
#alignTopCenter
= #alignTop | #alignCenter
#alignTopRight
= #alignTop | #alignRight
#alignCenterLeft
= #alignCenter | #alignLeft
#alignCenterRight
= #alignCenter | #alignRight
#alignLeftCenter
= #alignCenterLeft
#alignRightCenter
= #alignCenterRight
#alignBottomLeft
= #alignBottom | #alignLeft
#alignBottomCenter
= #alignBottom | #alignCenter
#alignBottomRight
= #alignBottom | #alignRight[/color]

margin$ - define the margin, as described in PBs Help for the Dialog-Library. E.g.:
"5" - Gadget will get a margin of 5 pixel on all sides
"left:20,top:10" - Gadget will get a margin of 20 pixel on the left and 10 pixel at the top
"vertical:10" - Gadget will get a margin of 10 pixel at the top and the bottom

ColSpan, RowSpan - If the Element is placed within a GridBox, it will claim an Area of 'ColSpan' number of columns and 'RowSpan' number of Rows.

XmlParam$ - if the original XML-Syntax from the Dialog-Library provides any Argument which is not supported by a Parameter of DynamicDialogs, you can integrate it here in the same format as you would do it in an XML-String for the original Dialog-Library.

Did I forgot something?
Any further questions or comments?
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
User avatar
Andre
PureBasic Team
PureBasic Team
Posts: 1875
Joined: Fri Apr 25, 2003 6:14 pm
Location: Germany (Saxony, Deutscheinsiedel)
Contact:

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by Andre »

Like I already said in previous posts about this topic, and on the related german forum thread, you did a fantastic job. Many many thanks for it! :mrgreen:

I do you the DynamicDialogs module (in 'plain' mode) for my big project, and have already successfully converted a bunch of GUI windows (using fixed gadget numbers, but #PB_Any ones as well for several instances of the same GUI with different content). So this is proofing, that PB's Gadget/Dialog libraries with this very useful add-on (catching several limitations of the original Dialog lib) can be used for larger projects too. And this module makes it really a lot easier, which saves a lot of development time. Thank you again! :D
Bye,
...André
(PureBasicTeam::Docs & Support - PureArea.net | Order:: PureBasic | PureVisionXP)
infratec
Always Here
Always Here
Posts: 5346
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by infratec »

Hi,

I did a short test and played with the demos:

Should there be underscores in Michaels example :?:

There are some texts with an & inside which normally indicates an underlined letter and a shortkey.

Bernd
LuckyLuke
Enthusiast
Enthusiast
Posts: 181
Joined: Fri Jun 06, 2003 2:41 pm
Location: Belgium

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by LuckyLuke »

Thanks for this fantastic job !
Will become one of my must-have modules.

LuckyLuke
User avatar
Mohawk70
Enthusiast
Enthusiast
Posts: 399
Joined: Thu May 11, 2006 1:04 am
Location: Florida, USA

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by Mohawk70 »

Thank you - you've done an amazing job with this !
davido
Addict
Addict
Posts: 1829
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by davido »

@PureLust,
I always use Dialogs but sometimes it is so difficult to get it right.
Now it is so easy - thanks to you.
It is just like magic.
Thank you very much. :D
DE AA EB
Fred
Administrator
Administrator
Posts: 14206
Joined: Fri May 17, 2002 4:39 pm
Location: France
Contact:

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by Fred »

It's very clever ! Great job on this.
PureLust
Enthusiast
Enthusiast
Posts: 466
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by PureLust »

Thanks to all for the nice feedback.
Glad to read, that it is of some use for others too. :D

@Fred: (almost missed it) ... belated happy birthday! :mrgreen:
infratec wrote:Should there be underscores in Michaels example :?:

There are some texts with an & inside which normally indicates an underlined letter and a shortkey.
I also noticed the faulty display of the underscores, but because they were shown exactly the same way in Michaels original code and had nothing to do with DynamicDialogs, I did not changed it.
But I think Michael has fixed that in his final tool.
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
infratec
Always Here
Always Here
Posts: 5346
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by infratec »

Hi,

a short look into the link to Michaels tool and...

The & are for underscored letters and for keyboard shortcuts.
I don't know if this is possible in Dialogs.

Up to now I don't use them, because the help and examples showing not all commands.

Bernd
Joubarbe
Enthusiast
Enthusiast
Posts: 432
Joined: Wed Sep 18, 2013 11:54 am
Location: France

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by Joubarbe »

Thank you for this great library!

The Tricks 'n' Tips section of this forum should really have a summary/sticky thread of the best posts. There's many good things that get lost in the mass.
Joubarbe
Enthusiast
Enthusiast
Posts: 432
Joined: Wed Sep 18, 2013 11:54 am
Location: France

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by Joubarbe »

Would it be possible to add Menu and Toolbar compatibility to this library or does it have to be a PB internal feature ?

The latest post I read from Fred on this subject is from 2013, so I doubt they will add these features soon... :(
PureLust
Enthusiast
Enthusiast
Posts: 466
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by PureLust »

Joubarbe wrote:Would it be possible to add Menu and Toolbar compatibility to this library ...
I did not need these features for my purpose so far, but I agree that they may be nice enhancement.

But ... because the Motorbike-Season has already begun, my private time to work on this lib is very limited until end of Bike-Season.

Nevertheless, you can create your dynamic GUI by using the lib and add menus and toolbar 'the usual way' after you've opened the Dialog using 'OpenDialogWindow()'.

Further, feel free to implement needed features on your own.
The sourcecode is available and free to use and change.

If you are interested in adding your own features, you may have a look at the Font()-Procedures to see how I've implemented font-support into the Lib.
Because Fonts are also not supported by the original Dialog-Library, it may be a good example, how you could implement your own features (it's not that hard).

In general:
If you want to implement own features, just write a Procedure which adds a custom HTML-Tag ("<? ..... ?>") with attributes to the XML-Code (e.g. see the custom ?Image- and ?Font-Tags in this XML-Output example).
Then parse and process these Tags within the OpenDialogWindow()-Procedure.
(Have a look at Line 720-788 in 'DynamicDialogs_MainModul.pbi', to see how I parse and process the custom ?Font-Tag.)
That's it. :mrgreen:

Maybe someone is interested in implementing even more features into the lib. :wink:

Thanks and greetz,
PureLust.
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
Joubarbe
Enthusiast
Enthusiast
Posts: 432
Joined: Wed Sep 18, 2013 11:54 am
Location: France

Re: DynamicDialogs - creating dynamic Dialogs the easy way .

Post by Joubarbe »

PureLust wrote: Nevertheless, you can create your dynamic GUI by using the lib and add menus and toolbar 'the usual way' after you've opened the Dialog using 'OpenDialogWindow()'.
Unfortunately, it won't work. Adding menus or toolbars to dialogs mess up the dialog size. i.e all gadgets "overstep" the bottom of the window.

Anyway, good luck for the bike season, and thanks again :)
Post Reply