Learning XPages Part 40 : Two Data Sources One Xpage

Posted on March 9, 2009 by qtzar

Now that we have a nice pager on top of
table showing all the people at a single location wouldn’t it be nice to
display some of information found in the location document like the location’s
address and main numbers?

In XPages you are not restricted to
a single source for your data. At the moment we have a data source on the
location XPage that is associated with the categorized people view in our
notes database. In this part I’m going to create a new data source that
is associated with the location document. Lets start by opening the content_Location
custom control and looking at the pages properties go to the data section.

In here you should see the data source
called ‘peopleView’ that we defined earlier in the series. Let’s click
on the Add button and select a Domino Document. I’m going to call mine
‘locationDoc’ and base it on the ‘location’ form that is in the current
database. We also need to tell the data source the Document ID of the document
we are going to be referencing.

A picture named M2

There are a couple of ways to tell the
data source what Document ID you want to work with. I’ve decided I’m going
to use the sessionScope variable called locationfilter and look up the
document in a view.



var locView:NotesView = database.getView("lkp_Locations");
var locDoc:NotesDocument = locView.getDocumentByKey(sessionScope.locationfilter);

return locDoc.getUniversalID()

In this code I create a variable called
locView and set it to the lkp_Locations view in the current database. I
then create a second variable called locDoc and I do a simple NotesView.getDocumentByKey
to look up the document using the sessionScope variable. I then return
that documents Universal ID. As you can see this code, even though it is
JavaScript is more similar to LotusScript then anything else.

Now that I have my Data Source I can
start creating fields and labels on my custom control. Don;t forget you
can use the data pane on the right of your screen to quickly get the field
names that you have used in this document :

A picture named M3

Here’s what the design view of my content_location
custom control looks like after I dragging in some data fields

A picture named M4

And now if I preview this in my web
browser you can see my test data appearing.

A picture named M5

And that’s it, in a couple of very easy
steps we are able to have two different data sources on a single XPage.
In this case they were a view and a document but there is nothing stopping
you from having two or more views or any mix of views and documents that
you need for your application.

Tagged with: , ,
Posted in None

Learning XPages Part 39 : Adding Pagers To Our Repeats

Posted on March 8, 2009 by qtzar

By now our application is really starting
to look complete however in our ‘location’ XPage we are currently only
displaying the first 30 people in each location. If you have more then
30 people in a location you’ll need some way to display the next 30 people
and so on till you reach the end of the view. In XPages there is a new
control called the ‘Pager’ which we can add to the XPage to give us this
functionality.

Let’s start by opening the ‘content_location’
custom control that we created earlier. At the moment it is just a table
with a repeat control inside of it to repeat the rows of the table. Lets
drag in a ‘pager’ control from the controls pane on the right of your domino
designer screen. Drag it up to the top of the custom control and then switch
to the source view and make sure that it appears inside the ‘lotusContent’
div.

A picture named M2

Staying in the source view scroll down
to the repeat control that we created earlier and select it. In an earlier
part of the series I mentioned that having a repeat control inside a table
would produce invalid HTML if the repeat control had a name, however for
a pager to be able to connect to the repeat control we need to give it
a name. I’ve called mine ‘peopleRepeat’

A picture named M3

Now go back to the pager we just added
and have a look at the properties for it. In the ‘Attach to’ section we
select the name of the repeat control and for the Phonebook application
I have also selected to enable the ‘partial refresh’ option.

A picture named M4

If we save the custom control at this
stage and preview our page in the browser you’ll see the pager appear at
the top of the page.

A picture named M5

This pager is very basic right now and
I have not given it any CSS classes from the OneUI CSS file. I’d like a
more detailed pager so back on the properties of the pager I have decided
to create a custom pager.

A picture named M6

You can also select any of the sample
pages that lotus provides you with but a custom pager might be more powerful
and allows for greater styling. From the custom pager options I added a
couple of pager types in the order specified above. While it may not look
like a great order once I apply my CSS you’ll see why I selected them in
that order. Speaking of applying some CSS let’s add the ‘lotusPaging’ styleClass
to the overall pager control.

A picture named M7

Now, the the source view you’ll see
some new controls called xp:pagerControl. You’ll see one for each of the
options you selected in the custom pager section above.

The first one has a type of ‘Status’.
By default this will display the current page number but if you go to it’s
all properties section you can set the value to ‘Page {0} or {1}’ and at
run time the XPages processor will convert this to display the current
page number where {0} appears and the total number of pages where {1} appears.

A picture named M8

I have also given this a style class
of ‘lotusLeft’

A picture named M9

The next three pagerControls I’ve given
a styleclass of ‘lotusRight’ and the last one I have left alone.

A picture named M10

Now if we save and preview the XPage
our pager looks like this :

Left

A picture named M11

Middle

A picture named M12

Right

A picture named M13

Pagers are very powerful and as you
can see a custom pager allows you more control over the CSS to position
the pager over your table or data view. I wasn’t happy with the way everything
was pushed together in the page group in the middle of the screen so after
examining the html that was generated by XPages I noticed that everything
was inside a <span> tag so I added some custom CSS to the custom.css
file



.lotusPaging span{padding-left:2px;padding-right:2px;}

Now any <span> tag inside the
lotusPaging class will have some extra spacing on either side. Here’s how
my pager looks now :

A picture named M14

Much nicer.

Tagged with: , , ,
Posted in None

Learning XPages Part 38 : Uploading An Image For The Person’s Picture

Posted on March 6, 2009 by qtzar

Currently at the top of the person details
XPages I have a static ‘No Image Found’ placeholder. In this part of the
series I’m going to add a file upload control to the XPage so that you
can upload an image and then change the placeholder to display that image
if it exists. If it doesn’t exist then it will just display the placeholder
again.

Our domino form already has a richtext
field called ‘jpegPhoto’ so we are going to use this to store the attachment.
Lets open the content_person custom control and from the controls panel
on the right drag in a new ‘File Upload’ control. I have placed mine just
under the placeholder image that I’m currently displaying.

A picture named M2

In the properties for the file upload
control I have set the options up so that it will only accept a JPEG file
and I have also decided I want to rename all uploaded files to ‘thumbnail.jpg’.
Again you’ll see the diamonds to the right of the options meaning you can
compute the values for these options, and example of this is where maybe
you want to name the file using the persons first initial and lastname.

A picture named M3

To make sure the upload option only
appears when the document is in edit mode and I computed the visibility
option on the control using the same personDoc.isEditable();
value that I used for the ‘save Document’ action button and I have also
changed the visibility of the image placeholder to the !(personDoc.isEditable());
computed value so that it is hidden while the document is in edit mode,
just like the ‘Edit Document’ action button.

On the data tab of the properties you
need to bind the control to a field on the domino form. I have bound mine
to the ‘jpegPhoto’ field.

A picture named M4

Now select the Image control above.
We need to make this display the image once it has been uploaded and the
document saved. Go to it’s properties and  for the image source click
on the diamond and select compute value. Here is the code I have used



var
personImage:String = "noImage.png";

var
attachmentList:java.util.List = personDoc.getAttachmentList("jpegPhoto");

if
(!attachmentList.isEmpty()){

        var
attachmentObject:NotesEmbeddedObject = attachmentList.get(0);

        personImage
= "/0/"
+ sessionScope.personDocID
+ "/$FILE/"
+ attachmentObject.getName();

}

return
personImage;

Here I am setting the default to ‘noImage.png’
which is a file resource in the database. I then create a list of all the
attachments in the field ‘jpegPhoto’ and if there is more then one attachment
I create a NotesEmbeddedObject variable from the first entry on the list
and then calculate the URl to the image using the ‘Zero View’ method of
/0/DocumentUNID/$FILE/attachmentName.xyz. The DocumentUNID I am grabbing
out of the sessionScope. It was originally placed in there when we clicked
on the person’s name in the table on the locations XPage so that this XPage
would know what document to open in it’s data source definition.

Here’s what it looks like before I upload
the image

A picture named M5

and here’s what it looks like after
I upload the image and save the document

A picture named M6

Now that we have all our validation
working and given the user a way to upload an image of themselves our application
is starting to come together.

In the next part we’ll look at some
security aspects for the application.

Tagged with: , , ,
Posted in None

Learning XPages Part 37 : Adding A Rich Text Control To The Form

Posted on March 6, 2009 by qtzar

One of the true headaches of the Domino
Developer in the past has been working with RichText files in their web
based applications. There have been many different solutions, For BlogSphere
I wrote code that would convert the field to MIME and then extract the
html and then convert all the internal links to embedded images into real
links. Other options included using external tools like FcskEdit or TinyEdit
or some of the high quality tools from Genii
Software which have been designed
specifically for Domino. In this part fo the series I’m going to add a
richtext field to our phonebook for an ‘About Me’ section to see what options
we have now with XPages.

Let’s start by opening our ‘Person’
form in the domino designer and adding a new field called ‘AboutMe’ and
giving it a type of ‘RichText’.

A picture named M2

Save and close the form and then open
the content_person custom control. I have decided to add the about me section
as a new tab to the tabbed panel we created earlier in the series. To add
a new tab to the tabbed panel just right click in the tabs areas of the
tabbed panel and select the ‘Append Tab’ option from the context menu.
Your new tab will appear and the properties box below will automatically
switch to the properties of the new tab.  Change the label for the
tab to ‘About Me’ and then from the controls pane on the right drag over
a new control of type ‘Rich Text’ into the tabs content area.

A picture named M3

You should see a nice richtext editor
appear, select it and look down at the properties for the control and change
to the data section. We need to bind the control on the XPage with the
new field in our notes form so set the data source to ‘personDoc’ which
is the name of the data source we setup for this custom control and then
in the ‘Bind To’ dropdown select the new ‘AboutMe’ field.

A picture named M4

Save the custom control and then preview
your phonebook, log in and go to a person’s record and look at the about
me tab in both read mode and edit mode to see how it appears.

A picture named M5

If you save the change to the document
in Xpages then it will be saved into the new richtext file on the domino
form :

A picture named M6

This RichText is still very rudimentary.
I couldn’t see a way to embed images or links via the web interface and
due to some CSS issues the line heights were slightly off when the document
was in readmode again after saving it. I’m still trying to figure out the
CSS to resolve this issue.

In the next part I’ll look at how the
end user can upload a new photo of themselves for display in the header
section of the person details page.

Tagged with: , , ,
Posted in None
Archives