siebel openui technical overview

OPENUI TECHNICAL

OVERVIEW

© 2011 Oracle Corporation Proprietary and Confidential

Agenda

• Open UI Architecture

• Demo one of the labs

• Deep dive into the lab

• Best Practices

• Do labs 1, 2, 3• Do labs 1, 2, 3

ActiveX UI Architecture Open UI Architecture

Custom

Browser

Scripts

ActiveX Proxy

JavaScript UI

Controls

JavaScript

Library

JQuery Library

JavaScript

Proxy

Layout Data

& Data

bindings

Client/Browser

Design time

Configurable Objects

Pre-compiled Objects

Customizations

Run time configurable

ActiveX UI Controls

Custom

Browser

Scripts

JavaScript

Extension

API

HTML

Composition

Conditional

RenderingLayout

Siebel Web Templates

Styling

Style Sheets

Siebel Object

Manager

Styling

Style Sheets

Layout

HTML

Composition

Conditional

Rendering

Siebel Web

Templates

Siebel HI Client Siebel Open UI

Dynamic: served by App /

Web Server

Run time configurable

UI Objects

Siebel Tools

Configuration

Static: served by App /

Web Server

Add or Modify any CSS

• Dynamically adjusted

– State is saved in user

preferences

– Can be configured

– Can be rendered in

various styles customized

through extensionsthrough extensions

Presentation Model

• Works with the Proxy Data

– Runtime Data

– Metadata

• Determines what logic should be applied

– Client side scripting without requiring the need of the Siebel Server

• Captures behaviors

– Did the user leave a control?

• Exposes properties

– Collect field values

– Set properties

• Supports different logic for different platforms


Physical Renderer

• Simply builds the UI

• Implementation to plug in a third party UI control.

• The same list of records (i.e. same Presentation Model)

can be shown as

• A list applet

• A carousel


•Employee Training – June 2012

• Different behaviors between desktop and mobile

Base Open UI Framework

CSS Styling

Physical RendererPhysical

Renderer

Extension

Custom CSS

Styling

Render the data

Java Script

Presentation ModelPresentation

Model

Extension

Client ProxyHolds Runtime &

Metadata

Formats the data and

applies logic

Manifest File

• Determines what java script files need to be

downloaded to the client browser

• Key Areas:

– Common

– Platform_Common

– Key_Common

– Platform_Key_Common

• Links applet user properties (key values) to java script

files


Presentation Model - Example


Physical Renderer - Example


Custom Extension Mapping

Siebel Tools

Core Manifest File


Java Script Code

Connecting the Dots

Web Server

Client Server

Application Server

Contact Form Request Physical_Renderer : PartialRefreshRenderer

Presentation_Model : PartialRefreshPModel

<KEY NAME="PartialRefreshPModel">

<FILE_NAME> siebel/applet.js </FILE_NAME>

partialrefreshpm.js

Contact Form - Applet User Props

Manifest File


Java

Script

Files

<FILE_NAME> siebel/applet.js </FILE_NAME>

<FILE_NAME> siebel/pmodel.js </FILE_NAME>

<FILE_NAME> siebel/custom/partialrefreshpm.js </FILE_NAME>

</KEY>

partialrefreshpm.js

partialrefreshpr.js

partialrefreshpr.js

partialrefreshpm.js

partialrefreshpr.js

CSS Files

Script Directory

Demo: Partial Page Refresh


Presentation Model - Example

Create the Javascript

NamespaceRegister the current physical model

against the applet’s physical model

Construct the super

class

Extend the Base Model to

support additional logic


support additional logic

Presentation Renderer - Example

Create the Javascript

NamespaceRegister the current physical render

against the applet’s physical renderer

Construct the super

class

Set what gets invoked when

“ShowJobTitleRelatedField”


“ShowJobTitleRelatedField”

changes.

OPENUI TECHNICAL DEEP DIVE

siebel openui technical overview

Documents