It is currently Thu Nov 23, 2017 12:10 pm

All times are UTC + 1 hour




Post new topic Reply to topic  [ 38 posts ]  Go to page 1, 2, 3  Next
Author Message
 Post subject: MODULE: DynamicDialogs - creating complex GUIs the easy way
PostPosted: Mon Mar 28, 2016 1:42 am 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Mon Apr 16, 2007 3:57 am
Posts: 399
Location: Germany, NRW
[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 and additional 'Font'-Elements (see below)

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:
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:
; =====  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 Sat Aug 12, 2017 11:50 am, edited 8 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Mon Mar 28, 2016 7:13 am 
Offline
Enthusiast
Enthusiast

Joined: Fri Oct 16, 2009 10:12 am
Posts: 532
Location: BE
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Mon Mar 28, 2016 12:23 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Mon Apr 16, 2007 3:57 am
Posts: 399
Location: Germany, NRW
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?


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Tue Mar 29, 2016 8:36 pm 
Offline
PureBasic Team
PureBasic Team
User avatar

Joined: Fri Apr 25, 2003 6:14 pm
Posts: 1391
Location: Germany (Saxony, Deutscheinsiedel)
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)


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Tue Mar 29, 2016 11:28 pm 
Offline
Addict
Addict

Joined: Sun Sep 07, 2008 12:45 pm
Posts: 3711
Location: Germany
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


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Wed Mar 30, 2016 7:13 pm 
Offline
Enthusiast
Enthusiast

Joined: Fri Jun 06, 2003 2:41 pm
Posts: 168
Location: Belgium
Thanks for this fantastic job !
Will become one of my must-have modules.

_________________

LuckyLuke


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Thu Mar 31, 2016 12:14 am 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Thu May 11, 2006 1:04 am
Posts: 365
Location: Mullica Hill, NJ USA
Thank you - you've done an amazing job with this !

_________________
There's no such thing as free time.
There's no such thing as spare time.
There's no such thing as down time.
All you have is life time.
Go!
- Henry Rollins

Tupponce Hosting http://www.TupponceHosting.com


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Thu Mar 31, 2016 5:40 am 
Offline
Addict
Addict

Joined: Fri Nov 09, 2012 11:04 pm
Posts: 1461
Location: Uttoxeter, UK
@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


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Thu Mar 31, 2016 8:27 am 
Offline
Administrator
Administrator

Joined: Fri May 17, 2002 4:39 pm
Posts: 13141
Location: France
It's very clever ! Great job on this.


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Wed Apr 06, 2016 3:12 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Mon Apr 16, 2007 3:57 am
Posts: 399
Location: Germany, NRW
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Wed Apr 06, 2016 3:42 pm 
Offline
Addict
Addict

Joined: Sun Sep 07, 2008 12:45 pm
Posts: 3711
Location: Germany
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


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Fri May 20, 2016 9:10 am 
Offline
Enthusiast
Enthusiast

Joined: Wed Sep 18, 2013 11:54 am
Posts: 301
Location: France
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Mon May 23, 2016 11:13 am 
Offline
Enthusiast
Enthusiast

Joined: Wed Sep 18, 2013 11:54 am
Posts: 301
Location: France
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... :(


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Tue May 24, 2016 6:00 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Mon Apr 16, 2007 3:57 am
Posts: 399
Location: Germany, NRW
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: DynamicDialogs - creating dynamic Dialogs the easy way .
PostPosted: Wed May 25, 2016 3:06 pm 
Offline
Enthusiast
Enthusiast

Joined: Wed Sep 18, 2013 11:54 am
Posts: 301
Location: France
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 :)


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 38 posts ]  Go to page 1, 2, 3  Next

All times are UTC + 1 hour


Who is online

Users browsing this forum: Kwai chang caine and 12 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  

 


Powered by phpBB © 2008 phpBB Group
subSilver+ theme by Canver Software, sponsor Sanal Modifiye