XPages and Me

My Journey into XPages Development

Tag Archives: Custom Controls

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

Advertisements

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-4: (re)Use Me!

… or “xpagesandme.wordpress.com” goes NotesIn9.

So, David Leedy gave me the opportunity to come onto his show and I was finally able to make my first video and here it is as part of his Hackathon:

Enjoy!

P.S.: The NotesIn9 video by Tim Tripcony I am referring to in my video, can be found here.

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-3: (re)Use Me!

Today, I will create two additional, reusable custom controls for Bootstrap’s Input Group. Input groups allow you to add text, icons or buttons before, after or on both sides of any text-based input. For more information, please follow this link.

In addition to creating the two custom controls, I will also demonstrate a little bit, how to use the “Visible” property for property definitions.

Read more of this post

Replicating the Notes Client “Allow Values Not in List” function used by Dialog List and Combobox on a XPage form (Part 2 – How to use the Custom Control on your form)

In part 1 I showed you how to create the Custom Control that you can use on any of your XPages form, where you’d like to give the user the ability to add values that might not be in the list of keywords.

Now I’ll show you how to use this Custom Control.

Read more of this post

Replicating the Notes Client “Allow Values Not in List” function used by Dialog List and Combobox on a XPage form (Part 1 – Create the reusable Custom Control)

I had a requirement to allow users to enter values that are not in the list of keywords. As some of you might know, this is not an option in XPages. My first tries to provide for this functionality were rather crude and the clients didn’t like it. So, after reading this post on the Inner Ring Solutions blog,  I came up with the following solution, which can be reused on any form for single value and multi-value fields.

Read more of this post