I have a small issue related to my web App developed in Flex 4.6.
I have an app which has 800 x 600 px and in some screens, not all the content is shown and no scroll appear in the browser.
How can I setup the app to be able to show the y-scroll in the browser?
Regards.
I had similar problem - with a card game as Flex 4 web app 700 x 525 px - played mostly by older folks and they often have fonts/webpage zoomed (for example by using CTRL and + keys in browser) - which caused the UI be offset (like PopUpWindow not centered) etc.
My solution has been to use a custom app skin.
Here some excerpts of my code:
MyApp.mxml:
<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"
initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL"
skinClass="MySkin">
...
MySkin.mxml: (even works in full screen mode)
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
....
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<s:Group id="mainGroup" x="0" y="0" width="700" height="525">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup" width="700" height="100%" minWidth="0" minHeight="0" />
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<s:Rect left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#66BBEE" />
<s:GradientEntry color="#3399CC" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect left="2" right="2" bottom="0" height="1" alpha="0.5">
<s:fill>
<s:SolidColor color="#333333" />
</s:fill>
</s:Rect>
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="6" paddingRight="6" paddingTop="6" paddingBottom="6" gap="10" />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
</s:Skin>
You need to add an Scroller to the components that you want to scroll and make sure you have set verticalScrollPolicy to "auto".
http://help.adobe.com/en_US/flex/using/WSb04c7610c3432839-13869d09121418556f1-7ffc.html
Related
I have a Windowed application with a custom skin and the skin contains Title bar which too uses a custom skin. Now the problem is that I need to hide the minimize and maximize button dynamically if the window is set to full-screen. Please help...
my title bar skin code
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
minHeight="24">
<fx:Metadata>
[HostComponent("spark.components.windowClasses.TitleBar")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalAndMaximized" stateGroups="maximizedGroup" />
<s:State name="disabledAndMaximized" stateGroups="maximizedGroup" />
</s:states>
<!-- fill -->
<!--- Defines the background color of the skin. -->
<s:Rect id="background"
left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="#2ecbd8"/>
<s:GradientEntry color="white" ratio="0.45"/>
<s:GradientEntry color="white" ratio="0.55"/>
<s:GradientEntry color="#2ecbd8"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Group
id="contentGroup"
minHeight="24"
width="100%"
height="100%"
left="10"
right="10" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" gap="5" />
</s:layout>
<s:BitmapImage id="titleIconImage" minWidth="0" fillMode="clip"/>
<s:Label id="titleText" text="{hostComponent.title}" minWidth="0" fontSize="9" color="#585858" maxDisplayedLines="1" width="100%" />
<s:Button id="minimizeButton"
skinClass="spark.skins.spark.windowChrome.MinimizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
/>
<s:Button id="maximizeButton"
skinClass="spark.skins.spark.windowChrome.MaximizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
/>
<s:Button id="closeButton"
skinClass="spark.skins.spark.windowChrome.CloseButtonSkin"
verticalCenter="0" />
<fx:Script>
<![CDATA[
import spark.skins.spark.windowChrome.MaximizeButtonSkin;
]]>
</fx:Script>
</s:Group>
</s:SparkSkin>
my windowed application skin code
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:ui="com.youspin.components.ui.*"
depth="-10">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.WindowedApplication")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabledAndInactive" />
<s:State name="normalAndInactive" />
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<s:TitleBar left="0" right="0" top="1"
title="YouSpin"
height="{0.067*height}"
skinClass="skins.titleSkin"/>
<s:Group id="contentGroup" left="0" top="0" right="0" bottom="0" />
</s:Skin>
this is my application
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
applicationComplete="fullScreen()"
width="910" height="728"
skinClass="skins.uiskin">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
public function fullscreen():void{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
//hide button from here but how??
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
try making a bindable boolean somewhere, where you store the fullscreenstate. then minimizebutton should have attributes includeinLayout and visible binded to it. (and maximize would be the opposite:
<s:Button id="minimizeButton"
skinClass="spark.skins.spark.windowChrome.MinimizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
visible="{!isFullScreen}"
/>
I have the list shown below:
<s:List id="list2" width="100%" height="100%" dataProvider="{ recordingsShown }"
itemRenderer="components.VideoItemRenderer2"
selectedIndex="0" visible="false">
<s:layout>
<s:TileLayout id="tilelayout"
useVirtualLayout="true"
orientation="columns"
columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight"
requestedColumnCount="3"
requestedRowCount="2"
paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
verticalGap="10" horizontalGap="10" />
</s:layout>
</s:List>
which displays in tiles a name, a date and a preview image for each one of the videos contained in the arraycollection recordingsShown given as dataprovider.
The problem is when a new video is added,i save the preview pic in a folder and a node describing it in an xml and i put a new item in the arraycollection with
recordingsShown.addItemAt(newRecording,0);
it is added on stage but the preview image of the last added video is not shown!
How can i redraw the whole list in order to show it?
Here is my itemRenderer:
<?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"
width="400" height="300" autoDrawBackground="true">
<fx:Metadata>
[Event(name="playClicked", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import flash.filters.GlowFilter;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
protected function img_rollOverHandler(evt:MouseEvent):void {
Image(evt.currentTarget).filters = [new GlowFilter(0xf7941d)];
Image(evt.currentTarget).alpha = 0.9;
}
protected function img1_rollOutHandler(evt:MouseEvent):void {
Image(evt.currentTarget).filters = [];
Image(evt.currentTarget).alpha = 1;
}
protected function playClickHandler(event:MouseEvent):void
{
dispatchEvent(new Event("playClicked",true,true));
}
]]>
</fx:Script>
<fx:Declarations>
<s:DateTimeFormatter id="dateTimeFormatter"
dateTimePattern="DD.MM.YYYY HH.NN.SS"/>
</fx:Declarations>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
<s:filters>
<s:DropShadowFilter alpha="0.32" alpha.hovered="0.5" blurX="5" blurY="5" distance="2" />
</s:filters>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x323232" color.selected="black"/>
<s:GradientEntry color="#7f7f7f" color.selected="0x333333"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#ffffff" color.hovered="#f7941d" color.selected="#ed7f09" caps="none" weight="2" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Rect>
<s:Label left="10" top="10"
fontStyle="italic"
fontWeight="bold"
color="#f7941d"
text="{dateTimeFormatter.format(data.date)}"/>
<s:Label left="10" top="25"
fontSize="16"
fontWeight="bold"
color="#ffffff"
text="{data.name}"/>
<s:Image id="previewImg" left="10" right="10" bottom="10" top="55" scaleMode="stretch" smooth="true"
source="http://localhost:5080/thumbs/{data.thumb}" />
<!-- source="assets/img.jpg"/> -->
<s:Image source="assets/play.png"
rollOver="img_rollOverHandler(event);"
rollOut="img1_rollOutHandler(event);"
x="136" y="102"
click="playClickHandler(event)"
complete="this.invalidateSize()"/>
</s:ItemRenderer>
I have found that there seems to be a problem with data binding and the Spark Image. Try adding this to the root tag:
dataChange="yourImage.validateNow();
If that doesn't work, set the whole path in dataChange.
So I'm loading a really big pic in this mx:Image manteinAspectRatio enabled with a height constraint and as usual it doesn't work (Flex is definitely not for me):
<?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">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<mx:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
<s:VGroup id="a" top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">
<s:Group id="b">
<s:Rect id="c" top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
<s:fill>
<mx:SolidColor color="#cccccc"/>
</s:fill>
</s:Rect>
<s:VGroup id="d" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
<mx:Image id="e" source="big.jpg" maxHeight="300" maintainAspectRatio="true" />
</s:VGroup>
</s:Group>
</s:VGroup>
</s:Application>
The big.jpg has more width than height so when it's resized the wrapping containers get the correct new height but they still have the old width.
I've tried to call validateNow() on every element, invalidate, callLater(), resize event, compete event... I'm a noob getting tired of AS 3.0
UPDATE:
Reading J_A_X answer I ended up with 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">
<fx:Script>
<![CDATA[
import flash.events.Event;
import mx.controls.Image;
private function fix(event:Event):void {
var img:Image = event.target as Image;
var h:uint = 300;
img.width *= h / img.height;
img.height = h;
img.removeEventListener("updateComplete", fix);
}
]]>
</fx:Script>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<mx:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
<s:VGroup top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">
<s:Group>
<s:Rect top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
<s:fill>
<mx:SolidColor color="#cccccc"/>
</s:fill>
</s:Rect>
<s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
<mx:Image source="big.jpg" maintainAspectRatio="false" updateComplete="fix(event)" />
</s:VGroup>
</s:Group>
</s:VGroup>
</s:Application>
I hope that helps another one dealing with Flex.
After looking at Image, it seems that it needs explicit height/width or else it won't scale down properly. It's a bit stupid not to scale to the maxHeight, but you could always use Flex 4.5 Image class instead or just create your own to handle max height/width.
I'm trying to copy/modify the spark skin for the default button, but not sure how to find that skin. When I hover over <s:Button and Ctrl + Click it, it takes me to the Button class, but there isn't any skin information there.
The default button skin is in spark/skins/spark/ButtonSkin and subclasses Skin.
Not sure why you would want to edit that way.
You can make a Skin Class out of a mxml file and reference it with the skinClass
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
</s:Rect>
<s:Label id="labelDisplay"
alpha.up="1"
alpha.down=".5"
alpha.over=".25"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:Skin>
and in your main application
<s:Button label="Alpha Change" skinClass="mySkins.AlphaButtonSkin"/>
Using FB4, I want to change the height of an open spark DropDownList. By default, it shows up to 6 items before scrolling. My dropdownlist contains 7 items, so I want to change the height of the open dropdown list to fit all 7 items without scrolling. As a workaround, I've changed the font size of the items so that they are smaller and all 7 fit, but the smaller font doesn't look good. Is there a way to change this height? I'm rather new to Flash, so if it's a complicated solution, please be detailed :-).
Isn't it easier if you use the property requestedRowCount of the verticalLayout?
<s:DropDownList dataProvider="{myDataProvider}">
<s:layout>
<s:VerticalLayout requestedRowCount="10"/>
</s:layout>
</s:DropDownList>
The issue is, in Flex 4, the DropDownListSkin has defined maxHeight="134" for the default skin you are probably using. That forces the scrollbar to appear if the objects stretch beyond that height. All you need to do is copy/paste their DropDownListSkin code into a custom skin, and apply that to your DropDownList via CSS:
VariableHeightDropDownListSkin
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled=".5">
<!-- host component -->
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.DropDownList")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="open" />
<s:State name="disabled" />
</s:states>
<s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
<!-- removed maxHeight! -->
<s:Group id="dropDown" minHeight="22">
<!-- border/fill -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="0x5380D0" />
</s:stroke>
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" distance="7" angle="90" alpha="0.45" color="0x6087CC" />
</s:filters>
</s:Group>
</s:PopUpAnchor>
<s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
skinClass="spark.skins.spark.DropDownListButtonSkin" />
<s:Label id="labelDisplay" verticalAlign="middle" lineBreak="explicit"
mouseEnabled="false" mouseChildren="false"
left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
</s:Skin>
Sample Application
<?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">
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace s "library://ns.adobe.com/flex/spark";
s|DropDownList
{
skinClass: ClassReference("VariableHeightDropDownListSkin");
}
</fx:Style>
<s:DropDownList labelField="name" horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:VerticalLayout requestedRowCount="7"/>
</s:layout>
<s:dataProvider>
<mx:ArrayCollection>
<fx:Object name="one"/>
<fx:Object name="two"/>
<fx:Object name="three"/>
<fx:Object name="four"/>
<fx:Object name="five"/>
<fx:Object name="six"/>
<fx:Object name="seven"/>
</mx:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:Application>
Let me know if that helps,
Lance
viatropos answer will work, however you should try and avoid overriding an entire skin as much as possible.
In this case, you will notice that in viatropos's VariableHeightDropDownListSkin code that the Group where he removed the maxHeight attribute, there is also an "id" specified.
Now look at the documentation for DropDownList and you will notice in the SkinParts section that there is a "dropDown" skin part. This is actually a property of DropDownList.
So instead of overriding the skin, you can simply use actionscript (I use UIComponent.DEFAULT_MAX_HEIGHT here, but you can use whichever you wish):
(MyDropDownList.dropDown as UIComponent).maxHeight = UIComponent.DEFAULT_MAX_HEIGHT;
Unfortunately, this is a lot more complicated in Flex 4 than it was in Flex 3:
You should be able to define a layout for the DropDownList with a higher requestedRowCount (details here), but for > 6 rows you need to do more work (Flex issue SDK-25364).
in FB3 it's rowCount cause the dropdown is a descendant of a list control. FB4 is probably similar.
myDropdown.rowCount = 7;
I usually use something more like
myDropdown.rowCount = myDataProvider.lenght();