angular – debugging an app

noviembre 24, 2017

Peek 2017-11-24 15-39.gif

There’s an excellent article on ionic blog which talks about how to debug an app. It become really handy now that JS Batarang extension stopped working on my google chrome 馃槬 (Ubuntu 16.04.3 LTS; Chrome Version 62.0.3202.62 (Official Build) (64-bit)).

Peek 2017-11-24 15-23

You just have to identify an element on your page which is associated with an scope and you would see all the variables on that scope through the use of a simple console.log call.

angular.element(targetNode).scope()

sources:
http://blog.ionicframework.com/angularjs-console/

Anuncios

I have an enum in one of our entities like so

private enum ConduccionAlProceso {
        POR_COMPARECENCIA, POR_CITACION, CON_CONTROL_DE_DETENCION, EN_CUMPLIMIENTO_DE_ORDEN_DE_APREHENSION
    }

I wanted to display the values on client side without underscores. There are a lot of articles showing how to do so by using a filter directive like

App.filter('underscoreless', function () {
  return function (input) {
      return input.replace(/_/g, ' ');
  };
});

and then in html

{{ addText | underscoreless }}

but I didn’t want to create a directive for this since i’m only using it once.

So, I ended up adding a function in the controller

$scope.mediosConduccionAlProceso = [
    'POR_COMPARECENCIA', 'POR_CITACION', 'CON_CONTROL_DE_DETENCION', 'EN_CUMPLIMIENTO_DE_ORDEN_DE_APREHENSION'
]
$scope.replaceUnderscores = function(item){
    return item.replace(new RegExp('_','g'), ' ');
}

and calling it in the html like

    <select class="form-control"
            ng-model="carpeta.conduccionAlProceso"
            ng-options="medio as replaceUnderscores(medio) for medio in mediosConduccionAlProceso 
                        | orderBy: 'toString()'"
            required>
        <option value=""></option>
    </select>

sources:
https://stackoverflow.com/questions/31939288/angular-filter-to-replace-all-underscores-to-spaces
https://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript
https://stackoverflow.com/questions/21785021/can-ngoptions-call-a-function-to-get-display-text
https://docs.angularjs.org/api/ng/directive/ngOptions

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>
    </div>
    <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>
        Aceptar
    </div>
</div>

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;
    Audiencia.update($scope.audiencia);
});

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

Peek 2017-11-23 08-52

sources:
https://github.com/ExactTarget/fuelux/issues/1392

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

http://localhost:8080/project/docs

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

sources:
http://www.stpe.se/2008/07/enable-symbolic-links-in-glassfish/

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_logo

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
v7.1.0

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)

fuentes:
https://github.com/gilbarbara/react-joyride/issues/131
https://docs.npmjs.com/misc/semver
https://yarnpkg.com/
https://nodejs.org/

git – resolver conflictos

noviembre 8, 2017

uQVJZ
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.

fuentes:
https://stackoverflow.com/questions/12956509/how-to-set-meld-as-git-mergetool