JavaScript - Introdução com Orientação a ObjetosEduardo Mendes
Este material é preparatório para a utilização básica do JavaScript em contexto de outros frameworks. O material é pensado para pessoas que já possuem conhecimento de linguagens de programação e querem entender rapidamente conceito básico de objetos em JavaScript
JavaScript - Introdução com Orientação a ObjetosEduardo Mendes
Este material é preparatório para a utilização básica do JavaScript em contexto de outros frameworks. O material é pensado para pessoas que já possuem conhecimento de linguagens de programação e querem entender rapidamente conceito básico de objetos em JavaScript
This slide deck is for all the QA members who want to understand the methodology of test case design. These slides are not theoretical gyan but designed based on experience.
Unit Test with test JUNIT , JUnit is a simple framework to write repeatable tests. It is an instance of the xUnit architecture for unit testing frameworks.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Na estréia da série sobre Node.js, vamos falar sobre a história e as principais caraterísticas da plataforma como o V8, event loop e thread pool.
Vamos mostrar por meio de diversos exemplos como o Node.js funciona e quais são os aspectos importantes em termos de escalabilidade e performance.
https://www.youtube.com/watch?v=KtDwdoxQL4A
This slide deck is for all the QA members who want to understand the methodology of test case design. These slides are not theoretical gyan but designed based on experience.
Unit Test with test JUNIT , JUnit is a simple framework to write repeatable tests. It is an instance of the xUnit architecture for unit testing frameworks.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Na estréia da série sobre Node.js, vamos falar sobre a história e as principais caraterísticas da plataforma como o V8, event loop e thread pool.
Vamos mostrar por meio de diversos exemplos como o Node.js funciona e quais são os aspectos importantes em termos de escalabilidade e performance.
https://www.youtube.com/watch?v=KtDwdoxQL4A
Web uygulamaları dağıtım kolaylığı nedeniyle masaüstü uygulamalara üstünlük sağlamış ve geniş uygulama alanı bulmuştur. Bunun yanı sıra internete açık olan uygulamaların önemli bir kısmı da web uygulaması şeklindedir. Web uygulaması olmayan masaüstü uygulamalar ve mobil uygulamalar dahi web uygulama mimarisinin önemli bir kısmı olan HTTP protokolünü kullanmaktadır.
Bunların yanı sıra web uygulamaları çok katmanlı mimariye sahip olup, bu durum nispeten web uygulama altyapılarının sıradan masaüstü uygulamalara nazaran karmaşık olmalarına neden olmaktadır.
Tüm bu nedenlerden dolayı web uygulamaları saldırganların gözde hedeflerinden birisidir.
Web uygulama denetimi eğitiminde katılımcılara web uygulamalarında ortaya çıkabilecek açıklıkların neler olduğu, bu açıklıkları nasıl tespit edebilecekleri ve açıklıkların ortadan kaldırılma yöntemleri aktarılmaktadır.
Web uygulama denetimi eğitimi, mobil uygulama denetimi yapacak katılımcılara da gerekli temel web teknolojileri bilgilerini aktarmayı hedeflemektedir.
Web uygulamaları dağıtım kolaylığı nedeniyle masaüstü uygulamalara üstünlük sağlamış ve geniş uygulama alanı bulmuştur. Bunun yanı sıra internete açık olan uygulamaların önemli bir kısmı da web uygulaması şeklindedir. Web uygulaması olmayan masaüstü uygulamalar ve mobil uygulamalar dahi web uygulama mimarisinin önemli bir kısmı olan HTTP protokolünü kullanmaktadır.
Bunların yanı sıra web uygulamaları çok katmanlı mimariye sahip olup, bu durum nispeten web uygulama altyapılarının sıradan masaüstü uygulamalara nazaran karmaşık olmalarına neden olmaktadır.
Tüm bu nedenlerden dolayı web uygulamaları saldırganların gözde hedeflerinden birisidir.
Web uygulama denetimi eğitiminde katılımcılara web uygulamalarında ortaya çıkabilecek açıklıkların neler olduğu, bu açıklıkları nasıl tespit edebilecekleri ve açıklıkların ortadan kaldırılma yöntemleri aktarılmaktadır.
Web uygulama denetimi eğitimi, mobil uygulama denetimi yapacak katılımcılara da gerekli temel web teknolojileri bilgilerini aktarmayı hedeflemektedir.
www.btrisk.com
3. RichFaces Nedir? Genel Bilgi..
• Java ile web uygulamaları geliştirmenin pek çok
yöntemi vardır.
• Önceleri bu uygulamalar Servlet’ler ile başladı fakat
Servlet’ler kodun içine HTML yazmayı
gerektirdiğinden tutmadı.
• Daha sonra Java dünyası HTML içine Java kodu
gömmeyi başardı ve adına Java Server Pages(JSP) dedi.
• Ama Jsp ile büyük çaplı projeler gerçekleştirilirken bu
teknolojilerde iş mantığı ayrıştırması olmadığı için
yazılan kodların çöplük halini aldığı ve okunabilirliğin
büyük ölçüde azaldığı görüldü.
4. • Bu aşamadan sonra web çatıları kullanılmaya
başlandı. Günümüzde kullanılan en popüler web
çatısı Java Server Faces(JSF)tir.
• JSF, MVC(Model-View-Controller) yapısı ile, yazılımı
nesneler, görünümler ve kontrol sınıfları şeklinde
mantıksal olarak böler ve barındırdığı bileşenler
ile proje gerçekleştiriminde birçok kolaylık sağlar.
• Ancak yine de profesyonel bir proje geliştirirken
JSF bileşenleri yetersiz kalmaktadır. İşte bu anda
yardımımıza 3. parti JSF kütüphaneleri
(RichFaces, Icefaces, PrimeFaces) yetismektedir.
5. • RichFaces da Jboss firmasi tarafindan opensource
olarak gelistirilmekte ve ücretsiz dagitilmakta olan
zengin bir bileşen kütüphanesidir.
• RichFaces, JSF’e Ajax yeteneğini (Core Ajax component
kütüphanesi) kazandırarak, bizleri karmaşık scriptler
yazmaktan kurtarır. JSF’teki HTML bileşenler de dahil
olmak üzere her türlü bileşene kolayca AJAX desteği
verilebilir.
• RichFaces UI componenti ise RichFaces’a özel daha
estetik bir arayüz hazırlamaya imkan sunar.
6. RichFaces Mimarisi
• Ajax Filteresi: Filtre sayesinde birden fazla requesti
ele alabilmeyi sağlar. Geliştirici filtreyi web.xml içine
richfaces’in olanaklarından faydalanabilmek için
yerleştirmelidir.
• Ajax Action Bileşenleri:
AjaxCommandButton, AjaxCommandLink, AjaxPoll
and AjaxSupport ve diğer action bileşenleri ile istemci
tarafından ajax requestleri göndermek için kullanılır.
7. • Ajax Konteyner: JSF sayfalarının tutulduğu ve ajax
requestleri boyunca kodlandığı bir arayüzdür.
AjaxViewRoot ve AjaxRegion bu arayüzün
gerçekleştirimleridir.
• JavaScript Motoru: Rich faces Java Script motoru
istemci tarafında çalışır. Ajax responselarına göre jsf
sayfasında farklı alanları günler. Java Script motoru bir
api sağladığından programcının javascript kodu
yazmasına ve bunun fonksiyonelliğini sağlamasına
gerek yoktur.
8. RichFaces Kurulumu
• RichFaces’ın sisteme kurulması birkaç jarın eklenmesi
kadar basit bir işlemdir.
• WebContent/WEB-INF/lib klasörü altına aşağıdaki jarları
eklemeniz yeterlidir.
• richfaces-core-api.jar
• richfaces-core-impl.jar
• richfaces-components-api.jar
• richfaces-components-ui.jar
• RichFaces4 ile birlikte web.xml de herhangi bir değişiklik
yapmanıza gerek yoktur.
9. • Maven tabanlı projelerde kurulumu gerçekleştirdikten
sonra aşağıdaki kod bloğu pom.xml dosyasına
eklenmelidir.
<dependencyManagement><dependencies><dependency><groupId>org.rich
faces</groupId><artifactId>richfaces-
bom</artifactId><version>${richfaces.version}</version><scope>imp
ort</scope><type>pom</type></dependency></dependencies></dependen
cyManagement>
…
<dependency><groupId>org.richfaces.ui</groupId><artifactId>richfa
ces-components-
ui</artifactId></dependency><dependency><groupId>org.richfaces.co
re</groupId><artifactId>richfaces-core-impl</artifactId>
10. • RichFaces kütüphanelerini JSF sayfalarında
kullanabilmek için son olarak JSF sayfalarına aşağıdaki
linkler eklenmelidir.
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
11. RichFaces Kütüphaneleri
• a4j: Temel ajax bileşenlerini destekler. <a4j:xxx >
etiketi ile kullanılır
• rich: Bağımsız, zengin kullanıcı arayüzlü bileşenleri
destekler <rich:xxx> etiketi ile kullanılır.
12. RichFaces Bileşenleri
• RichFaces bileşenlerini aşağıdaki başlıklarla
genelleştirebiliriz:
• Ajax Action • Trees
• Ajax Queue • Output/Panels
• Menus
• Ajax Output/Containers
• Inputs and Selects
• Validation • Drag and Drop
• Data Iteration • Miscellaneous
13. Ajax Action Bileşenleri
• AJAX: İstemci taraflı dinamik sayfalar oluşturulup, sayfa
bütünüyle yenilenmeden yalnızca belli bir parçasının
yenilenebilmesine olanak sağlayan teknolojiler bütünü.
• RichFaces’ın Ajax desteği a4j:xxxx etiketleriyle sağlanır
• a4j:ajax
• a4j:commandButton
• a4j:commandLink
• a4j:jsFunction
• a4j:poll
• a4j:param
14. a4j:ajax
<h:form>
<h:inputText value="#{userBean.name}">
<a4j:ajax event="keyup" render="out" />
</h:inputText>
<br />
<h:outputText value="#{userBean.name}" id="out" />
</h:form>
• render : Hedef bileşenin ID’si
• event : Ne zaman render edilecek?
Belirtilen event her gerçekleştiğinde hedef bileşenin
değeri güncellenir. userBean.getName() çağrılır
17. • Standart h:commandButton ile a4j:ajax bileşenini birleştirir.
• rendered="#{not empty userBean.name}" text
alanı boş olduğunda Merhaba yazmamak için eklenmiştir.
19. Validation
• Sunucu tarafına gitmeden istemci tarafında girdiler
için beklenen biçimsel kısıtların sağlanıp
sağlanmamasını kontrol eder.
• E-mail’in geçerli biçimde olup olmadığı
• En az x en fazla y tane karakter girilebilir
• Sayı girmelisiniz
• Girilen sayı x ile y arasında olmalıdır
• Girilen şifreler uyuşmuyor
21. • Bir inputbox dan diğerine geçildiğine request
tetiklenmektedir.
• Yukarıdaki şekilde görüldüğü gibi server tarafına gitmeye
hiç gerek kalmadan gerekli kontroller yapılabilmektedir.
• İstenilen input için bütün kısıtlar istemci tarafında
konulabilir ve bunu yapmak için sadece <rich:validator/>
etiketini kullanmak yeterli olacaktır.
23. • Burada girilen parolalar managed bean’e gönderilmektedir
ancak sayfa tekrar render edilmemektedir. Girilen şifrelerin
eşleştirilmesi managed bean’de yapılmaktadır.
29. Data Table Sorting
Kolonları sırlamayı sağlar. Aşağıdaki resimde Sort by Capital
Name linkine tıklanıldığında sıralama gerçekleşecektir.
30.
31. Data Table Edit
• Verinin tablo üstünde Ajax desteğiyle düzenlenmesini sağlar.
32. • Yukarıda ki şekilde kırmızı ile işaretlenen alana tıklanıldığında
aşağıdaki şekilde görüldüğü gibi delete butonu çıkar, onay
beklenir ve onaylanırsa silinir.
33. • Update için ise x butonunun yanıdaki update butonuna
basılır ve aşağıda bilgilerin günleneceği alan çıkar. Bilgiler
buradan günlenebilir.
34. Tree
rich:tree
• Webde Ağaç görünümü sağlar
• Ağaç düğümleri üstünde seçilebilme olanağı sağlar
• Esnek görünüm ve hissediş sağlar
• Herhangi bir düğüm seçilmeden önce:
37. Output/Panels
• Toggle Panel : içeriği değiştirilebilir ajax destekli bir
paneldir. Bu panel daha da zenginleştirilerek içerisine next,
prev gibi konum bilgileri konulabilir.
38. • Aşağıda 3 aşamalı geliştirilmiş toogle paneli incelersek:
39. • Görüldüğü gibi tek bir panel üzerinden durum bilgisini de
saklayarak bu işlemleri ajax desteğiyle hızlı ve estetik bir
şekilde gerçekleştirdik.
40. Drag and Drop
Şekilde görüldüğü gibi kaynak listesinden ilgili alana aktarma
sürükle bırak ile yapılabilmektedir. Uygun eşleşme yeşil ile
onaylanmıştır.