Ajax Loader Spinner Gifleri

10 Tem

Ajax destekli sitelerde “işlem devam ediyor” ya da “yükleniyor” gibi efektlerin hareketli  (gif uzantılı) resimlerle ifade edilmesini çoğumuz görmüşüzdür. Özellikle de sosyal paylaşım sitelerinin vazgeçilmez ifadeleridir bu resimler. Buradaki siteden siz de istedğiniz şekilde bir spinner oluşturabilirsiniz.

Spinner resimlerin şeklini, arka plan ve hareketli kısmın renklerini de seçmek tamamen size kalmış.

Birkaç örnek indirdim bile.

Tekrar görüşmek dileğiyle.

C# Linq ileKelime( Word ) Histogram Oluşturma

10 Tem

Konuya direk dalmadan önce histogramın ne olduğunu açıklamadan geçmek istemiyorum. Histogram, bir topluluktaki elemanların sayısal sıklıklarını, yoğunluklarını belirten tablolar diyebiliriz. Gösterim şekli olarak genelde grafiksel bir gösterimi vardır. İsterseniz tablo şeklinde de tutabilirsiniz. Ancak Grafiksel gösterimler daha akılda kalıcıdır.

Histogramı c# tarafında özetleyecek bir kelime analiz uygulamasının uygun olacağını düşündüm. Bu amaçla, bir döküman içerisindeki kelimelerin hangi sıklıklarla kullanıldığını çıkaran bir uygulama yapmayı planladım.

Uygulamaya başlarken öncelikle bir analiz yapan sınıf tasarlamam gerektiğine karar verdim. Analyzer adında bir sınıf oluşturarak işe başladım. Bu sınıf içerisinde de verilen text ifadenin kelimelerine ait bir histogram tablosu çıkaran GetTextHistogram adında metod oluşturdum.


public class Analyzer
{

    public IEnumerable<AnalyzeItem> GetTextHistogram(string text)
    {

       var array = text.Split(' ');
       var result = array.GroupBy(i => i.ToLower())
                         .Select(i => new AnalyzeItem { Word = i.Key, Count = i.Count() });

        return result;

    }

}

public class AnalyzeItem
{
      public string Word { get; set; }
      public int Count { get; set; }
}

Örneği incelediğimizde kelimelerin tekrarlanış miktarını veren bir tip olan AnalyzeItem tipi de göze çarpmakta. Bu tip hangi kelimenin kaç kez tekrar ettiğini bize vermekte. Örneğin  “bayram” kelimesinin kaç defa tekrar edildiğinin sonucunu tutmaktadır.

Burada LINQ nimetlerinden de faydalanmadan yapamadım. Eğer LINQ olmasaydı dizilerle kırk takla atarak sonuca ulaşmaya çalışacaktık.

Programın kullanımı da şu şeklide olacaktır.

static void Main(string[] args){

      string text = "Merhaba syn Ali Veli, size uygun şartlarda kredi imkanı ABCBANK ta. ABCBANK www.abcbank.com da. Kredi almak istiyorsanız ABCBANK a gelin.";

      Analyzer analyzer = new Analyzer();

      var data = analyzer.GetTextHistogram(text);

      foreach (var item in data)
      {
         Console.WriteLine(item.Count + "\t" + item.Word);

      }

}

Dilerseniz uygulamayı bir extension method haline de getirebilirsiniz. Onu da şu şeklide yapmak mümkündür.


public static class Extensions
{
    public static IEnumerable<AnalyzeItem> Histogram(this string text)
    {
       var array = text.Split(' ');
       var result = array.GroupBy(i => i.ToLower())
                         .Select(i => new AnalyzeItem { Word = i.Key, Count = i.Count() });

       return result;
    }

}

Bu extension metodla kodun kullanımı epeyce değişiyor.

static void Main(string[] args)
{
     string text = "Merhaba syn Ali Veli, size uygun şartlarda kredi imkanı ABCBANK ta. ABCBANK www.abcbank.com da. Kredi almak istiyorsanız ABCBANK a gelin.";

     foreach (var item in text.Histogram())
     {
           Console.WriteLine(item.Count + "\t" + item.Word);

     }
}

Artık bütün string tiplere histogram uyglamak mümkün hele geldi.

Asp.net MVC Jquery UI autocomplete

3 Tem

JQuery kütüphanesinin sunduğu güzel bir özelikte autocoplete özelliğidir.  Yani bir html input text içerisine yazmaya başladığımızda bize bazı öneriler sunan bir özelliktir. Arama motorlarında sıklıkla gördüğümüz öneri listeleri, bize fikir verebilir.

Bu işlemi gerçekleştirmek için öncelikle, JQuery tarafından kullanılacak olan action metodun hazırlanması gerekmektedir.


public class HomeController : Controller
{
     public ActionResult Index()
     {
          return View();
     }

     public ActionResult Search(string term)
     {
         var data = names.Where(m => m.Contains(term))
                         .Select(m => new { label = m });

         return Json(data, JsonRequestBehavior.AllowGet);
     }

     private List<string> names = new List<string>
     {
         "adana",
         "antalya",
         "ankara",
         "trabzon",
         "tokat",
         "istanbul",
         "izmir",
         "içel",
     };
}

Bizim kullanacağımız metod Search action metodudur.  Yani text kutusuna bir giriş yaptığımızda, JQuery otomatikmen Search() metoduna gelerek, girdiğimiz yazıyı names listesinden arayarak bize sonuçları getirecektir. Canlı uygulamalar için buradaki gibi bir listeyi kullanmak yerine, veritabanına erişerek gerçek verileri alabiliriz.

Şimdi de Index view sayfasına giderek bir text kutusu oluşturarak devam edelim.


<h2>Test Page</h2>

<script type="text/javascript">

$(function () {

       $(":input[data-autocomplete]").each(function () {

            $(this).autocomplete({
                source: $(this).attr("data-autocomplete")
            })
      });

});

</script>

<div>
<label>Arama</label>
<input type="text" data-autocomplete="@Url.Action("Search","Home")" />
</div>

Index view sayfamızın içeriği yukarıdaki gibi olmalıdır. Ne yaptığımıza biraz değinelim.

Öncelikle $(“:input[data-autocomplete]”) şeklinde bir multiple selector kullanarak tüm autocomplete property olan elementleri aldık. Daha sonra, bu elementlerin içerisinde each() metodu ile gezintiye çıktık. Autocomplete mekanizması, source(veri kaynağı) ihtiyacı olan bir kontrol olduğundan, hangi text input’a autocomplete özelliği vereceksek ona data-autocomplete adına bir property tanımlıyoruz. Ardından bu özelliğe vermek istediğimiz kaynağı belirtiyoruz. Biz burada Home controller sınıfının Search action metodunu belirtiyoruz. Bu sayede input texte yazmaya aşladığımızda Search metodu otomatikmen tetikleniyor.

Yukardaki şekildeki sonucu elde etmiş oluyoruz.

JQuery Bildirim Paneli Hazırlama İşlemi

3 Tem

Web dünyasına Javascript’in gücünü gösteren kütüphane olan JQuery, artık geliştiricilerin gözdesi. JQuery sayesinde neler yapılmıyor ki. Özellikle sosyal paylaşım sitelerinde sıklıkla göze çarpan bildirim panelleri benim de dikkatimi çekmedi diyemem. Hemen klavyenin başına geçerek bir iki deneme yapmaya karar verdim ve güzel bir sonuç çıktı ortaya. Dilerseniz beraber inceleyelim.

Web sayfalarında sağ veya sol panellerde, son bildirimleri kayan yazılar şeklinde efektlendiren bir demo yapmaya çalışalım.

Bu işlem için gereksinimimiz bir jquery kütüphanesi referansı ve kodlama için bir ortam. Ben bu uygulama için notepad aracını seçtim. Notepad içerisine html döküman oluşturacak kodları girerek işe başladım ve ardından jquery kodlarını akledim.


<script>

   $(function () {
       setInterval("updateShouts()", 3000);
   });

    function updateShouts() {
       $('#foo').prepend('<div style="display: none;">Yeni içerik.'+Math.random()+'<p><a href="#">İçerik linki</a></p></div>');

       $('#foo').find(".newContent:first").slideDown();

       $('#foo .newContent:gt(5)').remove();
}

</script>

<div id="foo"></div>

JQuery ile bir timer nesnesi kullanılarak, 3 saniyede bir yeni içerik oluşturularak,  panel içerisine eklenmektedir.

Buraya kadar olan işlemler, html bilgisi ve javascript bilgisi ile halledilebilecek şeklide gelişmiştir. Veriler elle üretilmiş ve animasyona sunulmuştur. Tabi gerçek hayat hikayelerinde, yukarıda tanımlanan updateShouts() metodu bir action metoda giderek veri alacak şekilde düzenlenip canlı bir uygulama da hazırlanabilir. Hatta action metod, outputcache mekanizmasıyla desteklenip, gereksiz yere veritabınına gitmeden, direk cache verilerine erişilebilir. Bu da hızda ciddi bir artış sağlar.

Sonuç olarak  yukarıdaki şekildeki gibi bir panel elde edilebilmektedir.

Jquery slide bildirim paneli çalışan uygulamasına buradan ulaşabilirsiniz.