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;}


 

33 Responses to Styling the Xpages pager like an iPad app

  1. Paul Withers says:

    Nice bit of code, it looks really good. I seem to remember you need to set AlwaysCalculateLast to true in order to get the final page number calculated for a large view. Is that right?

  2. […] Gevonden op de Mark Hughes Blog hoe je een XPages Pager kun laten lijken op de van een iPad:  http://blog.hughesconnect.com/?p=120 […]

  3. Bruce says:

    Mark,

    This blog entry helped me tremendously today. Thank you for sharing it.

  4. Samual says:

    Here we show you the Top 10 Fuel Efficient Cars in 2010.

    Also be aware that any indoor pet, such as a cat
    or dog, may want to drink from your pond and then find himself a healthy treat in the process.
    The first step in the process of maintaining a mosquito-free bedroom is to secure the structure of the house.

    Feel free to visit my webpage; Samual

  5. great put up, very informative. I ponder why the opposite experts of this
    sector don’t realize this. You should proceed your writing.
    I’m confident, you have a huge readers’ base already!

  6. Vonnie says:

    I know this web site provides quality based content and
    additional data, is there any other website which presents these data in quality?

    Here is my web blog … webpage (Vonnie)

  7. wordpress says:

    I’m impressed, I have to admit. Rarely do I encounter a blog that’s equally educative and interesting, and without a doubt,
    you’ve hit the nail on the head. The issue is
    something that too few folks are speaking intelligently about.

    I am very happy that I stumbled across this
    during my hunt for something concerning
    this.

    Here is my web-site – wordpress

  8. Thankfulness to my father who stated to me concerning this weblog, this web
    site is genuinely remarkable.

  9. If you are looking for a website idea, below are some of them.
    That being said let’s take a look at the types of prevalent
    programs that can cause harm to your computer:
    . The site also had a couple upgrades that they try and foist
    on you.

  10. Proxy says:

    But one thing should always be remembered that nothing on the internet comes for free.
    Saying that subscription websites would be best options to download The Tudors
    episodes can be an impartial and unconditional statement.
    The various kinds of viruses are already present from
    the beginning from the appearance of computers.

  11. http://foorumiroolipelit.fi/uruzz01/coach-06444-70.htmlコーチジャケットと&#12399;,コーチ ハンドバッグ ピンク,ニナリッチ 財布 小銭入れ
    コーチ ハンドバッグ レザー,コーチ ショルダーバッグ レディース 黒,ニナリッチ 財布 店舗 http://zapretno.info/uruzz01/coach-86449-125.html

  12. http://signaturetrucksales.ca/uruzz01/coach-96444-66.htmlジョブコーチネットワー&#12463;,コーチ ハンドバッグ ピンク,ニナリッチ 財布 小銭入れ
    コーチ長財布,コーチ アウトレット 公式,ポーター ショルダー,ポーター コラボ トート,【新品-本物-正規品】最低価格と最高の品質を持つ製品は超激安 価格で大 放出!ニナリッチバック http://gatesur.com.ar/wp-uruzz01/coach-26440-5.html

  13. http://www.naseknihovna.cz/uruzz01/coach-96444-61.htmlジョブコー&#12481; 資格,コーチ キーケース,ポーター ショルダー,ポーター コラボ トート,【新品-本物-正規品】最低価格と最高の品質を持つ製品は超激安 価格で大 放出!ニナリッチバック
    コーチ ショルダーバッグ レディース 黒,コーチ キーケース 花柄コーチ キーケース 金具,ニナリッチ 財布 年齢 http://halatecza.pl/uruzz01/coach-66448-111.html

  14. http://www.justlogbookloans.co.uk/prostomag/2275d-60157-hamilton65.htmlハミルト&#12531; カーキ キング,ハミルトン カーキ チタン,ニナリッチ 財布 レディース
    楽天 ハミルトン レディース,ハミルトン カーキ 替えベルト,ニナリッチ 時計 リボン http://www.onquevision.com.au/prostomag/13cf9-00153-hamilton27.html

  15. http://www.bluemoonlavender.com/prostomag/115e9-90153-hamilton23.htmlハミルト&#12531; 腕時計 限定,ハミルトン 腕時計 メンズ クオーツ,ニナリッチ 財布 年齢
    ハミルトン カーキ フィールド,ハミルトン 腕時計 メンズ カーキ,ニナリッチ 香水 トマト http://keepyoungclub.com/prostomag/2004c-50156-hamilton58.html

  16. http://room2shoppers.com/prostomag/2275d-60157-hamilton68.htmlハミルト&#12531; 時計 メンズ 人気,ハミルトン カーキ チタン,ニナリッチ 財布 レディース
    ハミルトン 腕時計 メンズ カーキ,ハミルトン カーキ フィールド,ニナリッチ 財布 ピンク http://cccprinceofpeace.com/prostomag/2c39f-00159-hamilton89.html

  17. http://allnews.net.ru/prostomag/115e9-90153-hamilton26.htmlハミルト&#12531; レディース ジャズマスター,ハミルトン カーキ 替えベルト,ニナリッチ 時計 リボン
    ハミルトン 腕時計 レディース 人気,リンダハミルトン 筋肉,ニナリッチ 財布 小銭入れ http://blog.homehelpers.cc/prostomag/24e6d-70157-hamilton70.html

  18. I would like to thank for the efforts you’ve put in writing
    this site. I’m hoping the same high-grade website post from you in the upcoming also.
    In fact your creative writing abilities has inspired
    me to get my own blog now. Actually the blogging is spreading its wings rapidly.
    Your write up is a good example of it.

  19. Außerdem bringt es auch noch tolle Vorteile, denn man kann seinen Alltag fast normal weiterführen.

  20. Hm, krafttraining in kombi mit ausdauer macht wohl sinn, schon alleine wegen der kurz-, mittel- und langfristigen energiespeicher.

  21. Sobald sie ihren echten körperlichen Hunger gestillt haben, können sie ohne Mühe mit essen aufhören.

  22. twitter.com says:

    Also, ich habe mich in letzter Zeit sehr viel mit der
    Ernährung beschäftigt, bin heute auf diesen Artikel gestoßen.

  23. In diesem Beitrag stellen wir die besten Nahrungsmittel
    vor, die einem zu hohen Blutdruck effektiv entgegen wirken.

  24. Frieda says:

    Wenn Sie jetzt wieder mit gesunder Ernährung einsteigen, dann bleiben Ausnahmen ohne ernsthafte Folgen.

  25. Med Ratgeber says:

    Irgendwie enttäuschend ist, da meine erst kürzlich verstorbenen Großeltern beide
    fit, gesund und selbstständig fast 100 geworden sind.

  26. Als Tipp kann erwähnt werden, wenn langsam gegessen und sich
    mehr Zeit für das Essen genommen wird, schneller eine Sättigung zum Vorschein kommt.

  27. Als ich gestern Ihr Buch in meinem Körbchen fand, habe ich sofort alles stehen und liegen gelassen und mich Kapitel für Kapitel hineingestürzt.

  28. Der Plan begleitet Dich über 6 Wochen und gliedert
    sich in 3 Phasen, für die es jeweils ein darauf abgestimmtes Müsli gibt.

  29. Ist das aber nicht der Fall, hilft auch ein wenig schon recht
    viel: bereis 15 Minuten Sport täglich können das Leben verlängern.

  30. Der Schlüssel zu einer gesunden Ernährung und einem gesunden Gewicht
    liegt auch hier zuerst im Kopf – und damit
    im bewussten Essen.

  31. Savannah says:

    Der ganzheitliche Schlanker-Leben-Plan führt Dich Schritt für Schritt an eine figurbewusste
    und ausgewogene Ernährung heran.

  32. Mit den Selbstbestimmt-Essen-Übungen finden Sie heraus,
    welche Bedürfnisse Sie sich mit Essen erfüllen,
    wenn Sie essen, obwohl Sie satt sind bzw.

Leave a Reply

Your email address will not be published. Required fields are marked *