Updates to examples. I just pushed changes to two of the examples: DataBindingExample and DataGridExample. Use these examples to provide some guidance when making your own changes:
- Change Container to Group if you can, although on the JS side, Container and Group are the same. - Employ the VerticalFlexLayout and HorizontalFlexLayout classes if you want certain items to be stretchy. See below for more details. - The VerticalLayout and HorizontalLayout classes work as you expect, then just use display:block and display:inline-block on the JS side. - To position things absolutely, use BasicLayout for your container's layout. This is the default layout for the js:View class; the Group class does not have a default layout at the moment so you must specify one when you use Group. There are some things I didn't retrofit yet, especially in the DataGrid collection of classes. I left those in comments in the DataGridExample as a reminder. If you aren't familiar with the CSS Flexbox, [1] is a terrific introduction. I've implemented only some of its features in the SWF-side layouts. The goal of the layouts is to provide only what's needed on the JS side and mimic that on the SWF side. So you will not see the JS side layout's listening for some events since the browser will automatically detect the changes and do the right thing. VerticalFlexLayout (display:flex; flex-flow: column) aligns everything vertically and expands items horizontally to fit the space (unless you have specified a width somehow). The height of each item will default to its native height (or a height you specify somehow). To make an item stretchy, given that item a style of flex-grow:1 and to make an item not be stretchy, use flex-grow:0. I have changed SimpleCSSStyles to include properties flexGrow and flexShrink (my implementation of the Flexbox layouts do not use shrink yet). HorizontalFlexLayout (display:flex, flex-flow: row) does the same thing but horizontally. The OneFlexibleChild* and FlexibleFirstChild* layouts now employ Flexbox on the JS side. [1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Regards, Peter On 3/24/17, 8:33 AM, "Peter Ent" <p...@adobe.com> wrote: >Amendment to these changes: > >Charts: This package should compile now, but will probably not work >completely. Next on my list. > >MDL: This package compiles and runs the main example for me. For those of >you who use MDL, I changed the classes that extended ContainerBase to >extend Group instead. Since I am not that familiar with the requirements >of MDL, you may want to extend GroupBase instead, but take a look at the >two classes to determine your needs. Group/GroupBase just produce a <div> >whereas ContainerBase was creating a <div><div>Š</div></div> situation. >Perhaps you took steps to circumvent that, and if so, those steps should >no longer be needed. > >In going through all these projects, its pretty clear to me we have an >number of unused interfaces, some confusing interfaces, and probably a >bunch of classes that are no longer being used. A "spring cleaning" should >be in order to tidy up FlexJS. I also recommend some refactoring >throughout FlexJS. > >I hope I have done the right thing here and haven't introduced too much >chaos. I believe the container/layout life cycle is now on track and if >you are seeing any problems with it, look at >org.apache.flex.html.beads.GroupView as this is the class that controls >that life cycle (I removed redundant code where I found it). > >Cheers, >Peter > >On 3/23/17, 1:27 PM, "Peter Ent" <p...@adobe.com> wrote: > >>FlexJS Container and Layout Upgrade >> >>My goal when starting this process was to have FlexJS produce leaner HTML >>structures and to reduce the amount of JavaScript code getting >>cross-compiled. My latest commit does the following: >> >>- Produces simpler HTML structures for the container classes, Group, >>Container, and Panel. >>- Simplifies a number of the layout classes for JS while fixing or tuning >>the SWF code to mimic the browser. >>- Moves code that only affects the SWF side into SWF code blocks. >> >>I touched only Core and HTML projects and fixed Effects so it would >>compile since it had the fewest issues. MDL and Charts have larger >>concerns and I hope to sort those out as quickly as I can. >> >>Here are the classes and changes you will find: >> >>Group: This new class (introduced in a previous commit) produces the >>simplest container for HTML (it is just a DIV) and SWF. By default it >>provides no layout in case you want to style in completely using CSS. >>Group (and its view bead, GroupView), are the foundation of the container >>classes. Group runs a layout bead (if there is one) and handles the >>sizing of elements on the SWF side. The JS side is left alone for the >>browser to manage (this was the biggest change). >> >>Container: This class, which extends Group, exists to provide scrolling >>on the SWF side. The JS side of Container is very light adds little to >>what Group does. On the SWF side, Container is a nested structure in >>order to providing content masking and scrolling (which is handled on the >>JS side by using overflow:auto style, which is all the ScrollingViewport >>bead will do if you add it to Container). >> >>UIBase: The major change to UIBase is that it no longer sets the position >>style. That means if you set the x and y properties of a component, it >>will, on the JS side, only set the left and top style values. If you >>intend to place elements at specific pixel coordinates, use a container >>(Group or Container) with BasicLayout which will add position:absolute >>style to all of the children. >> >>NOTE: I made UIBase (and a couple other classes, too) not set position >>style because I saw how easily that caused other problems, especially >>when there was a mixing of "absolute" and "relative" position values. Now >>that this work is done, it may not be a bad thing to have UIBase's x and >>y properties set position:absolute has a convenience. It does however, >>have some ramifications; if you have position:absolute that will override >>pretty much all of the layout types. But maybe the developer just sees >>this and stops setting x and y. Also, there is no way to unset position >>once set. These are things we will have to see how they play out. >> >>Layouts: The layouts no longer change the size of their container hosts >>nor do they produce the "layoutComplete" event. The GroupView class >>handles both of these now to make the process of layout and >>sizing/positioning consistent. >> >>Lists: The DataGroup that lists use to hold the item renderers is no >>longer in play. The DataGroup caused unnecessary nesting of elements (DIV >>inside of DIV). To break that, components like List had to become their >>own item renderer parents. Squaring this away is perhaps the biggest >>challenge since a number of complex components use List as their base. >>The DataContainer is now the basis for lists, with List being its first >>subclass since they have so much in common. The DataContainerView bead is >>now the basis for all list views. >> >>Panel: The Panel is now an extension of Group and it contains three >>children: a TitleBar, a ControlBar (for PanelWithControlBar), and a >>Container for the content space. When you do: panel.addElement(object), >>the Panel code redirects this to its Container child. Similarly, >>panel.numElements tells you the number of elements in the Container >>child. Because Panel is now a Group (so are TitleBar and ControlBar), it >>uses a layout to size and position those three children. When you build >>your own components, you can use Group + layout to achieve the look you >>want with minimal HTML structure. >> >>Interfaces: There are couple of key changes to interfaces. First, there >>is a new interface in the Core project: ILayoutView. This interface is >>implemented by any component whose children can be manipulated by a >>layout. The ILayoutHost interface's function, contentView, has been >>changed to return an instance of ILayoutView. The functions listed in >>ILayoutView may be expanded if we run into situations or layouts that >>need more information from their layout parents; this change is probably >>the source of most compilation issues you will see. >> >>Using Layouts inside of Components: As stated above, Panel (and >>PanelWithControlBar), now uses a layout for its own purposes. This is the >>VerticalFlexLayout, modeled on the HTML/CSS Flexbox. This general purpose >>CSS creation makes the code much simpler and cleaner. Basically, the JS >>layout code is a few lines with maybe a loop to set each child's display >>correctly. The SWF side then has the task to mimic the layout. I have not >>completed the transition on all of the layouts, but the common ones have >>tested correctly. >> >>Regards, >>Peter Ent >>Adobe Systems/Apache Flex Project >> >
