353 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Jobs | Twitter | Bookmarks | Pods | Forum | Blogs | Search | myPL | About 
 
Latest 7 Posts
Lotusphere 2012 - We'll be there
Fri, Jan 6th 2012 100
IBM Lotus Protector 2.8 with extended content filter and new licensing model
Mon, Sep 5th 2011 60
UKLUG 2011: JavaScript Blast
Wed, May 25th 2011 33
IBM Lotus Connections Version 3.0.1
Mon, Apr 11th 2011 53
iNotes 8.5 and Firefox 4 - Fix available
Wed, Apr 6th 2011 51
iNotes 8.5 und Firefox 4
Wed, Mar 30th 2011 61
Quick Tip: Switching Domino Designer Perspectives Fast!
Wed, Feb 9th 2011 55
Top 10
dojo and Notes: Article 8 - dijit.Dialog - Modal dialogs with AJAX
Fri, Aug 13th 2010 183
Lotusphere 2012 - We'll be there
Fri, Jan 6th 2012 100
dojo and Notes: Article 10 - dojo.dnd.Source - Drag'n'Drop with three lines of JavaScript code
Mon, Dec 27th 2010 88
Versioncontrol using Source Control Enablement and Mercurial
Thu, Dec 16th 2010 67
dojo and Notes: Article 9 - dijit.Dialog - A little trick as an enhancement
Mon, Oct 25th 2010 64
iNotes 8.5 und Firefox 4
Wed, Mar 30th 2011 61
IBM Lotus Protector 2.8 with extended content filter and new licensing model
Mon, Sep 5th 2011 60
Quick Tip: Switching Domino Designer Perspectives Fast!
Wed, Feb 9th 2011 55
IBM Lotus Connections Version 3.0.1
Mon, Apr 11th 2011 53
iNotes 8.5 and Firefox 4 - Fix available
Wed, Apr 6th 2011 51


dojo and Notes: Article 8 - dijit.Dialog - Modal dialogs with AJAX
Bernd Hort    


dojo-Logo
While the last article in this dojo series was only a small modification we will cover dijits in this one. Dijits are GUI elements and the name come from dojo interface widgets = dijit. From the many possible dijits we choose the dijit.Dialog for our sample. The dijit.Dialog object creates a modal dialog.

One way of using a dijit.Dialog is to invoke it with a DOM node as content. Another more interesting way of using it is to specify an URL. The content of this URL is then loaded via AJAX. All the complexity needed for that is capsulated by the object. As an application developer you just have to use it. It is simply genial.

For our sample application we will use the dialog for showing some speaker information after clicking on the speaker name. As always we start with a look at the code we need.
//Loads a dialog
dojo.require("dijit.Dialog");

//Prepare the dialog
function prepareDialog(){
        //creates a new dialog
        var myDijit = new dijit.Dialog({title: "Referent", id:"dialog", style:"width:300px"});        
        //appends the dialog to an existing DOM node
        dojo.byId("sessions").appendChild(myDijit.domNode);
        //the dialog is hidden until called
}

function showSpeakerRefByName(speakerNameEncoded){
        //get the dialog
        var dialogDijit = dijit.byId("dialog");        
        var path = webPath + "/SpeakerDescriptionByName/" + speakerNameEncoded;
        dialogDijit.attr('href', path);
        dialogDijit.show();
}

The first line should be a no-brainer by now. It tells dojo to load the dijit.Dialog package.

The function prepareDialog() creates a new dijitDialog object. The constructor needs a configuration object. This is a common technique for a lot of dojo objects. At this time we just specify the title, an id and the width of the dialog.

The next line looks quite unimpressive. But it is absolutely necessary to make this work and it is important to understand the concepts behind it. While creating the dijit.Dialog object a DOM node for this dialog is created. This DOM node is initially not part of the current HTML document. Only be making it a child node of an existing node in the DOM tree the dialog could interact with the DOM tree.

It is crucial to understand that at the end all dijits are plain HTML, CSS and JavaScript. Our dialog is nothing more than an absolute positioned div element that overlay all other elements in the web page. Directly underneath is another div element with half opacity which covers the page to increase the modal effect of the dialog. Why do I emphasize this aspect? Because sometimes while dealing with dijits people seems to forget that dojo can't change the principles of web applications.

The function showSpeakerByRefName() gets a handle to our dijit.Dialog object by asking the dijit manager for it with the method dijit.byId. Don't confuse this method with dojo.byId which returns a DOM node with the given id. The variable path contains the URL with the speaker description. We place the URL in the attribute "href" of the dijit.Dialog. While calling the method dialogDijit.show() two things happen. First of all the dialog while appear on the web page. Then the content from the URL is loaded using an AJAX request. As soon as the content is loaded it will be displayed in the dialog box. If the server connection isn't fast enough you might see one of those typical animated images telling you that something is going on.

To make the speaker name react on a click we have to register this event. The following lines of code in our dojo.addOnLoad function will do it.
//add the behavior to the speaker name to show the dialog
dojo.behavior.add({
        "div.session span.speakerName": {
          onclick: function(evt){
            var speakerNameEncoded = evt.target.id;            
                  showSpeakerRefByName(speakerNameEncoded);
          }
  }
});

//add style to name for pointer
dojo.query("div.session span.speakerName").style("cursor", "pointer");
Every speaker name is enclosed in a span element with a CSS class "speakerName". We use this class not only to change the appearance but also to find all DOM nodes for our dojo.behavior object. To make life it little bit easier all the spans have an id with the speaker name encoded. This id will be used in the showSpeakerRefByName() function. The last line changes the style of the speaker name span elements to make them look like a link.

As always the sample can be tested live.

In the sample database belonging to this series of articles you can find the content of this article in the form "webSpeedAgendaing-Step 6 | SpeedAgendaing-6" and the JavaScript library "SpeedAgendaing-Step6.js".

We while enhance our sample in the next article so that a click on the speaker picture will also show the dialog with the speaker description.


---------------------
http://www.assono.de/blog/d6plinks/dojo-and-Notes-article-8-dijit.Dialog
Aug 13, 2010
184 hits



Recent Blog Posts
100


Lotusphere 2012 - We'll be there
Fri, Jan 6th 2012 5:08a   Bernd Hort
Again we'll be at Lotusphere, and again we'll host a Birds-of-Feather session. But this time not about "OOP in Notes and Domino". Instead the session is about: BOF124 - XPages and Java: Share your experience Session date Monday, 2012-01-16 Session time 6:15 pm – 7:15 pm Session location Swan Hotel, Swan Macaw 1 Speaker Bernd Hort Session description: This session is about sharing experiences with using Java in XPages. Over the last year we have been building a Java based [read] Keywords: domino lotusphere lotusphere2012 notes xpages applications java oop
60


IBM Lotus Protector 2.8 with extended content filter and new licensing model
Mon, Sep 5th 2011 6:08a   Marcus Ley
Introducing version 2.8 of Lotus Protector mail filter IBM extends the capabilities of the software. The social business platforms Lotus Quickr and Lotus Connections benefit from integrated content filtering. The following changes have been implemented: realtime virus detection for content uploaded to Lotus Quickr for WebSphere 8.5.1 and Lotus Connection 3.0.1 content filter for email and attachments. Common office documents can be scanned for internal information and filtered respectively. pla [read] Keywords: connections ibm lotus protector quickr email office virus websphere
33


UKLUG 2011: JavaScript Blast
Wed, May 25th 2011 4:09p   Thomas Bahn
Yesterday I had my talk "JavaScript Blast" at UKLUG 2011, in Manchester, UK. Here is the complete, 125 pages long slide deck: UKLUG-2011-JavaScript-Blast.pdf (1,60 MB) [read] Keywords: javascript
53


IBM Lotus Connections Version 3.0.1
Mon, Apr 11th 2011 6:16a   Marcus Ley
On April 7, IBM released the new version 3.0.1 of Lotus Connections. The main changes are the introduction of extended moderation capabilities, a new media galery and the new Ideation blog. In addition, the new version features the integration in enterprise content management (ECM) systems. The new moderation capabilities enables a community owner to pre- and post-moderate content. When using the pre-moderation feature, owners can accept or reject content, before it appears in the community. Usi [read] Keywords: connections ibm lotus community enterprise integration
51


iNotes 8.5 and Firefox 4 - Fix available
Wed, Apr 6th 2011 6:10a   Arnd Koch
IBM released an interim Fix for Firefox 4 Support in iNotes : https://www-304.ibm.com/support/docview.wss?uid=swg21474006 http://www.assono.de/blog/d6plinks/iNotes-8-5-and-Firefox-4 [read] Keywords: ibm inotes firefox
61


iNotes 8.5 und Firefox 4
Wed, Mar 30th 2011 7:08a   Arnd Koch
Anyone, who tried to use iNotes with the brand new [1] Firefox 4 browser, got into some trouble these days, iNotes uses XUL based design elements which are no longer supported (due to many security problems in the past, remote XUL [2] was removed in Firefox 4). IBM plans to release a fix in the next fix pack [3] and there is only an unsupported work-around available (installing the Remote XUL Managers[4] Plugin). However, it is to be determined, if using a third party browser plug-in to eva [read] Keywords: ibm inotes firefox security




55


Quick Tip: Switching Domino Designer Perspectives Fast!
Wed, Feb 9th 2011 7:12a   Thomas Bahn
Preparing my session Zähme den Tiger - Java-Entwicklung in Notes und Domino (Tame the Tiger - Java Development in Notes and Domino) for this year's EntwicklerCamp, I wrote some applets and servlets. With Domino Designer on Eclipse I don't need an extra Eclipse installation anymore. Especially when developing Applets, but also for XPages, you have to switch frequently between the Java and the Domino Designer perspectives. Using the Menu Window - Open Perspective is - at least - quite inco [read] Keywords: domino notes xpages development eclipse java
27


Lotusphere 2011 - We'll be there
Tue, Jan 18th 2011 12:12p   Thomas Bahn
Again we'll be at Lotusphere, and again we'll host a Birds-of-Feather session about OOP in Notes and Domino: BOF217: Object-Orientated Programming in IBM Lotus Notes and Domino Session date Wednesday, 2011-02-02 Session time 5:45pm - 6:45pm Session location Swan Hotel, Parrot 1 Speakers Thomas Bahn, Bernd Hort Session description: Object-oriented programming in Lotus Notes and Domino still means LotusScript for most developers. Who uses an OOP approach in his applications, where a [read] Keywords: domino ibm lotus lotusphere lotusphere2011 lotusscript notes xpages applications eclipse java javascript oop server
88


dojo and Notes: Article 10 - dojo.dnd.Source - Drag'n'Drop with three lines of JavaScript code
Mon, Dec 27th 2010 11:20a   Bernd Hort
While the last article in this little dojo series covered the dijit.Dialog, this one will deal with Drag & Drop. It is one of my favorite topics in dojo. Simply because it is so easy. As you will see we only need three lines of code to make our session descriptions sortable via Drag & Drop. There are two concepts for Drag & Drop in dojo. The first one is for moving elements to any position on the web page. The second is for sorting elements which are in a container element. For [read] Keywords: domino notes css database dojo javascript
67


Versioncontrol using Source Control Enablement and Mercurial
Thu, Dec 16th 2010 8:13a   Arnd Koch
Modern style development without some kind of version control is not reasonable these days. In Lotus Notes development however, version control systems are rarely used, mostly because it is very hard to maintain such a system and Notes offers very little to help here. In the new Eclipse based Domino Designer however are a lot of tools available, which can improve your work in ways you have always dreamed of. Version control can be easy and once you start using it, you'll enjoy your work like [read] Keywords: domino dxl lotus notes application development eclipse integration java openntf wiki xml




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - FAQ - Mobile Edition