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:
Reactions:

Comments

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

AngularJS - Build a custom validation directive for using multiple emails in textarea

AngularJS already supports the built-in validation with text input with type email. Something simple likes the following:
<input name="input" ng-model="email.text" required="" type="email" /> <span class="error" ng-show="myForm.input.$error.email"> Not valid email!</span>
However, I used a text area and I wanted to enter some email addresses that's saparated by a comma (,). I had a short research and it looked like AngualarJS has not supported this functionality so far. Therefore, I needed to build a custom directive that I could add my own validation functions. My validation was done only on client side, so I used the $validators object.

Note that, there is the $asyncValidators object which handles asynchronous validation, such as making an $http request to the backend.

This is just my implementation on my project. In order to understand that, I supposed you already had experiences with Angular…
8 comments
Read more

Styling Sort Icons Using Font Awesome for Primefaces' Data Table

So far, Primefaces has used image sprites for displaying the sort icons. This leads to a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time the table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons with Font Awesome icons.


We will use "CSS Pseudo-classes" to achieve it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown.

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s { background-image: none; margin-left: 5px; font-size: 1.1666em; position: relative; } .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-s)::before { content: "\f106"; font-family: "FontAwesome"; position: absolut…
1 comment
Read more

The HelloWorld example of JSF 2.2 with Myfaces

I just did by myself create a very simple app "HelloWorld" of JSF 2.2 with a concrete implementation Myfaces that we can use it later on for our further JSF trying out. I attached the source code link at the end part. Just follow these steps below:

1. Create a Maven project in Eclipse (Kepler) with a simple Java web application archetype "maven-archetype-webapp". Maven should be the best choice for managing the dependencies, so far. JSF is a web framework that is the reason why I chose the mentioned archetype for my example.

2. Import dependencies for JSF implementation - Myfaces (v2.2.10) into file pom.xml. The following code that is easy to find from http://mvnrepository.com/ with key words "myfaces".

<dependency> <groupId>org.apache.myfaces.core</groupId> <artifactId>myfaces-api</artifactId> <version>2.2.10</version> </dependency> <dependency> <groupId>org.apache.myfaces.core</groupId&g…
Post a Comment
Read more

Only allow input number value with autoNumeric.js

autoNumeric is a jQuery plugin that automatically formats currency and numbers as you type on form inputs. I used autoNumeric 1.9.21 for demo code.

1. Dowload autoNumeric.js file from https://github.com/BobKnothe/autoNumeric
2. Import to project
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/autoNumeric.js"></script> 3. Define a function to use it
<script type="text/javascript"> /* only number is accepted */ function txtNumberOnly_Mask() { var inputOrgNumber = $("#numberTxt"); inputOrgNumber.each(function() { $(this).autoNumeric({ aSep : '', aDec: '.', vMin : '0.00' }); }); } </script>
4. Call the function by event
<form> <input type="text" value="" id="numberTxt"/>(only number) </form> <script type="te…
2 comments
Read more

How I did customize "rasa-nlu-trainer" as my own tool

Background I wanted to have a tool for human beings to classify intents and extract entities of texts which were obtained from a raw dataset such as Rocket.chat's conversation, Maluuba Frames or here. Then, the output (labeled texts) could be consumed by an NLU tool such as Rasa NLU.

rasa-nlu-trainer was a potential one which I didn't need to build an app from scratch. However, I needed to add more of my own features to fulfill my needs. They were:

1. Loading/displaying raw texts stored by a database such as MongoDB
2. Manually labeling intents and entities for the loaded texts
3. Persisting labeled texts into the database

I firstly did look up what rasa-nlu-trainer's technologies were used in order to see how to implement my mentioned features.
At first glancerasa-nlu-trainer was bootstrapped with Create React App. Create React App is a tool to create a React app with no build configuration, as it said. This tool is also recommended by the official React.js tutorial. I ac…
Post a Comment
Read more