I'm currently learning Flex, and am having the hardest time getting scroll bars to work. In short, I'm making a giant form for users to fill out, contained within a viewstack component. The user will type up information in one view, and it will be displayed in the other. But right now in the first canvas I have components that run off the screen and flex doesn't automatically add a scroll bar, so I added 'verticalScrollPolicy="on"' to my canvas. Now, while it gives me a scroll bar, it gives me an empty scroll bar. I still cannot move it up or down, meaning components are still trapped off the bottom of my screen. Am I missing something simple?
Edit - I'm using Adobe Flex Builder 3, and the components it lets you drag in. http://img12.imageshack.us/img12/218/problem1f.jpg This is a picture of the problem, and i guess relavent code would be.
<mx:Application xmlns:mx="adobe.com/2006/mxml" layout="absolute" width="830" height="835">
<mx:ViewStack x="10" y="72" id="viewstack1" width="790" height="751" >
<mx:Canvas label="Design Mode" width="100%" height="100%" verticalScrollPolicy="on" horizontalScrollPolicy="on" >
(Components inside)
</mx:Canvas>
I think the problem is in the way the content in your canvas determines it's height.
If I do this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ViewStack width="500" height="500">
<mx:Canvas width="100%" height="100%">
<mx:Canvas width="100" height="1000" backgroundColor="#ededed" />
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
I get scrollbars - Canvas has a default horizontalScrollPolicy and verticalScrollPolicy of auto, meaning it'll show the scrollbars as needed. I think, for whatever reason, the outer canvas isn't detecting that the content is taller than it should be.
if it can help some one : some related problem
Related
Scrollbar is not visible in my flex web application when I change the size of window,
when i am slightly changing my window size to little bit smaller then, it is not showing any scrollbar and some part of my screen is hidden.
I have already used verticalScrollPolicy and horizontalScrollPolicy in my main mxml file but no effect.Please help me out here.
this is the code.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:controller="controller.*"
xmlns:view="view.*"
width="1000" height="600"
backgroundColor="#FF9900"
verticalScrollPolicy="auto"
horizontalScrollPolicy="auto">
Thanks in advance
change the layout to vertical after that your application tag will going to be like that
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
xmlns:controller="controller.*"
xmlns:view="view.*"
width="1000" height="600"
backgroundColor="#FF9900"
verticalScrollPolicy="auto"
horizontalScrollPolicy="auto">
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas width="100%" height="100%">
<mx:Canvas backgroundColor="#A8A8A8" height="100%" right="0" top="0" width="100">
</mx:Canvas>
</mx:Canvas>
<mx:VBox width="800" height="100%" >
</mx:VBox>
</mx:Application>
My code above works absolutely fine, until i resize my browser window to a size below 800px width.
When the browser window is make of lesser width than 800px, the canvas with background color #A8A8A8 is on the right of the window, but the problem is, when I move the scroll bar, the canvas should remain on the right of the window. Which does not happen, and that is what my problem is.
How can I solve this issue. What should I do to keep my canvas be on the right=0 all the time.
Plz help me.
Regards
Zeeshan
Your canvas get scrolled with the application. It keeps right="0", but right border is shifted off screen. You can disable scrolling with <mx:Application horizontalScrollPolicy="off"> and VBox below should not have fixed width of 800.
ive been pondering how to create the same type of resizing that acrobat connect does. i did read the documentation of percentage sizing. and i have implemented it. but its not how i want it to look.
to see an example : https://admin.na3.acrobat.com/_a204547676/flextras/
sorry Jeffrey to use you as an example. :)
just try to resize your window and see it... thats what im looking for .
any hints guys?
Given your code sample; the button is not given a height or width; so Flex sizes it automatically used a fixed width. Give the button a percentage width or height and it should resize appropriately as the screen changes.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="#FFFFFF">
<s:BorderContainer width="40%" height="70%" y="10" horizontalCenter="0">
<mx:Image height="100%" width="100%" id="img" source="http://upload.wikimedia.org/wikipedia/en/thumb/a/ab/Apple-logo.png/125px-Apple-logo.png" horizontalCenter="0"/>
</s:BorderContainer>
<s:Button y="543" horizontalCenter="0" label="start" width="40%" height="30%"/>
</s:Application>
ok i have tried it. but its not the result i am looking for. if you keep resizing back and forth the acrobat app you can see the entire app resizing compared to the above example.
its not quite the same.
I am using a mx:Resize effect to change the width of an image in Flex (leaving the height to look after itself) but I want the image to remain vertically centered on the page. Whilst I could calculate the aspect ratio of the photo, and work out the new y value to keep it centred, I would have to include a mx:Move effect too, and I am hopful that Flex has a simpler way.
This is for a photo gallery where images are loaded at run-time, and swapped about, so I really would like to avoid recalculating the aspect ratio and vertical position every time the updateComplete event fires. It seems so messy.
I tried putting my image inside a mx:VBox with verticalAlign="middle", thinking that the box would do all the centering for me, but this only seems to happen when the app first starts - i need it to gradually adjust the position during the period where the effect plays (to keep it central even when part-way through).
Here's a stripped-down example (which doesn't work):
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="600">
<mx:Resize id="fxResize" target="{imgPhotoA}" widthTo="350" duration="500" />
<mx:Button x="10" y="10" label="Resize" click="fxResize.play()" />
<mx:VBox id="boxPhotoA" x="100" y="20" height="500" width="350" verticalAlign="middle" borderStyle="solid" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:Image id="imgPhotoA" width="60" maintainAspectRatio="true" source="http://sstatic.net/so/img/logo.png"/>
</mx:VBox>
</mx:Application>
I am a newcomer to Flex, so apologies if I am doing something daft. Looking at the source of the Adobe example photo gallery hasn't helped me realise a solution - I don't think they use effects, but create their own routine to alter the size and position. The code looks horrid!
You could try creating an event handler for the effectEnd event of the Resize control, something that calls invalidateDisplayList on the VBox, something like:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="600">
<mx:Script>
<![CDATA[
private function resizeFinishedHandler(Event:Event) : void {
boxPhotoA.invalidateDisplayList();
}
]]>
</mx:Script>
<mx:Resize id="fxResize" target="{imgPhotoA}" widthTo="350" duration="500"
effectEnd="resizeFinishedHandler(event)" />
<mx:Button x="10" y="10" label="Resize" click="fxResize.play()" />
<mx:VBox id="boxPhotoA" x="100" y="20" height="500" width="350" verticalAlign="middle" borderStyle="solid" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:Image id="imgPhotoA" width="60" maintainAspectRatio="true" source="http://sstatic.net/so/img/logo.png"/>
</mx:VBox>
</mx:Application>
Hope this helps.
Since the boss wanted this ready for tomorrow, I had to give up on the idea of Flex doing the work for me, and calculate the values myself.
Note that I knew that all my JPGs were 120px wide, but the heights could vary. This made horizontal positioning easy, so its only the vertical positioning I will refer to below...
PART ONE
Every time the complete event fired on an image object (i.e. a JPG was loaded into it) I set its position based on its height. Assuming the centreline was a line 300 px down from the top of the screen, I used:
oImage.y = 300 - (oImage.contentHeight / 2)
I avoided the updateComplete event as it seemed to fire off hundreds of times when an effect moved/resized the image. I also avoided the height property (in favour of contentHeight) as I found a strange issue with the image tag whereby I had to set its height to a value (I only wanted to set the width really) in order for the resize effect to actually do anything. I used height="999" and let the image take care of its own aspect ratio.
PART TWO
Just before I called the play() method on my effects, I had to set the yTo value for each move effect, to ensure the image would move to the correct vertical position to take into account it being resized at the same time (e.g. if image shrinks, it needs to be moved down slightly).
For each image, I needed to work out the aspect ratio and then I could calculate what the new height of the image would be after resizing.
private function calculate_yto_value(oImage:Image, iWidthAfterTheEffect:int):int {
var iAspectRatio:Number = oImage.contentHeight / oImage.width
var iHeightAfterTheEffect:Number = iAspectRatio * iWidthAfterTheEffect
return 300 - (iHeightAfterTheEffect / 2)
}
fxMovePhoto.yTo = calculate_yto_value(imgPhotoA, 60)
I'm new in flex.
I faced problem to make full screen in flex 3.My layout container type like below.
<mx:Application >
<mx:Panel>
<mx:ViewStack>
<mx:VBox >
<mx:VBox >
<mx:Canvas >
<mx:HBox width="300" height="300">
</mx:HBox>
</mx:Canvas>
</mx:VBox>
</mx:VBox>
</mx:ViewStack>
</mx:Panel>
</mx:Application>
the container width and height will be fixed like above.Then when i click a button full screen it will be full screen mode. Please help me with example and tutorial.
best regard.
Mahedi
Assuming you are referring to full screen as in 'use the whole monitor':
Calling stage.displayState = StageDisplayState.FULL_SCREEN; will set your flash movie to full screen mode (provided that the allowFullScreen parameter has been set to true in the object/embed tags of the embedding html page). Scale up the hbox (change its width/height) so that it occupies the whole space available.
Just set
<mx:HBox width="100%" height="100%">
//Other Codes
</mx:HBox>
From what I understand what you want is to change the width / height of the component at run-time.
In this case you need to give an id to the HBOx, add a script block, and call the 'width' / 'height' setter on your block.
Is that what you want to do ?
Thanks
PH