How to switch to a specific tab via a hot key?
We are trying to switch between tabs of a tab panel but it seems that this is not supported. To be able to react on a hot key for a specific component it seems that the respective component must be in a kind of focus. It also seems that this kind of focus is not available for a tab panel. Below you see a short sample:
When hitting the tab key the cursor jumps between the input field and the command button (this also depends on the browser, this is the case for Opera; when using Chrome, the cursor jumps between the input field for the URL of the browser, the input field of the sample and the command button). Anyways, no matter which browser is used, the cursor does not “stop” for the tab panel. I guess this is the reason why the hot keys do not work for the tabs.
{code:xml}
<script type="text/javascript">
function hello() {
console.log("hello ...");
}
</script>
<h:form id="mainForm">
<rich:panel id="mainPanel">
<rich:tabPanel id="tabPanel" switchType="client" >
<rich:tab header="Tab1" id="tab1" name="tab1" >
<p>Tab 1</p>
<h:inputText id="inp1"/>
</rich:tab>
<rich:tab header="Tab2" id="tab2" name="tab2">
<p>Tab 2</p>
<h:inputText />
</rich:tab>
</rich:tabPanel>
<h:commandButton value="Tab2">
<rich:componentControl target="tabPanel" event="click" operation="switchToItem">
<f:param value="tab2" />
</rich:componentControl>
</h:commandButton>
<rich:hotKey key="alt+q" selector="#tabPanel">
<rich:componentControl target="tabPanel" operation="switchToItem">
<f:param value="tab2" />
</rich:componentControl>
</rich:hotKey>
<rich:hotKey key="alt+w" selector="#tabPanel" onkeyup="#{rich:component('tabPanel')}.switchToItem('tab2')" />
<rich:hotKey key="alt+j" selector="#tabPanel" onkeyup="hello()" />
<rich:hotKey key="alt+i" selector="#inp1" onkeyup="hello()" />
</rich:panel>
</h:form>
{code}
What for the sample works is:
- When cursor is inside the input field of tab 1, hitting alt-i calls the hello function. This is the proof that the hot key concept principally works in my environment.
- Clicking the Tab2 command button switches to Tab2. This is the proof that the concept of componentControl works in my environment.
What for the sample does not work is:
- Pressing the hot keys alt-q or alt-w does not switch to tab2.
- Pressing the hot key alt-j does not call the hello function.
So you might ask why we want to switch between the tabs via the key board. The reason is that we have rules for handicapped persons to use a web application just by keyboard, not by mouse.
I tries the sample with RichFaces 4.2.2.Final.
Georg
