Uygulama Oluşturma

Bir uygulama oluşturmak için Düzenler, Sayfalar oluşturmalı, bunları içerikle doldurmalı ve web uygulaması etkileşimini kurmalısınız.

Düzenler

Daha önce Düzenler kavramını tanıtmıştık. Mizanpaj oluşturmaya başlamak için öncelikle uygulamanızın yapısını özetlemeli ve kullanılacak sayfa şablonlarını belirlemelisiniz.

Bir şeyi kaçırırsanız endişelenmeyin. Gerektiğinde düzen listesini artırabilirsiniz.

Düzen Listesi

Düzen Listesi web uygulamanızın tüm düzenlerini sağlar. Burada çeşitli işlemleri gerçekleştirebilir ve düzenleri yönetebilirsiniz.

Düzen Listesine erişmek için UI Tasarımcısı Sekmesindeki sol araç çubuğundaki 4. sekmeyi seçin veya 4 kısayol tuşunu kullanın. Tüm uygulama düzenleriniz burada görüntülenecektir.

Her uygulamanın en az bir düzeni olmalıdır. Yeni bir uygulama oluşturduğunuzda, seçilen uygulama şablonuna bağlı olarak bir veya daha fazla düzen otomatik olarak oluşturulacaktır. Bunlardan biri **varsayılan** olarak işaretlenmiştir.

Düzen Listesinde, düzenlerde aşağıdaki eylemleri gerçekleştirebilirsiniz:

• seçme,
• yeni ekle,
• yeniden isimlendirmek,
• kopyalamak,
• silmek.

Varsayılan Düzen

Varsayılan düzen, yeni bir sayfa oluşturulurken düzen listesinden otomatik olarak seçilir. Ancak ihtiyaç halinde bu farklı bir düzen ile değiştirilebilir.

Varsayılan düzen kullanımı geliştirme hızını artırır, bu nedenle en sık kullanılan düzeni varsayılan olarak kullanmanızı öneririz. Aynı anda yalnızca bir düzenin varsayılan olarak ayarlanabileceğini unutmayın. Varsayılan düzeni geçersiz kılmak, ilk düzen silinmediği sürece mevcut sayfaları etkilemez.

Varsayılan düzen, düzen listesinde mavi bir yıldız simgesiyle işaretlenmiştir.

Yeni Düzen Oluştur

Farklı sayfa türleri için farklı düzenler tasarlayabilirsiniz. Yeni bir düzen oluşturmak için şu adımları izleyin:

• CTRL/⌘+L tuşlarına basın veya UI Designer'ın Sol araç çubuğundan Düzen Listesini (kısayol 4 ) açın ve panel başlığındaki Artı düğmesini tıklayın.
• Görünen modalda Düzen Adını girin. Sayfalara mizanpajlar atarken hızlı tanımlama için mizanpajın yapısını yansıtan okunabilir bir başlık kullanmanızı öneririz.
• Düzen Şablonunu Seçin:
  • Temel: ek öğeler içermeyen boş şablon, kimlik doğrulama veya hata sayfaları gibi gezinme olmayan sayfalar için iyidir.
  • Sol Kenar Çubuğu: kenar çubuğu menüsüne sahip şablon, yönetici panelleri, CMS, ERP vb. için iyidir.
  • Üst Menü: üst menüyü içeren şablon, web siteleri veya açılış sayfaları için iyidir.
• Bu düzenin varsayılan yapılması gerekiyorsa Varsayılan Düzen ayarını etkinleştirin.
• Oluştur düğmesini tıklayın.

Oluşturabileceğiniz düzen sayısında herhangi bir sınırlama yoktur.

Düzeni Yeniden Adlandırma

Bir düzeni yeniden adlandırmak için, düzen adına çift tıklayın, gerekli değişiklikleri yapın ve kaydetmek için Enter veya değişiklikleri geri almak için Esc tuşuna basın.

Düzeni Çoğaltmak

Bir düzeni içeriği ve ayarlarıyla birlikte kopyalamak için:

1. Çoğaltmak istediğiniz düzenin üzerine gelin.
2. Çoğalt simgesini tıklayın.

Çoğaltılan düzenler, adlarına bir dizin eklenerek otomatik olarak listede görünür. Varsayılan olarak ayarlanan düzeni kopyalarsanız kaynak düzeni, yeni oluşturulan düzen tarafından geçersiz kılınmaz.

Düzeni Silme

Düzeni kaldırmak için:

1. Silmek istediğiniz düzenin üzerine gelin.
2. Çöp Kutusu simgesini tıklayın.
3. Silmeyi onayla.

Herhangi bir sayfaya bağlı düzeni silmek için, bağlantılı sayfaların düzenini silmeden önce yeniden atamanız gerekir. Bu, onay yöntemi aracılığıyla veya her sayfa için manuel olarak yapılabilir.

Varsayılan düzeni silmek için başka bir düzeni varsayılan olarak ayarlamanız gerekir.

❗️ Önemli: Düzen silme işlemini geri alamazsınız.

Düzen Ayarları

Sol Ayar Kenar Çubuğundan ayarlarına erişmek için Düzen Listesindeki hedef düzeni tıklayın.

Ayarlar kenar çubuğu başlığından, seçilen düzeni isme tıklayarak yeniden adlandırabilir veya silebilirsiniz.

Seçilen düzeni varsayılan olarak ayarlayabilir ve bağlantılı tüm sayfaları burada görüntüleyebilirsiniz. Bağlantılı bir sayfayı düzenlemek için listede ilgili sayfayı tıklayın.

Ayrıca düzen için bazı iş mantığı oluşturabilirsiniz.

Düzen İş Mantığı

İş mantığı sekmesinde bir eylem ayarlamak için bir tetikleyici seçin. Bu, seçilen tetikleyiciye odaklanan iş süreci düzenleyicisini açacaktır.

Burada, gezinmeyi uygulama, özellikleri koşullu olarak değiştirme, görünürlüğü değiştirme, veri gönderme ve daha fazlası gibi bir veya daha fazla tetikleyici için bir eylem akışı oluşturabilirsiniz. Daha fazla bilgi için iş süreci oluşturma kılavuzumuza bakın.

🔔 Optimum uygulama performansı için arka uç tarafında karmaşık iş süreçleri oluşturun.

Düzeni Düzenleme

Genel bileşenler ve sayfa şablonları olarak düzenler, tüm değişiklikleri bağlantılı tüm sayfalara otomatik olarak uygular.

Bir düzeni düzenlemek için, düzen listesinden hedef öğeyi seçin ve kullanıcı arayüzü öğeleri panelinden gerekli bileşenleri tuval alanına sürükleyip bırakarak ekleyin.

Bir düzeni düzenlerken şablonun değiştirilemez bir Sayfa Kapsayıcı bileşeni içerdiğini unutmayın. Bu, sayfa içeriğinizin şablon içindeki yerleşimini belirler. Sayfa Kapsayıcı yeşil renkle vurgulanır ve düzen düzenleme modundayken iç bileşenleri içeremez. İçerik doğrudan sayfada tanımlanır ve Sayfa Kapsayıcı boyutu, ana bileşeni tarafından belirlenir.

Sayfalar

Gerekli düzenleri oluşturduktan sonra web uygulaması sayfalarını oluşturmaya başlamanın en iyi zamanı. Gerekli düzenleri oluşturduktan sonra web uygulaması sayfalarını oluşturmaya başlamanın en iyi zamanı. Her web uygulaması sayfası, kullanıcının web tarayıcısında hedef URL'ye göre görüntülenen içeriği sağlar.

Sayfa Ağacı

Sayfa Ağacı size web sitenizin yapısını, yani site sayfalarınızı ve bu sayfaları barındıran klasörleri gösterir. Burada çeşitli işlemleri gerçekleştirebilir, sayfaları ve klasörleri düzenleyebilirsiniz.

Sayfa Ağacını Açmak için UI Designer'ın Sol araç çubuğundan 3. sekmeyi seçin veya 3'e basın. Burada tüm uygulama sayfalarınız görüntülenecektir.

Her başvurunun en az bir sayfası olmalıdır. Yeni bir uygulama oluşturduğunuzda, seçilen uygulama şablonuna bağlı olarak bir veya daha fazla sayfa zaten oluşturulmuştur.

Sayfalarda ve klasörlerde aşağıdaki eylemleri gerçekleştirebilirsiniz:

• seçme,
• yeni sayfa veya klasör ekleyin,
• yeniden isimlendirmek,
• sayfayı ve klasörleri klasöre/dışarıya taşıyın,
• kopyalamak,
• silmek.

Dizin sayfası

Dizin sayfası başvurunuzun ilk sayfasıdır. Uygulamanız çalıştığında, herhangi bir yönlendirme oluşturmadıysanız ilk olarak bu sayfa oluşturulacaktır.

Dizin sayfası, sayfa ağacındaki Ev simgesini işaretlemiştir ve başka bir sayfaya geçilemez. Varsayılan olarak bu sayfa, otomatik olarak oluşturulan varsayılan düzene bağlıdır, ancak bunu Sayfa Ayarları'ndan değiştirebilirsiniz.

Yeni Sayfa Oluştur

Web uygulamanıza sayfa eklemek için:

1. CTRL/⌘+P tuşlarına basın veya UI Designer'ın Sol araç çubuğundan Sayfa Ağacını (kısayol 3 ) açın ve panelin başlığındaki Artı düğmesini tıklayın.
2. Görüntülenen modda Sayfa URL'sini sağlayın.
3. Sayfa için Ana Klasörü seçin veya sayfayı kök konuma yerleştirmek için alanı boş bırakın.
4. Sayfa Düzeni'ni seçin.
5. Oluştur düğmesine tıklayın.

💡 Klasör oluşturmadan iç içe geçmiş bir rota oluşturmak için Sayfa URL'si alanında hedef sayfanın tam yolunu sağlayın (ör. ayarlar/profil). Bu durumda sayfa Profili, Ayar klasörüne yuvalanmış olarak oluşturulacaktır.

Web uygulamanız için sınırsız sayfa ve klasör oluşturabilirsiniz.

🔔 AppMaster Studio ile oluşturulan web uygulamaları, sayfa URL'sine göre uygulama yönlendirmesi oluşturur, bu nedenle sayfa oluşturma formunda sayfa URL'sini doğru formatta kullanın ve en iyi anlayış için kolay anlaşılır bir URL kullanın.

Yeni klasör Oluştur

Gezinmeyi düzenlemek ve sayfalar için doğru yönlendiriciyi oluşturmak için klasörler oluşturabilirsiniz. Yeni bir klasör oluşturmak için:

• CTRL/⌘+SHIFT+P tuşlarına basın veya UI Designer'ın Sol araç çubuğundan Sayfa Ağacı'nı (kısayol 3) açın ve panelin başlığındaki Klasör düğmesini tıklayın.
• Görüntülenen modda Klasör Adını girin.
• Yuvalanmış bir yönlendirici oluşturmak gerekiyorsa Ana Klasörü seçin
• Oluştur düğmesine tıklayın.

Kullanıcı Arayüzü Öğeleri

Uygulamanızın kullanıcı arayüzü öğelerden oluşur: her biri belirli bir amaca hizmet eden giriş alanları, düğmeler, resimler, onay kutuları, takvimler, resimler ve simgeler.

AppMaster, kod yazıp anında önizlemek yerine öğeleri doğrudan sayfaya seçip yerleştirmenize olanak tanıyan, sürükle ve bırak özellikli bir görsel düzenleyici sunar.

Öğe Ekleme

Tuvale bir öğe eklemek için:

1. UI öğelerinin listesini içeren UI Öğeleri Panelini açın (kısayol 1 ).
2. Gerekli öğeyi seçin veya Arama çubuğunu kullanın.
3. Seçilen öğeyi sayfaya veya düzen tuvaline sürükleyin.

Sürükleme öğesini hedefin içine yerleştirmek için öğeyi hedef öğelerin üzerine bırakın.

Bir öğenin önüne veya arkasına bir öğe eklemek için, öğeyi bir ayırıcı görünene kadar hedefin sınırının üzerine sürükleyin.

Bölücü ana konteynerin yönüne bağlıdır:

• Ana kapsayıcı Direction Vertical ise öğeler üstten veya alttan eklenecektir.
• Ana kapsayıcı Direction Horizontal ise öğeler soldan veya sağdan eklenecektir.

Öğeleri Özelleştir

Kanvasa eklediğiniz her bileşen, kapsamlı bir özelleştirilebilir ayarlar seti ile donatılmıştır. Öğe özellikleriyle hem öğe görünümünü hem de görüntülenecek verileri yönetebilirsiniz.

Bir öğeyi yapılandırmak için:

• Tuval üzerinde hedef bileşeni seçin.
• Sağ kenar çubuğundaki ilk sekme olan Görünüm paneline gidin.
• Panelde değiştirmek istediğiniz belirli Ayar öğesini seçin.
• Tercih ettiğiniz değerleri belirlenen alanlara girin.

Kanvas gerçek zamanlı olarak yanıt vererek ayarlarınızı anında gösterir.

Ek rehberlik amacıyla, o ayarın işlevinin kısa bir açıklamasını sağlayan bir araç ipucunu ortaya çıkarmak için fare imlecinizi kısa bir süre bir ayarın üzerine getirin.

Bu etkileşimli özelliklerin ötesinde AppMaster, özel iş süreci blokları, Set Properties ve Set Data aracılığıyla özelleştirme yeteneklerini geliştirir. Bu bloklar, web uygulamanızda her bir bileşenin ayarlarını programlı bir şekilde değiştirmenize olanak tanıyan gelişmiş düzeyde erişim sağlar.