Aktualisierungen November, 2009 Kommentarverlauf ein-/ausschalten | Tastaturkürzel

  • Andreas Höhmann 16:35 am Monday, 16. November 2009 Permalink |
    Tags: , , , ,   

    Richfaces modal panel default formular action 

    Each input dialog should have a default action for good useability.

    If the user hit ‚Enter‘ then the default action should execute.

    Here is my example of a richfaces modal edit dialog for such a requirement …

    The dialog have input fields and 3 actions:

    • save – is the default action if the user hit ‚Enter‚ anywhere in the formular
    • cancel – is the default action if the user hit ‚Esc‚ anywhere in the formular
    • reset
    <modalPanel id="edit_dialog">
      <a4j:form id="edit_form" ajaxSubmit="true">
    
        <!-- some fields ... -->
        <outputLabel value="What's your title:" for="title"/>
        <inputText  id="title" value="#{bean.title}"/>
        <outputLabel value="What's your name:" for="name"/>
        <inputText  id="name" value="#{bean.name}"/>
    
        <!-- the actions ... -->
        <a4j:commandButton id="save" value="Save" action="#{bean.save}" type="submit"
             oncomplete="if(#{facesContext.maximumSeverity==null}) Richfaces.hideModalPanel('edit_dialog')"/>
             <!-- if no error then close the edit-dialog ... 
                    is not necessary if you don't use dialogs -->
    
         <a4j:commandButton id="reset" value="Reset" action="#{bean.reset}"
              limitToList="true" reRender="edit_form" ajaxSingle="true" type="reset"/>
    
         <a4j:commandButton id="cancel" value="Cancel" action="#{bean.cancel}" ajaxSingle="true"
              oncomplete="Richfaces.hideModalPanel('edit_dialog')"/>
    
         <!-- the default actions for the formular 'onEnter' and 'onEsc' ... -->
         <rich:hotKey key="return" selector="#edit_form"
             handler="${rich:element('edit_form:save')}.click();event.stopPropagation();event.preventDefault(); return false;"
             disableInInput="false"/>
    
         <rich:hotKey key="esc" selector="#edit_form"
             handler="${rich:element('edit_form:cancel')}.click();event.stopPropagation();event.preventDefault(); return false;"
             disableInInput="false"/>
    
       </a4j:form>
    </rich:modalPanel>
    

    It’s important to define ajaxSubmit=“true“ for the form! This avoid „none ajax submit of html formulars“. I will explain this in a later blog 🙂

    With rich:hotKey I bind 2 key events to the edit formular:

    • on ‚enter‘ – the handler click the save button
    • on ‚esc‘ – the handler click the cancel button

    Try it 😀

    Advertisements
     
    • hicham7412 23:20 am Mittwoch, 23. Juni 2010 Permalink | Zum Antworten anmelden

      Hi Andreas,

      interesting post, I am just wondering why you always put return false; in the handler of the hotKey.

      • Andreas Höhmann 8:40 am Donnerstag, 24. Juni 2010 Permalink | Zum Antworten anmelden

        I do this because it would stop the event propagation … Do you think this is not necessary?

        event.stopPropagation();event.preventDefault();return false;

    • ikren05 3:34 am Montag, 23. August 2010 Permalink | Zum Antworten anmelden

      hi!
      i’ve just done the same.. clicking enter saves the changes. clicking esc does nothing.. anyone, please help.. thank you in advance 😀

    • dominic89 16:14 am Donnerstag, 26. August 2010 Permalink | Zum Antworten anmelden

      hi,

      I tried a little diffrent way to close the ModalPanel. I have a Textinputfield with attribute required =“true“.
      If I press the save button the ModalPanel is empty (no Text,Fields and Buttons are shown) but it doesn’t close.

      Maybe you have an idea why the panel doesn’t close

      thank you in advance

    • rajendraj 7:44 am Dienstag, 31. August 2010 Permalink | Zum Antworten anmelden

      Hai Andreas,
      I am new to rich faces; I am using calendar component i can able select the date from the calendar component, now i am trying to enter date into the calendar component for that i have used enable manual inout = ‚true‘ and i am able to enter date into the calendar component.I have kept the datepattern =’dd-MMM-yyyy‘ so accordingly i am able to enter date. Now my question or functionality is:

      Q. I need to enter date manually into the calendar component like:31082010
      after an event like onblur or onenterkeypress it should change the pattern into user defined format like(31-Aug-2010).
      How to achieve in the calendar component, Is it same like text field entry??
      Please explain me how to do that???

    • rajendraj 7:46 am Dienstag, 31. August 2010 Permalink | Zum Antworten anmelden

      I forgot to tell; I have asked this question in rich faces forums also, please tell how to achieve the above functionality?? Thanks in advance Andreas

  • Andreas Höhmann 15:57 am Monday, 16. November 2009 Permalink |
    Tags: focus, , , , rich,   

    Richfaces modal panel autofocus first input element 

    With jQuery it’s easy to focus the first visible input element (textfield, textarea or selectbox) for a rich:modalPanel:

    <rich:modalPanel onshow="autofocus('dialog_content')">
      <h:panelGrid id="dialog_content" columns="1" width="100%" cellpadding="0" cellspacing="0">
         <a4j:form ajaxSubmit="true">
           <h:outputLabel value="What's your name:" for="name"/>
           <h:inputText  id="name" value="#{bean.name}"/>
           ...
           <a4j:commandButton id="save" value="Save my name" action="save"/>
         </a4j:form>
      </h:panelGrid>
    </rich:modalPanel>
    
    function autofocus(containerId) {
      var element = jQuery(":input:not(:button):visible:enabled:first", '#'+containerId);
      if (element != null) {
        element.focus().select();
      }
    }
    
     
  • Andreas Höhmann 15:50 am Friday, 6. November 2009 Permalink |
    Tags: backspace, disable, , javascript, , ,   

    Disable backspace key in a Richfaces application 

    If you want disable the Backspace key in your JSF Richfaces application put this in your view:

    <rich:hotKey key="backspace" handler="return false;" disableInInput="true"/>
    

    This will register a jQuery Hotkey handler for the document. The handler is not reqistered for input elements because in input fields you need the backspace ;-). Tested for FF3 and IE6.

    Then I found out that the following snippet doesn’t work:

    <rich:hotKey key="backspace"
                 disableInInput="true"
                 handler="alert('Backspace is disabled'); return false;" />
    

    The Browser open the alert box and go to the previous page (in background?!). But there is a fix for that:

    <rich:hotKey key="backspace"
                 disableInInput="true"
                 handler="alert('Backspace is disabled'); event.stopPropagation(); event.preventDefault(); return false;" />
    

    The event variable is available in the handler function (see org.richfaces.renderkit.html.HotKeyRenderer method doEncodeEnd).

     
c
Neuen Beitrag erstellen
j
nächster Beitrag/nächster Kommentar
k
vorheriger Beitrag/vorheriger Kommentar
r
Antworten
e
Bearbeiten
o
zeige/verstecke Kommentare
t
Zum Anfang gehen
l
zum Login
h
Zeige/Verberge Hilfe
Shift + ESC
Abbrechen