Sunday, January 25, 2009

Ubuntu ve Media Dosyalari

Windows'dan Ubuntu'ya gecis yaptiysaniz ve ASF, VMW tipinde eski video dosyalari var ise, bunlari Ubuntu'da calmak icin once VLC Player, MPlayer programlarini sudo apt-get uzerinden kurmak iyi fikir... Bazi inatci ASF dosyalari hala direniyorlarsa, o zaman suradaki tavsiyeleri takip edilebilir;
wget -c http://packages.medibuntu.org/pool/non-free/w/w32codecs/w32codecs_20071007-0medibuntu2_i386.deb
sudo dpkg -i w32codecs_20071007-0medibuntu2_i386.deb
Ustteki komutlardan sonra MPlayer asf dosyalarini caliyor.

Saturday, January 17, 2009

IE ve Firefox Farklari

Web sitemizi kodlarken sayfalarimizin hem Firefox hem Internet Explorer'da duzgun ciktigini projenin basindan itibaren kontrol etmemiz gerekiyor. Bu iki tarayici arasinda farkliliklar var, ve birinde duzgun cikan CSS digerinde duzgun cikmayabiliyor.

Peki farkliliklari nasil onaracagiz? Burada guzel bir numara kullanilabilir; Bu numara dahilinde CSS/HTML sayfalar bir tarayici icin yazilir, ve farklar bir "yama" gibi ikinci bir css dosyasi icinde onarilir. Bu nasil mumkun oluyor? Soyle: 1) Eger gorsel elementleri "stilleyen" ayni id ve class ismi ikinci bir CSS (hatta ayni CSS dosyasi icinde ikinci kez) geciyorsa, her zaman daha "sonra" gelen ustunluk kazanir - onun degerleri bir oncekini ezer. 2) Cogunlukla bir Web sitesinin sayfalarinin IE ve Firefox farklarini onarmak icin CSS'te "bastan asagi" bir onarim gerekmez. Sadece bir blogun birkac elementinin ezilmesi yeterli olur. O zaman alttaki gibi bir kullanim mumkun olabilir. Dikkat edelim: Once Firefox icin kodlamisiz, sonra IE icin duzeltilmesi gerekenleri ikinci bir dosya ile ezmisiz. Burada sorulabilir: Niye once Firefox? Cunku FF
standartlari tam takip ediyor, o zaman onu merkez alarak kodlamak daha mantikli olur.

<html>
<head>
<title>...</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>

Ustteki kodda, ie.css adli sayfa [if IE] blogu icine alinmis, tum tarayicilar bu komutun anlamini biliyorlar - o blok sadece IE tarayicilari icin isletiliyor. Bu dosya icinde yama icin gereken tum ekler koyuluyor. Ornek olarak style.css sunlari iceriyor olsun;

#top {
position: absolute;
background: url(./img/headers/header_bg2.gif) repeat-x fixed top left;
left: 0;
top:0;
height: 150px;
width: 90%;
}
Ve ie.css sunlari iceriyor olsun;

#top {
width: 100%;
}
Bu durumda IE icin #top id'si icindeki tum degerler ayni olacak, sadece width degiskeni ezilerek yeni 100% degerine set edilecektir.

Friday, January 16, 2009

Ubuntu 8 ve IE Kullanimi

Web sayfalarini HTML,CSS,Javascript ile kodlarken, dikkat edilmesi gereken bir husus, kodlarin en az iki, Firefox, IE tarayicilari uzerinde test edilmesidir. Biz gelistirmeyi bir Ubuntu makinasinda yaptigimiz icin sayfa testlerini Firefox ile yapiyoruz; IE ile test etmek icin Linux uzerinde Windows programlarini isletmemizi saglayan Wine'i kullandik. Ubuntu 8'de Wine kurulmus olarak gelecek, bunun ustune IE kurmak icin suradaki yaziyi takip edebilirsiniz; "Install wine and cabextract" basligindan itibaren.

Wednesday, January 7, 2009

Fakir Adamin HTML Include Teknigi

Prototip sayfalar kodlarken, yani duz HTML uzerinden, Web servisi olmadan calisirken, bir sekilde bir HTML'den otekini dahil etmek gerekebiliyor. Ne yazik ki servis isliyor olmadan bunu yapmanin direk bir yolu yok; Biz de bir Perl script ile dahil etme isini kendimiz yapmaya karar verdik. Bizim sectigimiz komut, #include "dosya.html" komutu. Bu komutu direk HTML icine koyuyorsunuz, sonra Perl scripti isletiyorsunuz. Script dizinde gordugu tum HTML dosyalarini isliyor, include ibaresi yerine o include'un belirttigi dosyalarin icerigini koyuyor. Sonuclar output adinda ikinci bir dizinin altinda yaziliyor. Script soyle;

foreach $file (<*.html>) {
print "$file\n";
open IN, $file;
open OUT, ">./output/$file";
undef $/;
$content = <IN>;

while ($content =~ m/#include \"(.*?)\"/sg) {
open INN, "$1";
undef $/;
$other = <INN>;
$content =~ s/#include \"$1\"/$other/g;
}

print OUT $content;

close IN;
close OUT;
}

Monday, January 5, 2009

Ajax ile Form Tavsiyeleri Kodlamasi

Google'da arama kutusuna kelime girerken arka planda girdiginiz kadar harfler kullanilarak hemen bir arama yapilip sonucun text kutusu altinda Javascript tarafindan listelendigini goruyoruz. Bunun gibi ozellikler artik yeni nesil Web uygulamalarinin olmazsa olmaz ozelliklerinden birini teskil ediyor.
Bu ozelligi kodlamak icin Hibernate/Seam/Java ortaminda oncelikle Ajax ve biraz Javascript abrakadabrasi gerekecek. Forma girildigi kadar veriyi alip onu bir Javascript listesinde tarama yapmak icin kullanmak, sonuclari altta gorsel olarak gostermek bu ozelligin mekanizmalari arasinda. Bu kodun Javascript tarafini sifirdan yazmaya gerek yok: Bir kutuphane kullanmak en akillicasi. Bizim kullandigimiz scriptaculous adli bir Javascript kutuphanesidir. Bu kutuphaneyi indirip bir dizinde acin ve o dizine referans vererek HTML'iniz icindeki script src ile dahil edin. Surada ornek bir HTML sayfasi altta


Ajax
Simdi Seam/Hibernate ortaminda tavsiyeleri nasil kodlayacagiz, ona bakalim. Cok basit bir ornek uzerinden gidelim: Bir giris kutusu "aktif" olunca (yani mouse ya da TAB ile uzerine gelinince) hemen servis tarafindan Ajax ile bir listeyi alsin, ve ondan sonra isin tavsiye kismini scriptaculous'a biraksin. Bize bir EJB, bir XHTML ve birazcik Javascript entegrasyon kodu gerekecek.
Seam ortaminda servis tarafina nasil Ajax cagrisi yapilacagini suradaki slaytlarda detayli bir sekilde bulabilirsiniz. Ya da ornek kodlara bakmak mumkun (Web/SeamAjax projesi altinda).
XHTML tarafinda ise,
@Stateful
@Scope(SESSION)
@Name("carService")
public class CarServiceBean implements CarService, Serializable
{

@PersistenceContext
private EntityManager em;

public List getAllCars() {
Query q = em.createQuery("from Car");
List list = ...
for (obj : queryList) {
  list.add(obj.getCarName());
}
return list;
}
}

@Local
public interface CarService
{
@WebRemote
public List getAllCars() ;
}
Ustteki kodda su ozelligi kodluyoruz: Bir text kutusu aktive edilirse, hemen gidip handleInputCar adli Javascript fonksiyonunu cagir, bu fonksiyon Ajax uzerinden servise baglanip listeyi alacak. Ayrica scriptaculous uzerinden o listenin tavsiye edilir hale gelmesini saglayacak. remote.js ve interface.js Seam uzerinden Ajax cagrisi yapmak icin gerekli.
Simdi js/inc.js kodlarini gorelim:
var calledonce = false;

function handleInputCar(oEvent) {
var iTextbox = document.getElementById("inputBox1");
if (calledonce == false) {
Seam.Component.getInstance("carService").getAllCarNames(carListCallback);
calledonce = true;
}
}

function carListCallback(carlist) {
new Autocompleter.Local('inputBox1', 'carlist', carlist, { });
}
calledonce adli degiskeni kullandik ki, text kutusu her aktive edildiginde surekli servis tarafina
gidilmesin. Bu tur bir kodlamayi "az degisen" veriler icin yapmak en iyisi, biz burada araba listesinin cok az degistigini farz ederek, her sayfa guncellemesi (refresh) basina listenin en fazla bir kere indirilmesini ayarladik. Her harf girisi basina surekli servise gidilmesine ihtiyac duyan uygulamalar da olabilir. Bu ihtiyaca gore sekillenir.
Ustteki kodda servis tarafindan alinan liste ile scriptaculous arasindaki entegrasyon Autocompleter.Local objesinin yaratilmasi aninda oluyor. Bu obje yaratildiktan ve inputBox1 altinda tavsiye ciktisinin gosterilecegi div'in adresi verildikten sonra, gerisi scriptaculous kodlari tarafindan idare ediliyor.
scriptaculous'un tamamlama kodlarinin iki turlu kullanisi var - biz burada bunlardan sadece bir tanesini isledik. Bu kullanis tarzi, tum verinin bir cagrida halledilip Autocompleter objesini verildigi bir tarzidir. Tamamlama islemini parca parca, surekli servise giderek yapan bir kisim da var.

Dikkat! Sayfalarinizda new Autocompleter tanimlarini iceren Javascript kodlari, input ve div form elementlerinden sonra gelmeli.