A while back i wrote about how to make alternate row colors in a datatable or xpages view.  I discovered that alternate row colors in a datatable was one of the bigger advantages over a standard repeat, just slightly less customizable.  Now i have another – Column Classes.  This is the same type attribute as rowclasses that i use for alternate row colors but it deals with columns instead.

So i had a datatable that had 5 columns next to each other which all contained numbers.  I wanted to separate those out from eachother, but not just use padding or white space to do so, so basically i wanted a grid.  So i created two new entries in the style sheet for the page.  They are as follows

.evencol {

border-left: 1px solid #E8E8E9;

border-right: 1px solid #E8E8E9;

padding-left: 3px;

}

.oddcol {

padding-left: 3px;

}

This adds a little padding to the left of the column and borders to the even columns, which takes care of the right side of the odd columns as well.  Combine that with the alternating row classes below

.oddrow {

background-color: rgb(248, 248, 248);

}

.evenrow {

}

and add those to the rowclasses and columnclasses in the ‘all properties’ of the datatable.

Then you get something that looks like this

Of course you could add background colors as well(not just padding and borders) if you want to get real fancy, and it will alternate the colors horizontally and vertically.

Now for highlighting, for that i use the hover property in css.  Add this to your style sheet and you will get row hovering and column hovering, but column hovering is really just cell hovering, since html table are made first of rows then columns.

.evenrow:Hover {

background-color: rgb(288, 250, 221);

}

.oddrow:Hover {

background-color: rgb(288, 250, 221);

}


.evencol:Hover {

background-color: rgb(222, 238, 248);

}

.oddcol:Hover {

background-color: rgb(222, 238, 248);

}

and you will get something like this, the mouse is hovering over the 8

 

Styling the Xpages pager like an iPad app

On January 13, 2011, in mobile, xpages, by Mark Hughes

Lets face it, the default pager on an XPage is not all that attractive, especially when apps are looking like they do on an iPad or iPhone.  So i came up with an iPad inspired pager as an example of how you can customize the appearance of this element.

The first thing you need to do is change the pager type to custom.  Then add some elements to the custom pager.

Once you have the elements like(previous, next), then in the Outline, go to each element and add a style.  For my ipad example for the farthest left element i use navbutton1, all the inner buttons, navbutton2, and the furthest right button navbutton3.

Then go to each elements Pager Control tab and you can edit the labels.  My labels are as follows –

First, <, computedvalue, >, Last

For this computed value for the label i want to show which page you are on out of how many pages total there are.  The Code looks like this.

‘{0} of {1}’

yeah its that easy.  {0} is the current page, {1} is the last page.  So you could also put in ‘page {0} of {1} total pages’.

Then go and make each elements font color a light grey except for the computed page # of #, make that one white.  You can also add some padding left and right if you want easier touch-ablity in a mobile app.

Here are the results.  The first image shows buttons disabled.  The second shows the next and last button enabled because there are more pages.  Links will be shown in white, when there are not any more pages they will not be links, so the text will be grey and look disabled.

here is the css that i have used in this example, though only in webkit browsers will it look this nice, for ie have fun with using images ;o!

.navbutton1{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1b5bb), to(#6b737e));
height:35px;
font-family:Arial;
font-size:12pt;
color:#fff;
-webkit-border-top-left-radius:7px;
-webkit-border-bottom-left-radius:7px;
border-color:#4c4e50 #4c4e50 #4c4e50  #4c4e50 ;
border-style:solid;
border-width:1px;
border-right-style:none;
font-weight: Bold;
text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
padding:7px;
padding-left:5px;
padding-right:5px;
}
.navbutton2{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1b5bb), to(#6b737e));
height:35px;
font-family:Arial;
font-size:12pt;
color:#fff;
border-color:#4c4e50 #4c4e50 #4c4e50  #4c4e50 ;
border-style:solid;
border-width:1px;
border-right-style:none;
font-weight: Bold;
text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
padding:7px;
}
.navbutton3{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1b5bb), to(#6b737e));
height:35px;
font-family:Arial;
font-size:12pt;
color:#fff;
-webkit-border-top-right-radius:7px;
-webkit-border-bottom-right-radius:7px;
border-color:#4c4e50 #4c4e50 #4c4e50  #4c4e50 ;
border-style:solid;
border-width:1px;
text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
font-weight: Bold;
padding:7px;
padding-left:5px;
padding-right:5px;
}
.navbutton2 a:link{
color:#ffffff;
}
.navbutton3 a:link{
color:#ffffff;
}
.navbutton1 a:link{
color:#ffffff;}


 

New Blog and hopefully allot more content to follow

On January 13, 2011, in lotus, by Mark Hughes

I haven’t blogged much since last October, i hope to change that.  I moved everything over to this new site because the url is one i can actually remember.  I plan on blogging more about X-Pages and how to utilize them in a mobile environment.  Let me know if thier is anything in particulaur you would like to know about.