Event Attributes

EventAttribute

Attributes which can execute JavaScript on some event are considered as event attributes. Eg :- onclick, onchange etc...

All event attributes in wffweb contain a common constructor containing four arguments which are used to handle events at client side and server side. See the below code sample

public class SampleCode extends Body {
    
    public SampleCode() {
        super(null);

        develop();
    }

    private void develop() {
        
        ServerAsyncMethod serverAsyncMethod = new ServerAsyncMethod() {

            @Override
            public WffBMObject asyncMethod(WffBMObject wffBMObject,
                    Event event) {

                // the sourceTag from which the event generated
                // in this sample sourceTag instance will be button1 instance
                AbstractHtml sourceTag = event.getSourceTag();

                // used to send data to the client
                WffBMObject bmObject = new WffBMObject();
                bmObject.put("someKey", BMValueType.STRING,
                        "こんにちは WebFirmFramework");

                return bmObject;
            }
        };

        String preJsFunctionBody = "/* event and source keywords are implicit objects here */ /*may be on some condition*/ return true;";

	//source is equivalent to event.srcElement
        String jsFilterFunctionBody = "/* event and source keywords are implicit objects here */ var dataFromClient = {'clientKey' : 'clientValue', elementId : source.id, elementName : event.srcElement.name}; return dataFromClient;";

        // jsObject is an implicit object
        // which is a conventional representation of bmObject
        String postJsFunctionBody = "alert(jsObject.someKey);";

        OnClick onClick = new OnClick(preJsFunctionBody, serverAsyncMethod,
                jsFilterFunctionBody, postJsFunctionBody);

        Button button1 = new Button(this, onClick);
    }
}
				

In the above code, OnClick is an event attribute. There are four arguments for its constructor preJsFunctionBody , serverAsyncMethod , jsFilterFunctionBody and postJsFunctionBody. preJsFunctionBody , jsFilterFunctionBody and postJsFunctionBody can contain JavaScript function body without function declaration and all these are executed at client side.

preJsFunctionBody should return boolean value. If it returns true then only serverAsyncMethod will be invoked. This will be useful when there is a validation needs to be done at client side before invoking serverAsyncMethod. event and source are implicit objects in its scope. source is equivalent to event.srcElement.

serverAsyncMethod should be an instance of ServerAsyncMethod. ServerAsyncMethod#asyncMethod invokes at server side. asyncMethod contains two arguments wffBMObject and event. The returned JavaScript object by jsFilterFunctionBody will be received as a wffBMObject.

The role of jsFilterFunctionBody is to provide data to asyncMethod. The jsFilterFunctionBody should return either a JavaScript object or null. This JavaScript object will be converted to a WffBMObject which will be received as an argument in asyncMethod. event and source are implicit objects in its scope. source is equivalent to event.srcElement.

postJsFunctionBody is executed after asyncMethod is invoked. The role of postJsFunctionBody is to receive data returned by asyncMethod. In the sample code, asyncMethod returns an object bmObject which will be converted to a JavaScript object, this JavaScript object be available as an implicit object jsObject in the scope of postJsFunctionBody.

WffBMObject

WffBMObject stores data as key value pairs. Unlike JSON, it can also contain binary data (WffBMByteArray) in its value. The data types supported by WffBMObject can be found in BMValueType enum. WffBMObject can also be used to send and receive binary data from server to client and vice versa.

Check out this sample project for code reference.

CustomEventAttribute

com.webfirmframework.wffweb.tag.html.attribute.event.CustomEventAttribute can be used to create a custom event attribute. See the below sample code

CustomEventAttribute customEventAttribute = new CustomEventAttribute("onclick"
                , preJsFunctionBody, serverAsyncMethod, jsFilterFunctionBody, postJsFunctionBody);

Next >>

Subscribe on youtube for technical videos