Aplicativo Desktop com abas usando Electron
Há alguns dias foi apresentado aqui o BASEL ,um framework desenvolvido pelo Clube dos Geeks capaz de criar aplicativos Desktop usando as tecnologias: Bootstrap, AngularJS, SQLite e Electron.
Hoje faremos um exemplo de software multitelas, dividido por abas.
Instalando o BASEL
Podemos instalar o BASEL usando NPM:
$ npm install -g basel
Precisamos ter instalados na máquina o Node.js e o Git.
Iniciando aplicativo
Iniciaremos nosso aplicativo usando o BASEL que está instalado de forma global, usando o seguinte comando:
$ basel-init meuAplicativo -b tabs
Será criada uma pasta com o nome meuAplicativo e dentro dela estarão as pastas e arquivos de seu novo aplicativo BASEL, usando o tema basel-app-tabs como base.
Instalando dependências
Usando o terminal execute os seguintes comandos:
$ cd meuAplicativo #para entrar na pasta do aplicativo
e
$ npm install #para instalar as dependências
Criando CRUD
BASEL é capaz de criar CRUDs com base em templates pré estabelecidos, criando controllers e views baseados em AngularJS e usando a estrutura do Bootstrap.
Você pode criar tabelas no banco de dados e depois criar CRUDs a partir delas. Ou cria-las ao mesmo tempo que cria o CRUD.
$ basel-crud Pessoas -t pessoas -n “id:INTEGER, nome:CHAR(100), email:CHAR(100)” -p id -i id
O comando acima irá criar um CRUD a partir da tabela usuarios depois de ter criado a tabela com a seguinte estrutura:
CREATE TABLE pessoas( id INTEGER AUTOINCREMENT PRIMARY KEY, nome CHAR(100), email CHAR(100) );
Usamos a opção -p ou –pk para indicar qual é a PRIMARI KEY da tabela. E a opção -i ou –incremental para informar os campos auto incrementais da tabela.
Você pode criar outros CRUDs usando esta estrutura. Pode também criar sues próprios controllers e views sem usar o BASEL, usando a função addTab(options) para adicionar novas abas. As opções são:
name | String | Nome da aba, que irá aparecer na descrição |
view | String | Nome do arquivo .html que será usado como view |
active | boolean | Informa se a aba tem preferência em relação às outras para ficar ativa quando for chamada |
O controller deve ser informado na view, usando o atributo ng-controller.
Executando
Para executar seu novo aplicativo use o seguinte comando:
$ npm start
Este comando está definido no arquivo package.json de sua aplicação. Assim como os comandos para empacotar, ou seja gerar o executável da sua aplicação, como npm run win32 que gera o executável capaz de ser executado no sistema operacional Windows com arquitetura ia32.
Executando npm start seu aplicativo será executado com uma tela semelhante à seguir:
Mais sobre o BASEL
Você pode ter mais detalhes sobre o BASEL no site oficial. E veja a Documentação.
Hola Jayr,
I’m trying to learn a bit of Angular and Electron with basel. I was wondering if you could resolve me a doubt I have regarding the basel-app-tabs template.
If I would like to be able to open as many tabs for products, for instance, how can we use the same controller? I have tried to create a button that opens the view (ng-click=’addTab({id:1, name:”Products”, view:”app/views/products.html”, active: true})’) it does work but the problem is that actions performed in the latest view opened are being reflected on the first one only (I have implemented some changes, like one button to clean the input field, when I click on it, it cleans the field of the first tab view not the one from which I’m clicking the button).
How could it be done to difference each tab, to create new replica views dynamically and independents? I will really appreciate any guidance on how this scenario is normally resolved.
Thanks in advance!!
Pablo
Try to use differents ids and references.