Tuesday, June 27, 2017

built a widget for a multiple phone number

Hello,

I have a widget for one number phone .As shown by the code below

---------------PhoneEditor.java-----------

import com.google.gwt.event.dom.client.BlurEvent;
   
import com.google.gwt.event.dom.client.BlurHandler;
   
import com.google.gwt.event.dom.client.FocusEvent;
   
import com.google.gwt.event.dom.client.FocusHandler;
   
import com.google.gwt.event.dom.client.KeyCodes;
   
import com.google.gwt.event.dom.client.KeyDownEvent;
   
import com.google.gwt.event.dom.client.KeyDownHandler;
   
import com.google.gwt.user.client.ui.Label;
   
import com.google.gwt.user.client.ui.PopupPanel;
   
import com.google.gwt.user.client.ui.TextBox;

   
public class TelephoneEditor extends TextBox implements BlurHandler, FocusHandler, KeyDownHandler {
     
public TelephoneEditor() {  
        addBlurHandler
(this);
        addFocusHandler
(this);
        addKeyDownHandler
(this);
        setMaxLength
(10);
     
}

     
private void unformat() {
        setText
(getUnformattedValue());
     
}

     
private void format() {
       
String text = getText();
        text
= text.replaceAll("\\D+", "");

       
if (text.length()>10) {
          text
= text.substring(0,10);
       
}

       
if (text.length() == 10) {
            setText
(text.substring(0, 3) + " " + text.substring(3, 6) + "-" + text.substring(6, 10));
       
} else {
          setText
(text);
       
}
     
}

     
@Override
     
public void onKeyDown(KeyDownEvent event) {
       
int keycode = event.getNativeKeyCode();

       
if (event.isControlKeyDown()) {
         
switch (keycode) {
         
case 67: // ctrl+C
         
case 86: // ctrl+V
         
case 88: // ctrl+X
           
return;
         
default:
           
break;
         
}
       
}
       
switch (keycode) {
       
case KeyCodes.KEY_ENTER:
       
case KeyCodes.KEY_TAB:
       
case KeyCodes.KEY_BACKSPACE:
       
case KeyCodes.KEY_DELETE:
       
case KeyCodes.KEY_LEFT:
       
case KeyCodes.KEY_RIGHT:
       
case KeyCodes.KEY_UP:
       
case KeyCodes.KEY_DOWN:
       
case KeyCodes.KEY_END:
       
case KeyCodes.KEY_ESCAPE:
       
case KeyCodes.KEY_PAGEDOWN:
       
case KeyCodes.KEY_PAGEUP:
       
case KeyCodes.KEY_HOME:
       
case KeyCodes.KEY_SHIFT:
       
case KeyCodes.KEY_ALT:
       
case KeyCodes.KEY_CTRL:
       
case 173: // - FF
         
break;

       
default:
         
// Accepte que les chiffres
         
if (((keycode >= 48 && keycode <= 57) || // 0 à 9
             
(keycode >= 96 && keycode <= 105))) { // numpad0 à numpad9
           
return;
         
}

         
// innerBox.cancelKey();
         
this.cancelKey();
       
}
     
}

     
@Override
     
public void onFocus(FocusEvent event) {
        unformat
();
        selectAll
();
     
}

     
@Override
     
public void onBlur(BlurEvent event) {
        format
();
     
}

     
@Override
     
public void cancelKey() {
       
super.cancelKey();
       
PopupPanel popup = new PopupPanel(true, false);
        popup
.add(new Label("Touche invalide."));
        popup
.showRelativeTo(this);
     
}

     
@Override
     
public void setValue(String value, boolean fireEvents) {
       
super.setValue(value, fireEvents);
        format
();
     
}

     
@Override
     
public String getValue() {
       
return getUnformattedValue();
     
}

     
private String getUnformattedValue() {
       
String text = getText();
        text
= text.replaceAll("\\D+", "");
       
return text;
     
}
   
}

and I  use PhoneEditor in UIBuilder file(*.ui.xml) for example

<gt:myLabel ui:field="Telephone" />


It's works for one number phone .Now I want to implement for a multiple number phone for example (office_phone, post,phone_home and cellular) . I don't want in my  uibuilder file(*.ui.xml) four line for (office_phone, post,phone_home and cellular) for example

<gt:myLabel ui:field="office_Phone" />
   
<gt:PhoneEditor/>
   
<gt:myLabel ui:field="phone_hone" />
   
<gt:PhoneEditor/>
   
<gt:myLabel ui:field="cellular" />
   
<gt:PhoneEditor/>
   
<gt:TextBox ui:field="post" />

I want to create a widget that groups all on one line as via a DTO

<gt:myLabel ui:field="phone_regroup" />
   
<gt:PhoneEditor/>


Please can you help me

Thanks

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment