Xomino

Domino with the new improved X

XPages and Java, starting over, again…..Hello World

Posted by MarkyRoden on March 3, 2015

OK to set the stage for what may just be about to happen – blogging is a form of self documentation for me. If I write it – it helps me remember it. I have said this before (multiple times) and failed, but I need to learn Java. It will probably fail again, let’s not kid ourselves, we all know Marky’s preferred language of choice (*coughs politely*). But I want to properly wrap my head around IBM Social Business Toolkit, and not just learn the limitations of the JavaScript API. To do this I need to learn Java and execute on it. So no promises, but we may get some blog posts on IBMSBT and my learning the Java way.

So with the help of Toby, the mockery of Brad and Kathy and the adulation of Eric, we will begin.

All of this code will be done in R9.0.1 (something)

Hello World (part 1)

1) Create a new Java Class in your database

There are apparently multiple ways to do this but I just went to the Java elements and clicked on the New Java Class button

j1
from the resulting popup enter a package name – in this case com.xomino.sbt, and the name for the new class, HelloWorld

The normal format for naming convention is

  • Package names are lower case and look like a website URL except backwards
  • Classes are Propercase

j2

 

Click OK and a new Class is created in Designer

j3

and the crowd went wild……well ok maybe not but I know Paul and Russ are laughing their butts off right now.

2) Create a new XPage (xHelloWorld.xsp)

In there I am going to create a button which when clicked will display hello world on the screen. To do this I am going to need a button and a computed field.

When the button is clicked I will set a viewScope variable and refresh the field.

The field is bound to the viewScope variable which I hope to set in the Java code…..Clicking the button will call the com.xomino.sbt.HelloWorld.setMessage() method, which will set the viewScope variable value.

<xp:button value="Click me" id="button1">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="partial" refreshId="aWrapper">
		<xp:this.action><![CDATA[#{javascript:com.xomino.sbt.HelloWorld().setMessage();}]]></xp:this.action>
	</xp:eventHandler>
</xp:button>

<xp:div id="aWrapper">
	<xp:text escape="true" id="computedField1"
		value="#{javascript:viewScope.message}">
	</xp:text>
</xp:div>

Once the viewScope variable has been set the aWrapper will be refreshed and I will see my value.

The class looks like this

package com.xomino.sbt;

import com.ibm.xsp.extlib.util.ExtLibUtil;

public class HelloWorld {

	public static void setMessage(){

		/*This is how you get XPages scopes in Java */
		ExtLibUtil.getViewScope().put("message", "Hello World");

	}
}

To enable the use of ExtLib code you must make sure the box is Checked in the database XSP properties
j4The output

helloWorld

 

In the dumbest way, this has made me very happy :)

Posted in IBMSBT, Java, XPages | 10 Comments »

Speaking at GRANITE User Group in Chicago – 16 March 2015

Posted by MarkyRoden on March 1, 2015

I was very flattered to be asked by my friend Richard Moy to speak at the next GRANITE meeting in Chicago later this month.

I will be doing a repeat of the Angular.js presentation I did with Mark Leusink at ConnectED a this year. Mark unfortunately was not able to make it so it will be only the Marky Blank show this time.

Here is the information on the presentation and if you want to come the sign up link is at the bottom.

Hope to see you there :)

Register

https://www.eventbrite.com/e/spring-granite-lug-meeting-march-16-2015-tickets-15911798618

Abstract

The Future of Web Development – Write Once, Run Everywhere with AngularJS and Domino

AngularJS is currently the most popular JavaScript MVC framework. It’s driving more adoption and interest in the MVC/ REST API application architecture model. The ease of use, portability and re-usability of the code makes it an ideal solution for modern web developer needs. We’ll show you how to use AngularJS to modernize your existing Domino apps, while leveraging Domino’s best features. The speakers will also demonstrate how the power of architecting a solution based on AngularJS allows your Domino application to be made available through other platform interfaces. Taking “Write once, run everywhere” in the literal sense, you will see the same Angular/ Domino based app running natively in XPages, IBM Connections, Bluemix, IBM Worklight and more. Client-side JavaScript frameworks such as AngularJS are the future of web development – come and see it in action.

 

Also at the meeting

8:30 AM – 09:00 AM
Breakfast provided by GRANITE09:00 AM – 10:00 AM
IBM Verse: Deep Dive and Futures
Luis Guirigay, Global Technical Ambassador, IBM Analytics & Enterprise Social Solutions

10:00 AM – 10:15 AM
Break

10:15 AM – 11:15 AM
The Future of Web Development – Write Once, Run Everywhere with AngularJS and Domino
Mark Roden – PSC Group LLC

11:15 AM – 11:30 AM
Break

11:30 AM – 12:30 PM
IBM Hawthorn
Luis Guirigay, Global Technical Ambassador, IBM Analytics & Enterprise Social Solutions

12:30 PM – 01:30 PM
Lunch provide by GRANITE

01:30 PM – 01:45 PM
MWLUG 2015 Update
Richard Moy, Managing Director, Phora Group

01:45 PM – 02:00 PM
Direction of GRANITE
Richard Moy, Managing Director, Phora Group

Group discussion on future sessions and social communication to members.

 

Posted in GRANITE, PSC, Speaking | 1 Comment »

Creating a periodic array of dates in JavaScript

Posted by MarkyRoden on February 26, 2015

So I am lazy – nothing new there. I am also a manager (nothing new there either unfortunately) and I track hours in a spreadsheet. Yes we have a proper system for hours tracking and billing but I am old school and I prefer the layout I created and have used for yeeeears.

Anyway, so it is new project time and I need to create a set of dates from this Friday – every Friday out through the next 3 months. I am sure there is a smart way to do that in Excel but I wanted to do it in JavaScript – ‘cos I can, and ‘cos I want to keep kidding myself I am a developer ;)

A quick Google search found this snippet which is almost what I was looking for http://stackoverflow.com/a/4413721/1171653 (look at the example)

I modified the sample code slightly to return the format I was looking for – starting today – 02/26/2015

Date.prototype.addDays = function(days) {
    var dat = new Date(this.valueOf())
    dat.setDate(dat.getDate() + days);
    return dat;
}

function getDates(startDate, stopDate) {
    var dateArray = new Array();
    var currentDate = startDate;
    while (currentDate <= stopDate) {
        var day = currentDate.getDate()
        var month = currentDate.getMonth()+1
        var year = currentDate.getFullYear()
        dateArray.push(day+"/"+month+"/"+year )
        currentDate = currentDate.addDays(7);
    }
    return dateArray;
}

var dateArray = getDates((new Date()).addDays(2), (new Date()).addDays(90));

console.log(dateArray)

Loaded it into the firebug console and produced the following which is easily copy/pasteable into Excel

[“28/2/2015″, “7/3/2015″, “14/3/2015″, “21/3/2015″, “28/3/2015″, “4/4/2015″, “11/4/2015″, “18/4/2015″, “25/4/2015″, “2/5/2015″, “9/5/2015″, “16/5/2015″, “23/5/2015″]

It took me longer to write this up on the blog than do it.

But now I have a reference point so that when I need it for the next project I can come and get this code :)

Lazy :)

Posted in JavaScript | 2 Comments »

JavaScript is Awesome

Posted by MarkyRoden on February 24, 2015

Yes it is :)

 

 

Your move Dave

Posted in Just Marky | 1 Comment »

Creating your own sample Bluemix application – a NotesIn9 presentation

Posted by MarkyRoden on February 22, 2015

I created a Notesin9.com video for the purpose of demonstrating how quickly and easily you can repeat one of the IBM example applications for yourself. In just over 10 minutes you can deploy a new Bluemix hosted Text To Speech example using the Watson Text To Speech service which is reeeeeally cool :)

Watch the video here

In the near future I am going to do another NotesIn9 on how to integrate that service into an XPages application.

Whenever IBM gets round to putting XPages into Bluemix *coughs* Pete *coughs*  this is going to be so much fun

 

;)

 

 

Posted in Bluemix, NotesIn9, Watson Service | Leave a Comment »

Using CSS3 border-radius to round a Bootstrap button

Posted by MarkyRoden on February 17, 2015

This is a really simple observation, but relevant to the side project I have started to work on for my wife (more to come later)

If we create a simple Bootstrap button

b1

<button type="button" class="btn btn-default">Single toggle</button>

It looks something like this in firebug

b2

Looking at the .btn style on the right we can see border-radius: 4px

Messing with this value can create a much more rounded button – if that is your desire

b3

This is border-radius: 20px – Cool :)

 

Posted in Bootstrap, CSS | 1 Comment »

Mobile web app usability tip: Selecting all text when clicking on an input field

Posted by MarkyRoden on February 13, 2015

I am working on a single page mobile only web app where someone needs to just update numbers, easily and quickly.

I found during some usability testing that having to tap into a field then tap to the end of the field and then start to add the numbers was way too much like hard work.

So I decided that when tapping into the field the whole field should be selected and with the type=tel number pad coming up the user can start to the immediately. Yes this destroys what was typed but to update a 3 digit number is easy and seemed to me to be a lot easier than having to edit an existing number.

You can see the example I created at this link – http://demo.xomino.com/xomino/gstracker.nsf/xHighlightExample.xsp – open it on a mobile for the real effect. The sad face fields do not have the select all the Highlight does. This is only tested iOS 8 – if it doesn’t work for you I would love to know and what device/OS.

highlight
To do this I had to google how to selectAll on a phone and ran in the problem that Mark Leusink mentioned during our talk at ConnectED. On a mobile device there is a 300ms delay after a focus or click event to ensure that the user is not zooming or scrolling. Makes sense. But it means that if you try and attach anything to the focus event the timing can be all a screwed up. Looking through StackOverflow I found the following code which forces a wait on the event and ensures the timing works. Without the timeout the selectAll does not work.

This is the code I used to make the effect work

$('.highlighter').on('click', function(){
	$(this)[0].setSelectionRange(0, 9999);
})

 

and this is the SO answer where I got the solution from.

http://stackoverflow.com/questions/3272089/programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari

 

Posted in iOS, Usability | Leave a Comment »

Dynamically changing form labels into placeholders for mobile devices

Posted by MarkyRoden on February 3, 2015

When building a mobile interface with bootstrap, one design option is to use placeholders to signify the field label.

a1

This approach has many critics who questions the page accessibility, the fact that when you click into the field and start typing you lose the context, and so on. It is however an approach which is frequently used. In this article I wanted to show how I made the PSC contest submission form go from “Labels” to “placeholders” using media queries.

Labels

Looking at the form normally we see labels and fields

a2

If we have Labels and placeholders together at the same time, the effect is not really all that pleasing to the eye

a3

As the screen size is reduced the bootstrap styling kicks in around the Galaxy Note 4 size

a4

But when we get to the phone size screen the labels are removed and the the placeholders are made visible.

a5

 

If you go the https://contest.psclistens.com site you can play with it yourself by resizing the page

How does that work then?

The labels are easy – they are hidden with a media query

@media screen and (max-width: 460px), screen and (max-device-width: 460px){
	label:not(.projectSponsor) {
		display: none !important;
	}
}

The placeholders are not so easy though. The first problem is that the “placeholder” attribute does not have a CSS value to “display:none”. The second is that they are as yet not governed by a non-vendor prefixed style. Although you cannot hide the placeholders you can color them.

The code below is a media query which basically says that when the screen is above 768 pixels then the placeholders get a style color of white. I had to !important then to get it to override bootstrap properly. When the screen gets smaller the white override is lost and the bootstrap grey is seen.

	@media (min-width: 768px) {
		.form-control::-moz-placeholder {
		    color: white !important;
		    opacity: 1;
		}
		.form-control::-moz-placeholder {
		    color: white  !important;
		    opacity: 1;
		}
		*::-moz-placeholder {
		    color: white !important;
		}
		.::-webkit-input-placeholder {
		    color: white !important;
		    opacity: 1;
		}
		::-webkit-input-placeholder {
		    color: white  !important;
		    opacity: 1;
		}
		*::-webkit-input-placeholder {
		    color: white !important;
		}

	}

 

So the labels are hidden at 460 but the placeholder is displayed at 768 – so yes if you watch carefully as the screen is reduced you will see a screen size between the iPad and the phone where both are visible. This was done for effect so that you can see it happen.

Conclusion

Without going into the merits of whether or not this is an appropriate design method for displaying information to users, this served as a nice example of what is possible. This was all done within the context of an XPage.

Check it out – https://contest.psclistens.com

Posted in Bootstrap, CSS, PSC, XPages | 3 Comments »

Best ConnectED ever !!!

Posted by MarkyRoden on January 29, 2015

All one of it, and it was the best!!

Well OK seriously, it was also the best Connect-o-sphere I have been to in all my 4 years.

  1. Above all else I had an excellent time hanging out with and speaking with the most excellent Mark Leusink. It is kinda hard to coordinate a presentation when you only have 48 hours to prepare together, Mark made it very easy. When people like Mark Myers (who I have an inordinate amount of respect for) say things like this about you, it is very hard not to blush.
  2. I stopped hearing “Java is the way to go, if you are not using Java then you are doing it wrong”. What I started to hear was “you need to use the right tool for the right job and Java is not always the right tool”. The transformation is stunning, the eyes are open, the possibilities are boundless. I also think I shocked a few people by accepting and encouraging that their is a very good place for Java as well ! Collaboration, whodda thunk it.
  3. I cannot wait for Bluemix to enable me never use the Domino HTTP engine again. Well OK not quite…..but the possibility of writing an application on a node.js server to use Domino as my NoSQL data source makes me all gushy inside. Many questions remain and I will get into that in future posts, but ooooh the possibilities.
  4. Almost every vendor I spoke to had their best year in ages – primarily due to the large number of technical people in attendance I guess, but there was a sense of optimism which was severely lacking after last year.
  5. I have a new respect for Rene Winklemeyer and Theo Heselmans. Two excellent guys I really didn’t know so well before – they were entertaining, educational and exceptionally engaging speakers.
  6. There are a number of people who have intentionally (or not) made my community participation possible and Susan Bulloch is one of them – I will *always* be grateful for the opportunity to speak in Orlando and she gave that to me. (yeah I cried too :( )
  7. Multiple attendees stopped me in the corridor and said *thank you* for the Angular presentation. The main reason was because it makes more sense to them than going XPages. Serves to remind me that when this is all over I want to be a teacher…..
  8. I went to more sessions this year than any other – I also missed more sessions due to conflicts than any other – this is a GOOD THING because more choice means a better conference and more attendees.

Thank you to everyone who sang Happy Birthday in the middle of the Dolphin bar – I am humbled :) Thank you to @woowar who invited me to the Penumbra social so that I could have a glass of Champagne on my birthday – very classy. Thanks to Darren Duke for paying for it ;) Thank you everyone who attended the session(s). That’s well over 150 people, and only one guy walked out before they were finished – very flattering. Thank you to Andrew Barickman and PSC who gave me the opportunity to attend. Thank you to everyone who stopped me and said hi – love meeting people and sharing stories. Thank you to the bouncer for my presentation with Mark Leusink who encouraged people to come back for the second session – we had a full room the second time and it would not have happened without him. Thank you to Mac Guidera who let me speedgeek, gotta tell you by the end of it I was sick of the sound of my own voice !

Thank you to everyone I met – I have no idea when we will meet again, but I know we will talk soon :)

Marky

Posted in IBMConnect, Just Marky, PSC | 7 Comments »

Slide Deck for – BTE 102: The Future of Web Development Write Once, Run Everywhere with AngularJS and Domino

Posted by MarkyRoden on January 27, 2015

It was a great great honour and pleasure to speak with Mark Leusink this week at IBMConnectED

As promised – here are the slides :)

Posted in Angular in XPages, Angular.js | 2 Comments »