• === Event modifiers in Echo ===

Currently the events in the Echo framework only support a click action. When you want to know if an event modifier like CTRL, ALT or SHIFT was pressed there is currently no way of knowing this.

This article will show you how you can modify echo2 so that it can tell you the modifiers on a given event. In this example i will modifiy existing echo source, but you can always make your own componeny and use the technique described in this article.

• === Step 1 ===

The first thing you will need is a Event object that can hold the action modifiers. In this case we will modify ActionEvent as this is the event user for clicks fromt he user. The modified code:

public class ActionEvent extends EventObject { 

    private String command = null;
    private int modifiers = 0;
    public static final int CTRL_MODIFIER = 1;
    public static final int ALT_MODIFIER = 2;
    public static final int SHIFT_MODIFIER = 4;

    /**
     * Creates an ActionEvent.
     *
     * @param source the object from which the event originated
     * @param command "command" string describing the action
     */ 
    public ActionEvent(Object source, String command) {
        this(source,command,0);
    }
    
    /**
     * Creates an ActionEvent.
     *
     * @param source the object from which the event originated
     * @param command "command" string describing the action
     */ 
    public ActionEvent(Object source, String command, int modifiers) {
        super(source);
        this.command = command;
        this.modifiers = modifiers;
    }
    
    /**
     * Returns the command string describing this action.
     * 
     * @return the command string
     */
    public String getActionCommand() {
        return command;
    }
    
    public int getModifiers(){
        return modifiers;
    }
} 

As you can a constructor for the event modifiers and a way of getting them where added.

Now that we can store the modifiers in the event we need to find out what modifiers where used. This can be done in the JS file for a component. In this case we will use Button. To do this modify the Button.js funtion called doAction

EchoButton.prototype.doAction = function(echoEvent) {
    if (this.toggle) {
        this.doToggle();
    }
    
    if (!this.serverNotify) {
        return;
    }
    
    if (document.selection && document.selection.empty) {
        document.selection.empty();
    }
    
    var eventType = "";
    if (echoEvent.ctrlKey) {
        eventType += "|ctrl"
    }
    if (echoEvent.altKey) {
        eventType += "|alt"
    }
    if (echoEvent.shiftKey) {
        eventType += "|shift"
    }
    EchoClientMessage.setActionValue(this.element.id, "click", eventType);
//  EchoClientMessage.setActionValue(this.element.id, "click");
    
    EchoServerTransaction.connect();
};

You can see we extract the event modifiers and pass them into the setActionValue method.

This method will make sure our modified event gets to the Peer component. The peer component will make sure the processInput method of the component gets called. So we will need to modify this method. Below is the modified code for AbstractButton.

    public void processInput(String name, Object value) {
        super.processInput(name, value);
        if (INPUT_CLICK.equals(name)) {
                if(value != null && !value.equals("")){
                        String modifiers = value.toString();
                        int modifier = 0;
                        
                        if(modifiers.indexOf("|ctrl") > -1 ){
                                modifier = modifier | ActionEvent.CTRL_MODIFIER;
                        }
                        if(modifiers.indexOf("|alt") > -1 ){
                                modifier = modifier | ActionEvent.ALT_MODIFIER;
                        }
                        if(modifiers.indexOf("|shift") > -1 ){
                                modifier = modifier | ActionEvent.SHIFT_MODIFIER;
                        }
                        ActionEvent event = new ActionEvent(getModel(),getActionCommand(),modifier);
                        getModel().doAction(event);
                } else {
                        doAction();
                }
        }
    }

As you can see we now constructed a ActionEvent with the modifiers used and you can now check for those modifiers in your event listener.

So you can now go implement this on the components you need it and per component you will need to modify the JS file and the processInput method.