fuelux – use a select list inside a placard

Peek 2017-11-23 08-51

Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. It has a placard control, which adds a pop-up element to edit inputs/textareas inline on focus with additional options for explicit accept/cancel actions.

I was trying to display a select list -in angular- when the placard is shown. I achieved it with the following code. I had to put the select list inside the placard-popup div and give it a margin so it didn’t overlap with the header. I don’t know if that’s what has been addressed since version 3.11.4 and that’s the purpose of the placard-popup div, it doesn’t say in the docs or at least i couldn’t found it.

<div id="tipoAudiencia" class="placard">
    <div class="placard-popup">
        <div class="form-group" style="margin-top:30px;">

    <div class="placard-header">Selecciona el tipo de audiencia</div>
    <div class="form-control placard-field glass">{{audiencia.tipoAudiencia.nombre}}</div>
    <div class="placard-footer">
        <a class="placard-cancel" href="#">Cancelar</a>

then in my controller I update the value if it gets accepted

$('#tipoAudiencia').on('accepted.fu.placard', function(){
    console.log('actualizando el tipo de audiencia a ' + $scope.tipoAudienciaEditada);
    $scope.audiencia.tipoAudiencia = $scope.tipoAudienciaEditada;

I had some minor issues with sizing but they’re not showstoppers

Peek 2017-11-23 08-52



Netbeans – Enable symbolic links in Payara (GlassFish) for your application

Screenshot from 2017-11-09 13-08-37

To enable symbolic links in Payara you just have to go to the admin console (http://localhost:4848 or inside netbeans open it in the Services window | Servers | Payara right click it and select ‘open admin console’) and click Configuration | server-config | Virtual Servers | server, then under Additional Properties, click Add Property and enter allowLinking as name and true as value as shown in the image above.

Symbolic links do not work with war deployments, they only work with exploded wars (if you add a symbolic link inside a war, the files from the target dir will be copied inside the war -compressed file-)
The good news is that Netbeans runs your app as an exploded war (folder). The folder path is usually {project}/build/web, to find out the folder which it uses for your app just open the Payara admin console and go to the Applications section and click your app, then look for the attribute ‘Location’
Go to that location and create whatever symbolic link your app needs, for example

cd {project}/build/web
ln -s /usr/share/docs docs

then you can access all the resources inside that folder like so


In production, you’ll have to deploy your app as an exploded war and have the same symbolic link created in the server


jhipster – runs fine from maven but not from intellij

Screenshot from 2017-11-08 14-43-11

I’ve started a project with jhipster@4.10.2 and ran the usual yarn install and afterwards mvn, it executed fine and I could see the result on http://localhost:8080.
Then, I opened the project on [IntelliJ] and followed the steps on the guide to configure the IDE to exclude directories, enable spring support, enable javascript code support and -the most important feature to me- application hot restart. The last step in the guide is to enable the maven IDE profile, but it caused the following error

Error:(19, 8) java: cannot access javax.servlet.Filter
class file for javax.servlet.Filter not found

when I tried to run the app (right click your app class file src/main/java/{package}/{appname}.java and choose ‘Run’), well actually at compile time.

I just had to disable the IDE maven profile to get it working again.

jhipster – The engine “node” is incompatible with this module


En un proyecto generado con jhipster@4.5.6 me estaba marcando el error ‘The engine “node” is incompatible with this module’ al ejecutar el comando yarn install

El problema es que en esta versión el archivo packages.json tenía una línea que decía

“engines”: {
“node”: “^4.3”

mi versión de node es

node -v

y de acuerdo a semver la especificación “node”: “^4.3” me permitiría solamente utilizar node 4.x
Puedes forzar la ejecución de yarn install de la siguiente manera

yarn install –ignore-engines

Esto fue corregido en versiones posteriores de jhipster, por ejemplo en la versión 4.10.2 el archivo packages.json especifica

“engines”: {
“node”: “>=6.9.0”

lo que permite utilizar versiones más recientes de node, v7.1.0 por ejemplo.

para actualizar tu proyecto de jhipster (primero actualiza jhipster con yarn global upgrade generator-jhipster) intenté utilizar el comando jhipster upgrade pero no pudo actualizar debido a que marcaba el mismo error. Para actualizar lo que hice fue simplemente volver a ejecutar el comando jhipster (equivalente a jhipster app)


git – resolver conflictos

Cuando trabajas en un proyecto compartido, con control de versiones en git, es muy frecuente que te encuentres con conflictos al hacer un merge de los cambios de los demás.
Para resolver estos conflictos la mayoría de IDE’s (intellij, netbeans, etc.) tienen una opción ‘resolver conflictos’ que muestra un editor de 3 partes con las diferencias.
Existen varias herramientas en linux para comparar archivos -incluso carpetas- entre las que destaca meld. Puedes abrir esta herramienta desde la línea de comandos -para no tener que abrir el proyecto en el IDE- cuando aparezcan estos conflictos. Primero tienes que instalar meld y luego hay que establecerla como la herramienta por default para resolver conflictos en git con git config --global merge.tool meld y cuando haya conflictos tras hacer un merge la podemos abrir mediante git mergetool.


netbeans – Error package javax.validation.constraints does not exist

I’ve just upgraded to netbeans 8.2. I imported my previous settings from 8.1 when it asked me to do so. When I opened a previous project it throw me an error at compilation time complaining that I have missing the package javax.validation, at first I thought I had to reconfigure the jdk default home for netbeans (file [netbeans_dir]/etc/netbeans.conf) since it was choosing my os default open-jdk. But it had nothing to do with this.

You need to install the EJB and EAR plugin for it to work properly.

If you happened to have the plugin installed and still got the error above, it could be the application server you are using. In my case i configured the project to run on payara 173 which renamed the file bean-validator.jar to validation-api.jar to follow conventions, but netbeans 8.2 didn’t update the library path. A quick solution is to copy the file validation-api.jar in {payara-home}/glassfish/modules and name it bean-validator.jar.


js – bootstrap datetimepicker in modal window

I’ve had a lot of troubles to display a datetimepicker inside a bootstrap modal window. I’ve tried several ways to display the datetimepicker but none of them worked (delegate, z-index, etc.)

The problem I think, is we tried to initialize the datetimepicker before it gets added to the DOM, because of the animation on the modal window.
I tried also to initialize the datetimepicker on the ‘opened’ event of the modal window like so

<div class="row">
            <div class="'col-sm-3'">
                <div class="form-group">
                    <div class="'input-group" id="'datetimepicker'">

                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-time"></span>
var modal = $modal.open({
      templateUrl: ...,
      controller: ...
modal.result.then(function (result) {
     $state.go('avisos', null, {reload: true});
}, function () {

     console.log('modal opened');
     $('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY'});

the event gets fired before the datetimepicker is in place and therefore not initialized correctly. So, the solution for me was to initialize the datetimepicker in a timeout function inside my angular controller

setTimeout(function () {
         format: 'DD/MM/YYYY'
}, 1000);