/todos kaynağı

Önceki bölümde GET metodunu kullanarak grid'de /users kaynağından bilgileri listeledik. Bu bölümde JSONPlaceholder'in /todos kaynağının POST, PUT ve DELETE metodlarini kullanacağız.

Yeni REST isimli proje oluşturalım. Workspace'a geliyoruz ve New Project butonuna basıyoruz.

Frontend library olarak ExtJS 3.4 ve Main Page olarak ExtJS - IWB Theme seçiyoruz.

Projeyi oluşturduktan sonra projeyi VCS server ile bağlamak için butonuna basıyoruz. OK diyoruz ve REST proje isminin üzerine tıklayarak projeye geçiyoruz.

Temeller bölümünü okumuş farz ediyoruz, o yüzden bu noktadan sonra REST client ile ilgili temel şeyleri detaylı göstermeyceğiz. Hatırlamak için bir önceki bölüme bakabilirsiniz.

JSONPlaceholder servisi oluşturuyoruz.

ListTodos metodu ekliyoruz. Publish? özelliği aktif olması lazım unutmayın.

Metod oluşturduktan sonra Reload Cache yapıyoruz ve sonra parametreleri otomatik oluşturmak için burn butonuna basıyoruz.

Şimdi yeni bir todo ekleme metodunu oluşturalım. Call Method POST olacak ve send parametrelerin tipi json olacak.

GET (liste) metodun parametreleri gibi diğer metodların parametrelerini burn butonuyla otomatik oluşturamıyoruz. Elle tek tek oluşturmamız lazım. Ama manuel yapmayı da SAVE&NEW butonu ile kolaylıştırıyoruz.

Yeni parametre eklemek için artı butonuna basıyoruz. SAVE&NEW kullanarak listedeki gibi 3 tane parametre ekliyoruz

Kalem butonuna tıklayarak userId ve title'leri Not Null yapıyoruz ve completed'e 0 Default Value veriyoruz. Bu değişikleri kaydetmek için butonuna basıyoruz.

Bir tane todo getirmek böyle bir metod yazıyoruz. Bunun parametrelerini de manuel ekliyoruz.

Güncelleme metodunu da oluştutuyoruz. Call Method PUT ve metod linki de GetTodo gibi todos/${req.todoId} olacak. Parameteleri manuel oluşturuyoruz.

Silme metoduna parametre eklemeye gerek yok.

ListUsers metodu oluşturuyoruz ve parametrelerini burn butonuyla otomatik oluşturabiliriz.

Şimdi AddTodo ve UpdateTodo metodlarının formlarını oluşturacağız. Form oluşturmak için önce form template oluşturmamız lazım. Pages'a gidiyoruz ve wsForm isimli bir form template oluşturuyoruz. Kodu buradan alabilirsiniz: https://gist.github.com/icodebetter/f351f2780714964aee66794b655b972d

REST metodundan form oluşturmak için sağ tıklıyoruz, Convert sonra Service Method -> Form.

Render template olarak oluşturduğumuz wsForm'u seçiyoruz. Kaydettikten sonra form elemanlarını da oluşturalım.

ListUsers metodundan Lookup Query oluşturalım. Sağ tıklayarak Convert sonra Service Method -> Query. Sonra query alanları oluşturmak için burn butonuna basmaya unutmayalım.

Oluşturduğumuz lookup query'i formun userId alanının UI Component'i olarak seçiyoruz.

ListTodos metodundan query sonra query'den grid ve o grid'i page'e ekliyoruz (otomatik menü de). Bu adımları Temeller bölümünde gösteriyoruz.

ListTodos'tan oluşan query'nin userId kolonunun ayarlarını böyle değiştiriyoruz.

Grid'i de güzel görenmesi için order, width ve align ayaraları böyle değiştiriyoruz.

Şimdi Todos sayfamız böyledir.

Bu grid'e toolbar item arkalı AddTodo metodundan oluştuduğumuz formu ekleyeceğiz. Toolbar item eklemek için formu seçiyoruz, Toolbar Items'a geliyoruz ve artı butonuna tıklıyoruz.

openForm fonksiyonun ilk parametresi formun id'si ve ikkinci parametre ise yeni kayıt (2) formu veya güncelleme (1) formu olduğunu belirlemek için. 6463 bizim AddTodo formunun id'si.

iwb.ui.openForm(6463,2,{},a._grid ? a._grid._refreshGrid || a._grid : null);

Toolbar menu'ye artı butonu geldi. Bu forma girdiğiniz bilgiler AddTodo POST metodu ile JSONPlaceholder'a gönderiliyor.

AddTodo metodunda oluşturduğumuz gibi UpdateTodo metodundan da form oluşturuyoruz ve o formu tollbar menu'ya ekliyoruz.

var sel = getGridSel(a);
if(sel){
// ikinci parametre 1 çünkü bu güncelleme formu
iwb.ui.openForm(6480,1,{todoId:sel.id},a._grid ? a._grid._refreshGrid || a._grid : null);
}

Silme butonu da ekleyelim bizim toolbar menu'ya. DeleteTodo metodunu direk toolbar item'dan cağırıyoruz.

var sel = getGridSel(a);
if (sel && confirm('Are you sure?')) {
iwb.ajax.REST("JSONPlaceHolder.DeleteTodo", { todoId: sel.id }, ()=>{
Ext.infoMsg.msg('Success', 'Record Deleted');
a._grid.ds.reload();
});
}

Sonuç olarak, toolbar menüsüne REST metodları ile çalışan yeni kayıt açma, güncelleme ve silme yapabilen butonlar ekledik.