Application Repository Ninject Modülü

29 May

Bu yazımızda, veri merkezli(data centric) uygulamalarda alışılagelmiş bir yöntem olan Repository kullanımının, birden fazla veri kaynağının bulunduğu durumlarda nasıl yapılması gerektiği konusunu incelemeye çalışacağız.

Repository mantığında öncelikle tüm alt sınıfları hiyerarşik bir düzene sokmak adına tanımlanan bir interface vardır. Örnek olarak basit bir interface tanımlamasını şu şekilde ifade ediyor olalım.


public interface IRepository<T>
{
    void Add(T entity);
    IList<T> GetAll();
}

Bu interface altında veritabanına ekleme ve veritabanından veri getirme gibi iki temel işlem vardır. Eğer bir SQL veri tabanına veri yazmayı amaçlıyorsak bu işlemi gerçekleştiren somut sınıfın oluşturulması gerekmektedir.


 public class SqlRepository<T> : IRepository<T>
 {
   public void Add(T entity)
   {
       // Veritabanına ekle..
   }

   public IList<T> GetAll()
   {
       // Veritananından oku..
   }
 }

Buraya kadar işler normal akışında seyrediyor. Ancak SQL veri tabanına yazılamadığı durumlarda ne olacağı bir soru işareti. Ya da başka bir sebepten dolayı ilişkisel veri tabanına yazmak yerine kayıtları XML bir dosyaya yazmak gerektiğinde XML dosya ile çalışabilen somut bir repository oluşturulması gerekmektedir. Bu durumda yeni bir sınıfa ihtiyaç duyulmaktadır.


 public class XmlRepository<T> : IRepository<T>
 {
    public void Add(T entity)
    {
       // XML dosyaya ekle...
    }

    public IList<T> GetAll()
    {
       // XML dosyadan oku...
    }
 }

Ancak bu iki farklı Repository tipinin, çalışma zamanında seçilebilir ve değiştirilebilir olması gerekmektedir. Aksi taktirde kodun değiştirilebilir olması istenmeyen bir durumdur. Bu değişime ayak uydurabilmek adına, değişikliği otomatik olarak gerçekleştirebilecek bir sınıfa ihtiyaç duyulmaktadır. Bu sınıf, çalışma zamanında dependency injection mekanizması ile yüklenebilen bir modül halinde tasarlanabilir.


 public class ApplicationRepositorySelectionModule : NinjectModule
 {
    public override void Load()
    {
        switch (ApplicationConfiguration.StorageType)
        {
           case PersistenceStorageType.SqlRepository:
              Bind(typeof(IRepository<>)).To(typeof(SqlRepository<>));
              break;
          case PersistenceStorageType.XmlRepository:
              Bind(typeof(IRepository<>)).To(typeof(SqlRepository<>));
              break;
         default:
              throw new ApplicationException("Not supported storage type!");

       }
    }
 }

NinjectModule sınıfı, Ninject dependenjy injector aracına ait bir sınıftır. Yaptığı işlem ise  Interface türlerine karşılık hangi somut sınıfın oluşturulacağını belirlemektir. Zamanı geldiğinde ilgili nesneyi oluşturup programa sağlamak yine Ninject tarafından gerçekleştirilmektedir.

Modül içerisinde kullanılan PersistenceStorageType ve ApplicationConfiguration sınıfları ise şu şekildedir.


 public class ApplicationConfiguration
 {
     public static PersistenceStorageType StorageType { get; set; }
 }

 public enum PersistenceStorageType
 {
     SqlRepository = 0,
     XmlRepository = 1
 }

Bu şekilde birden fazla repository sınıfı ile konfigurasyonu sağlababilir şekilde çalışmak mümkün olmaktadır. Yazılımda çevikliği yani yazılımın değişime ayak uydurabilme yeteneğini sağlayabilmek açısından uygulanabilecek olan küçük bir detaydan bahsetmiş olduk.

Bir sonraki yazıda görüşmek dileğiyle.

Spatial Reference System

26 May

Spatial Reference System

Spatial Reference System (SRS) veya Coordinate Reference System(CRS) coğrafi nesnelerin konumlarını bulmak için kullanılan koordinat tabanlı yerel, bölgesel veya küresel bir sistemdir. Bir SRS farklı mekansal referans sistemeler arasında dönüşümlerin yanı sıra, belli bir harita projeksiyonu tanımlar. Bazı koordinat sistemleri:

  • Universal Transverse Mercator koordinat sistemi
  • Birtish national grid reference system
  • Hellenic Geodetic Reference system 1987
  • Lambert conformal conic projection
  • United States National Grid
  • Jordan Transverse Mercator
  • International mapcode system
  • Irish grid reference system

Mekansal referans sistemleri SRID olarak ifade edilen benzersiz tamsayı kimlik numaraları ile ifade edilirler. European Petroleum Survey Group(EPSG) tarafından tanımlanmış olan SRID’ler de vardır ve bunlar EPSG kodu ile ifade edilirler. Örneğin “EPSG:4326” WGS84 projeksiyonu için EPSG kodudur. “EPSG:3857” ise WGS84 WebMercator için EPSG kodudur. Bu iki projeksiyon arasındaki fark “EPSG:4326” sisteminde dünya bir küre olarak ele alınırken “EPSG:3857” sisteminde dünya bir elips olarak düşünür. “EPSG:4326” enlem/boylam(lon/lat) koordinat sistemini kullanırken “EPSG:3857” x/y kartezyen koordinat sistemini kullanır. Bu sistemler sayesinde de yuvarlak yapıdaki dünya düz bir zemin üzerinde temsil edilebilmektedir.

SRS için tanımlanan bilgiler veritabanlarında OCG tarafından tanımlanan spatial_ref_sys metadata tablosunda tutulur. Bu tabloda SRID, AUTH_NAME, AUTH_SRID, SRTEXT gibi değerler bulunur. Konumsal veritabanı içinde birden fazla konumsal referansa sahip konumsal nesne tablosu veya raster veri bulunabilir.

Mekansal referans sistemleri (SRS) Open Geospatial Consortium (CRS) tarafından kolay bir şekilde erişim sağlamak amacıyla belli standartlarda herkesin anlayabileceği bir metin standardında tanımlanırlar. Bu standart Well Known Text(WKT) olarak isimlendirilir.

Well Known Text(WKT)

WKT bir harita üzerinde vektör geometri nesnesini temsil etmek için ve mekansal referans sistemleri arasında dönüşümler yapabilmek için geliştirlmiş bir metinsel işaretleme dilidir. WKT’nin binary karşılığı Well Known Binary (WKB)’dir. WKB ile WKT ile tanımlanan bilgilerin transferi ve veri tabanlarında saklanması için kullanılır. Bu formatlar OGC tarafından ISO/IEC 13249-3:2011 standardı olarak tanımlanmıştır.

WKT ile temsil edilen 18 adet geometri türü vardır. Bunlar:

  • Geometry
  • Point, Multipoint
  • LineString, MultiLineString
  • Polygon, MultiPoygon, Triangle
  • CircularString
  • Curve, MultiCurve, CompundCurve
  • CurvePolygon
  • Surface, MultiSurface, PolyhedralSurface
  • TIN, TINZ
  • GeometryCollection

Geometri koordinatları 2D (x,y), 3D (x,y,z), 4D (x,y,z,m) şeklinde temsil edilir.

Örnek WKT geometri gösterimleri:

  • POINT(25 18)
  • LINESTRING(10 15, 20 25, 50 55)
  • POLYGON((20 25, 50 55, 80 95, 20 25))
  • POLYGON((20 25, 50 55, 80 95, 20 25), (10 15, 18 22, 17 23, 10 15))
  • MULTIPOINT((11 12), (24 60), (40 40), (75 80))
  • MULTIPOINT(11 12, 24 60, 40 40, 75 80)
  • MULTILINESTRIN((15 15, 23 80, 10 40), (16 16, 33 10, 25 50, 38 09))

Well Known Binary(WKB)

Geometri nesnelerini taşınabilir ve veritabanlarında depolanabilir hale getirmek amacıyla bitişik byte dizisi şeklinde temsil eden ve OGC tarafından standartlaştırılan bir gösterim şeklidir. İki boyutlu(2D) geometrileri temsil eden bir kodlama şeklidir. WKB gösterimleri genellikle onaltılık sayı sistemindeki dizelerle yapılmaktadır.

SQL veritabanında WKB şeklinde depolanan geometrilere ODBC Client gibi veri sağlayıcılar aracılığı ile erişilebilmektedir. Konumsal veri üzerinde geometrik işlemleri gerçekleştirebilen fonksiyonlar SQL, Java veya C-API tarafından sağlanmaktadır.

Bir geometri için yapılan WKB gösterimi yapılırken, öncelikle geometri nesnesinin serileştirilmesiyle elede edilen sayı kümesinden alınan  işaretsiz tamsayı (Unsigned Integer) ve ondalık(Double) sayılar elde edilir. Daha sonra elde edilen her sayı, standart ikili(binary) sayı sistemine dönüştürülür.

Binary ifadelerin bilgisayar sisteminde serileştirilmesi sırasında işaret bitleri, en önemli ilk byte veya en az önemli ilk byte gibi bazı standartlar belirlenmiştir. Serileştirme işlemi, network ortamında bilgisayarlar arasında veri transferini gerçekleştirebilmek amacıyla gerçekleştirilir. Serileştirme için kullanılan iki tür kodlama vardır. Bunlar XDR ve NDR dir.

XDR (big-endian)

  • İşaretsiz tamsayının XDR gösterimin en önemli byte önce yazılır.

xdr1

  • Ondalik(Double) sayıların XDR gösteriminde işaret byte önce yazılır.

xdr2

NDR (little-endian)

  • İşaretsiz tamsayının NDR gösterimin en önemsiz byte önce yazılır.
  • Ondalik(Double) sayıların NDR gösteriminde işaret byte sona yazılır.

Geometri Nesnelerinin WKB Gösterimi

Geometri gösteriminde ilk byte veri için byte sırasını gösterir.

  • 00: Düşük son haneli (big endian)
  • 01: Büyük son haneli (little endian)

İkinci byte geometri türünü temsil eden bir tamsayıdır.

Type

2D

GEOMETRY

0000

POINT

0001

LINESTRING

0002

POLYGON

0003

MULTYPOINT

0004

MULTULINESTRING

0005

MULTIPOLYGON

0006

GEOMETRYCOLLECTION 0007
CIRCULARSTRING 0008
COMPUNDCURVE 0009
CURVEPOLYGON 0010
MULTICURVE 0011
MULTISURFACE 0012
CURVE 0013
SURFACE 0014
POLYHEDRALSURFACE 0015
TIN 0016
TRIANGLE 0017

 

Her geometrik veri türü benzersiz bir veri yapısına sahiptir. Koordinatlar double tipinde temsil edilir.

Örneğin: POINT(2.0, 4.0) geometrisi 000000000140000000000000004010000000000000 şeklinde 21 byte ile temsil edilir. Burada:

  • 1 byte integer 00 veya 0: Düşük son haneli
  • 4 byte integer 00000001 veya 1: POINT 2D
  • 8 byte float 4000000000000000 veya 2.0: X koordinatı
  • 8 byte float 4010000000000000 veya 4.0: y koordinatı

Kaynaklar:

CSS ile HTML Konumlandırma (CSS Positioning)

24 May

Web tasarımı ile ilgili görünüm düzenleme çalışmalarında elementlerin konumlandırılması önemli bir konudur. Web sayfalarında HTML elementlerini CSS özelliklerinden faydalanarak kullanarak kolayca konumlandırabiliriz. Konumlandırılacak HTML elementleri div, p, h1, img, li, a, span v.s gibi elementlerdir.

Bir elementin konumunu belirleyen CSS özellikleri: position, top, left, right, bottom şeklinde özellikler(property) ile belirlenir. Her HTML elementi varsayılan olarak atanmış  pozisyon değerleri vardır. Bunlar şu şekilde sıralanabilir:

  • position: static
  • top: auto
  • left: auto
  • right: auto
  • bottom: auto

Bir elementin konumlandırmasına müdahale etmek istersek bu değerlerde değişiklik yapmalıyız.

CSS konumlandırma özelliklerinin(property) alabilecekleri değerler şu şekildedir.

  • position özelliği; static, relative, absolute, fixed , inherit, initial değerlerini alabilir.
  • top, left, right ve bottom özelliği; auto veya px, cm gibi sayısal büyüklüklerde değerler alabilir.

HTML elementleri doldurdukları alan seviyesine göre guruplandırılmışlardır. Bu bağlamda iki tür element gurubu vardır. Bunlar:

  • Block Level element
  • Inline Level Element

Block Level Element

Bu guruptaki elementlerin sayfada kapladıkları alanlar birer kutu gibi düşünülebilir. Aksi belirtilmediği taktirde sayfada alt alta dizilerek sıralanırlar. Örneğin p, h1, …, li, form, div gibi elementler block-level element kategorisindedir.

Adsız

Şekilde görüldüğü üzere block-level elementler, boyutlarına veya içeriklerine bakılmaksızın kutu gibi düşünülerek alt alta dizilmektedir.

Inline Level Element

Bu guruptaki elementler yeni bir satır açmadan tek bir satırda dizilerek konumlanırlar. Örneğin span, a, img gibi elementler inline-level elementlerdir.

aa

Şekilde görüldüğü üzere a ve span elementleri aynı satırda olacak şekilde konumlandırılmışlardır.

Elementlerle ilgili konum seviyeleri, CSS özelliklerinde aksi belirtilmediği sürece bu şeklide çalışmaktadır. Ancak HTML elementlerinin display CSS özelliğini değiştirerek block-level elementleri inline-level gibi veya inline-level elementleri block-level element gibi göstermek mümkündür.

Adsız

Örnek şekilde div elementinin display özelliği inline-block olarak ayarlandığında elementlerin tek satıra dizilmiş ve inline-level element özelliği göstermeye başlamıştır. display özelliğini kaldırıldığında ise elementler tekrar alt alta dizilmiştir.

HTML Elementlerin CSS ile Konumlandırması

HTML elementlerin sayfada konumlandırması(positioning) üç farklı şekilde gerçekleştirilmektedir.

  1. position özelliği static ve relative şeklinde belirlenen elementler normal akışta(normal-flow) konumlandırılır.
  2. position özelliği absolute şeklinde belirlenen elementler mutlak konumlandırma ile konumlandırılır.
  3. float konumlandırma.

position: static

Sayfanın elemente verdiği normal akış(normal-flow) uygulanır. Akış kavramını dizilimi olarak düşünebiliriz. Bu özellik uygulanan elementler top, left, right, bottom gibi özellikleri dikkate almazlar.

position: relative

Bu özellikte sayfanın elemente verdiği normal akış(normal-flow) veya sıralama uygulanır. Daha sonra belirlenen top, left, right, bottom özelliklerine göre bulunduğu yerden yani normal konumundan ötelenerek uzaklaştırılır. Yani göreceli olarak konumlandırma yapılmaktadır. Kutu hangi taşıyıcı blok içerisindeyse o bloka göre ötelenir.

position: absolute

Mutlak konumlandırma olarak bilinir ve normal akışın dışına çıkarlar. Kutu konumuna ait top, left, right, bottom özellikleri, absolute özellikli kutunun taşıyıcı bloku olan üst element referans alınarak belirlenir. Eğer absolute bir taşıyıcı blok yoksa, belgenin ya da sayfanın <body> elementi referans alınarak konumlandırılır. Diğer hiç bir element normal akıştaki yerini kaybetmez. Mutlan konumlu elementler kaydırma çubuğu varsa onunla birlikte birlikte hareket ederler.

Örnek Durum-1: En yakında absolute konumlu element yoksa

Örnek Durum-2: En yakında absolute konumlu element varsa (Kırmızı Kutu)

position: fixed

fixed ile konumlandırılmış elementler, sayfanın görüntü alanına yani tarayıcı penceresine göre konumlandırılır. Sayfada kaydırma çubuğu hareket ettirildiğinde kutu hareket etmez ve konumunu korur.

Görünebilirlik Problemi

HTML elementlerin konumlandırılması sırasında üst üste gelen kutular arasında görünebilirlik sorunu ortaya çıkmaktadır. Hangi elementin üstte görüneceğini belirlemek için CSS tarafında z-index özelliği kullanılmaktadır. z-index değerleri pozitif ve negatif tamsayı değerlerini alabilmektedir.

Örnekte normalde altta olan kutu z-index kullanılarak üstte gösterilmiştir.

Kaynaklar:

  • http://www.w3schools.com/html/html_blocks.asp
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
  • https://www.w3.org/TR/CSS21/visuren.html#choose-position
  • https://www.w3.org/TR/CSS21/visuren.html#normal-flow

Asp.Net 5 verisyon numaralandırması Asp.Net Core 1.0 olarak değişiyor

11 Şub

Microsoft, son yıllarda yaptığı değişiklikle platform bağımsız teknolojiler geliştirmeye başlamıştır. Artık Microsoft ürünlerinin sadece Windows işletim sistemlerinde değil Linux ve Mac OS gibi işletim sistemlerinde de çalışabilmesi amaçlanmaktadır. Bu demek oluyor ki Microsoft geliştirme altyapısında köklü bir değişiklik yapılmaktadır. Artık biz geliştiricilere açık kaynak bir Microsoft platformu sunulmaktadır.

Bilindiği Asp.Net Framework sürüm serisi 1.0, 2.0, … ve 4.5 şeklinde devam etmekteydi. Bu sürümler üzerinde geliştirilen Web uygulamalarının yayınlanması IIS(Internet Information Services) üzerinden yapılmaktadır. Asp.Net 4.6 ve 5 sonrası için platform bağımsız bir yapının planlanması ile yeni versiyonun major numarasını değiştirerek yola devam etmek anlamsız olacaktı. Bu sebepten dolayı sürümler yeniden adlandırıldı.

Yapılan Yeni İsimlendirmeler

  • Asp.Net 5 yerine Asp.Net Core 1.0
  • .Net Core 5 yerine .Net Core 1.0
  • Entity Framework 7 yerine Entity Framework Core 1.0
  • .Net Framework yerine artık .NET Execution Environment (DNX) kullanılmaktadır.

image_60140ec0-ce46-4dbf-a14f-4210eab7f42c

Kaynaklar:

Angularjs Custom Directive Serisi-5 Direktif Kalıtımı

12 Eki
  1. Direktiflerin Tanımlanması
  2. Direktif Restriction Yapısı
  3. Scope Ayrımı
  4. Ayrılmış Scope Tarafına Erişim
  5. Direktif Kalıtımı (Inheritance)

Angularjs direktif serisinin beşinci bölümü direktiflerin kalıtımı(directive inheritance) hakkında olacak.

Direktif kalıtımı, mevcut bir direktifin özelliğini kullanarak yeni bir direktif oluşturmak istediğimizde kullanabileceğimiz bir özelliktir.

Direktiflerin kalıtımı controller birimlerinin paylaşımı şeklinde olmaktadır. Alt direktifler, üst direktiflerin controller nesnelerine erişebilir.

Bu durumu daha iyi özetlemek amacıyla bir örnek üzerinden devam edelim. Örnek uygulamamızda araçları temsil eden vehicle isimli bir ana direktif olsun. Otobüs ve taksiler birer araç olduğundan onları da alt direktifler olarak düşünebiliriz.

 
 <vehicle>
    <bus></bus>
    <car></car>
 </vehicle> 

Örnek uygulamamızda bus ve car direktifleri yolcu taşıyan araçları temsil etmektedir. Her araca yolcu bindiğinde vehicle isimli ana direktif üzerinde araçların toplam yolcu sayısının kaydı güncellenmektedir.

angular.module("app", [])
   .directive("vehicle", function(){
      return {
         restrict: "E",
         controller: function($scope){
           var self = this;

          self.totalPassenger = 0;
          self.loadPassenger = function(count){
               self.totalPassenger += count;
          }

          $scope.totalPassenger = function(){
              return self.totalPassenger;
          }
       }
     }
})

vehicle direktifinin self.loadPassenger() metodu, diğer alt direktifler tarafından yolcu sayısını güncellemek için kullanılacak olan metottur.

angular.module("app")
   .directive("bus", function(){
       return {
          restrict: "E",
          require: "^vehicle",
          scope: {},
          link: function(scope, element, ettributes, vehicleController)           {
              scope.dailyPassengersCount = 0;
 
              setInterval(function(){ 
                 scope.$apply(function(){
                    var loadedPassengers = Math.floor((Math.random() * 15) + 1)
                    scope.dailyPassengersCount += loadedPassengers;
                    vehicleController.loadPassenger(loadedPassengers);
                })
              }, 2000);
          },
          template: '<span>Bus Total Passengers: {{dailyPassengersCount}}</span>'
      }
 })

bus direktifine require:”^vehicle” eklemesi yapılarak bir üst direktifin vehicle olduğunu bildiriyoruz. Direktifin link() fonksiyonuna dikkat edecek olursak dördüncü parametresi vehicleController olarak belirlenmiştir. Bu controller, kalıtımı yapılan direktife ait controller nesnesidir.

bus direktifi 2 saniyede bir rastgele olarak yolcu sayısını arttırmaktadır. bus direktifi kendi günlük toplam yolcu sayısını arttırırken, bir üst direktif olan vehicle direktifinin de toplam yolcu sayısını güncellemektedir.

Aynı şekilde car direktifini de aşağıdaki gibi tanımlayabiliriz.

angular.module("app")
   .directive("car", function(){
      return {
        restrict: "E",
        require: "^vehicle",
        link: function(scope, element, ettributes, vehicleController) {
            scope.dailyPassengersCount = 0;
 
            setInterval(function(){ 
              scope.$apply(function(){
                 var loadedPassengers = Math.floor((Math.random() * 4) + 1);
                 scope.dailyPassengersCount += loadedPassengers;
                 vehicleController.loadPassenger(loadedPassengers);
              })
           }, 1500);
        },
        template: '<span>Car Total Passengers: {{dailyPassengersCount}}&</span>'
    }
 })

Çalışan uygulamayı şu şekilde görebiliriz.

Angularjs Custom Directive Serisi-4 Ayrılmış Scope Tarafına Erişim

9 Eki
  1. Direktiflerin Tanımlanması
  2. Direktif Restriction Yapısı
  3. Scope Ayrımı
  4. Ayrılmış Scope Tarafına Erişim
  5. Direktif Kalıtımı (Inheritance)

Angularjs direktif serisinin üçüncü bölümünde scope ayrımı üzerinde durmuştuk. Bu bölümde ise ayrılmış(isolated) scope bölgelerine dışarıdan erişimin nasıl yapılacağı üzerinde duracağız.

Bir direktifin scope ayrımını yaparken direktif nesnesine scope:{} şeklinde bir üye eklemesi yapılmaktadır. Bu durumda direktifin dış bağlantısı kesilir.  Ayrılmış direktiflerin dışındaki bir controller scope bölgesine veya başka bir direktifin scope bölgesine erişmek mümkün değildir. Ancak direktif tarafında belirlenen dış üyelere izinler verilerek onlara erişmek mümkündür. Bunu üç farklı şekilde yapabiliriz.

  • “@”
  • “=”
  • “&”

“@” scope erişimi

Direktif dışındaki bir değişkenin metinsel değerine erişmek için kullanılır.


Bu örnekte ColorController içerisinde tanımlanmış olan $scope.hex değişkeninin metin değerine ulaşılmıştır. Yani @ scope türü string değerlere erişimi sağlar.

Dikkat edecek olursak HTML tarafında kullanım <color hex=”{{hex}}”></color> şeklindedir.

“=” scope erişimi

Direktif dışındaki değişkenin kendisine erişmek için kullanılır.

Dikkat edecek olursak HTML tarafında kullanım <color hex=”hex”></color> şeklindedir. Yani metinsel değere erişim olmadığından “{{}}” şeklinde bir kullanım yapılmıyor.

“&” scope erişimi

Direktif dışındaki bir fonksiyona erişmek için kullanılır. Bir başka deyişle direktifin dışındaki bir controller scope üzerindeki fonksiyona direktif tarafından erişmek için kullanılır. Örneğin metin kutusuna tıklandığında rastgele renk kodu üreten bir direktif için aşağıdaki örneği inceleyebilirsiniz.

 

Angularjs Custom Directive Serisi-3 scope izolasyonu

8 Eki
  1. Direktiflerin Tanımlanması
  2. Direktif Restriction Yapısı
  3. Scope Ayrımı
  4. Ayrılmış Scope Tarafına Erişim
  5. Direktif Kalıtımı(Inheritance)

Angularjs direktif serisinin üçüncü bölümü direktiflerin scope ayrımı(isolate scope) hakkında olacaktır. scope ayrımı yapılırken iki önemli nokta vardır. Birincisi direktifin üst scope bölgelerinden ayrıştırılması. İkincisi direktiflerin ortak scope bölgelerinden ayrıştırılmasıdır.

1-Direktifin Üst scope Bölgelerinden Ayrıştırılması

Direktifler varsayılan olarak bir üst scope bölgesine erişebilecek şekilde ayarlanmıştır. Ancak her direktifin kendine ait bir scope bölgesi de vardır.

Bu direktif bir üst scope tarafından gelen location nesnesine ait bilgilere erişebilmektedir.

 <div ng-controller="LocationCtrl">
    <location></location>
</div>

Yani LocationCtrl içerisinde tanımlanan $scope.location nesnesine direktif tarafından doğrudan erişim sağlanabilmektedir. Bunu önlemek için direktif nesnesine scope:{} şeklinde bir tanımlama yapılır.

Artık LocationCtrl içerisinde tanımlanan $scope.location nesnesine direktif tarafından doğrudan erişilemez.

2-Direktifin Ortak scope Bölgelerinden Ayrıştırılması

Direktifler tanımlanırken data binding işlemi sırasında bir karışıklığa sebep olmamak adına scope ayrımını doğru yapılması gerekmektedir.

Örneğin renk kodlarını hexadecimal bir biçimde kullanıcıdan almayı amaçlayan  bir direktifimiz olsun.

Bu direktifi üç farklı renk için kullanmak istediğimizde aşağıdaki gibi bir durum ortaya çıkacaktır.

Adsız

Bir renk kutusuna bir değer girdiğimizde diğerleri de aynı değeri alıyor. Bunun sebebi hex değişkeninin two-way-binding yani çift yönlü bağlantısı yaptığı halde direktifin scope bölgesinin ayrılmamış olmasıdır. Direktifin scope bölgesini ayırmak için scope:{} şeklinde bir tanımlama yapılır.

Adsız

Bu şekilde her direktifi kendi scope bölgesinde çalışabilir hale getirmiş oluruz.

Dan Wahlin direktif scope ayrımı için durumu özetleyen bir grafik hazırlamış.

image_thumb_56FB9433 (1)

Bu grafiğe göre bir direktif bir üst controller’a ait scope bölgesine erişebiliyor ise shared yani paylaşılmış scope oluyor. Eğer erişemiyorsa isolated yani ayrılmış oluyor.

 

Angularjs Custom Directive Serisi-2 Direktif Restriction Yapısı

6 Eki
  1. Direktiflerin Tanımlanması
  2. Direktif Restriction Yapısı
  3. Scope Ayrımı
  4. Ayrılmış Scope Tarafına Erişim
  5. Direktif Kalıtımı (Inheritance)

Angularjs direktif serisinin ikinci bölümünde direktiflerin restrict üyesi üzerinde duruyor olacağız.

Adsız

Bir direktif için restriction tanımlaması onun görünüm tarafında ne şekilde kullanılacağının göstergesidir. Direktif nesnesinin dört farklı restrict şekli vardır.

  1. ‘A’ attribute türünde direktifler
  2. ‘E’ element türünde direktifler
  3. ‘C’ class türünde direktifler
  4. M‘ yorum türünde direktifler

1- Attribute (A) türünde direktif tanımlama

Bu tür direktifleri mevcut HTML elementler içerisinde direktif adını attribute şeklinde çağırarak kullanabiliriz. Örneğin uzun bir metnin 50 karakterlik kısmını gösterip geri kalanını “…” şeklinde kısaltarak gösteren örnek bir direktif hazırlayalım.

Direktifin adı truncate ve işlevi bir metnin 50 karakterini gösterip geri kalanını kırpmaktır. Kullanım şekli yukarıda HTML kısmında göründüğü gibi <p truncate /></p> şeklindedir.

2- Element (E) türünde direktif tanımlama

Element türündeki direktifleri mevcut bir HTML element içerisinde tanımlanmak zorunda değiliz. Bu direktiflerin kendisi HTML element gibi kullanılır. Örneğin bir lokasyon bilgisini longitude(boylam) ve latitude(enlem) şeklinde standartlaştırarak yazdıran bir direktif element türünde oluşturulabilir.

HTML kullanımı <location lon=”23.52″ lat=”42.12″></location> şeklindedir ve enlem boylam bilgileri değişken olarak belirtilmektedir. HTML attribute şeklinde belirtilen değişkenler direktifin scope üyesine aktarılmaktadır. Direktifin scope üyesine link fonksiyonundan erişilebilmektedir.

Direktiflerin link() fonksiyonunun parametreleri dependency injection yöntemiyle verilmez. Parametreler belli bir durum sırasına göre(positional) sıralanmıştır. Sıralama scope, attribute, element, controller şeklindedir.

3- Class (C) türünde direktif tanımlama

Direktifleri HTML elementlerinin class özelliklerini belirlemek için kullanabiliriz. Bu tür direktifler sadece class özelliği için çalışırlar. Örneğin 10 karakterden uzun metinleri kırmızı olarak işaretleyen bir direktif class türünde tanımlanabilir.

4- Comment (M) türünde direktif tanımlama

HTML tanımlaması içerisinde yorum satırı için tanımlanan direktif tipleridir. Yorum direktiflerinin tanımlanması diğer direktifler gibidir.

 app.directive("comment", function() {
    return {
        restrict: 'M',
        template: '<div>Yorum satırı...</div>'
    }
 })

Kullanım şekli de <! – – directive:comment – – > şeklindedir.

Direktifler için yukarıda tanımlanan 4 restrict özelliğinden en sık kullanılanlar element ve attribute şeklinde tanımlanan direktif türleridir.

Angularjs Custom Directive Serisi-1 Direktiflerin Tanımlanması

5 Eki

Direktifler Angularjs framework yapısı içerisindeki en önemli kavramlardan biridir. Direktifler HTML attribute ve elementler ile ulaşılabilen yeniden kullanılabilir ve test edilebilir kod blokları oluşturmayı sağlar.

Bu yazının konusu Angularjs direktifleri konusuna giriş niteliğinde olup, direktifler ile ilgili bir yazı dizisinin de başlangıcıdır. Bu yazı dizisinde kendi özel direktiflerimizi oluşturup kullanmayı ve direktiflerin detaylarına değineceğiz. Konu başlıkları genel olarak şu şekilde olacaktır:

  1. Direktiflerin Tanımlanması
  2. Direktif Restriction Yapısı
  3. Scope Ayrımı
  4. Ayrılmış Scope Tarafına Erişim
  5. Direktif Kalıtımı (Inheritance)

Özel direktiflerin tanımlanmasına geçmeden önce Angularjs bünyesinde bulunan başlıca direktifleri inceleyelim.

  • ng-show: Bir HTML elementinin gösterilmesini sağlar.
  • ng-hide: Bir HTML elementinin gizlenmesini sağlar.
  • ng-click: Bir HTML elementine tıklandığında çalışacak fonksiyonu gösterir.
  • ng-class: Bir HTML elementin class özelliğini belirler.
  • ng-style: Bir HTML elementin style özelliğini belirler.
  • ng-repeat: Bir HTML elementi tekrarlı bir sırayla yazar.

Örnek kullanım şekilleri:

 <button ng-show="isVisible"></button> 
 <button ng-hide="isSecret"></button> 
 <button ng-click="sendMessage()"></button> 
 <button ng-class="big-button"></button> 
 <utton ng-style="yellow"></button> 
 <button ng-repeat="item in socials"></button> 

Angularjs bünyesindeki bu direktiflerin ihtiyacımızı karşılamadığı durumlarda kendi özel direktiflerimizi oluşturabiliriz. Kendi özel direktiflerimizi oluştururken dikkat etmemiz gereken bazı kurallar vardır. Bu kurallar olmazsa olmaz katı kurallar olmaktan ziyade ilkesel olarak  benimsenmiş kurallardır. Örneğin direktiflerin isimlendirilmesi dikkat edilmesi gereken kurallardan biridir.

Direktifleri nasıl isimlendirmeliyiz?

Direktifler isimlendirilirken kullanıcıların okuduklarında kolayca anlayabilecekleri ve birbiri ile çakışmayan benzersiz ön ekler kullanmaya özen gösterilmelidir. Kendi özel direktiflerimizi kullanırken “ng-“ ön ekini kullanmamalıyız. Çünkü “ng-“ angular tarafından belirlenmiş özel bir ön ektir. Bunun yerine iki harf ile belirlediğimiz özel ön ekler kullanmayı tercih edebiliriz.

Direktiflerin javascript tarafındaki isimlendirme şekli Camel Casing şeklinde  yapılmaktadır. Örneğin javascript tarafında “mySocialButtons” gibi bir isimlendirme tercih edebiliriz.

angular.module("directives", [])
    .directive("mySocialButtons", [function(){..}]

Angularjs  HTML tarafından direktife erişirken, bu isimlendirmeyi küçük harfler ve her kelimenin arasına “-” karakteri kullanarak çağırmaya izin verir. Örneğin HTML tarafında “my-social-buttons” şeklinde direktifimizi çağırabiliriz.

 <my-social-buttons> </my-social-buttons>

Özel direktifleri ne zaman tercih etmeliyiz?

  • Tekrar tekrar kullanılabilir HTMl bileşenleri oluşturmak istediğimiz durumlarda kullanabiliriz.
  • Elementlere aynı davranışları vermek istediğimizde kullanabiliriz.
  • Bir jQuery plugin ile çalışmak istediğimiz durumda onu paketlemek için kullanabiliriz.
  • DOM ile etkileşime geçmek istediğimiz her zaman direktifleri kullanabiliriz. Controller, Service ve Factory gibi bölümlerden DOM elementlerine erişmek kötü bir yöntemdir. Çünkü kodun test edilebilirliğini azaltır ve kodu DOM’a bağımlı hale getirir.

Direktiflerin Tanımlanması

Direktiflerimizi oluşturmadan önce direktiflerin tutulacağı modülleri oluşturmalıyız. Bu ayrımın sebebi direktiflerin ana uygulama modülünden bağımsız ve test edilebilir özellikte olmasıdır. Ana modül içerisinde her şeyin tanımlanması karmaşık bir uygulamanın oluşmasına neden olacaktır. bu nedenle ana uygulamamızın bulunduğu modülü özel direktiflerimizi tanımlamak için kullanmamalıyız. Direktif modülünü uygulama modülüne sonradan yüklemeliyiz.

 

Örnek uygulamanın konusu, her web sitesinde karşılaştığımız sosyal medya butonlarını tekrar tekrar kullanabilmek için bir direktif haline getirmektir. Görüldüğü üzere ana modül app şeklinde isimlendirilmiştir. Direktifin tanımlanacağı modül directives adlandırılmış ve ana modüle sonradan yüklenmiştir. Eğer ana modül ile ilgili bir direktif oluşturacaksanız app modülüne bağlı bir şekilde tanımlamanızda bir mahsur yoktur.

Direktif fonksiyonu bir nesne döndürmektedir. Bu nesnenin bazı üyeleri vardır. Bu üyeler şu şekildedir:

  • restrict
  • scope
  • template veya templateUrl
  • link
  • controller

Direktifin restrict üyesi

Bu nesnenin restrict özelliği direktifin tipini belirler. Direktiflerin dört farklı tipi vardır. Bunlar:

  • ‘A’ attribute türünde direktifler
  • ‘E’ element türünde direktifler
  • ‘C’ class türünde direktifler
  • M‘ yorum türünde direktifler

Direktifin scope üyesi

Direktifin faaliyet alanını(scope) belirler.Direktifler veri bağlantısını kendi faaliyet alanlarından(scope) alabilecekleri gibi direktif dışındaki bir direktiften veya controller’dan da sağlayabilir.

Direktifin template üyesi

Direktifler DOM üzerine yerleştiklerinde görüntülenmek isteniyorsa HTML tanımlamaları yapılmalıdır. HTML tanımlaması düz metin şeklinde yapılabileceği gibi dışarıdaki bir *.html dosyaya templateUrl ile erişilerek de yapılabilir. Yukarıdaki örnekte templateUrl kullanılmıştır.

Direktifin link üyesi

Direktifin link() fonksiyonu direktifin DOM elementi ile temasa geçtiğinde yani uygulama yüklendiğinde çalışır. DOM içerisinde her direktif örneği (instance) için bir kez çalışır. Bunu test etmek için link() fonksiyonu içerisine console.log(“work”) yazabilirsiniz. Konsola sadece bir kez “work” yazdığını gözlemlyebilirsiniz.

Direktiflerin link() fonksiyonunun parametreleri dependency injection yöntemiyle verilmez. Parametreler belli bir durum sırasına göre(positional) sıralanmıştır. Sıralama scope, attribute, element, controller şeklindedir.

Direktifin controller üyesi

Bir direktif eğer dışarıdan veri almaya ihtiyaç duymuyorsa yani sadece görünüm(view) taraflı bir yaklaşımı varsa bu tür direktifler görünüme dayalı (view oriented) olarak düşünülebilir. Bunlar basit direktiflerdir. Ancak kendi verisini kendi temin edebilen direktifler oluşturmak isteniyorsa ki bu tür direktifler veriye dayalı (data-oriented) direktiflerdir. Bu tür direktiflere controller üyeleri eklenir. Bir controller ile direktifin servisler aracılığı ile dışarıdan kendi verisini alması sağlanabilir. Eğer mantıksal iş kuralları varsa yine controller içerisinde tanımlanabilir.

Eğer bir direktif görünüm tarafı ve kontrol tarafı ile bütünleşik olarak tanımlanmış ise bu tür direktifler component ya da widget diye adlandırılabilir. Direktifleri yazının en başında bahsettiğim kadar önemli kılan şey, ihtiyaç duyduğu bir çok özelliği bünyesinde taşıyabiliyor olmasıdır.

Angularjs 2.0 ve sonrası için direktifler daha da önemli hale gelecek. Çünkü artık tek başına controller yapılarının olmadığı yeni bir sürüm yolda gibi görünüyor.

Webstorm smartest javascript IDE

1 Eki

Jetbrains ürünleri bir geliştiricinin alet çantasında olması gereken başlıca araçlardandır. Bu yazıda frontend geliştirme aracı olan Webstorm ürününden bahsedeceğiz.

Webstorm sloganı “smartest javascript IDE” yani “akıllı javascript IDE” şeklindedir. Bu sloganın hakkını verdiği kanısındayım. Javascript dili özelliklerini tanıması ve birçok javascript framework için intellisense özelliği barındırması, kodlarken bize büyük bir kolaylık sağlamaktadır.

scr_main_01

Webstorm ile client-side tarafında Javascript, CSS ve HTML gibi diller desteklenirken, server-side tarafında Node.js dili ile geliştirme yapabilirsiniz.

Neden Kullanmalıyız?

  • Akıllı Geliştirme Ortamı Sunar: Kodlama yaparken projenizi tanır, anlar ve bize daha rahat bir geliştirme ortamı oluşturur. Örneğin JQuery, Angularjs veya bootstap kullanıyorsak IDE bu framework’leri otomatik olarak tanıyarak bize yardımcı olur. Çalışma esnasında hata algılama, refactoring ihtiyacı olan kod bölümlerini gösterme ve gelişmiş navigasyon özellikleri sayesinde kaliteli kod üretmemizi sağlar.
  • En Son Teknolojileri Destekler:En popüler teknolojileri destekler. JQuery, Angularjs, ECMAscript 6 gibi teknolojilere destek verir.
  • Bütünleştirici ve Tamamlayıcı Destekler: Proje geliştirirken ihtiyaç duyulan Debugger, VCS(versiyon kontrol sistemleri), Terminal, Deployment gibi özellikleri ve geniş eklenti deposu sayesinde başka bir ürüne ihtiyaç duymadan iş akışlarını düzgün bir şekilde tamamlayabilirsiniz.
  • Platform Genişliği: Windows, Linux ve Mac OS gibi işletim sistemlerinde tek bir lisans ile çalışma imkanı sunar.

Webstorm Özellikleri Nelerdir?

  • Code Completion: Projenizi analiz ederek fonksiyonlar, metodlar, modüller, değişkenler ve sınıflar için en iyi şekilde bütünleşik bir tecrübe sunar.

javascript_code_completion@2x

  • Navigation: Projeniz ne kadar büyü olursa olsun bir değişkenin nerede tanımlandığını, ToDo listelerinizi ve dosyalarınızı kolayca bulabilirsiniz. Değişkenleri, sınıfları ve fonksiyonları arayabilir tanımlandıkları yerlere ulaşabilirsiniz.

search_everywhere@2x

  • Code Quality: Kod kalitesini arttırmaya yönelik kod iyileştirici uyarılar verir. Kodun yeniden yapılandırması gereken noktalarda uyarılar verir.

javascript_warning@2x

  • Code Style: Kullandığınız programlama diline göre kod biçimlendirmesi yapar.

code_style_preferences@2x

  • Multiple Selection: Birden fazla seçim özelliği ile düzenleme işlemlerinin kolayca yapılmasını sağlar.

select_occurrences@2x

  • Debugging Javascript and Node.js: Javascript ve Node.js geliştirmeleri sırasında Google Chrome için debugging imkanı sunar.
  • Unit Testing: Javascript ve Node.js birim testlerini yazmayı destekler. Karma test çalıştırma aracı ile Javascript testlerinizi ve Mocha ile Node.js testlerinizi çalıştırabilirsiniz.

mocha_test_results@2x

  • Grunt and Gulp: Aynı arayüzde konsola ihtiyaç duymadan Grunt ve Gulp görevlerini çalıştırma imkanı sunar.

gulp_integration@2x

  • npm: node modüllerini kolayca yönetebilirsiniz.
  • Code Quality Tools: Webstorm kendi kod kontrolleri dışında JSHint, ESLint gibi ekstra araçları da kullanarak kod kalitesini kontrol edebilirsiniz.
  • vcs: Git, SVN, Mercurial ve Perforce gibi birçok versiyon kontrol sistemi ile Webstorm arayüzünden çalışabilirsiniz.

vcs@2x

  • Built in terminal: Kendi terminal penceresi sayesinde işletim sisteminin terminal penceresine ihtiyaç duymadan çalışabilirsiniz.

Fiyat performans açısından oldukça üstün bir IDE deneyimi sunan bu üründür. Öğrenciler için ücretsiz olarak sunulmaktadır.