How to develop and test custom UI components for your Sencha Touch application. In this talk I will show you how to develop your own reusable UI components for your Sencha Touch Apps. Showcased with a custom "slide rule value selector" with two scales and a custom display component we will see how to create custom UI classes and use them in your App. We will also look into how to test our components with the Siesta JavaScript testing suite.

1. Develop and test
custom components
for Sencha Touch
Nils Dehl, Senior Developer / Trainer
Twitter: @nilsdehl
Mail: nd@dkd.de

2. Agenda
About me
Introduce Sencha Touch
Custom Components
Testing
Q & A

3. Nils Dehl
Senior Developer
Trainer
Sencha Meetup Frankfurt
Conference Talks
Sencha Forum: mrsunshine
@nilsdehl

5. Sencha Touch

6. Sencha Touch 2
HTML5 mobile application framework
works on iOS, Android, BlackBerry, Windows 8, ...
Features
Smoother Scrolling and Animations
Adaptive Layouts
Native Packaging
Components: Lists, Dataviews, Toolbars, Charts, ...

14. Custom
Components

17. Demo

25. Styling

26. Custom Events

33. Testing

34. Testing in Chrome

35. Position right Settings

44. Testing with Simulator

45. Test in iOS Simulator (Xcode)

46. Remote debugging with Safari
Settings >
Safari >
Advanced >
Web Inspector = ON

47. Remote debugging with Safari

48. Siesta

49. Siesta
http://www.bryntum.com/products/siesta/
Siesta is a JavaScript unit testing tool
Testing of the DOM and simulate user interactions
Sencha Touch, jQuery, Ext JS, NodeJS,YUI etc.
Run Tests in
the Browser
NodeJS
Write unit tests in plain Javascript

50. Siesta Testrunner Browser

51. Siesta Testrunner Browser

52. Siesta Testrunner Mobile

53. Harness

54. Test

55. Demo

56. Real world test

57. d dkdevelopment
kommunikation
design
thank you.

58. ? ??

59. @nilsdehl
slideshare.net/nilsdehl/
nd@dkd.de
Vote Talk:
https://joind.in/8589