|
| 1 | +package com.codename1.samples; |
| 2 | + |
| 3 | +import com.codename1.junit.FormTest; |
| 4 | +import com.codename1.junit.UITestBase; |
| 5 | +import com.codename1.ui.Component; |
| 6 | +import com.codename1.ui.Container; |
| 7 | +import com.codename1.ui.Label; |
| 8 | +import com.codename1.ui.geom.Dimension; |
| 9 | +import com.codename1.ui.layouts.FlowLayout; |
| 10 | +import com.codename1.ui.plaf.UIManager; |
| 11 | +import static com.codename1.ui.ComponentSelector.$; |
| 12 | +import static org.junit.jupiter.api.Assertions.assertEquals; |
| 13 | +import static com.codename1.ui.Component.*; |
| 14 | + |
| 15 | +public class FlowLayoutRTLSampleTest extends UITestBase { |
| 16 | + |
| 17 | + @FormTest |
| 18 | + public void testFlowLayoutRTL() throws Exception { |
| 19 | + boolean rtl = UIManager.getInstance().getLookAndFeel().isRTL(); |
| 20 | + try { |
| 21 | + UIManager.getInstance().getLookAndFeel().setRTL(false); |
| 22 | + FlowLayout fl = new FlowLayout(); |
| 23 | + Container cnt = new Container(fl); |
| 24 | + cnt.setRTL(false); |
| 25 | + |
| 26 | + Label lbl = new Label("Test"); |
| 27 | + $(cnt, lbl).selectAllStyles().setPadding(0).setMargin(0); |
| 28 | + lbl.setRTL(false); |
| 29 | + cnt.add(lbl); |
| 30 | + int cntWidth = 500; |
| 31 | + int cntHeight = 500; |
| 32 | + int labelPreferredWidth = lbl.getPreferredW(); |
| 33 | + int labelPreferredHeight = lbl.getPreferredH(); |
| 34 | + cnt.setWidth(cntWidth); |
| 35 | + cnt.setHeight(cntHeight); |
| 36 | + |
| 37 | + |
| 38 | + // Start with NO margin, NO padding, default FlowLayout, with single child label also with no padding or margin |
| 39 | + cnt.layoutContainer(); |
| 40 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "Label should be laid out with its preferred width"); |
| 41 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "Label should be laid out with its preferred height"); |
| 42 | + assertEquals(0, lbl.getX(), "Label should have x=0 in default FlowLayout"); |
| 43 | + assertEquals(0, lbl.getY(), "Label should have y=0 in default FlowLayout"); |
| 44 | + |
| 45 | + |
| 46 | + // Now try with Change to RTL. FlowLayout should respect RTL so that left padding/margin/align is interpreted |
| 47 | + // as the opposite. |
| 48 | + cnt.setRTL(true); |
| 49 | + lbl.setRTL(true); |
| 50 | + cnt.setShouldCalcPreferredSize(true); |
| 51 | + cnt.layoutContainer(); |
| 52 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "Label should be laid out with its preferred width in RTL"); |
| 53 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "Label should be laid out with its preferred height in RTL"); |
| 54 | + assertEquals(cntWidth-lbl.getWidth(), lbl.getX(), "Label should be aligned right default FlowLayout in RTL"); |
| 55 | + assertEquals(0, lbl.getY(), "Label should have y=0 in default FlowLayout in RTL"); |
| 56 | + |
| 57 | + |
| 58 | + // Now add left Margin to the label. This should be applied to right side in RTL |
| 59 | + lbl.getStyle().setMarginLeft(10); |
| 60 | + cnt.setShouldCalcPreferredSize(true); |
| 61 | + cnt.layoutContainer(); |
| 62 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "LM10: Label should be laid out with its preferred width in RTL "); |
| 63 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "LM10: Label should be laid out with its preferred height in RTL"); |
| 64 | + assertEquals(cntWidth-lbl.getWidth()-10, lbl.getX(), "LM10: Label should be aligned right default FlowLayout in RTL"); |
| 65 | + assertEquals(0, lbl.getY(), "LM10: Label should have y=0 in default FlowLayout in RTL"); |
| 66 | + |
| 67 | + // Now change to LTR |
| 68 | + cnt.setRTL(false); |
| 69 | + lbl.setRTL(false); |
| 70 | + cnt.setShouldCalcPreferredSize(true); |
| 71 | + cnt.layoutContainer(); |
| 72 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "LM10: Label should be laid out with its preferred width"); |
| 73 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "LM10: Label should be laid out with its preferred height"); |
| 74 | + assertEquals(10, lbl.getX(), "LM10: Label should be aligned left with 10 offset default FlowLayout"); |
| 75 | + assertEquals(0, lbl.getY(), "LM10: Label should have y=0 in default FlowLayout"); |
| 76 | + |
| 77 | + |
| 78 | + // Now add left padding to the container. In RTL this should be applied on right |
| 79 | + cnt.getStyle().setPaddingLeft(12); |
| 80 | + cnt.setShouldCalcPreferredSize(true); |
| 81 | + cnt.layoutContainer(); |
| 82 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "CP12,LM10: Label should be laid out with its preferred width"); |
| 83 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "CP12,LM10: Label should be laid out with its preferred height"); |
| 84 | + assertEquals(22, lbl.getX(), "CP12,LM10: Label should be aligned left with 22 offset default FlowLayout"); |
| 85 | + assertEquals(0, lbl.getY(), "CP12,LM10: Label should have y=0 in default FlowLayout"); |
| 86 | + |
| 87 | + |
| 88 | + // Now change back to RTL |
| 89 | + cnt.setRTL(true); |
| 90 | + lbl.setRTL(true); |
| 91 | + cnt.setShouldCalcPreferredSize(true); |
| 92 | + cnt.layoutContainer(); |
| 93 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "CP12,LM10: Label should be laid out with its preferred width in RTL"); |
| 94 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "CP12,LM10: Label should be laid out with its preferred height in RTL"); |
| 95 | + assertEquals(cntWidth - lbl.getWidth() - 22, lbl.getX(), "CP12,LM10: Label should be aligned right with 22 offset default FlowLayout in RTL"); |
| 96 | + assertEquals(0, lbl.getY(), "CP12,LM10: Label should have y=0 in default FlowLayout in RTL"); |
| 97 | + |
| 98 | + // Now change padding to right. in RTL this is applied to left. This shouldn't affect the layout at all |
| 99 | + cnt.getStyle().setPaddingLeft(0); |
| 100 | + cnt.getStyle().setPaddingRight(12); |
| 101 | + cnt.setShouldCalcPreferredSize(true); |
| 102 | + cnt.layoutContainer(); |
| 103 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "CP12,LM10: Label should be laid out with its preferred width in RTL"); |
| 104 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "CP12,LM10: Label should be laid out with its preferred height in RTL"); |
| 105 | + assertEquals(cntWidth - lbl.getWidth() - 10, lbl.getX(), "CP12,LM10: Label should be aligned left with 22 offset default FlowLayout in RTL"); |
| 106 | + assertEquals(0, lbl.getY(), "CP12,LM10: Label should have y=0 in default FlowLayout in RTL"); |
| 107 | + |
| 108 | + // Now in LTR |
| 109 | + cnt.setRTL(false); |
| 110 | + lbl.setRTL(false); |
| 111 | + cnt.setShouldCalcPreferredSize(true); |
| 112 | + cnt.layoutContainer(); |
| 113 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "CP12,LM10: Label should be laid out with its preferred width"); |
| 114 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "CP12,LM10: Label should be laid out with its preferred height"); |
| 115 | + assertEquals(10, lbl.getX(), "CP12,LM10: Label should be aligned left with 22 offset default FlowLayout"); |
| 116 | + assertEquals(0, lbl.getY(), "CP12,LM10: Label should have y=0 in default FlowLayout"); |
| 117 | + |
| 118 | + // Now add some top padding |
| 119 | + cnt.getStyle().setPaddingTop(5); |
| 120 | + cnt.setShouldCalcPreferredSize(true); |
| 121 | + cnt.layoutContainer(); |
| 122 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "TP5,CP12,LM10: Label should be laid out with its preferred width"); |
| 123 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "TP5,CP12,LM10: Label should be laid out with its preferred height"); |
| 124 | + assertEquals(10, lbl.getX(), "TP5,CP12,LM10: Label should be aligned left with 22 offset default FlowLayout"); |
| 125 | + assertEquals(5, lbl.getY(), "TP5,CP12,LM10: Label should have y=5 in default FlowLayout"); |
| 126 | + |
| 127 | + // And in RTL |
| 128 | + cnt.setRTL(true); |
| 129 | + lbl.setRTL(true); |
| 130 | + cnt.setShouldCalcPreferredSize(true); |
| 131 | + cnt.layoutContainer(); |
| 132 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "TP5,CP12,LM10: Label should be laid out with its preferred width in RTL"); |
| 133 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "TP5,CP12,LM10: Label should be laid out with its preferred height in RTL"); |
| 134 | + assertEquals(cntWidth - 10 - lbl.getWidth(), lbl.getX(), "TP5,CP12,LM10: Label should be aligned right with 10 offset default FlowLayout in RTL"); |
| 135 | + assertEquals(5, lbl.getY(), "TP5,CP12,LM10: Label should have y=5 in default FlowLayout in RTL"); |
| 136 | + |
| 137 | + |
| 138 | + // Now let's test center alignment with a single child. |
| 139 | + // All margins and padding back to ZERO and LTR |
| 140 | + $(cnt, lbl).selectAllStyles().setPadding(0).setMargin(0).setRTL(false); |
| 141 | + fl.setAlign(CENTER); |
| 142 | + cnt.setShouldCalcPreferredSize(true); |
| 143 | + cnt.layoutContainer(); |
| 144 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "LTR,Center: Label should be laid out with its preferred width"); |
| 145 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "LTR Center: Label should be laid out with its preferred height"); |
| 146 | + assertEquals((cntWidth - lbl.getWidth())/2, lbl.getX(), "LTR Center: Label should be aligned center"); |
| 147 | + assertEquals(0, lbl.getY(), "LTR Center: Label should have y=0 in default FlowLayout"); |
| 148 | + |
| 149 | + // Now let's add some margin to the child, and padding to the parent |
| 150 | + // In this case, it should align center in the *inner* bounds of the container (i.e. inside the padding box). |
| 151 | + // But because the child has a left margin of 10, it should actually be 10 to the right of absolute center of this box. |
| 152 | + lbl.getStyle().setMarginLeft(10); |
| 153 | + cnt.getStyle().setPaddingLeft(5); |
| 154 | + cnt.setShouldCalcPreferredSize(true); |
| 155 | + cnt.layoutContainer(); |
| 156 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "LTR,P5,M10, Center: Label should be laid out with its preferred width"); |
| 157 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "LTR,P5,M10, Center: Label should be laid out with its preferred height"); |
| 158 | + assertEquals((cnt.getInnerWidth() - lbl.getOuterWidth() )/2 + 15, lbl.getX(), "LTR,P5,M10, Center: Label should be aligned center"); |
| 159 | + assertEquals(0, lbl.getY(), "LTR,P5,M10, Center: Label should have y=0 in default FlowLayout"); |
| 160 | + |
| 161 | + // Now check RTL |
| 162 | + $(cnt, lbl).setRTL(true); |
| 163 | + cnt.setShouldCalcPreferredSize(true); |
| 164 | + cnt.layoutContainer(); |
| 165 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "RTL,P5,M10, Center: Label should be laid out with its preferred width"); |
| 166 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "RTL,P5,M10, Center: Label should be laid out with its preferred height"); |
| 167 | + // Expected value: We subtract LTR expected value from the container width - which should take us to the right edge |
| 168 | + // of the label - so we additionally subtract the label width to take us to the left edge. |
| 169 | + assertEquals(cntWidth - ((cnt.getInnerWidth() - lbl.getOuterWidth() )/2 + 15) - lbl.getWidth(), lbl.getX(), "RTL,P5,M10, Center: Label should be aligned center"); |
| 170 | + assertEquals(0, lbl.getY(), "RTL,P5,M10, Center: Label should have y=0 in default FlowLayout"); |
| 171 | + |
| 172 | + |
| 173 | + // Now let's test right alignment with a single child. |
| 174 | + fl.setAlign(RIGHT); |
| 175 | + $(cnt, lbl).selectAllStyles().setPadding(0).setMargin(0).setRTL(false); |
| 176 | + cnt.setShouldCalcPreferredSize(true); |
| 177 | + cnt.layoutContainer(); |
| 178 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "LTR,Right: Label should be laid out with its preferred width"); |
| 179 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "LTR,Right: Label should be laid out with its preferred height"); |
| 180 | + assertEquals(cntWidth-lbl.getWidth(), lbl.getX(), "LTR,Right: Label should be aligned right"); |
| 181 | + assertEquals(0, lbl.getY(), "LTR,Right: Label should have y=0 in default FlowLayout"); |
| 182 | + |
| 183 | + // Now in RTL |
| 184 | + $(cnt, lbl).setRTL(true); |
| 185 | + cnt.setShouldCalcPreferredSize(true); |
| 186 | + cnt.layoutContainer(); |
| 187 | + assertEquals(labelPreferredWidth, lbl.getWidth(), "RTL,Right: Label should be laid out with its preferred width"); |
| 188 | + assertEquals(labelPreferredHeight, lbl.getHeight(), "RTL,Right: Label should be laid out with its preferred height"); |
| 189 | + assertEquals(0, lbl.getX(), "RTL,Right: Label should be aligned right"); |
| 190 | + assertEquals(0, lbl.getY(), "RTL,Right: Label should have y=0 in default FlowLayout"); |
| 191 | + |
| 192 | + // Now add some padding to the left. This should have no effect on this test because we are aligned right. |
| 193 | + cnt.getStyle().setPaddingLeft(10); |
| 194 | + cnt.setShouldCalcPreferredSize(true); |
| 195 | + cnt.layoutContainer(); |
| 196 | + assertEquals(0, lbl.getX(), "RTL,P10,Right: Label should be aligned right"); |
| 197 | + |
| 198 | + $(lbl,cnt).setRTL(false); |
| 199 | + cnt.setShouldCalcPreferredSize(true); |
| 200 | + cnt.layoutContainer(); |
| 201 | + assertEquals(cntWidth-lbl.getWidth(), lbl.getX(), "LTR,Right: Label should be aligned right"); |
| 202 | + |
| 203 | + // Now let's test vertical alignment |
| 204 | + $(cnt,lbl).selectAllStyles().setPadding(0).setMargin(0); |
| 205 | + fl.setValign(BOTTOM); |
| 206 | + $(cnt, lbl).setRTL(false); |
| 207 | + cnt.setShouldCalcPreferredSize(true); |
| 208 | + cnt.layoutContainer(); |
| 209 | + assertEquals(cntHeight-lbl.getHeight(), lbl.getY(), "Should be aligned bottom"); |
| 210 | + |
| 211 | + // RTL should have no effect on the vertical alignment |
| 212 | + $(cnt, lbl).setRTL(true); |
| 213 | + cnt.setShouldCalcPreferredSize(true); |
| 214 | + cnt.layoutContainer(); |
| 215 | + assertEquals(cntHeight-lbl.getHeight(), lbl.getY(), "Should be aligned bottom"); |
| 216 | + |
| 217 | + //Add some padding to the bottom |
| 218 | + cnt.getStyle().setPaddingBottom(10); |
| 219 | + cnt.setShouldCalcPreferredSize(true); |
| 220 | + cnt.layoutContainer(); |
| 221 | + assertEquals(cntHeight-lbl.getHeight() - 10, lbl.getY(), "Should be aligned bottom"); |
| 222 | + |
| 223 | + // Add bottom margin to label. This should effectively move it up. |
| 224 | + lbl.getStyle().setMarginBottom(12); |
| 225 | + cnt.setShouldCalcPreferredSize(true); |
| 226 | + cnt.layoutContainer(); |
| 227 | + assertEquals(cntHeight-lbl.getHeight() - 22, lbl.getY(), "Should be aligned bottom"); |
| 228 | + |
| 229 | + // Vertical align center. |
| 230 | + fl.setValign(CENTER); |
| 231 | + cnt.setShouldCalcPreferredSize(true); |
| 232 | + cnt.layoutContainer(); |
| 233 | + assertEquals((cnt.getInnerHeight()-lbl.getOuterHeight())/2, lbl.getY(), "Should be valigned middle"); |
| 234 | + |
| 235 | + // Now valign by row. With only a single component, this should cause the children to be rendered aligned TOP |
| 236 | + fl.setValignByRow(true); |
| 237 | + cnt.setShouldCalcPreferredSize(true); |
| 238 | + cnt.layoutContainer(); |
| 239 | + assertEquals(0, lbl.getY(), "Should be valigned top, when valignbyrow is true"); |
| 240 | + |
| 241 | + // Check valign=BOTTOM now. Should be same as center when aligning by row, since it is its own row. |
| 242 | + fl.setValign(BOTTOM); |
| 243 | + cnt.setShouldCalcPreferredSize(true); |
| 244 | + cnt.layoutContainer(); |
| 245 | + assertEquals(0, lbl.getY(), "Should be valigned top, when valignbyrow is true"); |
| 246 | + |
| 247 | + // Baseline should be same as others since there is only a single child. |
| 248 | + fl.setValign(BASELINE); |
| 249 | + cnt.setShouldCalcPreferredSize(true); |
| 250 | + cnt.layoutContainer(); |
| 251 | + assertEquals(0, lbl.getY(), "Should be valigned top, when valignbyrow is true"); |
| 252 | + |
| 253 | + // Now let's try laying out a 2nd child. |
| 254 | + Component spacer1 = createEmptyComponent(100, 100); |
| 255 | + $(spacer1, lbl, cnt).setPadding(0).setMargin(0).setRTL(false); |
| 256 | + cnt.add(spacer1); |
| 257 | + fl.setValign(TOP); |
| 258 | + fl.setAlign(LEFT); |
| 259 | + cnt.setShouldCalcPreferredSize(true); |
| 260 | + cnt.layoutContainer(); |
| 261 | + assertEquals(0, lbl.getY(), "Should be valigned top, when valignbyrow is true"); |
| 262 | + assertEquals(0, spacer1.getY(), "Spacer should be aligned to top"); |
| 263 | + assertEquals(0, lbl.getX(), "Label should be aligned to left edge"); |
| 264 | + assertEquals(lbl.getWidth(), spacer1.getX(), "Spacer should be aligned to right edge of label"); |
| 265 | + assertEquals(lbl.getPreferredW(), lbl.getWidth(), "Label should be rendered to its preferred width"); |
| 266 | + assertEquals(lbl.getPreferredH(), lbl.getHeight(), "Lable should be rendered to its preferred height"); |
| 267 | + assertEquals(100, spacer1.getWidth(), "Spacer should be its preferred width"); |
| 268 | + assertEquals(100, spacer1.getHeight(), "Spacer should be its preferred height"); |
| 269 | + |
| 270 | + // Let's try aligning bottom by row with the two of them. |
| 271 | + fl.setValign(BOTTOM); |
| 272 | + cnt.setShouldCalcPreferredSize(true); |
| 273 | + cnt.layoutContainer(); |
| 274 | + int rowH = Math.max(100, lbl.getOuterHeight()); |
| 275 | + assertEquals(rowH - lbl.getHeight(), lbl.getY(), "Label should be aligned with the bottom of its row."); |
| 276 | + assertEquals(rowH - 100, spacer1.getY(), "Spacer shoudl be aligned with the bottom of its row"); |
| 277 | + |
| 278 | + // Now let's valign center |
| 279 | + fl.setValign(CENTER); |
| 280 | + cnt.setShouldCalcPreferredSize(true); |
| 281 | + cnt.layoutContainer(); |
| 282 | + assertEquals((rowH - lbl.getHeight())/2, lbl.getY(), "Label should be aligned with the bottom of its row."); |
| 283 | + assertEquals((rowH - 100)/2, spacer1.getY(), "Spacer shoudl be aligned with the bottom of its row"); |
| 284 | + |
| 285 | + // Now same thing with RTL |
| 286 | + $(cnt, lbl, spacer1).setRTL(true); |
| 287 | + cnt.setShouldCalcPreferredSize(true); |
| 288 | + cnt.layoutContainer(); |
| 289 | + assertEquals((rowH - lbl.getHeight())/2, lbl.getY(), "Label should be aligned with the bottom of its row."); |
| 290 | + assertEquals((rowH - 100)/2, spacer1.getY(), "Spacer shoudl be aligned with the bottom of its row"); |
| 291 | + |
| 292 | + // Now align top left but still RTL. Make sure everything is Kosher |
| 293 | + fl.setValign(TOP); |
| 294 | + fl.setAlign(LEFT); |
| 295 | + cnt.setShouldCalcPreferredSize(true); |
| 296 | + cnt.layoutContainer(); |
| 297 | + assertEquals(0, lbl.getY(), "Should be valigned top, when valignbyrow is true"); |
| 298 | + assertEquals(0, spacer1.getY(), "Spacer should be aligned to top"); |
| 299 | + assertEquals(cntWidth-lbl.getWidth(), lbl.getX(), "Label should be aligned to left edge"); |
| 300 | + assertEquals(cntWidth - lbl.getWidth() - spacer1.getWidth(), spacer1.getX(), "Spacer should be aligned to right edge of label"); |
| 301 | + assertEquals(lbl.getPreferredW(), lbl.getWidth(), "Label should be rendered to its preferred width"); |
| 302 | + assertEquals(lbl.getPreferredH(), lbl.getHeight(), "Lable should be rendered to its preferred height"); |
| 303 | + assertEquals(100, spacer1.getWidth(), "Spacer should be its preferred width"); |
| 304 | + assertEquals(100, spacer1.getHeight(), "Spacer should be its preferred height"); |
| 305 | + } finally { |
| 306 | + UIManager.getInstance().getLookAndFeel().setRTL(rtl); |
| 307 | + } |
| 308 | + } |
| 309 | + |
| 310 | + private Component createEmptyComponent(int width, int height) { |
| 311 | + return new Component() { |
| 312 | + @Override |
| 313 | + protected Dimension calcPreferredSize() { |
| 314 | + return new Dimension(width, height); |
| 315 | + } |
| 316 | + }; |
| 317 | + } |
| 318 | +} |
0 commit comments