Bu iş için
https://clipboardjs.com/ kütüphanesi kullanılmıştır. Ancak bu kütüphanenin örnekleri, Json verisi olan bir yazı alanı için çalışmamaktadır. Bunun için aşağıdaki gibi bir yöntem izlenmiştir.
Aşağıdaki örnek bir JSON verisini clipboarda kopyalamaktadır:
<input type="text" id="inputJson" value="" style="display:none"/>
<button type="button"
class="button" id="copy-button" data-clipboard-target="#inputJson">Copy To Clipboard</button>
<br/>
<h:outputText id="inputTextPretty" value="#{inventoryBean.pretty}"
style="white-space: pre-wrap;"></h:outputText>
<h:outputScript name="clipboard.min.js" library="js"></h:outputScript>
<script>
var clipboard = new ClipboardJS('.button', {
text: function() {
return JSON.stringify(#{testBean.json});
}
});
</script>
inputJson id'li input alanı gizli olarak koyulmuştur. Kopyalayan düğme eklenmiştir. data-clipboard-target özelliği kopyalanacak alanı vermektedir. Ancak biz fonksiyonu script bölümünde görüldüğü gibi eziyoruz yani yazı alanına girilen değeri değil Bean'den gelen değeri kullanacağız. JSON verisi TestBean sınıfındadır ve #{testBean.json} ile alınmaktadır. Bu sınıf bir JSON string'i döndürür. JSON.stringify() ise dönen JSON ifadesini Javascript için Json nesnesine çevirir. Bu ifade ile bir JSON verisi clipboard'a aktarılmış olunur.
Eğer JSON yerine basit bir tipi clipboard'a atmak istiyorsanız fonksiyonu yazamanıza gerek yoktur. var clipboard = new ClipboardJS('.button') şeklinde vermeniz yeterlidir. inputJson girilen yazılan düğmeye tıklandığında clipboard'a eklenir.
