Copy Button (Cross – Browser)
Copy button memang bisa dicapai hanya dengan menggunakan javascript. Akan tetapi ada beberapa masalah seperti perlakuan yang berbeda pada masing – masing browser dan Untuk alasan itulah maka kita membutuhkan flash sebagai solusinya.
Langkah 1 : Sekilas
Untuk menciptakan fungsi copy to clipboard yang cross-browser (jalan di browser manapun) harus digunakan flash. Salah satu contohnya bisa dilihat di indowebster :
Contoh Lainnya :
Jika anda perhatikan dengan baik maka tombol diatas sebenarnya adalah tombol flash (untuk mengujinya klik kanan pada tombol tersebut). Pada tutorial kali ini kita akan membuat button clipboard seperti iitu.
Langkah 2 : Siapkan Flash
Atur terlebih dahulu size dari stage anda (Ctrl + J) menjadi 80 x 30px.
Langkah 3 : Desain Copy Button
Desainlah tombol anda dan tekan F8, kemudian pilih tipenya button :
Setelah itu ubah warna dan desainnya sesuka hati. Berikut adalah komposisi warna saya :
Jangan lupa untuk menamai button anda dengan nama copyBtn seperti yang dilakukan dibawah ini :
Langkah 4 : Tambahkan Sedikit Magic !
Tambahkan Script berikut pada frame pertama anda :
import class ExternalInterface untuk komunikasi dengan javascript.
import flash.external.ExternalInterface;
Script dibawah ini berfungsi menampung parameter yang dikirim melalui javascript. Dalam contoh kali ini nama variabel yang dikirimkan dari javascript adalah “url” di dalam flash kita menuliskan param[“url”]. String yang membungkusnya berfungsi untuk mengubah tipenya menjadi String.
var param:Object = LoaderInfo(this.root.loaderInfo).parameters; var url:String = ''; url = String(param["url"]);
Tambahkan Listener kepada copyBtn.
copyBtn.addEventListener(MouseEvent.MOUSE_UP,copyText);
Fungsi dari copyText terdiri dari 2 hal yang pertama anda mengkopi url ke dalam clipboard dan yang kedua berfungsi untuk memanggil fungsi javascript yang bernama popMeUp.
function copyText(e:MouseEvent):void{
System.setClipboard(url);
if(ExternalInterface.available){
ExternalInterface.call("popMeUp");
}
}
Langkah 5 : Buat File HTML
Buatlah file HTML anda satu folder dengan file flash anda.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Copy Demo</title> </head> <body> <input type="text" value="www.hermantaniwan.com" readonly="readonly" id="inputText"/> <div id="copy_button"></div> <div> <textarea cols="29" rows="5" id="textblok" onclick="onTextAreaClick()">Paste disini.</textarea> </div> </body> </html>
Hal terpenting yang dilihat disini adalah
<div id="copy_button"></div>
Pada block inilah akan diselipkan file swf kita.
Langkah 6 : Tambahkan Javascript
Untuk mengembed flash kedalam HTML, kita akan menggunakan swfobjects. Download codenya dari http://code.google.com/p/swfobject/
Tambahkan scriptnya.
<script src=" swfobject.js" type="text/javascript"></script>
Script ini dipanggil sesaat setelah HTML telah diload selesai ( ).
function initPage(){
}
Hal berikutnya adalah kita masukkan script berikut kedalam fungsi init. Sekarang akan ditambahkan swf yang telah dibuat tadi kedalam HTML melalui javascript. Lihatlah bahwa flashvars.url menandakan anda mengirim parameter bernama url kedalam flash dan dalam hal ini nilainya diambil dari input text.
var flashvars = {};
flashvars.url = document.getElementById("inputText").value;
params.allowscriptaccess yang diset always memberikan wewenang kepada HTML untuk berkomunikasi dengan flash.
var params = {};
params.allowscriptaccess = "always";
var attributes = {};
Fungsi untuk mengembed SWF ke dalam HTML adalah
swfobject.embedSWF(namafile,id_tagHTML,pjg,lbr,versi,badge_installer, flashvars,params,attributes)
id_tagHTML adalah id dalam HTML dimana file swf tadi akan diselipkan dalam hal ini copy_button.
badge_installer disini artinya adalah badge installer akan ditambahkan ketika computer client memiliki versi flash yang lama. Kita dapat menambahkan path badge tersebut contohnya : “expressinstall.swf” atau jika tidak diinginkan ganti menjadi false.
swfobject.embedSWF("copy.swf", "copy_button", "80", "30", "9.0.0",false, flashvars, params, attributes);
Script ini dipanggil oleh flash melalui ExternalInterface.call(“popMeUp”); yang bisa dilihat diatas.
function popMeUp(){
document.getElementById("textblok").style.display='block';
alert("Pesan anda telah terkopi");
}
Hanya tambahan saja, ketika textarea diklik maka warna teks akan menjadi hitam dan isinya dikosongkan.
function onTextAreaClick(){
document.getElementById("textblok").style.color = '#000000';
document.getElementById("textblok").value = '';
}
Langkah 7 : Sedikit Styling
#inputText{
padding:5px;
width:150px;
background:white;
color:#878685;
border:1px solid #CACACA;
float:left;
margin-right:12px;
}
#textblok{
margin-top:5px;
font-family:Arial, Helvetica, sans-serif;
color:#C7C6C5;
font-size:14px;
display:none;
width:250px;
}
Code Akhir
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Copy Demo</title>
<style>
#inputText{
padding:5px;
width:150px;
background:white;
color:#878685;
border:1px solid #CACACA;
float:left;
margin-right:12px;
}
#textblok{
margin-top:5px;
font-family:Arial, Helvetica, sans-serif;
color:#C7C6C5;
font-size:14px;
display:none;
width:250px;
}
</style>
</head>
<body onload="initPage()">
<input type="text" value="www.hermantaniwan.com" readonly="readonly" id="inputText"/>
<div id="copy_button"></div>
<div>
<textarea cols="29" rows="5" id="textblok" onclick="onTextAreaClick()">Paste disini.</textarea>
</div>
<script src=" swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
function initPage(){
var flashvars = {};
flashvars.url = document.getElementById("inputText").value;
var params = {};
params.allowscriptaccess = "always";
var attributes = {};
swfobject.embedSWF("copy.swf", "copy_button", "80", "30", "9.0.0",false, flashvars, params, attributes);
}
function popMeUp(){
document.getElementById("textblok").style.display='block';
alert("Pesan anda telah terkopi");
}
function onTextAreaClick(){
document.getElementById("textblok").style.color = '#000000';
document.getElementById("textblok").value = '';
}
</script>
</body>
</html>
NB : Perhatikanlah bahwa lebih baik menggunakan teknik ini hanya pada saat ketika url atau teks dalam bentuk statis bukan dinamis. Hal ini dikarenakan adanya beberapa persoalan security yang muncul. Akhir kata, sekian dulu untuk kali ini dan sampai ketemu di tutorial berikutnya sahabat interaktif.
Related Posts
Add Comment
Loading ...