Domino 8.5, GZIP, and EXT

Domino 8.5 will support serving of gzip files by default. This is great news! I can finally stop using hacks to get Domino to use gzip files, and writing @if statements to check for browser compatibility.

This greatly affects the first page load time.

Here is an example of the top three files for extnd gzipped versus unzipped.
434 KB savings!!!



Details from the 8.5 reviewers guide

2.8 GNU zip (gzip) files
The Domino Web server can serve files compressed by gzip (GNU zip). This feature is on by default, but you must add the compressed file to the appropriate server directory, and certain restrictions apply, as listed below.
The Domino Web Server serves files compressed by gzip (GNU zip), under the following conditions:
• The Notes.ini file does not contain the following setting: HTTPDisablePreCompressedGzipFiles=1.

• The name of the compressed file is the name of the original file with an additional extension of .gz. For example, the gzip counterpart of c:\notes\data\domino\html\foo.html is c:\notes\data\domino\html\foo.html.gz. (A browser sees this file as http://servername/foo.html.)

• The original file is present in the same directory as the gzip file. The original file is served if it is newer than the gzip file or compression is disabled.

• The browser or other client sends the request header Accept-Encoding: gzip (the default for most browsers).

• The MIME Content-type of the file matches text/* (all subtypes of type text) or application/* (all subtypes of type application). The server does not support sending a range of bytes for a file that has a gzip counterpart. The server does not send "Accept-Ranges: bytes" in the HTTP header and sends the entire compressed file.




Does anyone know of any better way to make these files smaller?

Advantages with using a Notes Page to contain a JavaScript file

One thing i love about Lotus Notes on the web is the use of computed text. It allows me easily to do some things i would have no idea how to do with java script. I was looking through the extnd database and noticed that a page was actually an xsl file, so when i was working with my Web Desktop i figured this could solve one of my problems i was having.

I wanted to have the users name in the start menu, in the sample code it was hard coded. So for the meantime i put the company name there. To solve this i took the text from the sample.js file and put it in a notes page. I then changed the page properties to say it contained something other than notes content or html.



I created some computed text
@name([cn];@username)
and put it in place of the company name.




I then changed the location of the sample.js file in the main web desktop page to point to this notes page.

I then had the username show up in the start menu. I think i will use something simalar to offer different desktop themes to the user in the near future.

More on customizing the start menu in the EXT Web Desktop on Domino

Here is an example of grouping together items in the start menu. In this example I create a folder with two items in it. The folder name is "In Development" and the two items inside it are Purchase Orders and Expense Reports. This code is located in the sample.js in the EXTND Database that was shown in the first post in this blog.



MyDesktop.BogusMenuModule2 = Ext.extend(MyDesktop.contracts, {
init : function(){
this.launcher = {
text: 'In Development',
iconCls: 'bogus',
handler: function() {
return false;
},
menu: {
items:[ {
text: 'Purchase Orders',
iconCls: new MyDesktop.purchaseorders().launcher.iconCls,
handler : new MyDesktop.purchaseorders().createWindow,
scope: this,
windowId: 'Purchase Orders'
},
{
text: 'Expense Reports - Moved to Applications Folder',
iconCls: new MyDesktop.expensereports().launcher.iconCls,
//handler : new MyDesktop.expensereports().createWindow,
scope: this,
windowId: 'Expense Reports'
}

] } } }});

EXT Web Desktop, Customizing Desktop Icons and Start Menu

To customize the icons and links on the desktop itself, you need to open the sample.js file that was uploaded to the EXTND database. Look at the top section of code, that starts with MyDesktop, In the getModules function you list what you want to appear on the desktop and start menu.



There are two options for adding applications, you can have it on the desktop and start menu, or you can have it on the start menu only.

Here is an example of adding it to the desktop and start menu. In this example i am adding a link to a webpage shown in an iframe.



Notice the iconcls tag. This is what you will use when you edit the desktop.css and add icons to go with this link.

example:
This will add a small icon on the start menu and task bar.

.remotedesktop {
background-image: url( ../images/remotedesktopsmall.png ) !important;
}

Save and close the desktop.css and the sample.js. Now the application is in the start menu. Next open the main html page that contains the web desktop code. Add the new application to the desktop by adding some pass through html like this.

The dt id defines the image you will assign in the desktop.css file like this

#Remote-Desktop-shortcut img {
width:48px;
height:48px;
background-image: url(../images/remotedesktop.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/EXTND/EXTNDB1.nsf/ext/2.0.1/desktop/images/remotedesktop.png', sizingMethod='scale');
}

This will add the icon to the desktop with a link to your application.

In my next post i will discuss how to group items togeather in the start menu.

How To: Use The "Web Desktop" from EXT in a Lotus Domino enviroment

The web desktop example used in EXT is a powerful example of what can be done rather quickly with the EXT framework. Since, i wanted to manage this site with Notes, and wanted all the resources in a notes database, i chose to use the EXTND database to hold these files for convenience.

You must have EXT either in a directory, or by using the EXT.ND database, which is my preference.

First download the full EXT code, in it you will find an examples folder. In this folder is a folder named desktop. Open domino designer, open the database you want to house these in and select import files. Import all the files, make sure you retain their relative paths that you find in the folder.



You do not have to import the desktop.html file though, i use the code from this file in a Notes page, that way i can compute values and do other things that Notes does well that is hard to do in html.

Create your page or form in Lotus Notes, copy and paste the body HTML from the desktop.html. If you are using EXT.ND put your header information in the HTML Head Content area on the page.



You also need to include the header information for the desktop application like this



Save and close the page, Open it up in a web browser and you will have your web desktop example running on your server.

In my next post i will detail how to customize the links and icons/navigation in this example.

A web portal example with EXT.ND and Web Desktop from EXT Samples running completely on Domino

A while back i was tasked with creating a web portal for our employees, i looked around quite a bit to find something that i thought was innovative and different. At the time i had already found EXT.ND, and i was very impressed. I had built a couple of applications with it, and it was simple to use. I went to the EXT website and found the web desktop example, i realized it was the perfect gui to use for my new project.

Here is what i came up with..



This is a web page that is running on a domino server, and all elements are contained in notes databases!

I like the windows like gui in the browser, you can have multiple windows open at a time all on one web browser tab. You can minimize, maximize, and size these windows to your hearts content. They can be an ext.nd application or any web page in in iFrame. One of the best things about the web desktop is users dont need to be trained to use it.