Primefaces SelectOneRadio change disabled

Proxy handle ajax response primefaces : javascript

บางที เราอาจจะอยาก modify response หรือทำอะไรบางอย่าง ก่อนที่ primefaces ajax จะทำงานเสร็จ

PrimeFaces.ajax.AjaxUtils.handleResponse = (function(originMethod) {

    //return proxy method instead origin method
    return function() { 

        //origin method evironment/instance context

        return originMethod.apply(this, arguments); //
    };
})(PrimeFaces.ajax.AjaxUtils.handleResponse);

ตัวอย่างเช่น การ handle validate response

/**
 * call when ajax response validate failed
 */
function validationFailedHandle() {
    //do something...
}

var handleProxy = function(originMethod) {
 
    var slice = Array.prototype.slice;
 
    return function() {
        var args = slice.call(arguments);
        var response = args[0].find('extension').text();
        if (response) {
            var obj = JSON.parse(response);
            obj.validationFailed && validationFailedHandle.apply(this, args);
        }
 
        return originMethod.apply(this, args);
    };
};
 
PrimeFaces.ajax.AjaxUtils.handleResponse = handleProxy(PrimeFaces.ajax.AjaxUtils.handleResponse);

Spring security detect Primefaces ajax session expire

        จากบทความเดิมก่อนหน้านี้  (เมื่อนานมาแล้ว) "การทำ Login ด้วย Spring Security"  ไม่สามารถตรวจจับ session expire ของ jsf request ที่เป็น ajax ได้

        คือ เมื่อเกิด session expire แล้วเราทำการส่ง request ที่เป็น ajax กลับไปยัง web server  spring security จะปฏิเสธ request นั้นทันที  ทำให้ request ไม่เกิดการประมวลผลตาม logic ที่เราเขียนไว้ (request จะนิ่ง  ไม่เกิดปฏิกิริยาตอบสนองใดๆ ทั้งสิ้น) ทั้งๆ ที่ตามความเป็นจริงแล้ว  มันควรจะเด้งไปที่หน้า login แต่มันก็ไม่ยอมทำ

        บทความนี้จะเป็นการแก้ปัญหา  ว่าเราจะทำยังไง  ให้มันเด้งไปยังหน้า login เมื่อ session expire แล้วได้รับ request ที่เป็น ajax ครับ

แนวคิด
request ที่เป็น ajax ของ jsf นั้น  response ที่ถูกส่งกลับมาจะเป็น text/xml   รูปแบบประมาณนี้

<?xml version="1.0" encoding="UTF-8"?>
<partial-response>
    ....
    ....
    ....
</partial-response>

        ซึ่งข้างใน patial response ก็จะเป็น response ของ logic ที่เราเขียนเอาไว้ ใน managed bean (backing bean หรือ controller)

        การทำให้ ajax เกิดการ redirect page ไปยังหน้า login นั้น  เราจะต้องทำให้ response ถูกส่งกลับมา แล้วมีรูปแบบดังนี้

<?xml version="1.0" encoding="UTF-8"?>
<partial-response>
    <redirect url="http://your.url.here/"></redirect>
</partial-response>

คำถาม แล้วเราจะทำยังไงล่ะ ให้มันได้ response แบบนี้?

move marker position google map : jsf primefaces

รู้จักกับ JSF(JavaServer Faces) + JSF Primefaces

JSF คืออะไร?

        JSF เป็น java framework ตัวนึง ที่ช่วยให้การเขียน java web application  นั้นง่ายขึ้นครับ  เพราะมันจะมี tag พิเศษต่างๆให้มากมาย  เรียกว่า JSF Component เช่น tag dataTable ที่เอาไว้แสดงข้อมูลที่เป็นตารางให้   โดยที่เราไม่ต้องเขียน html เอง  tag ajax ที่เอาไว้เรียกใช้งาน ajax ได้โดยที่ไม่ต้องเขียน javascript เอง  tag convertDateTime ที่เอาไว้แปลงรูปแบบเวลาได้ตามที่ต้องการ  tag input  หรือ tag output  ที่สามารถผูกเข้ากับ input หรือ output ของ managed bean (web controller) ได้โดยตรงเลย  และ tag พิเศษอื่นๆ  อีกเยอะแยะที่ช่วยให้การเขียน html นั้นเป็นเรื่องหมูๆ  ไปเลยครับ   และ managed bean ก็ยังสามารถกำหนด scope การทำงานได้ด้วย  ว่าจะให้เป็น  request scope, session scope หรือ application scope  อีกอย่างใช้ระยะเวลาในการศึกษาสั้นมากๆ  ศึกษาแค่ไม่กี่วันก็เขียนได้แล้วครับ  ข้อดีอีกอย่างของ JSF คือเราสามารถ  สร้าง tag ต่างๆ ขึ้นมาใช้งานเองได้  ด้วยเหตุผลนี้  จึงทำให้มี  Extension JSF version ต่างๆ ออกมามากมายให้เลือกใช้  และบางอันก็เป็นของฟรีซ่ะด้วย  เช่น Primefaces, Richface, ICEFaces, OpenFaces และอื่นอีกเยอะแยะ  ซึ่งแต่ละเจ้า  สามารถนำมาผนวกใช้งานร่วมกันได้  เนื่องจากว่ามันเป็น JSF เหมือนกัน

ในการผูกข้อมูลหรือการทำ Data Binding จากหน้าบ้าน html เข้ากับหลังบ้านที่เป็น  java หรือ managed bean  เช่นการเรียกใช้งาน  method หรือ action ต่างๆ ของ managed bean  เราจะเรียกผ่าน  Expression Language  “#{ }”  เช่น อยากเรียกใช้งาน method save() ของ UserManagementMB  เราสามารถทำได้ดังนี้ 

รู้จักกับ ManageBean ซึ่งเปรียบเสมือนกับ Web Controller : jsf

ManagedBean คืออะไร?

        ManagedBean เป็น java class อย่างนึงที่เปรียบเสมือน controller ของ web application (ที่เป็น JSF)  การคำนวณ หรือ การตัดสินใจที่เกี่ยวกับ business logic ต่างๆ ของ web application ของเรา  จะทำอยู่ที่ manage bean ครับ  action จากหน้า web หรือ view (html) จะถูกส่งจาก client (browser) มายัง managed bean  ก่อนเสมอ  แล้ว managed bean จึงจะไปเรียกใช้งาน service ต่างๆ ตามที่ต้องการอีกที  เดี๋ยวเราลองมาดูโครงสร้างการทำงานคร่าวๆ กันครับ

อันนี้เป็นโครงสร้างทั่วๆไปของแทบจะทุก application ที่ผมใช้  นั่นก็คือ
1. view(html) จะมาเรียกใช้งาน managed bean(business logic)
2. managed bean(business logic)  เรียกใช้งาน service (ที่ต้องการทำอะไรบางอย่าง (อาจมี transaction มาเกี่ยวข้อง))
3. service เรียกใช้งาน persistent ซึ่งอาจจะเป็น database, jms(java message service), ...
4. จากนั้นจะคืนค่าต่างๆ  กลับไปจนถึง view  ตามลำดับ

การสร้าง Layout หน้าเว็บ ด้วย JSF primefaces

สร้าง web template ด้วย JSF template

web template คืออะไร?

       web template คือ แม่แบบของหน้าเว็บ  หรือการสร้าง  layout ของหน้าเว็บไว้สำหรับทำเป็นแม่แบบ  เพื่อให้หน้าเว็บอื่นๆ มาเรียกใช้งานแม่แบบนั้น  เช่นเรามีหน้าเว็บอยู่ 10 หน้า  ทุก ๆ หน้ามีโครงสร้างส่วนหัวหรือส่วนเมนูข้างซ้ายเหมือนกันทั้งหมด  แทนที่เราจะต้องเขียนโค๊ดส่วนหัวหรือส่วนเมนูใหม่ในทุก ๆ หน้า  เราก็แค่เขียนแม่แบบหรือเทมเพลตขึ้นมาแล้วให้หน้าเว็บอื่นๆ มาเรียกใช้แทน  ดังนั้นเว็บทั้ง 10 หน้าของเรา  ก็จะมีโครงสร้างเดียวกันทั้งหมด  เวลาแก้ไข  เราก็ไปแก้ที่เทมเพลตแทน  ทั้ง 10  หน้านั้นก็จะเปลี่ยนแปลงไปตามเทมเพลตนั้นๆ    

       เรามาดูวิธีการเขียนกันดีกว่าครับ  ซึ่งในที่นี้ผมจะใช้ JSF 2.0 + primefaces ในการสร้าง template มาใช้งาน

1. สร้าง tamplate หลัก

tempalte/main.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>TODO supply a title</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north"
                          style="background : red;"
                          size="100">
                <h:outputText value="header template"/>
            </p:layoutUnit>
            <p:layoutUnit position="west"
                          style="background : yellow;"
                          size="220">
                <h:outputText value="left menu template"/>
            </p:layoutUnit>
            <p:layoutUnit position="center"
                          style="background : green;">
                <h:outputText value="center"/>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

แก้ปัญหา dialog primefaces อยู่ใต้ modal : primefaces

        ปัญหานี้  จะเกิดขึ้นในกรณีที่ เรานำ dialog ไปไว้ใน layout  แทนที่จะเป็น นอก layout ซึ่งเป็นสิ่งที่ถูกต้อง
มันก็จะทำให้ dialog เรา เวลาที่แสดงขึ้นมา  เกิดไปอยู่ใต้  modal ซ่ะงั้น   ถึงจะแก้ด้วยการกำหนด z-index ของ css ไปยังไง  มันก็ไร้ความหมายครับ  เพราะ  level มันต่างกัน

วิธีแก้คือ  ใน  <p:dialog/>  จะมี attribute appendToBody อยู่ให้กำหนดเป็น true ซ่ะ  ก็หมดปัญหาแล้วครับ

<p:dialog header="dialog"
          widgetVar="dialogWidget"
          modal="true"
          width="600"
          appendToBody="true"
          height="400"
          resizable="false">
    <div class="action-button">
        <p:commandButton value="OK"
                         styleClass="blue-button"
                         onclick="dialogWidget.hide();"
                         type="button"/>
        <p:spacer/>
        <p:commandButton value="Cancle"
                         styleClass="white-gray-button"
                         onclick="dialogWidget.hide();"
                         type="button"/>
    </div>
</p:dialog>

Java Web Application Tutorial JSF(PrimeFaces) (3) : Change Theme

1. ไปที่  http://primefaces.org/themes.html  จากนั้นเลือก theme ที่ต้องการ

2. ไปที่ pom.xml  ใน tag dependencies  ให้เพิ่ม dependency ต่อไปนี้ลงไป  เพื่อโหลด theme ที่ต้องการมา

<dependency>
 <groupId>org.primefaces.themes</groupId>
 <artifactId>bootstrap</artifactId>
 <version>1.0.8</version>
</dependency>
  

ในที่นี้ผมเลือก theme twitter bootstrap (bootstrap)

Java Web Application Tutorial JSF(PrimeFaces) (2) : Project Structure

Java Web Application Tutorial JSF(PrimeFaces) (1) : Create Project

1. ที่ Netbeans IDE  ให้ไปที่  New Project --> Maven --> Web Application

Lazy load primefaces

xml

         
<p:dataTable value="#{startupForumMB.categorys}"
             var="category"
             rows="25"
             lazy="true"
             sortBy="#{category.id}"
             sortOrder="ASCENDING"
             rowIndexVar="counter"
             paginator="true"
             paginatorPosition="bottom"
             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
             rowsPerPageTemplate="5,10,15,25,50">
    <p:column headerText="No.">
        <h:outputText value="#{counter + 1}"/>
    </p:column>
    <p:column headerText="category">
        <h:outputText value="#{category.categoryName}"/>
    </p:column>
</p:dataTable>

reposition dialog : primefaces

$(document).ready(function(){
    
    $(window).resize(function() {
        $(".ui-dialog").each(function() {
            var width = $(this).width();

            $(this).css({
                "left": "50%",
                "margin-left": -1 * (width / 2) + "px"
            });
        });
    });
});

redirect page javaserver faces (jsf : primefaces)

html

    
<h:form>
    <!-- ?faces-redirect=true -- >
    <p:commandbutton action="public/resultsearch?faces-redirect=true" value="Search"/>
</h:form>

managed bean

try {
    FacesContext.getCurrentInstance().getExternalContext().redirect("success.xhtml");
} catch (IOException ex) {
    LOG.warn("con't redirect page to success.xhtml => {}", ex.getMessage());
}

ajax ใน primefaces

กำลังเขียนอยู่ครับ ...