Editor's note: This article is the seventh in a series of articles on composite applications being published on developerWorks® Lotus. See the previous developerWorks articles,"The Lead Manager application in IBM Lotus Notes V8: An Overview," "Designing composite applications: Component design," "Designing composite applications: Design patterns," "Designing composite applications: Unit testing," "Designing composite applications: Writing an Eclipse component for IBM Lotus Notes," and "Designing composite applications: IBM Lotus Notes components."
Composite applications are a key element in a Service-Oriented Architecture (SOA) and contextual collaboration strategy. They support business flexibility for companies and organizations that must rapidly respond to changing demands in today's competitive markets. Composite applications are aggregations of user interface components that are loosely coupled to support intercomponent communication.
Components can be reused in multiple composite applications. The ability to combine multiple technologies into a single application provides significant business value. It enables companies to protect and extend their existing assets with increasing degrees of flexibility, and it allows them to respond quickly and cost effectively to their emerging business requirements with applications that are significantly easier to create than multiple application-development environments.
This loose coupling of the composite application architecture also enables diverse groups in different locations to leverage each others' efforts and to interoperate. For example, one department may be working on the accounting application for a company, while another group is working on a sales lead tracking application. The composite application vision is to add to the accounting application some components from the sales lead tracking application to give pertinent views of assets in an accounting context. Similarly, the sales lead tracking application could incorporate components from the accounting application to give accounting information within an asset context. As your company develops more and more composite applications, the potential for integration increases exponentially. The goal is that the whole is greater than the sum of the parts.
IBM WebSphere Portal developers are already familiar with the composite application model. This approach has been extended to IBM Lotus Notes 8, enabling Lotus Notes developers to surface their Lotus Notes applications as one or more components in a composite application. IBM Lotus Domino Designer has been extended to leverage the property broker and to provide a more intuitive user environment. Lotus Notes 8 also supports the inclusion of Eclipse components. A composite application may have any combination of Lotus Notes and Eclipse components. These components may be presented together in the same user interface (UI) for on-the-glass integration or, if extended to use the property broker, they can fully interoperate. You can define composite applications using the Composite Application Editor (CAE) or the WebSphere Portal Application Template Editor.
One of the great advantages of the loose coupling of composite applications is that application assembly can be conducted much later than component creation and design. It can also be done by the subject matter experts who either will be using the application or who are very close to those who are. This article discusses some general design tips and techniques that you can use to assemble highly productive and compelling applications.
This is the first of two articles covering various aspects of application assembly. Here we consider navigation and page design; in the second article, we consider designing for change, wiring strategies, and how to prototype your layout.
This article assumes that you are familiar with composite applications in Lotus Notes, so it can be useful for you to review the introduction to the Composite Application section in the IBM Lotus Domino Designer Help. You should then review the first three articles in this series, cited above in the Editor's Note, which provide an overview and cover design patterns. The layout and application patterns are discussed below in the context of application assembly.
Page design has two major goals: to bring together all the functionality needed to perform an operation and to present all the information necessary to make that operation easy and intuitive. In a perfect world we could arbitrarily move about our visual information into the exact configuration we desire. This can be done in traditional application development, but it is a highly technical job and it is not easy to incorporate cross-domain information. Composite application assembly is a much simpler task in which information is easy to present, no matter what the domain. There are, however, some trade-offs involved in how we can present that information.
At its most fundamental level, a component in a composite application is a rectangle of screen. What is displayed in that rectangle is defined by the component. This is the smallest unit of granularity we can manipulate in composite application assembly. We cannot normally choose to display only certain information in a component, or to display information from one component in another one. Components, though, are rarely static. When assembling a component into an application, you have two options for controlling how the component presents content.
First, you can set properties on the component itself, in the Composite Application Editor, by right-clicking a component on the component tree and selecting Edit Component Properties (see figure 1). The Edit Component Properties dialog box gives you a few options to set on the component. The Advanced Component Properties dialog box shows many more. Consult the documentation provided with any particular component to see what settings can be applied. Figure 1 shows the Sales Lead Browser component that supports the database.server and database.replicaid settings with which you can specify the database used to find the data to display.
Figure 1. Example of editing component properties
Second, most components support a number of properties that report values and actions that consume them. These are the "arteries and veins" that promote your composite application from a series of independent windows to an integrated whole. The documentation on each component lists the properties it publishes, the actions it consumes, the values for these, and the effects of setting them. Each action or property has a type associated with it. To prevent errors, you can wire properties only to actions that have the same type. Such strong typing can occasionally be an issue at assembly time. For instance, components from one source might use a PartNumber type, while components from another source use a PartNum type. The values they represent may be identical, but they cannot be wired because they have different types.
The opposite problem might also occur. A generic string type can be used for general cases, and some components might be developed with all their properties and actions of this type. Without the type-checking, you can wire anything to anything, for example, CustomerName to a PartNumber, even if doing so makes no sense. Consult the documentation for the originating property and the consuming action, to make sure that a combination will function as expected.
In figure 2, you can see how the LeadDetail component is wired on the Lead page of the Lead Manager sample application. To see the wiring, right-click the LeadDetail component and select Wiring in the CAE. In this example, the Contact property is selected in the LeadDetail component. It is a plain-text property and can be wired, as indicated, to a wide variety of other actions, although only certain ones make sense.
Consulting our documentation, we find that the Column Filter action in the Discussions, Contracts, and Sales Lead Company Detail components all accept a plain-text value, but they are for categorizing views that are not applicable for a contact value. The Contact name, Schedule A Meeting, and Send Mail actions also accept a plain-text component and do expect a value in the form of a contact, so those are valid wire destinations.
Figure 2. Example of component wiring
A page in a composite application is generally focused on getting a specific task done. In general, the page can be divided into domain-centric components (for example, a component that lets you edit a record) and contextual-domain components (for example, a component that lets you search cost centers). The most functional grouping is to locate the domain-centric components together in the center stage of your page. The contextual-domain components are then arrayed around the periphery like a dashboard.
The pages of the Lead Manager application use this general layout, in which the areas enclosed by a red box are the domain-centric components on each page (see figure 3).
Figure 3. Example of general layout of domain-centric components
In each page, the work area (containing the domain-centric components) is prominent, while the additional areas (containing the contextual-domain components) provide contextual information.
Getting more out of your pixels
Screen real estate disappears fast. There may be any number of contextual components that would add value to an operation, but how do you add them in such a way that is not crowded and cluttered? The objective is to enhance the work experience, not overwhelm the user, and fortunately there are a few things that help provide greater user friendliness.
-
Tabbed folders. Instead of adding a component to a fixed rectangle on the screen, you can add it on top of another component. These components combine to create a tabbed folder. Each component gets slightly less space because there must be room for the tab bar, but as you tab between them, they get all the space available. This is a good way to present a number of components on which there is mutually exclusive information. The user can pick which one makes sense to view for the aspect of the operation he or she is conducting. It is also possible to programmatically focus tabs in a folder, for greater automation.
One particularly nice aspect of folders is that they are easy to extend. If another component is developed later that needs to be added, the addition can be made with minimal disturbance by using folders. Wide horizontal tabbed folders work better than narrow vertical ones because they allow for greater expansion of tab names. - Maximize/minimize. Components can be maximized or minimized by user or program action. When maximized, the component takes up the full screen real estate, and a contextual-domain component can become a domain-centric component with one click. For example, in the Lead Manager application, a Managed Browser component is added to a tabbed folder to view a company's Web page. For the given size, it is of limited use; however, the user can easily maximize that component, view the Web page for the information needed, and then restore it to its original folder size and continue working.
- Pop-up components. One style of component presentation is to have minimal UI for a component until triggered. The trigger can be a property firing, clicking the minimal UI (for example, a button), or some other event. When triggered, a dialog box pops up containing the additional information. The dialog box can be modal, for fixed information that must be actioned; it can also be modeless, if the user needs it to remain on the screen for reference.
- Shelf view. The Lotus Notes 8 desktop already comes with a side shelf containing views that persist across applications. It is possible to make additions here visible and invisible programmatically, and you can deploy your own UI in this space. You can highlight items or control their visibility in this space, depending on whether the functions are always needed or are application specific.
- User resizing. Perhaps the ultimate method of customization is letting the user take control. You can make components of fixed size, or you can allow them to be dynamically resized by the user. If you fix the size in the CAE, it remains (proportionally) the same for all users, independent of screen size. If you let users adjust the size, they can change the relative sizes to suit their monitor and usage, and their changes persist for them and for no one else.
-
Page access. New in Lotus Notes 8.0.1 is the ability to set access control on a page. From the page navigator in the Composite Application Editor you can select Page Access. By default, all users can access any page that you have set in a composite application. You can apply restrictions by limiting navigation, if you use a custom navigator, but a better way is by setting page access.
If you deselect the All Users option in the Page Access dialog box, it lists everyone who has a role defined in the composite application's Access Control List. You can turn on and off access to any of these groups.
NOTE: This modification does not change or override any access control that may be in place for Lotus Notes-based components on the page. If a user is not permitted to access a database that contains a component, allowing the user to access a page with that component does not give him or her access to that database.
A composite application is rarely limited to a single page. A page is a good unit for focusing on a particular data item or a single task, but most often the information domains in which we work include several data types and have complex or multiple tasks. The natural evolution is from a page as an organizational unit to a multipage application as a unit. After the UI grows to more than a single page, we must start making design choices regarding moving the user from one page to another. Here are the choices:
In this model, all the pages of an application are available for the user to choose. A common navigator is present to let a user choose which page to view at any time. This could be the built-in composite application navigator that appears as a column to the left of the screen, or it could be a custom control that presents a list of buttons with drop-down options. This model works well in a composite application that's been built with the aggregation model discussed in the developerWorks article, "Designing composite applications: Design patterns." Context in one part of the application is not used or determined by another part, so the work process is never interrupted by transition.
This model is similar to the "wizard dialog boxes in applications. The user experience starts at a certain on-ramp. As tasks are completed on a particular page, the workflow moves the focus to another page. All navigation is done programmatically. The user does not explicitly navigate from page to page; instead, the pages move to support the completion of each task. This design works well for process-centric applications. Much as a page concentrates on helping the user execute a task, an application then guides the user through an operation or through a series of tasks.
In many circumstances, by default Lotus Notes launches a new context in a separate high-level tab. This is a familiar model for earlier Lotus Notes users, but in Lotus Notes 8, such a new high-level tab cannot be a page from a composite application. Composite application pages offer the advantage of your being able to add a number of other components of use to the operation. Sometimes tasks may need to be conducted in parallel and must be on their own tab; still others can be sufficiently focused that there is no benefit from additional components. You must choose what best suits the operation being conducted.
In the Lead Manager sample, each type of tab is used in different areas. When viewing the details of a sales lead, you are presented with a composite application page under the main tab. Additional components are there to guide your experience. When you compose a response to a sales lead discussion, a new tab is created that contains just the response form. It can be filled in then or later, depending on the user's process.
A number of possibilities lie between these approaches. It may be that an application is mostly programmatically driven, but that there are several on-ramps. Initially, the application might appear as user-selection driven with a subset of the pages that the user can navigate. Once the starting position is selected, the process is engaged, and the general navigation may disappear, leaving the user in process-driven mode. When the process is complete, the user might be returned to a position where he or she can select another starting point.
The Lead Manager example uses a version of the hybrid approach. A common navigation bar is present that shows three possible on-ramps: Leads, Companies, and Contacts. After an item is chosen, you are brought to another page that is not otherwise accessible. For example, you can double-click a lead from the Leads page that programmatically navigates to a Lead Detail page that is not accessible from the navigation bar. The high-level navigation bar is still available, though, and you can move from that context back to an on-ramp context.
There are a number of ways to implement your navigation design choice in a composite application.
A built-in navigator is provided as part of the Lotus Notes composite application platform, letting you switch between the pages of a composite application. A tree view appears on the left-hand part of the page when the system navigator is enabled (the default state). The system navigator is controlled by the Root page preferences com.ibm.rcp.useNavigator and com.ibm.rcp.navigationModel. You can arrange your pages into a hierarchy that a user can navigate in any manner, at any time, and you can choose which pages to display. NOTE: Unsaved Lotus Notes documents prompt the user to save changes when the user moves on to another page.
The system navigator has the advantage of being already present and deployed. Configuration of pages for use with the system navigator is supported directly in the Composite Application Editor. If used in several composite applications, the system navigator provides a common look and feel to your users. Drag-and-drop is supported across multiple pages; that is, if you drag one page and hover over another page in the navigator, you can drop on to that page. You do not, however, have any additional design choices for this navigator. You cannot change its position, size, or color.
It is possible to create a custom navigator that has a look and feel that supports your workflow, allowing you to programmatically discover the pages in an application and to switch between those pages. The Lead Manager sample application uses such a custom navigator. The options displayed are driven by properties set on the custom navigator component. Note, however, that such a component must be created or otherwise acquired, must be deployed with the rest of your application, and, most likely, does not support drag and drop.
Typically wires are used to connect a property of one component to an action on another component, thereby propagating information across a page. Wires can also be created between components on different pages, in which case not only is the data conveyed, but the application is switched to the new page. This allows a page navigation model to be developed from the actions that a user takes while in the application. It works well for the user-process-driven model, and you can create a navigator-less application design using this method.
In the Lead Manager sample, many of the components broadcast not only when a data element is selected, but also when it is double-clicked. Selection is used frequently in wiring strategies and is wired from the originating component to the peripheral components to show state. The double-click property is used to trigger page transitions by use of a cross-page wire and is less common. The wire is connected to an action in a domain-centric component on the new page and carries with it a page transition, as well as the context on which the new page is to focus.
Composite applications or pages can be listed on the workspace launcher. You can set this for an application or page by using the com.ibm.rcp.launcher property on the Advanced Properties dialog boxes; they then appear under the Open button in the Notes 8 client. For deployment purposes, you might wish to bundle several functional areas into a single composite application. This is one way to surface several on-ramps into your composite application, and you should consider this approach as well as navigation design and implementation.
We discussed tips and techniques for creating pages and methods of moving from page to page, stressing that page design and layout are critical for all applications. Also, we described how navigation design becomes important when the number and size of components no longer fit on one page or when the application contains multiple tasks or processes. Correct assembly of composite application can increase productivity, but the inverse is also true.
Learn
-
Get started with IBM Lotus Notes and Domino V8 technical content.
-
Read the introductory article in this series, "The Lead Manager application in IBM Lotus Notes V8: An overview."
-
Read the developerWorks article, "Designing composite applications: Component design."
-
Read the developerWorks article, "Designing composite applications: Design patterns."
-
Read the developerWorks article, "Designing composite applications: Unit testing."
-
Read the developerWorks article, "Designing composite applications: Writing an Eclipse component for IBM Lotus Notes."
-
Read the developerWorks article, "Designing composite applications: IBM Lotus Notes components."
-
Read the developerWorks article, "What's new in IBM Lotus Notes and Domino V8."
-
Read the developerWorks article, "Extending the IBM Lotus Notes V8 mail with Eclipse."
-
Read the developerWorks article, "Integrating IBM Lotus Notes data into the Lotus Notes V8 sidebar and toolbar."
-
Read the developerWorks article, "Extending the IBM Lotus Notes V8 sidebar and toolbar."
-
Read the developerWorks article, "Leveraging user context in the IBM Lotus Notes V8 sidebar and toolbar."
-
Get started with IBM Lotus Domino Designer 8 Help.
-
Refer to the developerWorks Lotus composite applications page.
-
Read the "Lotus Notes and Domino 8 Reviewer's Guide."
-
Read about the Eclipse project resources on developerWorks.
Get products and technologies
-
Download a trial of IBM Lotus Domino.
-
Download a trial of IBM Lotus Notes, Domino Designer, and Domino Administrator clients.
Discuss
Comments (Undergoing maintenance)
Table of contents
Next steps from IBM
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
