domingo, 21 de julio de 2019

Ejemplo con JSF 2.1 con Maven, Primefaces 7 y Eclipse 2019-06

Hola a todos, todos saben que me siento más del mundo .Net. Pero por cosas de la vida, debo aprender Java. Hasta ahora me está gustando poco a poco. Es más disperso por así decirlo, muchas formas de hacer algo, y mucha gente la hace de una u otra forma y llega a lo mismo.

Vamos a crear un proyecto de cero en Eclipse, Maven, Primefaces 7 y JSF 2.1. Esto ya que cuando partí no encontré nada consolidado, sino puros videos por acá y o tutoriales por allá del año 2012 o 2014.

Estoy usando Windows 10 Pro de 64 bit.
RAM: 16 GB.
Core i7.

Me di cuenta que Eclipse 2019-06 es un 20 a 30% más pesado que Visual Studio Community 2019. Gasta más RAM y es más lento el proceso de volver a correr algo (iniciar, restart server local). Eso fue un cambio ya que en mi trabajo tengo un i3, con 8 GB RAM y noté la diferencia. Ahí el proceso de corregir y probar algo con Eclipse es un 40 a 50% más lento que con Visual Studio Community.

Java
Eclipse con JSF 2 y Maven
JSF 2 es como Windows Form con MVC unidos.
  • Bajar última versión de Eclipse IDE, en mi caso usaré la versión 2019-06. https://www.eclipse.org/downloads/
  • Instalar el IDE y crear un Worskpace. En mi caso quedará en D:\naldo\workspace.
  • Configurar Eclipse para que use use JDK. Ve a Windows - Preferences. Busca "JRE" y agrégalo en sección "Installed JREs"
  • Crear Proyecto. Botón derecho, crear Nuevo Proyecto
  • Seleccionar Maven Project
  • Aquí solo siguiente.
  • Escribe "webapp" en el archetype y selecciona el único valor de la lista y Next.
  • Group ID: demo. Artifact Id: primefaces. El resto por defecto. Presiona Finish.
  • Se creará el proyecto y mostrará errores.
  • Agregar dependencias a Jars. Primero a JSF, peri JSF usa por debajo Servlets.
    Doble clic en pom.xml, pestaña Dependencies. Add (al centro) buscar "javax.servlet".
  • También agrega el Framework JSF (jsf-api). Gropu Id javax.faces.
  • Agrega JSF-IMPL (jsf-impl) dentro de GroupIP java.sun.faces.
  • Listo, si vemos el pom.xml como fuente se verá así:
  • Agrega igual esta otra Dependencia para que funcione la anotación @PostConstruct que la usarás luego.
<dependency>
<groupId>javax.annotation</groupId>
<artifactId>javax.annotation-api</artifactId>
<version>1.3.2</version>
</dependency>
  • Selecciona el proyecto, botón derecho - Maven - Update Project. Presiona Ok.
  • Agrega a pom que Maven compile usando Java 11 usa 1.11.
  • Ir al proyecto, Update Project.
  • Cambiar versión de servlet. Ir a Windows - Show View - Navigator
  • Abre org.eclipse.wst.common.project.facet.core.xml y cambiar
    <installed facet="jst.web" version="2.3"/>
    por
    <installed facet="jst.web" version="3.1"/>
  • Grabar y colocar Project - Clean.
  • Project - Maven - Update Project
  • Editar web.xml de
    /primefaces/src/main/webapp/WEB-INF/web.xml
    Cambio lo que está por este otro:
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>Archetype Created Web Application</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
  • Luego Eliminar archivo index.jsp
  • Te paras en WebApp. Botón derecho - New - Other - Busca por "Html" - Selecciona Html File - Colócale por nombre "index.xhtml". Next.
  • Usa el template que diga "New XHTML file (1.0 transitional) y presiona Finish.
  • Cambia el código de adentro por este:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
>      
<h:head>
  <title>test</title>
</h:head>
<h:body>
<h2>JSF 2</h2>
</h:body>
</html>
  • Ejecútalo y debes ver:
  • También lo puedes ejecutar directo del navegador usando
    http://localhost:8080/primefacesdemo/index.xhtml
  • Ahora párate en el proyecto - botón derecho - Build Path - Configure Build Path - check "Maven Dependences".
  • Ahora dentro de Java Resources se verán carpetas src/main/java y src/main/resources.
  • Con esto el proyecto debe funcionar si te paras en el proyecto, botón derecho - Run As - Run on Server.
Videos para entender
En este punto recomiendo primero entender como opera muy bien JSF 2 con Eclipse antes de pasar a Primefaces. Recomiendo este video de un buen teacher que explica muy paso a paso con varios ejemplo simples. Canal de Luv2Code.


Agregando Primefaces 7
Primefaces es como un Telerik KendoUI pero para Java.
<dependency>
     <groupId>org.primefaces</groupId>
     <artifactId>primefaces</artifactId>
     <version>7.0</version>
 </dependency>
  • Ve a una página xhtml y agrega el código:
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:p="http://primefaces.org/ui">

 <h:head>
 </h:head>

 <h:body>
  <p:spinner />
 </h:body>
</html>
Extra: como hacer para usar url con .jsf y no con .xhtml

Para darle un "caché" podemos hacer que se acceda por la URL, por ejemplo, usando ej5.jsf y no ej5.xhtml.

Ojo, la páginas físicas siguen siendo .xhtml.
Por la URL se accede usando .jsf

Cambia el archivo: /primefaces/src/main/webapp/WEB-INF/web.xml

Solo estas líneas:

<servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
...
<welcome-file-list>
   <welcome-file>ej1.jsf</welcome-file>
</welcome-file-list>

Ahora, si entras al navegador y colocas por ejemplo un caso que hice (al final están los fuentes)
http://localhost:8080/primefacesdemo/ej5.jsf
Verás esto:
Ejemplo de ajax
Este es un extra, lo investigué hace poco.
Se muestra un texto por Ajax sin recargar toda la página.
Se muestra sólo si hay un PostBack y no en el primer request.

ej1.xhtml

<h:form>
        <h:outputLabel value="Escribe algo: ">
            <h:inputText id="message" value="#{loginbean.message}"/>
        </h:outputLabel>

        <h:commandButton value="Mensaje fuera de form Ajax">
            <f:ajax execute="message" render="idSalida" />
        </h:commandButton>
        
        <br />
        <h:inputText id="valor" value="#{loginbean.username}"/>
        <h:commandButton value="Mensaje2 fuera de form Ajax">
            <f:ajax execute="valor" render="idSalida2" />
        </h:commandButton>
    </h:form>

    <p><h:outputText id="idSalida" value="#{loginbean.message}" /></p>
    <p><h:outputText id="idSalida2" value="#{loginbean.accion}" /></p>

Clase LoginBean

package cl.demo;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

@ManagedBean(name = "loginbean")
@RequestScoped
public class LoginBean implements Serializable {

private static final long serialVersionUID = 1L;

private String message;

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

private String username = "";
private String password = "";

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String login(String type) {

if (this.username.isEmpty() == false && this.username.equalsIgnoreCase("naldo")
&& this.password.isEmpty() == false && this.password.equals("123")) {
return "success";
}
return "error";
}

public String getAccion() {

FacesContext facesContext = FacesContext.getCurrentInstance();
Boolean esPostback = facesContext.isPostback();

if (esPostback) { // solo si hay una accion
if (this.username.equals("111")) {
return "success";
} else
return "error";
}
else
return ""; // primer request no hace nada
}
}

Así se ve:

Cambiar el Theme Primefaces
Agrega en tu POM.xml estas dos entradas. 
En mi caso lo dejaré con theme "dark-hive" versión 1.0.10.

<repositories>
<repository>
<id>prime-repo</id>
<name>PrimeFaces Maven Repository</name>
<url>http://repository.primefaces.org</url>
</repository>
</repositories>

<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>dark-hive</artifactId>
<version>1.0.10</version>
</dependency>

Luego en el web.xml lo seleccionas:

<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>dark-hive</param-value>
</context-param>

Puedes ver más estilos y sus versiones en este link oficial: https://repository.primefaces.org/org/primefaces/themes/

Así se ve el theme:


Localización (pendiente)
Permite, por ejemplo, tener textos en dos idiomas.

Conclusión
El código fuente está acá. Lo subí al sitio de mi página personal.

Si tienen dudas del código podré ayudar lo que pueda. No soy experto aún. Estoy recién partiendo en el mundo Java.

Saludos.

sábado, 11 de mayo de 2019

Manga Berserk Español Capítulos 337 al 358 (Mayo 2019)

Hola a todos, los que me conocen saben que un hobby que me encanta es leer el manga Berserk. Los fanáticos sabemos que ya va por la parte final...a menos que Miura se pegue otro descanso de meses...

Bueno acá una entrada un poco diferente, les traigo los últimos capítulos, incluso el último capítulo 358 traducido por los chicos de Matadragones este mes de Mayo 2019. Créditos a ellos 100%. Recomiendo visiten dicho foro.

Espero les guste. Agradecer no cuesta nada, perrín.

Resultado de imagen para Berserk

Links directos, nada de esa basura de acortadores de links.

Link por MediaFire

Link por IceCloud



martes, 7 de mayo de 2019

MVC 5 Desde Cero

Hola a todos. Luego de casi dos años de trabajo, terminé de escribir segundo libro: MVC 5 desde cero - Guía paso a paso usando C# y Visual Studio 2017 para Amazon Kindle e Impreso. ¡Espero lo compren y les guste!

Le puse "talento" y versión kindle tiene más de 1000 páginas. La Versión impresa tiene más de 600 páginas.

Cada capítulo tiene su código fuente en GitLab: http://gitlab.com/hernaldog/mvc5desdecero/

Compras por Amazon

Valor Kindle: a sólo 26 USD:

https://www.amazon.com/MVC-Desde-Cero-usando-Spanish-ebook-dp-B07QX9PB11/dp/B07QX9PB11/ref=mt_kindle?_encoding=UTF8&me=&qid=

Valor libro impreso a 35 USD (más gastos envío):

https://www.amazon.com/MVC-Desde-Cero-usando-Spanish/dp/1095327585/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=

En Chile (impreso)

Por Mercado Libre valor $25.000:

https://articulo.mercadolibre.cl/MLC-487764851-libro-impreso-mvc-5-desde-cero-con-visual-studio-2017-_JM?quantity=1

Por Yapo valor $25.000:

https://www.yapo.cl/region_metropolitana/libros_revistas/libro_nuevo_impreso_mvc_5_desde_cero_63241045.htm



Tabla de contenidos
Contenido

1. Introducción
1.1 Introducción a ASP.NET MVC
1.2 Resumen de ASP.NET MVC 5
1.3 Instalando Visual Studio 2017
1.4 Creando una aplicación MVC 5
1.5 Estructura de una aplicación MVC en Visual Studio
1.6 Resumen
1.7 Ejercicios
1.8 Código fuente del capítulo

2. Controladores
2.1 El rol del controlador
2.2 Un ejemplo: la famosa tienda de música MVC
2.3 Un Controlador básico
2.4 Resumen
2.5 Ejercicios
2.6 Código fuente del capítulo

3. Vistas
3.1 ¿Por qué usar una vista?
3.2 Convención en las Vistas
3.3 Vistas fuertemente tipadas
3.4 View Model
3.5 Agregar un Vista
3.6 El motor de vista Razor
3.7 Resumen
3.8 Ejercicios
3.9 Código fuente del capítulo

4. Modelos
4.1 Modelando la Tienda de Música
4.2 Crear el administrador de almacenamiento
4.3 Resumen
4.4 Ejercicios
4.5 Código fuente del capítulo

5. Los HTML Helpers
5.1 El tag form
5.2 HTML Helpers
5.3 Otros helpers
5.4 Rendereando los Helpers
5.5 Resumen
5.6 Ejercicios
5.7 Código fuente del capítulo

6 Membresía, Autorización y Seguridad
6.1 Usando el atributo Authorize
6.2 El atributo Authorize para usarlo con roles
6.3 Cuando usar roles y cuando usuarios
6.4 Login externo con OAuth2 y OpenID
6.5 Puntos de seguridad en una Aplicación Web
6.6 CustomErrors en el web.config
6.7 Usando la opción Retail
6.8 Usar un logging dedicado
6.9 Resumen de las típicas amenazas y links
6.10 Resumen
6.11 Ejercicios
6.12 Código fuente del capítulo

7 Data Annotations y Validaciones
7.1 Data Annotations para una venta
7.2 Lógica de validación personalizada
7.3 Mostrar y Editar Annotations
7.4 Resumen
7.5 Ejercicios
7.6 Código fuente del capítulo

8 Ajax
8.1 jQuery
8.2 Ajax Helpers
8.3 Validación en el lado del Cliente
8.4 Detrás los helpers
8.5 Mejorando el rendimiento de Ajax
8.6 Resumen
8.7 Ejercicios
8.8 Código fuente del capítulo

9 Routing
9.1 ¿URL o URI?
9.2 Introducción al Routing
9.3 Como las rutas generan una URL
9.4 Como las rutas vinculan las URL a un action
9.5 Rutas-constraints personalizados
9.6 Usando Routing con Web Forms
9.7 Resumen
9.8 Ejercicios
9.9 Código fuente del capítulo

10 NuGet
10.1 Introducción a NuGet
10.2 Actualizando NuGet
10.3 Agregando una librería como package
10.4 Creando packages
10.5 Publicando packages
10.6 Resumen
10.7 Ejercicios
10.8 Código fuente del capítulo

11 Web API
11.1 Definición de una Web API
11.2 Comenzando un proyecto Web API
11.3 Escribiendo un controlador API
11.4 Configurando Web API
11.5 Agregando rutas a la Web API
11.6 Binding de Parámetros
11.7 Filtros en los request
11.8 Habilitando Dependency Injection (DI)
11.9 Help Pages y Swagger
11.10 Traceando la aplicación
11.11 Ejemplo de una Web API
11.12 Resumen
11.13 Ejercicios
11.14 Código fuente del capítulo

12 Single Page Applications (SPA) con AngularJS
12.1 Entendiendo y configurando AngularJS
12.2 Creando la Web API
12.3 Construyendo la aplicación y módulos
12.4 Resumen
12.5 Ejercicios
12.6 Código fuente del capítulo

13 Inyección de dependencias en MVC y Web APIs
13.1 Patrones de diseño de software
13.2 Resolutor de dependencias en MVC
13.3 Resolución de dependencias en Web API
13.4 Resumen
13.5 Ejercicios
13.6 Código fuente del capítulo

14 Test Unitario
14.1 Entendiendo las Pruebas Unitarias y el Test-Driven Development
14.2 Construyendo un proyecto de Pruebas Unitarias
14.3 Tips para Pruebas Unitarias de MVC y de Web API
14.4 Resumen
14.5 Ejercicios
14.6 Código fuente del capítulo

15 Anexo: Descarga de Fuentes GitLab
15.1 Previa: ¿GitHub vs GitLab vs Bitbucket?
15.2 Descarga de fuentes de GitLab con Visual Studio
15.3 Descarga manual desde Sitio GitLab.com

Respuestas a ejercicios