Dialog - complete support for alignment without add. boxes

[Andre]

As you can see in the following example code I can force the Dialog library to center a gadget inside the parent layout item (hbox / vbox). But this need additional 'singlebox' parameters, and works only correctly for vertical alignment.

I wish that we get the possibility to add "align = 'center'" (or "align = 'left' / 'right'") to each vbox/hbox/frame (and if really additionally needed: singlebox), and all child items will the placed like that... Thanks!

Code: Select all

 CompilerIf #PB_Compiler_Unicode
    #XmlEncoding = #PB_UTF8
  CompilerElse 
    #XmlEncoding = #PB_Ascii
  CompilerEndIf

  #Dialog = 0
  #Xml = 0
  
  XML$ = "<window id='#PB_Any' name='test' text='test' minwidth='auto' minheight='auto' flags='#PB_Window_ScreenCentered | #PB_Window_SystemMenu | #PB_Window_SizeGadget'>" +
         "      <vbox expand='item:2'>" +
         "        <hbox>" +
         "          <button text='button 1'/>" +
         "          <checkbox text='checkbox 1'/>" +
         "          <button text='button 2'/>" +
         "        </hbox>" +
         "        <vbox>" +
         "          <text align='center' text='content' height='150'/>" +   ; align parameter is ignored
         "          <singlebox align='center' expand='vertical'>" +
         "            <text align='center' text='content' height='150'/>" +  ; correct alignment
         "          </singlebox>" +
         "          <singlebox align='center' expand='horizontal'>" +
         "            <text align='center' text='content' height='150'/>" +  ; no correct alignment, as the text is displayed only a bit to the right
         "          </singlebox>" +
         "        </vbox>" +
         "      </vbox>" +
         "</window>"
  
  If CatchXML(#Xml, @XML$, StringByteLength(XML$), 0, #XmlEncoding) And XMLStatus(#Xml) = #PB_XML_Success
    
    If CreateDialog(#Dialog) And OpenXMLDialog(#Dialog, #Xml, "test")
      
      Repeat
        Event = WaitWindowEvent()
      Until Event = #PB_Event_CloseWindow 
      
    Else  
      Debug "Dialog error: " + DialogError(#Dialog)
    EndIf
  Else
    Debug "XML error: " + XMLError(#Xml) + " (Line: " + XMLErrorLine(#Xml) + ")"
  EndIf
  

[PureLust]

Hey André,

it's not the requested implemented feature, but maybe this will work for you.

Greetz, Albert.

[Andre]

Yes, it helps.
But like I wrote in the other thread, a native implementation would be ease the Dialog creation and shorten the XML description a lot. And there are also situations, where the <singlebox> can't be used, e.g. for combining <gridbox> columns using the <colspan=...> parameter...

[PureLust]

Yes, it helps.
But like I wrote in the other thread, a native implementation would be ease the Dialog creation and shorten the XML description a lot. And there are also situations, where the <singlebox> can't be used, e.g. for combining <gridbox> columns using the <colspan=...> parameter...

Added ColSpan/RowSpan-Option for you.

[Andre]

Even if we are now a bit further by using <singlebox> constructs around the Dialog elements to be aligned (see the linked topic above), I'm also missing a way to get proper aligned gadget in one "row" of the GUI / Dialog.

For example I have a "row" with a ComboBoxGadget and a (describing) TextGadget left of it.
Both are placed at the top of the "row", probably because the TextGadget uses the same height than the Combobox, even if the real text height is lower.

To get a proper (vertically centered) look of this two gadgets, I simply place the TextGadget 2 pixels below the ComboBoxGadget (value of the 'y' parameter is 2 pixels higher).

Don't know if this can be done natively at calculation of the Dialog or if this has something to do with the GadgetHeight of TextGadgets... (and is not really a Dialog problem).

Same problem exists with StringGadgets, where the "describing text" (given as parameter to the command) left of the input box is also placed more to the top.

So in call cases the additionally text beside the combobox or the string input doesn't really look vertically centered.

Anyone with an idea?

[PureLust]

Anyone with an idea?

The only way I know so far, is by capsulating the Gadget you want to justify within a singlebox and using 'margin', e.g. margin='top:2':

Code: Select all

"<singlebox margin='top:2'>" +
"  	<Text id='#gad1Text_BerichtNr' text='20160101001' width='10'/>" +
"</singlebox>" +

(Havn't tested the above code.)

[Andre]

@PureLust: thank you!

For testing purposes, but maybe also helpful for other PB users, I created the following example code.

If I did the XML code right, there is an interesting note:
If you don't give a 'height' parameter (in pixel or 'auto') for gadgets/singleboxes placed on one row, a top-margin don't work - see the last text/combobox combination in the example.
It seems that also 'auto' forces PB to do a correct height calculation (including a given margin), which isn't present if you didn't gave a height parameter...

Code: Select all

; http://www.purebasic.fr/english/viewtopic.php?f=3&t=57271

; Example / Test code for different types of alignment/margins in PureBasic's dialog
; Created by Andre
; Tipps by PureLust

EnableExplicit

Global LF$= Chr(10)
Define a, Combo1, Combo2

CompilerIf #PB_Compiler_Unicode
  #XmlEncoding = #PB_UTF8
CompilerElse
  #XmlEncoding = #PB_Ascii
CompilerEndIf

#Dialog = 0
#Xml = 0


Define XML$ = "<window id='#PB_Any' name='test' text='Top margin Test' minwidth='400' minheight='200' width='auto' height='auto' flags='#PB_Window_ScreenCentered | #PB_Window_SystemMenu | #PB_Window_SizeGadget'>" + LF$ +
              "  <vbox height='50' expand='no'>" + LF$ +
              "    <frame>" + LF$ +
              "      <hbox>" + LF$ +
              "        <singlebox margin='top:5' >" + LF$ +
              "          <text text='Select: (5 pixel top-margin)' />" + LF$ +
              "        </singlebox>" + LF$ +
              "        <combobox name='Combobox1' height='50' />" + LF$ +
              "      </hbox>" + LF$ +
              "    </frame>" + LF$ +
              "    <button text='Button 1' />" + LF$ +
              "    <frame>" + LF$ +
              "      <hbox>" + LF$ +
              "        <singlebox margin='5' align='top,right' expand='no' >" + LF$ +
              "          <text text='Select: (top+right, 5 pixel margin)' />" + LF$ +
              "        </singlebox>" + LF$ +
              "        <combobox name='Combobox2' height='50' />" + LF$ +
              "      </hbox>" + LF$ +
              "    </frame>" + LF$ +
              "    <button text='Button 2' />" + LF$ +
              "    <frame>" + LF$ +
              "      <hbox>" + LF$ +
              "        <singlebox  align='center+right, no margin' >" + LF$ +
              "          <text text='Select: (center, right)' />" + LF$ +
              "        </singlebox>" + LF$ +
              "        <combobox name='Combobox3' height='auto' />" + LF$ +
              "      </hbox>" + LF$ +
              "    </frame>" + LF$ +
              "    <button text='Button 3' />" + LF$ +
              "    <frame>" + LF$ +
              "      <hbox>" + LF$ +
              "        <singlebox margin='left:15' >" + LF$ +
              "          <text text='Select: (15 pixel left-margin, no top-margin)' />" + LF$ +
              "        </singlebox>" + LF$ +
              "        <combobox name='Combobox4' />" + LF$ +
              "      </hbox>" + LF$ +
              "    </frame>" + LF$ +
              "    <button text='Button 4' />" + LF$ +
              "    <frame>" + LF$ +
              "      <hbox>" + LF$ +
              "        <singlebox margin='top,left:10' >" + LF$ +
              "          <text text='Select: (10 pixel left+top-margin)' />" + LF$ +    ; top margin don't work, as long there is no height parameter (pixel or auto) given for the combobox right of it
              "        </singlebox>" + LF$ +
              "        <combobox name='Combobox5' />" + LF$ +
              "      </hbox>" + LF$ +
              "    </frame>" + LF$ +
              "  </vbox>" + LF$ +                               
              "</window>" 


If CatchXML(#Xml, @XML$, StringByteLength(XML$), 0, #XmlEncoding) And XMLStatus(#Xml) = #PB_XML_Success
  ;Debug XML$
  
  If CreateDialog(#Dialog) And OpenXMLDialog(#Dialog, #Xml, "test")
    
    Combo1 = DialogGadget(#Dialog, "Combobox1")
    For a = 1 To 10
      AddGadgetItem(Combo1, -1, "Item " + Str(a))
    Next
    Combo2 = DialogGadget(#Dialog, "Combobox2")
    For a = 11 To 20
      AddGadgetItem(Combo2, -1, "Item " + Str(a))
    Next
    
    Repeat
      Define   Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
      
  Else 
    Debug "Dialog error: " + DialogError(#Dialog)
  EndIf
Else
  Debug "XML error: " + XMLError(#Xml) + " (Line: " + XMLErrorLine(#Xml) + ")"
EndIf

[davido]

@Andre,
There appear to be two ComboBoxes with the name='Combobox4'.
Presumably only the first will be recognised as active.

Thank you for all the work you and PureLust have done to improve our knowledge of the Dialog Library. It is much appreciated.

[Andre]

@Andre,
There appear to be two ComboBoxes with the name='Combobox4'.
Presumably only the first will be recognised as active.

Thank you for all the work you and PureLust have done to improve our knowledge of the Dialog Library. It is much appreciated.

Thank you, and you're welcome!

I've corrected my example above into 'Comboxbox5'. Anyway this would be "only" important for further processing (e.g. filling all the comboboxes with elements), but doesn't influence the size / margin calculation of the dialog.

[Little John]

+1 for Andre's feature request in the 1st post here
(still not implemented in PB 5.42)