Elements

Navigation

Kuika'nın Menü elementi, uygulamanızda kullanıcıların farklı sayfalara veya işlevlere kolayca erişebilmesi için bir navigasyon menüsü oluşturmanıza olanak tanır. Menü elementi, kullanıcıların farklı ekranlara geçiş yapmasını sağlar ve birden fazla alt seviyeye sahip menüler oluşturmanıza imkan tanır. Menu, sizin tanımladığınız öğelerle oluşturulabileceği gibi, bir veri tablosundan beslenen dinamik bir yapıda da olabilir. Bu eğitim içeriğinde, Menu elementini nasıl kullanacağınızı öğreneceksiniz.

Menu elementi, web ve mobil uygulamaları desteklemektedir.

Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:

Menu elementi ekleme,
Menu elementi özellikleri,
Menu elementine çoklu dil desteği sağlama.
Authorization (Yetkilendirme),
Visibility (Görünürlük),
Editability (Düzenlenebilirlik),
Style Panel ile arayüz tasarımını özelleştirme,
Actions (Aksiyonlar).

Menu Properties paneli, Master Screen ile eklediğiniz menü elementi özelliklerini görüntüleyebilmek için elementi seçin ve Properties panelini açın. Menu elementinin özelliklerini, içeriklerini ayarlayabileceğiniz ve değiştirebileceğiniz paneldir.

Bu panel içerisinde aşağıdaki özellikler bulunur:

Select a Data Type,
Options,
Direction,
Theme,
Primary Color,
Collapsed,
Selected Key,
Collapsible,
Collapsed Button Color,
Authorization,
Visibility.

Select Data Type: Menu elementindeki verilerin Statik (Static) veya Dinamik (Dynamic) olarak menü öğe yapılandırmasını sağlayabilirsiniz. Veri tipi seçimine bağlı olarak Properties paneli seçenekleri farklılık gösterir.

Static: Menu öğelerini (ana menü ve alt menü öğeleri dahil) sizin yapılandırdığınız tipidir. Elemente bir isim vermezseniz, otomatik gelen isimle (örneğin: Menu1) bir yapılandırma alanı açılır. Başlık altında “+ Sub Menu” ve “+ Menu Item” ile ilgili alan gelmektedir.

Sub Menu: Alt menü öğelerine sahip bir öğe ekler.

Menu Item: Tek seviye bir menü öğesi ekler.

Menu elementine “+ Menu Item” ile menu öğeleri ve “+ Sub Menu” ile alt menüye sahip öğeler ekleyebilirsiniz. Eklenmiş her SubMenu öğesi altında yine Menu Item ve Sub Menu butonları bulunur. Bu butonlar aracılığıyla da seçili menü öğesi altında da eklemeler yapabilirsiniz. Açık olan yapılandırma alanında, Menu elementi içerisine eklenmiş öğeleri seçerek her bir menü öğesi için ismini düzenleyebilir veikon ekleyebilirsiniz.

Dynamic: Static seçim sonucunda görüntülenen öğe ekleme seçenekleri gizlenir. Bu bölümün yerine “Options” başlığı altında menü öğelerinin dinamik olarak alınacağı veri kaynağına ait özel aksiyonun seçilebildiği liste gelir.

Örneğin, “FirstMenu” içerisinde Icon, Id, Link, ParentId, Title kolonlarına sahip veri tablosu oluşturalım:

Tabloyu çalıştığınız ekran içerisine çağırmak için sol paneldeki “Custom Actions” paneli içerisinde SQL Actions oluşturun.
SQL Actions’ınızı “getMenu” şeklinde isimlendirin. Sol panelden tabloyu seçip sağ tıklayarak açılan listeden “Add Select Query” seçeneğine tıklayın ve SELECT * FROM FirstMenu sorgusunun yer aldığı SQL Actions’ı “CREATE” butonuna tıklayarak oluşturun.
Ardından “+ADD ACTION”a tıklayarak açılan Search box içerisine “GetMenu” yazarak aksiyonu çalıştığınız ekrana çağırın.
Son olarak, Dynamic seçili olacak şekilde Properties paneli içerisinden Options alanından “getMenu”yü seçin.

Options: Menü öğe içerikleri dinamik olarak beslendiğinde Options alanı açılır. Bu alan, “Select a data type”da Dynamic seçili olduğunda görüntülenir. Bu bölüm sayesinde, menünün besleneceği veri kaynağına ait özel aksiyonu seçebilirsiniz.

Menu öğelerini besleyen örnek veri tablosunu aşağıdaki görsel üzerinden inceleyebilirsiniz.

Menü için oluşturduğunuz bu veri tablosundaki verileri düzenleyebilmek için CRUD Wizard ile listeleme, yeni öğe ekleme ve düzenleme gibi ekranları birkaç tıklamayla oluşturabilirsiniz.

Direction: Menü elementinin ekran içinde nasıl görüntüleneceğini yatay veya dikey olarak tanımlayabilirsiniz.

Horizontal (Yatay) Yön: Yatay yönde menü öğeleri yan yana sıralanır. Genellikle üst başlık çubuğu veya alt başlık çubuğu gibi yatay alanlarda kullanılır. Çok sayıda seçeneğin görüntülenmesi gerektiğinde tercih edilir, çünkü daha fazla öğeyi yatayda yerleştirerek görünürlüğü artırır.
Vertical (Dikey) Yön: Dikey yönde menü öğeleri üst kenara hizalı olarak başlayarak aşağıya doğru sıralanır. Genellikle sol veya sağ kenar panellerde veya menü çubuklarında kullanılır. Sınırlı bir alan içinde daha fazla öğe düzenlemek ve erişmek için kullanışlıdır. Dikey bir düzen, kullanıcının seçenekleri aşağıya doğru kaydırmasını gerektirebilir.

Theme: Theme alanı Properties panelinde Menu elementinin tema renginin seçildiği alandır.

Menu elementi ile ilgili Light (Açık/Beyaz) ve Dark (Koyu/Siyah) olmak üzere iki tema bulunmaktadır.

Primary Color: Tema renginden bağımsız olarak, menü öğelerinde geçerl, doğrulanan veya seçili öğenin renginin tanımlandığı alandır. Color alanına tıklayarak açılan renk seçici penceresinden ön tanımlı renklerden birini seçebilir veya özel bir renk tanımlayabilirsiniz. Örneğin, kırmızı renk tanımlandığında, Menu elementinin görünümü aşağıdaki gibi olacaktır.

Menü öğelerinin renklendirilmesinde kullanılan arka plan renginde kullanılan açık ve koyu tonlar seçtiğiniz renk üzerinden otomatik olarak üretilir.

Collapsed: Menü elementinde ikon tanımlanmadığı durumlarda, ilgili öğenin ilk harfinin baz alınarak görüntülenmesini ve menünün dar bir alana yerleştirilmesini sağlar. Bu özellik sayesinde, menü daraltılmış versiyonu ile açılır ve ekran alanı verimli bir şekilde kullanılır. Alt menüye sahip menü öğeleri seçildiğinde, alt öğeler ayrıca listelenir.

Collapsed, Collapsible özelliğinden farklı olarak, menünün bulunduğu sayfada varsayılan olarak daraltılmış versiyonunun açılmasını sağlar.

Collapsed alanındaki anahtarı etkinleştirdiğinizde, menü tasarım ortamında da daraltılmış haliyle görüntülenir. Symbol Picker seçeneklerini kullanarak, bu işlemin dinamik olarak daralmasını veya genişlemesini sağlayabilirsiniz. Örneğin, ekranda belirli koşullarda görüntülenecek ek bir alan varsa, bu ek kolon açıldığında menü öğesini daraltarak görünür olan içeriğin son kullanıcılar tarafından daha rahat görüntülenmesini sağlayabilirsiniz.

Selected Key: Kullanıcının menüde hangi ekranı seçtiğini belirtmek için kullanılır. Örneğin, Elektronik kategorisi altında olan kategorilerden Akıllı telefona tıklandığında akıllı telefonun bulunduğu ekranın Selected Key değeri, seçilen ekranın kimliğini veya benzersiz bir anahtarını temsil eder. Symbol Picker ile ekran ile ilgili Key işlemlerini seçebilirsiniz.

Collapsible: Menu elementine, geliştirdiğiniz uygulamanın son kullanıcılarının menüyü genişletip daraltılabilmesini sağlayan bir buton ekleyebilirsiniz.

Collapsible anahtarını açtığınızda, menü öğelerinin alt kenarına bir ikon buton eklenir. Bu buton, son kullanıcılar tarafından menüyü daraltmak ve genişletmek için kullanılabilir.

Collapsed Button Color: Collapsible özelliği ile eklenen daralt/genişlet ikon butonunun rengini ayarlamanızı sağlar. Menu elementinin Collapsed butonu varsayılan olarak mavi renkte gelmektedir.