I want to set the default window size for a flex application that runs with a standalone player.
I set width and height to 100% to be able to get the ResizeEvent and being able to adjust the layout if the user changes the window size. But I'd like to also define a default size.
There's two ways to set the default size of a swf:
1) add a compiler argument:
-default-size=800,600
2) use metadata in your flex main mxml or class
mxml:
<mx:Metadata>
[SWF(width='800', height='600')]
</mx:Metadata>
class:
[SWF(width='800', height='600')]
public class Main extends Application {}
This will tell the compiler what values to put in the header tag of the swf.
I solved it this way:
setting the application to a fixed size on startup, and adjusting it when the stage (here: the window) is resized
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="900" height="600"
applicationComplete="appComplete();">
<mx:Script>
<![CDATA[
private function appComplete():void {
stage.addEventListener(Event.RESIZE, onStageResize);
}
private function onStageResize(e:Event):void
{
this.width = this.stage.stageWidth;
this.height = this.stage.stageHeight;
validateNow();
}
I'm not sure you can. You can do it with air though. Why would you want a standalone flex app that isn't air? The setting is the air xml file
Related
We have a list of variable height items that we display in a Spark List control. When the user clicks and drags the vertical scrollbar the list scrolls smoothly. When the up/down arrows are used it moves in small and discrete steps. When the mouse wheel is used the list scrolls in very large discrete steps that is problematic for the user.
We would like to enable smooth scrolling for the mouse wheel. The height of our items vary significantly and it is easy to get lost when you scroll with the moouse due to the discrete scrolling.
Our implementation is fairly simple:
<s:List id="chartList"
dataProvider="{pm.charts}"
itemRenderer="charts.ChartItemRenderer"
horizontalScrollPolicy="off"
verticalScrollPolicy="on"
useVirtualLayout="false"
cachePolicy="auto">
</s:List>
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
xmlns:charts="charts.*"
>
<fx:Script>
<![CDATA[
private var _canvas:BitmapData;
public function set canvas(value:BitmapData):void
{
_canvas = value;
}
[Bindable]
public function get canvas():BitmapData
{
return _canvas;
}
public function render(x:int,y:int, data:int):void
{
_canvas.draw(this);
}
]]>
</fx:Script>
<charts:DefaultChartContainer
chart="{data}"
cachePolicy="on"/>
</s:ItemRenderer>
There does not appear to be an out of the box method for implementing smooth scrolling in a Spark List. How would one go about implementing smooth scrolling in a spark list for variable height items?
Edit:
Here is another way to do this:
http://forums.adobe.com/message/3844410#3844410
Ok, so this wont be easy, but it is doable.
1) Create a custom skin for your list
2) In the custom skin, replace the scroller with a custom scroller (MyScroller)
3) Create a new class that extends Scroller, called MyScroller
4) Adobe in their infinite wisdom made skin_mouseWheelHandler private - which they seem to do all over the place, so you would have to override something higher up, maybe attachSkin and detachSkin. Or you could try adding your own skin_mouseWheelHandler with a higher priority in attachSkin and prevent default on it so the default does not get called.
5) Replicate the code in skin_mouseWheelHandler, and modify it to suit your requirements.
Like #Sunil_D. suggested, listening the mousewheel event and manually adjusting the HorizontalScrollPosition is an easy way to handle this. Add the EventListener for your component
chartList.addEventListener(MouseEvent.MOUSE_WHEEL, chartList_mouseWheelHandler);
and increase/decrease the horizontalScrollPosition with, for example, multiples of event.delta
protected function chartList_mouseWheelHandler(event:MouseEvent):void
{
chartList.verticalScrollPosition -= (event.delta * SOME_CORRECT_VALUE);
}
Finding the proper SOME_CORRECT_VALUE might need some experimenting, but it shouldn't be to hard to find.
I've done tons of research and read the Adobe Live Docs till my eyes bled trying to figure this out.
I am building a composite custom component in ActionScript, and would like the sub controls to be laid out horizontally. This works fine by adding them to an HGroup and adding HGroup to the component, the problem comes with percentage based sizing.
I need _horizontalGroup:HGroup to size it self based on the size of its container.
stepping through the code shows that the parent properties of each UIComponent are...
_horizontalGroup.parent = ReportGridSelector
ReportGridSelector.parent = grpControls
If grpControls has an explicit size, shouldn't ReportGridSelector have its size as well?
The custom component is implemented like this...
NOTE: ReportControl extends UIComponent and contains no sizing logic
public class ReportGridSelector extends ReportControl{
/*other display objects*/
private var _horizontalGroup:HGroup;
public function ReportGridSelector(){
super();
percentHeight = 100;
percentWidth = 100;
}
override protected function createChildren():void{
super.createChildren();
if(!_horizontalGroup){
_horizontalGroup = new HGroup();
//I WANT SIZE BY PERCENTAGE, BUT THIS DOESN'T WORK
_horizontalGroup.percentWidth = 100;
_horizontalGroup.percentHeight = 100;
//EXPLICITLY SETTING THEM WORKS, BUT IS STATIC :-(
//_horizontalGroup.width = 200;
//_horizontalGroup.height = 200;
addChild(_horizontalGroup);
}
}
}
Consuming MXML code
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup id="grpControls" width="200" height="200">
<ReportControls:ReportGridSelector width="100%" height="100%"/>
</s:VGroup>
If I explicitly define _horizontalGroup's width and height properties, everything displays fine. If I try _horizontalGroup.percentWidth or percentHeight, all the controls get scrunched together.
Any thoughts as to what is going on?
Perform layout when the display list is invalidated from updateDisplayList.
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
_horizontalGroup.width = unscaledWidth;
_horizontalGroup.height = unscaledHeight;
}
Understand the Flex component lifecycle:
http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html
createChildren
Creates any child components of the component. For example, the
ComboBox control contains a TextInput control and a Button control as
child components.
For more information, see Implementing the createChildren() method.
updateDisplayList
Sizes and positions the children of the component on the screen based
on all previous property and style settings, and draws any skins or
graphic elements used by the component. The parent container for the
component determines the size of the component itself.
I have a collection of UIMovieClip components which reside in an s:HGroup tag. In ActionScript code I am modifying the width of a child clip in one of the UIMovieClips but these changes are not reflected by the s:HGroup.
<s:HGroup id="_buttonGroup">
<uiassets:NavigationTabButtonSWC id="_lobby" />
<uiassets:NavigationTabButtonSWC id="_achievements" />
</s:HGroup>
<fx:Script>
<![CDATA[
protected function init() : void
{
// The HGroup does not pickup this change and so my buttons
// are no longer evenly spaced out and overlap!
_lobby.getChildByName("background").width += 200;
}
]]>
</fx:Script>
Thanks!
There's a few reasons for this. Just changing one child's width doesn't mean it'll change the whole UIMovieClip's width, so you should check that first.
Second, Flex has a very specific way of doing things (called the component lifecycle), which the UIMovieClip doesn't implement so you can't manage the width yourself in the 'measure' function. I'm guessing that you just have other children in your movieclip that doesn't let you resize it all. Try changing the width of the MovieClip itself and it should work. If it doesn't, then there's another problem.
In my Flex 4 app I would like all my alert boxes to be a specific width and height, how do I specify that in the CSS? I want to avoid having to specify the width and height every time I want to show an alert, that's why I'd like to set it in the CSS, but does not look like there's a way to..
Something like this does not work:
mx|Alert
{
height: 100;
width: 300;
}
You can do it Using Style + Code like this
Define Style Properties as
Alert {
height:300;
weight:300;
}
Note: height and weight are not default style of Alert
Using them in Code as
var alert:Alert = Alert.show("Hello World");
alert.explicitHeight = Number(alert.getStyle("height"));
alert.explicitWidth = Number(alert.getStyle("weight"));
Working example of Flex3 is
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="{show()}">
<mx:Style>
Alert {
height:300;
weight:300;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function show():void
{
var alert:Alert = Alert.show("Hello World");
alert.explicitHeight = Number(alert.getStyle("height"));
alert.explicitWidth = Number(alert.getStyle("weight"));
}
]]>
</mx:Script>
</mx:Application>
Explanation
Since Alert Control by default not support height and weight style, so example used them just for holding user defined values as variable.
In routine to display Alert/Popup on screen Static method show of class Alert is used, which returns the instance/object of created/active Alert/Popup, using this refrence its properties can be manipulated at runtime as done in above example i.e. explicitHeight and explicitWidth.
Hopes that Help
CSS can only be used to set Style properties of components. There are no dimension based style properties for the mx:Alert as you can see here - although there is one to adjust the height of the header named 'headerHeight'.
You could try extending the mx:Alert class and giving it new style properties that would allow you to change the dimensions via CSS. Or you could extend the class and give it default dimensions in its constructor.
You can't do it out of the box, but you could do it by extending your Alert and adding your own logic in the updateDisplayList to check for the style and change the property appropriately.
Generally not recommended however. Just use the properties given to you instead.
How can I skin, or otherwise change, the default cursor (white arrow) displayed in a Flex application?
Yes, this is possible. You'll need to leverage mx.managers.CursorManager.
There's no way to replace the cursor graphic, but you achieve this by adding a new cursor to the manager with a high priority:
CursorManager.setCursor(myCursor, CursorManagerPriority.HIGH);
In the above example, myCursor can be a JPEG, GIF, PNG, or SVG image, a Sprite object, or a SWF file. Additionally, setCursor accepts two additional parameters, xOffset:Number = 0, yOffset:Number = 0, which you can use to, well, offset the image from the actual pointer position, if you need to.
Re: Your comment:
I believe you're correct. There's no way I know of to override a components hover cursor other than some event foo. Keep in mind that it is the most recently added cursor with the highest priority (to the `CursorMangager, of course) that gets displayed.
If you wat to change the cursur you need to check the mouse when it is currently over the TextField sub-object of the Flex TextInput control:
<?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/halo" minWidth="1024" minHeight="768" mouseMove="application1_mouseMoveHandler(event)">
<fx:Script>
<![CDATA[
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if(event.target is TextField)
{
if(TextField(event.target).type == TextFieldType.INPUT)
{
Mouse.hide();
}
}
else
{
Mouse.show();
}
}
]]>
</fx:Script>
<mx:TextInput width="300" />
</s:Application>
This is simply making it go away, but you could use the opportunity to make the cursor anything you want by replacing Mouse.hide() with the CursorManager methods described in the other comments. I don't really consider this event "trickery" and overriding the PlayerGlobals.swc class is always going to be more difficult than the open Flex SDK stuff.
Have a look at the following example:
http://blog.flexexamples.com/2007/09/10/changing-the-cursor-in-a-flex-application-using-the-cursormanager-class/