Membuat Generic Slider dengan ReactJS

Seperti dalam tulisan saya sebelumnya, banyak keuntungan membuat komponen generik. Kali ini saya akan mencoba membuat image slider seperti airbnb.

Komponen slider yang harus ada:

• List/map

Komponen Card

Komponen Slider

Catatan penting

• Untuk safari, slider nya tidak begitu mulus, harus ada tambahan di css nya 

.card-slider .cs-parent-wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch !important;
}
.card-slider .cs-parent-wrapper::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: none !important;
}

.card-slider .cs-wrapper::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: none !important;
}

Test

1. Clone from here 
2. npm install
3. npm start

Result

Custom Spring Annotation @PreAuthorize

Anotasi @PreAuthorize biasanya di pakai untuk memvalidasi token yang digunakan oleh sebuah request saat memanggil REST API. Anotasi ini biasanya dipasang dalam sebuah class rest controller, dan penggunaannya seperti berikut :

Dalam dokumentasi spring dijelaskan beberapa opsi yang bisa kita gunakan, diantaranya seperti isAuthenticated(), hasRole([role]), permitAll dan lain sebagainya.

Jika kita perhatikan lebih lanjut pada log aplikasi, sebenarnya @PreAuthorize isAuthenticated() ini melakukan sebuah query dan logic. Dari log mode debug bisa dilihat bahwa isAuthenticated() melakukan query ke tabel access_token untuk mengecek apakah token terdaftar dan expired date nya belum berakhir.

Dan ternyata kita bisa membuat sebuah method yang bisa di masukan kedalam anotasi @PreAuthorize seperti isAuthenticated(), yaitu dengan cara menambahkan anotasi @Component pada class java yang method nya akan digunakan.

Berikut contoh implementasinya:

Bisa dilihat pada code diatas bahwa dalam anotasi @PreAuthorize berisi @nostraEmployee.check('NOSTRA'). Cara penggunaannya adalah dengan menambahkan '@' lalu nama class nya yang diawali dangan huruf lower case, dan selanjutnya '.' diikuti nama methodnya. 

Dalam contoh kali ini nama class nya adalah NostraEmployee dan method yang ingin digunakan adalah method check, maka isi dari @PreAuthorize adalah "@nostraEmployee.check('NOSTRA')"

Dan berikut adalah code untuk class NostraEmployee :

Jadi dengan menambahkan annotation @Component pada suatu class kita bisa menggunakan method didalamnya pada anotasi @PreAuthorize. Dan didalam method tersebut kita bisa menambahkan logic tambahan dalam mengauthentikasi token yang mengakses REST API kita.

Primefaces mendapatkan ID component

Pada blog hari ini saya akan menulis tentang Primefaces. Pada saat kita menggunakan komponen data seperti datagrid, datatabel, datalist dll dan sayangnya pada komponen data primefaces selalu men-generate id otomatis ke setiap komponen didalamnya. Padahal untuk kasus tertentu kita membutuhkan id tsb untuk diolah sesuai dengan kebutuhan kita. 

Nah dalam blog kali ini saya akan memberi tips untuk menyelesaikan masalah tersebut :D.

Berikut saya memiliki contoh menampilkan data menggunakan datatable component :

Pada gambar diatas saya menggunakan komponen outputtext untuk menampilkan data manufacturer ID dan mendefinisikan id komponen tersebut. Mari kita lihat dibrowser apakah id-nya sesuai dengan keinginan kita .

Dan primefaces men-generate id menjadi j_idt5:t1:0:_id . Untuk menyelesaikan kasus ini saya membungkus component primefaces dengan native html yaitu <div> serta sedikit menggunakan javascript. Berikut solusinya : 

JavaScript Code :

Ide dasar pada gambar diatas adalah setiap user klik tombol button akan memanggil method javascript yang berfungsi mencari id yang ada didalam <div>. Jika id ditemukan akan memanggil remote command component untuk mempassing value ke bean. Mari kita coba :

Pada gambar diatas ketika saya klik button onClick maka kita akan mendapatkan id j_idt5:t1:0:_id. :)

Sekian blog dari saya semoga bermanfaat :D

ADF - Shuttle Component

Pada kesempatan ini, saya akan membahas tentang Shuttle Component. Shuttle Component sendiri merupakan sebuah komponen untuk memilih lebih dari satu buah pilihan. Pada kesempatan ini, saya ingin mempraktekan cara menginsert value dari shuttle component namun value nya di pisahkan dengan tanda ";" . Untuk mendowload project bisa klik disini. Sebelum nya, saya akan menjelaskan sedikit arsitektur project yang akan saya buat. 

Di dalam project ini, saya menggunakan 2 buah table, table pertama menggunakan table department yang bisa di ambil dari database HR serta 1 lagi menggunakan table yang saya buat sendiri untuk menampung hasil insert dari shuttle. Table Department akan digunakan untuk dijadikan sebagain LOV untuk shuttle component, sedangkan table satu nya untuk menampung hasil insert data dan di tampilkan ke dalam table.

• Berikut tampilan main.jspx yang terdiri dari table yang saya buat dan 1 buah button untuk membuka popup.

Tampilan main.jspx

• Berikut tampilan popup untuk insert data, yang terdiri dari 1 buah shuttle component, 1 input text dan 1 buah button. Pada screen ini, kita diminta untuk memasukkan nama, serta nama department yang dimana department bisa dipilih lebih dari 1, jika sudah button insert berfungsi untuk memasukkan data ke dalam table yang sudah kita buat di main screen.

Tampilan Insert Data Pada Pop Up

• Kita masukkan ActionListener pada button yang ada di dalam popup screen. Jika belum pernah membuat method nya bisa di buat.

ActionListener Pada Button Add

• Untuk memasukkan Shuttle Component, kita bisa mendrag data control yang ingin kita buat shuttle ke dalam jspx, sebagai contoh saya akan membuat shuttle dari DepartmentView1. Kemudian pilih Multiple Selection dan pilih ADF Select Many Shuttle. Jika sudah, kita pilih Base Attribute nya menjadi DepartmentName & DisplayAttribute nya menjadi DepartmentName.

Cara Add Shuttle Component

Pilihan Ketika Add Shuttle Component

• Berikut Sample Java Code nya.

 package com.demo.blog.bean;  
 import com.demo.blog.model.TableCreationVoImpl;  
 import com.demo.blog.model.TableCreationVoRowImpl;  
 import com.demo.blog.model.common.AppModule;  
 import javax.el.ELContext;  
 import javax.el.ExpressionFactory;  
 import javax.el.ValueExpression;  
 import javax.faces.application.Application;  
 import javax.faces.context.FacesContext;  
 import javax.faces.event.ActionEvent;  
 import oracle.adf.model.BindingContext;  
 import oracle.adf.model.binding.DCBindingContainer;  
 import oracle.adf.model.binding.DCDataControl;  
 import oracle.adf.model.binding.DCIteratorBinding;  
 import oracle.adf.view.rich.component.rich.input.RichInputText;  
 import oracle.binding.BindingContainer;  
 import oracle.jbo.Row;  
 import oracle.jbo.ViewObject;  
 import oracle.jbo.uicli.binding.JUCtrlListBinding;  
 public class Bean {  
   private final String TABLECREATION_ITERATOR = "TableCreationVo1Iterator";  
   private RichInputText nama;  
   public Bean() {  
   }  
   public BindingContainer getBindings() {  
     return oracle.adf.model.BindingContext.getCurrent().getCurrentBindingsEntry();  
   }  
   public void SaveAndClose(ActionEvent actionEvent) {  
     // Add event code here...  
     oracle.binding.BindingContainer bc = this.getBindings();  
     JUCtrlListBinding listBinding =  
       (JUCtrlListBinding)bc.get("DepartmentView1");  
     BindingContext bindingContext = BindingContext.getCurrent();  
     DCDataControl dc =  
       bindingContext.findDataControl("AppModuleDataControl");  
     AppModule appM = (AppModule)dc.getDataProvider();  
     String departmentVar = "";  
     Object[] str = listBinding.getSelectedValues();  
     if (str != null && str.length > 0) {  
       for (int i = 0; i < str.length; i++) {  
         if (i == 0) {  
           departmentVar = str[i].toString();  
         } else {  
           departmentVar = departmentVar + " ; " + str[i];  
         }  
       }  
       listBinding.clearSelectedIndices();  
     }  
     String name = getNama().getValue().toString();  
     AppModule appModule = getAppModuleDataControl();  
     TableCreationVoImpl vo =  
       (TableCreationVoImpl)this.getViewObjectByIterator(TABLECREATION_ITERATOR);  
     Row newRecord = vo.createRow();  
     newRecord.setAttribute(TableCreationVoRowImpl.DEPARTMENT,  
                 departmentVar);  
     newRecord.setAttribute(TableCreationVoRowImpl.NAME, name);  
     vo.insertRow(newRecord);  
   }  
   private ViewObject getViewObjectByIterator(String iteratorName) {  
     DCBindingContainer bindings2 =  
       (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();  
     DCIteratorBinding dcItteratorBindings =  
       bindings2.findIteratorBinding(iteratorName);  
     // Get an object representing the table and what may be selected within it  
     ViewObject vo = dcItteratorBindings.getViewObject();  
     return vo;  
   }  
   public static AppModule getAppModuleDataControl() {  
     FacesContext fc = FacesContext.getCurrentInstance();  
     Application app = fc.getApplication();  
     ExpressionFactory elFactory = app.getExpressionFactory();  
     ELContext elContext = fc.getELContext();  
     ValueExpression valueExp =  
       elFactory.createValueExpression(elContext, "#{data.AppModuleDataControl.dataProvider}",  
                       AppModule.class);  
     return (AppModule)valueExp.getValue(elContext);  
   }  
   public void setNama(RichInputText nama) {  
     this.nama = nama;  
   }  
   public RichInputText getNama() {  
     return nama;  
   }  
 }  

• Berikut hasil nya jika main.jspx nya di run.

Tampilan Ketika Page Dijalankan Pertama Kali

Tampilan Ketika Button Insert Data Di Klik

Cara Isi Insert Data yang dilanjutkan dengan mengklik Add

Tampilan Table Setelah Data Di Add

Contoh Add data sebanyak yang di pilih

Tampilan Akhir Page

Semoga bermanfaat !

Terima Kasih.