[Editor's Note: This article is a technical overview of the features in version 5.0, the initial gold release of Domino Designer R5. To read about enhancements since 5.0 was first released, read our companion article, Enhancements in 5.0.1 through 5.0.8. To check out the features for yourself, download a trial of Domino Designer R5 now!]
The goal of Domino Designer R5 is to support rapid development of applications for the Domino server. The themes driving the development team are:
- Usability – Reducing the "time to Web," creating an intuitive set of design tools, providing more templates and examples (and documenting them), and incorporating additional Web design constructs.
- Openness to alternate tools – Adding new tools to enable partners to extend the design environment themselves and providing integration with third-party tools (for instance, NetObjects' Fusion, IBM's VisualAge for Java, or any HTML created with any HTML authoring tool).
- Mixed client design – Narrowing distinctions between the Notes client and Web browsers with a number of features, including native image support, the Web color palette, framesets, and pages, and establishing a common model for user interface (UI) events.
- Global applications – Integrating more closely with Domino Global WorkBench, which allows you to create multilingual databases that let users choose their preferred language from a list of available languages. In addition, you can tag Domino application design elements with a specific language attribute and automatically serve the application, in that language, to the client.
The Designer developers sought to make Designer more familiar to Web developers by spending time talking to Web developers who were both customers and prospective customers and listening to their requests and complaints. They gathered valuable feedback at Lotusphere '98, through the Notes.net forums, through concept testing in usability labs, and through their own experience as users of Designer. They had to balance their goals for improving the usability and adding new features against time limitations imposed by the ship date for R5. Then they tried to come up with a reasonable list of what they could implement. The remaining items on their list will appear in R5.x and subsequent releases of the Designer. "In looking at everything we wanted to accomplish in Release 5," Bill Andreas, the Lead Designer for Domino Designer R5, says, "we achieved about 90% of what we wanted to."
The biggest challenge that developers faced with R5 was, "bringing the product closer to the one application that runs in any client goal," says Colleen Griffiths, the General Manager for Domino Web Application Server and Design Environment. This is because there are differences between what the Notes client can do and what a browser can do. The two have different connection models and therefore, the processing gets done in different places. Browsers traditionally retrieve information from a server, but do little processing on the browser itself. The browser does not maintain a state, or connection, with the server. Notes clients tend to do a great deal more processing.
Designer R5 will change the way you develop applications. You won't develop just a Web application or just a Notes application. You can now move closer to your ultimate goal of designing one application that runs both in the leading browsers and the Notes client. Let's take a look at the new features in Domino Designer R5...
Taking a closer look
The new features in Designer R5 include:
- A stand-alone and redesigned integrated development environment (IDE)
- Improved programmability
- HTML 4.0 support
- Expanded image and text capabilities
- Improved table support
- Design Synopsis
The redesigned environment
Designer is now a separate environment, distinguishable from the Notes client by the fact that it launches in its own window. To open Designer from the Notes client, click on the following bookmark along the left side of the screen:
Figure 1. Designer bookmark
You can choose to design a new database or open an existing database on the following screen:
Figure 2. Designer Welcome page
Once you create or open a database, the design pane on the left side of the screen contains bookmarks for the most recently used databases for a given project (or site). When you expand a bookmark, all the Designer tools and elements are also available in the design list. These include classic elements, such as forms and views, as well as some new ones. The following screen shows the new Designer with pages selected in the Design list and all the pages in the database appearing in the work pane on the right side of the screen:
Figure 3. Pages in the WaterWorks Sample database
The new environment provides you with registry-sensitive icon population for previewing and testing applications in your target client, which can be Notes, Netscape Navigator version 3.x, 4.x, and 5.x, or Internet Explorer 4.x. This means that based on information in the registry, icons for browsers appear in the top right corner of your screen, as follows:
Figure 4. Browser icons
You can click on the preview icon from within the design environment and view the code you just wrote in the browser. You don't have to open the form to preview it in a browser. You can select it from your list of forms and select the preview icon.
The UI is intentionally predominantly gray in color, so it doesn't clash with the UI of the applications you create. Other usability improvements include improved properties boxes, new toolbars and tool palettes, better rulers and grids, better keyboard access, absolute positioning of Web elements, better drag-and-drop capabilities, and more.
The programmer's pane contains a window with the following two tabs:
The Objects tab allows you to select an object in your application and view all the properties and events you've defined for that object. You can drill down even further by selecting an event and viewing all the code associated with that event in the programmer's pane. The following screen shows the Objects tab and the programmer's pane:
Figure 5. Objects tab and the programmer's pane
Figure 6. Reference tab and the programmer's pane
Updated properties boxes throughout Designer R5 provide you with more options. "I hope they love my properties boxes!" exclaims Andreas. The properties boxes are easier to use, and include functionality that allows you to change the properties box into a toolbar with important icons across it, as follows:
Figure 7. Text Properties box
The new Resource Link properties box allows you to set links in link hotspots, outline entries, framesets, and imagemap hotspots. It lets you easily link to named elements within your database:
Figure 8. Resource Link Properties box
Several other tools are available in R5 so that you can use the tools you are familiar with when you design applications. You can integrate NetObjects Fusion using the NetObjects Fusion Connector. This allows you to use Domino design elements with NetObjects Fusion pages, as described in "Creating Web sites for Domino using HTML authoring tools." The Domino Toolkit for Java allows you to write and debug Java agents for use in your Domino applications.
Several design elements that were previously available only for Notes applications are now available as Java applets. You can use these applets to design more efficient Web applications where much of the work happens on the browser through the applet. In the past, when you designed a Web application and viewed it through a browser, Domino converted all the design elements, including embedded elements, to HTML. Now, you can define a view, an outline, an action bar, or a text editor as an applet. Defining a view, for example, as an applet preserves the HTML-like functionality, but allows you to define resizable columns, multiple document selection, and scrolling regions. This provides your Web applications with a standard look-and feel. For an in-depth look at Java applets, see our interview with Brian Levine.
In previous releases, when you designed a Web application, Domino Objects (formerly known as the back-end classes, or the Notes Object Interfaces, or NOI) allowed you to access data that was not on display in the browser. These back-end classes were LotusScript or Java objects. You can still use LotusScript to access Domino Objects. We've enhanced LotusScript to handle the new events and objects. In addition, the 64K size limit no longer exists, and LotusScript is now multi-threaded.
You can also embed a CORBA applet in a document or a form using the same procedure as for any other applet. You can use a browser to view embedded CORBA applets on a Domino server. It is no longer necessary to set alternate HTML. A CORBA property box setting tells Domino to provide the HTML source that the applet needs to make an IIOP connection back to the server.
Lastly, the new design elements (pages, framesets, outlines and resources) significantly increase the scope and design of an application, and you can find more detailed information on these in the following sections.
You can import full-fidelity HTML files (including applets and animated GIFs) from anywhere on the Web and display them within Designer (as well as in the Notes client). HTML 4.0 is fully supported. Beyond HTML importing, you can highlight anything in Microsoft's Internet Explorer, and copy and paste it into Designer.
The <HTML> tab now appears on many properties boxes. It allows you to specify attributes common to a number of objects, including Cascading Style Sheets (CSS). This is helpful if you design a Web application using HTML 4.0. Domino incorporates the values of these attributes into the HTML that it creates at runtime.
The new Outline design element allows easy navigation through an application and its elements. Outlines provide you with a display of the hierarchical tree structure of links and elements in your site or application. An outline is basically a site map (from a classic Notes perspective, the outline is an extended navigation control). This is a familiar structure to you if you are a Web developer because this type of hierarchical display often appears on Web sites, allowing easy navigation of the site. The Outline is also completely programmable, so you can use it to personalize your applications for a given user. For an in-depth look at Outlines, see "Domino Designer R5: The Outline Designer." The following screen shows the hierarchical structure of the outline. Notice that you can click the Generate Default Outline button, at the top of the screen, and Designer automatically creates an outline for you. You can also easily manipulate the structure of the outline by selecting an entry and clicking the Indent Entry button to change the position of the entry in the hierarchy:
Figure 9. Outlines in WaterWorks sample database
In addition, you can use the Outline design element to design your entire site or application by placing and rearranging outline entries. This is similar to other site management tools. You can link pages, documents, or other design elements to the outline entries to complete the Outline. You can also create multiple Outlines for one database.
The new Outlines feature, "causes databases to look radically different," says Andreas. "You will be able to explain more about what is going on in the database, and create better organized databases."
You can structure an outline of pages on a Web site, and continue to manage the application logic through the dynamic object container included within Domino. An Outline is a new type of embedded element, similar to a view, that you can place anywhere in an application and feel confident that it appears in the Notes client or a browser in the same way. For instance, you can:
- Display an Outline horizontally at the bottom of a page as a navigational aid for users
- Navigate to any page, view, document or other design element using an Outline
- Drag-and-drop the outline entries to reorder the structure
- Change the background of an Outline to display a graphic
You can create a database with an Outline that links to information you use all the time. For example, if you always go to a discussion group, such as the Notes/Domino forum on Notes.net, you can now create a database that has an Outline with a link to the view you like most, such as discussion By Date. You can also add an entry in the outline that links to your favorite Web site. Then you can easily access that Web site while you monitor the discussion.
The page designer allows you to work within the familiar page environment of the Web. A page design element displays pages already stored in the given project database (for instance, a site map page or a home page). To allow end users to access a page, you must provide a document link to the page, or display the page in a frameset. Page creation no longer needs to involve creating a form and a document. Instead, you can enter HTML, ordinary text, graphics, and applets directly onto a blank page element. Pages, like forms, are completely programmable across every element. A page can contain anything a form contains, except fields, subforms, and layout regions. Since pages do not contain fields, end users cannot enter data on a page.
With the addition of pages and improved layout and image support, you no longer have to program Web pages in native HTML. You can create the same great-looking Web pages in Designer. If you want to use HTML, you can use pass-thru HTML (now with highlighting) or pure HTML pages in the Designer. The following screen shows a Web page with a graphic placed directly on it:
Figure 10. Sample Web page with graphic
If you are a Web developer, you are probably familiar with frames as a standard method for laying out a Web site. Frames allow you to have a navigation panel (usually on the left side of the screen) that is consistent throughout your site. Users choose the link to the information they want to view in this frame, and the information appears in another frame (usually on the right side of the screen). For more information on how frames work in general, and in R4.6, see the Iris Today article, "Designing Domino 4.6 sites using frames." For more information on R5 framesets, see "Domino Designer R5: Framesets." R5 includes framesets as a new design element, so you can easily create multi-pane interfaces in your applications. Featured inside the Frameset component is a wizard that allows you to start designing frames quickly. You can create framesets visually (by selecting the number of frames, their sizing, positioning, and so on). You can also adjust frame properties through properties boxes. The following screen shows a common frames layout. Notice that you can choose the buttons at the top of the screen to quickly change the layout as you work:
Figure 11. Sample Framesets layout
After you create a frameset, you can associate pages, views, forms, Java applets, Active X components, or URLs with each individual frame. Framesets also feature automatic targeting. Missing or misdirected target tags, due to Web site updates, are the cause of many broken links in a Web site. In Designer R5, missing targets go away because every frame is always pre-targeted within Domino.
"Framesets were the most challenging part of developing Designer R5," says Andreas, " because the way we implemented framesets allows you to do more than just divide the real estate on your Web site. You can control the flow of your application and use separate actions and results in different framesets."
Resources are shared objects available for your use within a database. They include design elements from previous releases, like subforms and script libraries, and new design elements, like images, applets, and shared actions. You develop and maintain the shared resource once and use it throughout the application. The following screen shows a list of images stored in a database:
Figure 12. Image Resources
You can call the image or applet by name (reference it) in an application in one or more places. You don't paste the entire image or applet in the application, and you don't need to repetitively serve it to a browser. This saves your end-users download time. It also helps you manage your resources by allowing you to update and maintain all your images and applets in one central location.
When you use this new design element with replication, you can see how powerful Domino and Notes are together. For example, if you change one image in the central location, you can replicate the database with other databases or applications, and only your one updated image replicates. This saves time and space.
Images and text
Another key advantage in Designer R5 is that you gain complete control over the way that text and graphics behave. You can wrap text around images and tables. Additional text formatting options include Alphabetic and Roman upper and lowercase lists, as well as, square, circle, and checkbox bullets.
You can anchor objects to a position in a paragraph, position paragraphs using nested tables, and position graphic elements in the background. The Picture Properties box now has a Text Wrap field that corresponds to the HTML valign attribute and allows you finer control over the alignment of images:
Figure 13. Picture properties
Native graphics file support includes BMP, CGM, GIF, JPEG, PIC, PCX, and TIFF. For more information about designing R5 applications using graphics, see "R5 Template Graphics: The High Resolution Revolution."
An imagemap is a graphic that you place programmable hotspots on. These hotspots perform an action when a user clicks them. You can now place imagemaps on documents or forms, so you don't have to use a Navigator to draw multiple hotspots on a picture in a document.
There is increased table support in R5. You can use nested tables. This means that the Designer supports tables within tables, within tables, and so on. You can place text in cells and anchor it. While you type information in columns in a table, the columns automatically reposition. This means that you can set up columns in a newspaper column style, where the text at the bottom of one column automatically moves to the top of the next column when you add text before it. You can also create tabbed tables, place sections into tables, and collapse tables. In terms of color, you can add drop shadowed, colored borders to cells and create a gradient cell where the color gradually changes, as follows:
Figure 14. Gradient Cell
Timed tables allow you to create the illusion of an animated GIF by displaying a different table row, containing a graphic, every specified number of seconds. The new tables, coupled with all the new style capabilities, allow you to layout your pages with extremely fine control. For an in-depth look at tables, see "Domino Designer R5: New versatile tables."
Design Synopsis is a redesigned version of the reporting tool that can help you analyze your applications by providing you with a complete, structured list of the forms, pages, and scripts that make up an application. We revamped this unique tool, and we now provide more complete information about the application. To learn more about Design Synopsis in R4.6, see the Iris Today article, "Design Synopsis: Creating database blueprints." The tool provides database, replication, access control list, and design element information for everything used to build an application, including script libraries. You can also optionally store synopsis output in a database. The following screen shows the Design Synopsis dialog box:
Figure 15. Design Synopsis
Designer R5 offers Web developers and Notes developers a way to come together and begin designing one application for both the Web and Notes clients. "Designer R5 measures up really well against the competition," points out Griffiths. "It offers these new Web metaphors within a unified, integrated development environment, and with all the added power of the Domino platform. This makes it easier and faster for new designers to learn to develop applications, but because the design environment is so extensive, it allows them to grow into more advanced developers when they are ready."
- Enhancements in 5.0.1 through 5.0.8
- Ned Batchelder: Designing Domino Designer
- Brian Levine: Java applets
- Domino Designer R5: The Outline Designer
- Domino Designer R5: Framesets
- Domino Designer R5: New versatile tables
- Domino R5 Technical Overview
- Notes R5 Technical Overview
Dig deeper into IBM collaboration and social software on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Keep up with the best and latest technical info to help you tackle your development challenges.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.