I've made this sample:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window width="400" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<textbox id="textBox1"/>
<textbox id="textBox2" style="-moz-user-focus: ignore;"/>
<textbox id="textBox3"/>
</window>
And, at least here, the style applied to the second textbox is doing nothing. I expected it to avoid the user focus, as the doc says.
Does someone experienced this?
--edit
To whom it may concern, the working version:
<window width="400" height="300"
onload="document.getElementById('textBox2').tabIndex='-1';"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<textbox id="textBox1"/>
<textbox id="textBox2" onmousedown="return false;"/>
<textbox id="textBox3"/>
</window>
The textbox itself never takes focus. Instead, XBL creates an anonymous XHTML input element inside the textbox, and this is what takes focus. You can stop the textbox taking keyboard focus by setting its tab index to -1, and mouse focus by preventing the default action of mousedown events.
Another approach is to set the textbox to disabled or readonly, depending on why you don't want the textbox to be focused.
I opened a bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=627691
Related
Ey guys,
I want to disable specific nodes in a mx:Tree component.
The dataprovider is a XML file, and here is a sample of that menu:
<nav>
<menu label="Menu" action="" item="">
<menu label="Item 1" action="image" item="image.png" />
<menu label="Item 2" action="disabled" item=" " />
</menu>
</nav>
In the above example, you will get a simple menu item with two childs. I want to disable the second child (if action is set to disabled...)
How can I do this?
All I need is to simply change the font color of those items, or to make the alpha 0.5. If its possible to also disable the clicking, then thats good, but the main focus is giving them different color or opacity.
Any help is appreciated! :)
Thanks! :)
Basically that's how item renderer should looks like. However it's not going to work with xml dataprovider. I recommend you to to use collection of objects then it will work fine.
<?xml version="1.0"?>
<s:MXTreeItemRenderer xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
enabled="{data.action != 'disabled'}">
<s:Label text="{data.label}"
color="{data.action != 'disabled'? 0x000000:0xff0000}"/>
</s:MXTreeItemRenderer>
I have a mobile AIR app with a simple layout:
<s:layout><s:VerticalLayout /></s:layout>
<s:TextArea width="100%" height="100%" />
<HGroup width="100%" >
<s:Button label="button" />
<s:Button label="button" />
<s:Button label="button" />
</HGroup>
The application is set to resize when the soft keyboard opens by setting resizeForSoftKeyboard="true" in the main app. The textArea uses the default Flex 4.6 skin.
My problem is, that if the user opens the keyboard by typing text into my texArea, he will be unable to click the buttons below the TextArea, because as soon as he tries to click a button the soft keyboard lowers (because the focus it out of the TextArea?) and immediately opens again (because the mouseDown position is now above the TextArea?).
How can i prevent the soft keyboard from closing, so the user is able to click the buttons between the TextArea and the keyboard?
Thanks
This is very strange. I tried running your program myself, and I have no trouble at all:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="320" resizeForSoftKeyboard="true">
<s:layout><s:VerticalLayout /></s:layout>
<s:TextArea width="100%" height="100%" />
<s:HGroup width="100%" >
<s:Button label="button" click="trace('clicked')"/>
<s:Button label="button" click="trace('clicked')" />
<s:Button label="button" click="trace('clicked')" />
</s:HGroup>
</s:Application>
The keyboard opens when I touch the text area, closes when I click a button (without opening again), and the clicks show up in the console when debugging.
You didn't post the entire app, do you have anything in the complete program that I don't? In that case, I would see if any of that could interfere with the UI.
Maybe add an event to bring up the keyboard when the button is clicked i.e. in the click event handler of that button.
Also (and I havnt tried this myself), but in the deactivate event for the keyboard for that view, add event.preventDefault()
Brian
My button doesn't have a blue focus ring around it, even though it has focus.
I've got a component with a RadioButtonGroup and a Button. After a selection is made in the RadioButtonGroup, focus is switched to the Button. I added click="focusManager.setFocus(myCloseButton)" on the VBox.
After, a radioButton is selected, if the user clicks the spacebar the Button fires.
So, as I understand it focus was switched to the button. But, the button doesn't get a blue focus ring surrounding it. How do I get the focus ring?
(I have visible="false". I turn them to visible, after some effects are finished. So, don't let that throw you.)
<mx:VBox id="radioVBox" visible="false" click="focusManager.setFocus(myCloseButton)" >
<mx:RadioButtonGroup id="rgb1" itemClick="goClickHandler(event); "/>
<mx:RadioButton groupName="rgb1" label="{answerA}" value="{answerA}" />
<mx:RadioButton groupName="rgb1" label="{answerB}" value="{answerB}" />
<mx:RadioButton groupName="rgb1" label="{answerC}" value="{answerC}" />
</mx:VBox>
<mx:Button id="myCloseButton" label="Close"
width="100" height="40"
fontSize="20" fontWeight="bold"
click="closeHandler(event)"
visible="false" fontFamily="Verdana" />
Any suggestions?
Thank you.
-Laxmidi
You can force Flex show the focus drawing after your component get focus with something like this:
focusManager.getFocus().drawFocus(true);
also, you can try someting like:
myCloseButton.drawFocus(true);
Hope it helps.
I have a datagrid column as follows:
<mx:DataGridColumn
headerText="Description"
dataField="description"
editable="true"
editorXOffset="2" editorYOffset="2"
editorHeightOffset="20" editorWidthOffset="60"
itemEditor="com.jono.controls.DgItemEditor"
wordWrap="true"
/>
And a very simple DgItemEditor:
<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"
wordWrap="true" backgroundColor="#FFFFFF" backgroundAlpha="1">
</mx:TextArea>
Basically, this allows for a small 'popup' when the user edits a cell in the datagrid, allowing for more space to type. The problem that I am having is that the datagrid gridlines show through the itemeditor - i.e. the itemeditor is transparent. Is there any way that I can force it to be opaque?
First try setting the value of backgroundColor="0xFFFFFF" ... it's expecting a uint there, not a string. This can be confusing, because when you use a CSS stylesheet, you have to use the hash format (#FFFFFF).
Failing that, you could try putting the TextArea inside a Canvas in your itemEditor. Set the backgroundColor="0xFFFFFF" on the Canvas and backgroundAlpha="1.0".
The expected behaviour on enter in a form seems to be undefined in the HTML 4.01 Specification while the HTML 5 specification says it should be the first submit button in the form.
Internet Explorer (IE) highlights the first button in the form when the form has focus by adding a proprietary border or something. Other browsers do not add such a visual clue.
I'd like to use another button as the default and style this button so all browsers will provide a visual clue that it is the default button. (We're using ASP.NET which uses one form per page, and so it's hard to design the pages so that the default button always comes first.)
While I can easily accomplish this with javascript and css in most browsers, I'm having trouble making IE stop highlighting the first button.
Is there any way to tell IE to NOT highlight the first submit-button or to highlight a different button? Or is there some other solution that I've missed?
On your asp.net button control, set useSubmitBehavior="false". That renders the html as a button rather than a submit.
ASP.Net 2.0 also introduced the concept of DefaultButton.
This is available on atleast Form and Panel elements:
<form id="form1" runat="server" defaultbutton="Button2">
<div>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" />
<br />
<br />
<asp:panel id="something" defaultbutton="button3" runat="server">
<asp:TextBox id="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" />
<br />
<asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" />
</asp:panel>
<br />
<br />
</div>
</form>
So, when you load the page, or are entering text in TextBox1, pressing Enter will submit Button2. When you are entering text in TextBox2 pressing Enter will submit Button3 - as you are inside the Panel.
This is powered by an onkeypress method created by ASP.Net.
When the page loads, IE and Firefox both highlight Button2 (as you want).
If you know which button will be declared as the defaultbutton, you can use what ever CSS you would normally use to style this for all browsers.
Rather annoyingly, when you focus either text box, IE will then (incorrectly) highlight Button1.
This is because IE's default behaviour is overridden by some javascript emitted by ASP.Net:
<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('Button2');//]]>
</script>
But, IE will then ignore that once another element has focus, and go back to highlighting the wrong button (which doesn't get used unless the user explicitly clicks it in this example).
Other than replacing them with image buttons, I'm not sure what else I can suggest.
One way to get around this is to create a dummy button at the top of the form and move it out of sight. Then handle the enter keycode in javascript and style the new default button with css.
Feels dirty though. Any better ideas?
Use either of these CSS Styles
a:active, a:focus,input, input:active, input:focus{ outline: 0; outline-style:none; outline-width:0; }
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
{ border: none; }
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
If you are using .Net 2 this may help you
...Use the DefaultFocus property to
access the control on the form to
display as the control with input
focus when the HtmlForm control is
loaded. Controls that can be selected
are displayed with a visual cue
indicating that they have the focus.
For example, a TextBox control with
focus is displayed with the insertion
point positioned inside of it. ...
What about defining a particular CSS style (or class) for this button ?
<input type="button" value="basic button" .../>
<input type="button" style="border: solid 2px red;" value="default button" .../>