Could you maybe leave a link to the example you created the image from? I believe that this can be done in different ways but I would like to see the example so I can hopefully point you in the way they did it ( or give you a few hints ).
With best regards,
For this forum, I noticed that if there is a hyperlink to an image and when I click on a post's reply button it will then get rendered.
The demo is actually part of the autocomplete component as demonstrated in the link below.
You have to choose "facebook" for the style option, and when the autocomplete fires, you will see the background in the text.
Ohh, I didn't know about this demo. Thanks for sharing.
View Source is enabled in that link you posted first, why don't you ask the owner of that app to reuse his/her code?
The link that you provided has the 'view source' feature enabled. So if you right click it, you can download or view the source.
Depending on the complexity of your task, this may be time consuming. Their (or just his) component is complex. They way the did it, was that they use a Box component which implemented a couple interfaces which has a Grid component as a child. The Grid uses a custom Box component as the (Grid's GridItem) renderer. That description only scratches the surface.
Can you use this component as-is?
Here's a brief rundown of how I implemented the solution.
- Each item (in your case word) is a Button. I've used skins to give them the "Facebook" look. The code for the skin is in the defaults.css file.
- To get the delete icon to work I created a custom class called IconButton which disptaches two click events. A regular one if the button is clicked, and a "removeClick" event if the icon is clicked.
- To layout the Buttons, I've create a FlowBox container using an algorithm written by Eric Cancil (http://blog.appdivision.com/2009/02/18/flex-flowcontainer/)
It's definitely possible to strip out these parts from the AutoComplete component to accomplish you goal, but I'm guessing it's going to be somewhat challenging.
I'm happy to help if you get stuck
Thanks very much, hillel369.
Now that I know you used buttons, then the solution is easier. In my case, the words are actually HTML text with <a></a> link tags.
I will have to abandon my text approach and use the button option instead, since it will be more manageable to get the correct look and feel.
I appreciate you sharing with the community the pocess you use to accomplish the effect.