1. Presentation Model (PM)
The Presentation Model acts as the middle layer between the data model and the user interface. It defines the behavior and logic of the applet without directly interacting with the DOM.
Key Responsibilities
- Manages the state and business logic of the applet.
- Handles data binding between the back-end and UI.
- Defines client-side logic, such as validations and interaction rules.
Example
define("custom/PM/CustomAppletPM", ["siebel/pmodel"], function (PModel) {
return PModel.extend({
Init: function () {
PModel.prototype.Init.apply(this, arguments);
this.AddProperty("CustomProperty", "DefaultValue");
},
Setup: function () {
this.AttachEventHandler("OnFieldChange", function (fieldName, value) {
if (fieldName === "Status" && value === "Closed") {
alert("You cannot edit a closed record!");
}
});
},
});
});
2. Physical Renderer (PR)
The Physical Renderer handles the visual representation of the applet. It is responsible for rendering data onto the DOM and managing user interactions.
Key Responsibilities
- Controls the appearance and behavior of the applet in the browser.
- Manages interactions with the DOM, including event listeners.
- Enables integration with third-party UI libraries (e.g., jQuery).
Example
define("custom/PR/CustomAppletPR", ["siebel/phyrenderer"], function (Renderer) {
return Renderer.extend({
Init: function () {
Renderer.prototype.Init.apply(this, arguments);
},
ShowUI: function () {
Renderer.prototype.ShowUI.apply(this, arguments);
this.GetContainer().append("<button id='customBtn'>Click Me</button>");
},
BindEvents: function () {
this.GetContainer().on("click", "#customBtn", function () {
alert("Button clicked!");
});
},
});
});
3. Interaction Between PM and PR
- PM-to-PR Communication: PM updates the PR whenever data or state changes.
- PR-to-PM Communication: PR notifies the PM about user interactions.
4. Summary Table
| Aspect | Presentation Model (PM) | Physical Renderer (PR) |
|---|---|---|
| Focus | Business logic and data handling | UI rendering and DOM manipulation |
| Interaction | Communicates with back-end and PR | Communicates with PM and DOM |
| Customization | Field validations, dynamic behavior | Custom layouts, visual enhancements |
| Technology | JavaScript (client-side logic) | JavaScript, HTML, CSS |
| Example | Field validation logic | Adding a custom button to UI |
