I am having trouble with handling a click event on a TextArea. I'm developing a mobile app using Flash Mobile. I would like to display a default text in the area and make it disappear when the user selects the field.
The issue is, that the event is thrown only when I click on the border of the TextArea. It never happens when a selection cursor is active. I also tried to add a false editable property to notesInput and set it to true in the handler and it didn't help.
private function notesClickHandler(event:Event):void{
notesInput.text = "";
notesInput.removeEventListener(MouseEvent.CLICK, notesClickHandler);
form.invalidElements;
}
<TextArea id="notesInput" text="Poznámky.."
height="150" width="100%"
verticalScrollPolicy="auto"/>
Thank you guys for your time and your help.
You can use prompt text which will fulfill your requirement:
<s:TextArea id="notesInput"
prompt="Default Text"
height="150" width="100%"
verticalScrollPolicy="auto"/>
It will not clear the default text when you focus in. But you can make that happen by clearing prompt text when you focus in the TextArea.
<fx:Script><![CDATA[
private function onFocusIn():void
{
notesInput.prompt = "";
}
private function onFocusOut():void
{
notesInput.prompt = "Default Text";
}
]]></fx:Script>
<s:TextArea id="notesInput"
prompt="Default Text"
height="150" width="100%"
verticalScrollPolicy="auto"
focusIn="onFocusIn()"
focusOut="onFocusOut()"/>
For that you can use an focusIn event like this :
private function text_area_focusInHandler(event:FocusEvent):void
{
text_area.text = ''
}
<s:TextArea id="text_area" x="10" y="10" focusIn="text_area_focusInHandler(event)" text="default text"/>
Related
We are developing a small desktop application by using Adobe Flex. In this application, we will have a screen with input box in which user will enter URL of any website and then enter.
After providing URL, the desktop application will open that webpage into the same screen just below the URL input box. Also we want to give an option to capture screenshot of that opened webpage manually(i.e on button click).
When the webpage is open in desktop app, then our screen should be work like browser i.e we can go to any internal page by clicking webpage instead of providing another URL into input box.
We have searched lot of things regarding the same, but nothing got. Can anyone explain us, how can we implement this type of functionality into our desktop application? or Is it possible to make this application using Adobe Flex?
Your solution will be appreciated. Thanks in advance.
You can do that using the HTML control.
Take this example :
<?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"
width="920" height="580">
<fx:Script>
<![CDATA[
protected function btn_history_back_clickHandler(event:MouseEvent):void
{
// history back
html_browser.historyBack();
}
protected function btn_history_forward_clickHandler(event:MouseEvent):void
{
// history forward
html_browser.historyForward()
}
protected function btn_go_clickHandler(event:MouseEvent):void
{
var url:String = txt_url.text;
if(url != '')
{
if(url.substr(0, 4) == 'http')
{
// open the typed url
html_browser.location = url;
}
}
}
protected function html_browser_locationChangeHandler(event:Event):void
{
// update our url text input
txt_url.text = html_browser.location;
}
]]>
</fx:Script>
<mx:HTML id="html_browser" x="6" y="39" width="905" height="511"
locationChange="html_browser_locationChangeHandler(event)"/>
<s:Button id="btn_forward" x="38" y="10" width="28" label=">" click="btn_history_forward_clickHandler(event)"/>
<s:Button id="btn_go" x="858" y="10" width="50" label="GO" click="btn_go_clickHandler(event)"
enabled="true"/>
<s:TextInput id="txt_url" x="74" y="10" width="775"/>
<s:Button id="btn_back" x="10" y="10" width="28" label="<" click="btn_history_back_clickHandler(event)"/>
</s:WindowedApplication>
Which will give you something like this ( it's the same window just I pressed the back button to show the different pages ) :
Of course this is just a very simple example to show you how to start, you can improve and adapt it to your specific needs.
Hope that can help.
I have a label a textInput and a button like below
<s:TextInput id="inputTxt"/>
<s:Label id="lbl" height="50" width="100" backgroundColor="blue"/>
<s:Button id="btn" label="Marquee" height="40" width="80" click="btn_clickHandler(event)"/>
and my function updates the lbl.text on btn click and its working.
But i need to update the label text dynamically and my function looks like this
protected function btn_clickHandler(event:MouseEvent):void
{
str = inputTxt.text;
strLen = str.length;
lbl.text = updateLabel(inputTxt.text);
}
private function updateLabel(str:String):String
{
var displayFact:int;// code should be updated here
if(strLen > 14)
displayFact = 12;
else
displayFact = strLen;
return new String(str).substr(0,displayFact);
}
can you suggest how can i calculate displayFact so that according to lbl.width and str.length it will changes and the str should fit the width of the label.
There is no easy way because the width of a char is not constant and the font is not the same.
Look here and here
Instead if what you are trying to achieve is just hide the exceeding text you can truncate using
<s:Label id="lbl" height="50" width="100" maxDisplayedLines=1 backgroundColor="blue"/>
What is the code to check if mouse is clicked inside a child element when the click event is for parent element. I need to differentiate to perform certain tasks only if the click is inside the child element. What kind of propagation happens in flex? I am bit new to this.
I have a video player with video display and video controls bar. I register click event for video player which occupies the full screen. On click the controls bar should toggle (as programmed) which it does, but on clicking any element in the control bar the entire bar dissapears.
<!-- Player Container -->
<s:BorderContainer width="100%" height="100%"
backgroundAlpha="0"
borderVisible="false">
<s:VideoPlayer id="vid_player"
width="100%" height="100%"
verticalCenter="0"
horizontalCenter="0"
skinClass="Skins.VideoPlayerSkin"
maintainProjectionCenter="true"
mouseDown="hideControls(event)"
autoPlay="true" source="{current_video.getSource()}"/>
</s:BorderContainer><!-- Player Container -->
public function hideControls(event:Event):void {
hidePlaylist();
toggleElem(header);
toggleElem(sec_drop_container);
toggleVideoPlayer();
}
public function toggleVideoPlayer() {
var controls:Object = vid_player.videoDisplay.parent.getChildAt(1);
if(controls.visible)
controls.visible=false;
else
controls.visible = true;
}
Probably the simplest way is:
private function mouseHandler(event:MouseEvent/*was e:MouseEvent*/):void {
whateverObject.hitTestPoint(event.stageX, event.stageY, false); // use shape flag is 3rd argument
}
Apologies for the vague title. I could not think of a better way to word it in so few words.
Basically, I am creating a custom ItemRenderer (IR). The IR has a label on the left side and an icon on the right side. The icon on the right side is dynamic (can be either an add or remove icon or nothing at all). This works beautifully and gives me the control I need over it.
Now, the problem is that when I scroll the list in my mobile application, the icons change.
How it should look:
How it looks after scrolling using a finger (or mouse in emulator) by dragging on Test3:
As you can see, the icons change but the labels do not. I have dragEnabled, dropEnabled, and dragMoveEnabled all set to false on my Spark List component. The only time the icon selection runs is on creationComplete, so there is no way it is choosing a different icon at some point. I can also verify that the data itself is what it should be after this change occurs.
Here is the MXML that creates the item:
<s:HGroup width="100%" verticalAlign="middle" left="{this.sideSpacing}" right="{this.sideSpacing}" top="{this.sideSpacing}" bottom="{this.sideSpacing}">
<s:Label id="text" width="100%"/>
<s:Image id="actionIcon" buttonMode="true" click="actionIconClick( event );">
<s:filters>
<s:DropShadowFilter alpha=".45" angle="90" distance="3" blurX="3" blurY="3" quality="3"/>
</s:filters>
</s:Image>
</s:HGroup>
<s:Rect width="100%" height="1" bottom="0" alpha=".1">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
And the possibly over-elaborate AS3 for selecting which icon should be displayed:
private function creationComplete( e:Event ):void {
if ( this.data.actionIcon != null ) {
this.actionIconType = this.data.actionIcon;
if ( this.data.actionIcon == ACTION_ICON_ADD ) {
this.actionIcon.source = this.addBitmapSource;
}
else if ( this.data.actionIcon == ACTION_ICON_REMOVE ) {
this.actionIcon.source = this.removeBitmapSource;
}
else {
this.actionIcon.source = null;
this.actionIcon.visible = false;
this.actionIcon.includeInLayout = false;
}
}
else {
this.actionIcon.source = null;
this.actionIcon.visible = false;
this.actionIcon.includeInLayout = false;
}
}
What could be causing this issue?
Basically, you need to update your renderer's label and icon when the dataChange event is fired. CreationComplete is only fired once. The list isn't really scrolled, just that the data in the itemRenderers change; causing it to look like things are scrolling. I call this renderer recycling.
Here is a component I created for a mobile app that does what you want. It displays a label and an icon (AKA the Decorator). When scrolling the label and icon are both updated. You can use a very similar approach.
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
dataChange="onDataChange(event)" alpha=".7" width="100%" cacheAsBitmap="true">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.dotcomit.magondaMaze.managers.BoardDataManager;
import com.dotcomit.magondaMaze.managers.StatManager;
import mx.events.FlexEvent;
[Embed(source="assets/images/chooseLevel/completed78x78.png")]
private var completedImage:Class;
public var statManager :StatManager = StatManager.instance;
protected function onDataChange(event:FlexEvent):void
{
var itemAsXML :XML = data as XML;
var results :String = itemAsXML.#id + '. ' + itemAsXML.#title;
label = results;
if( statManager.isBoardComplete(itemAsXML.#id)){
this.decorator = completedImage;
} else {
this.decorator = null;
}
}
]]>
</fx:Script>
</s:IconItemRenderer>
I'll also add that the IconItemRenderer component--which my code above extends--is designed to do exactly what you need. So, you may not have to re-write the wheel so to speak.
Here is my problem. I have a s:GridItemRenderer (the spark DataGrid size where I use this, is: 100% x 100%) and here is the function in it:
override public function prepare(hasBeenRecycled:Boolean):void {
myLabel.text = width.toString();
}
and here is the "myLabel" in it:
<s:Label id="myLabel" x="0" y="0" width="100%" height="20" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
SO AND THE PROBLEM IS:
When i drag the side of the window, and resize it everything is fine! myLabel is updating, but sometimes the last column doesn't. BUT when I maximize the window, NOTHING happend, BUT the "width" variable is updated, but the myLabel.text doesn't. (so I try to use this.width too, but it isn't take effects)