A_turkeri: Eylül 2013

17 Eylül 2013 Salı

JSF Sayfasına css ve js linki verme

Template kullanılırken yada yalın jsf sayfası kullanımında bir sayfada (/hello.jsf) gelebilen css yada js dosyaları path i farklı olan (/hello/hello.jsf) sayfasında gelmeyebilirler ya her sayfada ayrı bir referans girişi yapacaksınız yada java ile context pathe erişip bunu sayfada her referans url nin başına koyacaksınız.

 
<link href="jsfBean.contextPathGetirenMetod()/css/common1.css" rel="stylesheet" type="text/css" />

Ama tabiki bu tam bir amelelik yada bunun için bir BaseBean yazmak gerekir yoksa her bean de ekstra dan bir kaç satır kod olmak zorunda kalır BaseBeande olursada BaseBean invoke edildiğinde constructor ına benim gibi yükleniyorsanız performansı etkilerseniz dolayısı ile hiç boşuna macera aramadan bir jsf sorunun yine jsf ile çözelim.

<h:outputStylesheet library="css" name="style.css"  />

<h:outputScript library="js" name="common.js" />

Referansları yukarıdaki gibi verdiğinizde jsf sizin için output olarak şu şekilde bir html oluşturuyor

UygulamanınContextPathi/javax.faces.resource/common.css.jsf

cannot call method xxxx of null hatası

xxx yerine herhangi bir method olabilir sizin tanımladıgınız yada java scriptin kendi fonksiyonları gibi.Bu durumda yazdığınız kod öbeğini üzerinde işlem yapmaya çalıştığınız dom elemntinin altına almanız gerekmektedir .Yeniler kısaca javascript kodunu body nin bitirme tagının hemen üstüne yazabilirler.

          <script>
            document.querySelector( '#main' ).addEventListener('click',
              function( event ) {
                event.preventDefault();
                zoom.to({ element: event.target });
                } );
        </script>

Yapmaniz gereken document.ready gibi bir şart kullandıktan sonra bu kodu çağırmak yada #main id sinin geçtiği dom elementinin altında bu kodu çağırmak

Edit:Şunu da eklemek itiyorum javascript hataları bize göre devrik söylendiği için kafamız karışabilir mesela

Uncaught TypeError Cannot read property 'xxxx' of null

aslında java script null olan yani olmayan bir şeyin xxxx diye propertysini benden istiyorsun diye kızıyor bahsedilen dom elementinin neden olmadığını araştırmanız sizi çözüme yaklaştıracaktır

2 Eylül 2013 Pazartesi

Context Path i belirlemek glassfish ve Tomcat

Tomcat ve Glassfish context_root yazımı

Tomcat kullanıyorsunuz web uygulamanız genelde uygulamanızın ismini context path olarak kabul edecektir fakat eğerki farklı bir isim kullanmak istiyor iseniz
context.xml dosyası oluşturup içine şu nodu yazmanız gerekmekte

<Context 
  docBase="<Uygulama>" 
  path="Uygulamaiçin istenen context path" 
  reloadable="true" 
/>

Glassfish de ise eğerki bu parametreyi vermezseniz uygulamanız deploy olduğunda xxx-SNAPSHOT_yyy gibi beklemediğiniz bir context_path de çalışıyor olabilir uygulamanız

Bunun önüne geçmek için 2 yöntem mevcut 1 .si zorunlu olan web.xml den başka dosya istemem diyorsanız web xml in içine şu nodu yazıyorsunuz

<glassfish-web-app error-url="">
    <context-root>/UygulamaContextPathim</context-root>
</glassfish-web-app>

Yada glassfis-web.xml dosyası oluşturup onun içini şu şekilde doldurmak

<glassfish-web-app error-url="">
  <parameter-encoding default-charset="UTF-8"/>
  <context-root>UygulamaContextPathim</context-root>

1 Eylül 2013 Pazar

Javascript ve css ile loading sayfası yapma

Sayfalar yüklenirken sayfanızın bagımlı oldugu css js dosyaları ve imajlar yuklenmeden sayfanızın gözükmemesini istememeniz yada bu şekilde bir derdiniz olması gerekiyor.

Öncelike basit olara sayfa yuklenene kadar sadece bir loading ikonu -.gif hozukmesi için css html ve java script ile yapılması gerekenler
CSS
<style type="text/css">
#dvLoading
{
background: url(images/bx_loader.gif) #fff no-repeat center center;
height: 700px;
width: 100%;
position: fixed;
z-index: 1000;
}

</style>
HTML
<body>

<div id="dvLoading"></div>
Javascript
window.onload = function(){ document.getElementById("loading").style.display = "none" }

Yeni başlayanlar için kod biraz yabncı gelebilşr fakat javascript normalde gozukur yani display:block yada visible olan bir div i sayfa yuklendiğinde görünmez yapıyor bahsettipimiz div de loading gif ini içeren div imiz.
Bu konuda farklı çözümler bulabilirsinşz ama jquery kullanmadan yapılacak en basit yollardan biri budur.

Biraz daha karmaşık olan durumlarda size ait spesifik durumlarda mesela loading arayüzünün bir ajax çağrısı yaptığınızda-herhangi bir işlem yaptıgınızda -gözükmesini istiyorsanız şu kodu da yazabilirsiniz
html ve css aynı javascript de şu şekilde bir değişiklik yapılıyor öncelikle gösterme ve gizleme işlemlerini iki ayrı fonksiyon yapıyorum.
function goster(){ document.getElementById("loading").style.display = "block" }
function gizle(){ document.getElementById("loading").style.display = "none" }

yapacagım iş örnek olarak bir butona basıldıgında tetiklensin-başlasın.Bu kısım html .

<button onclick="tetikle()" value="testet"/>

<script>
function tetikle(){
goster();
Yapılacak iş yazılır -mesela bir web sayfasnı yükleme vb.
gizle();
}
</script>
Basitleştirirsek işlem başlamadan goster fonksiyonu ile loading div ini visible daha sonra ise gizle() fonksiyonu ile invisible yaptım

Eğer jquery kullanıyorsanız

$("#loading").show();
$("#saydanınyukleecegiTag").load(myurl, function() {
  $("#loading").hide();
});

şeklinde de yapabilirsiniz fakat bur da jquery kod miktarını çok da azaltmıyor.

Son ihtimalde jquery mobile kullanımı burda ise işler epeyce bir kolaylaşmış jqmobile de şu kullanım yeterli oluyor

//Loading div ini göster
$.mobile.pageLoading(); 

//Loading div ini gizle
$.mobile.pageLoading( true );