Evaluare utilizator: 0 / 5

Steluță inactivăSteluță inactivăSteluță inactivăSteluță inactivăSteluță inactivă
 

Continuând articolele despre node-webkit vă propun acum să vedem o aplicaţie ceva mai serioasă. Evident tot copilăroasă dar bună ca demonstraţie. După cum ştiţi, o pagină web nu poate salva local un fişier (nu mă refer o pagină pe un server, salvând pe acel server, ci la salvarea pe calculator). Cu node-webkit această limitare este depăşită. De fapt cu node.js, care include funcţiile pe fişiere, în schimb node-webkit permiţând afişarea ferestrelor de dialog pentru deschidere/salvare (Open/Save).

image

Am să încep cu fişierul JSON unde nu sunt modificări majore faţă de ce am mai văzut. Apare însă de exemplu iconiţa care, atenţie, este doar pentru fereastră. Executabilul va avea iconiţa node-webkit, dar cu alte programe poate fi modificată. În rest avem un JSON… normal (relativ la cele discutate până acum).

{
  "name": "Notepad",
  "version": "0.0.1",
  "description": "O aplicaţie de test! Nu face mare lucru.",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "window": {
	"title": "Aplicatia mea!",
	"toolbar": false,
	"frame": true,
	"width": 700,
	"height": 400,
	"position": "center",
	"resizable": false,
	"icon": "img/pen.png"
  },
  "author": "Eu Însumi"
}

Acum să vedem partea HTML. Veţi observa că pentru rapiditate am inclus jQuery de la distanţă (remote), dar evident poate fi pus şi local şi atunci aplicaţia merge offline (cam aceasta era ideea, nu?). În rest pagina HTML nu are surprize: trei butoane pentru operaţiunile Deschidere, Salvare şi Salvare ca, plus un câmp mai mare de editare (textarea) pentru editorul propriu-zis. Ah, da, sunt liniile 15 şi 16 foarte importante. Documentaţia oficială o găsiţi aici: File dialogs. Cele două controale sunt ascunse, fiind utile în partea de programare. Observaţi că putem indica tipuri de fişiere, iar la salvare chiar şi un nume prestabilit.

<!DOCTYPE html>
<html>
<head>
  <title>Notepad</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/stil.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="/js/script.js"></script>
</head>
<body>
	<p align=center>
	<button onClick="javascript:deschidere();">Deschidere...</button>
	<button onClick="javascript:salvare();">Salvare</button>
	<button onClick="javascript:salvareCa();">Salvare ca...</button>
	<input style="display:none;" id="dialogDeschidere" type="file" accept=".txt" />
	<input style="display:none" id="dialogSalvare" type="file" nwsaveas="datele.txt" accept=".txt" />
	<textarea cols=80 rows=20 id="textul"></textarea>
	</p>
</body>
</html>

Partea CSS e irelevantă (doar o culoare pentru fundalul paginii) deci rămâne partea JS. Aici sper să vă impresioneze codul scurt. Important: se putea şi fără jQuery dar codul era ceva mai lung. Fiind fan jQuery am mers pe mâna lui, astfel că avem un cod destul de uşor de înţeles. Funcţia de deschidere trimite la o fereastră de dialog, iar după alegerea fişierului conţinutul este încărcat în controlul textarea. Funcţia pentru salvare sub un alt nume trimite tot la o fereastră de dialog, dar foloseşte numele returnat pentru a salva textul din textarea într-un fişier cu acel nume. Mai avem funcţia de salvare care verifică dacă am deschis vreun fişier până acum (dacă nu, nu poţi face salvare, doar salvare cu un nume indicat). Funcţiile oferite de node.js pentru scriere şi citire sunt detaliate aici: File System.

var fisier="invalid";
var fs = require('fs');

function deschidere(){
	alegeFisier('#dialogDeschidere');
}
function salvare(){
	text=""+$("#textul").val();
    if(fisier=="invalid") alert("Folosiţi Salvare ca..., nu Salvare");
	else fs.writeFile(fisier, text);
}
function salvareCa(){
	alegeFisier('#dialogSalvare');
}

function alegeFisier(tipdialog) {
    var alegator = $(tipdialog);
    alegator.change(function(evt) {
		fisier=$(this).val()
		if(tipdialog=="#dialogDeschidere")
			fs.readFile(fisier, "utf-8", function (error, contents) {
				$("#textul").val(contents);
			});
		else
			fs.writeFile(fisier,$("#textul").val());
    });
    alegator.trigger('click');  
}

Atât! De reţinut că acest Notepad este primitiv. Nu face verificări dacă am deschis un altfel de fişier decât text. Nu indică fişierul deschis (ar trebui să schimbăm în bara de titlu). Nu arată că avem fişier nesalvat (în principiu tot în bara de titlu ar trebui o steluţă). Nu merge din taste. Nu are meniu, ci nişte butoane. Se pot comenta multe lucruri :). Dar de reţinut este că l-am făcut cu JavaScript! Evident, plus node.js şi node-webkit. De dragul învăţării în următoarea versiune îi vom pune un meniu… poate şi alte îmbunătăţiri. Dar acum am vrut să avem un exemplu curat. Pun toate fişierele şi ca arhivă. Dacă îi schimbaţi extensia în nw o puteţi testa singuri cu node-webkit!

Important: din motive de buguri merge sigur cu versiunea 0.8.5 dar nu cu 0.9.2. A apărut între timp 0.8.6 dar nu merge. Personal cred că 0.8.6 şi 0.9.2 au nişte buguri la salvarea fişierelor. Repet: cu 0.8.5 merge fără probleme. Revenire: în articolul următor am inclus o soluţie la această problemă. Practic înainte de salvare trebuie aplicată o funcţie pe datele de salvat.

Read more http://feedproxy.google.com/~r/cnetro/~3/ozIZiwyj7MM/