My Journey into XPages Development
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
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:
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
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.
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:
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:
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.
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.
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.
Recent Comments