XML-Dialog : Element-Alignment

[PureLust]

I came across this feature request from André, about an option to align any kind of Dialog-Element.

Because it's still not supported native I've made a very little Proc, to easily align any kind of Dialog-Element:

Code: Select all

Procedure.s Align_Element(XML_Code.s, Align.s="center", Margin.l=0)
	
	ProcedureReturn "<singlebox align='"+Align+"' margin='0' expand='horizontal'><singlebox align='"+Align+"' margin='"+Str(Margin)+"' expand='vertical'>"   + XML_Code+"</singlebox></singlebox>"
	
EndProcedure

Maybe it will fit someones needs.



Example Code:

Code: Select all

EnableExplicit

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

#Dialog = 0
#Xml = 0

Procedure.s Align_Element(XML_Code.s, Align.s="center", Margin.l=0)
	
	ProcedureReturn "<singlebox align='"+Align+"' margin='0' expand='horizontal'><singlebox align='"+Align+"' margin='"+Str(Margin)+"' expand='vertical'>"   + XML_Code+"</singlebox></singlebox>"
	
EndProcedure


Define	Button$ = "<button width='30' height='10'/>"		; just put some often used frases into variables to shorten the code
Define	ButtonRow$ = "<button colspan='7'/>"				; just put some often used frases into variables to shorten the code


Define	XML$ =	"<window id='#PB_Any' name='test' text='Align_Element() Test' minwidth='400' minheight='200' width='600' height='400' flags='#PB_Window_ScreenCentered | #PB_Window_SystemMenu | #PB_Window_SizeGadget'>" +
					      "<gridbox columns='7' colexpand='yes' rowexpand='yes' colspacing='0' rowspacing='0'>" +
						      ButtonRow$ + Button$ + 
					       
								Align_Element("<text text='top, left'/>"           , "top, left"  )    + Button$ +
								Align_Element("<text text='top, center'/>"         , "top, center")    + Button$ +
								Align_Element("<text text='top, right'/>"          , "top, right" )    + Button$ +
								                                                                        
								ButtonRow$ + Button$ +
								             
								Align_Element("<button text='left, center'/>"      , "left, center" )  + Button$ +
								Align_Element("<button text='center'/>"            , "center"       )  + Button$ +
								Align_Element("<button text='right, center'/>"     , "right, center")  + Button$ +
								                                                                        
								ButtonRow$ + Button$ +
								             
								Align_Element("<checkbox text='bottom, left'/>"    , "bottom, left"   ,5)  + Button$ +		; the last 3 Gadgets are with a margin of 5 pixels
								Align_Element("<checkbox text='bottom, center'/>"  , "bottom, center" ,5)  + Button$ +
								Align_Element("<checkbox text='bottom, right'/>"   , "bottom, right"  ,5)  + Button$ +
								                                                                            
								ButtonRow$ +
							"</gridbox>" +
						"</window>"


If CatchXML(#Xml, @XML$, StringByteLength(XML$), 0, #XmlEncoding) And XMLStatus(#Xml) = #PB_XML_Success
	
	If CreateDialog(#Dialog) And OpenXMLDialog(#Dialog, #Xml, "test")
		
		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]

@PureLust,
Very interesting idea. Thank you for sharing.

[Andre]

Yes, the <singlebox> encapsulation of other Dialog elements does the trick! Just discovered this myself...
Providing a pre-defined function to ease the XML construction of the dialog is a nice idea, thank you!

Just be aware that <singlebox> doesn't work in every case, e.g. you can't use the <singlebox> to combine several Gridbox columns or if you want to add another dialog element (e.g. a <text> gadget) combining more than one Gridbox column by using <colspan=...> inside the gadget XML description.

This is just some of my experiences (try & error), as I have also no insight in the Dialog library.

Native support of correct alignment for each dialog element would be very welcome / needed, and would ease the dialog construction and decrease the size of the XML description a lot! Fred!?

[PureLust]

Just be aware that <singlebox> doesn't work in every case, e.g. you can't use the <singlebox> to combine several Gridbox columns or if you want to add another dialog element (e.g. a <text> gadget) combining more than one Gridbox column by using <colspan=...> inside the gadget XML description.

As usual André .... your wish is my command:
Added ColSpan/RowSpan-Option for you.

Code: Select all

EnableExplicit

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

#Dialog = 0
#Xml = 0

Procedure.s Align_Element(XML_Code$, Align$="center", Margin=0, ColSpan=#PB_Ignore, RowSpan=#PB_Ignore)
	
	Protected Col$, Row$
	If ColSpan <> #PB_Ignore : Col$ = " colspan='"+Str(ColSpan)+"'" : EndIf
	If RowSpan <> #PB_Ignore : Row$ = " rowspan='"+Str(RowSpan)+"'" : EndIf
	ProcedureReturn "<singlebox align='"+Align$+"' margin='0'"+Col$+Row$+" expand='horizontal'><singlebox align='"+Align$+"' margin='"+Str(Margin)+"' expand='vertical'>"   + XML_Code$+"</singlebox></singlebox>"
	
EndProcedure


Define	Button$ = "<button width='30' height='10'/>"		; just put some often used frases into variables to shorten the code
Define	ButtonRow$ = "<button colspan='7'/>"				; just put some often used frases into variables to shorten the code


Define	XML$ =	"<window id='#PB_Any' name='test' text='Align_Element() Test' minwidth='400' minheight='200' width='600' height='400' flags='#PB_Window_ScreenCentered | #PB_Window_SystemMenu | #PB_Window_SizeGadget'>" +
					      "<gridbox columns='7' colexpand='yes' rowexpand='yes' colspacing='0' rowspacing='0'>" +
						      ButtonRow$ + Button$ + 
					       
								Align_Element("<text text='top, left'/>"           , "top, left"  )    + Button$ +
								Align_Element("<text text='top, center'/>"         , "top, center")    + Button$ +
								Align_Element("<text text='top, right'/>"          , "top, right" )    + Button$ +
								                                                                        
								ButtonRow$  +
								             
								Align_Element("<button text='left, center'/>"      , "left, center" ,0,1,2)     + Button$ +
								Align_Element("<button text='center'/>"            , "center"       ,0,3,2)     + Button$ +
								Align_Element("<button text='right, center'/>"     , "right, center",0,1,2)     + Button$ + Button$ +
								                                                                        
								ButtonRow$ + Button$ +
								             
								Align_Element("<checkbox text='bottom, left'/>"    , "bottom, left"   ,5)       + Button$ +		; the last 3 Gadgets are with a margin of 5 pixels
								Align_Element("<checkbox text='bottom, center'/>"  , "bottom, center" ,15,1,2)  + Button$ + 
								Align_Element("<checkbox text='bottom, right'/>"   , "bottom, right"  ,5)       + Button$ +
								                                                                            
								"<button colspan='3'/><button colspan='3'/>" +
							"</gridbox>" +
						"</window>"


If CatchXML(#Xml, @XML$, StringByteLength(XML$), 0, #XmlEncoding) And XMLStatus(#Xml) = #PB_XML_Success
	
	If CreateDialog(#Dialog) And OpenXMLDialog(#Dialog, #Xml, "test")
		
		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

[Andre]

Thank you!

PS: I would have already working the <Singlebox> for combining 2 gridbox columns in my own code, if I hadn't forgotten a '>' in the XML description, something which happens quite often.... maybe a debugger check for opening/closing "<>" and for an equal number of "'" would be a possible and very helpful addition!?

[Andre]

I tried to polish / extend the code of 'PureLust' a bit more, and added correct indentation of created / used XML code + added linebreaks after each XML code line (both is needed for proper debug output of finally created XML code) + added documentation.
The (small) loss of efficiency in the alignment function should be worth the previously named improvements...

I need to do some testing with using the function in my own project, but as the current example runs fine (the same way than before), I think it can be posted now as improved version of this tipp...

Code: Select all

; Original by 'PureLust', see here:
; http://www.purebasic.fr/english/viewtopic.php?f=12&t=64635

; plus some additions by Andre
;  (like the linebreaks in XML code using LF$, proper indentation of XML code lines, documentation)

EnableExplicit

Global LF$= Chr(10)

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

#Dialog = 0
#Xml = 0

Procedure.s Align_Element(XML_Code$, Indent$="", Align$="center", Margin=0, ColSpan=#PB_Ignore, RowSpan=#PB_Ignore)
  ; The purpose of this function is to provide correct alignment of XML Dialog-created gadgets, for which
  ; currently (PB5.41) alignment in the gadget definition like <Text text='test' align='center' ...> don't work.
  ; Used for this are <SingleBox> elements around the gadget definition, to adjust horizontal and/or vertical
  ; alignment.
  ;
  ; Parameter:
  ; XML_Code$ = Gadget definition, for example: <text text='Test'>
  ; Indent$   = some space to insert before the XML code lines, created in this procedure 
  ;             (if you need/want well formatted XML code)
  ; Align$    = one or two tags describing the wanted horizontal/vertical alignment of the gadget.
  ;             Supported are the following tags:
  ;                top, left
  ;                top, center
  ;                top, right
  ;                left, center
  ;                center
  ;                right, center
  ;                bottom, left
  ;                bottom, center
  ;                bottom, right
  ; Margin    = margin (in pixel) above/below the gadget element
  ; ColSpan   = only for gadget elements inside a <gridbox>, which should overlap several gridbox fields 
  ; RowSpan   = - " -
  
  Protected Col$, Row$, XML$, OuterSingleBox = #False, AddIndent$
  
  ; Additional code/settings, if overlapping several <gridbox> fields is requested:
  If ColSpan <> #PB_Ignore
    Col$ = " colspan='"+Str(ColSpan)+"'"
    OuterSingleBox = #True
  EndIf
  If RowSpan <> #PB_Ignore
    Row$ = " rowspan='"+Str(RowSpan)+"'"
    OuterSingleBox = #True
  EndIf
   
  ; We insert the outer <singlebox> only when overlapping several gridbox fields is requested, meaning a 'colspan' Or 'rowspan' was given:
  If OuterSingleBox = #True   
    XML$ = Indent$ + "<singlebox align='" + Align$ + "' margin='0'" + Col$ + Row$ + " expand='horizontal'>" + LF$
    AddIndent$ = "  "
  EndIf
  
  ; Now the inner <singlebox> needed for correct alignment of the given gadget element:
  XML$ + Indent$ + AddIndent$ + "<singlebox align='" + Align$ + "' margin='" + Str(Margin) + "' expand='vertical'>" + LF$ +
         Indent$ + AddIndent$ + "  " + XML_Code$ + LF$ +
         Indent$ + AddIndent$ + "</singlebox>" + LF$
  
  ; End of the outer <singlebox>, if any:
  If OuterSingleBox = #True
    XML$ + Indent$ + "</singlebox>" + LF$
  EndIf

   ProcedureReturn XML$   
EndProcedure


Define Button$ = "    <button width='30' height='10'/>"      ; just put some often used frases into variables to shorten the code
Define ButtonRow$ = "    <button colspan='7'/>"            ; just put some often used frases into variables to shorten the code


Define XML$ = "<window id='#PB_Any' name='test' text='Align_Element() Test' minwidth='400' minheight='200' width='600' height='400' flags='#PB_Window_ScreenCentered | #PB_Window_SystemMenu | #PB_Window_SizeGadget'>" + LF$ +
              "  <gridbox columns='7' colexpand='yes' rowexpand='yes' colspacing='0' rowspacing='0'>" + LF$ +
                    ButtonRow$ + LF$ + Button$ + LF$ +
                      
                    Align_Element("<text text='top, left'/>"           , "    ", "top, left"  )    + Button$ + LF$ + 
                    Align_Element("<text text='top, center'/>"         , "    ", "top, center")    + Button$ + LF$ + 
                    Align_Element("<text text='top, right'/>"          , "    ", "top, right" )    + Button$ + LF$ + 
                                                                                               
                    ButtonRow$ + LF$ + 
                                     
                    Align_Element("<button text='left, center'/>"      , "    ", "left, center" , 0, 1, 2)     + Button$ + LF$ +
                    Align_Element("<button text='center'/>"            , "    ", "center"       , 0, 3, 2)     + Button$ + LF$ + 
                    Align_Element("<button text='right, center'/>"     , "    ", "right, center", 0, 1, 2)     + Button$ + LF$ + Button$ + LF$ + 
                                                                                               
                    ButtonRow$ + LF$ + Button$ + LF$ + 
                                     
                    Align_Element("<checkbox text='bottom, left'/>"    , "    ", "bottom, left"   ,  5)        + Button$ + LF$ +      ; the last 3 Gadgets are with a margin of 5 pixels
                    Align_Element("<checkbox text='bottom, center'/>"  , "    ", "bottom, center" , 15, 1, 2)  + Button$ + LF$ + 
                    Align_Element("<checkbox text='bottom, right'/>"   , "    ", "bottom, right"  , 5)         + Button$ + LF$ + 
                                                                                                   
              "     <button colspan='3'/>" + LF$ +
              "     <button colspan='3'/>" + LF$ + 
              "   </gridbox>" + 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")
      
    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