Category Archives: Webdesign

goback

Internet Explorer pain – How to bypass forced compatibility mode on your intranet?

You use Firefox or Chrome as your primary testing tool for your intranet applications, aren’t you? (If you aren’t, consider doing so: Firefox + Firebug = a powerful web developer tool)

You ignore the fact that the company you’re working for wants Internet Explorer as the default browser. And because there are so many clients and configurations (Windows XP + IE7?) scattered all over the buildings and/or some applications were developed in the middle ages of the (not-so) worldwibe web (yet), your IT-department tends to follow a conservative approach…

compatibilitymode“Great, we can enforce compatibility mode for all users, with the power of a single setting! Feel the power of the Almighty Administrator!” What does this function do exactly? For years developers were begging Microsoft to implement some general css3 features and follow web standards (and it has worked for the latest incarnations of Internet Explorer), then suddenly your browser is thrown back in time, Before It All Really Started To Change. Moreover, the option to change this setting when I want it (for personal use) is grayed out.

What does this mean for the poor developer? Your carefully crafted XPage suddenly looks like you’re doing your first steps on the web. It’s even worse when you want to explore the edges of XPages, f.e. if you’re trying to bootstrap your XPages. Great looks in Firefox, ugly pages and broken layouts in Internet Explorer. It’s like meeting a girl in the evening, having a great night out with her, and see her in hard light in the morning, just to realise there isn’t much left of the magic you saw the evening before :-).

“Oh great IT-God!”, you cry, “Please open the Gates of Progression, at least for my application!” (I don’t care about the others who enjoy staying in the past) “Computer says no,” God answers. It’s only possible to change a general setting on domain level :-(. If you need compatibility mode for a single application in the company, then they enforce it for all applications and for the whole company.

Fortunately, there’s a meta-tag you can add in the head section of your page to override compatibility mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

“Grrreat!”, you shout. “… and eh, where do I add this in my XPage? I can add meta name-value pairs, but no such thing as http-equiv?”

After reading an inspirational blog from Michael Gollmick, I learned you can add some SSJS to beforeRenderResponse event of an XPage to get the line above added to the html head:

facesContext.getExternalContext().getResponse().setHeader("X-UA-Compatible", "IE=edge,chrome=1");

If you have a custom control with your layout, you can even add it to the beforeRenderResponse of that CC, so that you only have to add it once in your application!

This single line of code changes this:

ie7

to this:

ie9I’m a happy man :-).

Input validation for the web made easy with Adobe’s Spry javascript framework for Ajax – part 2

In the first part of this article I talked about why you should consider the Spry framework as a valid alternative for input validation in the browser. Now I’ll demonstrate how it works in Dreamweaver and in the next article, how to transfer the validation to Domino Designer (I decided to split up the article in different parts for the Dreamweaver side and for the Domino Designer side).

Adding the input validation to a form in Dreamweaver CS3

Spry demo

I invite you to start the beetorial to the left. In less than 5 minutes it shows you how to add input validation to a form in Dreamweaver CS3 (although it took more than 5 hours to build it :-)). I recommend running it in full screen (press <F11> in most browsers).

It’s not only intended for Notes developers, but is also useful for anybody that wants to learn about input validation in Dreamweaver CS3.

In the beemo I start with a form I already prepared (it’s loosely based on a form I found in The Art & Science Of CSS, a very inspiring Sitepoint book about practical and visually stunning CSS techniques.

I add validation to fields for name, email, date and checkboxes and I show how it looks like in the browser.

Bare in mind that the validation messages look a bit boring at the moment, but in a future part I will demonstrate how easy it is to create validation eyecandy.

Input validation for the web made easy with Adobe’s Spry javascript framework for Ajax – part 1

Adobe Spry Ajax framework

I know there’s Dojo. I know there’s Prototype. jQuery. There are a lot of JavaScript libraries available, and most of them have objects dealing with input validation. I saw Rocky’s session about Dojo on LotuSphere. An inspiring session that got me started delving into it, but I found myself a bit disappointed about how it looks. There are 3 themes available that change the look and feel a bit, but they all look rather ugly to me. Creating a theme of your own, so they tell, is a huge work (and that’s why there are only 3 themes).

While thinking about alternatives, I started looking at Spry, the Adobe’s framework embedded in Dreamweaver CS3. Spry can do much more than input validation, but for now I’m only interested in this part. It’s available for free, but if you want the ease-of-use you will need Dreamweaver CS3.

In this first article about Spry, I want to show you why it can be important to you if you are a Dreamweaver user. It’s just a warming-up to get your attention actually :-).

In a second article I’ll start with a Dreamweaver prototype form and Spry it up and in a third article, I’ll transfer it to a Notes webform. If there’s enough interest, a fourth article could be about Sprying up an existing Notes webform.

Continue reading

How to test your webpages in different versions of IE?

    I normally (like in: it depends on the project/wishes of the client/company standards) try to test in/support the following browsers:

  • Firefox 2.x (this is my default, because of supported standards and web development possibilities)
  • Internet Explorer 7
  • Internet Explorer 6
  • Safari (if I can plug in my Mac)

But if you’re a poor little self employed person like myself, you can’t afford to have x machines to make all these test possible.

If you installed IE7 on XP, it installs on top of IE6, so normally you can’t test for IE6 any longer without the need of a virtual/another machine.

But there’s a neat program that deals with this, so don’t worry!

Continue reading

Multiple hide-whens on a single line

Hide-whens work on a per-line or per-cell basis for showing/hiding content. But what if there are different chunks of content you want to show/hide on the same line, depending on the conditions? For example:

  • buttons on a form or page, some of them you want to hide sometimes;
  • different status images;
  • pieces of text.

Sure, you can find ways with table cells, computed text or computed images. But there’s another way, at least on the web. In the client, I thought I could get it to work in Notes 6.5 earlier, but when I tested in Notes 7 and 8 today, it won’t give me what I want.

Here’s an example situation: imagine I want to show these 3 images.

3 images all visible, no hide-whens applied

Continue reading

Expand/collapse sections – a clientside cross-browser solution

In this article I posted a solution to collapse/expand all sections on a Domino web page. However, there was one issue with it: it doesn’t work in Firefox, because Domino renders different html for sections in non-IE browsers.

In non-IE environments, expanding a section means that a request is send to the server to retrieve the section data. This is silly, because the code for this to happen clientside shouldn’t be that different from the IE javascript.

This post is about how to create collapse/expand sections that work in all browsers (as long as JavaScript is enabled). It’s an alternative for this solution, for people who are wanting to put a little more effort in it.

Let’s start with a demonstration before explanation.

Expand/collapse sections demo page

A little warning: the little twisty icons don’t show up in my demo page, because I cannot put the default Domino twisties where they should belong. This shouldn’t be a concern for you: if you copy/paste the source of that page in a Domino page and mark the page as html, this should work for you.

Continue reading

Expand/collapse all sections in a document on the web

UPDATE: if you’re ready to put a little more effort in the implementation, this cross-browser solution is more suitable.

A post on Notes.Net inspired me today: somebody asked how you can expand/collapse all sections in a document on the web with the click of a button.

This is the code I came up with. Throw it in the JS Header of the page and call it with a button (here I used 2 separate functions for the expand and collapse, but it can’t be that hard to make it one button if desired).

Continue reading

180 action bar icons in 25 categories

UPDATE 1: the icons are now bundled in a Notes database.

UPDATE 2: this is a reference card showing all the icons.

A while ago I was looking for pretty icons to use in my Notes action bars. I found the as excellent as cheap (0€/0$) Famfamfam icons from Mark James (apparently Famfamfam is a man).

While this library is of unknown quality, to me it has 2 limitations to make them usable in Notes:

  • The icons are in png format (not supported by Notes Designer) instead of gifs.
  • The library has 1000 icons, not all of them evenly useful. It makes it hard to find the right icon for your needs.

That’s why I decided to make a selection of the icons that appear the most useful to me and put them into different categories. Then I converted them to gifs while respecting the original transparency of the pngs.

This is an example of how they look like in a form:

Action bar icons for Lotus Notes
Continue reading

How to use SAP JCo in Domino as an alternative to the Lotus Connector for SAP

Years ago I had to connect to SAP from within a Notes web application. I used the Lotus Connector for SAP solutions for it, but I wasn’t really happy with it.

One reason was that the “in between” code was written by another person and I didn’t quite understand what was going on. It was more or less a black box and I was loosing days figuring out what went wrong if reading or writing data didn’t work.

Continue reading

Good looking charts from your data

UPDATE: I found a tool that produces even better looking results and included a demo database for it. Check out this article.

How many times somebody asked if it is possible to pour some results into a fancy looking chart? Ok, you could create it in some graphic tool or Microsoft Excel, then paste it into your document. But what if you want to use dynamic data, perhaps as a result of some inquiry? As a result of a form that was filled out?

What do you do? Use JavaScript for it? Let some gnomes draw it for you? An applet that takes minutes to load something your son of 5 could have done better?

Or do they look like this?

XML/SWF Chart example

Continue reading