[{TableOfContents}]

!!!Introduction

makumba gives an abstract support for web 2.0 look & feel features, meaning that it is not necessary to have an extensive knowledge of javascript in order to achieve the same result. For the moment, makumba is capable of rendering sections of pages and performing partial post-back of forms (meaning a form submission that does not lead to a full HTTP response) via AJAX, in an event-driven fashion. This should make it possible to cover a number of basic scenarios often referred to as web 2.0.

The [mak:section|SectionTag] and the %%code mak.event%% javascript method can be used in order to show, hide or reload a specific section of the page.

The [mak:form|FormTag] (or [mak:newForm|NewFormTag] or [mak:editForm|EditFormTag]) can be submitted via partial post-back using the %%code triggerEvent%% attribute.

Additionally, the [mak:submit|SubmitTag] can help rendering submit buttons and links for submitting a form.

!!!Page sections that can be shown, hidden or reloaded via events

Let us consider the following example:

[{Code

<mak:section name="employees" reloadOn="employeesChanged">
  <mak:list from="company.Employee e">
    <mak:value expr="e.name"/> <mak:value expr="e.surname"/><br />
  </mak:list>
</mak:section>
<br />
<button onClick="mak.event('employeesChanged')">Reload list of employees</button>
}]

In this example, the mak:section contains a list of employees. If for some reason, we would like to reload this list, but without reloading the whole page, this can be achieved by triggering the %%code employeesChanged%% event.

This can be achieved by using the %%code mak.event(eventName)%% method.

[{Box

A <mak:event> tag will be available later on in order to trigger events in an easier fashion, using pre-defined widgets such as links and buttons.
}]


Sections can only be inside of a mak:list, in which case it might be intended to address only a specific iteration of the list when an event is triggered, instead of all the sections rendered by the iterations.

In this case, one specific section inside of a mak:list can be uniquely identified using a MQL expression:

[{Code

<mak:list from="company.Employee e">
  <mak:section name="nameSurname" reloadOn="employeeRenamed" iterationExpr="e">
    <mak:value expr="e.name"/> <mak:value expr="e.surname"/><br />
  </mak:section>
    <button onClick="mak.event('employeeRenamed', '<mak:value expr="e" />')">Reload this employee</button>
</mak:list>
}]

The %%code iterationExpr%% attribute of the mak:section tag should contain a MQL expression that can uniquely identify one sections of the tag (in the example above, the primary key of the Employee is used). This expression should be used in order to address the particular iteration in the %%code mak.event(eventName, expressionValue)%% method call.

If an iteration expression does not lead to unique results, all the sections matched by it will be addressed.

If no iteration expression is provided, all the sections rendered by the iterations will be addressed.

[{Box

When a section is reloaded, a wheel is displayed until the data is rendered. This behavior can be altered by changing the class of the %%code .sectionReload%% CSS style.
}]


[{Box

In the future, it should be possible to specify different kind of effects in which a section should hide, show, or reload itself.
}]

!!!Partial post-back of forms

It is possible to submit makumba forms via partial post-back, by giving a value to the %%code triggerEvent%% attribute:

[{Code

<mak:newForm type="company.Employee" triggerEvent="employeeCreated">
  Name: <mak:input field="name" /><br/>
  Surname: <mak:input field="surname" /><br/>
  <br/>
  <mak:submit>Create employee</mak:submit>
</mak:newForm>

<mak:section name="employees" reloadOn="employeeCreated">
  <mak:list from="company.Employee e">
    <mak:value expr="e.nameSurname()" /><br/>
  </mak:list>
</mak:section>
}]

In this example, when the newForm has been submitted successfully, the "employeeCreated" event is fired. The ''employees'' section is reloaded as a result, since it has a %%code reloadOn%% attribute set on this event.

[{Box

It is not necessary to use %%code <mak:submit>%%. Indeed, a simple %%code <input type="submit" value="Create employee">%% achieves the same result here, as makumba listens and intercepts form submission.
}]

!!Error handling

If an error occurs when the form is submitted via partial post-back, the same kind of mechanism that takes place for normal form submission happens:

* by default, any form submission message is displayed above the form
* if form annotation is activated via the %%code annotation%% attribute, error messages will be displayed next to the field leading to an error, or on top of the form if the error spans over more than one field
* if [client side validation|FormValidationHowto] is enabled, the form will not submit until all errors are corrected

[{Box

The form messages are in HTML DIV elements that have the CSS classes %%code makumbaResponder %% and %%code makumbaSuccess%%/%%code makumbaError%%.
}]

%%(display:none); [Category Usage]%%
