Otomotiv İnsanı


ColdFusion, Reaction Framework ve Flex ile hazırladığımız son proje. Projenin Flex kısımlarını ve büyük çoğunluğunu Eşref Atak hazırladı. Bu web sitesinde otomotiv sektörüne yönelik haberler ve bilgiler verilirken, otomotiv sektöründeki firmalar ve çalışanların yapıları ve organizasyon şemaları üzerine bilgi toplanıyor. Bu bilgiler üzerinde site ziyaretçileri arama ve inceleme yapabiliyor. Otomotiv sektöründeki firma ve insanları birleştirmeye, tek çatı altında toplamaya ve sektörün haritasını çıkarmaya yönelik gerçekten farklı bir proje olan Otomotiv İnsanı‘nın çalışmaları devam etmekte. Ancak site yayında olduğu için inceleyebilirsiniz.

Otomotiv İnsanı Web Sitesi

jQuery, AJAX ve Reaction Framework


Bu yazımızda jQuery ile hazırladığımız bir sayfada, Ajax isteği ile Reaction Framework olayları oluşturup istediğimiz sayfayı animasyonlu bir şekilde tarayıcımıza nasıl getireceğimizi öğreneceğiz.

Öncelikle arayüz sayfamızı hazırlayarak başlıyoruz. Arayüz sayfamızda HTML ve CSS yardımıyla sayfa yapımızı oluşturalım. HTML sayfamızın (index.cfm) <body> etiketleri arasına aşağıdaki HTML kodu yazıyoruz:

<div class="page">
<div>
<ul id="menu">
<li id="about"><a href="#" title="about">About</a></li>
<li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
<li id="contact"><a href="#" title="contact">Contact</a></li>
</ul>
<br style="clear:both;" />
</div>

<div id="outcontent">
<div id="loading">LOADING</div>
<div class="content"></div>
</div>
</div>

Sayfamızdaki <head> etiketleri arasına aşağıdaki CSS kodunu yazıyoruz:

<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }
.page { margin:100px auto 0 auto; width:750px;}
#menu  { list-style:none; margin:0px; padding:0px;}
#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }
#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }
.content {
background-color:#FFF; padding:10px; height:300px; margin:0px; }
#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }
#outcontent {clear:both; background-color:#FFFFFF; }
</style>

Daha sonra <head> etiketleri arasına yani yukarıdaki CSS’in üstüne jQuery kodumuzu ekliyoruz:

<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
$('.content').load('page.cfm'); //by default initally load text from page.cfm
$('#menu a').click(function() { //start function when any link is clicked
$(".content").slideUp("slow");
var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
$.ajax({method: "get",url: "page.cfm",data: "event="+content_show, beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$(".content").show("slow"); //animation
$(".content").html(html); //show the html inside .content div
}
}); //close $.ajax(
}); //close click(
}); //close $(
</script>

Kodları birleştirip index.cfm dosyasını kaydettiğimizde arayüzü tamamlamış oluyoruz. index.cfm About, Portfolio ve Contact linklerine tıklandığında page.cfm dosyasına Ajax isteği gönderiyor ve ilgili sayfayı “event” paremetresinde belirtiyor. page.cfm de gelen parametrenin değerine bakarak ilgili dosyayı görüntülüyor. Sırada Reaction Framework’le hazırlayacağımız page.cfm ve page.cfc dosyaları var. page.cfm dosyasının içeriği oldukça basit:

<cf_controller component="page" eventList="about,portfolio,contact" />
<cfinclude template="#template#" />

Gördüğünüz üzere page.cfm controller component’i olarak page.cfc’yi kullanıyor ve about, portfolio ve contact eventlerini destekliyor. Ve template değişkeninde adı yazan dosyayı tarayıcıda görüntülüyor. page.cfc içeriği ise şöyle:

<cfcomponent extends="Reaction.Controller">

<cffunction name="onStart" access="public">
<cfset view.template="default.cfm" />
</cffunction>

<cffunction name="about" access="public">
<cfset view.template="about.cfm" />
</cffunction>

<cffunction name="portfolio" access="public">
<cfset view.template="portfolio.cfm" />
</cffunction>

<cffunction name="contact" access="public">
<cfset view.template="contact.cfm" />
</cffunction>

</cfcomponent>

onStart olayı her zaman ilk çalışan olaydır ve template değişkeninin ilk değerini belirliyor. Diğer olaylardan herhangi biri çalıştırıldığında template değişkeninin değeri değiştiriliyor. page.cfm ise template değişkenindeki dosyayı çalıştırıyor.

Bugünlük bu kadar soru ve görüşleriniz için yorum bırakabilirsiniz.

Reaction Framework 1.0.7


ColdFusion Reaction Framework 1.0.7 released. This is the first stable release of the Reaction Framework. Reaction Framework allows you to create events on UI and handle these events in the controller CFC files.

Features

  1. Easy-to-learn
  2. Simple and fast
  3. Event-driven architecture
  4. Settings and Plugins support
  5. Manage your Application model with CFCs and events

Installation

  1. Download Reaction Framework 1.0.7
  2. Extract the zip file in your web root folder
  3. Move CustomTags folder to your ColdFusion CustomTags folder
  4. Move reaction.js into your CFIDE/Scripts folder
  5. Browse the sample.cfm

Page Events

onInit, onStart, onPreRender, onEnd, onError. To handle these default events and your custom events create appropriate functions in your controller CFC file. Custom events must also be defined in the eventList attribute of <cf_controller> tag.

Plugin Points

onPreInit, onPostInit, onPreEvent, onPostEvent, onError. You can define plugins in your reaction.config file.

Support

For your questions leave a comment on this post or join the Reaction Framework Group.