Domino Designer R5 Technical Overview

This technical overview describes features in Domino Designer R5.0, which was designed to give Web developers and Notes developers a way to come together and begin designing one application for both the Web and Notes clients.

Susan Florio, Content Developer, Iris Associates

Susan contributed articles for the past year in the award-winning Notes.net webzine, Iris Today. She also wrote and designed the award-winning "History of Notes/Domino." Susan left Iris in July 1999 to pursue a writing opportunity at another Boston-based start-up company.



01 April 1999

[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!]

Introduction

Domino Designer R5 is the next step towards a Web-friendly development environment. While Notes has always been a powerful tool for developing applications, R5 builds on this power by making it easier and faster for Web developers to create rich, robust, and secure applications with a new integrated development environment. If you are a Web developer, it is now easier to use HTML and JavaScript in your designs because Designer supports them natively, meaning that a conversion process is no longer required. You can also use frames and Java applets, both supported by the Domino server, and available in Designer. If you are a Notes developer familiar with application development in previous releases, you can now design more visually appealing applications that use the new features and still leverage the strengths of the Domino infrastructure that you know so well.

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.
  • Industry-standard programmability – Leveraging existing and emerging languages, including Java, JavaScript, and HTML 4.0 and maintaining the existing investment in LotusScript.
  • 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.

Ultimately the way that Iris developers plan to bring the two types of clients together is by using one programming language-JavaScript. "When users can do everything with JavaScript that they can now do with LotusScript on the client-side," says Griffiths "we will have reached our goal. This release goes a long ways towards that, but we still have some more to do."

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
  • Outlines
  • Pages
  • Framesets
  • Resources
  • Expanded image and text capabilities
  • Improved table support
  • Design Synopsis

The following sections give you a closer look at the new key features. Keep in mind that this article is only an overview of these features. For more information on Designer R5, see our interview with Ned Batchelder, project leader for Domino Designer; our interview with Mark Judd, the JavaScript champion at Iris; and our interview with Brian Levine, the designer of Java applets in R5. In addition, look for more in-depth information on each feature on Notes.net in the months ahead.


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
Designer bookmark

You can choose to design a new database or open an existing database on the following screen:

Figure 2. Designer Welcome page
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
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
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:

  • Objects
  • Reference

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
Objects tab and the programmer's pane

The Reference tab replaces the R4.x LotusScript browser window. It changes depending on the language you select. You can select the Formula language to view @Commands and Functions and fields, or JavaScript or Java to view information on the Document Object Model. The following screen shows the Reference tab and the programmer's pane:

Figure 6. Reference tab and the programmer's pane
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
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
Resource Link Properties box

Programmability

Java and JavaScript support are now both available within Designer. This allows you to create and compile Java agents, and edit scripts and formulas, all from within Designer. All UI events are programmable as a result of the JavaScript integration (onBlur, onFocus, and so on). For an in-depth look at the JavaScript support in Designer, see our interview with Mark Judd, as well as our article, "The IDE & more: JavaScript support in Designer R5." In addition, Domino Enterprise Connection Services (DECS) is a new visual tool that we've integrated with Domino R5. It allows you to incorporate relational and enterprise data directly into the applications you design. We also expanded the Domino Java and LotusScript classes available for enterprise data access.

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.

Now, in R5, we have made these LotusScript and Java objects, the back-end classes, available to the browser using a technology called Common Object Request Broker (CORBA). What this means is that now your Web application is similar to your Notes application in terms of programmability. In a Notes application, you could always manipulate data that was on display and data in other databases. In a Web application, you had to wait for a user to open or save a Web page to access this same data. CORBA allows you to access the data without the user opening or saving the document; instead, you can use Java or JavaScript on a W3C event. For more information on CORBA, see the Lotus Developer Network articles, "Domino 5.0 and CORBA" and "How to Create a CORBA Applet in Domino."

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.


HTML

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.

You can now generate HTML for hidden fields by selecting a new form property. This is another example of how R5 allows you to design Web applications that match the behavior of your Notes applications. Previously, if your application contained a form with a hidden field, Domino couldn't access the information contained in that field when you ran the application on the Web. Now you can generate HTML for the field and Domino can use the information. You can also use JavaScript to access or change the information in the hidden fields.

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.

More generally, HTML interoperability permeates Designer R5. This results in a reduced learning curve that is not only beneficial for developers, but also for business partners. For example, now you can hire people that are trained in HTML and JavaScript, but not in LotusScript.


Outlines

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
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.


Pages

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
Sample Web page with graphic

Framesets

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
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

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
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
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.


Tables

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
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

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
Design Synopsis

Conclusion

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."

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into IBM collaboration and social software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus
ArticleID=23396
ArticleTitle=Domino Designer R5 Technical Overview
publish-date=04011999