BTE102: The Demonstration application – beyondtheeveryday.com

In the previous post  I described how Mark Leusink and I are going to be speaking about Angular.js in our presentation at ConnectED later this month.

We are very proud to announce the demonstration application upon which the presentation will be based

http://beyondtheeveryday.com

This application was created by Mark Leusink and is an amazing example of how simple an Angular application can be integrated with Domino data. The application is fully responsive and is particularly nice to use on a mobile device. All credit goes to Mark for this, I am very flattered to be talking with such an astute and talented developer. You can find out more about the application from Mark’s blog – http://linqed.eu/2015/01/14/marky-marks-mobile-first-connected-sessions-demo-app/

The application is running on a Domino server.

b1

IMG_0339

During the presentation we will demonstrate how we got the application to work on a node server hosted in Bluemix and also demonstrate the application running on SharePoint, IBM Connections and as a native Mobile application.

If you are still not sure, listen to Pete Janzen talk about his recommendations for the conference 😉

Write once – run anywhere………………. !

Advertisements

Run Domino server *then* Skype

I turned on my locally running Domino server this morning and got the following

03/07/2012 07:16:09 AM HTTP Server: Using Web Configuration View
03/07/2012 07:16:10 AM HTTP Server: Error – Unable to Bind port 443, port may be in use or user needs net_privaddr privilege
03/07/2012 07:16:11 AM HTTP Server: Shutdown

My initial reaction was extreme concern because I didn’t know what was running on port 443 and that I had a virus/trojan

Turns out that it was Skype – well there you go. I turned off Skype and the http task loaded just fine

Once the server was loaded and http was running, I then started Skype and there was no problem !

When should you use jQuery in your XPage?

For full disclosure, I used jQuery with Domino long before v8.5 at a time when the dojo documentation sucked big ones and it was nearly impossible to figure anything out. Today though that is much improved and the dojotoolkit website and the work done by sitepen have done a lot to catch up.

I am more familiar with jQuery syntax and the core library capabilities and I think I will always prefer to use jQuery than dojo given a choice and even playing field. In traditional Domino it is a level playing field as neither library is loaded by default. But that all changed with XPages and I am forcing myself to have to learn dojo because it just doesn’t make sense to use jQuery “just cos dojo sucks”.

jQuery does not conflict with dojo and can be used very successfully in tandem with each other. But there are some things to consider before you do.

jQuery selectors are IMHO easier to read and more intuitive to understand. jQuery uses a combination XPath/CSS query selection process and dojo uses a CSS3 selector paradigm

So why shouldn’t I use jQuery?

If you are going to add jQuery there has to be a good reason/purpose other than “‘cos I like jQuery and dojo sucks”. If you add a jQuery library you are:

  • adding additional overhead to the database
  • adding potential maintenance issues down the road
  • adding to the download size of every XPage which already has the dojo overhead by default.
    • (Yes you can turn dojo off but why would you? If you not going to use the XPage functionality don’t use an XPage design element……)

So if you are just doing a basic selector to get a page element or a basic animation, there is really nothing dojo can’t do any worse than jQuery. If you want to see a simple comparison between dojo selectors and jQuery selectors check this out

Dojo & jQuery side by side. Part 1: DOM Basics

Dojo & jQuery side by side. Part 2: Animation

So when should I use jQuery?

When you can’t do something you need to in dojo, or just just does not make sense to re-invent the wheel. jQuery is now more popular than Flash in terms of web usage for the most popular sites. dojo isn’t even on the map when it comes to web usage tracking. In terms of community size and usage jQuery dwarfs dojo everything else and because of that there is a lot of libraries to chose from.

In an XPages environment, the real benefit is not so much using jQuery itself, but in taking advantage of the thousands of plugins available which other people have written. There are plugins for everything from:

  • Menus
  • Calendars
  • Embedded video players
  • Photo galleries
  • Page Design libraries
  • Effect libraries
  • MVC Framework design libraries

I think I am going to start a series of weekly jQuery plugin examples (in XPages) to show what can be achieved very easily with the minimum of code. Let’s see how far it takes me before I run out of the over 4000 jQuery plugins and jQuery mobile

Using jQuery to add table interactivity to your XPage

Very quickly and easily we can create a pretty good looking data view as an XPage – drag and drop a view control onto your page and your off in under 60 seconds – very simple, very functional.

Simple XPages view of data
Simple XPages view of data

However, for many users though (especially “older” corporate users, who are usually the ones making decisions on your projects and paycheck) it is simply not enough to be “functional”, it needs to be EASY. For example:

  • On a large table it is difficult to scan across from one side to the. Especially as screens get larger and resolutions get higher we are putting more and more data onto a page
  • Which link opens the data set? The only indication we have is the blue link on the left – not obvious to all

User’s expectations are based on their experience with the internet and everyday that gets higher and higher. As developers we are always looking for ways to make our pages look snazzier and also easier to user at the same time.

Here are some simple tricks using jQuery and my x$ function.
Add all the following to the onClientLoad event of the XPage.

  1. To make the table rows alternating colors :
    The jQuery is selecting every “even row” within the viewPanel and applying the “alt” class to it

    x$("#{id:viewPanel1}", " tr:even").addClass("alt")
    
    Adding Alternating Lines using jQuery
    Adding Alternating Lines using jQuery

     

  2. To make the table rows highlight with a mouseover
    The jQuery adds a listener to each row in the viewPanel1 which toggles the “active” class when the row is hovered over.  I also added a hand pointer to make it look selectable.

    x$("#{id:viewPanel1}").delegate("tr", "hover", function(){
        $(this).css('cursor', 'pointer' ).toggleClass("active");
    });
    
    Adding a mouseover color to a table row using jQuery
    Adding a mouseover color to a table row using jQuery

     

  3. Make the entire row selectable with the 1st column’s href 
    The jQuery is selecting the “href” on the “first a” that it finds in the row and is binding it to the click event of the whole row. This is currently going to open a new page.
    Note: ” tr:gt(0)” selects all rows index greater than 0, that ignores the title row at the top which does not have the links in we are looking to use

    x$("#{id:viewPanel1}", " tr:gt(0)").bind('click', function(){
        window.location = $('a:first',this).attr('href');
    });
    
    Binding the first anchor tag to the whole row using jQuery
    Binding the first anchor tag to the whole row using jQuery

    And we could stop there – 7 lines of code and we have made major improvements to the data table. But to complete the transformation we will bring the data to the user rather than opening up another window.

  4. Make the page link appear in a nice looking dialog
    The jQuery is opening a dialog box on the page and displaying the content using the url of the row. Having to click back and forth from information is distracting and tedious. This way it helps the user never leave the page of information they are looking for. This is a little more complicated, but not really if you step through it.

    • We bind to the click event of the first row
    • We trap the page offset of the row which was clicked.
    • We open the travelDetails dialog (where id=travelDetails is just a blank label at the bottom of the page)
    • The position of the dialog, the height, width and the fact that it is modal are set.
    • As we saw before we can get the anchor href from the first column and with that we ajax in the contents of that form
    • The HTML returned is then inserted into the travelDetails and displayed to the user.
    x$("#{id:viewPanel1}", " tr:gt(0)").bind('click', function(e){
      var offset = $(this).offset();
      e.stopPropagation();
      x$("#{id:travelDetails}").dialog({
        close: function(event, ui) {
        $(this).empty();},
        position: [100, (offset.top)-100-$(window).scrollTop()],
        resize: false,
        width: 400,
        height: 250,
        modal: true
      });
      x$("#{id:travelDetails}").dialog('open');
      $.ajax({
        type: 'GET',
        url: $('a:first',this).attr('href'),
        context: document.body,
        success: function(html){
          x$("#{id:travelDetails}").html(html)
        }
      });
    });
    
Displaying the travel details in a simple dialog with jQuery
Displaying the travel details in a simple dialog with jQuery

This process is just as applicable to any normal Domino webpage (non-XPage) with an embedded view in it.

 

Update 1 March 2012

I have been asked to add the style sheet which you will need to add to see the effects. Ideally you should add it to a Stylesheet and add it to the XPage as a resource, but for the sake of demonstration just copy and paste this into the source code at the top under the <xp: view tag

<style>
.alt{ background: #ecf6fc; }
.active { color: red; background:#CCCCCC; }
</style>