I'm looking for a Flash/Flex component which will create a "popup" editing balloon, similar to, for example, iCal or Google calendar:
http://img.skitch.com/20090526-phb5mke61anjkfknaekdbjjefw.jpg
(source: iusethis.com)
Does such a thing exist?
The Tooltip Control is what you're looking for. You might want to extend the class to allow for more advanced functionality.
there are fallowing code for balloon popup.
Atul Yadav
http://techy.limewebs.com
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="294" height="104"
backgroundAlpha="1.0" backgroundColor="#FFFFFF" borderColor="#1B86D1"
borderStyle="solid" creationComplete="DrowLine()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.Application;
import mx.managers.PopUpManager;
private function OnClose():void{
PopUpManager.removePopUp(this);
}
private function DrowLine():void{
var pt:Point = new Point(0, -13);
var global:Point = Application.application.localToGlobal(pt);
var origin:Point =global;
var destination:Point = new Point(150,0);
var destination1:Point = new Point(50,0);
var lineThickness:Number = 1;
var lineColor:Number = 0x1B86D1;
var lineAlpha:Number = 1;
//Alert.show(global.toString());
var tip:Canvas = new Canvas();
tip.graphics.clear();
tip.graphics.beginFill(0xffffff,1);
tip.graphics.lineStyle(lineThickness,lineColor,lineAlpha);
tip.graphics.moveTo(origin.x,origin.y);
tip.graphics.lineTo(destination.x,destination.y);
tip.graphics.lineStyle(1,0xffffff,lineAlpha);
tip.graphics.lineTo(50,0);
tip.graphics.lineStyle(1,0x1B86D1,1);
tip.graphics.lineTo(origin.x,origin.y);
tip.graphics.endFill();
addChild(tip);
}
]]>
</mx:Script>
<mx:TextArea x="10" y="25" width="274" id="txt_message" borderColor="#2487CC"/>
<mx:Label x="10" y="75" text="Attach:" width="54" fontWeight="bold" color="#000000"/>
<mx:Button x="58" y="73" label="Browse" cornerRadius="0" borderColor="#288ACF" color="#4DB111"/>
<mx:Button x="219" y="73" label="Save" id="btn_save" name="btn_save" cornerRadius="0" color="#15AE11" borderColor="#308FD1"/>
<mx:Image x="272" y="2" width="18" height="18" source="assets/Close.PNG" click="OnClose()"/>
</mx:Canvas>
Related
For some unknown reason, my popup AlertMsg is visually blocked by the StageWebView:
<?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" applicationDPI="160" xmlns:local="*"
creationComplete="application1_creationCompleteHandler(event)"
backgroundColor="#112233">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
public var webView:StageWebView = new StageWebView();
public function StageWebViewExample():void
{
webView.stage = webContainer.stage;
// webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.viewPort = new Rectangle( 100, 100, 500, 500 );
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
webContainer.addEventListener(Event.ADDED_TO_STAGE, function(ee:Event):void {
StageWebViewExample();
});
}
protected function btnTest_clickHandler(event:MouseEvent):void
{
webView.loadURL("http://www.example.com");
new AlertMsg().open(FlexGlobals.topLevelApplication as DisplayObjectContainer, true);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="AlertMsg">
<s:SkinnablePopUpContainer x="70" y="300">
<s:TitleWindow title="My Message" close="close()">
<s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
<s:Label text="My alert message text here..."/>
<s:Button label="OK" click="close()"/>
</s:VGroup>
</s:TitleWindow>
</s:SkinnablePopUpContainer>
</fx:Component>
</fx:Declarations>
<s:Panel id="thePanel" title="Panel" backgroundColor="blue">
<s:Button id="btnTest" label="Test"
click="btnTest_clickHandler(event)" />
<s:BorderContainer id="webContainer" y="50" width="400" height="300" />
</s:Panel>
</s:Application>
Any idea?
I absolutly agree with #www.Flextras.com, there is no another workaround than substitute WebView by its snapshot. There is a ready solution http://www.judahfrangipane.com/blog/2011/01/16/stagewebview-uicomponent/
Suppose, I have a tabbed application. Can I make Popup window to appear in a given tab only? So, if I change a tab, the related popup(-s) hides. So far, I haven't found any solution for this. So any idea would be greatly appreciated :)
You will have to handle different sets of popups by yourself : Flex can only add and remove given popups which will be displayed at the topmost level of your app.
EDIT : Here's a little sample.
<?xml version="1.0"?>
<!-- containers\navigators\TNSimple.mxml -->
<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"
creationComplete="onCreationComplete()"
>
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import spark.components.TitleWindow;
import mx.events.IndexChangedEvent;
private var popups:Array = [];
private function onCreationComplete():void
{
popups = [[],[],[]];
}
private function createPopup():void
{
var foo:TitleWindow = new TitleWindow();
PopUpManager.addPopUp(foo, this);
PopUpManager.centerPopUp(foo);
popups[nav.selectedIndex].push(foo);
}
private function onTabChange(event:IndexChangedEvent):void
{
var i:int;
var oldArray:Array = popups[event.oldIndex];
for (i = 0; i < oldArray.length; i++) {
PopUpManager.removePopUp(oldArray[i]);
}
var newArray:Array = popups[event.newIndex];
for (i = 0; i < newArray.length; i++) {
PopUpManager.addPopUp(newArray[i], this);
}
}
]]>
</fx:Script>
<mx:TabNavigator id="nav" borderStyle="solid" x="50" y="50" change="onTabChange(event)">
<mx:VBox label="Accounts"
width="300"
height="150">
<mx:Button label="pop" click="createPopup()"/>
</mx:VBox>
<mx:VBox label="Stocks"
width="300"
height="150">
<mx:Button label="pop" click="createPopup()"/>
</mx:VBox>
<mx:VBox label="Futures"
width="300"
height="150">
<mx:Button label="pop" click="createPopup()"/>
</mx:VBox>
</mx:TabNavigator>
</s:Application>
I'm trying to implement a binding between some custom-built models and just beginning to dabble with the whole mx.binding.* collection. I tried this simple, stripped down example, but can't get the binding working correctly. Can somebody tell me where I'm going wrong?
// Model
package
{
import flash.events.EventDispatcher;
public class Model extends EventDispatcher
{
private var m_count:uint = 0;
[Bindable]
public function get Count():uint
{
return this.m_count;
}
public function set Count(c:uint):void
{
this.m_count = c;
}
}
}
And this is what the application MXML looks like
// MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:core="*" creationComplete="this.init();">
<mx:Script>
<![CDATA[
import flash.events.Event;
import flash.utils.describeType;
import mx.binding.utils.ChangeWatcher;
[Bindable]
public var model:Model;
public function init():void
{
var _this:Object = this;
this.addEventListener(Event.ENTER_FRAME, function(e:Event):void {
_this.model.Count++;
});
this.model = new Model();
trace(ChangeWatcher.canWatch(this.model, "Count")); // This always returns false for some reason
trace(describeType(this.model));
}
public function UpdateText(s:String):void
{
trace(s);
}
]]>
</mx:Script>
<mx:Text text="{this.model.Count}" creationComplete="trace(this);" />
</mx:WindowedApplication>
Update: I tried an even more bare-bones version as shown below.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="this.m_init();">
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
[Bindable] public var m:Object = new Object();
public function m_init():void
{
trace(ChangeWatcher.canWatch(this, "m"));
}
]]>
</mx:Script>
<mx:Text text="{this.m}" />
</mx:Application>
Still. Doesn't. Work. ChangeWatcher.canWatch still returns false, although the textfield does display [object Object].
public function init():void
{
this.addEventListener(Event.ENTER_FRAME, increment);
this.model = new Model();
}
public function increment(e:Event):void
{
if(this.model)
this.model.Count++;
}
<mx:Text text="{model.Count}" creationComplete="trace(this);" /-->
i can give u one example of changeWatcher, that may be some help, right now i m working with this, it's helpful,
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Style source="../assets/css/scaleCSS.css"/>
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
import mx.controls.Text;
private var text:Text;
[Bindable]private var ti1mc:int=50;
private function init():void
{
ChangeWatcher.watch(ti1,'text',updateTextti);
ChangeWatcher.watch(ti2,'text',updateTextti);
ChangeWatcher.watch(ti3,'text',updateTextti);
ChangeWatcher.watch(ti4,'text',updateTextti);
ChangeWatcher.watch(ti5,'text',updateTextti);
}
private function updateTextti(event:Event):void
{
var str:String;
str=event.currentTarget.id.slice(2,3);
// trace("str : "+str);
// trace(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).id);
Text(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).getChildAt(0)).text=event.currentTarget.text;
// trace(Text(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).getChildAt(0)).id);
// trace(event.currentTarget.id.slice(2,3));
if(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).width>=textbox.width)
event.currentTarget.maxChars=event.currentTarget.length;
else
event.currentTarget.maxChars=50;
}
]]>
</mx:Script>
<mx:Canvas width="80%" height="80%" horizontalCenter="0" verticalCenter="0" borderStyle="solid">
<mx:VBox id="textbox" height="300" width="200" borderStyle="solid" top="50" left="100" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Canvas id="textcan1" borderStyle="solid" borderColor="#FF0000">
<mx:Text id="text1" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan2" borderStyle="solid" borderColor="#FFFF00">
<mx:Text id="text2" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan3" borderStyle="solid" borderColor="#00FF00">
<mx:Text id="text3" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan4" borderStyle="solid" borderColor="#0000FF">
<mx:Text id="text4" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan5" borderStyle="solid" borderColor="#00FFFF">
<mx:Text id="text5" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
</mx:VBox>
<mx:VBox id="textinputbox" height="300" width="200" top="50" right="100" borderStyle="solid" verticalGap="0">
<mx:TextInput id="ti1" width="100%" maxChars="50"/>
<mx:TextInput id="ti2" width="100%" maxChars="50"/>
<mx:TextInput id="ti3" width="100%" maxChars="50"/>
<mx:TextInput id="ti4" width="100%" maxChars="50"/>
<mx:TextInput id="ti5" width="100%" maxChars="50"/>
</mx:VBox>
</mx:Canvas>
</mx:Application>
here ti1(textinput) text property is being watched, if there is a change in to the property, then the handler function(updatetextti) will be called
hope this helps
I removed all files inside the obj folder under the project and the problem seems to have gone away. It might have been that FlashDevelop was using older compiled binaries out of this folder, which made the output go out of sync with the source code.
Evidence to support this lies in two things. Changing the SDK did not affect the output on my own computer, which ruled out any SDK-specific issues. So I created a new project in another IDE on the same computer and copy-pasted the code into that one. This time it worked. That's when I thought it might be the cache and went in and deleted it.
In hindsight, I should have renamed it, and later tried to compile with the old cache in place again. That would have been conclusive.
I have created a project in Flex Builder 3 and I do not think it is connecting to the HTTP I have assigned. It is a blog application, that is connected to a database with a PHP page. When I view the application on a HTML page, the text fields are not editable--you cannot type in them. This leads me to believe that I have assigned the HTTP incorrectly. Could this be the problem? How do I fix this?
Are you able to dsplay any data in your DataGrid?
If you set a break point in your getData HTTPService, can you catch it? In other words, is it getting called? Or, is there a fault? Add a Fault handler like this:
result="getPHPData(event)" fault="getFault(event)"
and define getFault().
Below is some of the mxml code that I am using. I am not getting any errors about not being able to connect to the database, so I don't think anything is wrong with the PHP.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="535" height="345">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.controls.TextInput;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import com.adobe.serialization.json.JSON;
[Bindable]
private var dataArray:ArrayCollection;
private function initDataGrid():void
{
dataArray = new ArrayCollection();
getData.send();
}
private function getPHPData(event:ResultEvent):void
{
var rawArray:Array;
var rawData:String = String(event.result);
rawArray = JSON.decode(rawData) as Array;
dataArray = new ArrayCollection(rawArray);
}
private function sendPHPData():void
{
var objSend:Object = new Object();
var dataString:String = JSON.encode(dataArray.toArray());
dataString = escape(dataString);
objSend.setTutorials = "true";
objSend.jsonSendData = dataString;
sendData.send(objSend);
}
private function updatedPHPDataResult(event:ResultEvent):void
{
lblStatus.text = String(event.result);
}
private function checkRating(event:DataGridEvent):void
{
var txtIn:TextInput = TextInput(event.currentTarget.itemEditorInstance);
var curValue:Number = Number(txtIn.text);
if(isNaN(curValue) || curValue < 0 || curValue > 10)
{
event.preventDefault();
lblStatus.text = "Please enter a number rating between 0 and 10";
}
}
]]>
</mx:Script>
<mx:HTTPService id="getData" url="/keishalexie/imd465/forum.php"
useProxy="false" method="GET" resultFormat="text"
result="getPHPData(event)">
<mx:request xmlns="">
<getTutorials>"true"</getTutorials>
</mx:request>
</mx:HTTPService>
<mx:HTTPService id="sendData" url="/keishalexie/imd465/forum.php"
useProxy="false" method="GET" resultFormat="text"
result="updatedPHPDataResult(event)">
</mx:HTTPService>
<mx:Binding source="dgData.dataProvider as ArrayCollection"
destination="dataArray"/>
<mx:Panel x="0" y="0" width="535" height="345" layout="absolute"
title="Forum">
<mx:DataGrid id="dgData" x="10" y="10" width="495" height="241"
dataProvider="{dataArray}" creationComplete="{initDataGrid()}"
editable="true" itemEditEnd="{checkRating(event)}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" editable="false"/>
<mx:DataGridColumn headerText="Author" dataField="author" width="115"
editable="false"/>
<mx:DataGridColumn headerText="Rating" dataField="rating" width="50"
editable="true" />
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="259" label="UpdateDatabase" id="butUpdate"
click="{sendPHPData()}"/>
<mx:Label x="140" y="261" id="lblStatus"/>
</mx:Panel>
</mx:Application>
I wrote a component that displays a filename, a thumbnail and has a button to load/play the file. The component is databound to a repeater. How can I make it so that the button event fires to the main application and tells it which file to play?
On your custom component you can listen to the button click event and then generate a custom event that holds information about the file you want to play. You can then set the bubbles property to true on the event and dispatch the custom event from your custom component. The bubbles property will make your event float up the display list and reach your main application. Now on your main application you can listen to that event and play the correct file. Hope this helps.
Figured it out (finally)
Custom Component
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" x="0" y="0" width="215" height="102" styleName="leftListItemPanel" backgroundColor="#ECECEC" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
[Bindable] public var Title:String = "";
[Bindable] public var Description:String = "";
[Bindable] public var Icon:String = "";
[Bindable] public var FileID:String = "";
private function viewClickHandler():void{
dispatchEvent(new Event("viewClick", true));// bubble to parent
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="viewClick", type="flash.events.Event")]
</mx:Metadata>
<mx:Label x="11" y="9" text="{String(Title)}" styleName="listItemLabel"/>
<mx:TextArea x="11" y="25" height="36" width="170" backgroundAlpha="0.0" alpha="0.0" styleName="listItemDesc" wordWrap="true" editable="false" text="{String(Description)}"/>
<mx:Button x="20" y="65" label="View" click="viewClickHandler();" styleName="listItemButton" height="22" width="60"/>
<mx:LinkButton x="106" y="68" label="Details..." styleName="listItemLink" height="18"/>
<mx:HRule x="0" y="101" width="215"/>
The Repeater
<mx:Canvas id="pnlSpotlight" label="SPOTLIGHT" height="100%" width="100%" horizontalScrollPolicy="off">
<mx:VBox width="100%" height="80%" paddingTop="2" paddingBottom="1" verticalGap="1">
<mx:Repeater id="rptrSpotlight" dataProvider="{aSpotlight}">
<sm:SmallCourseListItem
viewClick="PlayFile(event.currentTarget.getRepeaterItem().fileName);"
Description="{rptrSpotlight.currentItem.fileDescription}"
FileID = "{rptrRecentlyViewed.currentItem.fileName}"
Title="{rptrSpotlight.currentItem.fileTitle}" />
</mx:Repeater>
</mx:VBox>
</mx:Canvas>
Handling function
private function PlayFile(fileName:String):void{
Alert.show(fileName.toString());
}