Menu
Menu elementi ile tanışın.
Menu elementleri, kullanıcıların uygulama içinde gezinmeyi kolaylaştırmak ve içeriklere erişim sağlamak için kullanılır. Bu elementler genellikle uygulamanın Header'ında veya yan panellerinde bulunur ve kullanıcılara farklı bölümlere geçiş yapma imkanı sunar. Kullanıcılar, Menüyü açarak farklı ekranlara geçiş yapabilir, içerikleri filtreleyebilir veya diğer ekranlar ile etkileşimleri gerçekleştirebilir.
Örneğin, menü elementini bir şirketin bütün uygulamalarını tek bir çatı altında toplamak için kullanabilirsiniz.
Menu elementi kısaca, uygulama içerisinde bulunan ekranların hiyerarşik olarak sınıflandırılmasına ve gezinim sağlamasına yardımcı olan elementtir.
Menu elementi, sadece web uygulamalarında desteklenmektedir.
Menu elementi, kullanıcı deneyimini iyileştirmek ve uygulama içerisindeki gezinmeyi daha kullanıcı dostu hale getirmek için önemli bir araçtır. Uygulama geliştirme sürecinde, Menünün tasarımı, içeriği ve işlevselliği dikkatlice düşünülmelidir.
1. Menu Elementini Ekleme
Menu elementini kullanabilmek için Elements panelinde Display kategorisinde bulunan Menu elementini seçip ekrana sürükle bırak ile kolaylıkla ekleyebilirsiniz.
Datasource görünüm modu içerisinde KMenu adında bir tablo yer almaktadır. Bu tablo ile birlikte ilerleyen günlerde Menü elementinin Default ekranları gelecektir. Kullanıcının isteğine bağlı olarak bu tablo kullanabilir.
2. Menu Elementini Master Screen içerisine Ekleme
Sol panelde Screens paneli içerisinde alt tarafta yer alan Master Screen yanında + ikonuna tıklayarak Master screen oluşturabilirsiniz. Oluşturulan Master Screen yapısına göre Menü elementinin görüntülenme yapısını ayarlamanız mümkündür. Örneğin, Sol tarafta Vertical Stack ,Header ve Footer yapısının olduğu Master screen’i seçelim.
Menü elementi, Vertical Stack (Left Menu) içerisine eklenirse, menü elementi sol kenara yaslanarak dikey olarak görüntülenmektedir. Ancak, Menü elementi Header veya Footer bölgesine eklenirse, menü elementi yatay bir şekilde görüntülenmektedir.
3. Menu Elementinin Properties Paneli
Menu Properties paneli, Menu elementine tıklayınca sağda açılan ve Menu elementinin özelliklerini, içeriklerini ayarlayabileceğiniz ve değiştirebildiğiniz paneldir. Panel içerisinde Select a Data Type, Options, Theme, Primary Color, Collapsed, Selected Key, Authorization, Visibility gibi özellikler yer almaktadır.
3.1. Select Data Type:
Menu elementine verilerin, Static veya Dynamic olarak bağlantı ayarlarının seçildiği alandır.
Selectbox içerisinden yapılan seçim doğrultusunda Properties paneli farklılaşmaktadır.
Static seçildiğinde manuel olarak yapı oluşturulacağından dolayı +Add Sub Menu ve +Add Menu Item ile ilgili alan gelmektedir.
Menu elementi içerisine, +Add Sub Menu’ye tıklayarak alt Menuler ekleyebilir, +Add Menu Item alanına tıklayarak da Menu öğeleri ekleyebilirsiniz.
Menu elementi içerisinde yer alan Sub Menu veya Menu Item’a tıklayarak Properties panelinde yer alan Label alanı içerisinden isimlendirme yapabilirsiniz.
Select a Data Type Dynamic seçili iken, Static seçim otomatik olarak kaybolmaktadır. Dynamic olarak Menu elementine verilerin gelmesi için Datasource içerisinde veri tablosunun yer alması gerekmektedir.
Örneğin, test Menu adında içerisinde Icon, Id, Link, ParentId, Title kolonlarına sahip veri tablosu oluşturalım.
Bu tabloyu çalıştığımız ekran içerisine çağırmak için Sol panelde yer alan Custom Actions paneli içerisinde SQL Actions oluşturmanız gerekmektedir.
Oluşturduğunuz SQL Actions’ı getMenu şeklinde isimlendirdikten sonra sol panelden tabloyu seçip sağ tıklayınca açılan listeden Add Select Query’ye tıklayarak içerisinde
SELECT * FROM testMenu sorgusunun yer aldığı SQL Action’ı 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.
Ardından Dynamic seçili olacak şekilde Properties paneli içerisinden Options alanına gelin. Selectbox içerisinden getMenu’yü seçin.
3.2.Options: Options alanını bağlantısını sağladığınız tabloya göre doldurun.
Sub Menu ve Menu Item properties Paneli içerisinde Menu elementi properties panelinde yer alan özellikler dışında Icon alanı yer almaktadır.
Dynamic ve Static olarak ekleyebileceğiniz Menu Items ve Sub Menu’ ler içerisine kolaylıkla ikon ekleyebilirsiniz.
Dynamic olarak tablodan verileri çekmek gerekmektedir. Static olarak ikon eklemek için ikon eklemek istediğiniz alanı Menu elementi içerisine tıklayın. Açılan properties paneli içerisinden ikon alanına tıklayın. Eklemek istediğiniz ikonu seçin.
3.3.Mode
Menü elementinin ekran içerisinde görüntülenme ayarlarını Mode içerisinde yer alan Horizontal ve Vertical seçenekleri ile yapabilirsiniz.
Horizontal(Yatay) Mod:
Yatay modda menü element içerikleri 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.
Bu düzenleme, özellikle çok sayıda seçenek olduğunda tercih edilebilir, çünkü daha fazla öğeyi görüntülemek için yatay uzanım sağlar.
Vertical (Dikey) Mod:
Dikey modda menü elementleri üst üste sıralanır.
Genellikle sol veya sağ kenar panellerde veya menü çubuklarında kullanılır.
Bu düzenleme, sınırlı bir alan içinde daha fazla elementi 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.
3.4.Theme
Theme alanı Properties panelinde Menu elementinin tema renginin seçildiği alandır. Menu elementi ile ilgili Light ve Dark olmak üzere iki tema bulunmaktadır.
3.5. Primary Color
Menu elementine tıklayınca aktifleşen sekme renginin seçildiği alandır.
3.6. Collapsed
Menu elementinde bu özellik, bir açılır Menu’nün veya bir bölümün başlangıçta gizli veya daraltılmış bir durumda olup olmadığını belirtir.
Menu’yü daraltmak isterseniz Fixed Value alanından Switch’i aktifleştirmeniz gerekmektedir.
Uygulama başlatıldığında Menu elementinin nasıl görüntülenmesini istiyorsanız Symbol Picker aracılığı ile bir değer atayabilirsin.
3.7.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 etmektedir.
Symbol Picker ile ekran ile ilgili Key işlemlerini seçebilirsiniz.
3.8. Authorization
Menü elementi için yetkilendirme seçeneklerini kullanabilirsiniz. Menü elementi Authorization/Yetkilendirme işlemlerini yapabilmek için şu adımları izleyin:
Ekranda yer alan Menü'ye tıklayarak seçili hale getirin.
Properties panelini açın.
Authorization alanına tıklayın.
Uygulama ziyaretçisi ve/veya kullanıcılarına uygun olarak şu seçenekleri kullanabilirsiniz:
Uygulamaya giriş yapmış tüm kullanıcıların görüntülenmesini sağlamak için All Roles seçin.
Kullanıcı girişi yapmadan görüntülenmesini istiyorsanız (Element öncesinde ekranın da bu özelliğe sahip olması gerekir) Anonymous Access anahtarını açın.
Geliştirdiğiniz uygulamada tanımladığınız rollere özel olarak görüntülenmesini istiyorsanız kullanımın açılacağı rolleri seçin.
3.9. Visibility (Görünürlük)
Elementin görünürlüğünü yönetebilirsiniz. Her zaman görünür, gizlenir veya bir koşula bağlı olarak görünüp gizlenmesini sağlayabilirsiniz.
Menü elementinin Visibility ayarlarını yapmak için şu adımları izleyin:
Ekrandaki Menü'ye tıklayarak seçili hale getirin.
Properties panelini açın.
Visibility alanına tıklayarak uygulamanızın ihtiyacına göre aşağıdaki seçimlerden birini yapın:
Selectbox içerisinden Always visible ile her zaman görünür olmasını sağlarsınız.
Hidden ile elementi gizleyebilirsiniz.
Sometimes visible ile ekleyeceğiniz koşullar doğrultusunda görüntülenmesini sağlayabilirsiniz.
Yapmış olduğunuz seçim doğrultusunda Menü'nün görünürlüğü ayarlanmış olacaktır.
3.10. Actions
Element içerisinde veya ekran üzerinde +ADD ACTIONS’a tıklayarak Kuika’nın sunmuş olduğu sistem aksiyonlarını kolaylıkla ekleyebilirsiniz. Menü elementi ile ilgili Get All Menu Items ve Get Authorized Menu Items gibi aksiyonlar bulunmaktadır.
Last updated