.Net Discoveries

Working with Dual Monitors in .Net

Yougotiger — Thu, 08 May 2008 00:06:55 GMT

Prologue

It's been a while since I posted becuase until recently I haven't had the opportunity to do much coding lately. All the website updates I was working on got suspended and then outsourced so I haven't been doing much coding, mostly other projects. Recently though, I had reason to do some work with creating a web service and some other interesting things that I may do some articles on. One of those is today's article.

We recently purchased access to an XML data feed that gives us live data that we'd like to redisplay in a number of ways and a number of locations here. So I was tasked with the coding. I'll probably talk more about our re-purposing of the feed later in a subsequent article, but today I want to talk about something different, supporting dual monitors. The data we retrieve from the feed, we will be displaying in a number of locations. This is done quite often with a dual monitor computer. One display shows at the computer, and the other at a remote monitor, usually a flat panel TV.

Problem

Our problem, we found was that the application I wrote to display the information would maximize to the primary monitor, usually we want it to be displayed on the secondary monitor instead (the flat panel TV). Our challenge in this excercise is to get the application to run maximized on the secondary monitor. Additionally, not all locations that the application will be used at should necessarily go directly to the secondary monitor, so we want to let the user who launches the application select which monitor to display on.

Solution

Ok, let's begin by creating an application that exhibits the old, undesirable primary monitor oonly behavior first and then begin modifying the application to do what we need it to do. We don't need much for an application, so it'll be pretty simple. Begin by creating a new application. Modify the form so it maximizes by default, by changing the WindowState property of the form to Maximized. Also, we wanted to NOT have any window controls showing so also set the FormBorderStyle property to none. One last thing, we want to add one line of code to the form's click event handler as follows:

Application.Exit()

This will allow us to exit the program, otherwise since we don't have a title bar at the top, it would be rather difficult. Run the application and your form should fill the primary monitor. But how do we get it to go to the secondary monitor? We can't drag it there (no title bar remember?), moving the .exe file to the second monitor doesn't help either. We'll have to do it through code. So, add to your form a button and a checkbox, name the button btnDoIt, and the checkbox chkSecondMonitor. Change the checkbox's visible property to false. Now we're ready to start adding some code to move to the 2nd monitor. I found a post on Microsoft forums that walked me through some of the code to do what we want, you can read their information here.

First we want to make the checkbox show only if there are dual monitors. If not, then we don't want to show it. So we'll add some code to detect if there are multiple monitors. Let's create a new function that returns if there are dual monitors as follows:

Public Function DualMonitors() As Boolean
Dim myScreens() As Screen = Screen.AllScreens
If myScreens.Length > 1 Then Return True Else Return False
End Function

Basically, this retrieves an array of all the screens (monitors) available, checks if the array has more than one element (or more than one screen) and returns true if there are multiple. Now we need to add some code to the form_load event to make visible the checkbox if there are dual monitors. Add the following to form_load:

chkSecondMonitor.Visible = DualMonitors()

Now if you run your application, you'll see that our checkbox will display depending on availability of a 2nd monitor. However, we still need to make the form move when the button is clicked (if the checkbox is checked). To our btnDoIt_clicked event, add the following:

If chkSecondMonitor.Checked = True Then
Dim theScreen As Screen = Screen.AllScreens(1)
Me.Location = theScreen.Bounds.Location
End If

Basically, we're retrieving the specifics of the second screen (element 1 in the AllScreens array) and using its location to set our form's location. This in effect should move our form to the starting point of the 2nd monitor, the upper-left location will become our form's upper-left location.

Run your application, check the checkbox, click the button and see what happens. That's right, big fat nothing. Why? You can't move a form that is maximized. We need to either launch the application NOT maximized, or restore (un-maximize) the form, move it and then re-maximize it. So we'll modify our code to restore, move and maximize. Add the following BEFORE the Me.Location = line in our btnDoIt_Clicked event handler:

Me.WindowState = FormWindowState.Normal

and add it's corresponding maximize call after the Me.Location line:

Me.WindowState = FormWindowState.Maximized

Now run your application and observe it functioning. Check the box, click the button, the form restores, moves and the maximizes. Just as it should.

Epilogue

Realistically speaking, moving the application to the second monitor is very easy. There are other things that we could do using the screen object that we haven't touched on (centering the form on the second monitor etc). A point of distinction that may help if you want to do further development, the Bounds encompasss the entire screen (including the task bar), if you want working area (not including the task bar) you'll need to get the WorkingArea property instead of Bounds property.

VB.Net and GroupWise Soap Pt. 4 - HTML Messages

Yougotiger — Thu, 04 Oct 2007 23:54:52 GMT

Prologue

In my last few posts, I talked about accessing GroupWise via the SOAP services that they provide. In the last post, specifically we looked at sending and creating messages. I left with the promise that if I could get draft HTML messages to work that I'd post an article about it. Here it is.

Problem

Our problem, continued from the last post, was to figure out how to login and create a draft message in the user's Work in Progress folder that is a template of something the company uses currently in hard copy. In this article, we'll leverage all the stuff we've done up to this point and add the functionality to create an HTML draft message.

Solution

We will be building on the application that we started last time. If you haven't created the login procedures from Part 1, the folder listing subroutines from Part 2, and the creating/sending messages subroutines from Part 3, I suggest you do it now, we will need each of those pieces and will just be adding additional functionality.

When I started this post, this first line actually read, "We actually have very little to do do make this work." That's not correct, we have a bunch of stuff to do to get it to work. In addition to adding HTML messages to our functionality, we'll add functionality so that we can embed images into our HTML and they would display in our message. This added a decent amount of code to the project.

I ran into a lot of trouble with getting images to display and had a lot of discourse via the forum with Novell people about how to get it done. Finally my troubles came down to 2 things: 1) The image wasn't attaching as it should, it was only 10% of what it should be, and 2) you have to open the draft message in the mode it was "created" or intended to be in. #1 I will address a little later in this post when it makes more sense to do so. #2 however took me quite a long time to figure out, (actually I got a decent amount of help from an outside consultant who replied on the post). Basically, if you're default compose view is set to plain text, when you open a draft HTML item, it WON'T be opened as HTML. If you want to save an HTML message (or create one in our instance) as a draft and then reopen it as an HTML message, you need to set your default compose view to HTML. You can do this under Tools->Options->Environment->Views(tab), and select HTML as the 'Default Compose View & Font'. I learned this the hard way. One would think that the message itself would have enough identifying information in it that the program can figure out which to do... Nope. Or one would figure that if it opened plain text, that switching to HTML view would restore your original HTML message... Nope. Neither way displays your images and the other expanded features of HTML. Ok, enough complaining about that for now, lets get started.

First, lets modify our form. We only need to add one control, a checkbox named chkHtml with text of 'HTML Message'. Using this, we can create an HTML message (using HTML code) or a plain text message using the same textbox and createMessage code.

We have a number of things to create in the code so that this will work, and then we'll finally go back and modify our CreateMessage subroutine to include our HTML stuff.

If we look in the Novell documentation for creating an HTML message, we find "HTML messages are returned as the first attachment and are named text.htm. Any embedded images or associated files are also downloaded as attachments. These HTML associated files are all marked hidden." So, to create an HTML message we need to add an attachment with our HTML content (rather than create a message body... ok, that's not strictly true, it's recommended to enter a text version of your HTML as the message body in addition to your attachment). That means, we'll just add an attachment to our message body IF we check the chkHTML checkbox.

Further reading in the Novell documentation reveals: "Any embedded images or associated files are also downloaded as attachments. The HTML message body and accompanying files are grouped together. The text.htm file is first, followed by the other associated files. Each of the accompanying attachments has a contendId element." What this means is that we need to create an attachment for our HTML code, this should be the first attachment and it should be named text.htm. Also, we should create an attachment for each image that should be embedded in the message, and they should follow in order. Now, this only applies for images that are embedded INTO the email. This doesn't apply to images that are linked from outside sources (their src is a web address instead of a file path). In our example we'll only use images that are embedded into the email, we won't be processing image files that are linked from outside sources (in fact our code will probably break a linked image if we do it that way, more on that later).

Ok, now with that all said, we should have a basic understanding of what we need to create, so let's get started. Right off the bat, we want to create a new function that will return our HTML message and embedded images as an attachment array (HTML message first followed by the images). Let's create a function to do this and define it as follows:

Private Function ConvertHtmlMessageToAttachmentArray _
(ByVal sMessageToConvert As String) As GWWS.AttachmentItemInfo()

End Function

We are going break up all our pieces and return them as a GroupWise message AttachmentItemInfo array. Since we don't know right off the bat how many images we are going to add to our attachment array, we'll take the easy way out and rather than define an array, we'll create a generic list(of) our AttachmentItemInfo and just keep adding them. Then we can have our list output an array. So, we need to add some imports statements at the top of our code, so let's add them all now and we'll get to each in time. Add the following to the top of your code:

Imports System.Collections.Generic
Imports System.Text.RegularExpressions
Imports System.IO

The important one for our list(of) operations is the Collections.Generic. If you haven't played with list(of) yet, try it out it is VERY cool stuff. Anyhow, we're ready to begin defining some variables for our code. Let's start with our list(of) definition, add the following just inside your function declaration:

Dim theAttachments As New List(Of GWWS.AttachmentItemInfo)

This defines a list of AttachmentItemInfo objects for us, we'll use it later. If you remember we need to add our HTML message attachment first, and then our images as attachments. Now we COULD create our HTML attachment first, but we need to rename our image attachments and update the references to them in our HTML code. If we add our HTML attachment first, then the HTML attachment will have incorrect code and won't display our images as we would like. So what we'll do is add our images first, and THEN create our HTML attachment and insert it at the beginning of the list (LOVE GENERIC LISTS!).

To find all the instances of our images, we'll use the REGEX object and create a regular expression to find our image tags, extract the SRC and replace it with our updated src. (This is where the RegularExpressions import statement comes in). Now, not being an expert on regular expressions, it gets to be a little bit confusing getting everything just right, but I managed to get a regular expression that can find <img > and return everything from < to >. So we'll do is create two regex objects, and instantiate them with the correct regular expression to return what we need. Add the following just below our last variable declaration:

Dim regImage As New Regex("<img[^>]*>")
Dim regSrc As New Regex("src=" & Chr(34) & "[^>]*" & Chr(34))
Dim matchesImages As MatchCollection = regImage.Matches _
(sMessageToConvert)
Dim iCount as Integer = 0 'Counter variable

First we define a regex object to find all our image tags, and then we define one to find the src within the tag, the regex for the image tag is defined like this:

<img - Match the characters "<img" literally
[^>] - Match a single character NOT in the list (our list consists
of only the > character)
* - Match the proceeding between zero and unlimited times (meaning
match our [^>] block 0 to unlimited times)
> - Match ">" literally

So basically, we find "<img" followed by anything except ">" followed by ">". In the next to last line, we request our Regex object to find matches of this sequence and store them in a matches collection. We'll iterate through the collection later and use our other Regex object, it finds the src. Basically, the regSrc object is defined like this:

src= - Match "src=" literally
Chr(34) - adds the double quote (") to the src= statement, so we're actually finding src=" literally
[^>] - Match a single character NOT in the list (our list consists
of only the > character)
Chr(34) - adds the double quote to the END of our statement

So basically, we're looking for src=" literally (including the double quotes, we had to use the Chr(34) code because the way strings are handled we couldn't just type the double quotes), followed by anything EXCEPT a > followed by " (double quotes). This returns the entire src="xyz" string. (Confused yet?) (As an FYI, we will be replacing the content of the src attribute. If you have an src that links to an external website, it will be replaces. You'll need to add a check to differentiate between embedded images and linked images. I haven't done so.)

And finally we setup a counter variable, iCount. Ok, so we've setup our regex objects, and we've populated a collection with the strings that match our <img > tags. Now we want to cycle through the collection and do two things 1) create an attachment with our image, and 2) replace the src attribute with an updated src that reflects that the image is embedded in the email. So first thing, let's setup a For Each loop to loop through our image tags collection. Add the following:

For Each m As Match In matchesImages

Next

Now we want to extract the src portion, and use it to make an attachment out of the image. So what we'll do is create a couple of variables here inside the for each loop to do that. Add to your For Each loop, the following:

Dim matchSrc As Match = regSrc.Match(m.Value)
Dim sSrc As String = matchSrc.Value.Replace _
("src=", "").Replace(Chr(34), "")
Dim theAttachment As GWWS.AttachmentItemInfo = _
GetAttachment(sSrc, True)

What we're doing is creating a regex match object and matching the src phrase in our first img object. If you remember, this will return the entire src="xyz" phrase. We want just the file name for now, so the second variable, sSrc removes the src= and the double quotes from both ends, so we should just have a file path to an image and nothing more. Finally, we need to retrieve the image using the filename and make it an attachment. So we pass its filepath to the GetAttachment function we are about to create. This returns an AttachmentItemInfo object that we will use in a minute. There are some other things we need to do before our attachment is finished, but first we need the file to be an attachment. So let's create a new function GetAttachment and define it as follows:

Private Function GetAttachment(ByVal sFilePathAndName As String, _
Optional ByVal bHideAttachment As Boolean = False) _
As GWWS.AttachmentItemInfo

End Function

Our function will take a file path, retrieve the file located there, create an attachment and return the attachment. We also have a parameter to make the attachment hidden (as we should for html messages). (Bonus, you can use this function to create an attachment for ANYTHING, not just our images). Now we need to create a FileInfo object to hold our file (thus the System.IO import above). We also need to create an empty AttachmentItemInfo that we can build up. So add the following variables to your function:

Dim thefile As FileInfo = New FileInfo(sFilePathAndName)
Dim gwAttachItemInfo(0) As GWWS.AttachmentItemInfo

Now that we've got our file and our AttachmentItemInfo, we can get started with building up our attachment. Let's start with the easy stuff first:

gwAttachItemInfo(0) = New GWWS.AttachmentItemInfo

' Name
gwAttachItemInfo(0).name = thefile.Name

'Date
gwAttachItemInfo(0).date = _
      Format(thefile.CreationTimeUtc, "yyyy-MM-ddTHH:mm:ddZ")
gwAttachItemInfo(0).dateSpecified = True

'Hide attachment?
If bHideAttachment = True Then
   gwAttachItemInfo(0).hidden = True
   gwAttachItemInfo(0).hiddenSpecified = True
End If

Ok, that's the end of the EASY stuff, we instantiated the AttachmentItemInfo object, assigned a name, a date and marked it hidden, if requested. The rest of it gets a little more complicated. Now we need to import the binary data for the image file and add it to the data of the attachment. If you remember back at the very start of the post, you'll remember that I mentioned 2 things didn't work. Well this is #1 that didn't work. I originally started with the code from the example application included in the SDK for GroupWise Soap. Unfortunately the GetAttachment code in their example used a string array to receive the filestream. This resulted in only the information up to the first space being retrieved (in the case of my gif file, "GIF89Aw"). Nothing else. For the longest time I couldn't figure out what was going on. Once I finally realized that the code pretty much only works for text attachments, I had to find something different. Gotta love the internet and copy and paste inheritance though. I found some code, an made some heavy modifications that resulted in some code that DOES work to import the image's data to the AttachmentItemInfo's data property. Add the following:

'Data
Dim fsData As FileStream = thefile.OpenRead()
Dim gwByte(fsData.Length) As Byte
fsData.Read(gwByte, 0, fsData.Length)
fsData.Close()
gwAttachItemInfo(0).data = gwByte

Return gwAttachItemInfo(0)

First we create a FileStream object and assigned it to our image's file stream. Next, we create an array of bytes that is as long as our FileStream, and then read the FileStream into the byte array (starting at 0 and going to the end). Next, we close the FileStream object, add our byte array as the data property of the attachment. And finally, we return our AttachmentItemInfo object so we can continue to manipulate it.

Ok, so now we've created our attachment and returned it to our ConvertHtmlMessageToAttachmentArray (CHMTAA, I'll use this from now on, it's shorter...) function. Now we want to do some processing to the attachment so that it conforms to the standards we need it to. If you remember from the beginning, the Novell documentation states, "Each of the accompanying attachments has a contendId element.." This means that we need to assign an contentID to each attachment. This contentID needs to be unique (or it will pickup the first attachment with the correct contentID and use that for all pictures). We also need to replace the filepath in our HTML code with our new contentID so that it can be located. And we'll also set the contentType so that it can be treated as it should. Add the following inside your For Each loop, after the 'theAttachment' declaration:

theAttachment.contentId = iCount & "." & Path.GetFileName(sSrc)
theAttachment.contentType = "image/" & sSrc.Substring(sSrc.Length - 3)
sMessageToConvert = sMessageToConvert.Replace(matchSrc.Value, _
"src=" & Chr(34) & "cid:" & theAttachment.contentId & Chr(34))

First we assign a contentID. We can't just use the filename because we may have it in our message more than once. So we use a counter variable to make a differentiation. Next, we tell it that our content is an image of type X (whatever the extension is i.e. gif, jpg). Finally, we take our full HTML message and replace the src="xyz" statement with a custom one. This will specify that our src should use the contentID instead of a file path. We do that by adding 'cid:' before our contentId so our final src should look like src="cid:1.xyz.gif". Remember our previous src had the full filepath, now we shorten it to just the filename and the cid directive. Now we can add our attachment to our list of attachments and increment our counter. Add the following to finish out our For Each loop:

theAttachments.Add(theAttachment)
iCount += 1

Basically our For Each loop will cycle through each of the embedded images, create it as an attachment, pack it up as we like, modify our HTML to reflect the new src and then add the attachment to our attachment list. The last thing we need to do is use our modified HTML to create an attachment and create it as the first attachment in our message's attachments array. We're going to create another helper function, one that will take our HTML text, create an attachment with the correct name and return that. So jump out of our CHMTAA function and create a new function as follows:

Private Function ConvertHtmlMessageToAttachment _
(ByVal sMessageToConvert As String) As GWWS.AttachmentItemInfo

End Function

Our function will take the text of our HTML message, and return an AttachmentItemInfo object that we can add to our attachments list in our CHMTAA function. We need to create two objects to start with, an AttachmentItemInfo that we can pack up and send back, and an encoding object so we can easily convert our string to a byte array. Add the following variable declarations to your code:

Dim gwAttachmentItemInfo As New GWWS.AttachmentItemInfo
Dim encoding As System.Text.Encoding = System.Text.Encoding.UTF8

If you want to know more about the encoding object, you should check out Part 3 of this series. Now we just need to pack up our attachment object and send it back. Add the following code to your subroutine to finish it out:

gwAttachmentItemInfo.name = "text.htm"
gwAttachmentItemInfo.date = Format _
(Date.Now(), "yyyy-MM-ddTHH:mm:ddZ")
gwAttachmentItemInfo.dateSpecified = True
gwAttachmentItemInfo.data = encoding.GetBytes(sMessageToConvert)
gwAttachmentItemInfo.hidden = True
gwAttachmentItemInfo.contentType = "text/html"

Return gwAttachmentItemInfo

According to our Novell documentation: "HTML messages are returned as the first attachment and are named text.htm." So we name it accordingly. Next we assign a date and let it know that a date has been specified. Then we use our encoding object to convert our HTML text to a byte array and assign that as the attachment's data. We should also mark our attachment as hidden, and finally we should mark the attachment's contentType as being html (why it doesn't recognize that and open in the correct compose mode I don't know but...). And finally we return our object to the calling procedure.

Ok, let's go back to our CHMTAA function one last time and finish it out. We need to get our HTML attachment and add it as the first item in our list, and then return our list as an array to the CreateMessage subroutine. Easily done with the very cool generic list. Add the following two lines to your CHMTAA function AFTER the For Each loop:

theAttachments.Insert _
(0, ConvertHtmlMessageToAttachment(sMessageToConvert))
Return theAttachments.ToArray()

Using the built-in features or our list of attachments, we request an HTML attachment and insert it in the first position of the list. Next we call the ToArray() function of the list and return the resulting array.

OK, we've covered a lot of ground, but we're still not quite done. We still need to modify our CreateMessage subroutine so that it can handle the HTML. We will leave all the existing code (since it is recommended that we assign a text version of our HTML to the message body). All we need to do is add the attachment array. In your CreateMessage subroutine that we created in Part 3, add the following right after the gwMail.message = gwMessageParts statement:

If chkHtmlMessage.Checked = True Then
gwMail.attachments = _
ConvertHtmlMessageToAttachmentArray(txtMessage.Text)
End If

If our HTML checkbox is checked, then we simply pass the HTML text to our CHMTAA function and assign the attachment array that is returned to the attachments property of our message.

Go ahead and run your application and try to send and HTML message with and embedded image. Here's the HTML code that I used to create my HTML message for testing purposes:

<html>
   <head>
      <title></title>
   </head>
   <body>
     <table border=1>
        <tr><td><p align=center>Cell1</p></td></tr>
         <tr>
            <td>
               <p align=center>
                  <img src="C:\My Pictures\xyz.jpg" />
               </p>
            </td>
         </tr>
      </table>
      <img src="C:\My Pictures\abc.gif" />
      <br>
      <img src="C:\My Pictures\subfolder\abc.gif" />
   </body>
</html>

You'll notice that it has 3 images, xyz.jpg and two labeled abc.gif. In my test, the two abc.gif files had the same name but were different images and were in different folders. This is how I determined I needed to use the counter variable in the contentID creation above.

Hopefully your program will work as you want it to. If you're having difficulty with it open as a text file, then check out the beginning paragraph's lament about item #2.

Epilogue

Phew. We covered a bunch of stuff in this post. Now I can create my templates to my hearts content and have them added automatically to people's work in progress folders and they can have full formatting because I can use HTML code to do it (I wonder if I can embed JavaScript this way?) (NOTE: you can embed JavaScript this way, but GWclient doesn't process it).

One of the diagnostic tools that you can use to find problems (and trust me I had lots of problems I had to find) is a trace file. This will give you the xml that the soap functionality sent to the server and the response that it sent back. I had a heck of time getting tracing to work, so I may write a part 5 that goes over what I did to get it to work, however, this concludes what we set out to do. We created a draft item, put it in the users work in progress folder and even added HTML functionality. Go take a well earned break.

As a side note, I'm trying beef up on my bloggins skills, so...

I'm evaluating a multi-media course on blogging from the folks at Simpleology. For a while, they're letting you snag it for free if you post about it on your blog.

It covers:

The best blogging techniques.
How to get traffic to your blog.
How to turn your blog into money.

I'll let you know what I think once I've had a chance to check it out. Meanwhile, go grab yours while it's still free.

VB.Net and GroupWise Soap Pt. 3 - Creating a Message

Yougotiger — Tue, 04 Sep 2007 23:53:37 GMT

Prologue

In my last post, I talked about accessing GroupWise via the SOAP services that they provide. Specifically, we looked at getting a folder list. In this post I want to expand upon the application that we started and add some more functionality.

Problem

Our problem, continued from the last post, was to figure out how to login and create a draft message in the user's Work in Progress folder that is a template of something the company uses currently in hard copy. In this article, I'm going to look specifically at how to create a message as a draft, and place it in a specific folder. Technically this will meet the requirements I set forth in the first post, but (and there's always a but isn't there?), I want to create an HTML draft message. The HTML template will not be covered in this post, and for that matter I haven't gotten it to work yet, so if anyone has any suggestions, please let me know.

Solution

We will be building on the application that we started last time. If you haven't created the login procedures from Part 1 and the folder listing subroutines from Part 2, I suggest you do it now, we will need to login and we need to be able to get a folder's ID.

We actually have very little in the way of preparation. We simply need to add some controls so that we can create a message. We won't create any new helper functions yet. Let's add two more buttons, name one btnSendMessage, set the text to 'Send Message' and name the other btnCreateMessage and set it's text to 'Create Message'. For both buttons, set their enabled property to false. Next create two text boxes, txtSubject and txtTo and create one multiline text box and name it txtMessage (you may want to add labels to go with them).

One last thing to do is to add our new buttons to the ToggleButtons() function. Just below btnListFolders.Enabled = True, add the following:

btnSendMessage.Enabled = True
btnCreateMessage.Enabled = True

and add the opposite just below btnListFolders.Enabled = False, add the following:

btnSendMessage.Enabled = False
btnCreateMessage.Enabled = False

Basically, this just ensures that we can't attempt to send or create a message on the server without being logged in first.

As you can guess, there are two methods in GroupWise SOAP that we can use to create messages. I am choosing to show both, because they create things a little bit different. Let's start with SENDING a message first, then we'll take a short look at creating one since it is very similar. Start by creating a new subroutine for sending a message:

Public Sub SendMessage()

End Sub

Hook up your btnSendMessage button's click event to this subroutine. Now we want to get started with our message. To begin with, we'll need some specific objects such as a sendItemRequest and a sendItemResponse. We'll also need to create a Mail item to send as a parameter in our request. Define them as follows in your subroutine:

Dim gwMail As New GWWS.Mail
Dim gwSendReq As New GWWS.sendItemRequest
Dim gwSendResp As New GWWS.sendItemResponse

This creates and instantiates all three of our necessary pieces. The sendItemRequest expects us to pass in an item (an appointment, or a mail item for example) and then it will process the item and return a response.

Now we're ready to begin loading our mail item with our settings. Let's start with the easy stuff first.:

gwMail.subject = txtSubject.Text

Ok, that's the end of the EASY stuff, the rest of it gets a little more complicated. It can't be as easy as just packing up the information and sending it, NOOO, we need to convert things to arrays and add the arrays. Some are easier than others. The first one we'll tackle is one of the more difficult ones to figure out but once you figure it out, it isn't really all that bad. Lets start by creating a new helper function, define it as follows:

Private Function ConvertStringToMessagePart(ByVal sStringToConvert _
As String) As GWWS.MessagePart

End Function

We cannot just assign the text of our message box to the message, we actually need to encode it as an array of bytes, add it to a MessagePart object, and then add the MessagePart object to the MessageParts array. This function will be used to bring in our message text, convert it into a byte array, add it to a MessagePart and then return the finished MessagePart. First we need to create an encoding object and then create the MessagePart to return. Add the following to your subroutine:

Dim encoding As System.Text.Encoding = System.Text.Encoding.UTF8
Dim gwMessagePart As New GWWS.MessagePart

First we create an encoding object. Then we assign it UTF8 encoding. This will encode our message into the ASCII encoding it's expected to be in. Second we create a new MessagePart object. Now we need to load it up with the byte array containing our message text and return it. Add the following:

gwMessagePart.Value = encoding.GetBytes(sStringToConvert)
gwMessagePart.length = 0
Return gwMessagePart

We use our encoding object to return an array of bytes by using the GetBytes function. Basically, we return an array of ASCII values, one element for each character of the string we're converting. This array is then assigned to the MessagePart we created. Now it might seem a little strange to set the length of the MessagePart to 0, and you'd be right, but apparently there is a bug in the server code, so if you set it manually, your message get's cut short. I believe the documentation online instructs you to set it manually, but it doesn't work, you'll get your message, but about 1/3 of your message will be missing. So we set it to 0 and the server will do the calculation itself (easier anyhow...). Finally we return the MessagePart we just created.

Now we're ready to use helper function in our main function. Add the following to your SendMessage subroutine code:

Dim gwMessageParts(0) As GWWS.MessagePart
gwMessageParts(0) = ConvertStringToMessagePart(txtMessage.Text)
gwMail.message = gwMessageParts

We start by creating an array of MessageParts with one element (Honestly, I'm not sure the benefit of having multiple message parts, anyone out there know?). Next we assign the encoded message text from the form, returned as a MessagePart to the first element of the array. Finally, we assign our MessageParts array to the message property of our mail item. Next we'll want to address our message so it can go into somebody's folder. We need to create 2 objects for addressing, one for the distribution list and one an array for the recipients. Add the following to your code:

Dim gwDistribution As New GWWS.Distribution
Dim gwRecipients(0) As GWWS.Recipient

In this example, we've only allowed for one recipient, thus we created a recipients array with a single element. Now we want to create a single recipient, load it up and add all the pieces together. Add the following lines to your code:

Dim gwRecipient As New GWWS.Recipient
gwRecipient.email = txtTo.Text
gwRecipient.distType = GWWS.DistributionType.TO
gwRecipients(0) = gwRecipient
gwDistribution.recipients = gwRecipients
gwMail.distribution = gwDistribution

First we create a new recipient object, then we load its properties with the email address and the distribution type. Next, we add our recipient to the recipients array (ok, this array makes sense to me, you may easily have more than one recipient...). Finally we add the recipient array to the distribution and assign our distribution to the mail item. (Phew..)

Technically we are now ready to send the item, we just need to add some code to do the actual sending but, our item is ready for delivery as it is. So let's add that code and then go back and add in some options. Add the following code:

gwSendReq.item = gwMail
gwSendResp = wsGWBinding.sendItemRequest(gwSendReq)
If gwSendResp.status.code = 0 Then
ReportStuff("Send Mail Status: Success.")
Else
ReportStuff("Send Mail Status: Failure, Code: " & gwSendResp.status.code) End If

So we assign our mail item to the item property of the sendItemRquest object we created, and then use the sendItemReqeust to send our item. We capture the returned sendItemResponse and parse it to see if we succeeded in sending our message and report. Run your program and test it. Send a message twice, once to yourself and once to a co-worker. It should successfully send a message to both yourself and the co-worker. Where do the messages end up? Both messages are successfully sent to the recipient's inbox.

Ok, now we want to add some options. We wanted to do two things that we haven't done yet. We wanted to create the item as a draft, and we wanted to create it in the 'Work In Progress' folder. So let's start by making it draft, perhaps that will automatically put it in the Work In Progress folder? (no such luck, but you can think that for a moment if you want to...). Add the following code to specify that we have a draft message and put it after our recipient section but before our sending section:

Dim gwItemSource As GWWS.ItemSource
gwItemSource = GWWS.ItemSource.draft
gwMail.source = gwItemSource
gwMail.sourceSpecified = True

We create an ItemSource object and then assign it to be a draft message. Next we add it to the source property of our mail item and then let the item know that ItemSource is specified.

Go ahead and run your application again try to send it the same two ways (once with your email address as the recipient, and then try it with a co-worker's as the recipient). What happens? Where does the message end up? In both instances, the message will show up as a draft in YOUR mailbox. There are two things to note here. 1) Even though you specified a co-worker as the recipient, the message was sent to YOUR inbox, and 2) labeling the item as draft did NOT put it into the 'Work In Progress' folder automatically. Ok so why does the co-worker's email send correctly before but end up in your inbox now? Well, that's because it is a draft, you can't SEND a draft to someone else, you have to complete it (thus your co-worker's email in your inbox). So it shows up in your inbox. So why the inbox? Well, that's related to #2 and we'll talk about that a little more in a second. First, let's try to specify a folder to create the new item in. Add the directly after the ItemSource section:

Dim gwContainerRef(0) As GWWS.ContainerRef
gwContainerRef(0) = New GWWS.ContainerRef()
gwContainerRef(0).Value = GetFolderIDByName("Work In Progress")
gwMail.container = gwContainerRef

By now you should be getting used to the array concept. We create a container reference object, as a single element array of ContainerRef. Then we initialize the element with a concrete object. Then we access the value property and assign in the ID of the folder we want to create the message in (Work in Progress) using the helper function we created in the last exercise (Part 2). Finally, we assign our containerRef array to the mail item's container property. Run it again and just send one to yourself this time. What happens? The message still ends up in the inbox. Why? The simple answer is this, you SENT it. If you send an email, you cannot specify where the recipient will receive it. Even though you sent it to yourself, you SENT it and because it was SENT to you it bypasses the container information and DELIVERS it to the inbox (as opposed to creating it).

So how do we create a message in a folder? Well there is another method for that. I alluded to it before. We CREATE an item rather than sending, and then we can specify where it goes. Realistically, all the code is pretty much the same with the exception that we need to change all our sentItem stuff (req, response, etc.) to CREATE (i.e. copy and paste, then change). Rather than try to specify all the lines that need changed, I'll just post the final CreateMessage subroutine code. It looks like this:

Public Sub CreateMessage()
   Dim gwMail As New GWWS.Mail
   Dim gwDistribution As New GWWS.Distribution
   Dim gwMessageParts(0) As GWWS.MessagePart
   Dim gwCreateReq As New GWWS.createItemRequest
   Dim gwCreateResp As New GWWS.createItemResponse

   gwMail.subject = txtSubject.Text
   gwMessageParts(0) = ConvertStringToMessagePart(txtMessage.Text)
   gwMail.message = gwMessageParts

   Dim gwRecipients(0) As GWWS.Recipient
   Dim gwRecipient As New GWWS.Recipient
   gwRecipient.email = txtTo.Text
   gwRecipient.distType = GWWS.DistributionType.TO
   gwRecipients(0) = gwRecipient
   gwDistribution.recipients = gwRecipients
   gwMail.distribution = gwDistribution

   Dim gwItemSource As GWWS.ItemSource
   gwItemSource = GWWS.ItemSource.draft
   gwMail.source = gwItemSource
   gwMail.sourceSpecified = True

   Dim gwContainerRef(0) As GWWS.ContainerRef
   gwContainerRef(0) = New GWWS.ContainerRef()
   gwContainerRef(0).Value = GetFolderIDByName("Work In Progress")
   gwMail.container = gwContainerRef

   gwCreateReq.item = gwMail
   gwCreateResp = wsGWBinding.createItemRequest(gwCreateReq)
   If gwCreateResp.status.code = 0 Then
      ReportStuff("Create Mail Status: Success.")
   Else
      ReportStuff("Create Mail Status: Failure, Code: " & _
         gwCreateResp.status.code)
   End If
End Sub

Assign the click event of your btnCreateMessage to this subroutine. Run your program and rather than send a message, create a message. Create one to yourself and one to your co-worker. What happens? Where does the message end up? Yes, both are created as draft message and both end up in YOUR 'Work In Progress' folder (remember that draft thing). Even if you take the draft and folder section out of the subroutine, we cannot CREATE a message in somebody else's account. So if you comment out the Draft and Folder portion above and send to a co-worker, guess what? A new message appears in YOUR inbox.

As an FYI, creating a message actually bypasses the Rules that you have setup (under Tools->Rules). This is because the item is CREATED in the folder, rather than sent. There isn't a rule event to act on CREATED items, just RECEIVED Items.

Epilogue

We've come a long way towards our goal, we've created a message, created it as a draft and finally, we've got it to go into the folder that we specify. Like I said earlier, technically we've satisfied the requirements set forth in Part 1, but I'd like to make the draft mail item an HTML message. I'd like to say that I'll show you next time how to create an HTML draft message, but unfortunately, it hasn't been working for me. When I figure it out, there'll be a Part 4, I just don't know when that'll be.

VB.Net and GroupWise Soap Pt. 2 - Getting a Folder List

Yougotiger — Wed, 22 Aug 2007 21:10:23 GMT

Prologue

In my last post, I talked about accessing GroupWise via the SOAP services that they provide. Specifically, we looked at logging in. In this post we want to expand upon the application that we started and add some more functionality.

Problem

Our problem, continued from the last post was to figure out how to login and create a draft message in the user's Work in Progress folder that is a template of something the company uses currently in hard copy. In this article, I'm going to look specifically at how to do some work with the folders. This is necessary so that we can place our message in the correct folder once we create the draft message. I plan to do future articles on some of the other information that I find and that I figure out.

Solution

We will be building on the application that we started last time. If you haven't created the login procedures from Part 1, I suggest you do it now, we will need to login.

To start, let's add the controls to the form that we will use in this exercise. We need to add another button, name it btnListFolders, set the text to 'List Folders' and finally, set enabled to false (yes, false). Next create a multiline text box and name it txtResults (you may want to add a label to go with it.

Now let's also add a couple of helper functions that we can reuse them over and over. We want to add two functions, one called ReportStuff() and one called ToggleButtons() the are defined as:

Private Sub ReportStuff(ByVal sCurrentStatus As String)
   txtResults.Text &= sCurrentStatus & vbCrLf
End Sub

Private Sub ToggleButtons(ByVal bLoggedIn As Boolean)
   If bLoggedIn = True Then
      btnListFolders.Enabled = True
      tslblCurrentStatus.Text = "Logged In..."
   Else
      btnListFolders.Enabled = False
      tslblCurrentStatus.Text = "Logged Out"
   End If
End Sub

Basically, we just pass stuff to our report stuff so that we can track what's happening. It will print what we pass it to the text box. The ToggleButtons subroutine we'll call so that we can enable and disable buttons and give feedback regarding our login status.

We'll make some minor changes to our login and logout functions to incorporate our new helper functions. In LoginUser() add the following line just before the 'If 0 = resp.status.code then' line:

ReportStuff("Login status: " & resp.status.code.ToString())

and as the last line in the if then block we were just referencing, add the following line:

ToggleButtons(True)

Finally, add the following line inside our if then block in LogoutUser():

ToggleButtons(False)

Ok, now we're ready to add our folder functionality. We're going to look at two different pieces of functionality regarding folders, first, listing them all, and second, getting the ID of a particular folder. We'll create our listing function, then reuse it's code to create the other.

To get started, create a new subroutine, and name it GetFolders(). As is the pattern with GroupWise Soap objects, we'll create a request object, then pass it to a function and get back a response object. So let's start with our variables. Add the following to the top of your subroutine:

Dim flReq As New GWWS.getFolderListRequest()
Dim flResp As GWWS.getFolderListResponse

Now that we've created our objects, let's start populating them. It doesn't really take much to get a folder list back. Add the following to our subroutine:

flReq.recurse = True
flReq.parent = "folders"

flResp = wsGWBinding.getFolderListRequest(flReq)

Our settings simply tell the server we want to recurse and return all the folders, not just the direct children folders, and then we have to specify where to start by setting the parent folder. We want to start at the "folders" folder. That will give us ALL the folders, including the home folder. We then make the request to the server and get back a response.

Now we need to go through the folder list and list the folders. We'll just have the list pumped out to the txtResults box using our new ReportStuff function. First we need to check that our response wasn't somehow messed up and that we have a valid folder response object. Add a bit of reporting and an If Then as follows:

ReportStuff("Folders:")
If IsNothing(flResp.folders) = False Then

end If

This just checks that we aren't working with an empty object. Next, we'll add some additional reporting and set up a loop to go through our response object. Add the following:

ReportStuff("Listing the " & flResp.folders.Length & " folders found:")
For Each theFolder As GWWS.Folder In flResp.folders

Next

Finally, we'll create a basic For Each loop and loop through all the folder objects in the folders collection. All that is left is for us to do our reporting for each folder we parse. Add the following reporting line:

ReportStuff(theFolder.name & " " & theFolder.description & _
" " & theFolder.id)

Call your GetFolders subroutine from your btnListFolders click event. We need to make sure that we don't check our folder list unless we're logged in, and that's where the toggle buttons comes in. We've already set the application to not allow you to click the List Folders button if we are not logged in. Run your application, login and then click the List Folders button. You should get a list of the folder names, and ID's. "But we asked for the folder description," you say. Sure, but most, if not all, of the folders don't have a description so it shows blank, and then we have a horribly cryptic folder ID at the end. This ID is what we need if we want to create an email in a specific folder. Passing the name of the folder doesn't work, we need to pass the folder ID.

With our GetFolders() sub working correctly, let's look at getting the ID for a specific folder. The Function to return the ID of a specified folder is basically the same as the one we created above, but without most of the reporting tied in. We'll create a new Function as follows:

Private Function GetFolderIDByName(ByVal folderName As String) As String

End Function

Now copy and paste our GetFolders() subroutine, and remove our reporting elements. We will also remove the existing code inside our For Each block. We'll replace it with an If Then that compares the folder's name with what we pass in. If they match, we return the folder's ID (not the name). Add the following lines in our For Each block:

If theFolder.name.ToLower() = folderName.ToLower() Then
Return theFolder.id
End If

Now we just need to hook it up. Add a line to your btnListFolder's click event (or replace your line that calls GetFolders()) as follows:

ReportStuff(GetFolderIDByName("Work In Progress"))

Run your app, Login and press your List Folders button. We get the ID of the Work in Progress folder.

Epilogue

Using the web services for GroupWise isn't exactly intuitive. Once you get an understanding of the Request/Response model it gets much easier to use. Documentation could still be a little better letting us know what each of the properties and methods are and do specifically, but we work with what we have. In the next part I think we'll look at actually creating a message now that we can reference the folders by ID.

VB.Net and GroupWise Soap Pt. 1 - Getting Logged In

Yougotiger — Thu, 09 Aug 2007 17:22:01 GMT

Prologue

One of the things that Microsoft does really well is cater to their developers. If you don't know how to do something, Microsoft is pretty decent about giving you ample sample code to learn it. And if that's not comprehensible (sometimes it's kind of cryptic), then somebody has probably written about it somewhere and it's just a matter of finding that someone's article. I can't say the same about Novell. Now don't get me wrong, I'm not anti-Novell, all our file servers are Novell and our email system is Novell GroupWise, which I really like, but they don't make it easy for their developers like Microsoft does. GroupWise's latest version introduced some web services that you can tap into and use to do all the things that their GW client can do (ok, not quite all yet). But documentation leaves much to be desired and there is VERY little sample code out there to help you figure it out. I had a request from one of our users for creating templates in GroupWise, and figured that I could use the web services to create some templates in the user's draft (work in progress) folder.

I know that I'm possibly limiting the readership of this particular article series, but I figured since the information isn't out there, I'd share what I've found and hopefully it will help someone else like me.

Problem

Figure out how to login and create a draft message in the user's Work in Progress folder that is a template of something the company uses currently in hard copy. In this article, I'm going to look specifically at how to login to the GroupWise system. I plan to do future articles on some of the other information that I find and that I figure out.

Solution

Ok, to get started, create a VB.Net application. I would guess that we could do this almost as easily with ASP.Net, but for the sake of ease (not having to preserve state), let's just use a windows app. On the form, add 4 Labels, 4 TextBoxes, 2 Buttons and a StatusStrip. On the StatusStrip, add a label and name it lblCurrentStatus. The rest of the controls, configure as follows:

Control Type	Name The Control...	and Set Text To...
Label	lblPOAAddress	Post Office Agent Address:
Label	lblPOAPort	Post Office Agent Port:
Label	lblUsername	Username:
Label	lblPassword	Password:
TextBox	txtPOAAddress
TextBox	txtPOAPort
TextBox	txtUsername
TextBox	txtPassword
Button	btnLogin	Login
Button	btnLogout	Logout

Ok, now we also need to have the Novell GroupWise Services configured on the server, and we'll need to download the Novell Development Kit for GW Soap. We also need to find out the IP address or DNS address for the Post Office Agent (POA), and the port number it listens on (typically 7191). Once you download and install the SDK, you can add a web reference and point it to the WSDL file on your hard drive. Name this Web Reference GWWS.

Ok, now we're ready to get into some code. Open up the code view and let's add two global variables:

Private bLoggedIn As Boolean = False
Private wsGWBinding As GWWS.GroupWiseBinding

We want to track if our application is logged in currently. If it isn't, then we'll have difficulty in future creating messages and other stuff (I tried). We also need to have a GroupWiseBinding object, this inherits the Soap protocols and handles all the back and forth with the server. These will need to remain populated until we release them so we'll create them as globals.

Now lets create a subroutine to log the user in. Create a sub as follow:

Public Sub LoginUser()

End Sub

We need to create some objects to work with as we create our login request. So add the following variables:

Dim req As New GWWS.loginRequest()
Dim resp As GWWS.loginResponse
Dim pText As GWWS.PlainText = New GWWS.PlainText()

First we create a request object, we create it using new so that we can assign values to it. This we pack up with our settings and send to the server using our wsGWBinding object later. Then we create a loginResponse object to receive the response from the server. We also need a plainText authentication object. This allows us to pass username and password to the server in plain text for login. (NOTE: perhaps in a later article I'll do a not plain text one... when I figure it out...)

Now we need to start configuring our objects so that they can be used. So add the following:

wsGWBinding = New GWWS.GroupWiseBinding()
wsGWBinding.Url = "http://" & txtPOAAddress.Text & ":" & txtPOAPort.Text & "/soap"
pText.username = txtUserName.Text
pText.password = txtPassword.Text
req.auth = pText

First we initialize the GroupWiseBinding object so that we can assign stuff to it. Then we start by compiling the url to the web service and adding that to our GroupWiseBinding object. Next, we get the credentials and add them to the plainText object and then assign the plainText object to the request's auth property. Now we've got what we need to try to login, so we'll make the request. Add the following:

resp = wsGWBinding.loginRequest(req)

Here we make the loginRequest and pass in the loginRequest object that contains all our settings. We get back a login response object with the details of what happened. Now we need to parse the response and find out what happened. If login was successful, the response's status.code should be 0, so we'll take some action based on successful login, add the following:

If 0 = resp.status.code Then
   wsGWBinding.session = New GWWS.string() 'initialize session object
   wsGWBinding.session.Text = New String() {resp.session} 'load session obj
   bLoggedIn = True
   lblCurrentStatus.Text = "Logged In..."
End If

First we check to see if current status is logged in, and if so, then we'll store some of the information we go back, and do so me "housekeeping". First we'll store the session's ID, that way we can use it in the future when we want to create a message. We store that in our GroupWiseBinding object and then it'll be passed when we use our GroupWiseBinding object again. This is where stuff get's kind of tricky. We need to create and assign a new string object to the session, then set the session's text property using a string array. The second line creates a new string array and assigns our response object's session to this (since session is a string). Then finally, we note that we are currently logged in, and alert the user that we are logged in. Viola, logged in.

Now for logging out. This is the easier part, we'll create another subroutine for logging out as follows:

Public Sub LogoutUser()

end sub

We also need a variable to receive the logout response:

Dim resp as GWWS.logoutResponse

Now we need to make our actual logout request, so add:

resp = wsGWBinding.logoutRequest(New GWWS.logoutRequest)

This will send our request to the server and we will get a logout response in return. From here, based on success or failure, we'll take some action. Again 0 indicates success so add:

If 0 = resp.status.code Then
   bLoggedIn = False
   wsGWBinding = Nothing
   lblCurrentStatus.Text = "Logged Out"
End If

If logout was successful, we record that we're logged out, alert the user, and then nuke our GroupWiseBinding object so that it holds no current session information. That's it.

Run your app, enter your POA address and port, then put in your username and password. Click login and see it logs in. It should. Then click the Logout and see if it logs out correctly.

Epilogue

Using the web services for GroupWise isn't exactly intuitive, perhaps it is under a different programming model than I'm used to with .Net, but once you figure it out it can be done. Next time we'll look at adding some code to return a folder list from the server after we login.

More Page Layout Snafu's or More Stupid CSS Tricks

Yougotiger — Thu, 26 Jul 2007 17:12:11 GMT

Prologue

I wanted to document a couple new CSS snafu's that I found in the midst of my work. If you've ever used CSS, you'll realize what a pain it can get to be if you have a lot of nested stuff. The website redesign I was (the company is opting to change their name, logo, color scheme, the works.. so I stopped redesigning) contains a multitude of nested elements. I've found it quite frustrating trying to get the CSS to display the same in both IE and in Firefox (and for that matter, IE6 and IE7 don't always agree). In fact, most of the snafu's here were found as a result of attempting to achieve cross-browser compliance. So with no further ado, here are some snafu's and how to work around them.

Problem

Creating and working with CSS in Visual Studio is getting easier, it tests well in IE, but then if you turn around and test it in Firefox, it doesn't work. Most of what I'm sharing worked in one but not the other, so I had to find a work around for the CSS so it would work in both. (as a side note, I can't wait for VS '08 and their improved CSS features!)

Solution

We'll actually build on one file for most of this post so let's get started...

How Do I Horizontally Center in Firefox?

Ok for this one, create an HTML file and add the following to the header section:

<style type="text/css">
   body
   {
   }
   .header
   {
      border: solid 1px red;
      height: 100px;
      width: 607px;
   }
</style>

Ok, now add a DIV section to the body as follows:

<div class="header">I want this section centered</div>

Now bring it up in both IE and FireFox. Notice that our red DIV section is NOT centered. How do we go about centering it horizontally? Let's try the wrong way first. Add the following to your body section of the CSS:

text-align: center;

Now refresh IE an see what happens. IE works like a charm. Notice that all text has been centered, AND the DIV as well. Now refresh it in FireFox. What happens? All the text centers, but because the DIV isn't text, it doesn't center. So how to do it? It took me a while, but I found an article that told me how to do it. There is apparently something in the specifications for CSS that says margins should fill up all the remaining space in the enclosing element (in this case, the body is the enclosing element to our DIV). So in the DIV's style section, add another line as follows:

margin: auto;

Now refresh both IE and FireFox. Works in both. What about the text-align:center in the body? Well, you can leave it if you want because older IE versions will use the text-align. That is if you are ok with the text in your body being centered. This margin: auto method can also center other elements in your code. Let's say you wanted to center a table in a span, how do you horizontally center, again use the margin: auto on your table and it'll center.

Set a Height, But Let it Grow

Another issue that I ran into was that I created a section, and it needed to be AT LEAST a certain height, but also needed to allow it to automatically grow longer if there were more text in it. Till this project, I'd done nearly all my development in IE and it works by default there, but FireFox isn't quite as straight forward. Let's continue with our current file and keep adding to it. In your DIV section, add a span section and some text as follows:

<span class="leftCol">
   I want to<br />
   put a lot of<br />
   text here<br />
   so that it <br />
   will go <br />
   down past<br />
   the bottom <br />
   of the <br />
   enclosing <br />
   container.
</span>

(yes, leave the unused class designation for now, we'll use it later) Ok, now refresh both IE and FireFox. What happens? Well, in IE your DIV grows but FireFox, it just stays the same and the text flows right out of it. How to fix it? Well, let's try a couple of things that are a little less effective on our way to the right answer. First, lets specify that we want the height to adjust automatically. So at the end of your .header style definition, add:

height: auto;

and refresh in both browsers. Now they're both appear to be working, but take the text out of your span, save and refresh. It's not really working as desired, it doesn't retain it's minimum height. Since we have two height: statements in our definition, the last one wins. So how do we maintain a minimum height, but let it grow? There is a min-height: CSS attribute that we can use, so replace your height: auto with it as follows:

min-height: 100px;

Now let's see what happens when we refresh. IE's working fine, but FireFox still isn't growing. Pretty much we've just come back to where we were before we started. Ok, lets think it through just a little from the specifications point of view (I don't know em, I just read about em). We need a minimum height, but min-height doesn't work in IE, it does in FireFox though. If we specify to do auto with the height, then both browsers will shrink too small. If I put a height in, IE will grow but FireFox won't. How can we combine all three to make it work? We start with a minimum height. Then we tell FireFox that we want the height to be auto. We can just tell IE a height and it'll take care of itself. Ok, so take out the stuff below your min-height statement, add the following 2 lines:

height: auto !important;
height: 100px;

Now refresh both and see what happens, now take the text out of your span and see what happens. Both are working as we want. How did we do it? It works like this. Since CSS is read from the top down, whatever is last is what's used. So we tell the browser that we need a min-height, Firefox complies, IE will ignore it. Then we tell the browser, that we want the height to be automatic (but with a minimum from the min-height line) AND that we want it to be the most important height statement (using the !important statement). FireFox says, ok, min-height and it's important to be auto height. IE, ignores the !important statement and the min-height statement and just sees the next line and sets its height. FireFox downplays the next line because of the !important statement, and all's well (note: IE7 seems to use the min-height statement, but IE6 and below will disregard it).

Basically, we're getting IE6 to do it's default behavior, the only line that really gets used is the height:auto. With Firefox, we're telling it to set a min-height, then telling it a priority on height statements. Simple and elegent, you just have to know how to do it. There are some pretty complex CSS hacks to get around this out there, but I liked this one for a number of reasons. I read the article and it made sense to me to use 3 lines of CSS rather than a lot of other html elements to force what we need. Anyhow, its clean and it works.

My Float's Sticking Out

I used floats in my layout so that I could get the HTML code to put certain text ahead of others (for search engine optimization purposes), but display the content in a different order (see my previous post's section on using a float to change the html text flow). Well, then I ran into the issue that my floated section didn't cause the floated element's containing element to automatically grow and encapsulate the entire floated element. In our example, we'll continue with what we have. The header DIV may represent a background to a section, and the SPAN inside the text that may be inside it (in real life I had a DIV as a background (with color) and the SPANs inside with text, that were floated as I wanted them. The Div should grow with the text so that the background extended to the end of the text.). But in FireFox, the background didn't extend down past the end of the floated internal element.

To begin, we need to add some stuff to our page. Add two more spans inside our DIV as follows:

<span class="midCol">b</span>
<span class="rightCol">c</span>

Now, we also need to add style definitions for our column spans, so add the following to the style section:

.leftCol
{
   width: 200px;
   border: solid 1px green;
   float: right;
   display: inline-block;
   position: relative;
}
.rightCol
{
   width: 200px;
   border: solid 1px green;
   float: left;
   display: inline-block;
   position: relative;
}
.midCol
{
   width: 200px;
   border: solid 1px green;
   float: right;
   display: inline-block;
   position: relative;
}

Now, refresh and see what I'm talking about, IE actually has our red DIV section enlarge to fit the floated SPAN, but FireFox does not. What's the deal? Well, actually Firefox is doing it the way it's supposed to work. If it didn't work this way, then things wouldn't wrap around stuff like pictures like they should (again I read it in an article). The question though, is how to fix it. The simple solution lies in adding something in the flow AFTER the floated element that isn't floating, something that the parent element WILL have to wrap around. So add another DIV after all our SPANS as follows:

<div class="floatHack"></div>

and add another section to our style section as follows:

.floatHack
{
}

Notice that the floatHack DIV is empty, it doesn't need any content, we just need something invisible to force the flow differently. So what do we do to fix the problem. Well, we need an item that ISN'T affected BY the floats to be placed AFTER the floats. To do that, we use the clear: CSS attribute. We can have it clear right, left or both floats. In our example, it's the right float that's causing the problem, so we can choose either right or both, I'll choose both. Add the following to your .floatHack style definition:

clear: both;

Now refresh and see what happens. Viola, our problem fixed. As a side note, you can use any block level element to do this hack. Now, let me give you a little side note of warning, though. Add the following to our leftCol style definition and see what happens:

top: 40px;

Refresh and see what happens, our container doesn't grow to fit. What happened? Well, we're moving our float out of it's position. Workaround? I don't have one.

Turn Off Double Spacing in an HTML List

Ok one more then I'll call it quits. Have you ever noticed that when you create a list in HTML using the UL tag, that it puts a space between the header and the first item (and one after the list for that matter)? How do we get rid of that unsightly annoyance?

This exercise doesn't continue where we left off, so you may want to create a new html file for it. Create a style section, but don't put any definitions in it. Then in the body of the HTML, create a UL as follows:

My unordered list
<ul>
   <li>first item</li>
   <li>second item</li>
   <li>etc.</li>
</ul>
The line after

Pretty standard, and when we render it in the browser, it puts a space between the title and the first item, and a space between the last item and the next line of text. To get rid of it, I'm using some CSS from another article that I read. All we need to do is turn off the top and bottom margins for the UL element. So, add the following to your style section in the header:

ul
{
margin-top: 0px;
margin-bottom: 0px;
}

Now refresh both browsers and we've eliminated the nasty spaces. We can now put spaces where WE want them instead of where the HTML wants them.

Epilogue

Here's what I found. Test your web apps in IE6, IE7 and FireFox. They are all different animals, and will all display differently. Then try not to pull your hair out trying to fix it when they don't exactly work the same.