I've got a text-edit in a window and the text edit fills the entire window. The problem is that after filling in text in the text edit, if you immediately close the window the text-edit won't save it's changes back to the field it is bound to.
It will save changes when you de-focus the text edit then click close, but not if you click close directly after typing in the text edit.
Is there a way to force the text-edit to store it's value when the window's close button is clicked?
Here is an example setup:
<button left="0" top="0" width="100" height="26" label="string">
<action:when event="onClick">
<action:call-widget-method method="win-test.show"/>
</action:when>
</button>
<window left="0" top="0" width="250" height="350" name="win-test" visible="n">
<text-edit left="0" top="0" right="0" bottom="0" field="var.test" multi-line="y" name="te-test"/>
</window>
Using the workaround suggested by Tristan.
Here's the updated example xml:
Added a button inside the window that closes it, and disabled the window widget's built in close button.
<button left="0" top="0" width="100" height="26" label="string">
<action:when event="onClick">
<action:call-widget-method method="win-test.show"/>
</action:when>
</button>
<window left="0" top="0" width="250" height="350" name="win-test" visible="n" closable="n">
<text-edit left="0" top="0" right="0" bottom="45" field="var.test" multi-line="y" name="te-test"/>
<button right="10" bottom="7" width="80" height="32" label="Close" validate="n">
<when event="onClick" xmlns="urn:aviarc:widget:com.aviarc.toronto.widget.core.action">
<call-widget-method method="win-test.hide"/>
</when>
</button>
</window>
Related
I have a list but want to hide the scrollbar but still keep the functionality. If I put verticalScrollPolicy="off", this disables scrolling via the mousewheel on windows (100% of my users use windows). How can I hide the scrollbar visually but keep the ability to scroll via the keyboard as well as the mousewheel?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" height="100%" width="100%">
<s:Group>
<s:List id="listy" width="50%" height="100">
<mx:ArrayCollection>
<fx:String>Flash</fx:String>
<fx:String>Director</fx:String>
<fx:String>Dreamweaver</fx:String>
<fx:String>ColdFusion</fx:String>
<fx:String>Flash</fx:String>
<fx:String>Director</fx:String>
<fx:String>Dreamweaver</fx:String>
<fx:String>ColdFusion</fx:String>
<fx:String>Flash</fx:String>
<fx:String>Director</fx:String>
<fx:String>Dreamweaver</fx:String>
<fx:String>ColdFusion</fx:String>
</mx:ArrayCollection>
</s:List>
</s:Group>
I believe the way you'd want to do it to set a custom skin for the List, which then sets a custom skin for the Scroller component within it. In the Scroller skin, you could set the scrollbar as visible=false.
Just type:
<s:Scroller id="myScroller" verticalScrollBar="{new VScrollBar()}">
This code solve my problem=)
Ive been looking for a solution for this question , and I think it's a problem many people ancounter , so I decided to answer this question although its quite old.
The solution for your problem is real simple. You simply make a custom skin for the scroller and inside the scroller simply set the vertical scroller "alpha" property set to zero
<s:VScrollBar id="verticalScrollBar" visible="false" alpha="0"/>
Hope this will help someone
You could use verticalScrollPolicy="off" and create a listener for the mouse scroll event to trigger the scrolling when the mouse is hovering the list.
In order to hide scrollbars but still have access to scrolling functionality, you need to create a custom skin and a css style.
Create a custom skin for the VScrollBar with the following settings:
Host Component: spark.components.VScrollBar
Select "Create as copy of:", and select "spark.skins.spark.VScrollBarSkin"
Edit the "SparkSkin" tag in your custom skin by adding "minWidth="0" minHeight="0" width="0" height="0" alpha="0" visible="false" contentBackgroundAlpha="0""
Original
<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" minWidth="15" minHeight="35"
alpha.disabled="0.5" alpha.inactive="0.5" >
Customized
<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" minWidth="0" minHeight="0" width="0" height="0" alpha="0" visible="false" contentBackgroundAlpha="0">
Then edit your custom skin by adding "alpha="0" visible="false" width="0"" to each of the elements:
Original:
<s:Button id="track" top="16" bottom="15" height="54"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.VScrollBarTrackSkin" />
<s:Button id="thumb"
focusEnabled="false" visible.inactive="false" tabEnabled="false"
skinClass="spark.skins.spark.VScrollBarThumbSkin" />
<s:Button id="decrementButton" top="0" enabled.inactive="false"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />
<s:Button id="incrementButton" bottom="0" enabled.inactive="false"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />
Customized:
<s:Button id="track" top="16" bottom="15" height="54" alpha="0" visible="false" width="0"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.VScrollBarTrackSkin" />
<s:Button id="thumb" alpha="0" visible="false" width="0"
focusEnabled="false" visible.inactive="false" tabEnabled="false"
skinClass="spark.skins.spark.VScrollBarThumbSkin" />
<s:Button id="decrementButton" top="0" enabled.inactive="false" alpha="0" visible="false" width="0"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />
<s:Button id="incrementButton" bottom="0" enabled.inactive="false" alpha="0" visible="false" width="0"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />
Add a style to your css (change "assets.skins" to the location of your skin file in your project):
s|List s|VScrollBar {
skinClass: ClassReference("assets.skins.VerticalScrollBarHidden");
}
This style will only apply to List components, so the scroll bar will still be visible for other components. If you want to remove scrollbars altogether, remove "s|List" from the style definition.
Finally add the stylesheet to your application mxml component (replace "assets/css/Styles.css" with the location of your stylesheet):
<fx:Style source="assets/css/Styles.css"/>
How can Application's ControlBar be moved to its bottom in Flex 4.5 ?
The Adobe doc says only:
By default, the ApplicationSkin class defines the control bar area to
appear at the top of the content area of the Application container
with a grey background. Create a custom skin to change the default
appearance of the control bar.
So I look at spark.skins.spark.ApplicationSkin and there is a controlBarGroup (does it hold the ControlBar contents?), but I don't know how to move it from top to the bottom.
First thing you have to do is create a custom skin class. In FlashBuilder (FB) there's an option to create one automatically, but in essence it's just a class like any other.
In FB, right-click somewhere in your project and select 'New > MXML Skin'
Then fill in the wizard form as follows:
Otherwise just create a new .mxml file and copy/paste the code from spark.skins.spark.ApplicationSkin into it.
Then in your application assign the skin class you've just created:
<s:Application ... skinClass="skins.MyApplicationSkin" />
Now let's edit your newly created skin class. This is the part that is of interest to you (I'll cut out some pieces to make it clearer):
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<!-- some graphic elements here -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
<s:layout>
<s:HorizontalLayout ... />
</s:layout>
</s:Group>
</s:Group>
<s:Group id="contentGroup" width="100%" height="100%" ... />
</s:Group>
Almost there. Now all we need to do, is move that 'topGroup' beneath the 'contentGroup'. 'topGroup' contains some graphics + the controlBarGroup. 'contentGroup' is the area where all components will be inserted that you but in you application .mxml file.
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup" width="100%" height="100%" ... />
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<!-- some graphic elements here -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
<s:layout>
<s:HorizontalLayout ... />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
You could try moving the control bar group under the content group and it should behave as expected, especially if you look at the parent group's layout(vertical).
If you would like to exercise even more control over it, override the partAdded method.
I have a Popup skinned TitleWindow that I am using as a popup, but the items behind it are receiving mouse over and click events. Is there an option that lets me prevent mousevents from happening behind the main content group of the window?
EDIT: To clarify - I'm not asking how to make a window modal. Items literally behind the popup - not on the main form but to the side, but behind and hidden - are receiving mouse events when the user clicks on an area of the contentGroup skin part. This doesn't happen if the user clicks on items within that group, but a slight miss might trigger an unexpected background button.
When you create the pop up set modal=true. Something like:
var pop:MyPopUpClass = PopUpManager.createPopUp(parent, MyPopUpClass, true) as MyPopUpClass;
You need to make your popup window as modal window. when u make something modal, it means that window (Alert, popup, titleWindow etc) will remain at top and rest of the screen freezes till the top window closes.
"The PopUpManager also provides modality, so that windows below the popup cannot receive mouse events, and also provides an event if the user clicks the mouse outside the window so the developer can choose to dismiss the window or warn the user."
Default value of modal is false. you can set it to true by pasing true while addPopup or createPopup
public static function addPopUp(window:IFlexDisplayObject, parent:DisplayObject, modal:Boolean = false, childList:String = null):void
public static function createPopUp(parent:DisplayObject, className:Classe, modal:Boolean = false, childList:String = null):IFlexDisplayObject
I solved this by replacing this:
<s:SparkSkin ...>
<s:Rect height="{hostComponent.height}" radiusX="10" width="{hostComponent.width}">
<s:fill>
<s:SolidColor color="#F5F4EB"/>
</s:fill>
</s:Rect>
<!-- header, move area, close button and other details -->
<s:Group id="contentGroup"
top="40"
left="10"
right="10"
bottom="10">
</s:Group>
</s:SparkSkin>
With this:
<s:SparkSkin ...>
<s:Rect height="{hostComponent.height}" radiusX="10" width="{hostComponent.width}">
<s:fill>
<s:SolidColor color="#F5F4EB"/>
</s:fill>
</s:Rect>
<!-- header, move area, close button and other details -->
<s:Group top="40"
left="10"
right="10"
bottom="10">
<s:Rect top="0"
left="0"
right="0"
bottom="0">
<s:fill>
<s:SolidColor color="0xF5F4EB" />
</s:fill>
</s:Rect>
<s:Group id="contentGroup"
top="0"
left="0"
right="0"
bottom="0">
</s:Group>
</s:Group>
</s:SparkSkin>
Creating a rectangle object behind the group has made it so that it accepts click events normally.
If you aren't looking for the modal answer, then all I can recommend is removing all relevant listeners when the popup is opened, and adding them back when the popup is removed.
x.removeEventListener(MouseEvent.CLICK...
PopUpManager.addPopup(...
onClose(...
x.addEventListener(MouseEvent.CLICK...
Try using the opaqueBackground property.
I have trying to skin TabBar and NavigatorContent.
Please see image for explanation - All tabs are transparent (alpha 0.6) and also their borders.
How can I remove top border from NavigatorContent under selected buttonTab ?
How its must be:
Trying to use BlendMode.ERASE:
Application code:
...
<s:SkinnableContainer blendMode="layer" ... skinClass="skins.TabBorder">
<mx:ViewStack ...>
<s:NavigatorContent label="Search" skinClass="skins.TabSkin" />
<s:NavigatorContent label="Customer Info" skinClass="skins.TabSkin" />
</mx:ViewStack>
<s:TabBar dataProvider="{myViewStack}" ... />
</s:SkinnableContainer>
...
skins.TabBorder:
<s:Rect left="0" right="0" top="25" bottom="0" radiusX="6" topLeftRadiusX="0">
<s:stroke>
<s:SolidColorStroke color="#ffffff" alpha="0.3" />
</s:stroke>
</s:Rect>
skins.TabBarButtunSkin:
<!-- its black rect which clears all under -->
<s:Rect blendMode="erase" top="0" left="0" right="0" bottom="-2" topLeftRadiusX="6" topRightRadiusX="6" includeIn="selectedStates, overStates">
<s:fill>
<s:SolidColor color="#000000" />
</s:fill>
</s:Rect>
Perhaps there is an easier way?
<... borderSides=”left bottom right” borderStyle=”solid” borderThickness=”1″ ...>
also you can write your own skin
or extend the component itself
With the Flex 3 SDK you simply needed to set the borderThickness style to 0, or set borderStyle to none. With the Flex 4 SDK ad the Spark theme, this has no effect.
Try something like:
borderVisible="false"
If you want to remove the border from spark TextArea's here are some ways to do so:
To make all spark TextAreas have no border you can do this:
s|TextArea {
borderVisible : false;
}
You can also make a simple style and only apply them to specific spark TextAreas like so:
.noBorder {
borderVisible : false;
}
...
<s:TextArea styleName="noBorder"/>
You can turn it off via creation complete like so:
<s:Application ...
creationComplete="onCreationComplete()"/>
...
private function onCreationComplete() : void {
mySparkTextArea.setStyle('borderVisible', false);
}
...
<s:TextArea id="mySparkTextArea"/>
</s:Application>
Finally, you can make a skin, per DrMaxmAd's suggestion, like so:
...
<!-- border/fill -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>
...
I haven't dabbled in Flash Builder 4 yet, but I know in Flex 3 you can modify things like this (when its not possible another way):
var tb:TextInput = new TextInput();
tb.getChildAt(0).setStyle(...);
Might want to give this a try, you just need to find the correct child element usually.
EDIT: Here's your answer
You have to set the borderSkin to null
<mx:TextArea borderSkin={null} />
Jeol your answer works for MX components, for the flex 4 spark textarea component you set borderVisible="false" and in code lblMessage.setStyle("contentBackgroundAlpha", 0);
Also, if your doing this, you probably want the hack to make the damn thing autosize to it's content... set heightInLines="{NaN}"
<s:TextArea borderVisible="false" focusEnabled="false" width="100%" id="lblMessage" heightInLines="{NaN}" editable="false" selectable="true" lineBreak="toFit" verticalScrollPolicy="off" horizontalScrollPolicy="off" />
protected function OnCreationComplete(objEvent:Event):void{
lblMessage.setStyle("contentBackgroundAlpha", 0);
}
...and Thanks for RobotLegs, it's freaking awesome!
well i have tried the above code but it does not work for me Flex Hero SDK 4.5, so what i did i selected the textArea and created a new custom skin and change the border alpha to 0.
<!-- border/fill -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>
simple and sweet
In Flex 3: The border for TextArea component can be controlled by using these two attributes/properties:
borderSkin="{null}"
focusAlpha="0"
Focus alpha ensures that you don't get the border showing up even when the TextArea is selected.