When I attempt to add an icon to a button like this:
<s:Button icon="#Embed(source='assets/logo.jpg')"/>
I receive this error:
Multiple markers at this line:
-Button
-Cannot resolve attribute 'icon' for component type spark.components.Button.
The documentation specifies that you can add an icon like that. See Button Reference.
It is interesting because I can add other Common Styles with no trouble. For example this compiles fine:
<s:Button color="#998877" fontSize="16"/>
What am I goofing up here? Sure it is pretty simple.
Edit: There is also an example right here. The example uses version 4.6. I am on version 4.
I ran into this when I first started using the spark components. I was too was using the original Flex 4 version. They originally didn't support an icon property. You'd have to skin it to get it to work. See the following link:
http://www.flexer.info/2009/06/12/how-to-skin-a-button-with-icon-in-flex-4-sdk-spark/
However, rather than using skins to just add a image to the button, I'd also suggest moving up to flex 4.5 and up. Those include enhancements along with the addition of the icon property to the spark button.
Related
When I drag an image in react that has draggable set to true, I get not-allowed / no-drop cursor. I can't figure out how to target it with CSS to overwrite. The way I handle the drag is onDragStart then onDragEnd.
Without some reproducable code i just can try a shot in the dark: You have to call at the beginning of your drag handler e.preventDefault();.
I faced the same issue back when I was working on one of my React projects, so I did some research and tested several methods that I found, but nothing worked for me. You see there is a property named DataTransfer.effectAllowed that specifies the effect that is allowed for drag operation, and there is a limitation to this API as you can read here -
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
Changing the styles or attaching an eventListener won't work, you have to use a different backend for this. Use react-dnd and react-dnd-touch-backend or react-dnd-html5-backend npm packages as a custom backend.
https://www.npmjs.com/package/react-dnd
https://www.npmjs.com/package/react-dnd-touch-backend
https://www.npmjs.com/package/react-dnd-html5-backend
I'm making a plugin that gets the actual panel or text selection and runs a command on the cli with that value and some params that the user adds in a input.
The idea is to have a similar view than find-and-replace package, but from the first beginning I wasn't able to use space-pane-views for a error on jQuery.
So I decided to make it with React and as far as I was making everything was okayish, but I found 2 big problems.
First I understand what's the View of space-pan and all the ShadowDOM that uses, I feel that is not compatible with React at all, is some kind of big Model that gets data from the dom and from some methods.
So I created a <input /> and I figuret out that you can't interact as normal as a website with that input, doesn't have the hability of delete normally the text and you can't use the atom-text-editor styles into it.
in another hand I try to create a Custom Web Component with React like:
<atom-text-editor
{...this.props}
mini
tabindex='-1'
class={`${this.props.className}`}
data-grammar='text plain null-grammar'
data-encoding='utf8'
/>
and it works with inheriting the styles, but I can't access to the content of the Shadow DOM, neither add eventHandlers like onChange (onKeyPress works btw), this is basically a problem more than React that Atom, but is as far as I went in the intention to create a View in Atom.
Another option could be add draft-js from Fb, but it's a crazy idea for create a simple input.
Any idea to solve one of both problems?
Thanks!
If you add a normal input in React with className='native-key-bindings' the input contains the nativew key bindings, and you can attach the eventHandlers there.
I am trying to make a custom Flex tooltip a la this tutorial. It's basically just a bunch of labels showing a colour legend. This all works fine and well when the tooltip shows from the button event toolTipCreate:
<mx:Button label="ToolTip example" toolTip=" "
toolTipCreate="toolTipCreateHandler(event)" />
However, I want to show the tooltip when the button is clicked and not wait for the actual tooltip delay. (In this sense, I'm not even sure if the terminology "tooltip" even applies anymore, but that's for another time). I call the same handler with an instantiated ToolTipEvent being passed as the argument:
<mx:Button label="ToolTip example" toolTip=" "
click="toolTipCreateHandler(new ToolTipEvent(ToolTipEvent.CREATE, false, false, instanceOfMyCustomToolTip))" />
However, this doesn't work, and it's driving me up the wall trying to figure out how to do this. This doesn't seem like such an uncommon thing to do, but every example I find on the internet uses the actual tooltip delay instead of a button click. Any help would be appreciated.
P.S. - I want to do it as a tooltip specifically so I can try to get the little "balloon tail" as shown here.
EDIT: I have also tried ToolTipManager.createToolTip in the click event of the button, but this doesn't work either.
<mx:Button id="ttt" label="Tooltip test"
click="ToolTipManager.createToolTip(' ',75,75,'errorTipBelow',instanceOfMyCustomToolTip)"/>
After much research, this is impossible in its current form. Here is what should work:
<mx:Button id="ttt" label="Tooltip test"
click="createTooltip()"/>
private function createTooltip():void {
ToolTipManager.toolTipClass = MyCustomToolTip;
ToolTipManager.createToolTip('any text here');
}
At this point, the ToolTipManager should create a new tooltip using the class specified in ToolTipManager.toolTipClass. However, due to a yet-unresolved bug in the Adobe Flex SDK, ToolTipManager.createToolTip ignores this class and always uses the default class ToolTip.
So nothing short of a monkey patch will get this to work correctly. Found info on this bug (and corresponding patch) in this blog post. The post talks about Flex 3, but this bug is still unresolved as of Flex 4.5.1.
I have a component (an s:TitleWindow) that I created and inside I have some <mx:FormItem ...> blocks.
There is supposed to be an equivalent <s:FormItem...>, but when I type <s: and press control space I get a list of spark components, but FormItem is not one. If I type it, the compiler generates an error that it does not exist.
My project settings are set to "MX+Spark".
The reason for this is I want to some some css styling to right justify the form and the examples I have seen all use the syntax of s|FormItem.
I noticed here that the spark form tag is available only with Flex 4.5. This includes tags within a Spark form (e.g. <s:FormItem />). Flex 4 doesn't seem to include the Spark Form tags. This may be the issue:
"Spark was a new component architecture introduced in Flex 4. I consider the architecture "complete" but not all MX components have been implemented as Spark components yet. The Spark Form tag is slated for Flex Hero expected early next year and is only available in pre-release builds."
in the transition to version 4.0 not all the components were ported to spark. another example is datagrid, you only have mx:datagrid for now (in 4.5 you will have s:datagrid). you just have to wait that the transition is completed...
the css you are referring to were for 4.0 or 4.5 ?
I am new to flex, actionscript and flash builder (having to do an upgrade to an existing project).
One of the problems I seem to have is that the Autocomplete component that seems to be part of flex extras is not displaying the list of items in the dropdown list. Basically, I get a list of blank items. I know they are there and they are the right items because as soon as I click on one, I get the right text in the combobox.
my Code in the mxml looks something like this
<mx:FormItem label="Company:" width="750" fontSize="20" horizontalAlign="right" color="#000000" required="true">
<ns1:AutoComplete enabled="true" labelField="CompanyName" textAlign="left" dropdownWidth="450" id="txtCompany" width="450" />
</mx:FormItem>
In the actionscript when the form loads, as part of the initialization a webservice call is made and the results from that call are set as the dataprovider for the above AutoComplete box like so
public function handleGetCompanyResult(event:ResultEvent):void{
txtCompany.dataProvider = event.result;
}
As I said, when I type a letter in the text box, I see a dropdownlist with a scroll bar on the left but it looks empty. When I click on one of the items, I see the associated company name in the text box. When I set a breakpoint the event.result is an ArrayCollection of proxyObjects.
I tried to change it and put some dummy data like so
public function handleGetCompanyResult(event:ResultEvent):void{
var companyList:ArrayCollection = ArrayCollection(event.result);
var displayCompanyList:ArrayCollection = new ArrayCollection();
displayCompanyList.addItem({CompanyName:"Test1"});
displayCompanyList.addItem({CompanyName:"Test2"});
displayCompanyList.addItem({CompanyName:"Test3"});
txtCompany.dataProvider = displayCompanyList;
}
Again, when I type "T" in the text box I see a dropdown list with 3 empty items. Clicking on the third item puts "Test3" in the textbox. But the items themselves are not visible.
It almost as if its a font/foreground color thing, but I've played around with some of those settings too with no success.
Any help would be much appreciated.
Ok, turns out the project was a Flex 3 project that was imported into Flex 4. It works where it does and breaks down where it doesn't. I created a simple Flex 4 project with an alert box and it worked. I slowly moved all my code across to this project and it worked. It gave me a warning about the styles tag about not being able to use or something like that. I just removed all of the style tags and it worked fine. It doesn't look the same, so I have to fiddle with it a bit more, but at least the text showed up. So something to do with the themes and the Flashbuilder compiler using them at compile time.
All I have to say is what a crappy tool. If the import didn't work, it should have failed completely ages ago. I searched and searched for any projects files or code files that were related to css or styles or themes. But clearly it was using something that was independent of my project to control some tiny part(s) of my project. The parameters of controls in my project were essentially dependent on some environmental/ide factors. What a pain to debug.