What’s a Stack?
The Stack
What’s a Flow,To effectively use any GUI toolkit, you have to understand its format supervisor (or geometry manager). In Qt, you have got HBoxes and VBoxes, in Tk you have the Packer and in Shoes you’ve got stacks and flows. It sounds cryptic however study on–it is quite simple.
A stack does simply because the call implies. They stack matters vertically. If you put three buttons in a stack, they’ll be stacked vertically, one on top of every different. If you run out of room within the window, a scrollbar will appear on the proper aspect of the window to let you view all the elements inside the window.
Note that after it is said that the buttons are “inside” of the stack, it simply method they had been created interior of the block handed to the stack approach. In this example, the 3 buttons are created whilst inner of the block handed to the stack method, so they’re “inner” of the stack.
Shoes.app :width => 200, :height => 140 do stack do button “Button 1” button “Button 2” button “Button 3” end end
What’s a Flow
A go with the flow packs things horizontally. If 3 buttons are created inside of a waft, they will seem subsequent to each different.
Shoes.app :width => 400, :height => 140 do flow do button “Button 1” button “Button 2” button “Button 3” end end
The Main Window is a Flow
The primary window is itself a drift. The preceding instance could have been written with out the go with the flow block and the identical element could have passed off: the 3 buttons would were created aspect by means of aspect.
Shoes.app :width => 400, :height => 140 do button “Button 1” button “Button 2” button “Button 3” end
Overflow
There’s one more vital aspect to apprehe about flows. If you run out of space horizontally, Shoes will by no means create a horizontal scroll bar. Instead, Shoes will create the factors decrease down at the “next line” of the application. It’s like when you reach the quit of a line in a phrase processor. The phrase processor doesn’t create a scrollbar and let you hold typing off the page, instead it locations the words on the next line.
Shoes.app :width => 400, :height => 140 do button “Button 1” button “Button 2” button “Button 3” button “Button 4” button “Button 5” button “Button 6” end
What’s a Flow,Dimensions
Until now, we have not given any dimensions whilst growing stacks and waft; they have certainly taken as tons area as they wished. However, dimensions can be given within the equal way dimensions are given to the Shoes.App technique call. This instance creates a glide it really is no longer as extensive as the window and provides buttons to it. A border style is also given to it to visually become aware of where the go with the flow is.
Shoes.app :width => 400, :height => 140 do flow :width => 250 do border red button “Button 1” button “Button 2” button “Button 3” button “Button 4” button “Button 5” button “Button 6” end end
You can see by way of the pink border that the go with the flow would not amplify all the way to the edge of the window. When the 0.33 button goes to be created, there is now not enough room for it so Shoes moves right down to the following line.
Flows of Stacks, Stacks of Flows
Flows and stacks do not simply comprise the visual elements of an software, they also can include different flows and stacks. By combining flows and stacks, you can create complicated layouts of visible elements with relative ease.
If you’re a Web developer, you could be aware this is very just like the CSS layout engine. This is intentional. Shoes is closely prompted by means of the Web. In reality, one of the basic visual elements in Shoes is the “Link” and you could even set up Shoes packages into “pages.”
In this example, a flow containing three stacks is created. This will create a three column layout, with the factors in every column being displayed vertically (due to the fact every column is a stack). The width of the stacks is not a pixel width as in preceding examples, however alternatively 33%. This means each column will take 33% of the to be had horizontal space in the software.
Shoes.app :width => 400, :height => 140 do flow do stack :width => ‘33%’ do button “Button 1” button “Button 2” button “Button 3” button “Button 4” end stack :width => ‘33%’ do para “This is the paragraph ” + “text, it will wrap around ” +[b r] “and fill the column.” end stack :width => ‘33%’ do button “Button 1” button “Button 2” button “Button 3” button “Button 4” end end end