MBaaS

MBaaS is mobile backend as a service + software as a service

Developer could simplify able to write code for rest json service and design application for different purpose

You could simply registration for your application with just a few seconds, after the registration is successfully, MBaaS will create a new application, and assign you as the administrator, and also create one admin user by default.

Goto MBaaS Registration

Field	Description
Server IP	MBaaS Server IP
FQDN	fully qualify domain name
Full Name	first name and last name
Login	name for login into application
Password	password for login into application
Retype Password	verify password

Boolean

// influence java type java.lang.Boolean
var me = new Boolean(true);

// javascript
var me = true;

Byte

// influence java type java.lang.Byte
var me = new Byte(11);

// javascript
var me = 123;

Short

// influence java type java.lang.Short
var me = new Short(113);

// javascript
var me = 123;

Integer

// influence java type java.lang.Integer
var me = new Integer(11);

// javascript
var me = 123;

Long

// influence java type java.lang.Long
var me = new Long(11);

// javascript
var me = 123;

Float

// influence java type java.lang.Float
var me = new Long(11);

// javascript
var me = 123;

Double

// influence java type java.lang.Double
var me = new Double(11);

// javascript
var me = 123;

Character

// influence java type java.lang.Character
var me = new Character('c');

// javascript
var me = 'c';

String

// influence java type java.lang.String
var me = new String("ppp");

// javascript
var me = "pp";

Date

// influence java type java.util.Date
var me = new Date();

LocalDate

// influence java type java.time.LocalDate
// no example yet :D

LocalTime

// influence java type java.time.LocalTime
// no example yet :D

LocalDateTime

// influence java type java.time.LocalDateTime
// no example yet :D

BigDecimal
BigInteger
Arrays
Collections
LinkedHashMap
LinkedHashSet
Hashtable
Vector
LinkedList
ArrayList
HashMap
ArrayBlockingQueue
SynchronousQueue
DelayQueue
LinkedTransferQueue
ArrayDeque
ConcurrentLinkedDeque
Stack
Tables
DSL
ValidationError
StringUtils
Option
Jdbc
UUID
SimpleJdbcInsert
SimpleJdbcUpdate

Collection is table
Attribute is field
Document is record

MBaaS allow us to create table, field, and create record vai their interface.

Create

var jdbcInsert = new SimpleJdbcInsert(jdbcTemplate);
jdbcInsert.withTableName("user");
var userId = UUID.randomUUID().toString();
var fields = new HashMap();
fields.put("user_id",userId);
jdbcInsert.execute(fields);

var jdbcInsert = factory.createSimpleJdbcInsert("user");
var userId = UUID.randomUUID().toString();
var fields = new HashMap();
fields.put("user_id",userId);
jdbcInsert.execute(fields);

Read

jdbcTemplate.queryForList(query,param...)

// Example It will return a list of map
jdbcTemplate.queryForList("select * from user where user_id = ? and created_date = ?", 1, new Date());

jdbcTemplate.queryForMap(query,params...)

// Example It will return a map
jdbcTemplate.queryForMap("select * from user where user_id = ? and created_date = ? limit 0,1", 1, new Date());

Update

var jdbcUpdate = new SimpleJdbcUpdate(jdbcTemplate);
jdbcUpdate.withTableName("user");
var fields = new HashMap();
fields.put("created_date", new Date());
var wheres = new HashMap();
wheres.put("user_id", 1);
jdbcUpdate.execute(fields,wheres);

var jdbcUpdate = factory.createSimpleJdbcUpdate("user");
var fields = new HashMap();
fields.put("created_date", new Date());
var wheres = new HashMap();
wheres.put("user_id", 1);
jdbcUpdate.execute(fields,wheres);

Delete

jdbcTemplate.update(query,params...);

// Example
jdbcTemplate.update("delete from user where user_id = ?",1);

Menu : it is used to group pages together which might have similar function, category. it is also help you to keep more room for display content.

Block

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel, blockModel) {
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel, blockModel) {
}

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:wicket="http://wicket.apache.org">
  <body>
    <wicket:panel>
      <span>your markup</span>
    </wicket:panel>
  </body>
</html>

Layout

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:child/>
</body>
</html>

Page

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <span>your markup</span>
  </wicket:extend>
</body>
</html>

There are two types of markup element

Simple Markup it is a traditional markup html that will send to browser the same as it is defined.

Server Side Markup it is a markup html that will be handle and manage by server before it is transform and send to browser, usually server markup it is always have wicket:id attribute.

<label wicket:id="label">Label</label>

There are two types of server side markup element, form input element, and none form input element

Form Input Element

all form input element share the same abstract behaviour

input.registerValidator(event);
input.registerValidator(event, params);

input.setRequired(boolean);

input.setVisible(boolean);
input.setEnable(boolean);

function {input}__{event}(jdbcTemplate, validatable, params){
}

HiddenField
CheckBox
TextField, RequiredTextField, EmailTextField, PasswordTextField, UrlTextField, ColorTextField, DateTextField, TimeTextField, NumberTextField, RangeTextField, EditorTextArea
DropDownChoice, ListChoice, RadioChoice, Select2SingleChoice
CheckBoxMultipleChoice, Select2MultipleChoice, ListMultipleChoice
FileUpload, MultipleFileUpload

None Form Input Element

All element are able to disable and enable or show and hide

element.setVisible(boolean);
element.setEnable(boolean);

Feedback
Label
Form
FilterForm
Table
FullCalendar
Image
Tab
Block
Popup
Link, PageLink, AjaxLink
Button, AjaxButton

There are two kind of validation, single input validation and compound input validation

Single Input Validation

input.registerValidator(event);
input.registerValidator(event, params);

function {input}__{event}(jdbcTemplate, validatable, params){
}

Compound Input Validation

form.registerValidator(event, inputA, inputB);
form.registerValidator(event, params, inputA, inputB);

function {form}__{event}(jdbcTemplate, formComponents, params){
}

It is a kind of DAO access object which offer use to access database for read, write, delete, query, update...

// this is example of query for a list of records
var query = "select * from page";
var result = jdbcTemplate.queryForList(query);

// this example of query for a single record
var query = "select * from page limit 0,1"
var result = jdbcTemplate.queryForMap(query);

of course it does much more than this, go to reference

It is build-in factory object in MBaaS which use for create object, create markup server element, navigation between pages.

1. Page Navigation

var pageCode = 'page_code';
var params = {
    'email': 'pkayjava@gmail.com',
    'subject': 'contact'
};
factory.navigateTo(pageCode);
factory.navigateTo(pageCode, params);

2. Find Page Element

var element = factory.getChildren('elementId');

3. Create an array of the given condition

var pageIdField = DSL.field('page_id',String.class);
var condition = pageIdField.eq('1');
var arrayCondition = factory.arrayCondition(condition);

4. Enable WebSocket

factory.registerWebSocket();

5. Create Simple Markup

factory.createWebMarkupContainer('elementId');
factory.createWebMarkupContainer(container,'elementId');

6. Create Reference Address Link

var pageCode = 'page_code';
var params = {
    'email': 'pkayjava@gmail.com',
    'subject': 'contact'
};
factory.createAddressLink(pageCode);
factory.createAddressLink(pageCode, params);

7. Create Form Element

factory.createForm('elementId');
factory.createForm(container, 'elementId');

8. Create Filter Form Element

factory.createFilterForm('elementId');
factory.createFilterForm(container, 'elementId');

9. Create jdbc / jdbcInsert / jdbcUpdate

var jdbc = factory.createJdbcTemplate();
var jdbcInsert = factory.createSimpleJdbcInsert('tableName');
var jdbcUpdate = factory.createSimpleJdbcUpdate('tableName');

10. Create Collection List / Map

var list = factory.createList();
var map = factory.createMap();

11. Create ListModel / MapModel

var list = factory.createList();
var listModel = factory.createListModel(list);
var map = factory.createMap();
var mapModel = factory.createMapModel(map);

12. Create StringBuilder / StringBuffer

var builder = factory.createStringBuilder();
var buffer = factory.createStringBuffer();

13. Create Option / Option Choice Renderer

var id = '1';
var text = 'Female';
var option = factory.createOption(id, text);
var attributeNameId = 'id';
vat attributeNameText = 'text';
var renderer = factory.createChoiceRenderer(attributeNameId, attributeNameText);

14. Create HiddenField

var element = factory.createHiddenField('elementId', clazz);
var element = factory.createHiddenField(container, 'elementId', clazz);

15. Create CheckBox

var element = factory.createCheckBox('elementId');
var element = factory.createCheckBox(container, 'elementId');

16. Create TextField

var element = factory.createTextField('elementId', clazz);
var element = factory.createTextField(container, 'elementId', clazz);

16. Create RequiredTextField

var element = factory.createRequiredTextField('elementId', clazz);
var element = factory.createRequiredTextField(container, 'elementId', clazz);

17. Create EmailTextField

var element = factory.createEmailTextField('elementId');
var element = factory.createEmailTextField(container, 'elementId');

17. Create PasswordTextField

var element = factory.createPasswordTextField('elementId');
var element = factory.createPasswordTextField(container, 'elementId');

18. Create UrlTextField

var element = factory.createUrlTextField('elementId');
var element = factory.createUrlTextField(container, 'elementId');

19. Create ColorTextField

var element = factory.createColorTextField('elementId');
var element = factory.createColorTextField(container, 'elementId');

20. Create DateTextField

var element = factory.createDateTextField('elementId');
var element = factory.createDateTextField(container, 'elementId');

21. Create TimeTextField

var element = factory.createTimeTextField('elementId');
var element = factory.createTimeTextField(container, 'elementId');

22. Create NumberTextField

var element = factory.createNumberTextField('elementId');
var element = factory.createNumberTextField(container, 'elementId');

23. Create RangeTextField

var element = factory.createRangeTextField('elementId');
var element = factory.createRangeTextField(container, 'elementId');

24. Create EditorTextArea

var element = factory.createEditorTextArea('elementId');
var element = factory.createEditorTextArea(container, 'elementId');

25. Create DropDownChoice

var element = factory.createDropDownChoice('elementId', listModelOfOption, optionChoiceRenderer);
var element = factory.createDropDownChoice(container, 'elementId', optionListModel, optionChoiceRenderer);

26. Create ListChoice

var element = factory.createListChoice('elementId', listModelOfOption, optionChoiceRenderer);
var element = factory.createListChoice(container, 'elementId', optionListModel, optionChoiceRenderer);
var element = factory.createListChoice('elementId', listModelOfOption, optionChoiceRenderer, maxRows);
var element = factory.createListChoice(container, 'elementId', optionListModel, optionChoiceRenderer, maxRows);

27. Create RadioChoice

var element = factory.createRadioChoice('elementId', listModelOfOption, optionChoiceRenderer);
var element = factory.createRadioChoice(container, 'elementId', optionListModel, optionChoiceRenderer);

28. Create Select2SingleChoice

var element = factory.createSelect2SingleChoice('elementId', 'idField', 'displayField');
var element = factory.createSelect2SingleChoice(container, 'elementId', 'idField', 'displayField');

29. Create Select2MultipleChoice

var element = factory.createSelect2MultipleChoice('elementId', 'idField', 'displayField');
var element = factory.createSelect2MultipleChoice(container, 'elementId', 'idField', 'displayField');

30. Create CheckBoxMultipleChoice

var element = factory.createCheckBoxMultipleChoice('elementId', optionListModel, optionChoiceRenderer);
var element = factory.createCheckBoxMultipleChoice(container, 'elementId', optionListModel, optionChoiceRenderer);

31. Create ListMultipleChoice

var element = factory.createListMultipleChoice('elementId', listModelOfOption, optionChoiceRenderer);
var element = factory.createListMultipleChoice(container, 'elementId', optionListModel, optionChoiceRenderer);
var element = factory.createListMultipleChoice('elementId', listModelOfOption, optionChoiceRenderer, maxRows);
var element = factory.createListMultipleChoice(container, 'elementId', optionListModel, optionChoiceRenderer, maxRows);

32. Create FileUpload

var element = factory.createFileUpload('elementId');
var element = factory.createFileUpload(container, 'elementId');

33. Create MultipleFileUpload

var element = factory.createMultipleFileUpload('elementId');
var element = factory.createMultipleFileUpload(container, 'elementId');
var element = factory.createMultipleFileUpload('elementId', max);
var element = factory.createMultipleFileUpload(container, 'elementId', max);

34. Create Feedback

var element = factory.createFeedback('elementId', inputElement);
var element = factory.createFeedback(container, 'elementId', inputElement);

35. Create Label

var element = factory.createLabel('elementId');
var element = factory.createLabel(container, 'elementId');

36. Create Table

var element = factory.createTable('elementId', columns, numberPerPage);
var element = factory.createTable(container, 'elementId', columns, numberPerPage);

37. Create FullCalendar

var element = factory.createFullCalendar('elementId');
var element = factory.createFullCalendar(container, 'elementId');

38. Create FullCalendarItem

var element = factory.createFullCalendarItem(id, title, startDate, endDate);

39. Create Image

var element = factory.createImage('elementId');
var element = factory.createImage(container, 'elementId');

40. Create TabbedPanel

var element = factory.createTabbedPanel('elementId', items);
var element = factory.createTabbedPanel(container, 'elementId', items);

41. Create Block

var element = factory.createBlock('elementId', 'blockCode');
var element = factory.createBlock(container, 'elementId', 'blockCode');

42. Create Popup

var element = factory.createModalWindow('elementId', 'blockCode');
var element = factory.createModalWindow(container, 'elementId', 'blockCode');

43. Create Link

var element = factory.createLink('elementId');
var element = factory.createLink(container, 'elementId');

44. Create PageLink

var element = factory.createPageLink('elementId', 'pageCode');
var element = factory.createPageLink(container, 'elementId', 'pageCode');
var element = factory.createPageLink('elementId', 'pageCode', params);
var element = factory.createPageLink(container, 'elementId', 'pageCode', params);

45. Create AjaxLink

var element = factory.createAjaxLink('elementId');
var element = factory.createAjaxLink(container, 'elementId');

46. Create Button

var element = factory.createButton('elementId');
var element = factory.createButton(container, 'elementId');

47. Create AjaxButton

var element = factory.createAjaxButton('elementId');
var element = factory.createAjaxButton(container, 'elementId');

48. WebSocket

factory.registerWebSocket();

It is a object which to file / asset for read and write, we can write file upload from user into disk and get download url

1. Asset

var assetId = disk.writeAsset(fileUpload);
var httpDownloadAddress = disk.httpAsset('assetId');

2. File

var fileId = disk.writeAsset(fileUpload);
var httpDownloadAddress = disk.httpFile('fileId');

PageModel Object

it is represent any user input control in a page.

BlockModel Object

it is represent to a current block panel

ItemModel Object

itemModel is created when a table is populated. when user click a row action link, itemModel is representation that current clicked row.

N/A

it is available for ajax request only, for instance ajaxLink, ajaxButton

target.appendJavaScript('javascript to be executed at client side');
// elements that we want to refresh it content at client side.
target.add(element, element, element, ...);

Link

it is a server side link, so you will need to define its callback method when user click on that link. its callback have to be following pattern

function {link_id}__on_click(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

Full Example :

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var demoLink = factory.createLink("demoLink");
  var label = factory.createLabel("label");
}

function demoLink__on_click(requestCycle, disk, jdbcTemplate, factory, pageModel){
  pageModel['label'] = "You Clicked Me !";
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <a wicket:id="demoLink">Demo Link</a>
    <span wicket:id="label"></span>
  </wicket:extend>
</body>
</html>

PageLink

it is a server side link which will redirect user to another page when he/she clicked it. the following example it will redirect to page demo_link, in this example it is require you to create a page first.

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var demoPageLink = factory.createPageLink("demoPageLink", "demo_link");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Demo PageLink</h3>
        </div>
        <div class="box-body">
            <div class="form-group">
                <a wicket:id="demoPageLink">Demo PageLink</a>
            </div>
        </div>
        <div class="box-footer">

        </div>
    </div>
</wicket:extend>
</body>
</html>

HiddenField

It is a server side hidden field, it is a form element, every form element support validation mechanism, to do that, you will need to register a event method for validation, and that event method will be invoked during form post back process.

hiddenField.registerValidator(event);
hiddenField.registerValidator(event, params);

function {hidden_field_id}__{event}(jdbcTemplate, validatable, params){
}

Full Example :

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="hidden" wicket:id="hidden"/>
    </form>
  </wicket:extend>
</body>
</html>

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var hidden = factory.createHiddenField(form, 'hidden', String.class);
  hidden.registerValidator('hello');
}

function hidden__hello(jdbcTemplate, validatable, params){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

Form

it is a server side form which is use for send user input data to server, form could stay as child element of the other form, and every single form will have to event callback method, on_error and on_submit, on_error will be call when ever we have error during validation step of its children or form validator itself and on_submit will be call when there is no error is reported only. form validator is only for validate a compound input field together.

form.registerValidator(event, formComponent1, formComponent2, formComponent3, formComponentN);
form.registerValidator(event, params, formComponent1, formComponent2, formComponent3, formComponentN);

function {form_id}__{event}(jdbcTemplate, formComponents, params){
}

function {form_id}__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

function {form_id}__on_error(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

Full Example :

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
}

function form__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

function form__on_error(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form"/>
  </wicket:extend>
</body>
</html>

EmailTextField

It is a server text field, which accept only email address, it is also able to register validation event to validate further more complex like check for duplication in database.

emailTextField.registerValidator(event);
emailTextField.registerValidator(event, params);

function {email_text_field_id}__{event}(jdbcTemplate, validatable, params){
}

Full Example :

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="text" wicket:id="email"/>
    </form>
  </wicket:extend>
</body>
</html>

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var email = factory.createEmailTextField(form, 'email');
  email.registerValidator('hello');
}

function email__hello(jdbcTemplate, validatable, params){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

DropDownChoice

it is a single select dropdown server side form input control, this control is automatically convert between string and user object (dictionary) vice versa vai its choice renderer, it is also accept validation event.

dropDownChoice.registerValidator(event);
dropDownChoice.registerValidator(event, params);

function {drop_down_choice_id}__{event}(jdbcTemplate, validatable, params){
}

Full Example :

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
var renderer = factory.createChoiceRenderer("id","text");

var optionA = factory.createMap();
optionA.put("id","MissA");
optionA.put("text","Miss A Description");

var optionB = factory.createMap();
optionB.put("id","MissB");
optionB.put("text","Miss B Description");

var choices = factory.createList();
choices.add(optionA);
choices.add(optionB)

var dropDownChoice = factory.createDropDownChoice(form, "dropDownChoice", factory.createListModel(choices), renderer);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
    <form wicket:id="form">
        <select wicket:id="dropDownChoice"></select>
    </form>
</wicket:extend>
</body>
</html>

DateTextField

it is a date picker input field. it is also accept validation event, its data type is use java.util.Date.

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var date = factory.createDateTextField(form, "date");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="text" wicket:id="date"/>
    </form>
  </wicket:extend>
</body>
</html>

ColorTextField

it is color picker input field, it is also accept validation event, since we don't accept color at server side, so its data type is just a simple string.

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var color = factory.createColorTextField(form, "color");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="text" wicket:id="color"/>
    </form>
  </wicket:extend>
</body>
</html>

CheckBoxMultipleChoice

it is group of checkbox

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
var renderer = factory.createChoiceRenderer("id","text");

var optionA = factory.createMap();
optionA.put("id","MissA");
optionA.put("text","Miss A Description");

var optionB = factory.createMap();
optionB.put("id","MissB");
optionB.put("text","Miss B Description");

var choices = factory.createList();
choices.add(optionA);
choices.add(optionB)

var checkbox = factory.createCheckBoxMultipleChoice(form, "checkbox", factory.createListModel(choices), renderer);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
    <form wicket:id="form">
        <span wicket:id="checkbox"></span>
    </form>
</wicket:extend>
</body>
</html>

CheckBox

it is a single checkbox

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var checkbox = factory.createCheckBox(form,"checkbox");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="checkbox" wicket:id="checkbox"/>
    </form>
  </wicket:extend>
</body>
</html>

Button

it is a submit button

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
var form = factory.createForm("form");
var button = factory.createButton(form,"button");
}

function form__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){}
function form__on_error(requestCycle, disk, jdbcTemplate, factory, pageModel){}

function button__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

function button__on_error(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <button type="submit" wicket:id="button">Okay</button>
    </form>
  </wicket:extend>
</body>
</html>

TextArea

it is multiple line input field

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var textarea = factory.createTextArea(form,"text");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <textarea wicket:id="text"/>
    </form>
  </wicket:extend>
</body>
</html>

Table

it is html table, usually it is for display data

Column definition.

Field	Description	Value / Enum
tableColumn	column header	String
htmlColumn	column type	Hidden CheckBox Label Action
objectColumn	it is use with CheckBox column, which field would we like to have a boolean of that field to be true or false, usually it is the identity record field, and mostly we don't want to show identity record in the table, because it is useless to user. Hidden htmlColumn is ideally for that identity column to load into table but it show does not show	String
queryColumn	field name of table in the database	String
classColumn	data type of column	Boolean Byte Short Integer Long Float Double BigInteger BigDecimal Character String LocalTime LocalDate LocalDateTime
actionColumn	it is use together with CheckBox column or Action column for having extra header link/button.	`{"Name":"CSS Class","Name":"CSS Class"}`
linkColumn	it is use together Action column	`{"Name":"CSS Class","Name":"CSS Class"}`

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {

  var columns = [
    {
      "tableColumn":"pageId",
      "htmlColumn":"Label",
      "queryColumn":"page.page_id",
      "classColumn":String.class
    },
    {
      "tableColumn":"title",
      "htmlColumn":"Label",
      "queryColumn":"page.title",
      "classColumn":String.class
    },
    {
      "tableColumn":"description",
      "htmlColumn":"Label",
      "queryColumn":"page.description",
      "classColumn":String.class
    },
    {
      "tableColumn":"opertaion",
      "htmlColumn":"Action",
      "linkColumn" : {"Edit":"btn-xs btn-info"}
    }
  ];

  var filterForm = factory.createFilterForm("filter-form");
  var table = factory.createTable(filterForm, "table", columns, 10);
}

// this function will be executed when you click on Edit link
// itemModel it is current select row object model
// function name it must be follow with our define rule
// form_table it is id of table markup
// operation it is name of column
// Edit it is name of link
// on_click it is event name
function form_table_operation_Edit__on_click(requestCycle, disk, jdbcTemplate, factory, itemModel){
  print(itemModel.get("pageId"));
}

// this function will be executed for query data from database
// this is define the select table from
// form is form markup id
// from is event name
function table__from(factory, jdbcTemplate, pageModel){
  return DSL.table("page");
}

function table__where(factory, jdbcTemplate, pageModel){
}

function table__having(factory, jdbcTemplate, pageModel){}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="filter-form">
      <table wicket:id="table"/>
    </form>
  </wicket:extend>
</body>
</html>

ListChoice

it is a single selection list

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
var renderer = factory.createChoiceRenderer("id","text");

var optionA = factory.createMap();
optionA.put("id","MissA");
optionA.put("text","Miss A Description");

var optionB = factory.createMap();
optionB.put("id","MissB");
optionB.put("text","Miss B Description");

var choices = factory.createList();
choices.add(optionA);
choices.add(optionB)

var list = factory.createListChoice(form, "list", factory.createListModel(choices), renderer, 2);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <select wicket:id="list"></select>
    </form>
  </wicket:extend>
</body>
</html>

ListMultipleChoice

it is a multiple selection list

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
var form = factory.createForm("form");
var renderer = factory.createChoiceRenderer("id","text");

var optionA = factory.createMap();
optionA.put("id","MissA");
optionA.put("text","Miss A Description");

var optionB = factory.createMap();
optionB.put("id","MissB");
optionB.put("text","Miss B Description");

var choices = factory.createList();
choices.add(optionA);
choices.add(optionB)

var list = factory.createListMultipleChoice(form, "list", factory.createListModel(choices), renderer, 2);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <select wicket:id="list"></select>
    </form>
  </wicket:extend>
</body>
</html>

NumberTextField

it is a text field which accept only number

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var number = factory.createNumberTextField(form, "number", Float.class);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="number" wicket:id="number"/>
    </form>
  </wicket:extend>
</body>
</html>

PasswordTextField

it is a password text field

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var password = factory.createPasswordTextField(form, "password");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="password" wicket:id="password"/>
    </form>
  </wicket:extend>
</body>
</html>

RadioChoice

it is a group of radio

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
var form = factory.createForm("form");
var renderer = factory.createChoiceRenderer("id","text");

var optionA = factory.createMap();
optionA.put("id","MissA");
optionA.put("text","Miss A Description");

var optionB = factory.createMap();
optionB.put("id","MissB");
optionB.put("text","Miss B Description");

var choices = factory.createList();
choices.add(optionA);
choices.add(optionB)

var choice = factory.createRadioChoice(form, "choice", factory.createListModel(choices), renderer);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <span wicket:id="choice"></span>
    </form>
  </wicket:extend>
</body>
</html>

RangeTextField

it is number slider or number input field if browser is not support

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var number = factory.createRangeTextField(form, "number", Float.class);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="range" wicket:id="number"/>
    </form>
  </wicket:extend>
</body>
</html>

RequiredTextField

it is require text input field

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
var form = factory.createForm("form");
var text = factory.createRequiredTextField(form, "text", String.class);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="text" wicket:id="text"/>
    </form>
  </wicket:extend>
</body>
</html>

Feedback

it is feedback error message when there is error is report on user input control

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var text = factory.createTextField(form, "text", String.class);
  text.setRequired(true);
  var feedback = factory.createFeedback(form, "feedback",text);
  var okay = factory.createButton(form, "okay");
}

function form__on_error(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

function form__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

function okay__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

function okay__on_error(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <input type="text" wicket:id="text"/>
      <span wicket:id="feedback"/>
      <button wicket:id="okay" type="submit">Okay</button>
    </form>
  </wicket:extend>
</body>
</html>

Select2MultipleChoice

it is auto suggestion input tag

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var tags = factory.createSelect2MultipleChoice(form, "tags", Jdbc.Menu.MENU_ID, Jdbc.Menu.TITLE);
}

function tags__query(jdbcTemplate, factory, term, page) {
  var items = jdbcTemplate.queryForList('select * from ' + Jdbc.MENU);
  var options = new ArrayList();
  for each (item in items) {
    var option = factory.createOption(item.get(Jdbc.Menu.MENU_ID),item.get(Jdbc.Menu.TITLE));
    options.add(option);
  }
  return options;
}

function tags__has_more(jdbcTemplate, term, page){
  return false;
}

function tags__to_choices(jdbcTemplate, ids) {
  return jdbcTemplate.queryForList("select * from " + Jdbc.MENU + " WHERE " + Jdbc.Menu.MENU_ID + " in (?)",ids);
}

function tags__size(jdbcTemplate) {
  return jdbcTemplate.queryForObject("select count(*) from " + Jdbc.MENU, Integer.class);
}

function tags__get(jdbcTemplate, index){
  return jdbcTemplate.queryForObject("select * from " + Jdbc.MENU + " limit " + index + ",1");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <select wicket:id="tags" style="width:100%"></select>
  </form>
</wicket:extend>
</body>
</html>

Select2SingleChoice

it is a single suggestion choice

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var choice = factory.createSelect2SingleChoice(form, "choice", Jdbc.Menu.MENU_ID, Jdbc.Menu.TITLE)
}

function choice__query(jdbcTemplate, factory, term, page) {
  var items = jdbcTemplate.queryForList('select * from ' + Jdbc.MENU);
  var options = new ArrayList();
  for each (item in items) {
    var option = factory.createOption(item.get(Jdbc.Menu.MENU_ID),item.get(Jdbc.Menu.TITLE));
    options.add(option);
  }
  return options;
}

function choice__has_more(jdbcTemplate, term, page){
  return false;
}

function choice__to_choice(jdbcTemplate, id) {
  return jdbcTemplate.queryForMap("select * from " + Jdbc.MENU + " WHERE " + Jdbc.Menu.MENU_ID + " = ?",id);
}

function choice__size(jdbcTemplate) {
  return jdbcTemplate.queryForObject("select count(*) from " + Jdbc.MENU, Integer.class);
}

function choice__get(jdbcTemplate, index){
  return jdbcTemplate.queryForObject("select * from " + Jdbc.MENU + " limit " + index + ",1");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <select wicket:id="choice" style="width:100%"></select>
  </form>
</wicket:extend>
</body>
</html>

TextField

it is input text field

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var text = factory.createTextField(form,"text", String.class);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <input type="text" wicket:id="text"/>
  </form>
</wicket:extend>
</body>
</html>

TimeTextField

it is time picker input field

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var time = factory.createTimeTextField(form,"time");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <input type="text" wicket:id="time"/>
  </form>
</wicket:extend>
</body>
</html>

UrlTextField

it is text input field for url

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var url = factory.createUrlTextField(form,"url");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <input type="url" wicket:id="url"/>
  </form>
</wicket:extend>
</body>
</html>

Label

it is label for display out data from server

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  userModel.put("label", new Date());
  var label = factory.createLabel("label");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <div wicket:id="label"></div>
</wicket:extend>
</body>
</html>

FileUpload

it is single file upload

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var file = factory.createFileUpload(form,"file");
  var image = factory.createImage(form,"image");
  var okay = factory.createButton(form,"okay");
}

function okay__on_submit(requestCycle, disk, jdbcTemplate, button, pageModel) {
  var files = userModel.get("file");
  var file = files.get(0);
  var fileId = disk.writeFile(file);
  userModel['image'] = disk.httpFile(fileId);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, userModel) {
  var image = factory.getChildren('image');
  if (userModel['image'] == null || "".equals(image)){
    image.setVisible(false);
  } else {
    image.setVisible(true);
  }
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <input type="file" wicket:id="file"/>
    <br/>
    <img wicket:id="image"/>
    <button type="submit" wicket:id="okay">Okay</button>
  </form>
</wicket:extend>
</body>
</html>

MultiFileUpload

it is multiple file upload

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var file = factory.createMultiFileUpload(form,"file");
  var image = factory.createImage(form,"image");
  var okay = factory.createButton(form,"okay");
}

function okay__on_submit(requestCycle, disk, jdbcTemplate, button, pageModel) {
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, userModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <input type="file" wicket:id="file"/>
    <button type="submit" wicket:id="okay">Okay</button>
  </form>
</wicket:extend>
</body>
</html>

Image

it is for display image

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var file = factory.createFileUpload(form,"file");
  var image = factory.createImage(form,"image");
  var okay = factory.createButton(form,"okay");
}

function okay__on_submit(requestCycle, disk, jdbcTemplate, button, pageModel) {
  var files = userModel.get("file");
  var file = files.get(0);
  var fileId = disk.writeFile(file);
  userModel['image'] = disk.httpFile(fileId);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, userModel) {
  var image = factory.getChildren('image');
  if (userModel['image'] == null || "".equals(image)){
    image.setVisible(false);
  } else {
    image.setVisible(true);
  }
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
  <form wicket:id="form">
    <input type="file" wicket:id="file"/>
    <br/>
    <img wicket:id="image"/>
    <button type="submit" wicket:id="okay">Okay</button>
  </form>
</wicket:extend>
</body>
</html>

EditorTextArea

it is rich text editor

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var textarea = factory.createEditorTextArea(form,"textarea");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <textarea wicket:id="textarea"/>
    </form>
  </wicket:extend>
</body>
</html>

FullCalendar

it is calendar widget

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var calendar = factory.createFullCalendar("calendar");
}

function calendar__query(factory, jdbcTemplate){
  var items = factory.createList();
  var start = new Date();
  var end = new Date();
  var title = "Hello";
  var id = "id";
  var item = factory.createFullCalendarItem(id,title, start, end);
  item.setUrl("http://www.google.com");
  items.add(item);
  return items;
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <div wicket:id="calendar"/>
  </wicket:extend>
</body>
</html>

Tab

it is tab widget, you need to create have create a few blocks first.

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var tabs = [
    {"blockTitle":"Tab1","blockCode":"block_a"},
    {"blockTitle":"Tab2","blockCode":"block_b"}
  ];
  var tab = factory.createTabbedPanel("tab", tabs);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <div wicket:id="tab" class="tabpanel"/>
  </wicket:extend>
</body>
</html>

it is popup widget, need to several blocks first

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var link = factory.createAjaxLink("link");
  var modal = factory.createModalWindow("modal","block_a");
}

function link__on_click(requestCycle, disk, jdbcTemplate, factory, target, pageModel){
  var modal = factory.getChildren("modal");
  modal.show(target);
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <div wicket:id="modal"/>
    <a wicket:id="link">Show</a>
  </wicket:extend>
</body>
</html>

Block

it is block widget, need to several blocks first

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var block = factory.createBlock("block", "block_a");
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <div wicket:id="block"/>
  </wicket:extend>
</body>
</html>

AjaxLink

it is ajax link

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var link = factory.createAjaxLink("link");
}

function link__on_click(requestCycle, disk, jdbcTemplate, factory, target, pageModel){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <a wicket:id="link">AjaxLink</a>
  </wicket:extend>
</body>
</html>

AjaxButton

it is ajax button submit

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  var form = factory.createForm("form");
  var button = factory.createAjaxButton(form, "button");
}

function form__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){
}

function button__on_submit(requestCycle, disk, jdbcTemplate, factory, target, form, pageModel){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <wicket:extend>
    <form wicket:id="form">
      <button type="submit" wicket:id="button">AjaxButton</button>
    </form>
  </wicket:extend>
</body>
</html>

Condition

var field = DSL.field("table.field");

field.like(value);
field.like(field);
field.notLike(value);
field.notLike(field);

field.equal(value);
field.equal(field);
field.notEqual(value);
field.notEqual(field);

field.greaterThan(value);
field.greaterThan(field);
field.greaterOrEqual(value);
field.greaterOrEqual(field);

field.lessThan(value);
field.lessThan(field);
field.lessOrEqual(value);
field.lessOrEqual(field);

field.between(value, value);
field.between(field, field);
field.notBetween(value, value);
field.notBetween(field, field);

field.notIn(values);
field.notIn(field);
field.in(values);
field.in(field);

field.isNull();
field.isNotNull();

field.isFalse();
field.isTrue();

It is server message push component, it is enable communication between browser/server real time, it is useful for chatting application, report application, notification monitoring tool. https://en.wikipedia.org/wiki/WebSocket

Server Push Message

Push Message allow to push message to connected server session.

// send to all sessions
                factory.pushMessage('message');

                // send to all link within a session
                factory.pushMessage('sessionId', 'message');

                // send to a connected session link
                factory.pushMessage('sessionId', key, 'message');

Server Send Message

Send Message allow server to send message directly to browser.

// send to all browsers
factory.sendMessage('message');

// send to all browsers within a session
factory.sendMessage('sessionId', 'message');

// send to a connected browser
factory.sendMessage('sessionId', key, 'message');

Client Send Message

Wicket.WebSocket.send('hello world');

Example :

/*
Page onInitialize
*/
function onInitialize(requestCycle, disk, jdbcTemplate, factory, pageModel) {
  factory.registerWebSocket();
  var form = factory.createForm("form");
  var messageField = factory.createTextField(form, "messageField", String.class);
  var receiveField = factory.createTextArea(form, "receiveField");
  pageModel['receiveField'] = "Welcome To MBaaS Simple Chat";
  var sendButton = factory.createAjaxButton(form,"sendButton");
}

function socket_on_text_message(requestCycle, disk, jdbcTemplate, factory, pageModel, handler, textMessage){
}

function socket_on_push(requestCycle, disk, jdbcTemplate, factory, pageModel, handler, pushMessage){
  var receiveField = pageModel['receiveField'];
  receiveField = pushMessage.getText() + "\n" + receiveField;
  pageModel['receiveField'] = receiveField;
  handler.add(factory.getChildren('receiveField'));
}

function form__on_submit(requestCycle, disk, jdbcTemplate, factory, pageModel){}

function form__on_error(requestCycle, disk, jdbcTemplate, factory, pageModel){}

function sendButton__on_error(requestCycle, disk, jdbcTemplate, factory, target, form, pageModel){
}

function sendButton__on_submit(requestCycle, disk, jdbcTemplate, factory, target, form, pageModel){
  var message = pageModel['messageField'];
  if (message == null){
    message = "";
  }
  factory.pushMessage(message);
}

function socket_on_connect(requestCycle, disk, jdbcTemplate, factory, pageModel, connectedMessage){
}

function socket_on_close(requestCycle, disk, jdbcTemplate, factory, pageModel, closedMessage){
}

/*
Page onBeforeRender
*/
function onBeforeRender(requestCycle, disk, jdbcTemplate, factory, pageModel) {
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<wicket:extend>
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Simple Chat</h3>
        </div>
        <form role="form" wicket:id="form">
            <div class="box-body">
                <div class="form-group">
                  <input wicket:id="messageField" type="text" class="form-control" placeholder="What to send">
                  <textarea style="height:200px" wicket:id="receiveField" type="text" class="form-control"/>
                </div>
            </div>

             <div class="box-footer">
                <button wicket:id="sendButton" type="button" class="btn btn-primary">Send</button>
            </div>
        </form>
    </div>
</wicket:extend>
</body>
</html>

Book Management

in this section will show how we can you mbaas to create book management, basically it will cover create new book, modify book, and list book, book validation

Create Author Collection

Create Book Collection

Getting started

What is MBaaS

MBaaS Registration

Java Alias Type

Collection / Attribute

MBaaS JdbcTemplate (CRUD)

Content Management System

Markup Element

Form Validation

JdbcTemplate Object

Factory Object

Disk Object

Model Object

RequestCycle Object

Target Object

Server Side Element

Query

WebSocket

Tutorial