I'm new at working with Flex, and I can't figure out how to reuse a specific ID.
So I'm doing an application where you can customize a product. First you choose the product, and then you can add custom text to it.
I can get it to add the text, I add an ID, and when I click on the text I can move it and edit it. My problem is that I can't figure out how to save the edit.
I put the text ID in a hidden field, but I can't use it to replace the text in my field. How could I do that ?
Here's part of my code :
<s:TextInput includeIn="modifierTexte" x="24" y="39" width="599" id="idTextePersonnalise"/>
<mx:RichTextEditor id="persoContentModifier"
backgroundColor="#ccffcc"
title="Texte personnalisé"
x="23.8" y="62.2" width="768" height="200" chromeColor="#A6A3A3" verticalAlign="top"
creationComplete="removeMiscButtons()"
dropShadowVisible="false" includeIn="modifierTexte"/>
<s:Button x="571" y="269.4" width="221" height="34" fontFamily="Georgia" fontSize="15" color="#404040" chromeColor="#A8D009" focusColor="#3F9020" id="editTxtToBathtub" label="Modifier le texte" includeIn="modifierTexte" click="editTextToBathtub()"/>
So the textinput contains my text id, richTextEditor gets the custom text and you click the button to save.
My function looks like this :
private function editTextToBathtub():void{
var idDeMonTexte:String = idTextePersonnalise.text;
//I'ld like to do something like idDeMonTexte.text = persoContentModifier.text;
}
Everytime I try to use my var to put my richtext back in my custom text, it gives me an error of course...
Anyone know how to work with this ?
Thanks for your help !
2 problems.. You say you want to do something like idDemonText.text = personContentModifier.text, but you have no component with an id of idDemonText. (at least not in your example).
The other is you've named your private function the same as the id of your button. That's probably gonna cause your error. What is your error?
You can't do what you want.. Like RIAstar says, you're trying a horrible html hack which isn't supported. You should consider an alternative approach.
Why don't you change your function to this?:
private function editTextToBathtub():void{
persoContentModifier.text = idTextePersonnalise.text;
}
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>
When using Flex with Spark, I have a simple chat window with a TextInput to enter your message and a send Button.
TextInput
Starts out as ""
Should be set to "" last in the function that handles the message sending
Should also be set to "" as a response for event="myOtherEvent"
Button
Should only be enabled when the TextInput's text.length > 0
At first I thought it was pretty clean to skip binding the text being entered into the TextInput to anything in my model and let that logic for button enabling/disabling stay in the view.
I still feel that it's a pretty nice approach except for the fact that it isn't a complete solution as it does not clear the TextInput.text as a response to receiving event="myOtherEvent".
The MXML for that partial solutions is:
<s:TextInput id="chatText" width="100%" height="32" />
<s:Button
label="Send"
enabled="{chatText.text.length > 0}"
click='{model.send(chatText.text); chatText.text=""}'
/>
If it wasn't for my event response requirement, how do you feel about that solution?
There is some logic in the Button, but just basic setting and checking. I know that it's a good idea to separate logic and presentation, but I thought this was a nice balance.
A complete solution I can think of would be to:
Have a two way binding of chatText.text and a property in my model
And in the set method for that property, I would dispatchEvent(new Event("updateButton")
A function in the same model class would bind to that event. That function would also be read in enabled="{model.thatFunction()}" of the Button. The function would return chatTextStringPropertyInModel.length > 0 and thus (by jumping through some hoops) would see to that the send-Button is enabled when there is text available for sending.
The model.send(chatText.text) can set chatTextStringPropertyInModel="" after sending and as that property is two-way bound with chatText.text the change would be reflected in the UI too.
My questions:
How much logic is all right to have in the view?
How should I solve this? What is most elegant and maintainable?
Maybe I'm confused but I don't see an issue in your solution. You just need to add an event handler for your other event
<fx:Script>
<![CDATA[
//clear text and disable button on other event
private function onMyOtherEvent(event:Event):void
{
chatText.text = "";
}
]]>
</fx:Script>
<s:TextInput id="chatText" width="100%" height="32" />
<s:Button
label="Send"
enabled="{chatText.text.length > 0}"
click='{model.send(chatText.text); chatText.text=""}'/>
Also I don't think there's anything wrong with a view component handling it's own view logic...
So i have a service that passes a list of citys according to a request that is made against it what i need to do is to add the url to click on each row i have tried outerDocument parentDocument but wasnt able to get it with them heres an example of the list i would like to modify
<s:List includeIn="data" x="28" y="10" width="312" height="255" id="list" labelField="city" >
<s:AsyncListView list="{getCitysResult.lastResult}"/>
</s:List>
this is the data thats been fed to the list
object[]
[0]
citycode:034957
id:20
countrycode:GB
url:http://example.com
city:lincoln
[1]...............
is there anyway using this list i can use the url thats in each object for the click on each row i aslo tried using a datagrid with buttons inside the rows but i still couldnt get the url to link to the button or row
Use navigateToUrl(new URLRequest(data.url), "_blank"); to keep opening a new browser window for each one or navigateToUrl(new URLRequest(data.url), "myWindowName"); to attempt to have the OS re-use the same named browser window.
In my code I have defined the following:
<s:Image id="test" x="50" y="50" width="30" height="30" click="onClick_clickHandler(event)" smooth="true" smoothingQuality="high" source="#Embed('icons/myImage_60_off.png')"/>
What I want is to be able to change the source of the image every time the user clicks on the image - similar to the way favourites work on a browser.
I have no idea how to change the source of the image from my code.
Thank you
I had a hidden datagrid with my solution, because it started off with a visible one.
The image looked like this:
<mx:Image top="153" left="10" right="10" bottom="5" source="{dgpick.selectedItem.ImageFile}" />
Every time someone clicks on the image, I would increase the selected index of the datagrid, and the labels will display the corresponding data, as they are also bound to its data.
The image can also have a link to an XML file that you can load like this:
<s:HTTPService id="Config"
url="config.xml"
result="resultHandler(event)"/>
private function resultHandler(event:ResultEvent):void
{
ImagesURL = event.result.images.ImagesURL[iCounter];
}
Every time someone clicks on the image, you can increase the counter, and so forth.
Hope this gives you some ideas.
There are 20 ways to do this.
If you need more code, add a comment, with what you need.
I finally did it!
public var image_loader:Loader; // define a new loader
image_loader = new Loader(); // create the new loader at the desired location (in my case in the initialization method of the page
image_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded); //add a listener and a function to assign to the listener
depending on where the command has to be executed
image_loader.load(new URLRequest('location of the image')); //this will load the image dynamically
function imageLoaded(event:Event):void {image_Id.source = image_loader;} //where image_Id is the id of the s:Image tag to be modified
also, I had to remove the source from the s:Image tag previously posted
The rest is just logic of the way the application needs to implement the functionality, so it's pretty much left to the developer's desires
The following code doesnt work:
<s:TextArea name = "Desc1" id="Desc1" x="8" y="233" width="162" height="369" restrict="^&"/>
im trying to not allow the user to input de "&",in flash it works well but in textarea of flash builder it gets me an error.
Try writing "^&". The & character in an mxml tag must be html-escaped. It's the same if you try to write an AND condition in a bound property (text="{bool1 && bool2?'ok':'ko'}"), it's highly unreadable but useful.