Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

6 The UI Structure and The Web API

204 Aufrufe

Veröffentlicht am

Detailed explanation of the BEXIS's UI structure, composition, content selection, and content rendering in a multi-theme and multi-tenant environment. As well as the mechanics of the public web APIs, their structure, routing, scaffolding, and HTTP verb mappings

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

6 The UI Structure and The Web API

  1. 1. BEXIS Tech Talk Series #6: UI Structure and Web API Javad Chamanara August 2016 Jena, Germany
  2. 2. Reminder • Extensibility Aspects – Modules – UI – Integration – Branding BEXIS Tech Talk #6: UI Structure and Web API
  3. 3. Today • In depth view to: – The UI Structure – The Web APIs BEXIS Tech Talk #6: UI Structure and Web API
  4. 4. UI-> Tools • ASP.NET MVC 5 – Razor – Views • Sections – Shared Views – Partial Views BEXIS Tech Talk #6: UI Structure and Web API
  5. 5. UI-> Structure • The Shell as the application view container – Composition – Default Contents • Modules’ UI – Actions – Content – Placement • Tenants BEXIS Tech Talk #6: UI Structure and Web API
  6. 6. Shell ->Anatomy • Themes – Layouts • Arrangement • Content Providers – Content Holders • Partial Views – Styling • Images • CSSs • Scripts • Menus BEXIS Tech Talk #6: UI Structure and Web API
  7. 7. Shell -> Layout BEXIS Tech Talk #6: UI Structure and Web API
  8. 8. Shell: Themes • Changing themes affects: – Placement – Content BEXIS Tech Talk #6: UI Structure and Web API
  9. 9. Shell ->Theme Configuration • Current theme can be set – In the app’s config file • Each theme may contain more than one layout • Active layout of the current theme can be set – In the app’s config file BEXIS Tech Talk #6: UI Structure and Web API
  10. 10. Shell -> Content Rendering • @RenderSection – Renders a named section in the bound view • @RenderBody – Renders the body, the default unnamed section • @Html.RenderAuto – Renders an action result – Utilizes the content provider file (layout.xml) BEXIS Tech Talk #6: UI Structure and Web API
  11. 11. Shell -> Content Descriptor • Maps a content key (in the layout) to a content provider • A provider can be: – an action – A view – An external service • Providers may accept parameters • Multiple call to one provider with different parameters • Activating/ Inactivating providers’ mapping • Multiple provider per key and output concatenation • Providers should return string, HTML, or MvcString BEXIS Tech Talk #6: UI Structure and Web API
  12. 12. Modules’ UI • Layout Selection • Action Integration • Content Placement BEXIS Tech Talk #6: UI Structure and Web API
  13. 13. Modules->Layout Application • View Level • Module Level – At each area • Fallback Layout BEXIS Tech Talk #6: UI Structure and Web API <Module>/Views/_ViewStart.cshtml
  14. 14. Module: UI BEXIS Tech Talk #6: UI Structure and Web API
  15. 15. Modules-> Action Integration • Registered by Modules • Integrated into Shell • Some are fixed BEXIS Tech Talk #6: UI Structure and Web API
  16. 16. Modules-> Action Integration BEXIS Tech Talk #6: UI Structure and Web API
  17. 17. Branding • Details in Tech Talk #5 BEXIS Tech Talk #6: UI Structure and Web API
  18. 18. Tenants-> Folder Structure BEXIS Tech Talk #6: UI Structure and Web API
  19. 19. Tenants->Catalog BEXIS Tech Talk #6: UI Structure and Web API
  20. 20. Tenants -> Package Structure BEXIS Tech Talk #6: UI Structure and Web API
  21. 21. Tenants-> Package’s Manifest BEXIS Tech Talk #6: UI Structure and Web API
  22. 22. Tenants-> Package’s Manifest BEXIS Tech Talk #6: UI Structure and Web API
  23. 23. Branding-> Applied BEXIS Tech Talk #6: UI Structure and Web API 23
  24. 24. Web APIs • MVC 5 Web API 2 • No Html Rendering • JSON and XML Outputs • Output Overriding –CSV BEXIS Tech Talk #6: UI Structure and Web API
  25. 25. Web API-> Mechanics • Project Structure – In respective modules’ Controller folder – Derived from ApiController class BEXIS Tech Talk #6: UI Structure and Web API
  26. 26. Web API-> Mechanics • Registration – In BExIS.Web.Shell->App_Start->WebApiConfig – The Register method – Provides a unified URL space for all the web APIs • For all modules BEXIS Tech Talk #6: UI Structure and Web API
  27. 27. Web API-> Mechanics • URL space – All APIs under one unified space /api – Base_URL/api/<entity>/<action> – No API versioning is considered! BEXIS Tech Talk #6: UI Structure and Web API
  28. 28. Web API-> Mechanics • Naming – Controller name: entity’s plural name – Http request carries verbs – URLs do not contain verbs BEXIS Tech Talk #6: UI Structure and Web API
  29. 29. Web API-> Mechanics • Actions: – /api/<entity>: list all the entities • Controller’s Get() method is called • May reduce the number of entity attributes reported • May omit some entities – /api/<entity>/<id>: returns the entity with identifier <id> • Controller’s Get(id) method is called BEXIS Tech Talk #6: UI Structure and Web API
  30. 30. Web API-> Mechanics • Actions: – /api/<entity>: Creates a new entity • based on the received form data • Controller’s Post(value) method is called – /api/<entity>/<id>: Updates the entity with identifier <id> • based on the received form data • Controller’s Put(id, value) method is called BEXIS Tech Talk #6: UI Structure and Web API
  31. 31. Web API-> Mechanics • Actions: – /api/<entity>/<id>: deletes the entity with identifier <id> • Controller’s Delete(id) method is called BEXIS Tech Talk #6: UI Structure and Web API
  32. 32. • Example – rBExIS package for R BEXIS Tech Talk #6: UI Structure and Web API
  33. 33. Exemplary Use-Cases • Authentication/Authorization • Dataset • Schema of a dataset • Metadata of a Dataset BEXIS Tech Talk #6: UI Structure and Web API
  34. 34. Sample Web API calls: Data • http://www.name.com/api/data • http://www.name.com/api/data/6 – /api/data/6?header=id,name – /api/data/6?filter=(Grade>50 AND Grade <90) – /api/data/6?header=id,name&filter=(Grade>50) BEXIS Tech Talk #6: UI Structure and Web API
  35. 35. Sample Web API calls: Metadata • http://www.name.com/api/metadata • http://www.name.com/api/metadata/6 • http://www.name.com/api/metadata/6?Conv ertTo=EML BEXIS Tech Talk #6: UI Structure and Web API
  36. 36. Outlook Whats next in the talk series? Source Control Release Management BEXIS Tech Talk #6: UI Structure and Web API
  37. 37. 37 Thanks! Questions? Contact: javad.chamanara@uni-jena.de http://bexis2.uni-jena.de Acknowledgment BEXIS Tech Talk #6: UI Structure and Web API

×