I created a 960x640px image which i want to use as background picture for any type of mobile device by scalling the image to the device s resolution.
How can i achieve this?
i tried:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="MainView">
<s:Image width="100%" height="100%" fillMode="scale" scaleMode="stretch"
source="assets/background.jpg" />
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:View>
This looks good in the design view, it fill the whole screen but when i run the application everyting is really messy (the image is a lot smaller or a lot bigger than the mobile emulator screen)
Is there a better way to do this? Is it possbile to set a background-image directly on the view?
Thanks
set the fillMode="repeat"
this will repeat the image to fill the view
Related
I have a very general question and have prepared a simple test case.
When using BasicLayout (i.e. absolute positioning) - what is the best approach to place a Flex component in the center of the application?
In the test case below I'm using x="{width/2}" but this gives me at least 2 problems:
How do I account for the component dimensions (the ProgressBar in the test case)?
Is the binding {width/2} a good idea to use? Wouldn't it send unnecessary DATA_CHANGE events in some cases?
And finally I wonder, how this all applies to full screen applications using StageScaleMode.SHOW_ALL - because currently my application is aligned to the top-left in the full screen mode and there is a white dead zone on the right of it. (Which is at least a change from pure Flash/AS3 behaviour, where the full screen content is displayed in the center of the screen and 2 dead zones on the left and right).
<?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"
width="700" height="525"
backgroundColor="#CCFFCC"
initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL">
<fx:Script>
<![CDATA[
private function fullScreen(event:MouseEvent):void {
stage.displayState =
stage.displayState == StageDisplayState.NORMAL ?
StageDisplayState.FULL_SCREEN :
StageDisplayState.NORMAL;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="connected" />
</s:states>
<s:CheckBox right="10" bottom="10"
label="Full screen"
click="fullScreen(event)" />
<mx:ProgressBar indeterminate="true"
x="{width/2}" y="{height/2}"
label="Connecting..." labelPlacement="center"
includeIn="normal" />
</s:Application>
Way easier than that: just use horizontalCenter and verticalCenter properties of UIComponent. When used inside a BasicLayout the component will always be centered. Like this:
<mx:ProgressBar indeterminate="true"
horizontalCenter="0" verticalCenter="0"
label="Connecting..." labelPlacement="center" />
If you give these properties a value other than '0' the component will be offset from the middle by the amount of pixels you specify as a value. (e.g. horizontalCenter="50" will offset the component 50 pixels to the right of the center of the parent component)
That white space is probably due to your usage of systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL. Just remove that line. Why are you doing that anyway?
edit
Just noticed you're using a fixed 'width' and 'height' on your Application: you'll have to make those '100%' if you want your app to really fill the screen. This is another possible cause for that white space.
To get your application centered (rather than left/right aligned) when using systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL, set systemManager.stage.align to the empty string - i.e.:
// in your Application creationComplete handler
systemManager.stage.scaleMode = StageScaleMode.SHOW_ALL;
systemManager.stage.align = "";
I typically do 2 things,
I place objects inside VGroups/HGroups with alignment, I also use relative widths eg percentages.
Think like in the old days of using HTML tables. It works very well especially if your canvas is resized allot.
All of my canvases have to be resizeable as I like to only write my apps once, for pc, mobile etc, so I just make everything scalable by default.
I have a problem displaying scrollbars for my Flex Application... I tried a basic very application with a canvas, but the scrollbars never appear on the browser window athough the canvas is much bigger than what can fit on the screen. Can someone please help? Here's my code :
<?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" minWidth="955" minHeight="600">
<mx:Canvas id="MyCanvas" height="2500" width="2000" verticalScrollPolicy="auto"
horizontalScrollPolicy="auto" backgroundColor="black" symbolColor="#000000"
contentBackgroundColor="#080808"/>
</s:Application>
Do you want the scroll bar in your canvas? Or in your main application? If you want scroll bars in your canvas, just add content that extends beyond the height and width of the canvas. It will "magically" add them, because that is way MX/Halo components role.
If you want scrollbars in your main application, you're going to have to add them manually, using a scroller component and a group. Conceptually something like this:
<?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" minWidth="955" minHeight="600">
<s:Scroller height="100" width="100">
<s:Group width="100%" height="100%" clipAndEnableScrolling="true">
<mx:Canvas id="MyCanvas" height="2500" width="2000" verticalScrollPolicy="auto"
horizontalScrollPolicy="auto" backgroundColor="black" symbolColor="#000000"
contentBackgroundColor="#080808"/>
</s:Group>
</s:Scroller>
</s:Application>
In my experience you need to specify a fixed height and/or width on the scroller for the scroll bars to show up. Also be sure to clipAndenableScrolling on the group inside the scroller, or else the content will display beyond the scroller's viewport--which is kind of defeats the purpose.
Some good info from Adobe.
I got it to wrok just fine using the scroller/group around my applications mxml, i tried someone elses scroller skin def but it didnt work.
the main thing is to set all the heights and widths to 100% for the application, scroller & group.
<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"
width="100%" height="100%>
<s:Scroller height="100%" width="100%" horizontalScrollPolicy="on" verticalScrollPolicy="on">
<s:Group left="0" right="0" top="0" bottom="0">
<!--...mxml....-->
</s:Group>
</s:Scroller>
</s:Application>
In Flex 4+ (spark) you don't use "scrollPolicies" anymore. The MX canvas still does, so if your canvas contents grow beyond 2500x2000, they will scroll.
For your entire APP to have a scroller you need to create a skin for the Application and wrap the "contentGroup" in a tag.
See: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62d75-7fff.html for more information on adding a scroller to a spark application
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'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
I want to replace the default title of the header with my image in Flex Panel.
I don't actually think this is possible with the built in panel. My recommendation would be to either create your own container that allows you to put an image in the header (quite complicated) or to create a composite component that has an image for its header and an area to add content e.g.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Image src="someImage.jpg" />
<mx:Canvas>
<!-- add content here -->
</mx:Canvas>
</mx:VBox>
I know this is old, but panels have the property titleIcon which can be set to a class to do this.
titleIcon="#Embed('img/image.png')"