IBM Bluemix – take your skills to the cloud

This article was originally posted on SocialBizUg.org and is being reposted with permission (Feb 2016)

Hi!

For whose of you who do not know me. my name is Mark Roden and for those who do not know me I am a Web Developer for PSC Group LLC in Chicago,IL.

I have been awarded the honor of being an IBM Champion for 2014 and 2015. You can find out much more information about me on my blog – http://www.xomino.com and you find me on twitter @MarkyRoden

My Evolution

My career has been built on Lotus Notes, Domino and in the last 4 years XPages. I call myself a web developer because that is what I do, I build websites.

What my progression through Domino and XPages has taught me is that evolution and progression as a developer is essential, necessary and a lot easier than having to deal with other people forcing you to adapt on their time frame.

Everyone is different, some are drawn to the logic of a database interaction some to the user experience and some in the middle. Many classic Notes developers kinda fell into it without having a classic programming background. The great thing was Notes was the Model (Data), the View (Notes form) and the Controller (LotusScript) all at the same time. This made life easier, quicker and ultimately served the point of Rapid Application Development.

Today “RAD” is often done using tools which don’t require any programming whatsoever. With online tools like Quickbase and a host of others, users are able to create websites which collect and process data, run basic workflows, send emails and perform tasks, without programmers. But there is still a pervasive need for programmers, to automate those tasks which cannot be simplified to a couple of screens and an approve button.

Programming The Future Cloud

Cloud is something which has been around forever. From Compuserve to yahoo mail, cloud as a service has existed for decades. What has changed is not only a better marketing strategy of managed services, but a general acceptance that connectivity, security and critical business services can be run on other people’s networks.

Cloud is many thing to many people, Software as a Service (SaaS), Infrastructure as a Service (IaaS) and Platform as a Service (Paas). In our XPages world the cloud we have been able to use for a while not is Softlayer which is really IaaS. Someone else provides the hardware and network connectivity, but you have to run the server and patch it yourself. Platform as a Service takes care of that as well for you. With a PaaS you are entirely responsible for how “much” of a server you need, not the server itself. For more on what is cloud check out this link (http://www.ibm.com/cloud-computing/us/en/what-is-cloud-computing.html)

IBM Bluemix

IBM Bluemix is a Platform as a Service (mostly) cloud offering and XPages is coming to it. In June 2015 IBM will release XPages in two available forms within Bluemix. The release will be “experimental” which means

  1. Free
  2. Not perfect yet but in principle functional.

XPages will be offered as a “Build Pack” which means you can use the underlying XPages JSF runtime to build your apps on it, and it will also be offered as purely a data storage NSF. This means that you will be able to use a non-XPages buildpack to be able to run your web server/application server and use Domino as a data store.

To find out more about IBM Bluemix you can sign up for a free account at http://www.bluemix.net – for at least the next 6 months the XPages runtime and data store will be free to use without limitations. Once it goes from Beta to production ready the cost will be based on usage.

Your Evolution

Going back to my original point of evolving as a developer, this is an amazing opportunity to be able to play with something completely new, while at the same time using something which is completely familiar. Ignoring all the business benefits of a PaaS for the moment and focusing solely on a personal growth perspective, this is an amazing opportunity to learn.

Within the Bluemix environment, one of the things I have learned to appreciate is the working tutorials which are provided. IBM is also pumping out lots and lots of example blog posts and code samples so that you can begin to learn all the cool features.

If you have been struggling with XPages and or the idea of writing Java – no worries!! Bluemix gives you an opportunity and a chance to still work with something you know, the data model (Domino data), and at the same time learn something new like node.js (A powerful, scalable web server coded entirely in JavaScript).

Evolve yourself, it will be the best decision you have made in years.

 

 

Aborting a jQuery ajax request

In this article I will show how you can abort a jQuery ajax request, preventing your user experience from disappearing into space.

Introduction

We have all done it – opened a page which runs an infinite loop consisting of some form of while(true). But no-one means to do that on purpose….That said there may be occasions where we are making requests to pages which we know are really really slow. Keeping a long connection open on the server restricts the number of open threads and potentially causes lockups. It is also a terrible user experience more importantly.

It might not be quite as relevant nowadays as it might have been to a Domino server say 10 years ago but still – pretty cool idea.

You can abort the ajax request with .abort()

Slowly loading XPage

I created a simple XPage with a before render response page which will take a long time to finish (as you can see below is ~30 seconds)

<xp:this.beforeRenderResponse>
	<![CDATA[#{javascript:
		for (var i=0; i<50000000; i++){
			true;
		}
		return true}
	]]>
</xp:this.beforeRenderResponse>

a1

Aborting the Ajax call

Aborting the call is relatively simple – by assigning a variable to the ajax call we can  then just .abort() it

var temp = $.ajax({
  url: 'http://copper.xomino.com/xomino/jQinX2.nsf/xRunForever.xsp'
}).error(function(){
   console.log('hey what happened')
})

temp.abort()

Running it manually we can see this

a2

a3

But a more practical solution is to set a timeout function to test the ajax value and abort if it is taking too long. How long that is, is entirely up to you……

function dontRunForever(url, time){
    var temp = $.ajax({
      url: url,
    }).error(function(){
       console.log('hey what happened');
    }).success(function(){
       console.log('All Done');
       temp = false
    })

    setTimeout(function(){ //Using function() inside the setTimeout means the function is executed after the "time"
      if(temp){
       console.log('aborting')
       temp.abort()
      } else {
       console.log('ajax call completed in time')
      }
    }, time)
}

dontRunForever(
  'http://copper.xomino.com/xomino/jQinX2.nsf/xRunForever.xsp',
  5000)

So when we run this with a timeout of 5 seconds, we see the abort() trigger

a4

But when we use 50 seconds we see a successful completion and no abort message – and eventually the end of the Timeout success message

a5

This is all well and good – BUT…..

Just because the ajax request is aborted – this does not mean the task stops running on the server – this whole concept improves the user experience and nothing else. This will not stop a never ending task running on the server – only the server settings will truly kill that.

a6

 

Conclusion

When I found this and the fact that it has been around for over 4 years I was somewhat annoyed that I did not know about it earlier, but it is pretty cool still all the same 🙂

 

IBMSBT in XPages: Custom Business Cards

In this article I will introduce the JavaScript API for Social Business Toolkit and show how to make a simple custom vCard using the jQuery hovercard.js plugin.

Introduction

When you are modifying on premises Connections there is an API interface provided and described by IBM for integration of the Profiles Business Card. I could not find this piece of code however within Smartcloud. The Playground API also does not provide an example of profile vcard within Smartcloud. I guess it must be in there somewhere, but I decided to make my own. If one is available, please point me at it…….

Using the SBT JavaScript API to get Profile information

The SBT JavaScript API is REST based and provides a limited set of functionality to access information from the connections installation. I found the following example in the Playground. Looking at the example in the playground the critical URL for accessing Profile information is this

url: ‘xsp/.sbtservice/proxy/smartcloud/lotuslive-shindig-server/social/rest/people/lotuslive:user:’+userId+’/@self?format=json’,

where userId is the id of the user you wish to see the information from. In my case a JSON object called entry is returned with many options.

a1

Hovercard.js

Using the jQuery plugin hovercard.js I was easily able to create the HTML which I wanted to put within a card. This HTML is hidden on the XPage and the actual HTML I want in all within the selector class “js-vcardHTML”

<div style="display:none" class="js-vcardHTML">
	<div class="row ">
		<div class="col-sm-8">
			<div class="vcardName"></div>
			<div class="vcardOrg"></div>
			<div class="vcardEmail"></div>
			<div class="vcardPhone"></div>
		</div>
		<div class="col-sm-4 vcardImage">
		</div>
	</div>
	<div class="row" style="margin-top: 5px; border-top: 1px dashed #a6a6a6">
		<div class="col-sm-6">
			Profiles
		</div>
		<div class="col-sm-6">
			Files
		</div>
	</div>
</div>

Within the application code I instantiate the hovercard.js code in the following manner. It retrieves the HTML from within js-vcardHTML. Populates it with the data from within the “entry” JavaScript object and then displays it on hover.

$(".contacts").hovercard({
	self: this,
	detailsHTML: $('.js-vcardHTML').html(),
	width: 350,
	cardImgSrc: '',
	onHoverIn: function () {
		// set your twitter id
		var userId = 'markyId'; //calculated outside of this demonstration

		$.ajax({
			  url: 'xsp/.sbtservice/proxy/smartcloud/lotuslive-shindig-server/social/rest/people/lotuslive:user:'+userId+'/@self?format=json',
			  type: 'GET',
			  dataType: 'json',
			  beforeSend: function () {
				$(".vcardEmail").prepend('<p class="loading-text">Loading Business Card...</p>');
				$(".vcardOrg").text("");
				$(".vcardImage").html("");
			  },
			  success: function (data) {
				self.cardImgSrc=data.entry.photo
				console.log(data)
				console.log(data.entry)
				//$(".vcardName").text(data.entry.displayName);
				$(".vcardEmail").text(data.entry.emailAddress);
				$(".vcardOrg").text(data.entry.org.name);
				$(".vcardImage").html("<img src='https://apps.na.collabserv.com/contacts/profiles/photo/"+userId+"'/>");
			  },
			  complete: function () {
				$('.loading-text').remove();
			  }
			});

	}
});

a2

Conclusion

In this article I have shown how we can retrieve profile information from the Smartcloud JavaScript API and how we can create our own custom business card using the hovercard.js jQuery plugin.

Amusing that the API reference still contains a reference to Lotus – draw your own conclusions 🙂

IBMSBT in XPages: My Communities

In this article I will describe how to display a list of “My Communities” in an XPage. To do this I will have to create an ArrayList of communities and use a repeat control in an XPage to display them.

Getting My Communities

As I showed in this previous blog post there were some interesting issues in setting up the managed beans for getting the communities out of connections/smartcloud.

But in quick review this is the code for getting my communities.

package com.xomino.sbt;

import java.util.Collection;
import javax.faces.context.FacesContext;

import com.ibm.sbt.services.client.ClientServicesException;
import com.ibm.sbt.services.client.connections.communities.Community;
import com.ibm.sbt.services.client.connections.communities.CommunityList;
import com.ibm.sbt.services.client.connections.communities.CommunityService;
import com.ibm.sbt.services.client.connections.communities.CommunityServiceException;
import com.ibm.sbt.services.endpoints.Endpoint;
import com.ibm.xsp.extlib.util.ExtLibUtil;

public class Utils {

	public static void checkAuthentication() throws ClientServicesException{
		Endpoint theEndpoint = getEndpoint();
		if (!theEndpoint.isAuthenticated()){
			theEndpoint.authenticate(true);
		}
	}

	public static Endpoint getEndpoint(){
		Endpoint endpoint = (Endpoint) ExtLibUtil.resolveVariable(FacesContext.getCurrentInstance(), "smartcloud");
		return endpoint;
	}

	public static Collection<Community> getCommunities() throws CommunityServiceException{
		CommunityService svc = new CommunityService();
		CommunityList communities = svc.getMyCommunities();
		return communities;
	}
}

What is interesting is that the svc.getMyCommunities() returns a “Collection” and the code assist not only told me this, but it changed the return of the method “Collection” and added the import java.util.Collection.

So that is all well and good – but then how do I get that only my XPage?

Well I actually used the JavaDoc !
c1

So then in the XPage I used a repeat control to iterate through the “collection”

<xp:repeat id="repeat2" rows="30"
	value="#{javascript:com.xomino.sbt.Utils.getCommunities()}" var="myCommunities">
	<xp:div styleClass="readonly" disableTheme="true">
		<xp:text disableTheme="true">
		  <xp:this.value><![CDATA[#{javascript:myCommunities.getTitle()}]]></xp:this.value>
		 </xp:text>
	</xp:div>
</xp:repeat>

and there we have it.

c2

So what is a Collection exactly? I guess I ought to find out……

Something missing in smartcloud SBT ? – “Cannot find Endpoint connections”

I started down the path of adding “My Communities” to my little test database and following the same process as I had found the profile information I went to the playground and looked at the Java snippets for SmartCloud – get Communities

b4

 

and from that I created the following Java code in my Utils class. When looking at the eclipse errors and adding the correct imports, there is no services.client.smartcloud.communities.Community option.

b3

Running that I got the following error in my XPage

b1

I knew that the only Endpoint I had created was the managed-bean “smartcloud”

So I copied and pasted the entire smartcloud bean in my faces-config.xml, renamed it “connections” and voila it solved the problem. Called connections, connecting to the SmartCloudOAuthEndpoint. Weird!

c1

 

So I am not sure if this is a bug or defect or what within the SBT. It looks like many of the “connections” classes and objects have been ported over to smartcloud as there and many smartcloud classes with the same name and functions as the connections ones.

Or maybe this is intentional for some reason that I am not aware of.

Either way – noted and recorded so I don’t forget.

 

 

Scoping your beans correctly with the IBM Social Business Toolkit

If you are setting up the IBM Social Business Toolkit within your XPages application – the faces-config.xml is where you configure your SBT connection to Smartcloud/Connections. This particular issue arose for us recently but makes perfect sense once we understood what was going on.

Initially we had the following and everyone who accessed the application got the same list of one user’s files. We struggled to figure out why.

In the faces-config.xml one of the required parameters is the scope of the CredStore managed bean.

 <managed-bean>
    <managed-bean-name>CredStore</managed-bean-name>
    <managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
    <managed-bean-scope>application</managed-bean-scope>
  </managed-bean>

Turns out it was always the first person who logged in – which makes sense as the bean has application scope. The bean stays in scope and then everyone else starts to use it as well – giving them the wrong files.

The right answer is to use session scope for the CredStore bean (and smartcloud bean) which means that it is only in scope for the requests which are being by the session user – which is for each user exactly what you want.

 <managed-bean>
    <managed-bean-name>CredStore</managed-bean-name>
    <managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>

 

IBMSBT in XPages: Getting set up with a Social Business Toolkit (Part #2)

In this article I will show how to connect to Connections Cloud and in turn how to use the Java API to display “My Files” on an XPage using a simple XPages repeat control.

In the previous article I showed how to create an internal App within your Connections Cloud account. In this article we will look at how to configure your XPages application to connect to the cloud.

You will see references to “– TS” in this article and that would be where Mr Toby Samples has provided me the correct language as opposed to the dribble I originally wrote – #ENaT

Setting up the face-config.xml

In my case I am connecting to Connections Cloud so I will be using the managed bean for that.

Extract the face-config.xml from the sample XPagesSBT.nsf database and copy the contents into a new database. I cleaned mine up and removed all the beans that I will not be using. I am then left with the following: CredStore and smartcloud.

a1

 

Within the Smart cloud bean we have to insert the appId, consumerKey and the consumerSecret – which of course do not coincide with the names on the smart cloud screen.

s15

“The CredStore is referenced as a value of where to store Credentials on the EndPoint in the other managed bean. – TS”

Authenticating with Connections Cloud

Create a new Java Class Utils

package com.xomino.sbt;

public class Utils {

}

Within there we are going to need to do a number of things but at a high level we need to authenticate with smartcloud and then get the list of myFiles

So I am not going to lie to you – I didn’t find this Toby did but here is how I understand it. Looking at the Javadocs (*crying*) – http://infolib.lotus.com/resources/social_business_toolkit/javadoc/index.html we can find the class which is referenced from the bean. This is where my dislike and distrust Java throws up a flag and tells me that Javadocs was only written for people who know what they are doing. Look at the help docs for a Github JavaScript project – easy to read – JavaDocs like these – absolutely not. But I digress and continue…..

<managed-bean-class>com.ibm.sbt.services.endpoints.SmartCloudOAuthEndpoint</managed-bean-class>

s2

And within there you can find “isAuthenticated()”

s3

from that you can see that it is a

  • public class which return a boolean (true/false).
  • It is copied from the Endpoint interface (don’t understand interfaces yet)
  • returns true or false.

The Endpoint

“The endpoint is more of a Provider of data that you have to authenticate.  similar to a Database or a Rest Service – TS”. In this case, the Endpoint is the information provided in the managed bean. The URLs for authentication via OAuth, the keys and so forth. So first thing we need to do is get the Endpoint from the Bean. Within Utils:

s5

  • public static Endpoint getEndpoint()
    • a public method
    • static means that it cannot be instantiated by another method
    • Endpoint means “In this case Endpoint means that the method must return an object that implements the Endpoint Interface. – TS
    • getEndpoint() the name of our actual method
  • Endpoint endpoint = ExtLibUtil.resolveVariable(FacesContext.getCurrentInstance(), “smartcloud”);
    • Endpoint
    • variable name endpoint
    • ExtLibUtil.resolveVariable(FacesContext.getCurrentInstance(), “smartcloud”); is how we get the value of the smartcloud bean. The faces-config.xml is used to expose that to the application and within the context of this database we can get it in this fashion.
  • return endpoint
    • returns the managed-bean smartcloud

At this point I would like to add that there is no way that you can possibly work this out for yourself without help from someone else. This is part of the scary thing for Java, it is hard to know where the heck and what the heck to do. But unless you do it you won’t know. I don’t think the intricacies of the language are that hard – it is just the volume. Part of doing this and blogging it, is so that I haev a code repository building up. I cannot remember all the code I have written, but if I remember where it was I can go get it again later. Anyway back to the code

Looking at the code it is all underlined and there are a bunch of errors all over the place. This is where Eclipse is actually awesomely helpful and you start to get busy fixing the errors.

Mousing over the errors you can see Quick fixes to the problems

s6

Select “Import ‘ExtLibUtil’ ” and magically appears at the top of the page – and no red underline now – wooo

s7

so go through and complete the others……and then a whole new error comes up

s8

“So “ExtLibUtil.resolveVariable” always returns a java.lang.Object, but the first part of the expression expects an object that implements the Endpoint Interface so you have to force it (Cast) to be an Endpoint, if its not really an Endpoint object it will blow up when you run it. with a Class Cast Exception – TS”

Fixed that and now on the Authentication

Authentication

We can now start to create a “checkAuthentication()” method within our class. This will be called from the beforePageRender within our XPage – and will check to make sure that we are. If it isn’t then the page will be automatically redirected to smartcloud to log in.

We can use the Eclipse type ahead which is very helpful in getting the code right and not typing the wrong values

s9

uuurgh another error

s10

If you remember from the Javadoc, the isAuthenticated() method throws a clientServicesException, which means when it fails that is the error type which is bubbled up to the top. You know when you see the stack trace and you have screwed something up in XPages you get the java screen of death – that comes from here. Needs to be added otherwise the class will not compile.

Fixed

s11

 

and then finally we have finished this authentication piece !! yeah wow !
NOTE: In the Javadocs you can see this “Fields inherited from class com.ibm.sbt.services.endpoints.OAuthEndpoint”

make sure that when you import the option for Endpoint you pick the right one (there are two). The Javadocs do have their uses, assuming you understand them !!

s12

ok so now to put that on an XPage

the XPage

This is pretty simple. In the XPages beforeRenderResponse event we add the following code to force authentication

 

<xp:this.beforeRenderResponse>
	<![CDATA[#{javascript:com.xomino.sbt.Utils.checkAuthentication();
	}]]>
</xp:this.beforeRenderResponse>

 

After that we are going to add a display field to just show whether or not we are authenticated – the displayName() of my Profile. (Wow this is a LONG blog post).

Getting my profile

I went to the Playground and looked at the Java example for Smartcloud get my Profile. Now this is a JSF example but what I was looking for was the Objects and methods for getting the profile. I am really proud that this worked first time – means something is sinking in…..

s16

 

I added a new method (which I knew was wrong and basic) in my Utils function and obviously got errors…..

Correct the Profile Objecta1

Correct the ProfileService Object

a2

Correct the exception handling

a3

Correct the return to be a String (not void)

a4

and then we have our new class

a5

 

In the XPage I created a computed field which was bound to the class Method getProfileDisplayName()

<xp:text escape="true" id="computedField1"
	value="#{javascript:com.xomino.sbt.Utils.getProfileDisplayName()}">
</xp:text>

 

And then I loaded up my XPage…………

First thing that happens – Authentication prompt for Connection Cloud

s13

and then *amazingly*

a6

 

I don’t know about you – but I am staggered !!!

Conclusion

WOW this is a long post (probably one of the longest I have ever done). Hopefully I have clearly shown how to set up the Connections Cloud development environment and how to show your first example within your XPage.

Let’s be clear – I am in no way shape or form a Java developer now – but, and this in significant to me, I now know a lot about how to make things work for me within the development environment.

I am pretty stoked actually about how the Profile thing worked – then though I have not the slightest idea how 🙂 That’s a weird, cool, scary feeling.

*rubs hands* Now time to start making something really useful 🙂

 

Toby Comment

In your images you chose to import the “com.ibm.sbt.service.client.smartcloud.profiles” package instead of “com.ibm.sbt.services.client.connections.profiles”  which does in fact work, but its not really best practice.  If you choose the other one which is an interface the code will easily work with all of the other types of Endpoints, because you chose Smartcloud, it will only work with Smartcloud.  Not necessarily a bad thing, but usually we try to use the most generic class/interface possible.  TS

IBMSBT in XPages: Getting set up with a Social Business Toolkit (Part #1)

In this article I will begin to introduce IBM Social Business Toolkit (SBT), provide links on how to get it set up, talk briefly about how it works and then provide my first demo on how to get “My Files”.

The whole of this series will be based on “Smart cloud (now Connections Cloud)” as opposed to Connections on premises. This should not however really affect too much other than how you make the initial connection. After that the API is pretty much the same (for my purposes anyway).

Thank you Kathy Brown

Setting up SBT is not the easiest thing to do – nothing IBM ever is. But I owe a huge thank you to Kathy who did the bulk of the hard work on this. Setting this up locally for me was pretty simple once she knew how. Part of the reason for me writing it down as I said before is self documentation ‘cos I know I will forget 🙂

IBM SBT

Here are some links on how to set it up and configure it – you will have to install it on your server as well as in your Domino Designer.

Setting up on Domino Designer 

Download the latest code from OpenNTF (I used this one). Unzip the file locally and within there you will find the following folder

  • sbtsdk/redist/domino/

Within there you will find the com.ibm.sbt.domino.updatesite-1.0.3.20140723-1200.zip!. That is the file you need to reference when you install the feature into Domino Designer. (If you want to run the playground locally you will also need to install from the playground updatesite)

Setting up the server

Within the zip file references above you will find the features and plugins folders.

j1

Copy them and paste them onto your server in the following directory. The features and folders for the server are listed there.

DominoIstallPath\data\domino\workspace\applications\eclipse

I am sure there is a better “updatesite” way of doing it, but this worked for me *shrugs*

The XPagesSBT.nsf

The database within the zip file gives you some examples of how to work with the API and provides links and examples for the JavaScript API, Java API, XPages snippets and other examples. I am not going to use those examples. There is some cool out of the box feature but

  • The JavaScript API is far from complete (which is why I am learning Java)
  • The Java examples are not complete (which is why I am doing this from scratch)
  • The XPages examples and snippets are very “XPagey” and I would rather do it myself

The faces-config.xml

Now this is the one useful thing you should get from the XPagesSBT.nsf because it contains all the managed beans used by the SBT to connect to Connections Cloud (and Facebook and Twitter and others). In there you will find examples for connecting to smartcloud and connections. You will need these in your quest to create an SBT application.

You will find this file through the Package Explorer, in the WEB-INF folder

j2

Setting up Connections OAuth app

Setting up a Smart (Connections) Cloud “App” for OAuth

Within Connections Cloud, not much less ew, but at least all browser based. This is how to register your app and get the OAuth tokens.

j1

 

 

j2

j3

 

j4

j6

j7

 

In the next article we will actually create our first example to Authorize and pull personal data from Connections Cloud.

 

 

 

 

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

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 🙂

Dynamically changing form labels into placeholders for mobile devices

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