O Plasma tem um interpretador JavaScript embutido (também c0nhecido como ECMAScript, e frequentemente referenciado como um QtScript no contexto do Qt) que permite escrever plasmoids sem depender de componentes externos.

Nesse tutorial cobriremos a criação de plasmoids simples com Javascript, também conhecido como QtScript ou ECMAScript, que fornecem widgets para o Plasma.
Usar o JavaScript não requer nenhuma dependência externa, já que a biblioteca Qt possui seu próprio interpretador da linguagem. No KDe 4.3, o engine de JavaScript do Plasma é parte de kdebase-runtime, e assim pode ser usado em qualquer aplicação baseada no Plasma, não somente no Plasma Desktop.

Obtendo dados

O Plasma possui um mecanismo de abstração de dados chamado DataEngine. Você pode chamar o DataEngine por nome, requisitar uma fonte dele (novamente, pelo nome) e obter dados de volta, seja em intervalos regulares ou assim que for atualizado pelo DataEngine internamente. O dado é um mapa (que é o mesmo que um objeto em JavaScript) de chaves string para dados.
No exemplo abaixo, nós pegaremos a hora local do mecanismo de hora.

Script principal

Nosso arquivo contents/code/main.js terá o seguinte conteudo:

layout = new LinearLayout(plasmoid);
 
label = new Label();
layout.addItem(label);
 
plasmoid.dataUpdated = function(name, data) {
	label.text = data.Time;
}
 
dataEngine("time").connectSource("Local", plasmoid, 500);

Existem duas coisas novas nesse plasmoid. Nós tivemos que implmentar o plasmoid.dataUpdated e conecta-lo à fonte do macanismo de dados.
Se você conectar uma fonte de dados a um object, quando houver uma atualização para essa fonte o metódo object.dataUpdated é chamado com dois argumentos: o nome da fonte e um mapa contendo os dados fornecidos pela fonte.
Nesse caso, o plasmoid.dataUpdated é chamado com “Local” no primeiro argumento e o objeto seguinte como segundo argumento:

{
    Timezone_Continent: 'Europe',
    Offset: 3600,
    Timezone: 'Europe/London',
    Time: new Date('Sun May 17 20:06:20 2009 GMT+0100'),
    Timezone_City: 'Guernsey'
}

A última linha do script concretiza a conexão atual. Nós selecionamos o mecanismo de dados “time” e requisitamos a fonte “Local” dele, que fornece a hora local. Nós dizemos para ele se conectar ao objeto plasmoid e forçamos uma atualização a cada 500ms (a cada meio segundo).
Se nós deixássemos o último parâmetro como connectSource (isto é, não fornecendo um intervalo de atualização), então a fonte de dados deveser atualizada quando existir novo data disponivel. Isso não faz sentido para um relógio, onde o tempo está continuamente mudando, então não conseguiremos nenhum update se isso for feito. Todavia, existem outros mecanismos de dados (como o mecanismo “soliddevice”) onde você apenas quer ser notificado quando alguma coisa mudar, e nesse caso você não deve usar um intervalo de atualização.

Conectando Engines a Interface do Plama

Vários elementos de interface do Plasma suportam a conexão de DataEngine diretamente a eles. Eles incluem:

Label
Meter
TextEdit

Com esses widgets, alguem pode simplesmente direcionar o DataEngine para atualizar o widget diretamente e exibirá os dados. Então, em nosso exemplo, nós poderiamos fazer algo assim:

layout = new LinearLayout(plasmoid);
 
label = new Label();
layout.addItem(label);
 
dataEngine("time").connectSource("Local", label, 500);

Mesmo que isso não seja tão flexivel quanto implementar o plasmoid.dataUpdated, pode ser uma técnica útil.

Dica: plasmaengineexplorer

Para saber quais mecanismos estão disponíveis e que recursos eles fornecem, execute

plasmaengineexplorer

Você pode escolher qualquer um dos mecanismos instalados e requisitar uma fonte de dados, incluindo a configuração de um intervalo de atualização. Lembre-se somente de que quando você ler dados em JavaScript, os espaços nas chaves fornecidas pelas fontes de dados são trocadas por sublinhados. Assim cada fonte de dados do mecanismo “time” fornece uma chave “Timezone Continent”, mas em JavaScript elas devem ser acessadas como
data.Timezone_Continent or data["Timezone_Continent"].

Now Playing

Aqui mostraremos algumas técnicas mais avançadas para lidar com mecanismos de dados, além de lhe fornecer no fim um plasmoid útil para exibir informações personalizadas sobre o que seu tocados de mídia favorito estiver tocando (assumindo, naturalmente, que seu tocador de mídia favorito seja suportado pelo mecanismo de dado “Now Playing”).

Script principal

Crie um arquivo contents/code/main.js com o seguinte conteúdo:

layout = new LinearLayout(plasmoid);
layout.orientation = QtVertical;
 
label = new Label();
layout.addItem(label);
label.text = "No player found";
 
function firstSource() {
	var sources = dataEngine("nowplaying").sources;
	if (sources.length) {
		return sources[0];
	} else {
		label.text = "No player found";
		return '';
	}
}
 
plasmoid.dataUpdated = function(name, data) {
	if (source == name) {
		label.text = 'Info:\n';
		for (var key in data) {
			label.text += key + ': ' + data[key] + '\n';
		}
	}
}
 
source = firstSource();
 
npDataEngine = dataEngine("nowplaying");
 
npDataEngine.sourceRemoved.connect(function(name) {
	if (name == source) {
		source = firstSource();
		if (source) {
			npDataEngine.connect(source, plasmoid, 500);
		}
	}
});
 
npDataEngine.sourceAdded.connect(function(name) {
	if (!source) {
		source = name;
		npDataEngine.connect(source, plasmoid, 500);
	}
});
 
if (source) {
	npDataEngine.connectSource(source, plasmoid, 500);
}

Parece complicado, comparado com os dois exemplos anteriores, mas só existe uma única coisa nova, e é isso que nós observando.
O mecanismo de dados nowplaying faz com que as fontes de dados apareçam e desapareçam assim como tocadores de mídia vem e vão. Esse plasmoid é um pouco estúpido, já que fica observando apenas a primeira fonte de dados da lista, mas isso é suficiente para nós agora.
A mágica é feita pela escuta dos signals sourceAdded e sourceRemoved do mecanismo de dados. Eles, sem surpresa, são emitidos quando a propriedade sources do mecanismo de dados, que lista todas as fontes conhecidas, muda. Note que é possivel sensivelmente requisitar fontes que não estão na propriedade source do mecanismo de dados – por exemplo, o mecanismo “twitter” ter em teoria um número infinito de fontes disponivel, um para cada possivel conta do serviço twitter, e esses não podem ser listados pela propriedade source.

Desafio

Modificar o plasmoid.dataUpdate para exibir a informação que você quer, ao invés da informação fornecida pela nowplaying.

Monitor de sistema

Esse exemplo assume que você já está familiarizado com os exemplos anteriores como o NowPlaying (do qual esse exemplo foi adaptado).
O código abaixo ilustra como conectar-se ao systemmonitor e como receber atualizações de várias fontes de dados.
Você deve ter um plasmoid funcional dos exemplos anteriores. Pegue uma cópia do plasmoid e renomeio. Depois disso, pode substituir o arquivo contents/code/main.js pelo seguinte:

layout = new LinearLayout(plasmoid);
 
label = new Label();
layout.addItem(label);
label.text = "No connection";
 
// current values
var systemData = new Array();
 
function printData() {
    label.text = "";
    for (var name in systemData) {
	var data = systemData[name];
	label.text = label.text + name + ": ";
	for (var elt in data) {
	    label.text = label.text + " " + data[elt];
	}
	label.text = label.text + "\n";
    }
}
 
plasmoid.dataUpdated = function(name, data) {
    systemData[name] = data;
    printData();
};
 
smDataEngine = dataEngine("systemmonitor");
 
smDataEngine.sourceRemoved.connect(function(name) {
	// unsubscribe
	smDataEngine.disconnectSource(name, plasmoid);
    });
 
smDataEngine.sourceAdded.connect(function(name) {
	if (name.toString().match("^mem/physical")) {
	    // subscribe
	    smDataEngine.connectSource(name, plasmoid, 500);
	}
    });

Em smDataEngine.sourceAdded.connect() nós fornecemos uma função para se conectar ao signal. A conexão é chamada pelo monitor do sistema para cada fonte de dados. Nesse exemplo nós nos conectamos as fontes de dados da memória física.
Depois disso o plasmoid.dataUpdate() recebe atualizações. O valores recebidos são armazenados em arrays. O array é impresso em cada atualização.
Note que esse exemplo é bem ineficiente já que estamos chamando printData() para cada atualização. Uma maneira de otimizar isso é atualizar a caixa de texto apenas quando a fonte de dados “mem/physical/free” for atualizada.

Traduzido de http://techbase.kde.org/Development/Tutorials/Plasma#Plasma_Programming_with_JavaScript

Programando plasmoids com Javascript

Introdução

QtScript

O que é um widget?

O que é um Plasmoid?

Estrutura do projeto

Metadata.desktop

Script principal

Testando (KDE 4.3+)

Instalando

Empacotando

Obtendo dados

Script principal

Conectando Engines a Interface do Plama

Dica: plasmaengineexplorer

Now Playing

Script principal

Desafio

Monitor de sistema