Bookshelf Home | Contents | Index | PDF | ![]() ![]() |
Configuring Siebel Open UI > Architecture of Siebel Open UI > About the Siebel Open UI Development Architecture > Overview of the Siebel Open UI Development ArchitectureSiebel Open UI uses objects to deploy each element that it displays in the client. You can customize each of these objects. You can customize each object separately. Each object resides in a layer that implements a particular area of customization. For example, you can customize each of the following items:
Figure 4 illustrates the basic architecture that you can use to customize Siebel Open UI. For an overview of how Siebel Open UI uses the presentation model and physical renderer, see How Siebel CRM Renders Div Containers on Siebel Servers. Figure 4. Architecture You Can Use to Customize Siebel Open UIThe presentation model is a JavaScript file that specifies how to handle the metadata and data that Siebel Open UI gets from the Siebel Server, and then displays this information in a list applet or form applet in the client. It allows you to customize behavior, logic, and content. It determines the logic to apply, captures client interactions, such as the user leaving a control, collects field values, and sets properties. A presentation model can get the following items from the proxy, and then expose them for external use. These properties and methods are similar to the properties and methods that most software models use:
A presentation model can contain customization information that is separate from the predefined configuration information that Siebel Open UI uses for physical rendering. For example, it can display or hide a field according to a pick value. For more information, see Example of a Presentation Model. The template manager is a JavaScript object that provides HTML markup as requested by a physical renderer, a plug-in wrapper or any other active JavaScript object running in Siebel Open UI. A template manager ensures that each component of Siebel Open UI generates exactly the same markup, enhanced with a predefined classname, for similar type of UI controls that is independent of device, browser, and resolution. For example, if a text field is being rendered in Siebel Open UI, it must use same a classname, for example, "siebui-input, whether it is being rendered in a browser on a desktop, or a mobile device. One of the most crucial aspects of responsive Web design is to have clean and virtually identical DOM elements within a specific classname for a control. For example, an anchor can also be styled in such a way that it appears similarly to a button in one context and in another might appear as a hyperlink. You must, however, provide the same DOM element for a particular type consistently, coupled with a specialized classname, when required. The template manager then acts as an HTML content provider for all types of primitives controls. The template manager expects the caller, which in most cases would be renderers or plug-in wrappers, to provide certain information on what kind of control they need. For example, does the caller need to create input element? Depending on the type and other parameters specified by the caller, the template manager determines the control that is required, then builds an HTML string and returns that string to the caller. The template manager also provides the flexibility to add more DOM attributes which may or may not be standard, for example mobile specific "data-" attributes, or automation attributes. For more information about the template manager class, see Template Manager Class. Event helper objects facilitate event binding in a physical renderer or a plug-in wrapper. They consolidate events across platforms, most importantly standardize events such as touch and click. The differences required in rendered markup and the behavioral aspects, if any, can be handled internally by the template manager and the even helper object respectively. For more information about the event helper objects, see About Event Helper Objects. A plug-in wrapper is a complete and independent manager of an applet control and its life-cycle. It is entirely responsible for all actions of a control, including but not limited to its showing, value management, event handling. Plug-in wrappers cater to control level management. A plug-in wrapper allows the wrapper to handle the control of specific functionalities. Individual renderers will delegate the control-specific-functionalities to the wrappers. The wrappers handle the applet control level implementation. Figure 5 outlines the class structure of plug-in wrappers. Figure 5. Class Structure of Plug-in WrappersExplanation of the elements in Figure 5:
For more information about plug-in wrappers, including detailed instructions about creating and customizing a plug-in wrapper, see Process of Customizing the Plug-in Wrapper, and Plug-in Wrapper Class. The plugin builder wires the physical renderer to a plug-in wrapper for a given control and a given set of conditions. It also provides a decoupling between physical renderers, such as an applet, and plug-in wrappers for controls in that applet. For more information see, About Plug-in Wrappers, and Plugin Builder Class. A physical renderer is a JavaScript file that Siebel Open UI uses to render the user interface. It binds a presentation model to a control. It can enable different behavior between a desktop client and a mobile client. It allows the presentation model to remain independent of the physical user interface objects layer. It allows you to use custom or third-party JavaScript code to render the user interface. It can display the same records in the following different ways: For more information, see Example of a Physical Renderer. Siebel Open UI uses presentation models and physical renderers to bind data to the user interface. A user interface object includes a combination of the following items:
Siebel Open UI can bind metadata, data, and logical behavior to a generic user interface in a highly configurable and declarative manner. It drives a fixed set of user interface presentation and interaction options. For example, you can configure an application so that a field is required or uses a hierarchical picklist. It also allows you to do the following customizations:
|
![]() ![]() |
Configuring Siebel Open UI | Copyright © 2018, Oracle and/or its affiliates. All rights reserved. Legal Notices. | |