Silverlight kategorisindeki makaleler 5. sayfa

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

Silverlight ile gelistirilmis hazır bir uygulama olan Kitap Çevirme(Page Turner) animasyonu özellikle kitap satıs siteleri için çok kullanıslı ve ilgi çekicidir. Satısı yapılan kitapların sayfalarının belli bir bölümünün kullanıcılara kitap seklinde gösterilmesini saglar. Kullanıcılar sayfalar arasında geçis yaparken gerçek kitap okuyormus 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 sizde projelerinizde kullanabilirsiniz. Uygulamayı indirdikten sonra içerisinde yer alanlara bir bakalım. Içersisinde yer alan klasörler asagıdaki gibidir.

Assets: Burada uygulamamızda kullanılan resimler ve kitabımız da 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 saglar.

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

Simdi indirdigimiz 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>
<bodystyle="margin: 0px; overflow: hidden;">
<table height="99%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<tbody>
<tr>
<td align=middle vAlign=middle bgcolor="#000000">
<!-
Olusturdugumuz 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 fotograf albümü yapmaya karar verdim :) Siz isterseniz animasyonun kendi amacına göre yada daha farklı örnekler de yapabilirsiniz. Simdi sayfayı çalıstıralım,

Sanki gerçek kitap sayfası çeviriyor hissi veren güzel bir animasyon :) Simdi Annotate ve Clear Annotations yazılarını Türkçeye çevirelim. Javascript dosyalarından mainpage.js dosyasını alalım ve asagıdaki gibi degistirelim.

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));

Iste Sonuç :)
Ilk silverlight makalemin de sonuna geldik. Baska bir makale de görüsmek dilegiyle.

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

Kaynaklar
http://silverlight.net

Silverlight

Silverlight İle Sayfa Çevirme (Page Turner) Animasyonu