Skip to main content

4 Remarkable Notes for JSF Apps Using HTML5


In the previous post, I've already shared with you how my team consults clients by using a HTML prototype. This post is about the used technologies for reusing the provided HTML template and communicating with backend.

What is the issue when using HTML elements with Primefaces components?

Primefaces is a great extension for developing JSF web apps. However, it is really frustrating in case we have to make it work with an existing HTML template. Why?
- Primefaces has its own theme for styling.
- Primefaces changes the HTML structure.
Therefore, that would be a huge effort to use the Primefaces' components to replicate the elements of the HTML template; especially it is impossible for images drawing by "canvas" tag.

That requires us to find a better approach. Since Java EE 7 (introducing JSF 2.2 included), it supports to use HTML5 elements. The idea is that JSF components don't effect the style and HTML structure, so we can easily reuse the provided HTML template. Moreover, we're still able to use Primefaces "No-GUI" components such as "p:ajax", "p:remoteCommand'.

1. JSF Alternatives for HTML5 elements

We can choose to use JSF components, HTML5 elements, or both. Take a look the table "How Facelets Renders HTML5 Elements" of the following link for more detail.
https://docs.oracle.com/javaee/7/tutorial/jsf-facelets009.htm
For example:
<html ... xmlns:jsf="http://xmlns.jcp.org/jsf"
...
    <input type="email" jsf:id="email" name="email"
           value="#{reservationBean.email}" required="required"/>

2. Radio button or How to make a trick for events

There is no JSF component for radio elements. We have to build an alternative by our own. For example:
<div id="gender">
 <div class="control">
  <input type="radio" name="option" checked="true"
   onclick="document.getElementById('gender-hidden-input').setAttribute('value', '0'); onGenderChange();" value="0"></input>
  <label class="control__label" for="optionone">Option One</label>
 </div>
  
 <div class="control">
  <input type="radio" name="option" 
    onclick="document.getElementById('gender-hidden-input').setAttribute('value', '1'); onGenderChange();" value="1"></input>
  <label class="control__label" for="optiontwo">Option Two</label>
 </div>
  
 <h:inputText value="#{data.dataModel.gender}" styleClass="hidden" type="text" id="gender-hidden-input" />
 <p:remoteCommand name="onGenderChange" actionListener="#{logic.onGenderChange}" update="growl"></p:remoteCommand>
</div>

3. Dialog or How to custom Ajax requests

For dialogs/pop-ups, we can use a JQuery library like basicLightbox. We can use "p:remoteCommand" to call ajax  requests to backend. The following is an idea for passing a javascript function as param when executing from different places.
...
okElem.forEach(function (elem) {
 elem.onclick = function (e) {
  
  if(elem.classList.contains("mf-ui-disabled")){
   return false;
  }
  
  var ajaxRequestor = elem.getAttribute('data-ajax-requestor');
  if(ajaxRequestor){
   executeFunction(ajaxRequestor); //ajaxRequestor is a javascript function name which can make by "p:remoteCommand"
  }
  
  instance.close();
  e.preventDefault();
 };
});

...

function executeFunction(functionStr){
 var fn = window[functionStr];
 if (typeof fn === "function") fn();
}

4. Images Exporting

So far, html2Canvas has been the only one library can help us satisfy the requirements of exporting images from client side for all supported browsers including Chrome, Firefox and IE11. Almost other libraries for "html and canvas conversion" won't work with IE due to IE does not support SVG <foreignObject> tag. A fun fact here is this library even has not been released at the time we applied it for our project.
function exportProductChart(){
 
 var productHouse = document.querySelector("#overallPdfExportHouseWrapper");
 
 html2canvas(productHouse, {
   scale: 3,
      onrendered: function(canvas) {
       var productHouseImg = canvas.toDataURL("image/png");
       onClickExportPdfDialogOkBtn = function() {//override the function "onClickExportPdfDialogOkBtn" because this function can be called in another place.
     PrimeFaces.ab({
      s:"onClickExportPdfDialogOkBtn",
      f:"mainForm",
      p:"pdfExportDialog",
      u: "pdfExportDialog",
      onco:function(xhr,status,args){
       $('[id$=downloadPdf]').click();
      },
      pa:[{name: "mfDialogAction", value: "productChartExport"},
          {name: "productChoiceHouse", value: productHouseImg}]
     });
    }
    onClickExportPdfDialogOkBtn(); //p:remote command
    }
 });
}

References:
[1]. http://www.oracle.com/technetwork/articles/java/enterprise-html5-2227136.html
[2]. https://docs.oracle.com/javaee/7/tutorial/jsf-facelets009.htm
[3]. https://github.com/tsayen/dom-to-image
Labels:

Comments

  1. Hiếu LêJanuary 30, 2018 at 6:45 AM

    Chào anh Hương, em là sinh viên mới tiếp cận Java và CNTT nên không biết nhiều. Em đang định dùng lại code mã nguồn mở của SweetHome 3D nhưng mò mẫm mãi vẫn không xem được code của họ. Mong anh chỉ giáo

    ReplyDelete
    Replies
    1. Huong NguyenJanuary 30, 2018 at 9:52 PM

      Chào bạn!
      Tôi chưa có kinh nghiệm lập trình với SweeHome 3D, nên tôi sẽ chỉ có thể cho lời khuyên:
      1. Bạn nên làm theo hướng dẫn này Developer Guide. (phải cái bạn nỏi không??)
      2. Bạn xem source code của file jar (Download) bằng java decompiler (vd: JD) hoặc cài plugin decompiler trên Eclipse.

      Không biết bạn đã tham gia cộng đồng này Dạy Nhau Học chưa, nếu chưa thì bạn có thể lên đây đặt câu hỏi và chia sẻ lại với mọi người.

      Delete

Post a Comment

Popular posts from this blog

Junit - Test fails on French or German string assertion

In my previous post about building a regex to check a text without special characters but allow German and French . I met a problem that the unit test works fine on my machine using Eclipse, but it was fail when running on Jenkins' build job. Here is my test: @Test public void shouldAllowFrenchAndGermanCharacters(){ String source = "ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ"; assertFalse(SpecialCharactersUtils.isExistSpecialCharater(source)); } Production code: public static boolean isExistNotAllowedCharacters(String source){ Pattern regex = Pattern.compile("^[a-zA-Z_0-9_ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ]*$"); Matcher matcher = regex.matcher(source); return !matcher.matches(); } The result likes the following: Failed tests: SpecialCharactersUtilsTest.shouldAllowFrenchAndGermanCharacters:32 null A guy from stackoverflow.com says: "This is probably due to the default encoding used for your Java source files. The ö in the string literal in the J...
5 comments
Read more

Java 8 - Persistent data structure

The following is a series of posts about "functional programming in Java" which is the result of my understanding by reading the book " Java 8 in Action: Lambdas, Streams, and Functional-style Programming, by Alan Mycroft and Mario Fusco ". 1. Why functional programming? 2. Functional programming in Java 8 3. Java 8 - Using Functions as Values 4. Java 8 - Persistent data structure Persistent data structure is also known as a simple technique but it's very important. Its other names are functional data structure and immutable data structure. Why is it "persistent"? Their values persist and are isolated from changes happening elsewhere. That's it! This technique is described as below: If you need a data structure to represent the result of a computation, you should make a new one and not mutable an existing data structure. Destructive updates version public static A doSomething(A a){ a.setProp1("new value"); return...
1 comment
Read more

Fulfilling Your Contribution Needs

Human resource management motivation Managing human today is quite different from the industrial age which treats people as just "chickens". Rather than people now are very important to the success of an organization. People are an organization's special resource. They should be encouraged to grow to contribute their effort and creativeness to their beloved working environment because the contribution is one of their most needs in life. Training people: getting rid of the ineffective model and adopting the new one The ineffective model of training people: Hiring new people --> giving them a crash course once --> expecting them working effectively.  That somehow makes sense but you're about to expect a luck because you do not really spend your effort for mentoring them. If they can work effectively, well...lucky you! Otherwise, you will blame that these people are ineffective and you let them go and hire the new ones. What a waste of time! The new effe...
Post a Comment
Read more

DevOps Toolchain Enhancement

 Historically, our company ubitec had started with a customer project. Agile/Scrum was our proposal for working with customers. Time by time, Agile/Scrum also became our culture for software development. To be successful with this development approach, we somehow needed to have a fast release for customers (i.e. every one week). Back then, we had a build tool Jenkins which was responsible for having sprint release packages for our customers. The build job pipelines contain some steps such as gathering the artifacts, checking the code convention, running the tests, building docker images, and packaging an archived file (a zip file). The set of tools involved in a pipeline is roughly called a toolchain. It is just a part of a bigger process called the DevOps toolchain. Source: https://www.ibm.com/blogs/cloud-archive/2016/11/devops-architecture-available-on-bluemix-garage-method-site/ DevOps is a proven method that fits Agile. Today,  it is even treated as a mandatory factor...
Post a Comment
Read more

Merging source in SVN

My team has used Primefaces for our projects. We sometimes have several branches of the projects with a new Primefaces's release. For example, we currently have a project with two branches, a branch for using Primeface 4.0, a trunk for using Primeface 5.0, and we are working these parallel branches. Our project looks like the following: - myProject - branches + primefaces4 + tag + trunk (primefaces5) My problem is how to copy the same source from the trunk to the branch "primefaces4". That is where SVN Merging can help! Here is the steps those I have conducted in my project. Step 1 : open the project with the branch "primefaces4" Step 2 : Team > Merge... Chose the trunk's URL. For example: http://192.168.9.10/svn/myProject/trunk Step 3 : Select the revision from "trunk" to merge. For example: +--revision--+--date--------+--author----+--comment---+ +  10        + 03.10.2014 + vanhuong   + f1: part 3 + +  9     ...
Post a Comment
Read more