I need to use checkbox as radiobutton.
In my case I'd like to define a checkbox group but I don't know why.
If I select one checkbox, I'd like that other checkbox are deselecting
Could you help me ?
Thanks
If there is a static amount of radio buttons you need, you could use Spark States.
<s:states>
<s:State name="check1"/>
<s:Stage name="check2"/>
</s:States>
<s:CheckBox selected="false" selected.check1="true" click="currentState='check1'"/>
<s:CheckBox selected="false" selected.check2="true" click="currentState='check2'"/>
When you click the first one, it triggers the "check1" state in which the first check box is selected and the other is unselected. Clicking the second one does the opposite. Obviously, this is not as flexible as some would hope. But if it's for an interface element (such as an options menu), it's perfect.
States are incredibly useful if you understand how and when to use them. This past weekend, I created an all-Flex slideshow using them and it is a great example of how powerful that simple little array can be.
EDIT: I just threw together a simple app to test this, and it doesn't look like it will work using click. I'm sure you could tinker with another event to get it to work, though. Sorry this didn't work.
I'd use RadioButtons, but if you really wanted to do it, I'd take LondonDrugs_MediaServices approach.
CheckBox and RadioButton both extend from ToggleButtonBase.
Create your own CheckBoxRadioButtonSkin. Copy the CheckBoxSkin to it and rename the hostComponent.
Then use this skin on your radioButton to make it appear to be checkbox.
I have had a requirement like this before and I used a Datagrid with Checkbox inside as itemRenderer.
I subclassed the Checkbox, overrode data getter so that each time it is clicked all the items of Datagrid are unselected, unchecked except for him. This method acquired some advantages:
Flexible to add number of options programmaticcally.
Display title of option group or not.
Enable to use scrollbar if there is a limit of space.
Hope the solution is what you are looking for.
Related
I'm using bootstrap 3 and am trying to imitate jQueryMobile's select option where you can replace the standard select textbar and arrows with just a button which toggles the opening of said select.
I don't want to use dropdowns either because they get hidden inside my nested divs (if you can make them appear at the topmost layer, then that's fine too).
So I'm wondering if there's a way to have a button as a stand-in for opening the select options.
Not totally sure on this, need a little more information. But you can create a button with:
<button type="button" onclick="alert('Message')">Button</button>
if that what you wanted?
This isn't exactly what you asked for but I did a search and found this plugin and I think if you were to experiment with this then you could come up with the desired effect. Give it a look over.
Theres a spot about a 1/3 of the way down the page which I think would help you decide if this would work.
Plugin: Bootstrap-Select
I'm replacing a winforms screen with an html interface, which needs to run in IE7/8/9 & Firefox.
Currently on one of our screens we have a funky input control that looks like this:
The user can enter a value in one of three ways:
the user can just type into the box
the user can select an item from the dropdown
the user can tick the ‘Unopened’ checkbox, which effectively chooses a known item we call ‘Unopened’
There’s also a search button ‘…’ but that’s another control which is easy to implement.
I want to rebuild this using html and am wondering how to replace the Unopened function, as (a) and (b) are easy enough. I’m thinking I’ll just put a separate Unopened checkbox beneath the INPUT box instead of inside it, because that would be simpler. But if there's a way to keep it looking like it does now I’d probably prefer that. Is that possible?
UPDATE:
Secondary question: if I do put the checkbox inside the INPUT box using CSS am I just bringing upon myself a lot of pain with quirky little usability or layout problems or is this something that's not too unusual or hard to do?
You can put it in a separate div and then position it with CSS to look like it's inside of the input field:
#checkbox {
position: relative;
top: -10px;
}
or whatever values you need...
Regarding your second question: Nope. It's not actually "inside" the box, it just appears that way. All the functionality will still be there. =)
http://jsfiddle.net/BdBTy/ is a quick example of how this works.
place the check right below the textbox in html
in css for the checkbox put
margin-top:-25px;
(or whatever exact number you need)
Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.
I have a DataGrid populated via an Array. The last column in the DataGrid uses an ItemRenderer (Button). I want to show the Button in certain rows but not in others (leave those empty). I've looked everywhere for an example or even a clue how to do this (tried labelFunction on DG, etc.) but can't find anything about it. Any help would be appreciated. Thanks!
Okay... with (lots of) help, figured it out.
First off, I'm not sure why the itemRenderer requires a container but it does. The array must also be checked from the itemRenderer and not from the main application... again, I don't know why since the debugger shows it going through the exact same loop/events, etc.).
If interested here's the relevant parts of the code:
Main App:---
{col1:'', col2:'', col3:'', col4:'', col5:'', col6:'', col7: '', col8:'', col9:'', col10:'', col11:'yo'}];
public function initData():void
{ xferSchedule.dataProvider = schedArray; }
]]>
an item renderer does not have to be a container, it has to implement IDataRenderer (a Button does not). One could extend Button and implement this interface to get a simple button renderer. If you want it to display conditionally, you will accomplish this by handling those conditions within the renderer based on the data.
Now this might get slightly complex. I would recommend you to define you an XML instead of Array of Objects. If the node has the type property button, then it would create button at that cell whose value type is button.
How to create a button dynamically inside a grid which is yet again dynamic?
This might end into the whole component being dynamic.
I'd like to conditionally hide a tab in a TabNavigator. It seems that setting visible doesn't work properly (presumably because this is how the TabNavigator hides the tabs that aren't currently selected).
What's the right way to do this?
You can do this by making use of TabNavigator's getTabAt() method which returns the Button that makes up the visual tab. You can then set that Button's visible property. It's a little tricky to get this setup with a bindings, but it's doable.
You could also consider just disabling the tab instead, which you can do by setting enabled on the corresponding TabNavigator child (for which visible didn't work).
What do you mean by hide? If you actually mean remove, then just take your array that's bound to the data in the TabNavigator, and remove the applicable element from it.
If you want to just have them removed temporarily, create a component of your own that encapsulates the TabNavigator and has an array of removed tabs and an array of actual tabs. Then handle this as you see fit.
You might want to check out the flexlib project. They have a component called SuperTabNavigator that adds a lot of functionality to the base Flex TabNavigator, including hiding tabs (I think).
If you do have to create your own component, though, it's a bit more tricky. The thing to know is that "tabs" are actually specially styled buttons, contained within a TabBar component (the TabBar is then contained within the TabNavigator). What you'll have to do then, is subclass TabNavigator and have some property on your views (i.e. the canvases, etc. that are added to the TabNavigator) that is bound to the visible and includeInLayout properties of the TabBar buttons.
In essence, what you'll have is something like:
BindingUtils.bindProperty( tabButton, "visible", view, "someProperty" );
BindingUtils.bindProperty( tabButton, "includeInLayout", view, "someProperty" );
I don't know about TabNavigator, but in other containers, you can set the includeInLayout property to false and it will be ignored. You probably still need to combine it with visible.
var secondTab = tabNavigator.removeChildAt(0);