Evaluare utilizator: 0 / 5

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

Captura de mai jos ar putea uşor să deruteze: pare un program. Da, eu am un fişier EXE (vă amintesc că e cam mare, vreo 40MB, dat fiind că include WebKit-ul de care se foloseşte şi Chrome-ul) pe care îl lansez şi funcţionează ca un program pentru Windows. Are meniu tradiţional, are scurtături din taste… Dar în spate ne amintim că se află o pagină HTML ce prinde aripi cu JavaScript, în special cu node.js şi node-webkit. Proiectele web pot devenii aplicaţii pentru Windows sau Mac sau Linux!

image

Partea CSS e neschimbată. În partea HTML am scăpat de butoane acum că avem meniu. Ce contează este partea JavaScript pe care o şi pun mai jos. Funcţia construireMeniu() face ce spune numele :). M-am limitat la ceva simplu, dar în paranteză fie spus similar se poate crea şi un meniu contextual, care să fie apelat în aplicaţie cu click-dreapta! Am introdus opţiunea de fişier nou şi am făcut Notepad-ul ceva mai evoluat: în bara de titlu apare numele fişierului curent, iar dacă se face vreo modificare e semnalată cu o steluţă după titlu. Programul nu e perfect, pentru că de exemplu chiar şi plimbatul cu săgeţile prin text e calculat ca modificare. Dar din nou subliniez: scopul e didactic, nu de a face un Notepad şi a-l vinde. Mai remarcaţi şi partea cu scurtăturile din taste care nu ţine de node.js sau de node-webkit ci de JavaScript (de jQuery mai precis).

var numefisier="FărăNume";
var fisier="";
var modificat=false;
var fs = require('fs');

construireMeniu();
nou();

function construireMeniu(){
    var gui = require('nw.gui');
    var win = gui.Window.get();
    var menubar = new gui.Menu({ type: 'menubar' });
    menubar.append(new gui.MenuItem({ label: 'Fişier', submenu: new gui.Menu()}));
    menubar.items[0].submenu.append(new gui.MenuItem({
        label: 'Nou (Ctrl+N)',
        click: function () { nou(); }
    }));
    menubar.items[0].submenu.append(new gui.MenuItem({
        label: 'Deschide... (Ctrl+O)',
        click: function () { deschidere(); }
    }));
    menubar.items[0].submenu.append(new gui.MenuItem({
        label: 'Salvare (Ctrl+S)',
        click: function () { salvare(); }
    }));
    menubar.items[0].submenu.append(new gui.MenuItem({
        label: 'Salvare ca...',
        click: function () { salvareCa(); }
    }));
    menubar.items[0].submenu.append(new gui.MenuItem({
        type: 'separator'
    }));
    menubar.items[0].submenu.append(new gui.MenuItem({
        label: 'Închidere',
        click: function () { gui.Window.get().close(); }
    }));
    win.menu = menubar;
}

function nou(){
    if(!modificat || (modificat && confirm("Ignoraţi modificările făcute?"))){
        numefisier="FărăNume";
        $(document).attr('title', 'Notepad - '+numefisier);
        $("#textul").val("");
        modificat=false;
    }
}

function deschidere(){
    if(!modificat || (modificat && confirm("Ignoraţi modificările făcute?")))
        alegeFisier('#dialogDeschidere');
}

function salvare(){
	textul=problemaUTF($("#textul").val());
    if(numefisier=="FărăNume") alegeFisier('#dialogSalvare');
	else fs.writeFile(fisier,textul,{encoding: "utf8"});
    $(document).attr('title','Notepad - '+numefisier);
}

function salvareCa(){
	alegeFisier('#dialogSalvare');
}

function alegeFisier(tipdialog) {
    var alegator = $(tipdialog);
    alegator.change(function(evt) {
		fisier=$(this).val()
        numefisier=fisier.substr(fisier.lastIndexOf("\\")+1);
		if(tipdialog=="#dialogDeschidere"){
			fs.readFile(fisier, "utf-8", function (error, contents) {
				$("#textul").val(contents);
			});
        }
		else {
			textul=problemaUTF($("#textul").val());
			fs.writeFileSync(fisier,textul,{encoding: "utf8"});
		}
        $(document).attr('title', 'Notepad - '+numefisier);
        modificat=false;
    });
    alegator.trigger('click');  
}

$("#textul").on('change keyup paste',function(){
    if(!modificat) {
        $(document).attr('title',$(document).attr('title')+" *");
        modificat=true;
    }
});

$(document).keypress(function(event) {
    if(event.keyCode == 14 && event.ctrlKey)
        nou();
    else if(event.keyCode==15 && event.ctrlKey)
        deschidere();
    else if(event.which==19 && event.ctrlKey)
        salvare();
});

function problemaUTF(text){
    text=(0xFEFF==text.charCodeAt(0)?text.substring(1):text);
    text='\ufeff'+text;
    text=(0xFEFF==text.charCodeAt(0)?text.substring(1):text);
    return text;
}

Cred că în continuare, deşi a crescut ca număr de linii, codul este uşor de înţeles (tot e împachetat în această arhivă). Am văzut deci câteva lucruri pe care nu le-am putea face nativ cu JavaScript (meniuri, citire şi scriere locală de fişiere), dar cu node.js şi node-webkit se poate. Evident că lucrurile pot merge mai departe cu alte facilităţi, dar pe moment cred că mi-am atins scopul.

PS: Am revenit cu bucurie asupra codului pentru că am găsit un truc (e ultima funcţie) care rezolă salvarea şi cu versiunile 0.9.2, respectiv 0.8.6, nu doar cu 0.8.5. Am actualizat codul de mai sus şi arhiva zip.

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