Vue3 (Vue.js versiyon-3) Öğreniyorum - Bölüm 2

Okumadıysanız önceki bölümde VueJs versiyon 3 bölüm 1 yazısını okumanız burada anlatılanı daha iyi anlamanıza yardımcı olacaktır.

LifeCycle fonksiyonları, Virtual DOM ve Komponentler gibi daha ileri konulara dalıyoruz bu bölümde.

Hep olduğu gibi bir klasör ekleyerek bağlayalım, adı app7 olsun (en son app6 idi) ve içine şu dosyaları koyalım.

app7/app.js

let vm = Vue.createApp({

  data() {

    return {

      mesaj: "Merhaba Dünya!"

    }

  }

}).mount('#app')

Vue3 (Vue.js versiyon-3) Öğreniyorum

 Merhaba,

Ben bu VueJs öğrenme işine bıkmadım, çok takdir ediyorum bu işi. Bir gün mutlaka bir yerde bana para da kazandırır eminim. Bu güne kadar ne öğrendiysem bir projede kullandım. 

İnternette gezerken güzel bir kurs dökümanı buldum. Şimdiye kadar gördüklerime nazaran daha ayrıntılı bir anlatımı vardı. Kafamda takılan sorulara da cevaaplar vardı. Bu öğrendiklerimi sizinle de paylaşayım dedim. 

Hangisi Daha İyi

Angular , Vue , React az çok bildiğim kadarıyla birbirlerine benziyorlar. Amaçları ve yöntemleri arasında farklar neler acaba? 

C# UWP KONTROLLER

 Önce yeni bir proje oluşturalım. Visual Studio açın ve Yeni bir proje oluştur seçin. Boş Uygulama (Evrensel Windows) seçip Sonraki butonuna tıklayın. Proje adına Kontroller1 yazın ve uygulamanın konacağı klasörü seçin. Oluştur butonuna tıklayarak gelen platform seçiminde default değerlerle Tamam butonuna tıklayın. Uygulamamız Genel Bakış sayfası ile açılacaktır. 

Proje ağacında MainPage.xaml dosyasını çift tıklayıp tasarım görüntüsünde açılmasını sağlayalım. Tasarım görünümünde boş sayfaya tıkladığımızda proje oluşurken sayfaya konan default Grid elemanı seçilecek ve Özellikler bölümüne bu Grid elemanının özellikleri gelecektir. 

UWP Uygulamalarında Data Binding

 Binding (veriye bağlama) işlemi kullanarak gösterdiğimiz elemanların içeriklerini , stillerini vs değiştirerek bağlanan veriye göre görselimizi değiştirebiliriz. Şu isteklerimiz olabilir.

• Bir nesnenin bulunulan andaki değerlerini göstermek isteyebiliriz. Bağlama anındaki değerler kullanılır, daha sonra o nesneye ne olduğu ile ilgilenilmez.
• Nesnelerin en son değerlerini göstermek. Bu durumda bağlı nesne değiştikçe görsel de değişecektir.
• Kullanıcıların kontrollerden yaptığı değişikliklerin hafızadaki bağlı nesneleri de değiştirmesini isteyebiliriz.
• Görseldeki bazı kontrollerin görünümlerini görseldeki diğer kontroller ile değiştirmek isteyebiliriz.
• Olay işleyicileri ve şablonları hafızadaki nesnelere göre değiştirmek isteyebiliriz.
• Nesneleri sayfada gösterirken kullanıcının veride yaptığı değişikliklere göre görüntüsünün değişmesini isteyebiliriz.

Bir HMI Uygulaması yapalım

 Merhaba bu yazımda tekrar otomasyon programlama üzerine çalışacağım. Daha önce http://ujk-ujk.blogspot.com/2017/12/s7-1200-plc-nettoplcsim-tia-portal.html yazısında C# üzerinden PLC'ye ulaşıp basit bir görsel yapmıştık. Şimdi biraz daha kapsamlı, HMI denilebilecek bir uygulamayı nasıl geliştiririz ona çalışacağız. Mesela şöyle bir uygulama ekranı hedefliyoruz.

PLC'ler için yazılmış HMI programları var tabi ama lisans ücretleri oldukça yüksek. Düşük bütçeli küçük projeler için burada göreceğimiz yöntemlerle basit HMI uygulamaları yapabiliriz. Tabi bunları geliştirip birçok HMI yazılımında olmayan özelliklere sahip bir uygulama yapmamız da mümkün. Özellikle ayrıntılı üretim ve kalite raporu istenen projelerde elimizin altında C#'ın bütün gücünün olması bize sınırsız imkanlar sağlar.