Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Started with OpenUI5 (San Francisco State University)

2,611 views

Published on

Presented at the San Francisco State Univeristy for a web development master's class.

A mix of introduction and advanced code examples is provided.

Published in: Technology

Getting Started with OpenUI5 (San Francisco State University)

  1. 1. The Responsive Web UI Library Alexander Graebe Developer Evangelist @ SAP Labs
  2. 2. #OpenUI5 Our Agenda § What is OpenUI5? § Sample Apps § Jump Start: Hello World § The Model-View-Controller Pattern § Out Of The Box Features - Samples § Digging Deeper
  3. 3. #OpenUI5 What is OpenUI5? §  JavaScript UI library §  Huge number of UI controls §  MVC, data binding, templating, … §  Enterprise-grade §  Most current browsers and (touch) devices §  Responsive & adaptive design §  Is Open Source, uses Open Source
  4. 4. #OpenUI5 ?
  5. 5. #OpenUI5
  6. 6. #OpenUI5 Sample Apps
  7. 7. #OpenUI5
  8. 8. #OpenUI5
  9. 9. #OpenUI5
  10. 10. #OpenUI5 Not an official app… http://localhost:8080/pacman/ Quickly play and explain how pacman and ghosts are actual controls etc.
  11. 11. #OpenUI5 Excursion: The interplay between HTML, CSS & JS §  HTML: -  Tell the browser what to display (in specific order) §  CSS: -  Tell the browser how (and where) to display it §  JavaScript: -  Tell the browser what users can do with it My First Website Check it out now. My First Website Check it out now. My First Website Check it out now.
  12. 12. #OpenUI5 Hands On: http://goo.gl/BBXFrW
  13. 13. #OpenUI5 Jump Start: Hello World! <!DOCTYPE html> <html><head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>Hello OSCON</title> <script id='sap-ui-bootstrap' type='text/javascript' src='/sapui5/resources/sap-ui-core.js' data-sap-ui-theme='sap_goldreflection' data-sap-ui-libs='sap.ui.ux3'></script> <script> new sap.ui.ux3.Shell({ content: new sap.ui.commons.Button({text:'Hello World!'}) }).placeAt('content'); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body> </html>
  14. 14. #OpenUI5 MVC done right §  Views should be easy to write, and easy to read, and easy to extend §  Different view types and models should be there to meet everyone s needs
  15. 15. #OpenUI5 MVC Example §  Data is represented in the Model -  Load JSON or XML via AJAX §  Controller represents the methods that can be implemented -  Can modify Model & View §  View is the UI implementation -  Triggers Controller & can modify Model { "first": "John", "last": "Doe", "age": 16, "sex": "M", } function isTeenager(person) { // teens are between 13 and 19 years old if(person.age > 13 && person.age < 19) { return true; } return false; }
  16. 16. #OpenUI5 Advanced: Data Sources §  Formats JSON, XML and OData supported out-of-the-box §  Data can be gathered from various sources -  Every source will get an identifier §  Sample code to consume various APIs: -  http://jsbin.com/howoyeqoki/3/edit
  17. 17. #OpenUI5 Two-Way Data Binding Out Of The Box §  Changes in the model are reflected in the view and vice versa §  Sample Google Map control: http://jsbin.com/openui5-map-db/2/edit
  18. 18. #OpenUI5 Responsiveness out of the box Native?
  19. 19. #OpenUI5 UI Controls Out Of The Box §  UI5 provides 180+ UI elements -  Buttons -  Lists -  Images -  Tables -  Text-Fields (e.g. Search) -  Popups (Modals) -  Date Picker -  ….
  20. 20. #OpenUI5 Example: Lists §  This code example shows how to create lists: -  http://jsbin.com/howoyeqoki/2/edit §  Lists can have various types of list items -  Standard, Custom, Input, .. §  Lists have “modes”: -  SingleSelect, MultiSelect, Delete
  21. 21. #OpenUI5 Example: Images §  This code example shows how to insert and style images: -  http://jsbin.com/gapusodabo/3/edit §  Images can be placed in all content fields (and as icons in lists) §  Two approaches to insert images: -  Add sap.m.Image to content -  Set background image via CSS
  22. 22. #OpenUI5 Example: Date Picker §  This code example shows how to add a Date Picker: -  http://jsbin.com/cavazojuma/2/edit §  Input should … -  get validated (“strict parsing”) -  be saved into the model
  23. 23. #OpenUI5 Advanced: Google Maps in OpenUI5 §  This code example shows how to create a custom UI element based on Google Maps: -  http://jsbin.com/zoyamekuna/4/edit §  Implementation consists of 3 activities: -  Define custom control -  Create model for control API -  Instantiate new control
  24. 24. #OpenUI5 Enterprise-Grade Out Of The Box §  Extra quality assurance §  Diagnostics (e.g. Ctrl-Alt-Shift-S popup) §  Internationalization and right-to-left support §  Accessibility §  Extensibility §  Theming
  25. 25. #OpenUI5 Digging deeper – The Documentation §  Controls Overview (controls, examples and source code) §  Demo Apps (sample apps and source code) §  Explored (controls docs, code samples with XML views) §  Developer Guide (how to, explanation, samples) §  Controls API (descriptions, methods, properties)
  26. 26. #OpenUI5
  27. 27. #OpenUI5 Web: http://openui5.org GitHub: https://github.com/SAP/openui5/ Docs & Demos: https://openui5.hana.ondemand.com @OpenUI5 Thank you!

×