B4J Tutorial [WebApp] Custom Elements - DatePicker & Dialogs

The web app framework can be easily extended with new elements and new features.

In this example we use two elements from jQuery UI library:

SS-2014-04-13_14.45.10.png


SS-2014-04-13_14.45.38.png


The dialog is a div element. We need to call a method named dialog when the page is loaded (see the API: http://jqueryui.com/dialog/).

This is done when the websocket is connected:
B4X:
Dialog.RunMethod("dialog", Array As Object(CreateMap("autoOpen": False, "modal": True)))

The DatePicker element is more interesting. We want to catch its onSelect event and send it to the server.

This is done with the b4j_raiseEvent JavaScript function:
SS-2014-04-13_14.50.07.png


The id must be lowercase for this to work. You can include other parameters in the event.

Online example: http://basic4ppc.com:51042/datepicker/index.html

The project is attached.
 

Attachments

  • DatePicker.zip
    3.6 KB · Views: 1,188
Top