Here is a link to a Pasteboard [1] that should help. It is a set of nested Panels. If you run this on both SWF and HTML, you'll see differences due to the fact that the SWF side does not yet handle all of the CSS.
The HTML should be a nesting of hideously colored boxes with their content centered. Using Flexbox, you center along the major axis using justify-content:center and along the second axis using align-items:center. The justify-content style is how the collection of children along the major axis are positioned and spaced while align-items positions the elements of the collection within the box in the second dimension. Another thing to keep in mind with Flexbox is the size of individual items. Start off with specifying no size at all. This will expand the item along the second axis. In the vertical, it will make each item as wide as the div while in the horizontal it will make each item as tall as the div. If you give a size to the secondary dimension (width for vertical box and height for horizontal box), those values should be honored. See that the buttons for the leftSide Panel have a width specified as 70px. The flex-grow and flex-shrink styles apply to individual items for the main axis. You'll see that in the rightSide Panel that the items (Groups) have flex-grow:1; since they have the same grow value they expand to fill the space equally. Flexbox supports different grow values but the SWF-side version supports only flex-grow of 1 or 0. The 0 means to honor the element's given size for that dimension. I hope I explained that clearly enough! You can see why this is taking a bit longer to sort out. —peter [1] https://paste.apache.org/cgoQ On 3/27/17, 5:48 PM, "Greg Dove" <greg.d...@gmail.com> wrote: >I've just done a sweep through one project fixing our 'borked' stuff, I >guess the latest change might re-'bork' some of the fixes, but I think at >least these changes should be easier to address. > >Sometimes I needed to swap a Container to a Group and other times not, >because of the relative/absolute changes. >I found it easier to migrate a lot of the layout stuff to pure css for now >using flexbox, thinking that doing so might insulate us from further >changes in the coded layout support. We would have the ability to swap >back >to beads etc later if we want to have that in the mxml, once things have >become stable. > > >On Tue, Mar 28, 2017 at 9:52 AM, Peter Ent <p...@adobe.com> wrote: > >> Does the HTML look OK - the structure. Is there anything missing? You >> should see a simplified nesting of DIVs. If that's the case, then maybe >> there is more work to do with the layouts. >> >> The topmost Container, outer controls, doesn't look like it has a >>layout, >> so with Container that should default to BasicLayout. That's one thing >>to >> check. >> >> Does the Container with id scrollContainer have a parent somewhere with >>a >> fixed width and height? The auto margins should still work for HTML. >> Mostly the work is on the SWF side; the JS code was "cleaned up" so >>maybe >> that's the problem. I took out much of the algorithmic code for Vertical >> and Horizontal layout since I believe HTML would respond property to the >> addition of children, removal of children, resizing, etc. I did have, >>if I >> remember correctly, to add "white-space:nowrap" to the >>HorizontalLayout; I >> don't know that will affect you. >> >> Would you mind tinker with the HTML DOM in the browser to see if you can >> get the look you want? That will help determine if the layout code needs >> to be adjusted. >> >> Thanks and so sorry for the problems. *must use feature branch next >>time* >> —peter >> >> On 3/27/17, 4:35 PM, "Harbs" <harbs.li...@gmail.com> wrote: >> >> >Better, but I still have some problems (there’s probably more): >> > >> > <js:Container width="100%" id="outerControls"> >> > <js:style> >> > <js:SimpleCSSStyles >> backgroundColor="0x444444"/> >> > </js:style> >> > <js:Container id="controls"> >> > <js:style> >> > <js:SimpleCSSStyles >> marginLeft="auto" marginRight="auto"/> >> > </js:style> >> > <js:beads> >> > <js:HorizontalLayout/> >> > </js:beads> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="undo_clickHandler(event)" id="undoButton" >> >src="assets/images/icons/0726-undo.svg"> >> > <js:beads> >> > <js:DisableBead/> >> > </js:beads> >> > </js:ImageButton> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="redo_clickHandler(event)" id="redoButton" >> >src="assets/images/icons/0727-redo.svg"> >> > <js:beads> >> > <js:DisableBead/> >> > </js:beads> >> > </js:ImageButton> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="zoomin_clickHandler(event)" >> >src="assets/images/icons/0806-zoom-in.svg"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="zoomout_clickHandler(event)" >> >src="assets/images/icons/0807-zoom-out.svg"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="fitButton_clickHandler(event)" >> >src="assets/images/icons/0843-expand.svg"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="previewButton_clickHandler(event)" >> >src="assets/images/icons/0786-file-preview-white.svg"/> >> > <js:Spacer width="10"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="finishButton_clickHandler()" >> >src="assets/images/icons/0821-check.svg"/> >> > <js:Spacer width="10"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="cancelButton_clickHandler()" >> >src="assets/images/icons/0822-cross2.svg"/> >> > </js:Container> >> > >> >1. This used to create a centered group of buttons. Now, the container >> >has a height of 0 and the buttons don’t show up. >> > >> >2. >> > <js:Container >>className="designOuterContainer" >> id="scrollContainer" >> >width="100%" height="100%"> >> > <js:beads> >> > <js:ScrollingViewport/> >> > </js:beads> >> > <components:DesignAreaHolder >> id="designContainer" >> >className="_holder" y="0"> >> > <components:style> >> > >> <js:SimpleCSSStyles marginLeft="auto" marginRight="auto"/> >> > </components:style> >> > </components:DesignAreaHolder> >> > >> > </js:Container> >> > >> >This used to create a scrolling div that was centered in the the >>window. >> >It now is aligned left, and I don’t know if it scrolls. >> > >> >There’s other issues, and I’ll see tomorrow what I can work around. >> > >> >> On Mar 27, 2017, at 11:08 PM, Peter Ent <p...@adobe.com> wrote: >> >> >> >> Hi, >> >> >> >> I just pushed a change to UIBase to set position="absolute" when >> >>setting x >> >> or y. I think this is perfectly safe and if someone does set x and y >>and >> >> then tries to use a layout where that would be a conflict, they will >>get >> >> have to avoid setting those properties. >> >> >> >> I figured this would eventually happen. Let's see if this fixes the >> >>issue. >> >> >> >> —peter >> >> >> >> >> >> On 3/27/17, 2:58 PM, "Harbs" <harbs.li...@gmail.com> wrote: >> >> >> >>> Peter, >> >>> >> >>> I just tried loading my app with your changes, and everything is >> >>>totally >> >>> borked. We rely a lot on absolute positioning and transformations. >> >>> >> >>> We really need the old behavior in some components. >> >>> >> >>> Is there any components which work the same as they used to? >> >>> >> >>> Harbs >> >>> >> >>>> On Mar 26, 2017, at 6:55 PM, Peter Ent <p...@adobe.com> wrote: >> >>>> >> >>>> For the time being, the Tour main view should have a width and a >> >>>>height: >> >>>> >> >>>> <local:TourJSMainView id="mainView" width="100%" height="900" /> >> >>>> >> >>>> Then in the style section, give everything flex-grow: 1; and it >>should >> >>>> look better. I think some padding and/or margins might be needed, >>but >> >>>>I >> >>>> think I have more work do with the layouts. I'll bump getting the >>tour >> >>>> to >> >>>> the top of the list for this week because I think its nesting of >> >>>> elements >> >>>> is a good test. I think it is just a matter of setting the style >> >>>>values >> >>>> right. HTML structure-wise it looks fine, so that's good. >> >>>> >> >>>> ‹peter >> >>>> >> >>>> On 3/26/17, 11:31 AM, "piotrz" <piotrzarzyck...@gmail.com> wrote: >> >>>> >> >>>>> Peter, >> >>>>> >> >>>>> I've started to experiment with your new classes in TourJS and I >> >>>>>think >> >>>>> I've >> >>>>> achieved some good look, but not everything is working as >>expected. >> >>>>> >> >>>>> For some reason code of examples has not been loaded properly. If >>you >> >>>>> could >> >>>>> review my changes and give some feedback, whether I used your new >> >>>>> classes >> >>>>> in >> >>>>> appropriate manner. >> >>>>> >> >>>>> Thanks, >> >>>>> Piotr >> >>>>> >> >>>>> >> >>>>> >> >>>>> ----- >> >>>>> Apache Flex PMC >> >>>>> piotrzarzyck...@gmail.com >> >>>>> -- >> >>>>> View this message in context: >> >>>>> >> >>>>> >> >>>>>https://na01.safelinks.protection.outlook.com/?url= >> http%3A%2F%2Fapache >> >>>>>-f >> >>>>> le >> >>>>> >> >>>>> >> >>>>>x-development.2333347.n4.nabble.com%2FFlexJS-Summary- >> of-Changes-tp6070 >> >>>>>9p >> >>>>> 60 >> >>>>> >> >>>>> >> >>>>>779.html&data=02%7C01%7C%7Cd418c8770a394118a2f208d4745e >> 47ea%7Cfa7b1b5a >> >>>>>7b >> >>>>> 34 >> >>>>> >> >>>>> >> >>>>>438794aed2c178decee1%7C0%7C0%7C636261395657671115& >> sdata=29GdLLPJdgglZF >> >>>>>zZ >> >>>>> UF >> >>>>> AOBNCBt0S8qshiPOmXCDEbRKw%3D&reserved=0 >> >>>>> Sent from the Apache Flex Development mailing list archive at >> >>>>> Nabble.com. >> >>>> >> >>> >> >> >> > >> >>
