XPages and Me

My Journey into XPages Development

Tag Archives: Custom Control

Diving into Bootstrap and Font Awesome – Part 3: Displaying / Hiding Content Based on Device Type

When designing an application, that is going to be used on different devices (desktop, tablet, mobile), your design for each of the devices might be very different from each other. Thus, you need to make sure that each design is only being displayed on the device type, it was designed for.

Obviously, you can create different custom controls that will contain the UI for the different devices. But how to hide or display them? It is not very hard to check the screen’s size with client-side javascript, but how do I pass that on to a rendered property?

Here is one way to do it:
Read more of this post

Dabbling in Bootstrap and Font Awesome Series Overview

I’ve pretty much wrapped up my “Dabbling in Bootstrap and Font Awesome” series, so, I wanted to give you a list with links to all the topics covered:

Read more of this post

Diving into Bootstrap and Font Awesome – Part 2: Enhancing the Bootstrap Panel Custom Control

As I’ve mentioned in my post “Dabbling in Bootstrap and Font Awesome Part 7: All these shiny new toys! What now?”, using responsive UI frameworks and creating web apps for mobile devices, forces us developers to rethink the way we set up an application’s UI.

With Bootstrap’s grid system, you can put content pretty much wherever you like and using Bootstrap panels, you can organize your content in a way that makes sense and looks good, be it on a desktop or a mobile device.

If you have used the Bootstrap Panel yet, you might have noticed, that it expands to the height of the content inside. That can be problematic:
Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-8: re(Use) Me! (Panel)

The Bootstrap panel can be used, to nicely organize content on your web page. In this post, I will show you how to create a reusable custom control for the panel.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-7: (re)Use Me! (Modal)

Today, I am going to show you how to set up a reusable custom control for a Bootstrap Modal.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-6: (re)Use Me! (Navbar)

In this post, I will show you how I set up my Bootstrap navigation bar. I know there are already many different posts out there on that. The difference with mine is, that I am using a profile document to define, what kind of navigation bar is being used across the whole application.

In addition, the profile document is also being used to manage the Bootstrap container type and field sizing (more about that in another post).

So, lets begin.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-5: (re)Use Me!

Today, I will enhance the FA Icon custom control from one of my previous posts

Enhance the existing FA Icon Custom Control:

“So, how are you going to enhance the custom control?” , you ask. “It already is perfection.”, you say. Well, thank you for the compliment but there is almost always room for improvement. So, I am going to add additional “Property Definitions” that will allow you to add Bootstrap helper classes to your icon. Sounds intriguing, doesn’t it?

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-1: (re)Use Me! – Update

After using the Column Custom Control from my original post in many different applications for a while, all the sudden I ran into an issue. I had created a new application with a search panel atop a view panel and was using the column custom control in it for the search fields. Whenever I tried to preview the XPage in the browser, I would get an error message for the following line of code, that calculates the style classes for the column div:

Image 1

Really weird, especially since the previous 4 rows of code seemed to work fine, doing exactly what the one line of code was doing.

Anyway, to fix it, I had to do the following:

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-2: (re)Use Me!

In Part 6-1 of my XPages and Bootstrap / Font Awesome series, I showed you how to create reusable custom controls in order to make XPages development easier and quicker again.

I know I’ve promised to show you in this part, how to use these custom controls. However, I thought I am going to add a few more reusable custom controls that might be helpful and in part 6-4, I will show you how to use them all (promise!).

So, in this part, I’ll enhance the Control Wrapper custom control I’ve created in part 6-1 and add another reusable Custom Controls: One for using Font-Awesome Icons

In part 6-3 I will show you how to create two reusable custom controls for Input Groups.

So, lets get started

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-1: (re)Use Me!

Important: Please see this update regarding the column custom control

Now you got Bootstrap and / or Font Awesome set up for you XPages development environment and you are ready to develop some cool applications. However, you come to find out that developing while using the Bootstrap framework can be rather tedious. Bootstrap utilizes a grid system that allows you to put content pretty much anywhere on a web page, but it also means adding more divs for the rows and columns.

On top of that, to have just one field rendered Bootstrap style, it involves a lot: A div, label, field, help block etc. This kind of blows the quick development we are used to in XPages by drag-and-drop, out of the water.

I was looking for a way to make it easier and quicker again and, inspired by Mark Leusink’s post on a reusable field custom control for Bootstrap, I started to create all kinds of custom controls for all the different field types. Halfway thru creating them though I realized, that still doesn’t make it easier. Especially if you wanted to do something out of the ordinary with a field, you wouldn’t be able to use these custom controls, you’d have to create everything manually for this one field.

So, after some thinking, fiddling and trying out, I came up with a set of three reusable custom controls, to speed up the development process again:

A Row custom control

A Column custom control

A “Control wrapper” custom control

In this post, I will show you how to create them and the next post will be about, how to use them. So, lets get started:

Read more of this post