0
Aprimorando    sua App com      Ext JS 4Loiane Groner
Loiane Quem?palestrante = {  nome: ‘Loiane Groner’,  trabalha: ‘Sr Software Engineer’,  onde: ‘@Citibank - São Paulo’,  us...
Mãos ao alto!   Conhece JQuery?   Conhece Ext JS?Já trabalhou com Ext JS?
Mas o queé esse talde Ext JS?
http://sencha.com
1milhão de desenvolvedoresRIA JS FrameworkMelhores componentes UIdo mercado
Puro HTML/Javascript
Com Ext JS             HOT!
Cross Browser         Funciona até          no IEca 6!         Não precisa              ficar         esquentando          ...
XML  ouJSON
FácilIntegração
Pode integrar código!     E outros....
Orientado a      ObjetosExt.define(MyApp.CustomerPanel, {    extend: Ext.panel.Panel,    // etc.});
Carregamento     DinâmicoExt.Loader.setConfig({    enabled: true});Ext.Loader.setPath(Ext.ux, ../ux);Ext.require([    Ext....
Data Package   Field                ReaderValidation    Model                        WriterAssociation   Proxy            ...
Model FieldsExt.define(User, {    extend: Ext.data.Model,    fields: [        {name: id, type: int},        {name: name, t...
Model ValidationsExt.define(User, {    extend: Ext.data.Model,    fields: [id, name, email, height],     validations: [   ...
Ext.define(User, {    extend: Ext.data.Model,    fields: [id, name],                              Model     hasMany: Posts...
{                        Nested Data: JSON    id: 1    name: Loiane,    posts: [        {             id    : 12,         ...
Dados Associados//loads User with ID 123 using Users ProxyUser.load(123, {    success: function(user) {        console.log...
Storenew Ext.data.Store({    model: User,    proxy: {        type: ajax,        url : users.json,        reader: json    }...
new Ext.data.Store({    model: User,     sorters: [name, id],    filters: {        property: name,        value   : Loiane...
Proxy   AJAX           RESTLocal Storage (Memory &      JSON-P  HTML 5)
Componentes
Grid
Tree
Form + Validação    Nativa
Data View
Toolbar + Buttons
Gerenciador de Layout
Acessibilidade   (ARIA)
Desenhos
Charts
Temas     CSS 3:Sass + Compass
Arquitetura MVC
ModelView           Controller
Show me the code!
Código para         Download  http://github.com/loiane/extjs4-tdc2011
LicençaUS$ 595 por Dev
Livro: Ext JS 4: First Look    RAW - Julho 2011  Lançamento: final 2011http://extjs4book.com
contato = {  email: ‘me@loiane.com’,  blogPtBr: ‘loiane.com’,  blogIngles: ‘loianegroner.com’,  twitter: ‘@loiane’,  githu...
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
TDC 2011 - Ext JS 4
Upcoming SlideShare
Loading in...5
×

TDC 2011 - Ext JS 4

3,364

Published on

Palestra apresentada na trilha de javascript do TDC 2011.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • No slide 14, o que tem a ver com o conteúdo mostrado com o título 'Orientado a Objetos'? ExtJS não torna o código 'mais' orientado a objetos, até porque Javascript é uma linguagem orientada a objetos (prototype-based)... O que o ExtJS faz, neste caso, é aproximar com uma programação orientada a objetos baseada em classes (class-based), como é a linguagem Java por ex.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,364
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "TDC 2011 - Ext JS 4"

  1. 1. Aprimorando sua App com Ext JS 4Loiane Groner
  2. 2. Loiane Quem?palestrante = { nome: ‘Loiane Groner’, trabalha: ‘Sr Software Engineer’, onde: ‘@Citibank - São Paulo’, usaExtDesde: 2009, twitter: ‘@loiane’, escreve: ‘http://loiane.com’, escreveEN: ‘http://loianegroner.com’}
  3. 3. Mãos ao alto! Conhece JQuery? Conhece Ext JS?Já trabalhou com Ext JS?
  4. 4. Mas o queé esse talde Ext JS?
  5. 5. http://sencha.com
  6. 6. 1milhão de desenvolvedoresRIA JS FrameworkMelhores componentes UIdo mercado
  7. 7. Puro HTML/Javascript
  8. 8. Com Ext JS HOT!
  9. 9. Cross Browser Funciona até no IEca 6! Não precisa ficar esquentando a cabeça!
  10. 10. XML ouJSON
  11. 11. FácilIntegração
  12. 12. Pode integrar código! E outros....
  13. 13. Orientado a ObjetosExt.define(MyApp.CustomerPanel, { extend: Ext.panel.Panel, // etc.});
  14. 14. Carregamento DinâmicoExt.Loader.setConfig({ enabled: true});Ext.Loader.setPath(Ext.ux, ../ux);Ext.require([ Ext.grid.*, Ext.data.*, Ext.ux.RowExpander,]);
  15. 15. Data Package Field ReaderValidation Model WriterAssociation Proxy Store Sorter Grouper Filter
  16. 16. Model FieldsExt.define(User, { extend: Ext.data.Model, fields: [ {name: id, type: int}, {name: name, type: string} ]});
  17. 17. Model ValidationsExt.define(User, { extend: Ext.data.Model, fields: [id, name, email, height],  validations: [ {type: presence, field: id}, {type: length, field: name, min: 2}, {type: format, field: email, matcher: /[a-z]@[a-z].com/} ]});
  18. 18. Ext.define(User, { extend: Ext.data.Model, fields: [id, name], Model  hasMany: Posts Association}); Ext.define(Post, { extend: Ext.data.Model, fields: [id, user_id, title, body],  belongsTo: User, hasMany: Comments}); Ext.define(Comment, { extend: Ext.data.Model, fields: [id, post_id, name, message],  belongsTo: Post});
  19. 19. { Nested Data: JSON id: 1 name: Loiane, posts: [ { id : 12, title: New features in Ext JS 4, body : Ext JS 4 is the most..., comments: [ { id: 123, name: Someone, message: Great Post! } ] } ]}
  20. 20. Dados Associados//loads User with ID 123 using Users ProxyUser.load(123, { success: function(user) { console.log("User: " + user.get(name));  user.posts().each(function(post) { console.log("Comments for post: " +post.get(title));  post.comments().each(function(comment) { console.log(comment.get(message)); }); }); }});
  21. 21. Storenew Ext.data.Store({ model: User, proxy: { type: ajax, url : users.json, reader: json }, autoLoad: true});
  22. 22. new Ext.data.Store({ model: User,  sorters: [name, id], filters: { property: name, value : Loiane }, groupers: { property : age, direction: ASC }});
  23. 23. Proxy AJAX RESTLocal Storage (Memory & JSON-P HTML 5)
  24. 24. Componentes
  25. 25. Grid
  26. 26. Tree
  27. 27. Form + Validação Nativa
  28. 28. Data View
  29. 29. Toolbar + Buttons
  30. 30. Gerenciador de Layout
  31. 31. Acessibilidade (ARIA)
  32. 32. Desenhos
  33. 33. Charts
  34. 34. Temas CSS 3:Sass + Compass
  35. 35. Arquitetura MVC
  36. 36. ModelView Controller
  37. 37. Show me the code!
  38. 38. Código para Download http://github.com/loiane/extjs4-tdc2011
  39. 39. LicençaUS$ 595 por Dev
  40. 40. Livro: Ext JS 4: First Look RAW - Julho 2011 Lançamento: final 2011http://extjs4book.com
  41. 41. contato = { email: ‘me@loiane.com’, blogPtBr: ‘loiane.com’, blogIngles: ‘loianegroner.com’, twitter: ‘@loiane’, github: ‘loiane’}Obrigada!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×