I need to put in a Rich Text Editor which should be able to insert a picture and my user needs to control the position of placing the image anywhere in the editor without damaging the text already entered.It will be okay if user can at least move the image around the editor. Can anyone help me, have some example?
Any help would be great..
many thanks
You can easily enter images in a RichTextEditor with the following code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var Str:String = '<img src="assets/allBtn_hover.png"/>'
]]>
</mx:Script>
<mx:RichTextEditor id="rte" x="33" y="27" title="Title"
htmlText="{Str}">
</mx:RichTextEditor>
<mx:Text x="397" y="27" text="{Str}" width="270" height="238"/>
</mx:Application>
But moving the image around , is something which might be problematic.
With the above , it might be possible to move the image up and down by placing the wrapped text image at different positions inside the RTE, but incase you want to give absolute control , Id suggest creating a new image object, with absolute layout and allow user to move it around.
But that would involve writing a lot of code , to create the logic of hiding the image, showing part of the image, when a scroll happens and the image is not supposed to be shown on the screen.
Related
At my project I've a DataGrid component that holds some information and, at the final column I need to put a floating tool box.
The idea is when the user hit on the icon's tool box, it appears above a floating tool box like a menu holding some icons to perform different actions.
So far, I've solved the column's ItemRenderer to show the dispatcher tool box icon but to show the upper floating tool box is something that I still can't solve. I've tried to make a custom component ( it's a Canvas that holds a HBox that contains the action's icons ) to hold the tool box's icons and showing it by a Menu control (mx.control.Menu) like this:
private function createAndShow():void {
var myCustomMenu:CustomContextMenu = new CustomContextMenu();
var myMenu:Menu = Menu.createMenu(this, myCustomMenu, false);
myMenu.show(btnToolBox.x + 10, btnToolBox.y + 10);
}
But this approach shows a weird container at the left and top of the page instead of show it at the given point i.e. (btnToolBox.x + 10, btnToolBox.y + 10).
So, can anybody help my out with this?
I was searching through the Internet looking for some examples but, I can't found anything that can help me to accomplish this situation so, if anyone knows a way to solve this or at least can point me somehow, any suggestions would be gratefully appreciated.
Finally, after a long research I found an answer. I created a Custom Component that uses a PopUpAnchor and solution looks like this
<s:PopUpAnchor id="hDropDown" x="{btnToolBox.x-options1.width+30}" y="{btnToolBox.y-6}" includeInLayout="false"
showEffect="{showEffects}" hideEffect="{hideEffects}">
<s:BorderContainer minHeight="0" id="options1" mouseDownOutside="{hDropDown.displayPopUp=false}"
cornerRadius="2" borderWeight="1" borderColor="gray" backgroundColor="black">
<s:layout>
<s:HorizontalLayout gap="5" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" />
</s:layout>
</s:BorderContainer>
</s:PopUpAnchor>
I have a set of buttons I have added to the stage of my flex mobile app... I have transparent PNG icons set on those buttons using the 'icon' parameter but was wondering if there is a way to hide the grey box of the standard button element? so that my button would only appear as the icon i have set on the button... or is the only way to achieve this to skin the button and create a style (which I still dont have a full grasp on yet.
Thanks in advance.
There are numerous ways to go about doing this. As Flextras said, you can just remove all the things that the normal Spark ButtonSkin draws. However, it's not that straight forward, because if you look at the ButtonSkin class, it doesn't have the BitmapImage object that the button uses to show your icon. That BitmapImage is actually defined in the base class for ButtonSkin (which is SparkButtonSkin).
Fortunately, it's simple enough to fix that. Below is a skin that extends the base class and adds the BitmapImage back. The reason I add it back is
you can't use the base class by itself (it doesn't define the required states and throws an error at run time
you probably want to add some interactivity to your button - on mouse over, mouse down, etc. In my simple example below, that interactivity is pretty cheesy, I'll leave it up to you to decide what should happen on mouse over, mouse down, etc...
Skin that extends SparkButtonSkin:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin 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="21" minHeight="21"
alpha.disabled="0.5">
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage id="iconDisplay" alpha=".75" alpha.over="1" alpha.down=".5" alpha.disabled=".25" />
</s:SparkButtonSkin>
Another way to go about this is to not use the Button at all. You can make a much lighter version of that behaves as a simple button by using the BitmapImage object for your button. You'd have to add some interactivity (like perhaps swapping out the icon it uses for mouse down, etc).
<s:BitmapImage source="path/to/my/icon" click="clickHandler()" />
I need to create a slide left and slide right effect. This will be used on a panel when it is added to stage.
Also, the canvas I want to use the effect on has its height determined by the "top" and "bottom" properties, I heard this may cause issues when applying such an effect.
You might want to check out something called TweenMax: http://www.greensock.com/tweenmax/ It greatly simplifies animation of many things, and it has lots of options which you would expect such as ease in/out, onTween events/callback, on complete callback etc.
I am not 100% sure what you wan to do exactly, but in theory you will want to start your canvas off the screen, and then do something like this:
TweenMax.to(theCanvas, 1.0, {x:0});
This line of code will tell TweenMax (via the static function "to") to start a tween (animation). The target of the animation is theCanvas, the duration of the animation is 1.0 seconds, and the property being animated is x. In this case .x is animated from where ever it current is "to" 0. If you wrote:
TweenMax.to(theCanvas, 1.0, {x:100});
Then the canvas would animate from where is currently is to .x = 100. Note that if you specify a string for the 'value'
TweenMax.to(theCanvas, 1.0, {x:"100"});
this is treated as a delta - so the canvas will not end at x = 100, instead it will end at x = originalX + 100.
As far as the height of the canvas is concerned, it should be ok to constrain the height with top and bottom style settings, but I am not 100% sure of this... you will want to explicitly define the width of the canvas however, as you will need to explicitly(absolutely) define the x position.
EDIT
Here is an example, I think it covers the basics. Note that the slider canvas has its height defined with top and bottom, and there are no issues.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
width="500" height="500"
xmlns:mx="http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import com.greensock.TweenMax;
private function slideIn():void
{
TweenMax.to(theSlider, 1.0, {x:50});
}
private function slideOut():void
{
TweenMax.to(theSlider, 1.0, {x:300});
}
]]>
</mx:Script>
<mx:Button label="Slide In" click="{slideIn()}"/>
<mx:Button x="80" label="Slide Out" click="{slideOut()}"/>
<mx:Canvas id="theWindow"
width="300" height="300"
verticalCenter="0" horizontalCenter="0"
borderColor="red" borderThickness="1" borderStyle="solid"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
>
<mx:Canvas id="theSlider"
width="200"
x="-200"
top="10" bottom="10"
backgroundColor="green" backgroundAlpha="1.0"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
/>
</mx:Canvas>
</mx:Canvas>
Here's something you can start with that I made a while back, this is the Flex3 version moving it over to 4 I've changed the base class to Group and been able to make some further optimization with regard to the initial creation of the components on the "sliding canvas". View source is enabled in the right click menu on the export: http://www.shaunhusain.com/ImageSlider/ (don't be confused by the name it allows you to add whatever UIComponent to it I just started out with images). I'm not immediately aware of any issues with defining it's size via top and bottom properties but it might require tweaking, if you run into issues post those as questions.
To display HTML formatted text in an AdvancedDataColumn, I'm using a custom renderer which is an mx:Text object. I'm setting myText.htmlText to something like "test text which is really a lot longer than the column width". No matter what properties I set though, the text just runs off the end of the column.
I tried wordWrap="true" on the dataGrid and also on each individual column. I also tried messing with css and tried applying it to the text field, but nothing seems to show up. Has anyone been able to wrap htmlText in a text object?
Also, but slightly less important, there are extra blank lines after each tag which I would like to get rid of.
--Edit--added renderer code.
<?xml version="1.0"?>
<!-- itemrenderers/sparkmx/myComponents/SummaryRenderer.mxml -->
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
textAlign="center">
<fx:Script>
<![CDATA[
import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
override public function set data(value:Object):void
{
// help for style sheets
//http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/StyleSheet.html
//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle("p", {textAlign:'left'});
// TODO try wordwrap here.
myCSS.setStyle("div", {textAlign:'left'});
//ensure html support and apply css to it
myText.styleSheet = myCSS;
// if the value is null, it would throw an error.
if (AdvancedDataGridListData(listData) != null) {
myText.htmlText = value[AdvancedDataGridListData(listData).dataField];
}
}
]]>
</fx:Script>
<mx:Text id="myText"/>
</s:MXAdvancedDataGridItemRenderer>
The HTML possibilities in Text component are quite limited. You're not able to add div tags in there. For the issue you have - I would say you need to set up fixed width either on your Text component in custom renderer or on AdvancedDatagridColumn.
Sorry, didn't get you in last question about blanks. Could you explain with example?
I figured out the first part. It looks like the Text object inside the cell was larger than the cell, so even though it was "wrapping" the text, it thought it had plenty of room.
Adding in a
myText.percentWidth=100;
myText.percentHeight=100;
to the set data function solved that problem.
Whenever I use a lot of nesting inside mxml components(including many states) with quite a few Vboxs and Other containers, I always get confused when I see a scrollbar appearing on screen, especially with datagrid inside it(I always want to show scroll bar in datagrid and not on the parent container, for which I usually set the height and width of datagrid smaller than its parent container at run time).
My question is, how could I possibly know (QUICKLY), using debugger, that which component is the source of scroll bar that I see on screen (if there are more than one, then some propoerty of compnent must change when I scroll it up or down).
Thanks.
I realise that this answer isn't using the debugger directly. I mean it as an idea for a simple tool really.
I had a quick go at putting together a simple app that's function is to report what display object is dispatching a mouse wheel event. It does not matter to the app if there is a scrollbar or not, but I guess you could adjust it to your needs. Its a quick start really, here's the code...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
creationComplete="init()">
<mx:HBox id="HBoxWithScrollbar" width="600" height="500">
<mx:HBox width="800" height="800">
</mx:HBox>
</mx:HBox>
<mx:TextArea id="record" height="300" width="600"/>
<mx:Script>
<![CDATA[
private function init():void{
record.text = 'Scroll Record\n';
this.addEventListener(MouseEvent.MOUSE_WHEEL, recordObject);
for each (var obj:DisplayObject in this.getChildren()){
obj.addEventListener(MouseEvent.MOUSE_WHEEL, recordObject);
}
}
protected function recordObject(event:MouseEvent):void{
record.text += (event.target as DisplayObject).toString() + '\n';
}
]]>
</mx:Script>
</mx:Application>
The important thing here really is to see that you can pick up the mouse wheel event at the top level, because it bubbles by default, and isn't cancelable.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/InteractiveObject.html#event:mouseWheel
Once you've got hold of that event, you've got options.
This was built using version 3.6 of the Flex SDK, but it wouldn't take much to build a 4.x version. I am simply displaying "toString()" value of the target display object, but that could be any attribute you want. You'll probably want to put in some error handling for the loop adding events, and also in the event handler. As I said, its just a start, and I hope it helps.