Card Kullanımı

Reactstrapt v4 kullanarak Card listeleleyen sayfa

Bu örnekte Reactstrap kullanılmaktadır.

İlk önce kart tasarlayıp sonra kartı listeleyen Component yapmak istiyorum. Soldaki menüden "Web UI" -> "Cards" kısmını tıkladıktan sonra "+" butonuna tıklayarak kart tanımı ekleyebilirsiniz. Ve aşağıdaki gösterildiği gibi tanımı yapmanız gerekmekte.

Eğer ek alanlarınız bulunuyorsa ve tasarım yapmak isterseniz reactstrap kart dokümantasyona bakabilirsiniz. Bazı tanımlara _(Reactstrap.CardTitle,{},"title") şeklinde kullanabilirsiniz. Ek bilgi almak için buraya tıklayın

TodoCard

Tanım sonrası "save" butonuna tıklayın ve üst menüden "New Editor" -> "Frontend Sandbox" tıklayalım. Yeni açılan pencerede Sol "Cards" tanımından "TodoCard" tanımını üzerine tıklayıp açılan pencereden kodları kopyalayalım ve Frontend Sandbox'daki kod kısmına yapıştıralım.

Tek "Card" gösterme tanımı bulunmakta ve bu tanımı kullanarak CardListe Component oluşturalım. Burada dikkat etmemiz gereken bu Componentin state olarak "todos" listesini tutması ve Class Component olması.

Bu yöntemi kullanarak CardTodo tanımı eklenmesi tanımı statik yapar, yani ileri zamanda kart tanımına yenileme yapıldığında dinamik olarak almaz. Sistemin dinamik olarak eklemesi için bu tanımı silip kayıt yapılan sayfanın "Page Objects" kısımına tanım yapılabilir.

....
class CardListe extends React.Component {
constructor(props) {
super(props)
this.state = { todos: [] }
}
render() {
return this.state.todos.map(this.props.render)
}
}
return _(CardListe, CardTodo)

Yukarıda gördüğünüz gibi _(CardListe, CardTodo) olarak kullanılmakta ve CardTodo bir JavaScript Objesi olduğunu unutmayalım. Ve objenin içindeki parametrelere CardListe içinde this.props.parametre_ismi olarak ulaşılabilir.

Çalışması için son bir eklenti state'e serverden veri getiren bir metod yazılması ve onun çalıştırılması.

class CardListe extends React.Component {
constructor(props) {
super(props)
this.state = { todos: [] }
/** metod tanım */
this.getData = () => {
iwb.ajax.query(6051, null, (res) => {
this.setState({ todos: res.data })
})
}
/** Tanım Çalıştırılması */
this.getData()
}
render() {
return this.state.todos.map(this.props.render)
}
}

iwb.ajax.query(queryId, queryParametre, (res)=>{ /** işlem sonu çalışan metodu */ }) - Query ID'sini "Data Sources" -> "Queries" kısmından bulabilirsiniz.

Son Code
var CardTodo = {
cardId: 592, name: 'CardTodo',
_url: 'ajaxQueryData?.w=' + _webPageId + '&_qid=6051&_dvid=592',
defaultWidth: 350,
render(props) {
console.log(props)
return _(Card, {},
_(CardBody, {},
_('div', {}, props.todo)
)
);
}
}
class CardListe extends React.Component {
constructor(props) {
super(props)
this.state = { todos: [] }
this.getData = () => {
iwb.ajax.query(6051, null, (res) => {
this.setState({ todos: res.data })
})
}
this.getData()
}
render() {
return this.state.todos.map(this.props.render)
}
}
return _(CardListe, CardTodo)

"Save" tıklayıp ismini vererek sayfayı kayıt edelim. Sonraki adım kayıt yapılan sayfaya navigasyon linki eklemek olur. Kayıt yapılan sayfayı "WebUİ" -> "Pages" kısmından bulup, üzerine sağ tıklayıp menüye dönüştür butonu tıkayalım.

Sayfa navigasyon tanımı yapıldıktan sonra "Cache " temizledikten sonra "Application Menu" altında Link görebilirsiniz.