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:

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:

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:

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.

 

[Erel]

A jQuery UI Tabs control was added to the example:

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

You can download the updated code from the online examples project: http://www.b4x.com/android/forum/threads/webapp-web-apps-overview.39811