UI Tasarımcısına Genel Bakış

Uygulamayı başarıyla oluşturduktan sonra UI Tasarımcısı Sekmesine yönlendirileceksiniz.

AppMaster'daki UI Tasarımcısı, kullanıcı dostu olacak şekilde tasarlanmıştır ve zahmetsizce çarpıcı web uygulaması sayfaları oluşturmanıza olanak tanır.

Sezgisel sürükle ve bırak arayüzü sayesinde, web sayfalarını tasarlayabilir ve bunları içerikle sorunsuz bir şekilde doldurabilir, böylece gelişmiş kodlama becerilerine olan ihtiyacı ortadan kaldırabilirsiniz.

Kullanıcı Arayüzü Tasarımcısı, kullanıcıların etkileşimde bulunabileceği dört ana bölüme ayrılmıştır:

1. Sol Araç Çubuğu
2. Üst panel
3. Alt panel
4. Kanvas Alanı
5. Özellikler Paneli

Sol Araç Çubuğu

Sol taraftaki araç çubuğu, web sitenizi yapılandırmak için araçlar sunar. Bu kenar çubuğunun üst kısmında yer alan simgelere tıkladığınızda aşağıdaki paneller ortaya çıkacaktır:

• Kullanıcı Arayüzü Öğeleri Listesi
• Öğeler Ağacı
• Sayfa Ağacı
• Düzen Ağacı
• Varlık Yöneticisi

Kullanıcı Arayüzü Öğeleri Listesi (kısayol: 1 )

UI Öğeleri Listesi, panelden sürükleyerek tuval alanına eklenebilecek tüm öğeleri sağlar.

Kullanıcı arayüzü öğeleri, amaçlarına göre kategoriler halinde düzenlenerek gezinmeyi ve uygulamanız için uygun widget'ı bulmayı kolaylaştırır.

Öğeye hızlı bir şekilde gitmek için panelin üst kısmındaki Arama çubuğunu kullanabilirsiniz.

Öğeler Ağacı (kısayol: 2 )

Öğe Ağacı'ndan , web uygulamanızın seçilen sayfasına yerleştirilen tüm bileşenleri yönetebilir ve düzenleyebilirsiniz.

Burada şu öğelerle etkileşime girebilirsiniz:

• öğeleri sürükleyerek ağaç arasında taşıyın,
• bileşenleri yeniden adlandırın,
• tuval üzerindeki öğelerin görünürlük durumunu değiştirin (gizle/göster).

Ağaçtaki hızlı arama öğesi için panelin üst kısmındaki Arama çubuğunu kullanın.

Sayfa Ağacı (kısayol: 3 )

Sayfa Ağacı, site sayfalarınızı düzenlemenize ve yönetmenize olanak tanır. Burada yeni sayfalar veya klasörler oluşturabilirsiniz.

Sayfa Ağacı'nda sayfaları veya klasörleri çoğaltabilir veya silebilirsiniz.

Ağaçtaki hızlı arama sayfası veya klasörü için panelin üst kısmındaki Arama çubuğunu kullanın.

Düzen Listesi (kısayol: 4 )

Düzen Ağacı, sayfa düzenlerinizi yönetmenize yardımcı olur. Sayfa Ağacı'nda olduğu gibi düzenleri çoğaltabilir veya silebilirsiniz.

Ağaçtaki hızlı arama düzeni için panelin üst kısmındaki Arama çubuğunu kullanın.

Varlık Yöneticisi (kısayol: 5 )

Varlık Yöneticisi, web sitenizin kullanımına yönelik varlıkların (belgeler, resimler ve animasyonlar gibi) yüklenmesini ve düzenlenmesini kolaylaştırır.

Geliştirme sırasında yüklediğiniz tüm varlıklar Varlık Yöneticisi'nde tutulacak ve yeniden yüklemeye gerek kalmadan yeniden kullanılabilir.

Artık ihtiyacınız olmayan varlıkları da kaldırabilirsiniz.

Üst Çubuk

Üst çubuk ek bir görünüm ayarları seti sağlar. Sol taraftan menü düğmesinin yanından başlayıp sağa doğru devam ederek aşağıdaki araç setine sahip olursunuz:

• Geçerli Belge: üzerinde çalışmakta olduğunuz sayfayı veya düzeni görüntüler.
• Kesme noktaları: kesme noktası simgeleri, sitenizin çeşitli cihaz boyutlarında nasıl göründüğünü önizlemek ve değiştirmek için farklı kesme noktaları arasında geçiş yapmanıza olanak tanır.
• Geri Al ve Yinele: Geri Al ve Yinele düğmeleri, Tasarımcı'da yaptığınız stil uygulama veya öğe kaldırma gibi eylemleri geri almanıza veya yeniden uygulamanıza olanak tanır. Ayrıca kısayollar da mevcuttur: eylemi geri almak için - CRTL/⌘+Z ve eylemi yeniden yapmak için - CTRL/⌘+SHIFT+Z .

Alt çubuk

Alt panel, sayfa görünümünü yakınlaştırmanıza veya yeniden boyutlandırmanıza olanak tanır.

Panelin sol tarafında tuvalinizin yüksekliğini ve genişliğini ayarlayarak özel sayfa çözünürlüğünü ayarlayabilirsiniz.

Sağ tarafta ölçeği kontrol edebilirsiniz:

• Yakınlaştırın veya uzaklaştırın
• Ölçeği yüzde cinsinden ayarla
• Gerçek boyutu ayarla
• Geçerli pencereyi görünür alana sığdır

Tuval

Kanvas etkileşimli çalışma alanınızdır. Burası sayfa bileşenleriyle etkileşim kurabileceğiniz yerdir. Öğeleri seçebilir, yeniden konumlandırabilir ve içeriği doğrudan sayfada düzenleyebilirsiniz.

Ayrıca, sayfalar ve uygulamalar arasında ( CRTL/⌘+C ) öğeleri kopyalayıp ( CRTL/⌘+V ) yapıştırabilir veya geçerli sayfadaki öğeleri çoğaltabilirsiniz ( CRTL/⌘+D ).

Özellikler Paneli

Tasarımcının sağ tarafındaki Özellikler paneli, seçilen öğenin, düzenin veya sayfanın görsel görünümünü ve davranışını özelleştirmenize olanak tanır.

Özellikler paneli 4 ana panelden oluşur:

• Görünüm paneli
• Ek seçenekler paneli (isteğe bağlı)
• Medya Sorguları Paneli
• İş Mantığı Paneli

Panelin başlığında, öğe adına tıklayarak seçilen öğeyi yeniden adlandırabilir, açıklamayı okuyabilir veya Çöp Kutusu simgesini tıklatarak öğeyi silebilirsiniz.

Görünüm Paneli

Görünüm Paneli, seçilen öğenin görüntülenen statik içeriğine ve özelliklerine erişmenizi sağlar. Bu değerleri karşılık gelen alanlara girebilir veya seçebilirsiniz; stiller, tuval üzerindeki öğelerinize hemen uygulanacaktır.

Kanvas üzerinde hiçbir öğe seçilmemişse bu panel, geçerli sayfanın veya düzenin ayarlarını görüntüler.

Ek Seçenekler Paneli

Ek Seçenekler Paneli, ekstra ayar verileri veya seçenekleri gerektiren öğeler için tasarlanmıştır.

Seçilen bileşene bağlı olarak veri kaynağını ayarlayabilir veya seçenekleri manuel olarak girebilirsiniz.

Medya Sorguları Paneli

Medya Sorguları Paneli, tanımlanan her kesme noktası için öğe özelliklerini geçersiz kılmanıza olanak tanır.

İş Mantığı Paneli

İş Mantığı Paneli, bir öğeye ilişkin tüm tetikleyicileri sağlar ve tetikleyici etkinleştiğinde öğe etkileşimi oluşturmanıza olanak tanır.