My presentation about ExtJS at IBM

1. IBM Brasil
Loiane Groner – loianeg@br.ibm.com
Nov/2010
© 2010 IBM Corporation

2. About me
 5+ years of web development experience
 Java/ExtJS –Insights Leader - IT Specialist at IBM Brazil
IBM Market
Team
– International project – US client
 Java/JEE/XML/ExtJS Technical Leader at IBM
 IBM Academic Initiative Ambassador
 JUG Leader at CampinasJUG/Java Campinas
(Brazilian JUG – Java User Group)
 JUG Coordinator at ESJUG (Brazilian JUG)
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
2

3. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
3

4. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
4

5. YUI Lacked:
• Easy to use API
IBM Market Insights
• Real World Widgets
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
5

6. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
6

7. Windows looks like OS windows – support
dragging/resizing/closing
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
7

8. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
8

9. Good Documentation
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
9

10. Community Support
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
10

11. Commercial and Open Source License
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
11

12. Cross Browser
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
12

13. Adapters
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
13

14. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
14

15. support paging/filtration/sorting/grouping/editor/RESTful
Data Grid Easy to load/save data to server in different formats – xml/json
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
15

16. Window
Prompt
Confirm
Icon Alert
Yes, No, IBM Market Insights
Cancel
Progress
Dialog
Wait Dialog
Window with
components
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
16

17. Tree Panel support drag and drop/multiple trees/reordering/checkbox
Easy to load/save data to server in different formats – xml/json
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
17

18. support autocomplete/typing/ajax/search/adavanced template
Combo Boxes Easy to load/save data to server in different formats – xml/json
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
18

19. support ajax/file upload, calendar, etc
Forms Easy to load/save data to server in different formats – xml/json
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
19

20. Dynamic – supports reloading on run time
Charts Requires Flash
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
20

21. Google Calendar – same functions
Calendar Ext JS 3.3+
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
21

22. Google Maps, Gears and Adobe Air Integration
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
22

23. Themes Easy to customize
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
23

24. What Else Ext JS Can Do?
 Ajax support
 Dom traversing
IBM Market Insights
 Dom manipulation
 Event Handling
 Selectors
 OOP emulation
 Animation
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
24

25. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
25

26. Hello World using Eclipse IDE – Java project
 Donwload:
http://sencha.com/products/extjs/
download.php
IBM Market Insights
 Create a Dynamic Web Project.
 Under WebContent folder, create
a folder where all ExtJS files will
be located (I named it ext-3.0.3).
Paste adapter and resources
folders under your extjs folder.
Also, paste this file: ext-
all.js under ext-3.0.3:
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
26

27. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
27

28. Hello World
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
28

29. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
29

30. Ext JS and Base Library Relations
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
30

31. Main Ext JS Classes
 Component
 Panel IBM Market Insights
 Container
 Store
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
31

32. Component
 All widgets extends component class  Components are managed by
Ext.ComponentMgr
 Provide base widget functions like
− get(componentId)
− enable()/disable()
− registerType(xtype, object) (shorthand Ext.reg())
− show()/hide()
− addClass()/removeClass()
− IBM Market Insights
update(data/html) – update content area
− getEl() return element
− getId()
− getXType()
− render(target)
− focus()
 XType – alternate way to define component
− Lazy component creation
 var panel1 = {
 xtype : 'panel',
 title : 'Plain Panel',
 html : 'Panel with an xtype specified'
 }
 var myPanel = new Ext.Panel({
 renderTo : document.body,
 height : 50,
 width : 150,
 title : 'Panel',
 frame : true
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
32

33. Containers
 handle the basic behavior of index or id)
containing items, namely  Main prop
adding, inserting and removing
items IBM Market Insights − Items - MixedCollection of
children components
 Main functions
− add()
− remove()/removeAll()
− insert()
− find()/findBy()/findById()/findByTy
pe
− doLayout()
− get(index or
id)/getComponent(component or
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
33

34. Panels
 Main panel functions/prop/conf prop  Panel subclasses
− load() − TabPanel
▪ panel.load({ − Window
▪ url: 'your-url.php',
▪ params: {param1: 'foo', param2: 'bar'}, // − FormPanel
orIBM Market Insights
a URL encoded string
▪ callback: yourFunction, − GridPanel
▪ scope: yourObject, // optional scope for − TreePanel
the callback
▪ discardUrl: false,
▪ nocache: false,
▪ text: 'Loading...',
▪ timeout: 30,
▪ scripts: false
▪ });
− body – prop
− html – conf prop
− autoLoad – conf prop
 Toolbar and Bottombar
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
34

35. Stores
 Data storage/Loading
 Store contains records object which contain a server data directly
− Store is able to insert/update/add records
 SubClasses
IBM Market Insights
− ArrayStore: Store + ArrayReader – plain js array can be loaded into the array store
− DirectStore: Store + DirectProxy + JsonReader - CRUD operation is going thought custom js
method
− GroupingStore: store for grid rows grouping
− JsonStore: Store + JsonReader
− XmlStore: Store + XmlReader
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
35

36. Stores
 Main exchange format: XML and JSON
 Easy to integrate – any language/framework with XML or JSON
support: Market Insights
IBM
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
36

37. Layout Manager
 Layouts manages by containers – there is
no need to create Layouts directly
IBM Market Insights
 The most useful are Fit, VBox, HBox,
Border
− Only VBox, HBox, Border layouts
supports margins
 Flex prop of VBox, HBox
 BorderLayout must have center item
 Table layout does not support resizing of
items
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
37

38. IBM Market Insights
 http://github.com/loiane/extjs-crud-grid-spring-hibernate
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
38

39. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
39

40. Selenium IDE
 Firefox Extension
 List of Commands
 Selenium Locators – Xpath Expressions
IBM Market Insights
 Example expressions look like this:
 //input[@name='name']
 //input[@name='name' and contains(@class, 'x-form-invalid')]
 //input[@name='company']/following-sibling::img
 //div[@id='Apple']
 //div[@class='x-combo-list-item'][3]
 Examples using CSS selectors:
 css=html:root
 css=div#structuralPseudo :nth-last-child(2)
 css=a[class~="class2"]
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
40

41. Executing Tests with Selenium Remote Control (RC)
 Programming Language
 HTTP Proxy
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
41

42. Java Test
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
42

43. Important!
 Selenium tests for ExtJS should rely on CSS selectors. For every button, grid,
label, tab or any significant UI element, simply chose to use the cls attribute
and specify a CSS class.
IBM Market Insights
 This is how a basic button that is used in automation testing looks like:
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
43

44. Use Ext JS DO NOT Use Ext JS
 Complex UI  Simple UI
 Features Insights
IBM Market
 Single Component
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
44

45. Resources
 http://www.sencha.com
 http://www.extjs.com.br – Brazilian forum
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
45

46. Books
IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
46

47. IBM Market Insights
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
47

48. Contact
 English blog: http://loianegroner.com
 Portuguese-Brazil blog: http://loiane.com
IBM Market Insights
 Twitter: @loiane
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
48

49. Hebrew
Hindi Traditional Chinese
Gracias Spanish
Obrigado
Russian
IBM Market Insights
Merci
French
Brazilian
Danku Dutch
Ar4abic
Portuguese
Thank You English
Grazie
Italian
Simplified
Chinese
Danke
German
Japanese
Tamil
Thai Korean
Technical Session | Ext JS Overview – November 2010 © 2010 IBM Corporation
49