Moving a Notes Application to the 21st Century

This is your Title

Click to edit the title text format

Click to edit Master title style

Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level

Second level
Third level
Fourth level
Fifth level



Second level
Third level
Fourth level
Fifth level


Second level
Third level
Fourth level
Fifth level



Second level
Third level
Fourth level
Fifth level



Click icon to add picture



Click to edit Master text stylesSecond levelThird levelFourth levelFifth level




Click to edit the title text format

Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline LevelEighth Outline LevelNinth Outline Level

March 10th & 11th, Sydney, Australia

Meet.Share.Learn.Connect @AusLUG #@Inform2016




Click to edit Master subtitle style




Second level
Third level
Fourth level
Fifth level








Second level
Third level
Fourth level
Fifth level

Second level
Third level
Fourth level
Fifth level





Second level
Third level
Fourth level
Fifth level


Second level
Third level
Fourth level
Fifth level









Second level
Third level
Fourth level
Fifth level

















Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level




Second level
Third level
Fourth level
Fifth level

Moving a Notes Application to the 21st Century

Cameron Donnelly | Developer | ADHIS Pty Ltd
www.adhis.com.au | [email protected]

Hi, my name is Cameron Donnellyand welcome to 'Moving a Notes application to the 21st Century'In this session, I will be covering the steps I took toConvert an existing web application from traditional Notes Web developmentTo Xpages using the bootstrap framework

Agenda

About Me

About ADHIS and Displayabull

The Search

Cut the right bull from the herd

That ideal Bull

Oh Wow! Can we have?

Conclusions no Bull

Q & A

You're probably wondering 'I thought this was about Xpages? What's with all this bull?' It'll start making sense.

About Me

Been a Notes developer since 1999

Worked in a range of industries from government, financial services, consulting, infrastructure and agriculture

Been dabbling in Xpages since 2010

No Xpages expert!

No Xpages expert. I've built systems based on experience many times banging my head against a brick wall trying to figure things out reading articles, a 3 day session with Stephan Wissel, and examining how others have built systems.

What I'm presenting isn't the correct way, only way, just they way I've built systems, which works for me. Experiment, try, come up with what works for you.

About ADHIS

Australias independent genetic evaluation service.

Core task is the calculation of Australian breeding values(ABVs) for dairy cattle

Production of the top bull lists ranking sires on the profitability of their daughters

Provide an independent evaluation system for Australian dairy farmers to make informed breeding decisions

ADHIS helps farmers breed better cows

About Displayabull

It is the most used area of the ADHIS web site and has over 1/2 million hits per year .

Displayabull provides detailed information on our 24,000+ dairy bulls.

Also includes the entire Interbull file of over 300,000 bulls of all breeds from across the world . Any proven bull in an Interbull country that has milking dtrs in 10 or more herds .

NASIS - is the short for National AB Sire Identification Scheme . Its purpose is to act as a main data-base for the registration of all sires that are used in Artificial Breeding ( AI ) here in Australia .This covers those bulls of both Dairy and Beef breeds and includes bulls from local Australian and O'Seas sources .

he registration covers basic birth details of the bulls including DOB , Pedigree ( Sire , Dam and Maternal Grand Sire ) and genetic test information .

INTERBULL - is an International Organisation based-in Sweden that operates to accept performance data from across the world on Dairy sires and its role is the Nasis equivalent but on a world scale.

CONVERSION OF DETAILS FROM ONE COUNTRY TO ANOTHER

Interbull as an Organisation records each sire Internationally in a unique way then it takes proofs ( bull performance data ) from around the world - calculates correlations for all traits that are commonly measured by using bulls that are used globally and have progeny in multiple countries ..

They act to provide conversions or linkages from one Countries proof to another and express those proofs in the home country's proof equivalents . They are like the International Money exchange in that they convert one currency ( proof equivalent ) to many other different currencies so that you can see what your Australian proof bull looks like as compared to say a French proven bull based-on the local French equivalent .

Help Betsy find a mate

So, in summary, It's all about finding the Perfect Match for Betsy

The Current Look

This is a fairly straight forward system. Search for a bull by a number of fields, display the result.

The Current Look

The search results currently createsA temporary document that is garbage cleaned upBy an agent that runs daily

The Current Look

Looking at these details, you may think 'A bull doesn't give milk!'. These details relate to the bulls progeny.

Mention here 'I showed a friend the system and he came back with the perfect comment 'The 1990's called, they want their design back'

The Current Look

The graph was a recent addition.The two green buttons at the top of the page are mimicking tabs

What about mobile?

The use of non-responsive designMeans Displayabull doesnt work on mobile devices

Where to Start?

Usually with specifications?

This is an existing application, so aim is to mirror the existing functionality

But first the Look

The design of the pages needs an overall update

Key consideration is mobile enablement and responsive design

Decided to use Bootstrap

Why? Bootstrap is an open source framework with the key contributing factor in the decision to use is embedded responsive design. One of the key factors in this decision to redevelop is the ability to access the application on all devices Plus it's included in the Extension Library.

A little bit about Bootstrap

A basic bootstrap page has a series of containers

Each container can have rows, and columns (12).

Each column can have multiple classes to control how to size the column depending on screen size

I intend on covering off some of the basics of Bootstrap. Johan is running a session directly after mine that will go into more depth

The basic structure of a boot strap are containers. Inside the container you can place rows and grids, with 12 columns in the grid. Using pre-defined classes you can size the columns based on the screen size

.

Bootstrap continued

www.getbootstrap.com Is a great reference

For this application I downloaded a template from the bootstrap site

Let's get started!

Create your new template as normal, or in your existing template

Adjust the settings in the XSP properties

In the latest version of the Extension Library, the theme name has changed to Bootstrap3 or Boostrap3_Flat for the non responsive version

Before starting the first Xpage

I placed the template design I downloaded from getbootstrap in a custom control

Between the header and the footer I placed an Editable area control where the content of each page will be

Created a CSS file to override some classes to mirror the ADHIS website, and attached it to the Custom Control.

This allows a one stop place to do any future design updates, instead of updating multiple XPages

Use the source view! Makes life so much easier, accessing is quicker too

Starting with the Search Page

Create a new Xpage, drop your page design custom control on the page

You could place all your controls in the Editable area, but much better to create another custom control and drop it on editable area. Below is the source of the Xpage

Search Page continued

On the Search Custom Control, I added the search fields, mapped them to View Scope variables, attached a data source to the view to be searched, and the button to figure out the search query

The results are displayed using a repeat control. You could also use a view panel to achieve the same result.

I used a repeat control because it's more flexible than a view panel.

A nice trick with Repeat Controls

Repeat controls can have header and footer Facets.

They are not placed in when you drop a repeat control onto your Xpage, have to be manually added in Source view

I've used this to display No search Results Found

The search page is now an Xpage!

Here's the search form with all the components togetherThe design custom control contains the header and footerThe centre is the search custom control with the fields, repeat control

And now the Bull Page

Followed a similar procedure to search page, but this time need to work with a document

Create a data source on your Xpage, map it to the form

Create a custom control, but this time need to create a parameter to pass the document from the XPage

The Bull Page Continued

Pass the document to your custom control

Continue with the design on the custom control, using Bootstrap layout and computed fields (there is no data input on this form)

Also note that when displaying a value from the current document, I've used the CompositeData object. This object contains all the parameters passed to the custom control.

The bull page as an Xpage!

Again, all the components together, the design custom controlThe bull custom custom control with the document passed as a property.

My desk is in a room with most of the managers and heavy users of the application. Just last week I overheard one of them say 'I really like this new Displayabull'. The improvements worked!

Oh wow, can it do this...?

After the initial demonstration came the feature request

Comparison between bulls, comparison between different ABV runs, 3 generation pedigree tree, progeny listing

Most of these features require multiple data sources, this easily achieved on an Xpage.

Before new features, new infrastructure

A lot of these new features require connections to other databases that will change

There was no keyword infrastructure in this system beforehand, so would have required hard coding (BAD)

Added a keyword infrastructure I've used in the past AND also added a keyword Java Managed Bean

Why Java Managed Bean

A Java Managed Bean is configured to cache keyword data, so does a look up, grabs the value, and stores the value to the bean. Cuts down on multiple lookups

Originally wrote my own, but used the Xsnippet from Fredrik Norling https://openntf.org/XSnippets.nsf/snippet.xsp?id=keyword-caching-bean

Fredrik's version uses a hash map to store the values, which is much neater than my initial version. My original approach was to have predefined properties for keyword values. Not as flexible.

Configure the Java Managed Bean

Create the Java Code (not agent) then you need to do the setup the faces-config.xml open Package Explorer, expand out the WebContent Folder, WEB-INF, then edit faces-config.xml

The code should be created in the Java are of the Code section, not a Java Agent

Note the bean name should correspond with the class name of your bean, in this case my java class is called DatabaseOptions

I've made this bean application scope, so there is one instance of the bean across all users of the application

Compare Previous ABV Run

The below Xpage uses 2 data sources

The compare previous ABV nicely demonstrates 2 data sourcesThe first is a document within the current databaseThe second is contained in another database.

So what does Displayabull now look on mobile?

Why is mobile important?Although we think of farmers as being a fairly conservative bunch, they are rapidly embracing new technologyDisplayabull is one of the most used tools, it must be available for all devicesSo, a dairy farmer should be able to use his mobile device to check a bull's breeding values and have the results displayed correctly, where ever they are.

So what does Displayabull look on Mobile?

The screen shot on the left is another use of another data source, this time JSON data to display the 3 generation pedigree tree.

I had to reconfigure the graphs for mobile having all the values on 1 bar graph just didn't work on a mobile, so I separated it out into 3 graphs.

What would I do differently?

Separate data from code.

Easily done by computing the application on the data source. In this example, getting keyword bean value. Make sure format is server!!dbPath (don't forget the \\ if in a sub folder!)

Haven't done this yet Because of the way internal processes workBut, it is a fairly straight forward thing to implement

What would I do differently?

Use a Java Managed Bean as a data source instead of a notes document

Why? The bean is self contained it does the load, saving, and getter and setter functions for private properties can be used in field values on an Xpage

If you want to change the data source, change the code in the bean!

http://www.ovalbusinesssolutions.co.uk/thoughts/managed-beans-what-they-are-how-to-create-them# Is an article explaining using Java Managed bean as a data source

https://docs.google.com/document/d/1XFXEmXH8KFcXEHcs2qvbWqOs_TqJWJ8Dbs9CMMKLszI/mobilebasic?pli=1 Another article

Because it is self contained, you can change the data source within the bean to read from a Notes database, or SQLThe consumer of the bean doesn't need to know the data source.

Conclusions No Bull

Xpages allows for easy migration to responsive design, given that bootstrap is part of the extension library

Easier to maintain an Xpage, less workarounds and compromises than traditional Notes Web development

Noticeable speed increase

More flexibility with data sources

Much better choices of tools from the Extension Library, giving a greater user experience

http://www.adhis.com.au/displayabull

Speed increase. I don't have any quantifiable evidence, just feels faster

What happened to Betsy?

What happened to Betsy?

After much searching and comparingA perfect match was found for herBut, if Betsy is thinking she should expect a visit from her perfect match for a night of nuptial bliss She should think againAll Betsy has to look forward to is a visitFrom a man with a long rubber glove And a straw of her intendeds frozen sperm

Q & A

Please fill out the AusLUG online evaluation http://auslug.org/survey2016

Internet

Moving a Notes Application to the 21st Century