Websocket overview/tutorial video  

By Csaba Kiss | 1/30/17 4:09 PM | - | Added by Oliver Busse

I promised an overview video of the websocket enabled XPage application that we created during the websocket tutorial series. Here is a 30-minute detailed explanation how the application works. I hope you enjoy it!

x$ selector problem with JQuery 3  

By Csaba Kiss | 11/23/16 7:50 PM | - | Added by Oliver Busse

A quick tip for people who use JQuery and x$. The selector property of the JQuery object has been deprecated in JQuery 3. I offer you a simple solution in this short post.

How to use html5 tags in your XPage applications with special custom controls  

By Csaba Kiss | 11/20/16 6:29 PM | - | Added by Oliver Busse

I use special custom controls to include html5 tags that are not available in Domino Designer, such as nav, aside, ul, h2, and so on. I am going to show you how I created these custom controls and how I use them.

Receiving websocket messages - Part 3  

By Csaba Kiss | 11/1/16 10:52 AM | - | Added by John Oldenburger

In the previous post we learned how to send websocket messages. You could see that the message arrived (the white messages in the Chrome Toolbox >Network > WS >Frames). But we lacked the logic of what to do with this information. Whenever a message arrives in the browser the onMessage event is fired.

Sending websocket messages - Part 2  

By Csaba Kiss | 10/17/16 10:30 PM | - | Added by John Oldenburger

WebSocket has one of the simplest API. There are only 2 methods and 4 events. In this post, we will examine the send method. Xocket.io has certain peculiarities that you have to be aware of when sending messages. It relates to the format of the websocket message and the definition of the recipients.

Your first websocket XPage application - Part 1  

By Csaba Kiss | 10/6/16 11:19 AM | - | Added by John Oldenburger

After the installation of the websocket plugin, it’s time to begin coding your websocket application. In this first part of this coding tutorial series, we will create our websocket enabled applcation from scracth and establish websocket connection to the server.

Beyond XPages: How to use react.js in your next project  

By Csaba Kiss | 9/5/16 10:33 PM | - | Added by John Oldenburger

This is a screencast post about how to set up your development environment to use react.js library in your next “XPage” project. You might have read many blog post recently about the demise of XPages. It’s clear that IBM does not invest much in XPage development.

Securing your WebSocket server with TLS  

By Csaba Kiss | 7/26/16 12:52 AM | - | Added by John Oldenburger

This is the final post about WebSocket server installation. We will add TLS to the websocket server, so you can establish secure websocket connection. There are multiple great guides how to upgrade your Domino server using SHA-2 certificates. If you use a development server self-signed certificates are probably the easiest way to go.

Setting up the websocket user  

By Csaba Kiss | 7/17/16 2:48 PM | - | Added by Oliver Busse

We began with the basic Websocket server install in the previous blog post. It’s time to secure our server by adding a special user to the database that will be responsible for running the WebSocket server.

Basic WebSocket Server Installation Guide for IBM Domino Server  

By Csaba Kiss | 7/13/16 4:35 AM | - | Added by Oliver Busse

I am starting a new series of blog posts here about websocket technology and show you how you can use this wonderful technology in your XPage applications. First, I’ll guide you through the installation of the xocket.io plugin on your domino server. Then we’ll secure the server by adding a special WebSocket user and TLS.

SmartAdmin professional Bootstrap dashboard theme in Xpages  

By Csaba Kiss | 6/8/16 1:01 AM | - | Added by John Oldenburger

Recently, I have purchased a popular Bootstrap admin theme, called SmartAdmin Responsive WebApp. I wanted to see if I can implement this theme in Xpages. Here is the result. I usually build XPage applications that use widgets. These widgets are independent applications for chatting or uploading files or tracking user presence.

Bootstrap navbar center section  

By Csaba Kiss | 5/19/16 5:08 PM | - | Added by Oliver Busse

Sometimes, it would be nice to add some text in the middle of a Bootstrap navbar. However, Bootstrap does not come with a navbar-center class. I’ll show you how to supplement the navbar with a custom class to achive this goal.

CSS preprocessors in XPage development using Prepros  

By Csaba Kiss | 5/16/16 1:10 AM | - | Added by John Oldenburger

I have created a rather long (27 min) screencast video about how to set your Domino Designer up to work with css preprocessors. I give a really short tutorial about Sass, then I create a simple XPage application that uses Sass for its styling.

JavaScript code templates  

By Csaba Kiss | 3/31/16 9:00 PM | - | Added by Oliver Busse

Code templates are your friends. They help you with complicated syntaxes. Here are a few of them that I find useful.

A Drag&Drop file upload custom control  

By Csaba Kiss | 3/13/16 11:27 PM | - | Added by John Oldenburger

Recently, I have had to create a file upload custom control for a project. I looked around in XPage circles and I liked what I saw but none of the solutions satisfied my requirements. So I decided to create my own learning from the others’ examples.My upload custom control began life as Julian Buss’s html5 file upload custom control.

Bootstrap grid gutter control  

By Csaba Kiss | 3/10/16 3:55 PM | - | Added by John Oldenburger

The Bootstrap grid comes with a 30 px gutter between columns. Sometimes, it’s just too much. I am going to show you a simple way to control the gutter between columns or even collapse it completely with a simple Bootstrap row custom control .

Real-time video chat XPage application using websocket and WebRTC technologies AD-1077  

By Csaba Kiss | 2/3/16 11:53 AM | - | Added by John Oldenburger

The websocket protocol/API is part of the HTML5 standard. This presentation will demonstrate how to bring chat and video communication capabilities to XPages using the OpenNTF websocket plugin with WebRTC so that attendees can learn how to start their own real-time communication application.

The panel custom control for UIkit layout  

By Csaba Kiss | 12/2/15 1:25 PM | - | Added by Oliver Busse

Today we are going to create the custom control that’s collapsible and can hold any content for our UIkit layout. We continue our UIkit layout custom control kit that we began in the previous article. The panel will be an accordion component with a title and content panel.

Website layout with UIkit introduction  

By Csaba Kiss | 11/30/15 12:28 PM | - | Added by Oliver Busse

This next series of blog posts will show you how you can create modern web layouts with UIkit in XPages using 3 special custom controls that we are going to make in the next articles. The aim is to be able quickly create and modify layouts like this example.

UIkit advanced grid features  

By Csaba Kiss | 11/11/15 3:00 PM | - | Added by Oliver Busse

Today, we’ll look at the advanced features of the UIkit grid. These features include nested grids, grid dividers, source ordering, matching column heights and adding margins dynamically to breaking columns.

UIkit grid basics  

By Csaba Kiss | 11/8/15 3:06 PM | - | Added by Oliver Busse

The bread and butter of a responsive front-end framework is the grid system. This is the area where uikit is most different from Bootstrap. While Bootstrap uses a 12-column system, UIkit uses only 10, but it is actually more versatile than Bootstrap.

UIkit, a light-weight modular front-end framework for XPages  

By Csaba Kiss | 11/8/15 3:05 PM | - | Added by Oliver Busse

In this blog post, I am going to show you how to bring UIkit, a modern modular front-end framework to your next XPages web application. Previously, I wrote about Google’s Material Design, and how to import it into Domino Designer.

Material design application template  

By Csaba Kiss | 10/2/15 6:17 PM | - | Added by Oliver Busse

In this tutorial we will download all the necessary style sheets, JavaScript files, fonts and icons. Then we modify them, so they can be used in an Xpage template. This template will include all the necessary files and will not use CDNs (Content Delivery Network). In the previous post, I introduced you to Google’s Material Design. This time, we actually do stuff. Let’s begin.