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')"
Related
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
By default TitleWindows seem to have no padding. I tried the properties "left", "right" etc and it doesn't work. Actually I'd like to have a default for my whole app, so I tried creating a skin but no matter where in the skin I add 'left="50"' it just doesn't create padding on the left. You'd think that you should add it to the element with id="contentGroup", as described on this Adobe Skinning help page, but that does not work.
Surely this is something almost everyone wants to do?
The contentGroup in the default TitleWindowSkin is inside a VerticalLayout which does not respect top/left/right/bottom constraints.
You could do this by duplicating the default TitleWindowSkin and wrapping the contentGroup with a Group with width/height of 100%:
...
<s:Group width="100%" height="100%">
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" top="10" left="10" right="10" bottom="10" minWidth="0" minHeight="0" />
</s:Group>
...
Since the TitleWindow extends the Panel component, it doesn't support the padding properties a HGroup or VGroup based component would. As far as I know, there's no way to skin a TitleWindow so that the padding properties are automatically set.
All I do is set the x and y coordinates of my components within the TitleWindow so that they are laid out where I want them.
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'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
I have list for which I require some space between the items and the list margin. The items inside the list are rendered from some other file. But when I add padding I cannot see any difference.
Something like this:
<mx:List id="List" selectionColor="red" itemRenderer="renderers.List"
doubleClick="Handler()" width="500" cornerRadius="4"
textAlign="center" height="335">
Also when mouse is rolled over only the item has to be highlighted excluding the padding.
Any suggestions? A sample code will be very useful.
Thanks
You are looking for useRollOver for, well, adding roll overs.
<mx:List useRollOver="true" />
As for the padding, you will need to do that in a custom item renderer.
Here is a good article to help you get started on making a custom item renderer:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
The below already has space between the left and right edges of the list and the items in the list, with them being laid out in the centre of the list. This is using the default itemRenderer.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:List id="List" selectionColor="red" width="500" cornerRadius="4"
textAlign="center" height="335">
<mx:Array >
[1,2,3,4]
</mx:Array>
</mx:List>
</mx:WindowedApplication>
Are you rendering text or images?
As for the selection of only the item and not the extra space, I'm not too sure about that one.