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

If We Want to Go Fast, We Need to Go Well

Have you ever thought that we won't need to code anymore because programs might be generated from specification? The answer can be yes or no; there is still arguing about it. The programming language is more and more closed to the requirements. The starting is from a very low level as Assembly to a very high level like Python. However, it doesn't make much sense when saying that we will eliminate coding. For me, we currently still need to express our ideas in exact words that tells the machine what we want. Otherwise, I hope in the future the machine is intelligent enough to understand our requirements directly from our words. ;) Take a look at the famous quote of Robert C.Martin about what I mentioned above: "Remember that code is really the language in which we ultimately express the requirements. We may create languages that are closer to the requirements. We may create tools that help us parse and assemble those requirements into formal structures. But we wi...
Post a Comment
Read more

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below: HTML code: <div id="parent">  <div id="child">  </div> </div> And, CSS: #parent{   position: relative;   overflow:hidden; } #child{   position: absolute;   top: -1;   right: -1px; } However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it. www.tom-collinson.com I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved. Look at my code: <div class="modal-body dn-placeholder-parent-positi...
Post a Comment
Read more

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

Check out my implementation here 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 glance rasa-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 too...
Post a Comment
Read more

Creating a Chatbot with RiveScript in Java

Motivation "Artificial Intelligence (AI) is considered a major innovation that could disrupt many things. Some people even compare it to the Internet. A large investor firm predicted that some AI startups could become the next Apple, Google or Amazon within five years"   - Prof. John Vu, Carnegie Mellon University. Using chatbots to support our daily tasks is super useful and interesting. In fact, "Jenkins CI, Jira Cloud, and Bitbucket" have been becoming must-have apps in Slack of my team these days. There are some existing approaches for chatbots including pattern matching, algorithms, and neutral networks. RiveScript is a scripting language using "pattern matching" as a simple and powerful approach for building up a Chabot. Architecture Actually, it was flexible to choose a programming language for the used Rivescript interpreter like Java, Go, Javascript, Python, and Perl. I went with Java. Used Technologies and Tools Oracle JDK 1.8...
Post a Comment
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: ...
Post a Comment
Read more