Bu öğrenme içeriğinde, hazırladığımız mobil ekran tasarımlarına, oluşturduğumuz aksiyonları ve sistem aksiyonlarını bağlayarak mobil uygulamamıza fonksiyon kazandıracağız.
Hazırladığımız mobil ekran tasarımlarına, oluşturduğumuz aksiyonları ve sistem aksiyonlarını bağlayarak mobil uygulamamıza fonksiyon kazandıralım.
İlk olarak Dashboard ekranla başlayalım.
Dashboard ekranda veri bağlama işlemine ilk olarak Header'da bulunan Logout ikonu ile başlayalım. Header'da yer alan Logout ikonunu seçin. Properties paneli aracılığıyla Authorization aksiyonlar içerisinde yer alan Logout aksiyonunu ekleyin.
Ekranda boş bir yere tıklayın.
Ekran her açıldığında toplam personel sayısını, toplam departman sayısını ve son eklenen personellerin listesini çekmek için Initial Action’lar ekleyelim.
Sırasıyla başlayalım.
Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → TotalEmployee adımlarını gerçekleştirerek toplam personel sayısını sağlayacak aksiyonu ekleyin.
Ardından ADD ACTION → Initial Actions → Custom → ManagedDB → TotalDepartment adımlarını gerçekleştirerek toplam departman sayısını getirecek aksiyonu ekleyin.
Son olarak yine Properties paneli aracılığıyla SelectEmployeebyDate aksiyonunu Initial aksiyon olarak ekleyin.
Şimdi Eklediğimiz bu aksiyonları ilgili alanlara bağlayalım.
Toplam toplam personel sayısının yazacağı Label'i seçin. Ardından Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın ve aksiyon sonucunda dönen ilgili seçimi yapın. Design Plascholder alanından geçici bir değer girin. Bu değer sadece tasarım yaparken karışık görüntüyü ortadan kaldırmak için geçerli olacaktır.
İkinci adımda toplam departman sayısının yazacağı Label'i seçin. Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın ve ilgili seçimi yapın. Design Placeholder alanından geçici bir değer girin.
Dashboard ekranda yer alan ve son eklenen personellerin listelenmesini sağlayacak aksiyonu bağlayalım.
Ekranda yer alan Table elementini seçin ve Properties panelinde Datasource olarak SelectEmployeebyDate aksiyonunu seçin.
Table elementinin ilk sütünunda yer alan Image elementini seçin ve Properties panelinde value → Field to display → employeeImage seçimini yapın.
İkincü sütunda yer alan Label’i seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Departman adının yazacağı Label’i seçin ve Properties panelinde value → Field to display → DepartmentName seçimini yapın.
Table elementinin son kolonunda yer alan Icon elementini seçin ve EmployeeDetail ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Uygulama içinde navigasyonu sağlayacak Tabbar ile devam edelim.
Dashboard ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Properties panelini kullanarak, Dashboard ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Employee List ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Navigate aksiyonu aracılığıyla List ekranına yönlendirmeyi sağlayın.
Son olarak Profile ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Profile ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Dashboard ekranını tamamladık.
Personellerin listelendiği listeleme ekranını açalım.
Header'da yer alan Logout ikonunu seçin. Properties paneli aracılığıyla Authorization aksiyonlar içerisinde yer alan Logout aksiyonunu ekleyin.
Liste ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebySearch seçimini yapın.
Ardından SelectEmployeebySearch aksiyonu altında yer alan SearchFor yanında bulunan Symbol Picker'a tıklayın. Components → TextInput1 → Value seçimini gerçekleştirin.
Bu işlem Employee List ekranı her açıldığında listeleme işlevini sağlayacak aksiyonu çalıştıracaktır. SearchFor parametresi ise TextInput'da yer alan değere göre listelemeyi filtreleyecektir.
Ekranda yer alan TextInput elementini seçin. Properties paneli aracılığıyla ADD ACTION → onChange → Actions → Custom → ManagedDB → SelectEmployeebySearch seçimini yapın.
SearchFor parametresi yanında bulunan Symbol Picker'a tıklayın ve ardından Components → TextInput1 → Value seçimini gerçekleştirin. Böylelikle TextInput elementine değer girdikçe listeleme ekranında filtreleme sağlanacaktır.
Ardından listeleme işlevini sağlayacak Table elementini seçin.
Properties panelinde, Datasource aracılığıyla SelectEmployeebySearch aksiyonunu seçin.
Table elementinin ilk sütünunda yer alan Image elementini seçin ve Properties panelinde value → Field to display → employeeImage seçimini yapın.
İkincü sütunda yer alan Label’i seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Departman adının yazacağı Label’i seçin ve Properties panelinde value → Field to display → DepartmentName seçimini yapın.
Table elementinin son kolonunda yer alan Icon elementini seçin ve EmployeeDetail ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Uygulama içinde navigasyonu sağlayacak Tabbar ile devam edelim.
Dashboard ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Properties panelini kullanarak, Dashboard ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Employee List ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Navigate aksiyonu aracılığıyla List ekranına yönlendirmeyi sağlayın.
Son olarak Profile ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Profile ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Bu işlemlerle Liste ekranında veri bağlamayı tamamladık.
Employee Detail ekranını açın.
Ekranda yer alan ok ikonuna bir önceki ekran dönüşü sağlayan aksiyonu ekleyin. Header’da yer alan ikonu seçin. Properties panelini kullanarak Add Action>Navigation>GoBack seçimini yapın.
Detay ekranında, personelin detay bilgilerini çekmek için gereken aksiyonları ekleyelim.
Ekranda boş bir yere tıklayın. Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyID seçimini yapın.
Properties panelinde bulunan ADD SCREEN INPUT'a tıklayın. Screen Input adını detail olarak belirleyip, Screen Input tipini Guid olarak seçerek Create'e tıklayın.
Ardından Initial Action olarak eklediğiniz SelectEmployeebyID aksiyonu altında yer alan ID parametresi yanındaki Symbol Picker aracılığıyla Screen Inputs>detail seçimini yapın.
Şimdi personel detay ekranına yönlendirme sağlayan Dashboard ve listeleme ekranlarına dönelim ve Screen Input parametresini tanımlayalım.
Dashboard ekranını açın. Tablonun son sütununda bulunan ikonu seçin. Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin. detail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın.
Daha sonra diğer bir ekran olan List ekranını açın. Tabloda yer alan ikonu seçin ve Navigate aksiyonunu genişletin. Detail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın.
Şimdi tekrardan personel detay ekranına dönelim ve veri bağlama işlemlerini gerçekleştirelim.
İlk olarak ekranda yer alan Image elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Bir sonraki adımda personel isminin yazacağı Label elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → FullName seçimini yapın.
Benzer şekilde ekranda yer alan diğer Label elementleri için SelectEmployeebyID aksiyonu altından
DepartmentName
TitleName
phoneNumber
BirthdayDate
Seçimlerini yapın
İşte bu kadar!
Bu işlemlerle birlikte personel detay ekranında veri bağlamayı tamamladık.
Son olarak Profile ekranında veri bağlama işlemlerini yürütelim.
Header' da yer alan Logout ikonunu seçin. Properties paneli aracılığıyla Authorization aksiyonlar içerisinde yer alan Logout aksiyonunu ekleyin.
Profile ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectProfile seçimini yapın.
Şimdi bu aksiyonu ekranda ilgili yerlere bağlayalım.
Ekranda yer alan Image elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Benzer şekilde ekranda yer alan diğer Label elementlerini için SelectEmployeebyID aksiyonu altından
FullName
DepartmentName
TitleName
phoneNumber
BirthdayDate
Seçimlerini yapın.
Tabbar ile devam edelim.
Dashboard ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Properties panelini kullanarak, Dashboard ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Employee List ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Navigate aksiyonu aracılığıyla List ekranına yönlendirmeyi sağlayın.
Son olarak Profile ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Profile ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Bu öğrenme içeriğinde, hazırladığımız mobil ekran tasarımlarına, oluşturduğumuz aksiyonları ve sistem aksiyonlarını bağlayarak mobil uygulamamıza fonksiyon kazandıracağız.
Hazırladığımız mobil ekran tasarımlarına, oluşturduğumuz aksiyonları ve sistem aksiyonlarını bağlayarak mobil uygulamamıza fonksiyon kazandıralım.
İlk olarak Dashboard ekranla başlayalım.
Dashboard ekranda veri bağlama işlemine ilk olarak Header'da bulunan Logout ikonu ile başlayalım. Header'da yer alan Logout ikonunu seçin. Properties paneli aracılığıyla Authorization aksiyonlar içerisinde yer alan Logout aksiyonunu ekleyin.
Ekranda boş bir yere tıklayın.
Ekran her açıldığında toplam personel sayısını, toplam departman sayısını ve son eklenen personellerin listesini çekmek için Initial Action’lar ekleyelim.
Sırasıyla başlayalım.
Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → TotalEmployee adımlarını gerçekleştirerek toplam personel sayısını sağlayacak aksiyonu ekleyin.
Ardından ADD ACTION → Initial Actions → Custom → ManagedDB → TotalDepartment adımlarını gerçekleştirerek toplam departman sayısını getirecek aksiyonu ekleyin.
Son olarak yine Properties paneli aracılığıyla SelectEmployeebyDate aksiyonunu Initial aksiyon olarak ekleyin.
Şimdi Eklediğimiz bu aksiyonları ilgili alanlara bağlayalım.
Toplam toplam personel sayısının yazacağı Label'i seçin. Ardından Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın ve aksiyon sonucunda dönen ilgili seçimi yapın. Design Plascholder alanından geçici bir değer girin. Bu değer sadece tasarım yaparken karışık görüntüyü ortadan kaldırmak için geçerli olacaktır.
İkinci adımda toplam departman sayısının yazacağı Label'i seçin. Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın ve ilgili seçimi yapın. Design Placeholder alanından geçici bir değer girin.
Dashboard ekranda yer alan ve son eklenen personellerin listelenmesini sağlayacak aksiyonu bağlayalım.
Ekranda yer alan Table elementini seçin ve Properties panelinde Datasource olarak SelectEmployeebyDate aksiyonunu seçin.
Table elementinin ilk sütünunda yer alan Image elementini seçin ve Properties panelinde value → Field to display → employeeImage seçimini yapın.
İkincü sütunda yer alan Label’i seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Departman adının yazacağı Label’i seçin ve Properties panelinde value → Field to display → DepartmentName seçimini yapın.
Table elementinin son kolonunda yer alan Icon elementini seçin ve EmployeeDetail ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Uygulama içinde navigasyonu sağlayacak Tabbar ile devam edelim.
Dashboard ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Properties panelini kullanarak, Dashboard ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Employee List ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Navigate aksiyonu aracılığıyla List ekranına yönlendirmeyi sağlayın.
Son olarak Profile ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Profile ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Dashboard ekranını tamamladık.
Personellerin listelendiği listeleme ekranını açalım.
Header'da yer alan Logout ikonunu seçin. Properties paneli aracılığıyla Authorization aksiyonlar içerisinde yer alan Logout aksiyonunu ekleyin.
Liste ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebySearch seçimini yapın.
Ardından SelectEmployeebySearch aksiyonu altında yer alan SearchFor yanında bulunan Symbol Picker'a tıklayın. Components → TextInput1 → Value seçimini gerçekleştirin.
Bu işlem Employee List ekranı her açıldığında listeleme işlevini sağlayacak aksiyonu çalıştıracaktır. SearchFor parametresi ise TextInput'da yer alan değere göre listelemeyi filtreleyecektir.
Ekranda yer alan TextInput elementini seçin. Properties paneli aracılığıyla ADD ACTION → onChange → Actions → Custom → ManagedDB → SelectEmployeebySearch seçimini yapın.
SearchFor parametresi yanında bulunan Symbol Picker'a tıklayın ve ardından Components → TextInput1 → Value seçimini gerçekleştirin. Böylelikle TextInput elementine değer girdikçe listeleme ekranında filtreleme sağlanacaktır.
Ardından listeleme işlevini sağlayacak Table elementini seçin.
Properties panelinde, Datasource aracılığıyla SelectEmployeebySearch aksiyonunu seçin.
Table elementinin ilk sütünunda yer alan Image elementini seçin ve Properties panelinde value → Field to display → employeeImage seçimini yapın.
İkincü sütunda yer alan Label’i seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Departman adının yazacağı Label’i seçin ve Properties panelinde value → Field to display → DepartmentName seçimini yapın.
Table elementinin son kolonunda yer alan Icon elementini seçin ve EmployeeDetail ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Uygulama içinde navigasyonu sağlayacak Tabbar ile devam edelim.
Dashboard ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Properties panelini kullanarak, Dashboard ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Employee List ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Navigate aksiyonu aracılığıyla List ekranına yönlendirmeyi sağlayın.
Son olarak Profile ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Profile ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Bu işlemlerle Liste ekranında veri bağlamayı tamamladık.
Employee Detail ekranını açın.
Ekranda yer alan ok ikonuna bir önceki ekran dönüşü sağlayan aksiyonu ekleyin. Header’da yer alan ikonu seçin. Properties panelini kullanarak Add Action>Navigation>GoBack seçimini yapın.
Detay ekranında, personelin detay bilgilerini çekmek için gereken aksiyonları ekleyelim.
Ekranda boş bir yere tıklayın. Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyID seçimini yapın.
Properties panelinde bulunan ADD SCREEN INPUT'a tıklayın. Screen Input adını detail olarak belirleyip, Screen Input tipini Guid olarak seçerek Create'e tıklayın.
Ardından Initial Action olarak eklediğiniz SelectEmployeebyID aksiyonu altında yer alan ID parametresi yanındaki Symbol Picker aracılığıyla Screen Inputs>detail seçimini yapın.
Şimdi personel detay ekranına yönlendirme sağlayan Dashboard ve listeleme ekranlarına dönelim ve Screen Input parametresini tanımlayalım.
Dashboard ekranını açın. Tablonun son sütununda bulunan ikonu seçin. Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin. detail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın.
Daha sonra diğer bir ekran olan List ekranını açın. Tabloda yer alan ikonu seçin ve Navigate aksiyonunu genişletin. Detail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın.
Şimdi tekrardan personel detay ekranına dönelim ve veri bağlama işlemlerini gerçekleştirelim.
İlk olarak ekranda yer alan Image elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Bir sonraki adımda personel isminin yazacağı Label elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → FullName seçimini yapın.
Benzer şekilde ekranda yer alan diğer Label elementleri için SelectEmployeebyID aksiyonu altından
DepartmentName
TitleName
phoneNumber
BirthdayDate
Seçimlerini yapın
İşte bu kadar!
Bu işlemlerle birlikte personel detay ekranında veri bağlamayı tamamladık.
Son olarak Profile ekranında veri bağlama işlemlerini yürütelim.
Header' da yer alan Logout ikonunu seçin. Properties paneli aracılığıyla Authorization aksiyonlar içerisinde yer alan Logout aksiyonunu ekleyin.
Profile ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectProfile seçimini yapın.
Şimdi bu aksiyonu ekranda ilgili yerlere bağlayalım.
Ekranda yer alan Image elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Benzer şekilde ekranda yer alan diğer Label elementlerini için SelectEmployeebyID aksiyonu altından
FullName
DepartmentName
TitleName
phoneNumber
BirthdayDate
Seçimlerini yapın.
Tabbar ile devam edelim.
Dashboard ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Properties panelini kullanarak, Dashboard ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
Employee List ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Navigate aksiyonu aracılığıyla List ekranına yönlendirmeyi sağlayın.
Son olarak Profile ikonunun ve metninin bulunduğu ebeveyn kolonu seçin. Profile ekranına yönlendirmeyi sağlayan Navigate aksiyonunu ekleyin.
