javascript event

IE menggunakan event bubbling. Event merambat dari element paling khusus terus ke element paling general.

Event Handler / Listener
traditional
IE : attachEvent, detachEvent
Mozilla : addEventListener, removeEventListener

Event Object
IE : window.event
DOM : event adalah satu-satunya argument pada event handler.

Stop event propagation:
IE : oEvent.cancelBubble = true;
DOM : oEvent.stopPropagation();

direct-printing-3

1. siapkan direktori tempat penyimpanan file report yang dibuat. tempatkan lokasi tersebut di web.xml.

<context-param>
<param-name>jdevlab.REPORT_DIR</param-name>
<param-value>f:/temp/adfupload</param-value>
 </context-param>

2. siapkan servlet. servlet berfungsi mengirimkan PDF ke applet untuk dicetak.

servlet harus diregistrasikan di web.xml sbb:

<servlet>
 <servlet-name>ReportPdfServlet</servlet-name>
 <servlet-class>lab.view.servlet.ReportPdfServlet</servlet-class>
 </servlet>

<servlet-mapping>
 <servlet-name>ReportPdfServlet</servlet-name>
 <url-pattern>/reportdir/*</url-pattern>
 </servlet-mapping>

Tempatkan sourcecode ReportPdfServlet di direktori sesuai nama packagenya.  Contoh diatas menggunakan package ‘lab.view.servlet‘. Sesuaikan dengan tempat direktori yang dipakai di aplikasi.

3. persiapkan codebase applet.

codebase applet adalah tempat dimana file-file jar yang diperlukan applet ditempatkan. codebase tidak dapat ditempatkan di bawah WEB-INF/lib karena lokasi tersebut tidak bisa diakses dari luar. tempatkan codebase di subdirectory biasa seperti file html/jsp/jspx lainnya. contoh tempatkan di public_html/commonapplet.

jar yang terlibat adalah:

1. PDFRenderer.jar
2. plugin.jar (ambil dari jdk6)
3. printpdf.jar

4. buat html/jsp/jspx yang akan digunakan untuk menghasilkan report.

jspx setidaknya melibatkan komponen-komponen berikut:

1. ADF commandButton yang digunakan untuk mentrigger proses pembuatan report di server. commandButton ini terhubung dengan actionListener yang akan membuat report di server.
2. javascript untuk mentrigger commandButton pada point 1
3. applet yang akan memangil javascript di point2 untuk membuat ADF menghasilkan report. selanjutnya applet membaca report tersebut melalui servlet dan mengirimnya ke printer.

Berikut ini commandButton. perhatikan command button dimasukkan dalam panelButtonBar dengan inlineStype=”display:none”.  Fungsi panelButtonBar tersebut untuk membuat commandButton tersembunyi dari user. Dalam proses pembuatan bisa hilangkan dulu panelButtonBar untuk mengetes apakah proses pembuatan report di server sudah berhasil atau belum.

<af:panelButtonBar binding="#{backing_report_testReport.panelButtonBar1}"
 id="panelButtonBar1" inlineStyle="display:none">
 <af:commandButton text="doReport"
 binding="#{backing_report_testReport.cbDoReport}"
 id="cbDoReport"
 action="#{backing_report_testReport.cbDoReport_action}"/>
 </af:panelButtonBar>

Berikut javascript yang digunakan. perhatikan javascript memanggil fungsi document.getElementById(‘form1.cbDoReport‘) . Sesuaikan nama cbDoReport dengan nama ADF commandButton yang digunakan untuk mentrigger printing.

<afh:head title="testReport"
 binding="#{backing_report_testReport.head1}" id="head1">
 <meta http-equiv="Content-Type"
 content="text/html; charset=windows-1252"/>

 <script type="text/javascript">
 function createReport()
 {
 var elm = null;
 elm = document.getElementById('form1:cbDoReport');
 if (elm)
 {
 if (elm.dispatchEvent)
 {
 var evt = document.createEvent("MouseEvents");
 evt.initMouseEvent("click", true, true, window,
 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 elm.dispatchEvent(evt);
 }
 else
 {
 elm.fireEvent("onclick");
 }
 }
 }
 </script>

 </afh:head>

Pasang applet seperti dibawah ini. parameter FILENAME applet diset ke backingbean outputFileName yang akan diisi dengan nama report yang dihasilkan backing bean.

<f:verbatim>
 <applet archive="printpdf.jar" code="pdfrendererlab.PdfPrint"
 codebase="../commonapplet/" height="35" width="75">
<param name="FILENAME"
 value="${backing_report_testReport.outputFileName}"/>
 </applet>
 </f:verbatim>

Good Luck.

javascript event trigger programmatically

tujuan : mentrigger event click pada elm lain dari javascript, yang bisa bekerja di IE maupun Firefox.

<html>
<head>
<title>Multi Browser Event Trigger</title>

<script type="text/javascript">

function doFirstButton()
{
 alert("the first button clicked");
}

function doSecondButton()
{
 var elm = null;
 elm = document.getElementById('firstButton');
 if (elm)
 {
 if (elm.dispatchEvent)
 {
 // do Mozilla
 var evt = document.createEvent("MouseEvents");
 evt.initMouseEvent("click", true, true, window, 
 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 elm.dispatchEvent(evt);
 }
 else
 {
 // do Internet Explorer
 elm.fireEvent("onclick");
 }
 }
}

</script>

</head>
<body>

demo event trigger yang bisa dijalankan di Mozilla maupun IE
<form>
<input id="firstButton" type="button" value="first button" onclick="doFirstButton()"/>
<input id ="secondButton" type="button" value="second button" onclick="doSecondButton()"/>
</form>

</body>
</html>

Telah ditest berjalan di Firefox 3.5, IE6, Opera 9.64

call javascript from applet

Kunci melakukan hal ini adalah class : ‘netscape.javascript.JSObject‘. Class ini terdapat dalam ‘plugin.jar‘.

Berikut script yang terdapat di JSP/JSPX/HTML:

function calledByJava()
{
    alert("should be calledByJava");
}

Berikut code dalam applet yang melakukan pemanggilan:

private void btnLiveConnectActionPerformed(ActionEvent evt) {
    /*
    * objective, dari sini bisa memanggil ADF event
    */
    JSObject window = JSObject.getWindow(this);
    window.eval("calledByJava();");
}

Telah dicoba dan berhasil di Internet Explorer 6, Firefox 3.5, Opera 9.64

reference : https://jdk6.dev.java.net/plugin2/liveconnect/

call applet public method from javascript

Berikan ini potongan code applet (Java)

public class LiveConnectLabApplet extends javax.swing.JApplet
{
public void doTrigger()
{
// ... ...
}
}

Berikut ini definisi applet di jsp/jspx/html:

<applet id="LiveConnectApp" name="LiveConnectApp" archive="printpdf.jar"  code="pdfrendererlab.LiveConnectLabApplet" codebase="../commonapplet/" height="256" width="256" mayscript="mayscript">

</applet>

Pemanggilan method public applet dengan javascript berikut hanya bekerja di Internet Explorer 6 :

<script type="text/javascript">
function callJavaTrigger()
{
LiveConnectApp.doTrigger();
}
</script>

Dengan sedikit perubahan method diatas bisa berjalan di Firefox 3.5 dan Opera 9.65 :

<script type="text/javascript">
function callJavaTrigger()
{
document.applets.LiveConnectApp.doTrigger();
}
</script>

Hanya penambahan ‘document.applets.’.. aaarrgh.. bikin pusing aja…!!

reference : https://jdk6.dev.java.net/plugin2/liveconnect/

setting datasource di jdev

Buka Jdev. klik Tools –> Embedded OC4j Preferences.

Klik Global –> Data Source lalu klik New di bawah

Pilih Connection Pool lalu isikan nama misalnya : ‘labConnectionPool’ lalu tekan OK.

Isikan property seperti gambar di atas. Lalu ke dialog bagian sebelah kiri. Klik Connection Factory :

Ki bagian kiri. Klik Data Source. Klik tombol New di bawah. Kali ini pilih Managed Data Source :

Samakan setting yang diisi dengan yang ada di target OAS development. Dengan demikian tidak perlu ada perbedaan setting antara embbeded OC4J dengan OAS development.

applet library location

dimanakah menempatkan library (JAR) yang digunakan oleh applet? apakah harus diletakkan dalam WEB-INF/lib seperti umumnya jar untuk aplikasi web lain?

Perhatikan perbedaan ini : Servlet dieksekusi di server. Applet dieksekusi di client. Karena servlet dieksekusi di server, maka servlet bisa mengakses library yang terdapat di WEB-INF/lib.

WEB-INF/lib memiliki sifat tidak bisa diakses dari luar web aplikasi. Oleh karena applet dianggap sebagai aplikasi client, maka applet tidak bisa mengakses library yang ada di WEB-INF/lib. Oleh karena itu, library JAR untuk applet diletakkan di folder biasa seperti file JSP/JSPX lainnya.

LiveConnect API

Sedang mencari metode komunikasi antara Javascript dengan Java Applet. Search dengan Yahoo memberikan petunjuk mengenai LiveConnect API yang sudah ada sejak zaman Netscape, lalu akhir-akhir ini hidup kembali.

beberapa link:

• http://java.sun.com/products/plugin/1.3/docs/jsobject.html
• http://trephine.org/t/index.php?title=Understanding_LiveConnect
• https://developer.mozilla.org/en/LiveConnect
• http://en.wikipedia.org/wiki/LiveConnect
• http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=410
• http://www.nusphere.com/kb/jscoreguide/lc.html?

Mungkin bermanfaat bagi yang memerlukan komunikasi antara Javascript dengan Java.

direct printing 2

Library pencetak PDF menggunakan ‘pdfrenderer’.

Supaya Jasperreport mencetak PDF hasil ke suatu direktori di server gunakan method berikut: ‘JasperRunManager.runReportToPdfFile’

Umumnya aplikasi j2ee dijalankan dari dalam WAR atau EAR, maka supaya tersedia direktori tempat penyimpanan data harus disiapkan suatu direktori tersendiri di server. Definisikan path ke direktori tersebut menggunakan tag ‘<context-param>’ di ‘web.xml’ sbb:

<context-param>
<param-name>jdevlab.REPORT_DIR</param-name>
<param-value>f:/temp/adfupload</param-value>
</context-param>

Untuk OS Linux, harus disesuaikan nama nama direktori. misalnya ‘/app/user/report’. Pastikan OAS mendapat hak akses untuk read write ke direktori tersebut.

Untuk memperoleh nilai direktori tersebut gunakan statement berikut di backing bean:

FacesContext context = FacesContext.getCurrentInstance();
 ServletContext sc = (ServletContext) context.getExternalContext().getContext();
 String strOutputFile = sc.getInitParameter("jdevlab.REPORT_DIR") + "/result.pdf";

Nama file report yang dihasilkan di beritahukan ke applet menggunakan applet parameter sbb:

<f:verbatim>
<applet archive="printpdf.jar" code="pdfrendererlab.PdfPrint"
 codebase="../commonapplet/" height="35" width="75">
<param name="FILENAME"
 value="${backing_report_testReport.outputFileName}"/>
</applet>
</f:verbatim>

Perhatikan EL yang digunakan menggunakan awalan ‘$’, bukan ‘#’ seperti umumnya pada aplikasi JSF/ADF. Pada Jdev 10.1.3.3 EL yang menggunakan awalan ‘#’ pada bagian content ‘f:verbatim’ tidak dievaluasi. Mungkin karena bagian yang terdapat dalam ‘f:verbatim’ dianggap sebagai JSP biasa.

Untuk menghandle request print dari Applet digunakan Servlet. Berikut configurasi servlet di ‘web.xml’:

<servlet>
 <servlet-name>ReportPdfServlet</servlet-name>
 <servlet-class>lab.view.servlet.ReportPdfServlet</servlet-class>
 </servlet>

<servlet-mapping>
 <servlet-name>ReportPdfServlet</servlet-name>
 <url-pattern>/reportdir/*</url-pattern>
 </servlet-mapping>

to be continued

direct printing 1

Tujuan: dari aplikasi web j2ee, server bisa mencetak pada printer yang terpasang pada komputer client. Misalnya pembuatan report dilakukan dengan jasperreport. Jasperreport dieksekusi di server lalu hasilnya langsung tercetak printer client.

Upaya pencarian melalui Google dan Yahoo menghasilkan pendapat umum sbb:

• PHP versi windows bisa mengerjakan hal tersebut. (Belum dibuktikan)
• Aplikasi web tidak diperbolehkan mengerjakan hal tersebut, karena itu berarti lubang pada security. Bayangkan ketika kita mengakses Yahoo lalu tiba-tiba server Yahoo bisa mencetak di printer kita.
• Ada beberapa solusi komersial non opensource dengan harga kira-kira $ 8000 per server.
• Belum ada solusi open source yang cukup memuaskan.
• Belum tahu apakah Javascript punya fasilitas direct printing

Setelah berdiskusi dengan Google dan Yahoo,  diperoleh ide dasar untuk membuat solusi sederhana masalah ini sbb:

• Jasperreport menghasilkan report dalam format PDF di server
• Karena applet bisa mengakses printer, maka dibuat applet yang bisa membaca dari direktori server dan mengirimnya ke printer.
• Supaya applet bisa mengirim pdf ke printer, maka harus dicari library-library yang bisa melakukan pencetakan PDF
• Setelah selesai mencetak, bila diharuskan, hapus file PDF yang terletak di webserver

Ketika ditanya mengenai library java yang mencetak PDF, Google dan Yahoo sepakat memberikan alternatif:

• pdfbox
• icepdf
• pdfrenderer
• dll, maksudnya ada yang lain tetapi belum menarik untuk dieksplorasi lebih lanjut

Ketika framework j2ee yang digunakan untuk membangun aplikasi adalah ADF, isu-isu ini timbul:

• Bagaimana applet bisa memerintahkan server untuk mencetak report?
• Bagaimana ADF bisa memberitahu applet apa nama report yang dihasilkan dan dimana lokasinya. Pertanyaan dimana lokasinya juga terkait dengan kebiasaan ADF menggunakan nama folder ‘faces’ yang merupakan folder virtual. Contoh : http://nama_server/nama_app/faces/thepage.jspx  Apakah ini akan menimbulkan masalah???
• Bagaimana kalau aplikasi tersebut dijalankan dari dalam WAR atau EAR? Apakah proses penulisan file akan tetap normal seperti bila dijalankan dari exploded app?