Anything Slider jQuery Plugin into APEX

Jika anda ingin mengimplementasikan Anything Slider jQuery Plugin seperti contoh berikut lakukan langkah-langkah berikut :

1. Download plugin di sini.
2. Extract hasil download.
3. Pindahkan folder (css, images, js)ke dalam image server apex
• Untuk OHS copy paste kedalam /i/myapp/anythingslider/
• Untuk EPG memalai filezilla atau fireFTP pindah ke /i/myapp/anythingslider/

Implementasi dapat dilakukan dengan dua cara yaitu :

• Static Image
1. Pada page header

<link rel="stylesheet" href="/i/myapp/AnythingSlider/css/anythingslider.css">
<script src="/i/myapp/AnythingSlider/js/jquery.anythingslider.js" type="text/javascript"></script>
    <style>
        #slider { width: 200px; height: 200px; }
        #slider2 { width: 700px; height: 390px; }
    </style>

    <!-- AnythingSlider initialization -->
    <script>
        // DOM Ready
        $(function(){
            $('#slider').anythingSlider();
        });
        $(function(){
            $('#slider2').anythingSlider();
  });
 </script>

2. Buatlah sebuah HTML region dengan source

<ul id="slider">

<li><img src="/i/apex/graphics/apex_consolidation.png" alt=""></li>

<li><img src="/i/apex/graphics/apex-architecture.png" alt=""></li>

<li><img src="/i/apex/graphics/apex-bip.png" alt=""></li>

<li><img src="/i/apex/graphics/apex-multitenant.png" alt=""></li>

</ul>

• Dynamic image dari tabel (contoh kasus demo_product_info)
1. Buatlah hidden item : PX_PRODUCT_ID (jangan lupa ganti x dengan page dimana anda buat)
2. Buatlah sebuah application process on demand:getting_img

DECLARE
  l_lob      BLOB;
  l_length   NUMBER;
  l_mimetype VARCHAR2(2000);
  l_filename VARCHAR2(2000);
BEGIN
--
  SELECT product_image,
    mimetype,
    filename
  INTO l_lob,
    l_mimetype,
    l_filename
  FROM demo_product_info
  WHERE product_id = :PX_PRODUCT_ID
  ;
  --
  l_length := DBMS_LOB.getlength(l_lob);
  --
  htp.flush;
  htp.init;
  --
  owa_util.mime_header(nvl(l_mimetype,'application/octet'), FALSE);
 
  htp.p('Content-length:' || l_length);
  htp.p('Content-Disposition:inline;filename="' || l_filename || '"');
  --
  -- close the headers
  owa_util.http_header_close;
  --
  -- download the BLOB
  wpg_docload.download_file(l_lob);
--
END;

3. Buatlah sebuah region : PL/SQL anonymous block

DECLARE
BEGIN
    HTP.prn('<ul id="slider">'); 
 FOR c1 IN(
    SELECT product_id,
      product_name
    FROM demo_product_info
    WHERE NVL(dbms_lob.getlength(product_image),0) > 0
  )LOOP
 
    HTP.prn('<li>');           
    HTP.prn('<div class="clist">');
    HTP.prn('<img src="f?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:APPLICATION_PROCESS=getting_img:NO::PX_PRODUCT_ID:' || c1.product_id || '" alt="" />');
    HTP.prn('<p>' || c1.product_name || '</p>');
    HTP.prn('</div>');
    HTP.prn('</li>');
 
  END LOOP;
    HTP.prn('</ul>');
END;

Maka akan kita lihat hasil penampakan seperti berikut:

• Static image

• Dynamic image

Modal Dialog using iFrame

Kebutuhan tingkat lanjut dalam penggunaan jQuery UI untuk form dialog bisa di penuhi dengan dua cara yaitu.

• Memakai cara biasa dengan mendefinisikan <div></div> yang ada didalam page tersebut, kemudiann mendefinisikan code jQuery di page tersebut. Tehnik ini memiliki kelemahan jika kita butuh proses yang sama untuk banyak page yang nantinya akan memerlukan code spesifik terhadap page tersebut. bayangkan jika kebutuhan seperti itu ada 10 page?. Anda bisa pelajari dasarnya di sini.
• Memakai iFrame dalam page 0 (zero) . Tehnik ini memerlukan definisi jS di page zero, dan memodifikasi branching di page form process memakai  : Branch to PL/SQL Procedure.

Detail prosesnya adalah sebagai berikut

1. Pada page zero buatlah region (Before footer)sbb

<script type="text/javascript">
function iFrameModal(pHref, pW,pH,pT){
var vpad=10;
$( "#iFrameModal:ui-dialog" ).dialog( "destroy" );
$('<iframe id="iFrameModal"  src="' + pHref + '" />').dialog({
        autoOpen: true,
        title:pT,
        width: pW,
        height: pH,
        modal: true,
        resizable: true
    }).width(pW-vpad).height(pH-vpad); 
};
</script>

2. Buatlah page form with report tabel EMP contoh akan memakai page 21 (report) dan 22 (Form)
3. Pada page 21 (report) lakukan perubahan berikut:
• Tombol Create ubah menjadi :

javascript:iFrameModal('f?p=&APP_ID.:22:&SESSION.::NO:22::',390,435,'Create: EMP');

• Link Report ubah menjadi :

javascript:iFrameModal('f?p=&APP_ID.:22:&APP_SESSION.::::P22_EMPNO:#EMPNO#',600,400,'Edit : EMP');

4. Pada page 22 (Form) lakukan perubahan berikut:
• Delete atau buat conditional Never untuk existing branching
• Buatlah branching baru dengan tipe Branch to PL/SQL Procedure :

BEGIN
--closes this popup window
htp.p('<body>');
htp.p('<script type="text/javascript">');
htp.p('parent.doSubmit(''DUMMY'');');
htp.p('parent.$(''this'').dialog(''close'');');
htp.p('</script>');
htp.p('</body>');
END;

Catatan : Page template untuk page 22 (Form) gunakan popup atau modifikasi template printer friendly dengan menghilangkan bagian navbar dan logo.
Contoh demo bisa dilihat di sini.
Sumber : Oracle APEX Forum.

Implementasi jQuery UI ke dalam APEX

Pada dasarnya APEX sudah merupakan murni aplikasi web yang sama sekali berbeda dengan Oracle Form developer. Karena itu pengetahuan tentang JS, HTML, CSS akan berpengaruh banyak dalam pengembangannya.

Library jQuery sudah include didalam apex dengan direktory #IMAGE_PREFIX#libraries/ untuk versinya pada APEX terakhir (4.1.1) adalah 1.4.2 dan 1.6.2 sedangkan untuk UI adalah 1.8.

Meskipun APEX sendiri telah memakainya secara internal dengan memanggil fungsi-fungsi tertentu seperti apex.jQuery bisa diganti dengan $. Namun untuk pemakaian yang spesifik seperti UI widget kita harus mendefinisikan terlebih dahulu didalam template, header/footer sebuah page yang akan kita pakai. contoh

• Theme

<link rel="stylesheet" href = "#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/
ui-lightness/jquery-ui.css" type="text/css" />

• UI

<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.accordion.js" type="text/javascript"></script>
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.sortable.js"></script>

• Effects

<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.effects.explode.js"></script>

• External Cookie

<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/external/jquery.cookie.js" type="text/javascript"> </script>

Kita bisa mengimplementasikan contoh demo jQuery UI kedalam APEX. Seperti demo contoh yang saya buat.

• Dialog
• Alert Page 0
• Confirmation Page 0
• Tabs
• Accordion
• Slider Menu

Namun implementasi di dalam APEX sebisa mungkin memakai template supaya bisa digunakan berulang-ulang sesuai kebutuhan. Selamat mencoba.

Mengapa memakai Dynamic Action

Untuk yang berhubungan dengan client interactivity APEX bisa di handle memakai JS/jQuery. Mulai release 4.0 APEX sudah terintegrasi dengan jQuery 1.4.2 dan 1.6.2 jadi tidak perlu lagi upload library ke dalam APEX.

Membangunnya bisa dengan cara manual atau memakai Dynamic Action (DA). Lantas mengapa kita lebih disarankan untuk memakai cara kedua? berikut alasannya.

• Dengan Dynamic Action kita bisa secara declarative mengetahui dimana dan bagaimana code tersebut bekerja. Sehingga bisa dibayangkan menjadi trigger dalam form developer.
• Ini lebih mudah untuk programmer yang tidak berpengalaman di teknologi web (JS/jQuery) seperti saya.
• Yang terpenting menurut saya adalah dengan menggunakan  DA maka feature tambahan akan bisa di implementasikan seperti Condition, Authorization (Security) dan Development (Build Option).

Tiga Cara Highlight Row untuk Classic Report

Untuk melakukan hal ini ada 3 cara.

1. Melalui CSS.
Melalui cara ini buatlah di bagian header/footer page atau header/footer Region report. Jangan lupa region id diberi nama EMP_REPORT


#EMP_REPORT .highlight-row:hover > td {
background-color: red;
}

2. Melalui JS/jQuery
Cara kedua bisa dilalukan dengan atau tanpa dynamic action yaitu:
• Event : Page load
• Action : Execute JavaScript Code
• Setting :

$(this.affectedElements).prepend(
  ''
);

• Effect : Region (pilih region report yang akan di highlight)
3. Melalui Template Report
Melalui cara ini kita harus melakukan edit template report yang kita pakai. contoh STANDARD.
• Before Each Row :

<tr #HIGHLIGHT_ROW#>

• After Each Row :

</tr>

• Row Highlighting : Background color for current row = red

How to Change Number of Rows on Tabular Form/Report

Salah satu masalah atau bisa saya anggap sebagai Bug saat membuat tabular form atau report adalah kesulitan saat kita mencoba merubah jumlah row yang tampil per page atau merubah pagination.

Meskipun pada property Report Attribute pada bagian layout and pagination ada beberapa property yang mengatur perubahan tersebut, namun saat di aplikasikan akan timbul masalah yaitu efek perubahan dari perubahan Number of Rows, Number of Rows (item) atau Pagination saat apply dan dijalankan report tetap tampil seperti semula tidak berubah. sampai release terakhir (4.1.1) masih terjadi seperti ini.

Hal itu disebabkan karena browser masih menyimpan cache dari tampilan sebelumnya. Meskipun pada property page kita sudah atur Server Cache >> Cache Page: No.

Solusinya adalah kita harus menambahkan sebuah proses reset pagination pada process poin : on On Load - Before Header.

Silahkan dicoba.