5 Nisan 2016 Salı

Alpaca ile Dinamik(Dynamic) Form Oluşturma

Merhaba bu yazımda size alpacajs den bahsedeceğim. Bazı projelerde form elementlerini statik olarak koda gömmek yerine elinizdeki Json data ya göre bu form içeriğini de güncellemek istersiniz. İşte bu durumlarda  alpacajs sizlere kolay bir çözüm sunmakta. 
 Siz formun nereye geleceğini ve hangi elemanlardan oluşacağını JSON formatında alpaca'ya veriyorsunuz o  sizin yerinize formu oluşturuyor. Nasıl  diyorsanız yazının devamını inceleyin.. 
Alpaca Jquery ve bootstrap tabanlı bir proje olduğu için öncelikle jquery ve bootstrap bağımlılıklarını projenize ekleyin. 

1-) Bootstrap ve Jquery dependency lerini sayfaya eke   
<!-- dependencies (jquery, handlebars and bootstrap) --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js" ></script> 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> 

<link type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 

<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 


2-) Alpaca'yı da aynı şekilde sayfaya ekle. 
<!-- alpaca --> 
<link type="text/css" href="http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet"/> 
         
<script type="text/javascript" src="http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js"></script> 

3) body tagları arasında html form'un oluşturulacağı(çıktı) bir alan belirle. Form içeriği buraya gelecek.
 <div id="form1"></div> 

Burada oluşturacağımız form "form1" id sine sahip DIV'in içerisinde olacak. 

4-) Html formun içinde oluşturmak istediğimiz elementleri JSON formatında ekliyoruz. 
            "schema": { 
                         "title": "Sample Alpaca Form1", 
                         "type": "object", 
                         "properties": { 
                              "name": { 
                                   "type": "integer", 
                                   "title": "İsim" 
                              }, 
                              "age": { 
                                   "type": "integer", 
                                   "title": "Yaş" 
                              } 
                              
                         } 
                   } 
"JSON" fomatında "Schema" objesini oluşturduk içinde yaş ve isim gireceğimiz html elementlerini tanımladık. Bu elementlerin tipini belirttik(integer,string). 

5-)  Form1'de html çıktısı almak için Alpaca'yı çağırıp Json datayı bu fonksiyona  input olarak veriyoruz 
<script type="text/javascript"> 
$("#form1").alpaca({ 
               "schema": {  
                         "title": "Sample Alpaca Form1",  
                         "type": "object",  
                         "properties": {  
                              "name": {  
                                   "type": "integer",  
                                   "title": "isim 
                              },  
                              "age": {  
                                   "type": "integer",  
                                   "title": "Yaş 
                              }  
                               
                         }  
                   }     
     
}); 
</script> 


Yukarıki işlemleri uyguladığımızda alapacajs belirttiğiniz JSON içindeki elementleri sizin yerinize  oluşturacaktır.  

6-) bazı önemli property ler aşağıdadır: 
                            "name": {//input[type='text'] 
                                "type":"string", 
                                "title":"Name" 
                            }, 
 
                            "ranking": {//radio group 
                                "type":"string", 
                                "title":"Ranking", 
                                "enum":['excellent','ok','so so'] 
                            }, 
 
                           "feedback" : {//Textarea 
                                "type": "textarea", 
                                "rows": 5, 
                                "cols": 40, 
                                "helper": "Please enter your feedback." 
                            }, 

                            "ranking": {//listbox(select option) 
                                "type": "select", 
                                "helper": "Select your ranking.", 
                                "optionLabels": ["Awesome!", "It's Ok", "Hmm..."] 
                            }, 
 
                            "name": {//required(input[type='text'])  
                                "type":"string", 
                                "title":"Name", 
                                "required":true 
                            }, 
 
                            "name": {//max character(input[type='text']) 
                                "size": 20, 
                                "helper": "Please enter your name." 
                            }, 


Kaynak: