??? Can even be customized by providing an inherited renderer

Slide 49 from  Show110 – Using the XPages Extension Library for the Real World (Lotusphere 2012) says:

Application Layout Control

– Can even be customized by providing an inherited renderer

Has anyone an idea what is meant here?

3 thoughts on “??? Can even be customized by providing an inherited renderer

  1. tsamples23 2012-October-13 / 5:14 pm

    I think he means you can create a new Renderer that extends the app layout renderer and make it display how you want.

  2. Tim Tripcony 2012-October-13 / 11:38 pm

    That bullet point is referring to the relationship in JSF between components and renderers.

    At any moment in time, the “state” of an XPage is defined by the hierarchy (“tree”) of components, and the value of their properties. Components are just abstract units that define some concept that might have a visual representation… I say “might”, because not all components map directly to a specific UI element. Some obviously do: buttons, fields, etc… others, like the JSON RPC component, instead define state information that allows the server to interact with messages from the consumer (e.g. browser) without necessarily showing anything visual to the user.

    For every component, at least one renderer is defined. A renderer is a Java class whose job is to assess the state of a single component and translate that into content that can be interpreted by the consumer. The collection of renderers that the application is aware of at any given time is known as a “render kit”. In the case of the default render kit, all renderers emit a combination of HTML and JavaScript, because the target consumer is a browser. Again, for many components, the resulting HTML is obvious: the default renderer for a button component sends an HTML button tag, populating the attributes of that tag with values that correspond to the current values of the button component’s properties. Similarly, renderers for components like inputText and radioButtonGroup emit an HTML input tag, with attributes that not only reflect the state of the component (current value, disabled, etc.), but also the type of field the component represents (text, radio button, check box, etc.).

    When specifying the properties of a component at design time, you might notice a property named “rendererType”. Each component has a default value for this property which is an alias for the default renderer class. If you *override* this property, then the XPage runtime will attempt to map the new value to an alternate renderer class. If the value you provide maps to a valid renderer, then the server will send entirely different markup based on the behavior of that alternate renderer.

    One obvious use of this approach is the set of mobile controls included in the Extension Library. One of the jobs of the mobile theme is to override the rendererType property for all components that have an alternate, mobile-specific, renderer. As a result, components like the form table and the data view look entirely different on a mobile page than they do on a standard page… because a different renderer class is used, which sends different HTML.

    The Extensibility API not only allows you to define your own components, it also allows you to define your own renderers. So in some cases instead of defining a custom component, you may decide that all you want to do is define a custom renderer for use with existing components, allowing you to send custom markup even though the component itself is native to the platform.

    So, in short, what this slide is implying is that, if instead of OneUI, you want your layout to adhere to an alternate CSS framework, like Blueprint or Twitter Bootstrap, by defining an alternate renderer you can still use the standard Application Layout component, but instead of the page including markup that assumes OneUI, your renderer will send markup that fits your desired framework.

    • Patrick Kwinten 2012-October-15 / 12:24 pm

      Hi Tim,

      okej, this makes more sense to me. However, how is this alternative rendering established? For example adhering the OneUi to Twitter bootstrap sounds very interested to me.

      E.g. this would solve the discussion we have at the moment in our organization regarding the mobile controls. A responsive layout of OneUI could stop discussion around building ‘mobile apps’ in Notes.

      Do you know where I can found more information regarding rendering TB as alternative to OneUI when using the application layout control?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s