Learning XPages Part 19 : Another Repeat Another Table

Posted on February 27, 2009 by qtzar

So now that we have our second XPage created
lets add some content to it. We’ll start by opening the new custom control
that we created called content_Location and clear out the placeholder text.
Once that’s done we need to define the data source for the control. Select
the ‘Custom Control’ node in the outline view on the left of your screen
and go to the ‘Data’ properties tab. Create a new data source based on
the vw_People view that is in the sample database

A picture named M2

Now, just like the home page we will
drag in a repeat control and into the repeat control we will create a table
of two rows and six columns by dragging in a table control. Give the first
row of your table some headers and then select the repeat control to look
at it’s properties.

A picture named M3

Set the Collection Name and Index Name
just like before and then, just like the repeated table on the homepage
we need to drag in some computed field controls and set their values by
using JavaScript similar to rowData.getColumnValue("colname");
where colname is the name of the column in the view that we are using as
our data source. Next you move the repeat control inside the table and
change the table header row to <th> tags. I have also given my table
a styleClass of ‘phonebook’ so that it uses the same CSS as I created for
the homepage’s table.

A picture named M4

You can now save your custom control
and preview the ‘Location’ XPage and you will see a nice table listing
all the people in the database. Feel free to apply the alternating row
styles to the table just like we did for the homepage to give your application
a consistent look and feel.

A picture named M5

In the screenshot above you’ll notic
that the alternating row styles don’t seem to have worked however if you
examine the original view that the database is based on you’ll see that
it has a categorized column at the start of the view and the two red lines
I have drawn above are rows in the table where those empty categories are
showing. In the next part I’ll show you how to pass a variable on the URl
to restrict the repeat to a single category.

Tagged with: , , , ,
Posted in None

Learning XPages Part 18 : Building The Second XPage

Posted on February 27, 2009 by qtzar

At this stage in our application development
we have created a fairly nice looking homepage for our phonebook. When
you load up the phonebook in your web browser you see the OneUI layout,
a menu on the left of the screen listing all the locations and in the main
part of the screen a table listing all the locations with their main phone
number and main fax numbers. While it looks nice it doesn’t do anything
yet, there is nothing to click on to get more details and over the next
few sections in the Learning XPages blog series we will create a new XPage
and link it from the homepage.

The next XPage that we are going to
create will be designed to list all of the people at a single location.
The layout will be based on the OneUI just like the homepage, the only
different will be the contents of the main part of the page. We will start
the process by going to our Custom Controls view in the Domino Designer
and creating a new custom control I have called mine content_Location so
that I know what it is going to contain.

In our new blank custom control we will
drag in a panel control and then looking at it’s properties we add a style
class of ‘lotusContent’. I have also added some placeholder text into the
panel, I like to do this so when I preview pages I can make sure that the
content will appear in the correct place. Here’s what the source view of
my control looks like right now :

A picture named M2

Save the custom control and then go
to the XPages view in your Domino Designer. Now we could create a brand
new blank XPage and then recreate all the divs and drag in custom control
for the layout just like we did for the original XPage but why reinvent
the wheel. An easier option is to select the ‘Home’ XPage and duplicate
it by doing a copy paste. This will result in a new XPage called ‘Copy_of_home’
so we need to rename it. In traditional Domino Development you can rename
design elements by opening then and looking at the properties of the element
or you can edit the name in-place within the design view however with XPages
you cannot do it this way, you must select the ‘Rename’ option from the
File menu. the keyboard shortcut for this option is F2, so highlight your
new XPage and press F2 to bring up the rename dialog box

A picture named M3

Type in your new name and then open
the XPage in edit mode. I have given mine the simple name of ‘Location’.
Once you have opened the XPage you can remove the custom control for content_HomePage
and drag in the custom control for content_Location. When your finished
your XPage source should look like this

A picture named M4

Now you can save your new XPage and
preview it in your web browser. You should see the OneUI layout that we
created earlier and your new placeholder text appearing in the main content
area.

A picture named M5

In the next part we’ll add another repeat
control to the contents_Location custom control.

Tagged with: , ,
Posted in None

Learning XPages Part 16 : A Better Homepage Look

Posted on February 26, 2009 by qtzar

In the last part we added a view control
to our content_HomePage custom control and set it up to display the contents
of a view from our application. For simple views this works great and we
probably could have used it in this application also but I like the level
of control that the ‘repeat control’ gives you so I’m going to replace
our view control with a repeat.

Start by deleting the view control from
our XPage. Make sure it’s fully gone by look and at the source, you should
just see your data source and the div’s or panel with the ‘lotusContent’
class. Drag in your repeat control and then drag a table control into the
repeat control. When you drag in a table control you will get a helper
dialog box asking how big you want the table.

A picture named M2

I have select 2 rows and 3 columns and
left everything else at the default. Setup the repeat controls properties
just like we did for the side bar making sure to select the data source
we defined earlier and also making sure to put in the collection name and
index name

A picture named M3

Design your table just like you would
any other table, Put some headers in and then drag over some computed field
controls to hold the values of the repeat. You table should look something
similar to this

A picture named M4

I’ve setup the values for the computed
fields exactly the same way as I did for the computed field I’m using in
the sidebar. I have set the value to JavaScript and set the script to rowData.getColumnValue("ViewColName")
where ViewColName is the name of each column in the view that I want to
display.

If we now refresh the XPage we should
see something like this :

A picture named M5

It should quickly become obvious as
to what’s wrong here. Well the entire table is inside the repeat so for
each location document in the database it’s building an entire table.  To
fix this problem we need to go into the XPage source and move the <xp:repeat>
tags to the inside of the table tags and below the first row of the table
because that is the header. I have also changes the <xp:tr> tags
in the header row to <th> tags as this is the proper setup for a
header row in a html table.

A picture named M6

The one IMPORTANT thing that is left
to do is remove the repeat’s name. if you don;t do this then a DIV will
appear inside your table in the web browser and this is not valid HTML
and it will cause havoc with your CSS. The easiest way to remove the name
is in the source view, just delete the entire ‘id="repeat1"’
bit out of the repeat controls tag. Save and refresh and your table should
look perfect :

A picture named M7

In the next part we will create some
custom CSS and apply it to our table.

Tagged with: , , , ,
Posted in None

Learning XPages Part 15 : Building The Homepage Content

Posted on February 26, 2009 by qtzar

Time to display some real content on the
homepage of our application. For the homepage I’d like to list all the
locations along with their main phone number and main fax numbers. Lets
start by opening the content_HomePage custom control that we created when
we were building the layout for the site.

Again we are going to be using a repeat
control so the first thing we need to do is define the data source for
the repeat control. Using the Outline View on the lft of your screen select
the ‘Custom Control’ node in the outline tree and then switch to the Data
Properties section on the properties tab. This time I’m going to use the
ContentLocations view in my database.

A picture named M2

I have given the data source a name
of dominoLocationsView. I could have used dominoView again just like in
the sidebar list of locations and it would have been fine, the XPages server
runtime has no problem with different components having data sources with
the same names, it keeps a handle on what source belongs to what component
however my own preference is to always give things more descriptive names
so that you can quickly work out what they were for when you come back
to an applications design after a long period of time.

Now that we have the datasource defined
we can display it on the XPage. I’m about to introduce you to a new control,
the ‘View’ control but then I am going to remove it and show you my preferred
way by using a repeat control. Lets start by dragging a View control into
the XPage. Make sure it appears between the divs with the ‘lotusContent’
class so that it will appear correctly on your XPage. When you drag in
the control you’ll see a dialog box prompting you for some basic information
for the view’s data source.

A picture named M3

We have already defined our data source
so we can just select it from the dropdown at the top of the box, you can,
however, create other datasources directly from this dialog if you want.
We are just going to select these defaults for our data source and then
click OK at which point you’ll see an automatically generated table appear
in your xPage.

A picture named M4

and if you save and refresh your XPage
you’ll see some real data appearing in your application.

A picture named M5

Of course because we have not put any
styles on the view control yet it looks terrible but it does demonstrate
how quickly we could get data from a view in our notes application to appear
on screen in an XPage.

In the next part I’m going to delete
this view control and build it manually using a repeat control and my own
CSS stylings.

Tagged with: , , , ,
Posted in None
Archives