Iam trying to make clicked position to center in flex.
My code is
<fx:Declarations>
<s:Parallel id="transformer" target="{swe}">
<s:Scale id="scaleby" scaleXBy="0.2" scaleYBy="0.2" autoCenterTransform="false"/>
</s:Parallel>
</fx:Declarations>
<s:Group width="500" height="350" clipAndEnableScrolling="true">
<s:SWFLoader source="CasuarinaBigMap.swf" width="500" height="350" id="swe" click="swe_clickHandler(event)"/>
</s:Group>
protected function swe_clickHandler(event:MouseEvent):void
{
scaleby.transformX = event.mouseX;
scaleby.transformY = event.mouseY;
transformer.play();
}
My qustion is
How can I make clicked point pan into the center of the box?
Pls help.
Thanks.
This ought to do the trick:
<fx:Declarations>
<s:Move id="moveEffect" />
</fx:Declarations>
<s:Group id="mapContainer" width="300" height="300" clipAndEnableScrolling="true"
click="pan(event.localX, event.localY)">
<s:Image id="map" source="#Embed('bigMap.png')" />
</s:Group>
'localX' and 'localY' are the mouse's 'x' and 'y' position relative to the mapContainer.
And now the pan() method:
private function pan(mouseX:Number, mouseY:Number):void {
//calculate the offset from mapContainer's center
var diffX:Number = mapContainer.width/2 - mouseX;
var diffY:Number = mapContainer.height/2 - mouseY;
//move the map through the move effect
moveEffect.xFrom = map.x;
moveEffect.yFrom = map.y;
moveEffect.xTo = diffX;
moveEffect.yTo = diffY;
moveEffect.play([map]);
}
Try using a Move effect instead of a Scale effect.
Related
My Requirement given below:
I want to span same image across two canvas.
Like I have HBOX with two canvas as childs. I want to drag first canvas
display object into second canvas with half portion of that object in 1st canvas and half in second canvas.
Thanks in advance if someone has any idea.
You can split your image, after dropping it, using, for example, copyPixels() on the BitmapData of your image.
Take this example where I used two images in two Groups :
<s:VGroup x="0" y="0" width="300" height="500">
<s:Group id="group_top" width="200" height="200" >
<s:Image id="img_top" x="0" y="0" width="100%" height="100%"
source="assets/image.jpg"
mouseDown="img_top_mouseDownHandler(event)"
mouseUp="img_top_mouseUpHandler(event)"/>
</s:Group>
<s:Group id="group_bottom" width="200" height="200" >
<s:Image id="img_bottom" x="0" y="0" width="100%" height="100%" source=""/>
</s:Group>
</s:VGroup>
For the dragging and dropping, I used the old startDrag() and stopDrag() just for the example of course, you may need to use another way according to your needs.
protected function img_top_mouseDownHandler(event:MouseEvent):void
{
img_top.startDrag();
}
protected function img_top_mouseUpHandler(event:MouseEvent):void
{
img_top.stopDrag();
img_top.x = img_top.y = 0;
split_image();
}
And to split the image, I did like this :
protected function split_image():void
{
var bitmap_data_source:BitmapData = img_top.bitmapData;
var w:int = bitmap_data_source.width,
h:int = bitmap_data_source.height;
var bitmap_data_top:BitmapData = new BitmapData(w, h);
bitmap_data_top.copyPixels(
bitmap_data_source,
new Rectangle(0, 0, w, h/2),
new Point()
);
var bitmap_data_bottom:BitmapData = new BitmapData(w, h);
bitmap_data_bottom.copyPixels(
bitmap_data_source,
new Rectangle(0, h/2, w, h/2),
new Point()
);
var bitmap_top:Bitmap = new Bitmap(bitmap_data_top);
img_top.source = bitmap_top;
var bitmap_bottom:Bitmap = new Bitmap(bitmap_data_bottom);
img_bottom.source = bitmap_bottom;
}
Hope that can help.
I made a login form on Flex and set the focus on the first textbox.
The textbox is highlighted, but I have to click on it in order to be able to write inside it.
How can I make it takes keyboard input directly without clicking? I mean directly after loading the page.
<fx:Script>
<![CDATA[
private function init():void {
trace("Authentication View init");
ExternalInterface.call('function browserFocus(){document.getElementById(\'${application}\').focus();}');
this.txtUsername.setFocus();
this.txtUsername.setFocus();
}
]]>
</fx:Script>
<s:Panel x="353" y="164" width="250" height="200">
<s:TextInput id="txtUsername" x="103" y="49" focusEnabled="true"/>
<s:TextInput x="103" y="79"/>
<s:Label x="26" y="49" text="Username"/>
<s:Label x="26" y="79" text="Password"/>
</s:Panel>
Set focus like following inside init() function.
txtUsername.setFocus();
And Apply following code inside html-template/index.template.html. before HTML end tag.
<script type="text/javascript">
function onFlexInitialized()
{
//alert("onFlexInitialized");
<!-- Force the browser to set flex app with focus -->
document.getElementById("${application}").focus();
}
</script>
I solved it by adding this inside the body tag in html-template/index.template.html.
onLoad="window.document.Login.focus();"
and it worked corrctly. Thanks everyone :)
Index-template:
<div id="flashContent">
<script type="text/javascript">
function setFocus(){
window.document.getElementById("APPNAME").focus();
$('#txtUsername').focus();
$('#txtUsername').focusEnables=true;
}
</script>
</div>
Application:
private function init():void{
if (ExternalInterface.available) {
ExternalInterface.call('setFocus');
}
}
I am stuck trying to center a text (RichEditableText) inside a container. My code so far looks like this
<?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:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Box id="myCustomBox" height="100%" width="100%" initialize="init();">
<fx:Script>
<![CDATA[
import mx.containers.Box;
import mx.containers.HBox;
import mx.containers.VBox;
import mx.controls.Button;
import mx.controls.Image;
import spark.components.RichEditableText;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.TextAlign;
[Embed("dialog_error.png")]
private var myImage:Class;
public function init():void {
var img:Image = new Image();
img.source = myImage;
this.addElement(buildPane("Something went wrong", img));
}
private function buildPane(message:String, image:Image):Box{
var exPane:HBox = new HBox();
exPane.percentHeight = 100;
exPane.percentWidth = 100;
exPane.setStyle("horizontalGap","0");
//Image hosting pane
var imPane:VBox = new VBox;
imPane.setStyle("backgroundColor","blue");
imPane.percentHeight = 100;
imPane.explicitWidth = 50;
image.minHeight = 16;
image.minWidth = 16;
imPane.setStyle("paddingLeft",10);
imPane.setStyle("paddingRight",10);
var invisBtn1:Button = new Button();
invisBtn1.percentHeight = 40;
invisBtn1.visible = false;
imPane.addChild(invisBtn1);
image.percentHeight = 20;
imPane.addChild(image);
var invisBtn2:Button = new Button();
invisBtn2.visible = false;
invisBtn2.percentHeight = 40;
imPane.addChild(invisBtn2);
exPane.addChild(imPane);
//Text hosting pane
var txtPane:Box = new Box();
txtPane.setStyle("backgroundColor","yellow");
txtPane.percentHeight = 100;
//txtPane.setStyle("paddingBottom",10);
txtPane.setStyle("paddingLeft",0);
//txtPane.setStyle("paddingTop",30);
txtPane.setStyle("paddingRight",5);
//Specify text alignment
var errMsgLabel:RichEditableText = new RichEditableText;
var textFlow:TextFlow = new TextFlow();
var pCenter:ParagraphElement = new ParagraphElement();
var spanCenter:SpanElement = new SpanElement();
spanCenter.text = message;
pCenter.addChild(spanCenter);
pCenter.textAlign = TextAlign.CENTER;
textFlow.addChild(pCenter);
errMsgLabel.textFlow = textFlow;
errMsgLabel.percentHeight = 100;
errMsgLabel.percentWidth = 100;
errMsgLabel.multiline = true;
txtPane.addChild(errMsgLabel);
exPane.addChild(txtPane);
return exPane;
}
]]>
</fx:Script>
</mx:Box>
</s:WindowedApplication>
I would like the text to be at the same level as the dialog_error icon (Usual X mark icon). So if the text is taller, the icon needs to center itself in the middle of the text. Any pointers would be helpful.
Thank you.
I can think of no good reason why you would be writing all of this in ActionScript instead of MXML. You're just making things harder for yourself.
The whole 100 lines of code in your question can be reduced to this:
<s:HGroup width="100%" gap="0">
<s:VGroup width="50" height="100%" paddingLeft="10" paddingRight="10"
verticalAlign="middle">
<s:Image id="msgIcon" source="#Embed('dialog_error.png')"/>
<s:Button visible="false" includeInLayout="false"/>
<s:Button visible="false" includeInLayout="false"/>
</s:VGroup>
<s:RichEditableText id="errMsgLabel" width="100%"/>
</s:HGroup>
This code also contains the necessary fixes to center the error icon horizontally with respect to the error message's text height.
removed the 100% height on the HGroup; this caused the Image to be centered in the middle of the entire container, not just the text height.
added verticalAlign="middle" to the VGroup containing Image and Buttons; this property will align the content of this container to its vertical center.
added includeInLayout="false" to the invisible Buttons; if you just make the Buttons invisible, they will still take up space in the layout, pushing the Image up a little; setting this property to false will tell the VGroup container to act as if the Buttons really weren't there to do its layout.
removed the 100% height on the RichEditableText so that it is only as high as its text content, otherwise the icon will still be centered to the middle of the entire container.
removed a bunch of redundant containers.
Note that I assumed you applied the background colors only for testing purposes, to see how the containers are laid out.
I understand you want to dynamically change the icon. You can easily achieve this by setting its source property programatically afterwards:
msgIcon.source = otherEmbeddedImage;
Or even better, through data binding:
<s:Image source="{msgIcon}"/>
msgIcon = otherEmbeddedImage;
I want to add scrollbar to the flex tootip. So i created custom tool tip. Below is the code snippet. Problem i am facing is that as soon as i move the mouse on the custom component tooltip, the custom component tooltip disppear. i have alse set the ToolTipManager.hideDelay = Infinity. I want to use the scrollbar of the cutom tool tip.
I do not want the custom tool top to hide till i move the mouse outside the custom tool tip component.Currently it hide itself once i move the mouse outside the label. How to control the destroy of tool tip.
<?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%"
implements="mx.core.IToolTip">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private var _bodyText:String = "";
[Bindable]
public function get bodyText():String
{
return _bodyText;
}
public function set bodyText(value:String):void
{
_bodyText = value;
text = value;
}
private var _text:String;
public function get text():String
{
return _text;
}
public function set text(value:String):void
{
_text = value;
}
]]>
</fx:Script>
<s:Scroller width="100%" height="200">
<s:RichEditableText text="{bodyText}" width="100%" height="100%" color="red"/>
</s:Scroller>
</s:Group>
and i add this cutom tooltip on mx:label component on toolTipCreate event.
protected function label1_toolTipCreateHandler(event:ToolTipEvent):void
{
ScrollableToolTip ptt = new ScrollableToolTip();
ptt.bodyText = data.notes;
ptt.height = 300;
ptt.width = 100;
event.toolTip = ptt;
}
Any pointers..
Thanks
Raj
Instead of relying on the flex tooltip, you may want to add a popup on mouse roll over and deal with it that way, ofcoz you have to deal with the positioning of the popup later on, but I think this will give you a lot of flexibility later on.
How do I position a child relative to its containing box?
The Code:
<mx:Script>
<![CDATA[
thisMap.scaleX = scaleFactor;
thisMap.scaleY = scaleFactor;
thisMap.x = thisMap.x - thisMap.mouseX * 1.3;
thisMap.y = thisMap.y - thisMap.mouseY * 1.3;
]]>
</mx:Script>
<mx:Box id="mapHolder" x="0" y="30">
<mx:SWFLoader id="thisMap" source="MyWorld1.swf" />
</mx:Box>
To access thisMap it is not necessary to go through mapHolder.
A box is a container that manages positioning for you in a horizontal or vertical stack (see VBox or HBox). It looks like you are trying to position thisMap as if it was in a canvas. Try
<mx:Script>
<![CDATA[
thisMap.scaleX = scaleFactor;
thisMap.scaleY = scaleFactor;
thisMap.x = thisMap.x - thisMap.mouseX * 1.3;
thisMap.y = thisMap.y - thisMap.mouseY * 1.3;
]]>
</mx:Script>
<mx:Canvas id="mapHolder" x="0" y="30">
<mx:SWFLoader id="thisMap" source="MyWorld1.swf" />
</mx:Canvas>
Also i'm not sure how this will look by positioning it relative to the mouse coordinates... it looks like you are trying to achieve some sort of drag functionality. However the canvas should solve the original problem.
I am creating a zoom functionality. When the user clicks thisMap, it zooms into the point that was clicked. I scale this map and adjust for the scaling and centering by offsetting its x, y position. This works fine in the main app, but I can't figure out how to put the swf in some kind of container.