Makale Özeti

Merhaba arkadaşlar bu makalemiz de silverlight ile geliştirilmiş hazır uygulamalardan biri olan Kitap Çevirme (Page Turner) animasyonunu inceleyeceğiz.

Makale

Silverlight ile geliştirilmiş hazır bir uygulama olan Kitap Çevirme(Page Turner) animasyonu özellikle kitap satış siteleri için çok kullanışlı ve ilgi çekicidir. Satışı yapılan kitapların sayfalarının belli bir bölümünün kullanıcılara kitap şeklinde gösterilmesini sağlar.  Kullanıcılar sayfalar arasında geçiş yaparken gerçek kitap okuyormuş hissi alıyorlar. Bir güzel yanı da kitap sayfalarının üzerine not da alabiliyoruz. Bu kontrole örnek olarak Daron Yöndem’in kitabı olan ASP.NET AJAX kitabı için hazırlanan animasyonu verebiliriz.
http://www.pusula.com/silverlight/aspnetajax/

Kitap çevirme animasyonunu http://journalist.charette.com/europe1992/europe1992.zip  adresinden indirip siz de projelerinizde kullanabilirsiniz. Uygulamayı indirdikten sonra içerisinde yer alanlara bir bakalım. İçersisinde yer alan klasörler aşağıdaki gibidir.

Assets: Burada uygulamamızda kullanılan resimler ve kitabımızda yer alan sayfaların resimleri yer alır. Kitapların sayfalarını page00.jpg, page01.jpg, page02.jpg, …… pagen.jpg gibi isimlendirerek resimleri klasör içerisine koymamız yeterli olacaktır.

XAML: Uygulama için kullanılan XAML dosyaları bulunuyor.

Js: Uygulamamız içerisinde yer alan javascript klasörlerini içerir. Burada bizim için önemli olan javascript dosyası CreateSilverlight.js’dır. Burada sayfamızda yer alacak uygulamanın sayfa sayısını ve özelliklerini burada belirtmemizi sağlar.

function createSilverlight()
{
    var scene = new PageTurn(8);
    //Burada kitabımızda gösterilecek olan sayfa sayısını belirtiyoruz
    ..
    ..
    ..
}

Şimdi indirdiğimiz klasörü Visual Studio 2008 ile açıyoruz.  Burada Index.html dosyasını açalım

<head>
    <title>Page Turner</title>
<!—Uygulamamız için gerekli olan javascript dosyalarını ekliyoruz.-->  
 <script type="text/javascript" src="js/silverlight.js"></script>
    <script type="text/javascript" src="js/createsilverlight.js"></script>
    <script type="text/javascript" src="js/inkManager.js"></script>
    <script type="text/javascript" src="js/inkButtons.js"></script>
    <script type="text/javascript" src="js/pagebrowserbutton.js"></script>
    <script type="text/javascript" src="js/pageBrowserControl.js"></script>
    <script type="text/javascript" src="js/pageGenerator.js"></script>
    <script type="text/javascript" src="js/navigationManager.js"></script>
    <script type="text/javascript" src="js/thumbnail.js"></script>
    <script type="text/javascript" src="js/mainpage.js"></script>
</head>
<
body style="margin: 0px; overflow: hidden;">
<
table height="99%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<
tbody>
<
tr>
<
td align=middle vAlign=middle bgcolor="#000000">
<!—
Oluşturduğumuz silverlight uygulamasını sayfamıza ekliyoruz.-->

                        <
div id="SilverlightControlHost">
                        <script type="text/javascript">
                            createSilverlight();
                        </script
>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

</body>
</
html>

Ben animasyonumda kitap sayfaları kullanmaktansa kendi resimlerimi kullandım ve bu uygulamadan fotoğraf albümü yapmaya karar verdim :) Siz isterseniz animasyonu kendi amacınıza göre yada daha farklı örnekler de yapabilirsiniz. Şimdi sayfayı çalıştıralım,

Sanki gerçek kitap sayfası çeviriyor hissi veren güzel bir animasyon :) Şimdi Annotate ve Clear Annotations yazılarını Türkçeye çevirelim. Javascript dosyalarından mainpage.js dosyasını alalım ve aşağıdaki gibi değiştirelim.  

var _annotateToggleButton = new InkToggleButton(this.plugIn, "Not Al", Silverlight.createDelegate(this.inkManager, this.inkManager.toggleInkMode), Silverlight.createDelegate(this.inkManager, this.inkManager.toggleInkMode));

var _clearAnnotationButton = new InkButton(this.plugIn, "Notları Sil", Silverlight.createDelegate(this.inkManager, this.inkManager.clearInk));

İşte Sonuç :)
İlk silverlight makalemin de sonuna geldik. Başka bir makalede görüşmek dileğiyle.

Sem GÖKSU
MCP | MCAD.NET | MCST
www.semgoksu.com  – semgoksu@semgoksu.com

Kaynaklar
http://silverlight.net