2009638015 Dilek Özcan 2009638055 Sümeyye Kök. Uygulama Desteği  Programlama araçları(Tools)  Programcılar için faaliyet düzeyleri sağlar.  Etkileşimli.

... konulu sunumlar: "2009638015 Dilek Özcan 2009638055 Sümeyye Kök. Uygulama Desteği  Programlama araçları(Tools)  Programcılar için faaliyet düzeyleri sağlar.  Etkileşimli."— Sunum transkripti:

1 2009638015 Dilek Özcan 2009638055 Sümeyye Kök

2 Uygulama Desteği  Programlama araçları(Tools)  Programcılar için faaliyet düzeyleri sağlar.  Etkileşimli bir sistem için etkin bir yürütülebilir forma soyut tasarımları ve kullanılabilirlik ilkelerini çeviren bir araç sağlar.  Pencereleme sistemleri  Ayrılmış ve eş zamanlı kullanıcı sistem etkinliği için çekirdek desteği sağlar.  Kullanıcı ve programcının her ikisi içinde merkezi ortak,interaktif bir ortamı vardır.  Program uygulamaları ve Diyalog kontrolü

3 Uygulama Desteği  Etkileşim aracı(toolkits)  Kullanıcı algı düzeyine yakın programlama sağlar.  Programcının kullanıcının algısına göre,nesnelerin davranışlarını tanımlamasına izin verir.  Kullanıcı arayüz yönetim sistemleri  Sunum ve işlevsellik arasındaki ilişki kontrollerini sağlar.  Programlama toollarını destekleyen son düzeydir.Tasarımcı ve programcıya mevcut uygulama içerisindeki aynı fonksiyonel mantığa sahip olan nesneler arasında ki ilişkiyi kontrol etme izni verir.

4 Giriş  İnsan-bilgisayar etkileşimi programcıyı nasıl etkiler?  Gelişmiş bir kodlama iyi seviyede programlamayla olur  Etkileşim tekniği özel belirli donanımlar gerektirir.  Geliştirme araçlarının katmanları  Pencereleme sistemi  Etkileşim araçları(Toolkits)  Kullanıcı arabirimi yönetim sistemleri(UIMS)

5 Pencere sisteminin özellikleri  AYGIT BAĞIMSIZLIĞI  soyut uçbirim aygıt sürücüleri programlama  görüntü modelleri için çıkış ve giriş (kısmen)  piksel  PostScript (MacOS x, NextStep)  Grafik çekirdeği sistem (gks)  Programcılar hiyerarşik ara yüzü grafik (PHIGS)  KAYNAK PAYLAŞIMI  Kullanıcı görevleri eşzamanlılık sağlanması  pencereleme sistemi bağımsız işlemleri destekler  Bireysel uygulamalar izolasyonu

6

7 Pencere sisteminin rolü

8 Pencere Sistemlerinin Mimarisi  Üç olası yazılım mimarileri;  Tüm aygıt sürücülerinin ayrı olduğunu varsayalım.  Birden çok uygulama yönetimi vardır. 1. Her uygulama tüm işlemleri yönetir  Tüm uygulamalar eşzamanlı çalışıp karışıklığa neden olabilir.  Uygulamaların taşınabilirliğini azaltır 2. Yönetim rolü çekirdek işletim sistemi içindedir.  İşletim sistemine bağlı uygulamalarda bu mimari kullanılır. 3. Yönetim rolü ayrı bir uygulama olarak sağlanır.  Maksimum taşınabilirlik

9 Pencereleme sistemi yapısı  Pencereleme sistemi gui’nin bir bileşenidir.  Pencereleme sistemi terimi bazen pencere yöneticileri hatta uygulamalara ait olarak grafik arayüzünün diğer unsurlarını ayırt etmek için kullanılır.  Bu sistem temel seviyede re-parent(ebeveynlik) uygulamasını destekler.penecerelerin üst üste gelmesine izin verir.  Ancak genellikle pencere yöneticisi tarafından kontrol edilirler.

10 Pencere sistemine örneğimiz..

11 İstemci-Sunucu Mimarisi

12 X Pencere Mimarisi (X windows architecture)

13 X Pencere Mimarisi (ctd)  Bazı işaret mekanizmalarını kullanarak işlem görüntüleme modelidir.  X protokolü sunucu-istemci iletişimini sağlar.  Ayrı bir pencere yöneticisi istemci için giriş/çıkış ilkelerini sağlar:  Giriş odağı nasıl değişir?  Örtüşen pencerelerle döşeme  Inter-Client veri transferi

14 X Pencere Mimarisi  X-Windows sistem programları ana program diğer bazı bilgisayarda çalışırken kullanıcının makinesinde yer alarak, bilgisayar ağları üzerinde çalışmasına olanak sağlayan bir yazılım ürünüdür.  Bu yaklaşımda, kullanıcının yerel sistem uzak makinede MÜŞTERİ programının arabirimi ile ilişkili ihtiyaçlarına yanıt veren birime SERVER denir.  X-Windows başlangıçta MIT projesi olarak akademik ağ için geliştirilmiş, ancak o zamandan beri birçok önemli bilgisayar üreticileri tarafından standart olarak kabul edilmiştir.

15 Program Uygulaması-1 Okuma-Değerlendirme döngüsü repeat read-event(myevent) case myevent.type type_1: do type_1 processing type_2: do type_2 processing... type_n: do type_n processing end case end repeat

16 Program Uygulaması- 1 Bildirim Tabanlı void main(String[] args) { Menu menu = new Menu(); menu.setOption(“Save”); menu.setOption(“Quit”); menu.setAction(“Save”,mySave) menu.setAction(“Quit”,myQuit)... } int mySave(Event e) { //save the current file } int myQuit(Event e) { //close down }

17 Devam edelim..  Arayüzde Sistem Stil Etkileri;  Kalıcı(tipik) iletişim kutusu  Olay- Döngü(Event-Loop) ile kolaydır. (Sadece ekstra okuma olay döngüsünü var)  Bildirim ile zordur. (Çok fazla bayrağa ihtiyaç duyar. )  Kalıcı olmayan iletişim kutusu  Olay-Döngü(Event-Loop) ile zordur. (ana döngüyle çok karışık)  Bildirim(notification) ile kolaydır. (sadece ekstra işleyicisi ekleyin) **Dikkat edin!  Eğer açıkça tasarım yapılmazsa;tasarımın sınırlarının zorlanmadığı yalnızca bir uygulama elde edilmiş olur.

18 Araçları(toolkits) Kullanma  Etkileşim nesneleri  Giriş ve Çıkış bağlantılı(link verilmiş)  Toolkits(Araçlar) soyutlama sağlar  Etkileşimli nesnelerle programlama (veya teknikleri, aletler, cihazlar)  Tutarlılık ve geliştirilebilirliliği sağlaması bakımından  Benzer görünüm yoluyla  Nesne yönelimli (object-oriented)programlama açısından uygundur.

19 Ajax Toolkit örneğimiz..

20 Java Arayüzü  Java toolkit- AWT ‘ abstract windowing toolkit(S oyut Pencereleme Aracı)’  Java sınıfları için düğmeler, menüler, vb.  Temel bildirim;  awt 1.0 – alt sınıf temel aletlere ihtiyaç  awt 1.1 ve ötesi– geribildirim nesneleri  Swing Toolkit;  awt-yüksek seviye özellikleri inşa eder  mvc mimarisi kullanır(ilerdeki slaytlarda daha detaylı anlatılacaktır.)

21 Kullanıcı Arayüzü Yönetim Sistemleri User Interface Management Systems (UIMS)  Üst seviye Toolkitler UIMS’ye eklenir.  Toolkitler programcı olmayanlar için zordur.  UIMS kaygıları  kavramsal mimari  Uygulama teknikleri  Altyapı desteği  UIMS şartları:  UI geliştirme sistemi (UID)  UI geliştirme ortamı (UIDE)  Örneğin: Visual Basic

22 UIMS günümüzde oldukça önem taşımakta..

23 Kavramsal mimari olarak UIMS  Uygulama mantığı ile sunum arasındaki ayrımdır.  Taşınabilirliği (farklı sistemler üzerinde çalışması)  Yeniden kullanılabilirliği (maliyeti azaltır)  Birden çok arabirim ( aynı işlevselliği erişme)  Özelleştirme-tasarımcı ve kullanıcı tarafından yapılabilir ve kullanıcıya kullanım rahatlığı sağlar

24 UIMS Geleneği arabirim katmanı / mantıksal bileşenleri (interface layers / logical components)  Dil: sözlü/sözdizimsel/anlamsal (lexical/syntactic/semantic)  Seeheim:  Arch/Slinky:

25 Seeheim Model Presentation Dialogue Control Functionality (application interface) USER APPLICATION switch lexical syntacticsemantic

26 Kavramsal Uygulama  Seeheim  Uygulama deneyimi çıktı  Ama asıl katkısı kavramsal  ‘normal' UI dil parçası kavramları **Seeheim bize farklı düşünmeyi sağlıyor.  Örneğin; Örneğin alt kutu anahtarı uygulanma için gerekli ancak kavramsal değil.

27 GeriBildirim • Gerbildirim Çeşitleri nelerdir? • Şema olarak özetleyelim..

28 Anlamsal Geribildirim ( Semantic Feedback )  Geribildirim çeşitleri:  sözlü(Lexical)-fare hareketi  sözdizimsel(Syntactic)-menü olayları  Anlamsal(semantic)-sayıların toplamını değiştirir  Anlamsal geribildirim genellikle daha yavaş hızlı sözlü/sözdizimsel geribildirim kullanmak daha iyidir.  Ama bazen hızlı anlamsal geribildirim gerekebilir  Serbest Çizim  Dosya sürüklendiğinde çöp tenekesi ya da klasörünün vurgulanması parlaması.

29

30 Hızlı Anlamsal Geribildirim uygulama ve sunum arasında doğrudan iletişim Fakat Diyalog kontrolcü tarafından düzenlenir.

31 Çok Katmanlı!

32 Arch/Slinky  Daha fazla katman! Sözlü/fiziksel( lexical/physical ) ayıran özelliktir.  Farklı sistemlerde farklı katmanlara ulaşabilmek önemlidir. Bu özellik bu konuda önemli.  Ya da farklı bileşenler arasında erişim

33 UIMS’e örnek

34 Picasso3 adındaki örnek tasarımdan bir görünüm

35 Monolitik vs. Bileşenleri (Monolithic Vs. Components)  Seeheim’in büyük bileşeni vardır.  Küçük parçaları kullanmak daha kolaydır;  Özellikle nesne yönelimli araçlar kullanıyorsanız  Smalltalk MVC kullanır – model–view(görüntü)– controller(kontrolcü)  Model-bileşenin iç mantık durumu  Görüntü-ekranda nasıl işlenir  Kontrolcü – kullanıcı girişi işler

36 MVC Model- Görüntü-Kontrolcü (Model - View - Controller) model view controller

37 Model-View-Controller  MODEL NEDİR?  İş mantığı (Business Logic) bölümüdür. Tek katmandan oluşabileceği gibi, birden fazla katmanı da içinde barındırabilir. Tek katmandan oluştuğunda genelde veritabanına kayıt ekleme, kayıt çekme, kayıt silme vb. veritabanı işlemleri için kullanılır. Controller'den gelen değerleri işler ve geriye döndürür. Model katmanında herhangi bir output işlemi yapılmaz.  VIEW NEDİR?  Uygulamanın kullanıcıya gösterilen arayüzünün bulunduğu katmandır. Html, Css, Javascript vb. bu katmanda bulunur. Bu bölümde minumum php kodunun yazılması hedeflenmektedir. for, foreach, while vb. döngüler ile birlikte, dinamik değerleri ekrana yazdırmak için output komutları sıklıkla kullanılır.  CONTROLLER NEDİR?  Uygulamanın karar mekanizmasıdır. Model ile View arasında köprü görevi görür. View katmanından gelen istekleri(request) model'e gönderir ve Model katmanından aldığı verileri view'e aktarır.

38

39

40 MVC Sorunları  MVC büyük boru hattı(pipeline) modelidir:  Giriş  Kontrol  Model  Görüntü  Çıkış  Grafik arayüzü; Giriş sadece çıkışla ilişkili anlamına geliyor.  Örneğin fare tıklaması;  Nereye tıklaması gerektiğini bilmesi gerekiyor.  Nereye tıklayacağını kontrolcünün bilmesi gerekiyor.  Fakat görünüm nereyi gösterdiğini bilir.

41 PAC Model (Presentation Abstraction Control)  Pac Seeheim modele çok yakındır.  Özet(abstraction )-mantıksal bileşenin durumunu  Tanıtım(presentation )- Giriş ve çıkışları yönetir.  Kontrol(control )-Bunlar arasında aracılık eder  Hiyerarşi ve çoklu gösterimi yönetir  Pac nesnelerinin denetim bölümü iletişim sağlar.  Pac nesneleri bir çok yönden daha anlaşılır kullanılmış.  Ancak MVC pratikte daha fazla kullanılmaktadır.

42 PAC Presentation - Abstraction - Control abstractionpresentation control AP C AP C AP C AP C

43 Pac modelin hiyerarşik yapısı Presentation(Tanıtım- Sunum): algılayabileceği davranışı, belirli bir soyutlama görsel temsilini Abstraction(Soyutlama): temel işlevleri ve veri, iş etki alanı işlevselliği Control(Kontrol): iletişim, sistem içinde soyutlamalar ve kullanıcıya kendi sunum arasında tutarlılık sağlar

44 UIMS Uygulanması (User Interface Management Systems (UIMS))  Diyalog denetleyicisi için teknikler:  Menü ağı  Durumuna geçiş diyagramları  Gramer gösterimler olay dilleri  Bildirimsel dilleri  Kısıtlamaları  Grafik özellikleri (Daha geniş bilgi 16. ünitede verilecektir. )  N.B. Kısıtlamaları  Doğru söylenmesi gereken olayların yerine kullanılır.  Kullanılan gruplandırmanın yanı sıra tek kullanıcı arabirimleri olarak da kullanılabilir. (ALV- Abstraction–Link–View)

45 Grafik Özellikleri  Nedir?  Ekranda bileşenlerini çizebilmekteyiz  Programa eylemleri ile komut dosyası ya da bağlantıları ayarlayabiliriz  Kullanımda;  En popüler teknik programlama  Örneğin Visual Basic, Dreamweaver, Flash  Yerel ve küresel  Odaklandığında bir ekranda görülebilir

46 Flash örneğimiz…

47 Diyalog Kontrolünün Amaçları  İç Denetim(internal control)  (örneğin, okuma-değerlendirme döngüsü)  Dış denetim(external control)  (bağımsız uygulama mantığı ya da sunum)  Sunum kontrol(presentation control)  (örneğin, grafik özellikleri)

48

49 Destek Araçları Programlama Düzeyleri  Pencereleme sistemi  Aygıt bağımsızlığı  Birden çok görev  Uygulama programlama paradigmaları  Okuma-değerlendirme döngüsü(read-evaluation loop)  Bildirim tabanlı(notification-based)  Araç kitleri(Toolkits)  Etkileşim nesneleri programlama  UIMS  Ayrılık için kavramsal mimarileri  Diyalog ifade etmek için teknikler

50 Referanslarımız..  http://tr.wikipedia.org/wiki/X_Pencere_Sistemi  http://www2.hrp.no/procsee/papers/storefjell93.pdf  http://www.hcibook.com/e3/chapters/ch8  http://www.x.org  http://www.involve360.com/oursupport/setup  http://translate.google.com.tr/translate?hl=tr&sl=en &tl=tr&u=http%3A%2F%2Fen.wikipedia.org%2Fwiki %2FWindowing_system