Monday 15 September 2014

JavaScript waiting message and page blocking

Sometime when submitting the for cause the long operation we need to show some message that user should wait and block all controls. The following html will do it for you:


 <?xml version="1.0" encoding="UTF-8"?>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
      <head>  
           <title>Waiting message</title>  
           <style type="text/css">  
                #loading-div-background {  
                     display: none;  
                     position: fixed;  
                     top: 0;  
                     left: 0;  
                     width: 100%;  
                     height: 100%;  
                     background-color: rgba(255, 255, 255, 0.5);  
                }  
                #loading-div {  
                     width: 300px;  
                     height: 200px;  
                     text-align: center;  
                     position: absolute;  
                     left: 50%;  
                     top: 30%;  
                     margin-left: -150px;  
                     margin-top: -100px;  
                }  
           </style>  
           <script type="text/javascript">  
                function showProgress() {  
                     document.getElementById("loading-div-background").style.display = 'block';  
                     var pb = document.getElementById("loading-div");  
                     <!--We inserting the gif, because of well-know IE bug http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping-->  
                     pb.innerHTML =  
                               '<img src="https://d13yacurqjgara.cloudfront.net/users/157197/screenshots/968023/framely.gif" width="200" height ="200"/><h2>Please wait.... We are working on the hard task</h2>';  
                     pb.style.display = 'block';  
                }  
           </script>  
      <head>  
      <body>  
      <form>  
           <input type="button" value="start job" id="show" onclick="showProgress();"/>  
      </form>  
      <div id="loading-div-background">  
           <div id="loading-div">  
                <!--Here we will insert inner html by the java script-->  
           </div>  
      </div>  
      </body>  
 </html>  

If the gif is not available just find another in the internet.
And... wait for it... Happy coding.

Thursday 11 September 2014

JSF 2.1 + gralde + Tomcat: "Hello world" application

Here is the example how to write minimal "Hello world" web application using: JSF, gradle as build and dependency management tool, and Tomcat 7 as servlet container.

The project structure you can see on the screenshot:




So you will need to create only 4 files:

    1. The first one: build.gradle that should lie in the <project_root> folder and it's content should be:

 apply plugin: 'java'  
 apply plugin: 'war'  
 sourceCompatibility = 1.7  
 repositories {  
      mavenCentral()  
 }  
 dependencies {  
      testCompile group: 'junit', name: 'junit', version: '4.11'  
      compile 'com.sun.faces:jsf-api:2.2.8'  
      compile 'com.sun.faces:jsf-impl:2.2.8'  
      compile 'javax.servlet:jstl:1.2'  
      //in this project, you don't actually need this dependency, but there is big probability, that if project is  
      //more complex than "Hello world" you will need it  
      providedCompile 'javax.servlet:servlet-api:2.5'  
 }  

    2. The second one: web.xml that should lie in the <project_root>/src/main/webapp/WEB-INF folder and it's content should be:

 <?xml version="1.0" encoding="UTF-8"?>  
 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
            xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
            xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  
      http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
            id="WebApp_ID" version="2.5">  
      <!-- Change to "Production" when you are ready to deploy -->  
      <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>  
      <!-- Map these files with JSF -->  
      <servlet-mapping>  
           <servlet-name>Faces Servlet</servlet-name>  
           <url-pattern>/faces/*</url-pattern>  
      </servlet-mapping>  
      <servlet-mapping>  
           <servlet-name>Faces Servlet</servlet-name>  
           <url-pattern>*.jsf</url-pattern>  
      </servlet-mapping>  
      <servlet-mapping>  
           <servlet-name>Faces Servlet</servlet-name>  
           <url-pattern>*.faces</url-pattern>  
      </servlet-mapping>  
      <servlet-mapping>  
           <servlet-name>Faces Servlet</servlet-name>  
           <url-pattern>*.xhtml</url-pattern>  
      </servlet-mapping>  
      <!-- Welcome page -->  
      <welcome-file-list>  
           <welcome-file>welcome.xhtml</welcome-file>  
      </welcome-file-list>  
 </web-app>  

    3.  The third one: welcome.xhtml that should lie in the <project_root>/src/main/webapp folder and it's content should be:

 <?xml version="1.0" encoding="UTF-8"?>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml"  
       xmlns:f="http://java.sun.com/jsf/core"  
       xmlns:h="http://java.sun.com/jsf/html">  
 <h:head>  
      <title>JSF 2.1 Hello World</title>  
 </h:head>  
 <h:body>  
      <h3>JSF 2.1 Hello World Example - welcome.xhtml</h3>  
 </h:body>  
 </html>  

    4. The last one: settings.gradle that should lie in the <project_root> folder and it's content should be:

 rootProject.name = 'HelloWorldApp'  

To build the war file you need to call gradle build in command line in the <project_root> folder. The result of build should be the war file lies in the <project_root>/build/libs

After you deploy the artifact to the Tomcat you can see your results by the: http://localhost:8080/HelloWorldApp/

Should be something like this:


Happy coding)