Learning XPages Part 6 : Showing The Username In The Banner

In the last part we set the groundwork
for the banner section of our application and added a small graphic to
the left side of the banner. In this part we are going to build the links
on the right side of the banner and show how we can use some server side
javascript to determin if we should show a login link or a logout link.

Examining the sample XPage applications
that use the OneUI interface we see that the right side of the banner is
made up of an unordered list with a special style class. In the XPages
designer there is no easy control to drag over to the XPage to create the
list so you need to rely on your basic HTML skills to get you started.
First open the layout_Banner custom control that you have created from
earlier and put it into the source view. You should see the control that
we created for the image in the last part, it will look something like
this <xp:image url="/OpenNTF.jpg" id="lotusLogo"
alt="OpenNTF" styleClass="lotusLogo"></xp:image>.
We will add in our basic unordered list below this, add in a new line and
paste the following html directly into the source view :



<ul class="lotusInlinelist">

<li class="lotusFirst">

First List Item

</li>

<li>

Second List Item

</li>

</ul>

The ul class name of ‘lotusInlinelist’
is defined in the oneUI css as a horizontal list. List items in this class
of list have been defined to have a left side border of 1 pixel however
that would look a little out of place on the first item in the list so
the class name of ‘lotusFirst’ overrides this css behavior and ensures
that the first item does not display the left side border. If you switch
back to the design view of the XPage you can see you list or you could
save the XPage and preview it in your browser to see how it’s going to
look.

A picture named M2

A picture named M3

Now that we have the basic list in place
we can replace our placeholder text with some XPages controls and write
some code to make them display what we need. lets start with the first
list item. For the moment we would like this to be a simple computed text
field that displays either ‘anonymous’ or the users common name depending
on if they are logged in or not. Remove the first bit of placeholder text
and then drag over the ‘Computed Field’ control from your controls list
on the right side of your screen. Once it’s in the correct place on the
list we can have a look at it’s properties. Don’t worry about the controls
name and make sure the ‘visible’ option is enabled and then go to the ‘Value’
tab of the properties. You will see a reminder hint that you need to bind
the value to something, you can ignore this, we are going to use some server
side JavaScript to work out the value.

A picture named M4

Select the JavaScript option and then
click on the ‘Edit Script’ button to bring up the JavaScript editor. here
is the JavaScript that we are going to use :

var userName:NotesName
= session.createName(@UserName());
return(userName.getCommon());

If you have done any LotusScript code
in the past then you can very quickly see that we are creating a new object
called userName based on the NotesName class and setting it to the notes
name of the user who is currently logged in on the session. In LotusScript
we would look at NotesSession.Username() but here we have an @UserName()
which is based on formula language. Yes, your existing LotusScript and
Formula language skills are certainly not going to waste, you’ll just learn
a new way to put them to use.

Lets save the XPage and refresh the
preview in the browser and see what we have.

A picture named M5

In the next part we’ll do the second
list item. It’s pretty much the same as the first list item but there is
a little more JavaScript to deal with.

Advertisements
Tagged with: , , ,
Posted in None
4 comments on “Learning XPages Part 6 : Showing The Username In The Banner
  1. Mark Barton says:

    Hi Dec,Just following along and for some reason I can’t get the lotusRightCorner class to work on the panel. Whats strange is some of the styles must be working e.g. the list items have rendered correctly.Do you have a live demo available so I can view the rendered source?Mark

    Like

  2. Mark Barton says:

    Ok found the problem – I compared the rendered HTML to the new Wiki.First dragging controls is a PITA when other elements are not visibile i.e. DIVs. I hadn’t placed my Panels inside the lotusBanner DIV. IBM should look at Adobe Flex builder to see how this should be done. I can’t seem to drag these controls into the source view I hadn’t realised the panel controls are actually nested i.e. the image panel container needs to be inside the righthand one.Finally the DIV surrounding the Banner should have a class of lotusBanner not an ID (and not a styleClass – not sure what the difference between them is)I noticed the IBM theme seems to duplicate in allot of places the class and IDs so you could use either but not in this case.For reference heres the control source I ended up with: First List Item Second List Item

    Like

  3. Mark Barton says:

    Opps – I pasted the wrong code aboveNB as I mentioned the <div id=”lotusBanner”>needs to be<div class=”lotusBanner”>

    Like

  4. Elijah Lapson says:

    This is a fantastic tutorial! Please note Mark’s comments above if you are stuck go to part 7 and download the DB and view source pane. I think lesson six need to be more explicit about where the panels go. Maybe a good place for a screenshot of the outline view.Thanks Again this is just what people need to get started.Elijah

    Like

Comments are closed.

Archives
%d bloggers like this: