Stacks and Flows

[shoes]

Stacks and Flows

[wasnotrice]

@ashbb So far we have implemented flow using RowLayout. It works well so far. Look at SwtShoes::Button#move where I experimented with removing an element from a layout so the other elements can reflow. I think RowLayout should also work for stack.

Try running samples/simple-move.rb in shoes4 and purple shoes to see the effect.

The tricky thing is that Swt does not like you to move widgets from one composite to another, so we have to make a new widget.

What do you think?

[pjfitzgibbons]

Umm, a Flow is row-fill "with wrapping"
A Slot is column-fill, "with scrolling"

Immediately, these are inconsistent side behaviours (wrapping/scrolling),
though I think I understand the motivation, which is to produce a view that
allows layout, responds intuitively to window-width change, and alternately
allows a repeated layout (tables and such) to produce a scrollbar.

So a Slot is column fill. Which SWT Layout for that behaviour?

Peter Fitzgibbons
[phone]
Email: [email protected]
IM GTalk: peter.fitzgibbons
IM AOL: [email protected]

On Thu, May 31, 2012 at 6:54 AM, ashbb <
[email protected]

wrote:

Stacks and Flows are boxes used to lay out Elements.

Slots:

• Stack, Flow

Elements:

• Button, EditLine, EditBox, ListBox, Progress, Check, Radio
• Background, Border, Image, Shapes, TextBlocks, Animate, Video

Shapes:

• Oval, Rect, Line, Shape, Star, Arrow

TextBlocks

• Banner, Title, Subtitle, Tagline, Caption, Para, Inscription

---

Well, in this thread, let's talk about

• lay out Elements in a Slot
• a Slot contains other Slots
• lay out all automatically when a window is resized
• move Slots
• scroll up/down in a Slot

At first, we have to consider about

• how to implement each Element with any SWT class
• how to lay out Elements with any SWT layout class

If we will not find useful SWT classes, we have to write our layouter by
ourselves as same as Red, Green and Purple. It's not so easy in practice...

Okay now, I have a first question:

• Can we use SWT Composit with RowLayout as Shoes Slot?

If yes, that's fantastic!

---

Reply to this email directly or view it on GitHub:
#40

[wasnotrice]

@pjfitzgibbons I think RowLayout will also work for stack, although I haven't tried it yet :)

from Swt Layout Javadoc for RowLayout

Instances of this class determine the size and position of the children of a Composite by placing them either in horizontal rows or vertical columns within the parent Composite.

RowLayout aligns all controls in one row if the type is set to horizontal, and one column if it is set to vertical. It has the ability to wrap, and provides configurable margins and spacing. RowLayout has a number of configuration fields. In addition, the height and width of each control in a RowLayout can be specified by setting a RowData object into the control using setLayoutData ().

[pjfitzgibbons]

Here's where I couldn't wrap my head around things :

What happens in cases of :
Shoes.app do #default flow container
flow do
slot do
end
end
end

Shoes.app do
slot do
flow do
end
end
end

Peter Fitzgibbons
[phone]
Email: [email protected]
IM GTalk: peter.fitzgibbons
IM AOL: [email protected]

On Thu, May 31, 2012 at 9:59 AM, Eric Watson <
[email protected]

wrote:

@pjfitzgibbons I think RowLayout will also work for stack, although I
haven't tried it yet :)

from Swt Layout Javadoc
for RowLayout

Instances of this class determine the size and position of the children
of a Composite by placing them either in horizontal rows or vertical
columns within the parent Composite.

RowLayout aligns all controls in one row if the type is set to
horizontal, and one column if it is set to vertical. It has the ability to
wrap, and provides configurable margins and spacing. RowLayout has a number
of configuration fields. In addition, the height and width of each control
in a RowLayout can be specified by setting a RowData object into the
control using setLayoutData ().

---

Reply to this email directly or view it on GitHub:
#40 (comment)

[wasnotrice]

@pjfitzgibbons just for clarity, I think you mean "stack" not "slot":

Shoes.app do  #default flow container
  flow do
    stack do
    end
  end
end

Shoes.app do
  stack do
    flow do
    end
  end
end

So a Flow is an Swt composite with RowLayout(horizontal). A Stack is an Swt composite with RowLayout(vertical). When they are nested, it's just that one composite holds the other. Again, I haven't tried it yet, but as I read it, these layouts are intended to produce exactly what we want, so we should be able to use them normally.

[pjfitzgibbons]

Yes, you're correct

Peter Fitzgibbons
[phone]
Email: [email protected]
IM GTalk: peter.fitzgibbons
IM AOL: [email protected]

On Thu, May 31, 2012 at 10:09 AM, Eric Watson <
[email protected]

wrote:

@pjfitzgibbons just for clarity, I think you mean "stack" not "slot":

Shoes.app do  #default flow container
 flow do
    stack do
    end
 end
end

Shoes.app do
  stack do
    flow do
   end
 end
end

So a Flow is an Swt composite with RowLayout(horizontal). A Stack is
an Swt composite with RowLayout(vertical). When they are nested, it's just
that one composite holds the other. Again, I haven't tried it yet, but as I
read it, these layouts are intended to produce exactly what we want, so we
should be able to use them normally.

---

Reply to this email directly or view it on GitHub:
#40 (comment)

[ashbb]

Try out the following snippet. It works. But not enought... :(
Look at line 15. I set the Composite's size explicitly. But it is not wrapped to the next row with the width.
Umm,... what am I doing wrong? Do you have a solution?

require 'java'
require 'swt'

display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 600, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

hlayout = Swt::Layout::RowLayout.new Swt::SWT::HORIZONTAL
vlayout = Swt::Layout::RowLayout.new Swt::SWT::VERTICAL

20.times do
  cs = Swt::Widgets::Composite.new shell, Swt::SWT::TRANSPARENT
  cs.setSize 100, 200 
  cs.setLayout [hlayout, vlayout].sample

  [1, 2, 3, 4, 5].sample.times do |i|
    b = Swt::Widgets::Button.new cs, Swt::SWT::PUSH
    b.setText i.to_s
  end
end

shell.open
Swt.event_loop{Swt.display.isDisposed}

[pjfitzgibbons]

HI Ash,

Your example had a lot going on, which makes it difficult to identify
what behaviour is expected.
I made only the following change, and it seems that the wrapping is then
working as expected... each composite maintains shape and the composites as
groups are wrapped by the shell/main layout. Thoughts?

require 'java'
require 'swt'

display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 600, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

hlayout = Swt::Layout::RowLayout.new Swt::SWT::HORIZONTAL
vlayout = Swt::Layout::RowLayout.new Swt::SWT::VERTICAL

20.times do |j|
cs = Swt::Widgets::Composite.new shell, Swt::SWT::TRANSPARENT
cs.setSize 100, 200
cs.setLayout [hlayout, vlayout].sample

• 3.times do |i|*
  b = Swt::Widgets::Button.new cs, Swt::SWT::PUSH
  b.setText "cs:#{j} b:#{i}"
  end
  end

shell.open
Swt.event_loop{Swt.display.isDisposed}

Peter Fitzgibbons
[phone]
Email: [email protected]
IM GTalk: peter.fitzgibbons
IM AOL: [email protected]

On Fri, Jun 1, 2012 at 7:52 AM, ashbb <
[email protected]

wrote:

Try out the following snippet. It works. But not enought... :(
Look at line 15. I set the Composite's size explicitly. But it is not
wrapped to the next row with the width.
Umm,... what am I doing wrong? Do you have a solution?

require 'java'
require 'swt'

display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 600, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

hlayout = Swt::Layout::RowLayout.new Swt::SWT::HORIZONTAL
vlayout = Swt::Layout::RowLayout.new Swt::SWT::VERTICAL

20.times do
 cs = Swt::Widgets::Composite.new shell, Swt::SWT::TRANSPARENT
 cs.setSize 100, 200
 cs.setLayout [hlayout, vlayout].sample

 [1, 2, 3, 4, 5].sample.times do |i|
   b = Swt::Widgets::Button.new cs, Swt::SWT::PUSH
   b.setText i.to_s
 end
end

shell.open
Swt.event_loop{Swt.display.isDisposed}

---

Reply to this email directly or view it on GitHub:
#40 (comment)

[wasnotrice]

@ashbb try this version

I only changed

  cs.setSize 100, 200 

to

 cs.setLayoutData Swt::Layout::RowData.new(100, 200)

@pjfitzgibbons also this version has background colors so you and I can see the composites better :)

[pjfitzgibbons]

HI Eric, Ash,

@wasnotrice, yes I see clearly now, good insight with setting the Composite
background. I also noticed that setting hte background made it much more
obivious how the wrapping is occurring in @ashbb original version.

@ashbb, does this fit your expectations of flow and wrapping?

Peter Fitzgibbons
[phone]
Email: [email protected]
IM GTalk: peter.fitzgibbons
IM AOL: [email protected]

On Fri, Jun 1, 2012 at 9:42 AM, Eric Watson <
[email protected]

wrote:

@ashbb try this version

I only changed

 cs.setSize 100, 200

to

 cs.setLayoutData Swt::Layout::RowData.new(100, 200)

@pjfitzgibbons also this version has background colors so you and I can
see the composites better :)

---

Reply to this email directly or view it on GitHub:
#40 (comment)

[ashbb]

OHHH. Bingo! Thank you for the solution! I didn't know setLayoutData. xx-P Now, I can go one step further. I'm going to try "when Slots are nested".

[ashbb]

I tried "nested slots". Look at the following. It works as @wasnotrice expected. Cool!

require 'java'
require 'swt'

@display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new @display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 700, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

def button cs, n
  n.times do |i|
    b = Swt::Widgets::Button.new cs, Swt::SWT::PUSH
    b.setText "Button#{i}"
  end
end

def flow parent, w, h, &blk
  cs = Swt::Widgets::Composite.new parent, Swt::SWT::NULL
  cs.setLayoutData Swt::Layout::RowData.new(w, h)
  cs.setLayout Swt::Layout::RowLayout.new(Swt::SWT::HORIZONTAL)
  cs.set_background @display.getSystemColor(Swt::SWT::COLOR_RED)
  blk[cs]
end

def stack parent, w, h, &blk
  cs = Swt::Widgets::Composite.new parent, Swt::SWT::NULL
  cs.setLayoutData Swt::Layout::RowData.new(w, h)
  layout = Swt::Layout::RowLayout.new(Swt::SWT::VERTICAL)
  layout.wrap = false
  cs.setLayout layout
  cs.set_background @display.getSystemColor(Swt::SWT::COLOR_BLUE)
  blk[cs]
end

flow shell, 650, 450 do |cs1|
  button cs1, 20
  stack(cs1, 100, 100){|cs2| button cs2, 3}
  button cs1, 5
  3.times{stack(cs1, 100, 160){|cs2| button cs2, 5}}
  stack cs1, 280, 210 do |cs2|
    button cs2, 1
    flow(cs2, 260, 100){|cs3| button cs3, 10}
    button cs2, 1
  end
end

shell.open
Swt.event_loop{Swt.display.isDisposed}

[ashbb]

So far so good. Okay now, I have two more questions.

• How to implement TextBlock elements. What SWT class can we use?
• When I replace Swt::Button objects with the objects which we use as Shoes::Textblock, does the above snippet work as we expect?

[wasnotrice]

@ashbb maybe try StyledText?

[ashbb]

Okay, I tried StyledText. But umm,... the following snippet doesn't show anything... :(

require 'java'
require 'swt'

@display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new @display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 600, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

cs = Swt::Widgets::Composite.new shell, Swt::SWT::TRANSPARENT
cs.setLayoutData Swt::Layout::RowData.new 300, 300
st = Swt::Custom::StyledText.new cs, Swt::SWT::WRAP  # line 12
st.setText 'Hello ' * 20

shell.open
Swt.event_loop{Swt.display.isDisposed}

If I replace cs with shell at line 12, the text appears.
But I think that StyledText seems not good for Shoes::TextBlock.
Rather suitable for Shoes::EditLine?

[wasnotrice]

@ashbb Try giving the Composite a RowLayout (even a button doesn't show up without adding the layout)

[ashbb]

Try giving the Composite a RowLayout

Oh, you are right. After adding cs.setLayout Swt::Layout::RowLayout.new, the text appears. Thanks!

But,... please try the following snippet again.

require 'java'
require 'swt'

@display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new @display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 600, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

def button cs, n
  n.times do |i|
    b = Swt::Widgets::Button.new cs, Swt::SWT::PUSH
    b.setText "Button#{i}"
  end
end

def para cs, str
  st = Swt::Custom::StyledText.new cs, Swt::SWT::WRAP
  st.setText str
end

def flow parent, w, h, &blk
  cs = Swt::Widgets::Composite.new parent, Swt::SWT::NULL
  cs.setLayoutData Swt::Layout::RowData.new(w, h)
  cs.setLayout Swt::Layout::RowLayout.new(Swt::SWT::HORIZONTAL)
  cs.set_background @display.getSystemColor(Swt::SWT::COLOR_RED)
  blk[cs]
end

flow shell, 300, 300 do |cs1|
  button cs1, 8
  para cs1, "hello\n" * 5 
  button cs1, 8
  para cs1, "hello " * 20
  button cs1, 8
end

shell.open
Swt.event_loop{Swt.display.isDisposed}

Umm,... I still don't think that StyledText is good for Shoes::TextBlock.
Because,

• background is NOT transparent
• text is NOT wrapped

Any ideas?

[wasnotrice]

@ashbb for the wrapping, it seems you need to set a RowData again. I added

  st.setLayoutData Swt::Layout::RowData.new(100, 100)

and changed the size of the flow, so I could see everything. Here's the full code:

require 'java'
require 'swt'

@display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new @display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 600, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

def button cs, n
  n.times do |i|
    b = Swt::Widgets::Button.new cs, Swt::SWT::PUSH
    b.setText "Button#{i}"
  end
end

def para cs, str
  st = Swt::Custom::StyledText.new cs, Swt::SWT::WRAP
  st.setLayoutData Swt::Layout::RowData.new(100, 100)
  st.setText str
end

def flow parent, w, h, &blk
  cs = Swt::Widgets::Composite.new parent, Swt::SWT::NULL
  cs.setLayoutData Swt::Layout::RowData.new(w, h)
  cs.setLayout Swt::Layout::RowLayout.new(Swt::SWT::HORIZONTAL)
  cs.set_background @display.getSystemColor(Swt::SWT::COLOR_RED)
  blk[cs]
end

flow shell, 400, 400 do |cs1|
  button cs1, 8
  para cs1, "hello\n" * 5 
  button cs1, 8
  para cs1, "hello " * 20
  button cs1, 8
end

shell.open
Swt.event_loop{Swt.display.isDisposed}

and here's a screenshot:

Don't know about transparent background yet ;)

[wasnotrice]

@ashbb ok, try adding this line to the flow method:

cs.background_mode = Swt::SWT::INHERIT_DEFAULT

full code:

require 'java'
require 'swt'

@display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new @display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 600, 500
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

def button cs, n
  n.times do |i|
    b = Swt::Widgets::Button.new cs, Swt::SWT::PUSH
    b.setText "Button#{i}"
  end
end

def para cs, str
  st = Swt::Custom::StyledText.new cs, Swt::SWT::WRAP
  st.setLayoutData Swt::Layout::RowData.new(100, 100)
  st.setText str
end

def flow parent, w, h, &blk
  cs = Swt::Widgets::Composite.new parent, Swt::SWT::NULL
  cs.setLayoutData Swt::Layout::RowData.new(w, h)
  cs.setLayout Swt::Layout::RowLayout.new(Swt::SWT::HORIZONTAL)
  cs.set_background @display.getSystemColor(Swt::SWT::COLOR_RED)
  cs.background_mode = Swt::SWT::INHERIT_DEFAULT
  blk[cs]
end

flow shell, 400, 400 do |cs1|
  button cs1, 8
  para cs1, "hello\n" * 5 
  button cs1, 8
  para cs1, "hello " * 20
  button cs1, 8
end

shell.open
Swt.event_loop{Swt.display.isDisposed}

[ashbb]

OHHH! Awesome!! Now I agree that StyledText is good for Shoes::TextBlock.

Okay, one last question. ;-)
Try out the following snippet with Red Shoes and Green (or Purple) Shoes.

Shoes.app do
 button 'button1'
 para 'hello ' * 20
 button 'button2'
end

If we use SWT Composit with RowLayout and StyledText, Shoes 4 will run the above snippet as same as Green/Purple, but not same as Red.

Is this okay? or Do we need to find another way?

[wasnotrice]

@ashbb the screenshot above is Red Shoes, right? Purple looks like this:

Since StyledText is a composite, you can also include controls in it. I haven't tried it yet, but maybe that would give the same behavior as Red Shoes. It's even possible that StyledText could serve as the composite element for slots.

I'm not sure that Red Shoes has always the best behavior when it comes to flows--sometimes the layout works unexpectedly. However, the Purple Shoes examples is definitely not what I would expect from a flow (it looks like a stack).

[ashbb]

Since StyledText is a composite, you can also include controls in it. I haven't tried it yet, but maybe that would give the same behavior as Red Shoes. It's even possible that StyledText could serve as the composite element for slots.

Wow, so cool! Could you explain it in more detail?
I'd like to try it. :)

[wasnotrice]

@ashbb in your example above, if you just use a StyledText for the flow, you will see that it works just the same. That's step 1 :)

Step 2, adding other elements to the StyledText looks much more complicated, but check out this Swt example. It seems possible, but we need to experiment ;)

[ashbb]

@wasnotrice OH! You mean:

• implement Shoes::Flow itself with SWT::StyledText instead of SWT::Composite
• embed all contents (i.e. Slots and Elements) in the Flow

Right?
Okay, I'm going to try. :)

[wasnotrice]

@ashbb Yes, that's what I mean...not sure if it will work though :P

[eric]

I don't think I'm the eric you're looking for...

[ashbb]

OMG! I didn't noticed. Sorry, @eric. Edited to @wasnotrice now. :)

[ashbb]

I referred to the example and wrote this snippet.

require 'java'
require 'swt'

module Swt::Graphics
  import org.eclipse.swt.graphics.GlyphMetrics
end

display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 350, 200
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

text = 'Hello ' * 30

st = Swt::Custom::StyledText.new shell, Swt::SWT::WRAP
st.setLayoutData Swt::Layout::RowData.new(300, 150)
st.setLayout Swt::Layout::RowLayout.new
st.set_background display.getSystemColor Swt::SWT::COLOR_RED
st.background_mode = Swt::SWT::INHERIT_DEFAULT
st.setText text

b = Swt::Widgets::Button.new st, Swt::SWT::PUSH
b.setText 'button 1'

shell.open

offset = 90
text = text.insert offset, ' '
st.setText text
sr = Swt::Custom::StyleRange.new
sr.start = offset
sr.length = 1
sr.metrics = Swt::Graphics::GlyphMetrics.new 0, b.getSize.y / 2, b.getSize.x
st.setStyleRange sr
pos = st.getLocationAtOffset offset
b.setLocation pos.x, pos.y

Swt.event_loop{Swt.display.isDisposed}

I confirmed that a StyledText embedded a Button.

But look at line 28-37. In fact, Embed means the following:

• add a dummy space character at the specific offset
• replace the space with a StyleRange object
• set the StyleRange size with a GlyphMetrics object
• move the button to the position of the StyleRange object

We need to do the above calculation in the window resizing. So, we may have to write a bit complex program.

But,... okay now, it's time to conclusion. ;-)

• implement Shoes::Flow with SWT::StyledText
• implement Shoes::Stack with SWT::Composit

Is this okay?

[pjfitzgibbons]

Let's separate the Flow/Stack question from the styled text question.
I'm not sure I understand how this last snippet demonstrated Flow/Stack.

Re: Styled Text - I'd like to see us research other options. One of the
advantages to moving to any other backend was that layout calculations
would no longer be held inside the Shoes framework. { personal_observation
=> "Redshoes window-resize/layout-calculation methods are a trainwreck" }

Shoes On

Peter Fitzgibbons
[phone]
Email: [email protected]
IM GTalk: peter.fitzgibbons
IM AOL: [email protected]

On Thu, Jun 7, 2012 at 7:21 AM, ashbb <
[email protected]

wrote:

I referred to the example
and wrote this snippet.

require 'java'
require 'swt'

module Swt::Graphics
 import org.eclipse.swt.graphics.GlyphMetrics
end

display = Swt::Widgets::Display.new
shell = Swt::Widgets::Shell.new display, Swt::SWT::SHELL_TRIM
shell.setLayout Swt::Layout::RowLayout.new
shell.setSize 350, 200
shell.addListener Swt::SWT::Close, proc{Swt.display.dispose}

text = 'Hello ' * 30

st = Swt::Custom::StyledText.new shell, Swt::SWT::WRAP
st.setLayoutData Swt::Layout::RowData.new(300, 150)
st.setLayout Swt::Layout::RowLayout.new
st.set_background display.getSystemColor Swt::SWT::COLOR_RED
st.background_mode = Swt::SWT::INHERIT_DEFAULT
st.setText text

b = Swt::Widgets::Button.new st, Swt::SWT::PUSH
b.setText 'button 1'

shell.open

offset = 90
text = text.insert offset, ' '
st.setText text
sr = Swt::Custom::StyleRange.new
sr.start = offset
sr.length = 1
sr.metrics = Swt::Graphics::GlyphMetrics.new 0, b.getSize.y / 2,
b.getSize.x
st.setStyleRange sr
pos = st.getLocationAtOffset offset
b.setLocation pos.x, pos.y

Swt.event_loop{Swt.display.isDisposed}

I confirmed that a StyledText embedded a Button.

But look at line 28-37. In fact, Embed means the following:

• add a dummy space character at the specific offset
• replace the space with a StyleRange object
• set the StyleRange size with a GlyphMetrics object
• move the button to the position of the StyleRange object

We need to do the above calculation in the window resizing. So, we may
have to write a bit complex program.

But,... okay now, it's time to conclusion. ;-)

• implement Shoes::Flow with SWT::StyledText
• implement Shoes::Stack with SWT::Composit

Is this okay?

---

Reply to this email directly or view it on GitHub:
#40 (comment)

[wasnotrice]

@pjfitzgibbons I agree that the calculations required by StyledText aren't pretty. Swt seems pretty wedded to the idea that components are squares, which doesn't fit well with Shoes's HTML-like flows. Using StyledText like @ashbb demonstrated is the only avenue I have discovered that lets us preserve the behavior of flows. Is there another class we should be looking at?

@ashbb One more question: In your example, the text belongs to the Flow. Can we make the text belong to a Para and still get the layout you achieved?

[pjfitzgibbons]

I think I mihgt have missed something.
That snippet did not resize the red-background container upon window resize.
I think we're talking about how the button maintains its position mid-text
during a re-flow?

I don't have time to look closely... is there a tweak to the script that
will resize the container?

Peter Fitzgibbons
[phone]
Email: [email protected]
IM GTalk: peter.fitzgibbons
IM AOL: [email protected]

On Thu, Jun 7, 2012 at 10:14 AM, Eric Watson <
[email protected]

wrote:

@pjfitzgibbons I agree that the calculations required by StyledText aren't
pretty. Swt seems pretty wedded to the idea that components are squares,
which doesn't fit well with Shoes's HTML-like flows. Using StyledText like
@ashbb demonstrated is the only avenue I have discovered that lets us
preserve the behavior of flows. Is there another class we should be looking
at?

@ashbb One more question: In your example, the text belongs to the Flow.
Can we make the text belong to a Para and still get the layout you achieved?

---

Reply to this email directly or view it on GitHub:
#40 (comment)

[wasnotrice]

I think we're talking about how the button maintains its position mid-text
during a re-flow?

Right now, we are talking about how the buttons flow in with the text, instead of how it looked earlier, when the text had its own rectangular box, and button either appeared beside all of the text, or above/below all of the text. Resizing might be a next step, though.

[ashbb]

@pjfitzgibbons As Eric explained, resizing is an another step. But I already have an experience in Purple Shoes. I think it's okay to implement resiging as same as Purple Shoes.

@wasnotrice Thank you for the explanation! My English is not enough, so your explanation is very helpful for me. :)

@ashbb One more question: In your example, the text belongs to the Flow. Can we make the text belong to a Para and still get the layout you achieved?

Yeah, that is an important point. I think that we have to consider Flow and Stack separately in the class Shoes::Swt::TextBlock like this.

class Shoes::Swt::TextBlock
  def initialize str
    If parent.is_a? Flow
      parent.contents.push self
    else
      st = Swt::Custom::StyledText.new
      st.setText str
    end
  end
end

class Shoes::Swt::Flow
  def initialize &blk
    st = Swt::Custom::StyledText.new
    blk.call
    str = contents.map{|e| e.is_a?(TextBlock) ? e.text : ' '}.join # add a dummy space character at the specific offset
    st.setText str
    contents.each do |e|
     unless e.is_a? TextBlock
       # replace the space with a StyleRange object
       # set the StyleRange size with a GlyphMetrics object
       # move the button to the position of the StyleRange object
     end
    end
  end
end

This is not a complete code, though. Make sense?

[wasnotrice]

Ok, yes that makes sense.

But let's Use our classes to avoid the type checking. Like

parent.append_text_block(self)

Then Flow and Stack have different logic in that method.

[ashbb]

Oh, you are right. That's better. I agree. :)

[PragTob]

As this is just the discussion thread I don't know if it may be closed, but I guess so. Other opinions?

[ashbb]

@PragTob You are right. So closed. ;-)