jsf ve primefaces ile yazılan prıjenin cep telefonu ve tablet uyumlu hale nasıl getirilir.bilen arkadaşlar aşamalı olarak açıklayabilirlermi ?

soruldu: 10 Tem '13, 14:29

Ekici's gravatar image

Ekici
12691217
cevap kabul oranı: 25%

değiştirildi: 10 Tem '13, 14:30


Merhabalar JSF ve Primefaces ile yazılan bir projenin reponsive olabilmesi için ilk olarak responsive bir template yapmalı ayrıca Primefaces te PanelGrid içerisine yerleştirdiğin şeylerin ekran size değiştiğinde onları ayarlaması için şöyle birşey yazman gerekiyor.

<p:panelGrid styleClass="noBorders" columns="2" **layout="grid"**>

</p:panelGrid>

Not:Ayrıca Primefaces son zamanlarda HTML 5, CSS 3 ve Primefaces componentların düzgün bir şekilde çalışıtığı layout ve themelar yaptı.Fakat bunları ücretli olarak servis etmektedir.Bunları kullandığında zaman responsive çalıştığı için bütün cihazlara uyumluluğu var.Konuyla ilgili primefaces kendi sayfasına bakabilirsin.

permanent link

cevaplandı: 13 May '15, 02:19

caglarturkurka's gravatar image

caglarturkurka
6653712
cevap kabul oranı: 6%

Merhaba sayfalarının responsive olması için bir Css dosyası içinde nesnelerini yönetmelisin. Ancak Primefaces css içinde width, height gibi değerlerin yönetimine izin vermiyor. Bunun ile ilgili bende bir soru sordum, çözüme ulaşırsam seninle de paylaşırım. Genel olarak responsive mantığı aşağıda yazdıgım kod blokları arasına ilgili stil kodlarının yazılmasıyla olan bir durum.

Kolay gelsin.

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ Smartphones (landscape) ----------- / @media only screen and (min-width : 321px) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ Smartphones (portrait) ----------- / @media only screen and (max-width : 320px) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ iPads (portrait and landscape) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ iPads (landscape) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ iPads (portrait) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ Desktops and laptops ----------- / @media only screen and (min-width : 1224px) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ Large screens ----------- / @media only screen and (min-width : 1824px) {
Bu çözünürlükler arası çalısacak olan stil kodları buraya }

/ iPhone 4 ----------- / @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/Bu çözünürlükler arası çalısacak olan stil kodları buraya }

permanent link

cevaplandı: 14 May '15, 07:00

coder86's gravatar image

coder86
220223035
cevap kabul oranı: 0%

Cevabınız
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×281
×97
×72
×23
×3

Soruldu: 10 Tem '13, 14:29

Görüntüleme: 1,064 kez

Son güncelleme: 14 May '15, 07:00

powered by BitNami OSQA