![Page 1: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/1.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Este tutorial irá mostrar como configuar o Eclipse para desenvolver com Ext JS e Jquery usando Spket Editor. Uso o Eclipse diariamente no trabalho, e é minha IDE favorita. Sou desenvolvedora Java web (JEE) e como a plataforma é web, também desenvolvo com Ext JS e JQuery. O que eu mais gosto do Eclipse é o recurso de auto-completar. Isso ajuda a economizar muito tempo quando estou codificando. Infelizmente, essa opção só está presente nas linguagens suportadas pelo Eclipse (Java, C, C++, PHP, etc). Recentemente achei esse plugin para o Eclipse - Spket Editor, e me ajudou muito. Agora posso codificar em Ext JS ou JQuery usando o recurso de auto-completar. Antes disso tinha que ficar consultando a API dessas bibliotecas para saber se tinha o que estava procurando, ou ficar procurando a sintaxe correta do nome do método. Tópicos presentes nesse tutorial:
Como instalar o plugin do Spket Editor para Eclipse Configurando Ext JS Configurando JQuery Configurando outras linguagens e recursos
Como instalar o plugin do Spket Editor para Eclipse. 1 – Abra o Eclipse, no menu clique em “Help” → “Install New Software”.
![Page 2: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/2.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
2 – Vai abrir uma popup. Clique em “Add”.
3 – No campo “Name” digite “Spket” e no campo “Location” digite “http://www.spket.com/update/”. Clique em “Ok”.
![Page 3: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/3.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
4 – Selecione todos os componentes e clique em “Next”.
![Page 4: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/4.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
5 – Clique em “Next” novamente.
![Page 5: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/5.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
6 – Selecione “I accept...” e clique em “Finish”.
![Page 6: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/6.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
7 – Espere enquanto o Spket é instalado...
8 – Se aparecer uma popup de segurança clique em “Ok”.
![Page 7: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/7.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
9 – É necessário reiniciar o Eclipse para aplicar as mudanças. Clique em “Restart”.
Configurando Ext JS 1 – Se você usa Mac, vá até o menu “Eclipse” → “Preferences”.
![Page 8: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/8.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
Se você usa Linux ou Windows, vá até “Window” → “Preferences”.
![Page 9: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/9.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
2 – Selecione “Spket” → “Editors” → “JavaScript Profiles” e clique em “New”.
3 – Digite “ExtJS” e clique em “Ok”.
![Page 10: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/10.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
4 – Selecione “ExtJS” na lista e clique em “Add Library”.
5 – Selecione “ExtJS”.
![Page 11: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/11.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
6 – Selecione o segundo “ExtJS” e clique em “Add File”.
![Page 12: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/12.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
7 – Selecione “ext.jsb2” e clique em “Open”. Você irá encontrar este arquivo dentro da pasta do Ext JS (faça o download do ExtJS).
![Page 13: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/13.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
8 – Selecione os componentes que deseja ativar – selecionei todos. Selecione o primeiro “ExtJS” e clique em “Default”. Não clique em “Ok” ou “Apply” ainda.
![Page 14: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/14.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
9 – Agora vamos configurar o Spket editor. Selecione “General” → “Editors” → “File Associations”. Selecione “*.js” na lista de arquivos. Spket JavaScript Editor é a segunda opção na lista de “associated editors”. Selecione-o clique em “Default”.
![Page 15: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/15.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
10 – Clique em “Ok”.
![Page 16: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/16.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
11 – Agora vamos testar!
Configurando JQuery É o mesmo processo que fizemos para o ExtJS, vamos então configurar o JQuery. 1 – Se você usa Mac, vá até o menu “Eclipse” → “Preferences”.
![Page 17: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/17.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
Se você usa Linux ou Windows, vá até “Window” → “Preferences”.
![Page 18: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/18.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
2 – Selecione “Spket” → “Editors” → “JavaScript Profiles” e clique em “New”.
3 – Digite “JQuery” e clique em “Ok”.
![Page 19: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/19.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
4 – Selecione “JQuery” na lista e clique em “Add Library”.
5 – Selecione “JQuery”.
![Page 20: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/20.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
6 – Selecione o segundo “JQuery” e clique em “Add File”.
![Page 21: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/21.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
7 – Selecione “jquery.js” e clique em “Open”. (faça o download do jquery - jquery.com).
![Page 22: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/22.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
![Page 23: Spket: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery](https://reader034.vdocuments.pub/reader034/viewer/2022050801/5571f8cc49795991698e1c90/html5/thumbnails/23.jpg)
Tutorial: Configurando Eclipse IDE para desenvolvimento com Ext JS e JQuery Loiane Groner – http://loianegroner.com - http://loiane.com
8 – Agora vamos testar!
Configurando outras linguagens e recursos Se desejar configurar outras linguagens (YUI, MooTools, Prototype), visite a página do Spket: http://spket.com/javascript-editor.html Até a próxima!
Para mais tutoriais de Java, Ext JS e tecnologias relacionadas,visite: http://loianegroner.com - Inglês http://loiane.com - Português Página no Facebook: http://www.facebook.com/pages/Loiane-Groner/134400473255914 Twitter: @loiane