SplitterGadget with more than two gadgets

[PB]

I've been trying with no luck to use a SplitterGadget with more than one
gadget. For example, a ListIconGadget at top-left, an EditorGadget next
to it at top-right, a SplitterGadget underneath those, and a PanelGadget
underneath that. The aim is that when I move the SplitterGadget down,
the ListIconGadget and EditorGadget resize vertically together where the
PanelGadget was. I won't be moving the PanelGadget up, I just want the
user to be able to drag the splitter down to see more of those top two
gadgets when desired (never less of them).

But the syntax for the SplitterGadget allows only two gadgets to be
specified, so in my case, ListIconGadget and PanelGadget, leaving the
EditorGadget out. How would you approach this problem? No code
is necessary; just the theory and I can do the rest.

[milan1612]

2 SplitterGadgets, one of them containing the other one and another Gadget
(If I understood you correctly)

[Fluid Byte]

Dunno if I interpreted it correctly but maybe like this?

Code: Select all

OpenWindow(0,0,0,400,300,"void",$CC0001)
CreateGadgetList(WindowID(0))
ListIconGadget(0,0,0,0,0,"Name",250)
EditorGadget(1,0,0,0,0)
SplitterGadget(2,0,0,0,0,0,1,#PB_Splitter_Vertical)
PanelGadget(3,0,0,0,0)
CloseGadgetList()
SplitterGadget(4,0,0,0,0,2,3)

For i=1 To 50 : AddGadgetItem(0,-1,"ListIcon Item #" + Str(i)) : Next

AddGadgetItem(3,-1,"tab1") : AddGadgetItem(3,-1,"tab2") : AddGadgetItem(3,-1,"tab3")

Repeat
	EventID = WaitWindowEvent()

	If EventID = #PB_Event_SizeWindow
		ResizeGadget(4,0,0,WindowWidth(0),WindowHeight(0))
	EndIf
Until EventID = #PB_Event_CloseWindow

[Tranquil]

In all other cases I use containers to size them correctly. So I place the splitter between the containers.

[BarryG]

Hi, I wanted to try Fluid Byte's code but it doesn't compile. An error about OpenGadgetList() needing calling again? I don't understand why.

What I am aiming to do is have two ExplorerListGadgets at top, with two EditorGadgets below them (one below each Explorer), so that I can resize the top two against the bottom two. But for me, SplitterGadgets are hard to understand, I'm ashamed to say.

Here's some basic code that shows what I want to achieve:

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

ExplorerListGadget(0,0,0,0,0,"c:\") ; Top left.
ExplorerListGadget(1,0,0,0,0,"c:\temp\") ; Top right.

EditorGadget(2,0,0,0,0) : SetGadgetText(2,"c:\") ; Bottom left.
EditorGadget(3,0,0,0,0) : SetGadgetText(3,"c:\temp\") ; Bottom right.

; How do I split the top two gadgets with the bottom two here?

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow

[skywalk]

Code: Select all

OpenWindow(0,0,0,400,300,"void",$CC0001)
ListIconGadget(0,0,0,0,0,"Name",250)
EditorGadget(1,0,0,0,0)
SplitterGadget(2,0,0,0,0,0,1,#PB_Splitter_Vertical)
PanelGadget(3,0,0,0,0)
AddGadgetItem(3,-1,"tab1")
AddGadgetItem(3,-1,"tab2")
AddGadgetItem(3,-1,"tab3")
CloseGadgetList()
SplitterGadget(4,0,0,0,0,2,3)
For i=1 To 50
  AddGadgetItem(0,-1,"ListIcon Item #" + Str(i))
Next
ResizeGadget(4,0,0,WindowWidth(0),WindowHeight(0))
Repeat
  EventID = WaitWindowEvent()
  If EventID = #PB_Event_SizeWindow
    ResizeGadget(4,0,0,WindowWidth(0),WindowHeight(0))
  EndIf
Until EventID = #PB_Event_CloseWindow

[calixarene]

Here is the code for your reference. There are three splitter gadgets so that you can change the size to whatever you like (no container). This is the easier for your case. I hope this help you as I learn a lot from this forum.

When you use containers with splitter gadgets, remember to resize every gadgets related to the container inside the resize procedures. I found that the containers width and height will change automatically when splitter gadget change size.

Code: Select all

Global WindowMain
Global ExplorerListLeft, EditorLeft, ExplorerListRight, EditorRight, SplitterLeft, SplitterRight, SplitterMain

Declare ResizeGadgetsWindowMain()

Procedure OpenWindowMain(x = 0, y = 0, width = 750, height = 505)
  WindowMain = OpenWindow(#PB_Any, x, y, width, height, "", #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
  ExplorerListLeft = ExplorerListGadget(#PB_Any, 15, 10, 300, 232, "")
  EditorLeft = EditorGadget(#PB_Any, 15, 251, 300, 239)
  ExplorerListRight = ExplorerListGadget(#PB_Any, 324, 10, 411, 232, "")
  EditorRight = EditorGadget(#PB_Any, 324, 251, 411, 239)
  SplitterLeft = SplitterGadget(#PB_Any, 15, 10, 300, 480, ExplorerListLeft, EditorLeft, #PB_Splitter_Separator)
  SetGadgetState(SplitterLeft, 232)
  SplitterRight = SplitterGadget(#PB_Any, 324, 10, 411, 480, ExplorerListRight, EditorRight, #PB_Splitter_Separator)
  SetGadgetState(SplitterRight, 232)
  SplitterMain = SplitterGadget(#PB_Any, 15, 10, 720, 480, SplitterLeft, SplitterRight, #PB_Splitter_Vertical | #PB_Splitter_Separator)
  SetGadgetState(SplitterMain, 300)
EndProcedure

Procedure ResizeGadgetsWindowMain()
  Protected FormWindowWidth, FormWindowHeight
  FormWindowWidth = WindowWidth(WindowMain)
  FormWindowHeight = WindowHeight(WindowMain)
  ResizeGadget(SplitterMain, 15,10, FormWindowWidth -15, FormWindowHeight -10) ; This is the main splitter so it must be resized
EndProcedure

Procedure WindowMain_Events(event)
  Select event
    Case #PB_Event_SizeWindow
      ResizeGadgetsWindowMain()
    Case #PB_Event_CloseWindow
      ProcedureReturn #False

    Case #PB_Event_Menu
      Select EventMenu()
      EndSelect

    Case #PB_Event_Gadget
      Select EventGadget()
      EndSelect
  EndSelect
  ProcedureReturn #True
EndProcedure

Define EventID, KeepRunning
OpenWindowMain()

If WindowMain
  Repeat
    EventID = WaitWindowEvent(100)
    KeepRunning = WindowMain_Events(EventID)
  Until KeepRunning =#False  
EndIf

[BarryG]

Hi all. Just trying to adapt the example above to show 4 gadgets in the corners of a window, with the top two being separated by the the bottom two with a SplitterGadget(). Since the SplitterGadget() can only use 2 gadgets, I tried putting the top two and bottom two into ContainerGadgets(), but nothing appears in the window at all. What am I doing wrong?

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

ContainerGadget(0,0,0,400,150)
ExplorerListGadget(1,0,0,100,100,"c:\") ; Top left.
ExplorerListGadget(2,200,0,100,100,"c:\temp\") ; Top right.
CloseGadgetList()

ContainerGadget(3,0,150,400,150)
EditorGadget(4,0,150,100,100) : SetGadgetText(2,"c:\") ; Bottom left.
EditorGadget(5,200,150,100,100) : SetGadgetText(3,"c:\temp\") ; Bottom right.
CloseGadgetList()

SplitterGadget(6,0,150,400,5,0,3,#PB_Splitter_Separator) ; Separate the top two gadgets from the bottom two.

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow

[jacdelad]

Just a quick look, not at my computer now: The height of your splitter gadget ist 5, which is not much (5 pixels...). You have to define the whole area which is covered by both gadgets of the splitter gadget.

[BarryG]

Oops, I thought the 5 was the bar height. My bad.

Here's a better version, but the 4 gadgets don't resize to fill the space according to where the splitter bar is? Like the example in the manual does.

Also, there's terrible flickering when moving the bar despite using SmartWindowRefresh().

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

SmartWindowRefresh(0,1)

ContainerGadget(0,0,0,400,150)
ExplorerListGadget(1,0,0,200,150,"c:\") ; Top left.
ExplorerListGadget(2,200,0,200,150,"c:\temp\") ; Top right.
CloseGadgetList()

ContainerGadget(3,0,150,400,150)
EditorGadget(4,0,0,200,150) : SetGadgetText(4,"c:\") ; Bottom left.
EditorGadget(5,200,0,200,150) : SetGadgetText(5,"c:\temp\") ; Bottom right.
CloseGadgetList()

SplitterGadget(6,0,0,400,300,0,3,#PB_Splitter_Separator) ; Separate the top two gadgets from the bottom two.

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow

[TassyJim]

Code: Select all

OpenWindow(0,0,0,400,300,"SplitterGadget",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)

SmartWindowRefresh(0,1)

ContainerGadget(0,0,0,400,300)
ExplorerListGadget(1,0,0,200,300,"c:\") ; Top left.
ExplorerListGadget(2,200,0,200,300,"c:\temp\") ; Top right.
SplitterGadget(7,0,0,400,300,1,2,#PB_Splitter_Vertical)
CloseGadgetList()

ContainerGadget(3,0,150,400,300)
EditorGadget(4,0,0,200,300) : SetGadgetText(4,"c:\") ; Bottom left.
EditorGadget(5,200,0,200,300) : SetGadgetText(5,"c:\temp\") ; Bottom right.
SplitterGadget(8,0,0,400,300,4,5,#PB_Splitter_Vertical)

CloseGadgetList()

SplitterGadget(6,0,0,400,300,0,3,#PB_Splitter_Separator) ; Separate the top two gadgets from the bottom two.

Repeat
  EventID = WaitWindowEvent()
Until EventID = #PB_Event_CloseWindow

I wonder how far you can go?

Jim

[chi]

Code: Select all

Procedure WinResize()
  ResizeGadget(6, #PB_Ignore, #PB_Ignore, WindowWidth(0)-10, WindowHeight(0)-10)
EndProcedure

OpenWindow(0, 0, 0, 400, 400, "Splitter", #PB_Window_SystemMenu|#PB_Window_MinimizeGadget|#PB_Window_MaximizeGadget|#PB_Window_SizeGadget|#PB_Window_ScreenCentered|#PB_Window_Invisible)

ExplorerListGadget(0, 0, 0, 0, 0, "c:\")
ExplorerListGadget(1, 0, 0, 0, 0, "c:\temp\")

EditorGadget(2, 0, 0, 0, 0) : SetGadgetText(2, "c:\")
EditorGadget(3, 0, 0, 0, 0) : SetGadgetText(3, "c:\temp\")

SplitterGadget(4, 0,   0, 400, 200, 0, 1, #PB_Splitter_Vertical)
SplitterGadget(5, 0, 200, 400, 200, 2, 3, #PB_Splitter_Vertical)

SplitterGadget(6, 5, 5, 390, 390, 4, 5, #PB_Splitter_Separator)
SetGadgetState(6, 250)
BindEvent(#PB_Event_SizeWindow, @WinResize())

HideWindow(0, #False)
While WaitWindowEvent() <> #PB_Event_CloseWindow : Wend

[BarryG]

Hi TassyJim and Chi. Good examples but they both flicker with glitches like crazy, and you've added vertical splitters between the top two and bottom two gadgets? My code doesn't want that. Just one splitter in the middle of the top two and the bottom two. The glitching is something I can't figure out how to stop. It looks so bad:



I was going to try PureLust's "DeFlicker" module but that seems to be used for a gadget resize, and in my code none of my gadgets actually get resized with the "ResizeGadget()" command, so I can't use that?

[RASHAD]

Play around with CanvasGadget it may help

Code: Select all

Procedure sizeCB()
  ResizeGadget(0,#PB_Ignore,#PB_Ignore,WindowWidth(0)-20,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeGadget(1,#PB_Ignore,#PB_Ignore,#PB_Ignore,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeGadget(2,#PB_Ignore,#PB_Ignore,#PB_Ignore,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeGadget(3,#PB_Ignore,#PB_Ignore,WindowWidth(0)-340,WindowHeight(0,#PB_Window_InnerCoordinate)-40)
  ResizeImage(0,WindowWidth(0),WindowHeight(0))       
  SetGadgetAttribute(0,#PB_Canvas_Image ,ImageID(0)) 
EndProcedure

sgcolor = $67DBF7

flags = #PB_Window_Invisible | #PB_Window_SystemMenu| #PB_Window_MaximizeGadget| #PB_Window_MinimizeGadget| #PB_Window_ScreenCentered | #PB_Window_SizeGadget
OpenWindow(0,0,0,800,600,"Test",Flags)

If CreateStatusBar(0, WindowID(0))
  AddStatusBarField(100)
  AddStatusBarField(50)
  AddStatusBarField(100)
EndIf

StatusBarText(0, 0, "Area 1")
StatusBarText(0, 1, "Area 2", #PB_StatusBar_BorderLess)
StatusBarText(0, 2, "Area 3", #PB_StatusBar_Right | #PB_StatusBar_Raised) 

CreateImage(0,800,600,24,sgcolor)
CanvasGadget(0,10,10,780,560,#PB_Canvas_Container)
SetGadgetAttribute(0,#PB_Canvas_Image ,ImageID(0))

ListIconGadget(1,0,0,188,560,"Column 0",100,#PB_ListIcon_FullRowSelect|#PB_ListIcon_GridLines)

ExplorerListGadget(2,192,0,188,560,"c:\")

ExplorerListGadget(3,384,0,396,560,"c:\")

CloseGadgetList()
While WindowEvent() : Wend 
BindEvent(#PB_Event_SizeWindow,@sizeCB()) 
HideWindow(0,0)

Repeat
  
  Select WaitWindowEvent()
      
    Case #PB_Event_CloseWindow
      Quit = 1
      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case 0
          Select EventType()
            Case #PB_EventType_MouseEnter
              SetGadgetAttribute(0,#PB_Canvas_Cursor,#PB_Cursor_LeftRight)
              
            Case #PB_EventType_MouseLeave
              SetGadgetAttribute(0,#PB_Canvas_Cursor,#PB_Cursor_Default)
              
            Case #PB_EventType_LeftButtonDown
              cx = GetGadgetAttribute(0,#PB_Canvas_MouseX)               
              Downflag = 1
              If cx > GadgetX(2)
                split = 2
                ww = GadgetWidth(2)+GadgetWidth(3)+4
              Else
                split = 1
                ww = GadgetWidth(1)+GadgetWidth(2)+4
              EndIf             
              
            Case #PB_EventType_MouseMove
              If Downflag = 1
                cx = GetGadgetAttribute(0,#PB_Canvas_MouseX)
                If (cx < GadgetX(3)-12 And split = 1) Or (cx > GadgetX(2)+4 And split = 2)
                  If split = 1
                    ResizeGadget(1,#PB_Ignore,#PB_Ignore,cx,#PB_Ignore)                      
                    ResizeGadget(2,cx+4,#PB_Ignore,ww-cx-4,#PB_Ignore)
                  Else
                    ResizeGadget(2,#PB_Ignore,#PB_Ignore,cx-GadgetWidth(1)-4,#PB_Ignore) 
                    While WindowEvent() : Wend  
                    ResizeGadget(3,cx+4,#PB_Ignore,ww-GadgetWidth(2)-4,#PB_Ignore)                                        
                  EndIf
                EndIf
              EndIf
              
            Case #PB_EventType_LeftButtonUp
              Downflag = 0                          
              ;ResizeGadget(3,#PB_Ignore,#PB_Ignore,#PB_Ignore,#PB_Ignore)
              
          EndSelect                   
      EndSelect         
      
  EndSelect 
  
Until Quit = 1
End

[BarryG]

Doesn't help, Rashad. See below. I also wanted top/bottom gadgets like my example, not side by side.