Download - jQuery: Write less, do more
jQuery: write less, do moreHugo Santos
http://netponto.org10ª Reunião Presencial - 15/05/2010
Hugo SantosConsultor, Agap2 ConsultingFreelancerMicrosoft Certified Professional Developer ASP.NET 3.5
Agenda
• Apresentação do jQuery• Aplicações do jQuery?• Vantagens• Integração jQuery & VS2010• Plugins• jQuery UI• jQuery Templating
Apresentação do jQuery
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”
jquery.com
Apresentação do jQuery
Site oficialhttp://jquery.comCoreDocumentaçãoExemplosPluginsComunidades
Aplicações do jQuery?
As aplicações ricas com forte componente interactiva tem cativado as grandes organizações a adoptar o jQuery nas suas soluções
Vantagens
Resolução de incompatibilidades entre os browsersRedução de códigoMelhor performanceReutilização de códigoVasta galeria de pluginsComunidade activaApoio Microsoft
DEMO 1: Setup do ambiente de Desenvolvimento
demonstração
Integração VS2010 & jQuery– Suporte nativo no VS2010 para jQuery
• Web forms & MVC• Documentação• Intellisense• Code snipets
DEMO 2: Primeiros passos…
demonstração
Plugins– Ajax, Animação, Dados, Forms, Layout, Media, Validação,
Menus, UI, etc
Os meus preferidos:– Validation plugin - http://www.unwrongest.com/projects/valid8/
– TableSorter plugin - http://www.datatables.net/
– jQuery lightbox plugin - http://leandrovieira.com/projects/jquery/lightbox/
– highCharts - http://www.highcharts.com/
jQuery UI– Conjunto de widgets e tools que
aceleram o desenvolvimento e proporcionam uma interface fluida implementada em jQuery
– Theme builder permite customizar o aspecto dos controlos
– …ver também o jQuery Tools - http://flowplayer.org/tools/index.html
jQuery UIWidgets– Accordion– Autocomplete– Button– Datepicker– Dialog– Progressbar– Slider
jQuery UIInteracções– Draggable– Droppable– Resizable– Selectable– Sortable
DEMO 3: jQuery UI
demonstração
jQuery Templating
Templates HTML para suportar renderização orientada a objectos Javascript na criação de aplicações “data driven”– “Data bind” e render do HTML no cliente– Separação de layout VS código js–Mais fácil de manter
DEMO 4: jQuery templating
demonstração
Dúvidas?
ReferênciasjQuery Project
– http://www.jquery.org
jQuery: Write less, do more, Javascript Library– http://www.jquery.com
jQuery UI– http://www.jquery.ui
jQuery Templates and Data Linking (and Microsoft contributing to jQuery)– http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-d
ata-linking-and-microsoft-contributing-to-jquery.aspx
Patrocinadores desta reunião
Paulo Morgado