I've read a lot of articles saying that in order to use the old "Layout='Absolute'" in Flex 4, I simply have to use
<s:layout>
<s:BasicLayout/>
</s:layout>
But it just doesn't work the same way. On Flex 3, when you set your application layout as absolute, the X and Y properties automatically lose their utility since every component of your layout will be determined automatically by default in the top left of your screen. It works similarly as the mobile layouts: You either use Canvas to set X and Y (most used by mobile game developers) or you let the device to place everything so it will avoid screen size problems and such.
Is it still possible on Flex 4? How harder/complex is it?
Thanks for your attention.
Edit -------
So it seem a little bit confuse what I want. Back to Flex e, I used to do this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()" width="100%" height="100%"
I started my application with this tag and down there I would have a box container with 100% width and 100% height.
So, inside this box container I would have HBox and VBox to align my components (now VGroup and HGroup). The thing is that in Flex 3 I could place 1 VBox, for instance, and 3 HBox inside it that each HBox would assume a position automatically one under the other, that is with X and Y properties blank. With Flex 4, when I place 1 VGroup and 3 HGroup inside without setting any X and Y propert, they'll just fill up one above the other, like if I had set X,Y = 0 to all of them. They don't assume position one under the other like it used to.
Please see the Flex 3 to Flex 4 equivalent layouts in Spark Layouts with Flex 4:
Working with the Spark Layouts
Because layouts and containers are separated in Spark, there are a few
notable changes that you need to take into account when working with
the layouts. Take a moment to examine the following table of MX layout
container classes and their corresponding combination of Spark layout
and container:
MX Containers Corresponding combination of Spark Layout and Container
Canvas Group with BasicLayout (no advanced constraints)
HBox Group with HorizontalLayout (or the HGroup class)
VBox Group with VerticalLayout (or the VGroup class)
Tile Group with TileLayout
List List with VerticalLayout
TileList List with TileLayout
In your case, it sounds like you want a dynamic layout rather than an absolute one because you say you do not want to supply X and Y coordinates for your controls.
You then have two options:
Use the BasicLayout and specify the top, left, right, bottom properties for your controls
Use HorizontalLayout, VerticalLayout, or one of the other dynamic layouts.
Related
I have a project that use multiple canvas elements. I have one canvas called gutter and then multiple groups of canvas that render as many times as needed. Each group contains three canvas layered over each other. I am using vue js and vuetify to work with all this. What I want is to place the canvas called gutter next to the first group of canvas. I have tried floating both elements to the left and that has not worked and variety of different div configurations and also display properties such as flex block and flex inline with no luck. I attached a picture to try and illustrate what I am doing, on the far left is the gutter that I want to move next to the other canvas. The blue boxes illustrate the groups.Each group has a name that renders on top of it.
rendered layout in inspector
I am working on an Adobe AIR Application. The size on Application window is 800X600 and is contains border container and border container contains many controls.
What I want is to if user re-sizes the application then that container should also be re-sized according to scale. i.e If user maximizes or minimizes the window then that border container should also be maximized or minimized respectively.
If you don't want to (or can't for some reason) use percentage based widths then you can always just do the following in MXML:
<s:BorderContainer
xmlns:mx = "http://www.adobe.com/2006/mxml"
xmlns:s = "library://ns.adobe.com/flex/spark"
width = "{parentApplication.width / 2}"
height = "{parentApplication.height / 2}">
You are just getting a reference to the component's parentApplication and directly binding to its width and height. Throw whatever math you want on the end.
An easier way to do this is to have your components declare their sizes/positions relative to their outer containers. For example, rather than setting x, y, width and height, set left, right, top and bottom in your Application component as well as the containers within your Application. If you want to enforce a minimum size of 800x600, you can set the minWidth and minHeight properties. Hope that helps.
This can be accomplished using an MVC framework. Some options include RobotLegs, Mate, Cairngorm or it is possible to use some quick design patterns and implement a custom version.
Essentially, the Application event Event.RESIZE should be detected and applied to the container. The properties of stageHeight and stageWidth will give the necessary info to resize the container.
Resize events will traverse the display hierarchy in any case, but it's convenient to intercept at the application level, should a custom event or function apply to the controls.
I am new to Flex. I am trying to add a scroller in my main application/windows.
Is that possible?
I found out it is possible to add scoller bars in DataGrid, like horizontalScrollPolicy="on".
How to implement it in containers like Group,Panel and etc?
Thanks
The answer differs between flex 4 (spark) components and flex 3 (halo) container components. For spark components such as Groups, you need to wrap your group in a Scroller component to get scrollbars to appear when all of the group's content cannot be viewed. Halo container components, such as Canvas, have built in support for scrollbars, meaning they should show up automatically when all of the canvas's content cannot be viewed. Hope that helps.
The Application tag also has horizontalScrollPolicy and verticalScrollPolicy properties.
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#horizontalScrollPolicy
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#verticalScrollPolicy
In the Spark architecture, you want to look at the Scroller class. This is a good tutorial:
http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling.html
I'm using as container for my LinkButtons.
I would like to know
1) how can I remove the space between the items in my Tile container.
2) how can I set dynamic width for my items (at the moment they all have the same width regardless the width of the included component)
3) how can I avoid to display scrollbars if the items are not included in the container
Thanks
1) Space between items is set by horizontalGap and verticalGap, so to remove them completely use
horizontalGap="0" verticalGap="0"
Keep in mind that you need the size of all objects to be the same for it to work properly.
2) What do you mean exactly?
If you only need to change the width of the objects, what's wrong with doing btnId1.width = 200;?
3) To cancel the scroll bars use
horizontalScrollPolicy="off" verticalScrollPolicy="off"
I am working on a flex app that uses XML templates to dynamically create DisplayObjects. These templates define different layouts that can be used for each page of content in the app (ie , 2 columns, 3 columns etc etc). The administrator can select from one of these and populate each area with their content.
The templates add one of 3 types of DisplayObject - HBox, VBox or a third component - LibraryContentContainer (an mxml component that is defined as part of the app) - which is effectively a canvas element with a TextArea inside.
The problem that I am getting is that I need each of these areas to automatically resize to fit the length of the content but don't seem to be able to find an effective way to do so.
In the LibraryContentContainer, when the value of the TextArea is set, I am calling .validateNow() on the LibraryContentContainer. I then set the height property on both the TextArea and LibraryContentContainer to match the textHeight property of the TextArea.
In the following example, this is the LibraryContentContainer, viewer is the TextArea and the value property of the TextArea is bound to this.__Value. v is the variable containing the content for the textarea
this.__Value = v;
this.validateNow();
this.viewer.height = this.viewer.textHeight;
this.height = this.viewer.height;
This works to a degree in that the TextArea grows or shrinks depending on the length of content, but it's still not great - sometimes there are still vertical scrollbars even tho the size of the TextArea has grown.
Anyone got any ideas?
Thanks
Adam
I think the problem lies not with your dynamically added components, but with the component they're being added to. How is the height of this component being determined? If you set verticalScrollPolicy and horizontalScrollPolicy on this container to off, do your scrollbars disappear? If that's the case, then you'll need to look at how this component is sized rather than your hbox, vbox, or whatever it is you're adding.