Angular ile sayfanın en altına geldiğini anlamak (Sonsuz -infinite- scroll)

Bu makaleyi okumadan önce Angular etiketindeki diğer makalelerimi okumanızı tavsiye ederim.

Bazı web sitelerinde sitenin en altına indiğinizde yeni verilerin otomatik olarak yüklendiğini farketmişsinizdir.

Örneğin, facebook, twitter gibi uygulamalar sayfanın en altına gittiğinizde yeni post’ları sayfaya yükler.

Angular ile geliştirdiğimiz uygulamada biz de aynı şekilde sayfanın en altına geldiğimizde daha fazla veri yüklenmesini veya bir sonraki haberin sayfaya getirilmesini sağlayabiliriz.

Bunun için öncelikle bir Angular projesi oluşturmamız lazım, hemen Command Prompt (Windows) veya Terminal (MacOs, Linux) penceresi açalım ve aşağıdaki komutu girelim;

Sayfanın en altına kaydırıldığımızı anlayabilmek için javascript aracılığıyla erişebileceğimiz window nesnesinin scroll event‘ine attach‘lanmamız lazım.

Yapmamız gereken ilk iş, sayfanın yüksekliğini elde etmek. Bunun için, eğer window nesnesinin innerHeight özelliği varsa bu özelliğin değerini, yoksa, document nesnesinin documentElement özelliğinin offsetHeight değerini okumalıyız.

İkinci adımda, document nesnesinin body özelliğinde ve documentElement özelliğinde bulunan scrollHeight, offsetHeight, clientHeight özelliklerinden değeri en büyük olanı alıyoruz.

Artık tek yapmamız gereken, o anda scroll‘un bulunduğu pozisyonu, sayfanın yüksekliği ile karşılaştırmak ve sayfanın el altına gelip gelmediğimizi bu karşılaştırmadan elde etmek.

Eğer bu kodları herhangi bir Angular Component class‘ının constructor‘ına yazacak olursak ilgili sayfada scroll‘un en alta geldiği anı tespit edebiliriz.

Örneğin;

Windows 10 UWP uygulamasının kendini kapatıp tekrar başlatması (Restart)

Birçok uygulama için kendini kapatıp tekrar başlatma (özellikle de değiştirilen bir ayarı veya lisansı güncelleyerek başlatma) sıklıkla ihtiyaç duyulan bir özelliktir.

Windows 10 UWP uygulamalarını kapatmak için Windows.ApplicationModel.Core namespace’inde yeralan CoreApplication sınıfının Exit() methodunu çağırmamız yeterli.

Fakat uygulamanın tekrar başlatılmasını kullanıcıdan beklemek zorunda kalıyoruz. Daha iyi bir kullanım deneyimi için aslında uygulamanın kendisini kapatıp tekrar başlatabilmesi lazım.

Windows 10 UWP projelerinde, uygulamanın kendini kapatıp tekrar başlatabilmesini sağlamak, aslında çok kolay.

Önemli not : Bu özelliğin çalışması için bilgisayarda Windows 10 Build 16226 veya sonrası kurulu olmalı

Hemen yeni bir Visual Studio açalım ve Windows 10 UWP projesi oluşturalım, ben bu makalede projeme RestartProject ismini verdim.

Öncelikle MainPage.xaml dosyasını açalım ve aşağıdaki şekilde güncelleyelim;

Şimdi MainPage.xaml.cs dosyasını açalım ve aşağıdaki kodları yazalım;

Bu seçim ile yeniden başlat butonuna tıklandığı zaman, CoreApplication sınıfında yeralan RequestRestartAsync() methodunu çağırıyoruz.

RequestRestartAsync() methodu parametre alabiliyor ve bu parametreyi, uygulama baştan başlatıldığı zaman App.xaml.cs dosyasında yeralan OnActivated() methoduna gönderiyor.

Projede yeralan App.xaml.cs dosyasını açalım ve aşağıdaki kodları yazalım;

Böylece ekrandaki listeden seçili olan öğreyi uygulama kapanıp tekrar açılırken parametre olarak kullanıyoruz. Uygulama tekrar başladığı zaman seçili olan öğe seçili olarak başlatılıyor.

Örnek kullanım alanları;

  • Tema seçimi
  • Yeni versiyon güncellemesi
  • Ayar değişikliği
  • vs

Bu makale How to Restart your App Programmatically makalesi baz alınarak yazılmıştır :)

C# for ve foreach döngüsü arasındaki farklar

Bu makalede C# ile for ve foreach döngüleri arasındaki farkları inceleyeceğiz.

Böylece #1 numaralı istek makaleyi yazmış olacağım :)

Not : Issues sayfasında varolan makale isteklerini görebileceğinizi, hatta yeni makale isteğinde bulunabileceğinizi biliyor muydunuz?

Öncelikle for ve foreach döngülerini C# programlama dilinde nasıl kullanıyoruz, nasıl yazıyoruz, hemen hatırlayalım;

for döngüsünün özelliği, bir başlangıç noktasından bir bitiş noktasına doğru, istediğimiz adım aralığında ilerleyebilmesidir.

Örneğin, Nisan ayının günlerini ekranda göstermek istersek aşağıdaki gibi 0..30 arasında sırasıyla ilerleyen bir döngü oluşturabiliriz;

Eğer olimpiyatların hangi tarihlerde gerçekleştirildiğini ekranda göstermemiz gerekiyorsa, aşağıdaki örnekte olduğu gibi, dizi değişkeninin başlangıç değerini ilk olimpiyatın yapıldığı 1896 yılına ayarlar, döngünün bulunduğumuz yıla kadar (bulunduğumuz yıl dahil) sürmesini sağlar, her 4. yılı elde edebiliriz;

Hatta, istersek for döngüsünün tersten çalışmasını bile sağlayabiliriz;

foreach döngüsünün özelliği, bir listenin üzerinde adım adım ilerleyerek tüm öğelerini bize sadece-okunur olarak sağlamasıdır.

foreach döngüsünde unutulmaması gereken önemli nokta, döngü değişkeninin sadece-okunur (read-only) olmasıdır. Aşağıdaki örnekte olduğu gibi değişkenin değeri üzerinde değişiklik yapamayız;

for döngüleri genellikle bir dizinin öğeleri üzerinde gezinmek için kullanılır. Örneğin;

Bu kod örneğinde, şöyle bir problem var; döngünün ilk adımı gerçekleştikten sonra önce iLoop isimli döngü değişkeninin değeri 1 arttırılacak. Sonra iLoop değişkeninin değeri döngünün sonuna erişilip-erişilmediği belirlensin diye dizideki eleman adedi ile karşılaştırılacak.

Bir sonraki döngü adımının sonunda gene iLoop değişkenin değeri 1 arttırılacak ve döngünün sonuna gelinip-gelinmediğinin belirlenmesi için dizideki eleman adedi ile karşılaştırılacak.

Hatta dizideki eleman adedi ile karşılaştırma her döngü adımında tekrar tekrar yapılacak.

Çok önemli gibi gözükmese de, dizideki eleman adedini döngü öncesi bir değişkene alıp, döngü içerisinde hep bu değişken ile kontrol etmek, performansa olumlu katkı sağlayacaktır.

Not: döngünün başından sonuna kadar dizideki eleman adedinin değişmediğini varsayıyorum

Hatta, madem for döngüsünün ilk parçasında döngü değişkenini tanımlıyoruz, aynı anda ikinci bir değişken daha tanımlayamaz mıyız?

Tanımlayabiliriz :)

Aşağıdaki kod örneğinden de görebileceğiniz gibi, aynı anda iki değişken tanımlayıp, biri ile döngüyü ilerletmek, diğeri ile dizideki eleman adedini bir defa hesaplatmak mümkün;

Performans karşılaştırması için aşağıdaki küçük uygulamayı geliştirdim;

Sonuçlar, bilgisayarın konfigürasyonuna, o an çalışmakta olan uygulamalara, debug-release mode’lara, x86-x64 mimariler arasındaki farklara, .Net versiyonuna, vs göre o kadar fazla farklılık gösterebilir ki, performans konusuna çok vakit ayırmak istemedim.

Eğer yorumunuz veya sorunuz varsa, lütfen aşağıya yazınız. Sizin sistemlerinizde üretilecek sonuçları da merak ediyorum.

Benim kullanmakta olduğum notebook’ta sonuçlar aşağıdaki gibi;

CPU: i7 7700HQ x64
OS: Windows 10 (16241) 64bit
RAM: 32GB 2666MHz

for ve foreach döngüleri performans karşılaştırması

Benim ortamımda foreach döngüsü, for döngüsünden daha performanslı çıktı. 80.000 elemanlı bir dizide aradaki fark birkaç nanosaniye civarında olsa da, 800.000.000 elemanlı bir dizide fark yaklaşık 700ms civarına çıkıyor.

Çok elemanlı olmasa da sürekli üzerinde döndüğümüz diziler varsa, her seferinde kazanacağımız nanosaniyeler-milisaniyeler, toplamda büyük rakamlara ulaşabilir ;)

Windows 10 UWP uygulamalarını komut satırından çalıştırma (Command Line Activation)

Eski nesil Windows uygulamaları (Win32) ile yeni nesil Windows uygulamaları (UWP) arasında en önemli farklardan biri komut satırından etkinleştirme eksikliği idi.

Komut satırı üzerinden etkinleştirme eksikliğinden dolayı, UWP uygulamalarını komut satırına notepad.exe yazıp çalıştırır gibi çalıştıramıyorduk. UWP uygulamaları sadece Başlat Menüsü kısayolu üzerinden çalıştırılabiliyordu.

Haliyle parametre alarak ve ilgili parametre üzerinden başlatılabilme yeteneğine de sahip olamıyorlardı.

Windows 10 Insider 16226 sürümünden itibaren UWP projelerine App Execution Alias Extension ekleyerek bir komut satırı uzantısına sahip olmaları sağlanabiliyor.

Uygulamamıza bu özelliği katmak aslında çok kolay, hemen Visual Studio‘yu açalım ve CommandLineActivationProject isminde bir UWP projesi oluşturalım;

Yapmamız gereken iki adım var;

Sırayla bu adımları gerçekleştirelim;

Öncelikle Package.appxmanifest dosyasını açalım ve Extension‘lar içerisine AppExecutionAlias ekleyelim

Burada önemli nokta, Alias attribute‘une verdiğimiz değer ile uygulamamıza komut satırından erişilecek olması

Şimdi yapmamız gereken, App.xaml.cs dosyasını açmak ve içerisine OnActivated() methodunu eklemek.

OnActivated() methodunun aldığı args parametresinin Kind özelliği eğer ActivationKind.CommandLineLaunch değerine sahipse, demek ki uygulama komut satırından çalıştırılmıştır.

args parametresini CommandLineActivatedEventArgs tipine unbox edip, Operation özelliği aracılığı ile komut satırından çalıştırılan uygulamamıza geçilen parametreleri yakalayabiliyoruz.

Örnek ekran görüntüsü ise aşağıdaki gibi olacaktır;

Bu makale Command-Line Activation of Universal Windows Apps makalesi baz alınarak yazılmıştır :)

Fazla Mesai Etkinliği Haziran 2017

19 Haziran 2017 akşamı Microsoft Türkiye ofisinde sevgili Microsoft RD arkadaşlarım Daron Yöndem, Hakan Uzuner ve Adam Cogan ile bir etkinlik organize ettik.

Fazla Mesai ismini verdiğimiz bu etkinlikte ben de Azure WebApps ve Azure Storage konularına değindim.

Fazla Mesai Etkinliği, Haziran 2017

Etkinliğe katılan herkese teşekkür ederim, umarım faydalı olmuştur.

Engin Polat hakkında

Chief Architect, Microsoft RD, Microsoft MVP

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 466

Creative Commons Lisansı