Etiket: Xamarin Workbook

Herkese Merhaba,

Bir önceki yazımızda Urhosharp’ın ne olduğundan ve bu kütüphaneyi kullanmak için bilmemiz gereken temel terimlerden bahsetmiştik. Bu yazımızda da bu terimleri kullanarak, Xamarin Workbook ile bir kaç örnek yapacağız. Örnekleri Workbook ile yapmayı seçmemin sebebi, hem Xamarin Workbook u biraz tanıtmak ve ne kadar kullanışlı olduğunu göstermek, hem de kod tarafında yaptığımız en küçük değişiklikleri anında görmek, telefona deploy etmenin verdiği zaman kaybından kurtulmak.

Tamamen ücretsiz ve çok kullanışlı olan Xamarin Workbook’u hem windows hem de  Mac için buradan indirebilirsiniz. Örnekleri inceleyebilir ve geri bildirimlerde bulunabilirsiniz.

Xamarin Workbook’u bilgisayarımıza indirip kurduğumuzda yandaki şekilde gördüğümüz gibi bir ikonla karşımıza çıkıyor.Bu ikona tıklayarak Workbook u açıyoruz.

Workbook u ilk açtığımızda karşımıza bir template seçim ekranı geliyor. Burada Android, iOS, WPF, Console (.Net Framework veya .Net Core )seçimi yaparak workbook u hazırlıyoruz. Ben bu örneğimizde Console (.Net Framework) seçerek ilerliyeceğim.

Artık seçimlerimizi yapıp boş bir Workbook açmış olduk. Bu ekranda yapabileceklerimizden biraz bahsedip, örneğe giriş yapacağım.

Sol tarafta, workbook’u oluşturduğumuz ismin altında iki adet tab mevcut. Biri NuGet packages, diğeri kodlarımızı ve notlarımızı yazacağımız workbook’umuz. Tıpkı Visual Studio dan alışık olduğumuz gibi istediğimiz Nuget Package ı projemize ekleyip, projemizde kullanabiliyoruz. Hemen orta bölümde ise, workbook’umuzun kendisi mevcut, boş bir Executable cell ile gelmiş halde duruyor.  Workbook’a iki farklı satır(cell) ekleyebiliriz. Bunlardan biri Executable C# Cell bir diğeri de Documentation Cell. Her bir hücrenin en alt sağ tarafında, 3 buton mevcut. Bu butonları kullanarak, ilgili hücreyi silebilir, yeni bir dökümantasyon yada C# executable cell ekleyebiliriz. eklediğimiz hücre eğer çalıştırılabilir C# hücresi ise, hemen sol alt tarafında bir play butonu görüyor olacağız. Bu  butona bastığımızda, o hücre çalışacak ve bize o blokta ki çıktıyı (genellikle aynı hücre içerisinde en son satırda yazdığımız kodun çıktısı) hemen hücrenin altında bize gösterecek.

Workbook ile çalışırken dikkat etmemiz gereken önemli bir konu var. yukarıda bahsettiğim gibi, her bir executable cell çalıştığında, çıktıyı bize alt tarafında gösterecek, yani her bir hücrenin geriye birşey dönmesi gerekli. Normalde, Visual Studio kullanarak bir UrhoSharp örneği yapmaya kalkışsak, kendi Application objemizi, Urho.Application sınıfında türetip, gerisini bu application sınıfına bırakırdık. Bu miras aldığımız Application objesi, bizim kendi application objemiz içerisindeki “Run” methodunu tetikleyip, uygulamamızı başlatır, ve biz bir şekilde uygulamayı kapatmadığımız sürece de durdurmazdı. “Run” methodu da blocker bir method olduğundan, Workbook’ta kullanıma uygun değil malesef. Ama tam olarak bu workbook’ta kullanımımıza sunulmuş bir nesne var. SimpleApplication nesnesi bizim için, bazı initialization işlemlerinden sonra, bize bir application nesnesi dönüyor ve bunun üzerinden işlemlerimizi yapmaya devam edebiliyoruz.Bununla da kalmıyor, bizim için bir Camera, Light ve bir RootNode u üretmiş olarak kullanımımıza sunuyor.

Bir diğer dikkat etmemiz gereken konu ise, Workbook içerisindeki her bir executable cell tekrar tekrar çalışabilir olduğundan, uygulamamızda yapacağımız bazı işlemlerin, öncesinde tersini yapmamız gerekecek. Örneğin, Scene’imize bir node eklemeden önce o node u sileceğiz, veya bir event tanımladığımızda onun öncesinde de biraz reflection kullanıp kaldırmamız gerkecek. Bu tarz küçük handikapların dışında, workbook ile çalışmaya başladığınızda, özellikle yeni bir şeyi öğrenme konusunda ne kadar işe yarar olduğunuz göreceksiniz.

Artık örneğimize geçebiliriz. Nuget Packages‘a sağ tıklayıp, “Add Pacakge…” butonuna basarak karşımıza gelen ekrandaki Search kısmına UrhoSharp yazıyoruz ve UrhoSharp1.5.22 paketini çift tıklayarak yada alt taraftaki Add Package butonuna basarak Workbook’umuza ekliyoruz.

Bu paketi projemize eklediğimizde, ilk executable cell imizde #r “Urho” şeklinde ilgili kütüphanenin referansının workbook a eklendiğini göreceğiz. Bir Executable daha açıp, workbook’ta kullanacağımız namespace’leri ekliyoruz. Bu örneğimizde sadece Urho namespace’i yeterli olacak. Ctrl + Enter ‘a basarak veya hücrenin altındaki play butonuna basarak ilgili hücreyi çalıştırabiliriz. Workbook bizim için yeni bir executable cell oluşturacaktır. kod yazarken bir sonraki satıra geçmek için Shift + Enter’a basabiliriz.

Namespace’imizi ekledikten sonra. Bahsettiğimiz SimpleApplication sınıfının static Show metodunu kullanarak kendimize, belirttiğimiz boyutlarda bir 3D canvas açıyoruz. bundan sonraki her işlemimizi bu canvas üzerinde göreceğiz. Static Show metodu bizden bir application options nesnesi bekliyor. Yeni ApplicationOptions oluşturup, canvasımıza istediğimiz width ve height ı verip canvas ı oluşturuyoruz.

Bu örneğimizdeki amacımız ekrana sadece basit bir çizgi çizmek =) Bunu yaparken bir önceki yazımızda bahsettiğimiz terimlerin nasıl kullanıldığını göreceğiz. Sonraki örneklerimiz daha komplike olacağından, bu terimleri kullanmaya alışmamızda fayda var.

Öncelikle, boş uzayda bir çizgi çizmek için ihtiyacım olan iki noktayı tanımlayacağım. Sonrasında bu noktaları VertexBuffer nesnesinde birleştirip, devamında Geometry, Model, Material, StaticModel, Component ve Node sınıflarını kullanarak, bu çizgimizi canvas’ta göstereceğiz.

VertexBuffer.PositionNormal[] vertices = {
    new VertexBuffer.PositionNormal{
        Position = new Vector3(0,0,0)
    },
    new VertexBuffer.PositionNormal{
        Position = new Vector3(2,0,0)
    }
};

Yukarıdaki şekilde bir Vertex dizisi oluşturduk. Hatırlayalım; Vertex oluştururken, bunu VertexBuffer sınıfında tanımlanmış public structure’ ları kullanarak yapıyoruz demiştik. Sadece Position özelliklerini tanımlayıp bir Vertices(birden çok vertex e verilen ad) oluşturdum. Bu Executable Cell i çalıştırdığımda, workbook bana hücrenin çıktısını yani iki elemanlı VertexBuffer.PositionNormal dizisini aşağıda gösteriyor.

Sırada VertexBuffer nesnemizi oluşturmak var.Aşağıdaki şekilde bir VertexBuffer objesi oluşturyorum. SetSize ve SetData metodları ile değerlerimi set ediyorum.

var vertexBuffer = new VertexBuffer(Application.CurrentContext, false){
    Shadowed = true
};
vertexBuffer.SetSize((uint)vertices.Length, ElementMask.Position | ElementMask.Normal, false);
vertexBuffer.SetData(vertices);

Şimdi bu vertexbuffer’ ın ne şekilde birleşeceklerini söyleyeceğim nesenemi yani Geometry’ imi tanımlıyorum.

var geometry = new Geometry();
geometry.SetVertexBuffer(0, vertexBuffer);
geometry.SetDrawRange(PrimitiveType.LineList, 0, 0, 0, (uint)vertices.Length, true);

Sırada Model sınıfımı tanımlamak var. oluşturduğumuz geometry nesnelerini Model nesnesi ile bir araya getirebiliyorduk. BoundingBox propertysine set ettiğimiz değerlerin bu örnek için bir önemi yok, o yüzden biri orijinde diğeri (1,1,1) noktalarında iki Vector3 tanımladım.

var model = new Model();
model.NumGeometries = 1;
model.SetGeometry(0, 0, geometry);
model.BoundingBox = new BoundingBox(new Vector3(0,0,0), new Vector3(1,1,1));

Oluşturmuş olduğum bu Model objemin görselliği ile alakalı değerleri Material nesnesi ile set ediyoruz. Bu örnekte basitçe, bir desen kullanmadan sadece bir mavi renkten oluşan Material oluşturuyorum.

var material = Material.FromColor(Color.Blue);

Sonunda ekranda göstermek istediğim modelimi oluşturmuş oldum. Bunu Simple Application’ın benim için oluşturduğu RootNode’a yeni bir node ekleyerek, ekranda gösterme kısmınıda yapıp, artık bu mavi çizgimi oluşturduğum canvas’ta görmek istiyorum. Workbook’ta her bir executable cell, tekrar tekrar çalışabileceği için, oluşturacağım node’u önce RootNode’dan kaldırıyorum ki duplicate node’larım olmasın.

app.RootNode.RemoveChild(app.RootNode.GetChild("lineNode"));
var lineNode = app.RootNode.CreateChild("lineNode");

var line = lineNode.CreateComponent();
line.Model = model;
line.SetMaterial(material);

Veee sonunda canvas’ımızda da şekilde ki gibi bir mavi çizgi görüyoruz. 

Bir sonraki yazımızda, biraz daha kod ağırlıklı bir örnek yapacağız. O zamana kadar bu temel terimleri anlamakta ve en temel anlamda kullanmakta fayda olacaktır.

Bu örnekte yapmış olduğum workbook dosyasını şuradan indirebilirsiniz.

Bir sonraki yazıda görüşmek üzere…