..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.

====== Taffydb e pobNode ======
Autore: **//Fabio Di Matteo//** \\ Ultima revisione: **//04/05/2016  - 13:04//** \\ \\

{{:programmazione:javascript:poblayout.png?650|}} \\
In questo articolo usero' il database per javascript [[http://www.taffydb.com/|Taffydb]] in combinazione con [[https://github.com/pobfdm/pobnode|PobNode]] una libreria per creare e interagire con gli elementi del DOM di una pagina.

===== Codice =====
Creeremo una sorta di rubrica telefonica minimale, insomma un hello world. \\ \\

**index.html**
<code javascript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<script src="../pobNode/examples/jquery-2.2.3.min.js"></script>
		<script src="../pobNode/pobNode.js"></script>
		<script src="../pobNode/pobLayout.js"></script>
		<script src="taffy.js"></script> 
		<style>
		.headerClass{
				background-color:  #023276;
				background: linear-gradient(#023276, #2258DA);
			}
			
			.leftSideClass{
				background-color:  #BFBFBF;
			}
		</style>
		<title>Taffy and pobNode</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<script>
		
		$(document).ready(function () {
			
			//make database
			var myDB = TAFFY();
			myDB.store('myDBtest') ; //save in localstorage "taffy_myDBtest" key
			
			myLayout=new pobLayout();
			myLayout.headerClass='headerClass';
			myLayout.leftSidebarClass='leftSideClass';
			myLayout.leftSideWidth=150;
			myLayout.border='2px Solid #023276';
			myLayout.label='<span style="font-size: 24px;padding-left:3px; color: #FFFFFF">Taffy test</span>';
			myLayout.append('<h2 style="margin-left:10px">Pobnode and Taffy</h2>');
			myLayout.append('<p style="margin-left:10px">I\'m trying to get work taffy width pobNode</p>');
			myLayout.appendLeftSidebar('<h2 style="margin:5px;">Info</h2>');
			myLayout.appendLeftSidebar('<p  style="margin:5px;font-size: 10px">You can remove entire database clicking this button:</p>');
			myLayout.attach('body');
			
			myName = new pobNode('input');
			myName.addAttr('placeholder','Name');
			myName.style='margin-left: 10px; margin-right: 10px';
			myName.attach(myLayout.jqBody);
			
			myTel = new pobNode('input');
			myTel.addAttr('placeholder','telephone number');
			myTel.style='margin-left: 10px; margin-right: 10px';
			myTel.attach(myLayout.jqBody);
			
			myEmail = new pobNode('input');
			myEmail.addAttr('placeholder','E-Mail addres');
			myEmail.style='margin-left: 10px; margin-right: 10px';
			myEmail.attach(myLayout.jqBody);
			
			mySave = new pobNode('button');
			mySave.setHtml('Save');
			mySave.attach(myLayout.jqBody);
			
			myCount = new pobNode('p');
			myCount.style='color: #00115E;font-size: 20px;margin-left: 10px';
			myCount.setHtml('Counter record: 0');
			myCount.attach(myLayout.jqBody);
			
			myList = new pobNode('p');
			myList.style='margin-left: 10px; margin-right: 10px';
			myList.attach(myLayout.jqBody);
			
			
			//Display record on startup
			myDB().each(function (r) {myList.jq.append(r.name+' '+r.tel+' '+r.email+'<br>');});
			var c = myDB().count();
			myCount.jq.html('Counter record: '+c);
			
			//On click insert a record and show results
			mySave.jq.bind('click',function(){ 
					//Insert a record in table
					myDB.insert({name: myName.jq.val(), tel: myTel.jq.val(), email: myEmail.jq.val() });
					
					myList.jq.empty();//empty my list
					myDB().each(function (r) {	
							myList.jq.append(r.name+' '+r.tel+' '+r.email+'<br>');	
						});
					var c = myDB().count();
					myCount.jq.html('Counter record: '+c);
					
				});
				
			//Empty db
			myRemoveDB = new pobNode('button');
			myRemoveDB.setHtml('Remove Db');
			myRemoveDB.attach(myLayout.jqLeftSidebar);
			myRemoveDB.jq.bind('click',function(){ 
				myDB().remove();//empty db
				localStorage.removeItem('taffy_myDBtest'); //remove localstorage
				
				//Update list of record
				myList.jq.empty();
				var c = myDB().count();
				myCount.jq.html('Counter record: '+c);
				});	
		});
		
		</script>
	
	</head>
	<body>
		
	</body>
				
</html>


</code>
===== Elencare tutte le chiavi localstorage create =====
Per conoscere quante e quali chiavi localstorage sono state create per la nostra pagina si puo' fare uso del seguente codice:
<code javascript>
for (var key in localStorage)
{
  console.log(key)
}
</code>

..::Freemedialab::.. «Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

..::Freemedialab::..

Strumenti Utente

Strumenti Sito

Strumenti Pagina

..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»