Appending a textarea text field on Flex - apache-flex

Is there a spark TextArea decleration in actionscript3 file since private var ta:TextArea is a mx component?

Yes there is:
<?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:TextArea id="textArea">This is a spark TextArea component</s:TextArea>
</s:Application>
or:
<?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"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.TextArea;
private var _textArea:TextArea;
private function init(e:FlexEvent):void
{
_textArea = new TextArea();
_textArea.text = "This is a spark TextArea component";
addElement(_textArea);
}// end function
]]>
</fx:Script>
</s:Application>

Related

How to create draggable panel without title in Flex?

I want to drag my panel without title when I drag any part of it. I already know how to remove title from panel and I know how to drag it with title bar. But i don't know how to drag without title.. Please help.
Here is my example
//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"
minWidth="955" minHeight="600" creationComplete="init(event)">
<fx:Script>
<![CDATA[
import com.dragpanel.MyPanel;
import mx.events.FlexEvent;
protected function init(event:FlexEvent):void
{
var panel:MyPanel = new MyPanel();
panel.width = 300;
panel.height = 200;
panel.title = "Hello";
this.addElement(panel);
}
]]>
</fx:Script>
</s:Application>
//MyPanel.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Panel 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="150" height="80" title="Hello"
mouseDown="onMouseDown(event)" mouseUp="onMouseUp(event)"
skinClass="com.dragpanel.PanelNoTitleBar">
<fx:Script>
<![CDATA[
protected function onMouseDown(event:MouseEvent):void
{
this.startDrag();
}
protected function onMouseUp(event:MouseEvent):void
{
this.stopDrag();
}
]]>
</fx:Script>
<s:HGroup verticalAlign="bottom" x="10" y="10">
<s:Label text="Name:"/>
<s:TextInput width="60"/>
</s:HGroup>
</s:Panel>
How are you starting the drag using the title bar? Do you have a mouseDown listener on the titlebar section of the Panel? You can just move the mouseDown listener to the Panel itself.

Setting up Dataprovider

I have a php service like this.
<stockproductservice:StockproductService id="stockproductService"
fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
showBusyCursor="true"/>
and it use a php serivce.
how should I set up the dataprovider in the itemRedenerer?
<s:DataService source="{stockproductService.getAllStockproduct1()}"/>
and
<s:WebService source="{stockproductService.getAllStockproduct1()}"/>
are not working.
If your question is how to set up a WebService to populate a dataProvider in the simplest form it could be this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="creationCompleteHandler(event)"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:List dataProvider="{restaurants}" labelField="name" />
<fx:Declarations>
<s:WebService id="RestaurantWS" wsdl="http://examples.adobe.com/flex3app/restaurant_ws/RestaurantWS.xml?wsdl" />
<s:CallResponder id="getRestaurantsResult"
result="restaurants = getRestaurantsResult.lastResult as ArrayCollection"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
public var restaurants:ArrayCollection;
protected function creationCompleteHandler(event:FlexEvent):void
{
getRestaurantsResult.token = RestaurantWS.getRestaurants();
}
]]>
</fx:Script>
</s:Application>

load image from filesystem in flex

i have the following:
<s:Image source="{path}/imageName"/>
how can i determine that path to load the image from filesystem lets say from
C:\Users\sstauross\Desktop ??
Edit : If you want to select a specific path, the user will have to confirm the path himself first using the FileSystemList
<?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">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var userPath:String;
protected function button_clickHandler(event:MouseEvent):void
{
userPath = fsList.selectedPath;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:FileSystemList id="fsList"/>
<s:Label text="{fsList.selectedPath}"/>
<s:Button label="Confirm folder selection" click="button_clickHandler(event)"/>
</s:WindowedApplication>
Here's one way to do it
<?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" creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Bindable]
private var desktopPath:String;
protected function creationCompleteHandler(event:FlexEvent):void
{
desktopPath = File.desktopDirectory.nativePath.toString();
}
]]>
</fx:Script>
<mx:Image source="{desktopPath}/myFile.jpg"/>
</s:WindowedApplication>
The answer to what i was looking was very simple because i put
<s:Image source="C:\Users\sstauross\Desktop\imageName"/>
instead of
<s:Image source="C:/Users/sstauross/Desktop/imageName"/>
notice the "\" instead of "/"...
Thanks a lot for your answers!

Access Component Properties From Extending Component

I have a component with a public variable declared
[Bindable]
public var mnuSource:String;
When I extend this component, I can reference mnuSource (it compiles) but Runtime complains about the property not being accessible (error 1056).
How do you modify / declare component properties so they are actually available to other components?
Thanks
Same as The_asMan but in MXML
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:local="*"
>
<local:SomeExtendedComponent />
</s:Application>
Some Base Component
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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[
[Bindable]
public var mnuSource:String;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:Group>
Extended Component
<?xml version="1.0" encoding="utf-8"?>
<local:SomeBaseComponent 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:local="*"
creationComplete="cc(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function cc(event:FlexEvent):void
{
mnuSource = "Hi there!";
Alert.show(mnuSource);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text="{mnuSource}" />
</local:SomeBaseComponent>
This is untested code but should work and give you a good idea how to extend a class.
MyBaseClass.as
package{
public class MyBaseClass{
public var someVar:String;
public function MyBaseClass( )::void{
this.someVar = 'set from MyBaseClass';
}
}
}
MyBaseclassExtended.as
package{
public class MyBaseclassExtended extends MyBaseClass{
public MyBaseclassExtended( ){
this.someVar = 'Set from MyBaseclassExtended';
}
}
}
call it like so
var asdf:MyBaseclassExtended = new MyBaseclassExtended();
trace( asdf.someVar ) // Set from MyBaseclassExtended

Flex 4: Event Listener created, but not being called?

I'm trying to call an event I've created in another component. I've added trace() into my methods so I can see what's being called. Everything except for the event listener (myEvent) is being called. Can anyone tell me why this is please?
Any help would be greatly appreciated. Thanks in advance.
// TestApp.mxml (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"
xmlns:com="com.*"
creationComplete="initApp()">
<fx:Script>
<![CDATA[
import com.MyPopUp;
import mx.managers.PopUpManager;
protected function initApp():void
{
var popUp:MyPopUp = new MyPopUp();
PopUpManager.addPopUp(popUp, this);
}
]]>
</fx:Script>
<com:MyComp/>
</s:WindowedApplication>
// MyComp.mxml (component)
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup 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="100%" height="100%"
creationComplete="initComp()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.DynamicEvent;
protected function initComp():void
{
trace('init MyComp()');
this.addEventListener('myEvent', myEvent);
}
private function myEvent(event:DynamicEvent):void
{
trace('myEvent()');
Alert.show('Event Called!', 'Success');
}
]]>
</fx:Script>
</s:VGroup>
// MyPopUp.mxml (component)
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="100" height="100">
<fx:Script>
<![CDATA[
import mx.events.DynamicEvent;
import mx.managers.PopUpManager;
private function call(event:MouseEvent):void
{
trace('call()');
PopUpManager.removePopUp(this);
var evt:DynamicEvent = new DynamicEvent('myEvent');
evt.value1 = '1234';
dispatchEvent(evt);
}
]]>
</fx:Script>
<s:Button click="call(event)" label="Call Event"/>
</s:Group>
MyComp and MyPopup aren't in the same display list hierarchy, so the bubbling event isn't being seen.
If you are wanting to send messages across components in this way consider using some sort of global event dispatcher, using using a shared model between the two components in order to see data changes.

Resources