Genii Weblog

MRTYB with Midas #5 - Build dynamic interfaces with layers

Mon 16 Jan 2006, 11:58 PM



by Ben Langhinrichs
Here are links to the first five of the customer inspired list of ways to Make Rich Text Your Business:
MRTYB #10 - Rich text comparisons with red-lining
MRTYB #9 - Manage doclinks, URL links and link hotspots
MRTYB #8 -  Build dynamic forms
MRTYB #7 - Work with images in rich text and in image resources
MRTYB #6 - Construct complex and elegant reports


And now, the first of the list that was not covered two years ago when I first created these.  For #5...


#5) Build dynamic interfaces with layers

Description
In Notes 6, IBM introduced layer, a powerful new construct that has been almost, but not completely, ignored by Notes developers.  The concept of a layer was taken from the web, and most of the functionality of the layer (implemented with DIV tags) was included, at least on the surface.  But IBM made two mistakes with layers.  

The first mistake was that there is no way to change the z-index dynamically with JavaScript, or any other way.  The z-index determines which layers are on top of which other layers, and a dynamic z-index would mean that you could swap out different layers easily.  Instead, developers had to use hide-when formulas, which are powerful, but hard to add and hard to control.  Additionally, and ruinously, hide-when formulas would not allow layers to work the same way on the web as in Notes, because each "refresh" on the web required a reload of the whole page.

The second mistake was that IBM did not offer a programmatic way to create and manipulate layers.  This made it very, very difficult to do anything complex, because layers by their nature tend to cover each other up.  The Designer does allow you to hide one layer while working with another "under" it, but that is very, very cumbersome if you have twenty layers or more.

History
Even before Notes 6 was released from beta, the Midas Rich Text LSX offered the ability to create and manipulate layers, but after that quick start, very little happened for a couple of years.  We at Genii Software  simply didn't have a good grasp of what could be done with layers, and without any examples to work with, our customers similarly ignored this feature.  Then, for Lotusphere 2005, we put out our annual Sessions database (this year's is at LS 2006 sessions), and we included calendars made from layers.  All of a sudden, there was a clear and obvious example of the power of layers, and several customers started building their own applications with layers.  Over the past years, we have posted various examples of new kinds of applications, sometimes very surprising ones, that you could create with layers.  To stay with precedent, a new dynamic use of layers is being added to the Lotusphere Sessions db, what you might call "Google Maps for the Notes client".

Comparison with standard Notes/Domino functionality
Notes 6.x doesn't include any native ability to create layers or image maps, which are used extensively with layer applications.  In theory, you could create such applications with DXL, but as a practical point, the formulas involved seem to be difficult to create through DXL.  In addition, I have been informed that you can only export layers as raw rich text data, which makes them essentially impossible to produce through this method.

Documentation
Documentation on using layers is mostly found in the Genii weblog, but documentation on the methods used, particularly the AppendLayer method and the image hotspot methods, are to be found in the Midas Help database.  Try posting a question in the Support Forum if you want one a sample of layers used in an application.  Be sure to describe what you want to accomplish, as are many unusual techniques that have been invented.  As an example, w show how to create scatter graphs, which you might not think of when working with layers (see screenshot below).

Screenshot of Calendar created with layers, with clickable hotspots (from Lotusphere 2006 Sessions db)
Calendar made with layers

Screenshot of interactive "Google" style maps in Notes client (from Lotusphere 2006 Sessions db)
Inline JPEG image

Screenshot of scatter graphs (from Genii Weblog)

On-line demo
None available at this time.

Sample Database
Lotusphere 2006 Sessions database 
The agents creating the calendar subforms are included in the database.  In Version 3 of the database, not yet released, the agent to create the interactive Google style maps in the Notes client will also be included.
Sample Script Snippet
This snippet is taken from the actual script used to generate the Google maps in the Notes client.  Note the use of the AppendLayer method to create the layer, then the FindNamedChunk method to find the layer by name, or id, and finally the use of the AppendGraphic method followed by the SetImageHotspot method, which together add a graphic with a hotspot on it.
Sub SetupPedestalPushpin(rtitem As GeniiRTItem, rtchunk As GeniiRTChunk, pedestal As Integer,As Integer,As Integer)
   Dim rtLayer As GeniiRTChunk
   Dim rtGraphic As GeniiRTChunk
 
   Call rtchunk.AppendParagraph("LeftMargin=1", "", |!(|+Cstr(pedestal)+|= p)|  )
   Call rtchunk.AppendLayer(Cstr(y)+"px", Cstr(x)+"px", "20px","34px", 3, |LayerHTMLID='Layer|+Cstr(pedestal)+|', "JustifyMode='Center' ")
   Set rtLayer = rtitem.Everything.FindNamedChunk(True, "Layer", "Layer"+Cstr(pedestal), "Exact")   
   Set rtLayer = rtitem.DefineChunk("Inside "+rtLayer.Definition)
   Call rtLayer.AppendGraphic("file", "c:\temp\pushpin_ns.gif", "ImageWidth='20px' ImageHeight='344px' ")   
   Set rtGraphic = rtLayer.DefineSubChunk("Graphic 1")
   Call rtGraphic.SetImageHotspot("Formula", |FIELD b:=|+Cstr(pedestal)+|; @Command([RefreshHideFormulas]);|, "", "Default")
End Sub
Weblog Posts on Layers
Scatter graphs using layers
Ogres have layers, and now the Sessions database does as well
Veiled Threats (Mike Midas case file)
Example of a calendar with layers (different skins can create a very cool look)

Copyright © 2006 Genii Software Ltd.

What has been said:

No documents found