From 036dc883b49ed96762dcb90716fd94caa2c49256 Mon Sep 17 00:00:00 2001 From: Renaud de Villemeur Date: Fri, 17 May 2024 12:36:51 -0400 Subject: [PATCH 1/2] detailed explanantion on proportional layout --- Chapters/bloc/figures/proportionalLayout.png | Bin 0 -> 10974 bytes Chapters/bloc/layout.md | 153 +++++++++++++++---- 2 files changed, 125 insertions(+), 28 deletions(-) create mode 100644 Chapters/bloc/figures/proportionalLayout.png diff --git a/Chapters/bloc/figures/proportionalLayout.png b/Chapters/bloc/figures/proportionalLayout.png new file mode 100644 index 0000000000000000000000000000000000000000..8f6159367bb60ee31858a121ad294d244aac88ca GIT binary patch literal 10974 zcmeAS@N?(olHy`uVBq!ia0y~yVA;&Tz}(Kk1{Aq-jxiiaF%}28J29*~C-V}>VM%xN zb!1@J*w6hZkrl}2EbxddW?&Fg1z|?dAe9e5L7@`Yh?3y^w370~qErU=qSVy9;*9)~ zxKIwD7OhZE7srr_xVJYpp8obc^4LdqtB4l1h0d(T(Ix>em)(8!B}|IVLxe;@7Y zTi$Q~?*}8$4Gg??vYYEZO`dPJ@B7~WHGBU5(+7zr%zgg$RpsGdC1-v;x(}a^Pv8HizJK|0c97JX&wFBR^COPwfH>ET(?C`P z9G(FR0ten?F_5TfPb7%CQnA?Z_4#@K9)2|Uzt0x&@@G%g%Qs963=jIur8dXe?ydUC z-@rQW{0eb9W(J0W4nuAWurUSmM_Hp`08A01>0mSrfW^vaIv5QDQ1vpJ4o1U(_UT~7 z_mkrD6iU%$S~`^W!yvQ%5_K-4jv1^4#-IKu>NBr$!f5d=zJnw@%viA!>GL)|eQ z&q+&klEnf}%wYXuoaQ-6B^4;_1a!oFL+?o{nx|*5iWsFa{_TmJq~aL~6rNzn{UZGg zkaG$s+}acAV4plq#WQG{A-6`#8Kz&7n}Jqu0tzc8i(NQBL)CNAlu@fj18_81jOMG+ z(qgo@9j!!0tH#l`#b}FZw8=TzkRI(GjP|cadyS*r?$N=7(IJx2F{aUxv(cf)(E(Lj zjY!|yu|2N(_x<|+AHU82_xSPK?f;n*rf$FY>;3fm_3Po|;O6h{Ubp)(|9)M~hx7Gc zemrQlXN-7yxBUORr{C{q1G}yF-~apa@yoq<+j;+f=`%9?;NAOcxqaQ9eV&YKzP!4+ z8e$f3ZGv6%Jo&Em^^9wPBjUid5C&Z#>)uaXJ71 literal 0 HcmV?d00001 diff --git a/Chapters/bloc/layout.md b/Chapters/bloc/layout.md index 9d80aed..cdbaf06 100644 --- a/Chapters/bloc/layout.md +++ b/Chapters/bloc/layout.md @@ -226,7 +226,22 @@ container for other sub-elements, apply `BlLinearLayout` strategy, but positions itself on its parent using the *frame* constraint. ```smalltalk -first := BlElement new layout: BlLinearLayout horizontal alignCenter; background: Color red; constraintsDo: [ :c | c vertical fitContent. c horizontal fitContent. c frame horizontal alignCenter. c frame vertical alignCenter ]. second := BlElement new background: Color blue; layout: BlFrameLayout new; constraintsDo: [ :c | c vertical matchParent. c horizontal matchParent ]; addChild: first. second openInSpace +first := BlElement new + layout: BlLinearLayout horizontal alignCenter; + background: Color red; + constraintsDo: [ :c | + c vertical fitContent. + c horizontal fitContent. + c frame horizontal alignCenter. + c frame vertical alignCenter ]. +second := BlElement new + background: Color blue; + layout: BlFrameLayout new; + constraintsDo: [ :c | + c vertical matchParent. + c horizontal matchParent ]; + addChild: first. +second openInSpace ``` SD: I do not see it. @@ -239,7 +254,20 @@ layout strategy, and whose side will match space available in parent element. (see Figure *@matchplinear@*). ```smalltalk -e := BlElement new. e layout: BlLinearLayout horizontal alignCenter; background: Color green; constraintsDo: [ :c | c horizontal matchParent. c vertical matchParent ]. e2 := BlElement new. e2 background: Color red. e addChild: e2. e3 := BlElement new. e3 background: Color white. e addChild: e3. e openInSpace +e := BlElement new. +e + layout: BlLinearLayout horizontal alignCenter; + background: Color green; + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]. +e2 := BlElement new. +e2 background: Color red. +e addChild: e2. +e3 := BlElement new. +e3 background: Color white. +e addChild: e3. +e openInSpace ``` ![A parent matching its parent and its children managed linearly.](figures/matchplinear.png width=40&label=matchplinear) @@ -749,46 +777,115 @@ taking into account fractions defined in the constraints. `BlProportionalLayout new` +This layout will *place* and *size* your element base on a proportion of parent +element. The size of your parent element is ultimately defined by its *width* and +*height*. Your chilrend element will define a percentage of this witdth and +height to place themselves, and determine their onw size. By default, your +element will use the full space of its parent. + +Those percentage are define against sides of your parent element, with default +value : + +- left :=0 +- right :=1 +- top :=0 +- bottom :=1 + +The default value for +Let's look at a few example to understand it: + +Here, our element is placed in from to top-left corner, and goes down +to 25% of parent size (right and bottom parameter). We use the default value of 0 +for top and left. + +```smalltalk + constraintsDo: [ :c | + c proportional horizontal right: 0.25. + c proportional vertical bottom: 0.25 ]; +``` + +In this example, our element is placed at 25% from top-left corner, +and goes down to 75% of parent size. You may notice that you can use +both decimal and percent notation to express your element size and position. + +```smalltalk + constraintsDo: [ :c | + c proportional horizontal left: 0.25; right: 0.75. + c proportional vertical top: 0.25; bottom: 75 percent ]; +``` + +In our last example, our element is place at 75% from top-left corner, +and use remaining space (default for right and bottom is 100%) + +```smalltalk + constraintsDo: [ :c | + c proportional horizontal left: 0.75. + c proportional vertical top: 0.75]; +``` + #### children constraints * horizontal -- left -- right + - left + - right * vertical -- bottom -- top + - bottom + - top #### example +Full example with all elements placed: + ```smalltalk -| aContainer childA childB | +| aContainer childA childB childC | childA := BlElement new - id: #childA; - background: Color red; - constraintsDo: [ :c | - c proportional horizontal rightFraction: 0.5 ]; - yourself. + id: #childA; + background: Color red; + constraintsDo: [ :c | + c proportional horizontal + right: 0.25. + c proportional vertical + bottom: 0.25 ]; + yourself. childB := BlElement new - id: #childB; - background: Color green; - constraintsDo: [ :c | - c proportional horizontal leftFraction: 0.5 ]; - yourself. + id: #childB; + background: Color green; + constraintsDo: [ :c | + c proportional horizontal + left: 0.25; + right: 0.75. + c proportional vertical + top: 0.25; + bottom: 75 percent ]; + yourself. + +childC := BlElement new + id: #child; + background: Color yellow; + constraintsDo: [ :c | + c proportional horizontal + left: 0.75. + c proportional vertical + top: 0.75]; + yourself. aContainer := BlElement new - id: #container; - background: Color blue; - layout: BlProportionalLayout new; - size: 100 @ 100; - addChild: childA; - addChild: childB; - constraintsDo: [ :c | - c horizontal matchParent. - c vertical matchParent ]; - padding: (BlInsets all: 5); - yourself. + id: #container; + background: Color blue; + layout: BlProportionalLayout new; + addChildren: { + childA. + childB. + childC }; + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + padding: (BlInsets all: 5); + yourself. aContainer openInNewSpace. ``` + +![Frame layout](figures/proportionalLayout.png) \ No newline at end of file From 117fc5f1967496f01089d63858884662b4659f22 Mon Sep 17 00:00:00 2001 From: Renaud de Villemeur Date: Fri, 17 May 2024 13:22:59 -0400 Subject: [PATCH 2/2] update code example formating for proportional layout --- Chapters/bloc/layout.md | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/Chapters/bloc/layout.md b/Chapters/bloc/layout.md index cdbaf06..17501ec 100644 --- a/Chapters/bloc/layout.md +++ b/Chapters/bloc/layout.md @@ -840,49 +840,31 @@ Full example with all elements placed: ```smalltalk | aContainer childA childB childC | childA := BlElement new - id: #childA; background: Color red; - constraintsDo: [ :c | - c proportional horizontal - right: 0.25. - c proportional vertical - bottom: 0.25 ]; + constraintsDo: [ :c | c proportional horizontal right: 0.25. + c proportional vertical bottom: 0.25 ]; yourself. childB := BlElement new - id: #childB; background: Color green; constraintsDo: [ :c | - c proportional horizontal - left: 0.25; - right: 0.75. - c proportional vertical - top: 0.25; - bottom: 75 percent ]; + c proportional horizontal left: 0.25; right: 0.75. + c proportional vertical top: 0.25; bottom: 75 percent ]; yourself. childC := BlElement new - id: #child; background: Color yellow; - constraintsDo: [ :c | - c proportional horizontal - left: 0.75. - c proportional vertical - top: 0.75]; + constraintsDo: [ :c | c proportional horizontal left: 0.75. + c proportional vertical top: 0.75]; yourself. aContainer := BlElement new - id: #container; background: Color blue; layout: BlProportionalLayout new; - addChildren: { - childA. - childB. - childC }; + addChildren: { childA. childB. childC }; constraintsDo: [ :c | c horizontal matchParent. c vertical matchParent ]; - padding: (BlInsets all: 5); yourself. aContainer openInNewSpace.