Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: kocaturk Tarih: 30 July 2007 00:25:39

Google AJAX API lerinin IntraWeb ile Kullanımı -1
Google ın Net teki başarısı ve rakipsizliği herkesin malum olduğu gibi tartışmasız bir gerçek google kullaıcılara ve programcılara bir çok kaynak sunmaktadır. Aslında google ın bizlere en büyük faydası bence aradı�?ımız bir şeyi milyonlarsa sayfa içerisinden bulup önümüze hiçbir ücret almadan dökmesidir. Ayrıca son dönemlerde populer olan birde Google Map olayı var bildiğimiz gibi bu da mükemmel bir şey dünyanın herhangi bir yerini uydudan tepesine binecek mesafeden görme fırsatı veriyor insana örneğin ben fransada ki Eiffel kulesini hiç tepeden görmemiştim google map i tanıyıncaya kadar. Neyse google ın bu kadar reklamını yaptıktan sonra nimetlerinden biraz faydalanalım diye düşünüyorum.
Google Web programcıların google nimetlerinden faydalanabilmesi için bir çok API yayınlamış bu API lerin tam listesini görmek için
http://code.google.com/apis/ adresini ziyaret edin bakın ne kadar kaynak var. İşte bende bu kaynaklardan yararlanarak bu API leri kullanan Intraweb Uygulamaları geliştirmek istiyorum diyorsanız. Anlatacaklarım tam size göre o zaman. Bu arada şunu belirtmek te fayda var ben burada Google API lerinin detaylarını anlatmayacağım çünkü Google ın uzmanları zaten yukarıda verdiğim adreste bunu yeterince anlatmışlar ben sadece bunların Intraweb uygulamalarına entegrasyonu nu ve Intraweb içerisinden çağrılması konularını anlatacağım. Anlatacağım ilk konu Google ın arama(Search) API lerinin metin ve video araması şeklinde Intraweb e entegre kullanımı ikinci konu ise Google ın Map API lerinin intraweb ile entegre kullanımı olacaktır.
şimdi diyorum ki zaman kaybetmeden ilk konuya başlayalım
Google Search API lerinin IntraWeb ile kullanılması
Bu uygulamada ben Google Search API lerini kullanarak bir arama sayfası oluşturmayı planlıyorum sayfa arama sonuçlarını normal metin aramaları ve vide aramaları şeklinde iki farklı şekilde aramasını istiyorum bunun için her zaman ki gibi yeni bir Intraweb uygulaması oluşturuyoruz ve uygulamamızı GoogleSearch veya GoogleArama gibi bir isimle kaydediyoruz, daha sonra uygulamamızın ana formu hazırlamayı düşündüğümüz arama sayfası olacağı için formumuza başlıklar için 2 adet IWLabel aranacak verinin girilmesi için bir IWEdit, Normal arama için bir, Video arama için de bir olmak üzere 2 adet IWButton son olarak ta sonuçları göstereceğimiz bir IWText nesnesini formumuza ekliyoruz, formun görünümünü ben aşağıdaki gibi yaptım siz de kafanıza ve zevkinize göre yapabilirsiniz.
şimdi form tasarımını bu hale getirdikten sonra IWEdit1 in adını
IWEditSearch, IWText1 in adını
SearchControl IWButton1 in adını
btnNormalSearch ve son olarak ta IWButton2 nin adını
btnVideoSearch olarak değiştirdim bunları söylememin sebebi bildiğiniz gibi bu isimler bize JavaScript kodları içerisinde lazım olacak siz eğer farklı isimler kullanırsanız JavaScript kodları içerisinde geçtiği yerlerde değişiklikleri yapmalısınız aksi taktirde JavaScript kodları çalışmayacaktır.
şimdi gelelim kodlarımızı yazmaya öncelikle uygulamamızın Google API lerine referans teşkil edecek bazı tanımlamaları formumuzun
ExtraHeader özelliği içerisinde tanımlamamız gerekecek bunun için objectInpector de form un ExtraHeader özellik editörünü açarak aşağıdaki kodları buraya girelim ve OK diyerek çıkalım.
<link href="http://www.google.com.tr/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<script src="http://www.google.com.tr/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<script src="http://www.google.com.tr/uds/api?file=uds.js&v=1.0&source=uds-vsw&key=ABQIAAAAxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxAtO2N4Y9Q"
type="text/javascript"></script>
<style type="text/css"> @import url("http://www.google.com.tr/uds/css/gsearch.css"); </style>
<!-- Video Search Control ve Stylesheet ler-->
<script type="text/javascript"> window._uds_vsw_donotrepair = true; </script>
<script src="http://www.google.com.tr/uds/solutions/videosearch/gsvideosearch.js?mode=new" type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com.tr/uds/solutions/videosearch/gsvideosearch.css");
</style>
<style type="text/css">
#searchcontrol { width : 400px; margin : 10px; padding : 4px; border : 1px solid #000000; }
/* burada arama sonuçlarında kullanılan renkler tanımlı ben default de�?erleri copy/past yaptım */
.app_gsvsc { color : #0000cc; }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : #0000cc; }
div.search-form-save_gsvsc { color : #e0e0e0; }
div.edit-tag_gsvsc { color : #7777cc; }
.footerBox_gsvsc a { color : #7777cc; }
.playerBox_gsvsc a.title_gsvsc { color : #7777cc; }
div.more_gsvsc:hover { color : #0000cc; }
/* selected tag */
div.tag-selected_gsvsc { color : #000000; }
/* hover colors */
div.tag-control_gsvsc:hover { color : #7777cc; }
/* secondary colors */
div.tag-control_gsvsc { color : #676767; }
.searchForm_gsvsc { color : #676767; }
.searchForm_gsvsc input.gsc-input { color : #676767; }
.search-form-input_gsvsc { color : #676767; }
div.edit-form-submit-box_gsvsc { color : #676767; }
/* image border color */
.results_gsvsc div.video-result_gsvsc { border-color : #0000cc; }
</style>
Bu kodlarla uygulamamıza Google search API lerini entegre ettik, bu aşamadan sonra bu API leri çağırmak için kodlama yapacağız. Ama burada dikkat etmemiz gereken bir şey var yukarıdaki tanımlamalarda 3. Satırdaki
key=ABQIAAAAxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxAtO2N4Y9Q"ifadesi google search api lerini kullanmak için
http://code.google.com/apis/ajaxsearch/signup.html adresinde
GenarateAPIKey ile ben local de denediğim için
http://127.0.0.1 için oluşturdum sizde kendi APIKey inizi API leri kullanacağınız sunucu için oluşturup ilgili satıra ekleyiniz. Aksi taktirde bu key başka bir site için kayıtlı uyarısını alacaksınız.
Bu açıklamayı da yaptıktan sonra Google Search API leri ile kullanacağımız nesneler ve bazı JavaScript kodlarını da Formumuzun JavaScript özelliğine eklememiz gerekecek bunun içinde
ObjectInpector de formumuzun
JavaScript özellik editörünü açalım ve aşağıdaki kodları da buraya girelim.
function LoadNormalSearchControl ()
{
// search control olu�?turuluyor
var searchControl = new GSearchControl();
var SearchEdit = document.getElementById("IWEDITSEARCH");
// searcher nesneleri ekleniyor ben sadece GwebSearcher ı kullandım
var localSearch = new GlocalSearch();
searchControl.addSearcher(new GwebSearch());
// draw metodu ile IWText nesnesi içine sonuçlar render ediliyor
searchControl.draw(document.getElementById("searchcontrol"));
// arama IWEdit nesnesi içeri�?ini aramak için çalı�?tırılıyor
searchControl.execute(SearchEdit .value);
}
function LoadVideoSearchControl() {
// var options = { twoRowMode : true };
var options = { largeResultSet : true };
var options = { string_allDone : "Video yu izledim geri dön!" };
var SearchEdit = document.getElementById("IWEDITSEARCH");
var videoSearch = new GSvideoSearchControl(
document.getElementById("searchcontrol"),
[{ query : SearchEdit .value }], null, null, options);
}
Yukarıda iki farklı function tanımlı bunlardan birincisi normal arama yapma işlemi için (
LoadNormalSearchControl) ve diğeride video aramaları için (
LoadVideoSearchControl) iki function da iki ayrı arama kontrolu oluşturulup bazı özellikleri eklendikten sonra sonuçların döndürüleceği IW nesneleri belirleniyor daha öncede dediğim gibi ayrıntılar için
Google API dokümantasyonunu inceleyebilirsiniz. Evet uygulamayı tamamlamanın son adımına geldik gördüğünüz gibi iki ayrı arama tipi için iki farklı function tanımlaması yaptık artık bunları çağıracak kodlarımızı yazmaya geldi sıra tabi bu kodlarıda tahmin edeceğiniz gibi form üzerinde bulunan iki IWButton ın
Sunucu taraflı OnClick olay işleyicisinde halledeceğiz işte bu kodlarıda aşağıda veriyorum.
Normal Arama için btnNormalSearch Button ının Onclick olay işleyicisi aşağıda
procedure TIWForm1. btnNormalSearchClick(Sender: TObject);
begin
AddToInitProc('GSearch.setOnLoadCallback(LoadNormalSearchControl)');
end;
Video arama işlemini yapacak olan btnVideoSearch buton ının OnClick olay işleyici kodu da aşağıdaki gibi olacaktır.
procedure TIWForm1. btnVideoSearchClick(Sender: TObject);
begin
AddToInitProc('GSearch.setOnLoadCallback(LoadVideoSearchControl)');
end;
Yazacağımız tüm kod bu kadar artık sadece geriye programı derleyip çalıştırmak kalıyor şimdi o işi de yapalım eğer bir aksilik yoksa programı derleyip çalıştırdığınızda sonuç aşağıdaki gibi olacaktır.
dikkat ederseniz arama sonuçları içerisinde yapılan eylemlerde ve video izleme işleminde de sayfa yenilenmiyor yani AJAX teknolojisini kullanmış oluyoruz Google serisinin ikinci makalesinden sonra gerçek bir ajax uygulaması da yapacağız inşallah.
Bol kodlu günler
Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: sadettinpolat Tarih: 30 July 2007 21:47:57
guzel bir uygulama. tesekkurler. intraweb makalelerini okudukca birazcik merak sardi beni intrawebe karsi. ufak bir ajax uygulamasi yaptim. iwEdit e girilen texti kolay bir sekilde iwlabel tarzi bilesenlere ajax ile yazabiliyorum ama iwEdite girilen bir numarayi alip Querye parametre olarak gecip bulunan kayitlari dbGridde gosteremedim. metoda giriyor. metoddaki kodlar calisiyor ama kayitlar gride gelmiyor bir turlu. ayni kodlari ajax olayindan cikartip normal Click olayina yazdigimda hersey normal. acaba veritabani ve ajax kullanirken dikkat edilmesi gereken birsey mi var ?
Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: kocaturk Tarih: 31 July 2007 03:15:24
Saadettin hocam kullandığınız IW sürümü kaç ve birde veri tabanına erişimi ne şekilde yapıyorsunuz, ajax ta XMLHttpRequest nesnesi mi kullanıyorsunuz yoksa başka bir şekilde mi Query e paremetre aktarımı yapıyorsunuz biraz daha açarsanız veya ufakta olsa bir kod paylaşırsanız belki yardımcı olabiliriz. Görüşmek dileğiyle.
Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: babahayati Tarih: 31 July 2007 08:52:22
Biraz daha sabır Sadettin hocam, kitaplarda bile VT en son konu, IW makalelerini nasıl sonlandıracağını bilir Oktay abi, yoksa benimde canımdan gidiyoda kurgusunu bozmak istemiyorum, taşlar otura otura gidiyoruz böylesi daha iyi... affınıza sığınıyorum bu bir uyarı falan değil Oktay abiyi tanıdığım için böyle diyorum yanlış anlamyınız lütfen...
Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: sadettinpolat Tarih: 31 July 2007 18:12:21
http://dosya.arsiv.gen.tr/file.php?file=d6cf5bc401d06d2ff383b0a50e3f04eahttp://www.dosyasitesi.com/upload/download.php?file=a812f25b17d9554c6e1865dfbd3d8792yaptigim ornek uygulama yukaridaki linkten indirilebilir. delphi 2007 kullandim.
butonun onAsyncClick ve onClick te ki kodlar tamamen ayni. onClik gayet duzgun calisiyor ama onAsyncClick te calismasina ragmen verileri getirmiyor.
veritabani konusunda biraz aceleci davrandim biliyorum ama kodlar istedigim isi yapmayinca sinir oldum bi sorayim dedim.

Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: kocaturk Tarih: 01 August 2007 00:00:34
Sadettin hocam projeyi indirdim baktım sizin sürüm 9.0.14 ben 9.0.15 ve 9.0.16 da da denemiştim yok atozed le de görüşmüştüm adamlar veri duyarlı bileşenler de AJAX desteğini daha sonraki sürümlerde vereceğiz şimdilik standart veri duyarlı olmayan bileşenler için bu destek var demişlerdi. yani kısacası şimdilik yok enazından ben öyle biliyorum, eğer bir gelişmeden haberiniz olursa paylaşırsanız sevinirim.
Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: sadettinpolat Tarih: 02 August 2007 18:14:42
tesekkurler cevap icin. eh madem oyle biz de biraz daha bekleriz artik

Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: zg001 Tarih: 07 April 2008 06:52:25
Sabahın bu saatlerinde google ajax search api'lerle ilgili birşeyler araştırırken tesadüfen buldum makaleyi...Hani öyle işime yaradıki buradaki bazı ipuçları,süper olmuş demek için üşenmedim üye oldum
kolay gelsin efenim.
Ynt: Google AJAX API lerinin IntraWeb ile Kullanımı - 1 Gönderen: babahayati Tarih: 07 April 2008 08:43:08
Saat itibari ile erken zamanlama olarak geç olmuş ama aramıza hoş geldiniz, pişman olmayacağınızı buradaki herkes garanti eder....