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.
BEXIS Tech Talk Series
#6: UI Structure and Web API
Javad Chamanara
August 2016
Jena, Germany
Reminder
• Extensibility Aspects
– Modules
– UI
– Integration
– Branding
BEXIS Tech Talk #6: UI Structure and Web API
Today
• In depth view to:
– The UI Structure
– The Web APIs
BEXIS Tech Talk #6: UI Structure and Web API
UI-> Tools
• ASP.NET MVC 5
– Razor
– Views
• Sections
– Shared Views
– Partial Views
BEXIS Tech Talk #6: UI Structure and ...
UI-> Structure
• The Shell as the application view container
– Composition
– Default Contents
• Modules’ UI
– Actions
– Co...
Shell ->Anatomy
• Themes
– Layouts
• Arrangement
• Content Providers
– Content Holders
• Partial Views
– Styling
• Images
...
Shell -> Layout
BEXIS Tech Talk #6: UI Structure and Web API
Shell: Themes
• Changing themes affects:
– Placement
– Content
BEXIS Tech Talk #6: UI Structure and Web API
Shell ->Theme Configuration
• Current theme can be set
– In the app’s config file
• Each theme may contain more than one
l...
Shell -> Content Rendering
• @RenderSection
– Renders a named section in the bound view
• @RenderBody
– Renders the body, ...
Shell -> Content Descriptor
• Maps a content key (in the layout) to a content
provider
• A provider can be:
– an action
– ...
Modules’ UI
• Layout Selection
• Action Integration
• Content Placement
BEXIS Tech Talk #6: UI Structure and Web API
Modules->Layout Application
• View Level
• Module Level
– At each area
• Fallback Layout
BEXIS Tech Talk #6: UI Structure ...
Module: UI
BEXIS Tech Talk #6: UI Structure and Web API
Modules-> Action Integration
• Registered by Modules
• Integrated into Shell
• Some are fixed
BEXIS Tech Talk #6: UI Struc...
Modules-> Action Integration
BEXIS Tech Talk #6: UI Structure and Web API
Branding
• Details in Tech Talk #5
BEXIS Tech Talk #6: UI Structure and Web API
Tenants-> Folder Structure
BEXIS Tech Talk #6: UI Structure and Web API
Tenants->Catalog
BEXIS Tech Talk #6: UI Structure and Web API
Tenants -> Package Structure
BEXIS Tech Talk #6: UI Structure and Web API
Tenants-> Package’s Manifest
BEXIS Tech Talk #6: UI Structure and Web API
Tenants-> Package’s Manifest
BEXIS Tech Talk #6: UI Structure and Web API
Branding-> Applied
BEXIS Tech Talk #6: UI Structure and Web API 23
Web APIs
• MVC 5 Web API 2
• No Html Rendering
• JSON and XML Outputs
• Output Overriding
–CSV
BEXIS Tech Talk #6: UI Stru...
Web API-> Mechanics
• Project Structure
– In respective modules’ Controller folder
– Derived from ApiController class
BEXI...
Web API-> Mechanics
• Registration
– In BExIS.Web.Shell->App_Start->WebApiConfig
– The Register method
– Provides a unifie...
Web API-> Mechanics
• URL space
– All APIs under one unified space /api
– Base_URL/api/<entity>/<action>
– No API versioni...
Web API-> Mechanics
• Naming
– Controller name: entity’s plural name
– Http request carries verbs
– URLs do not contain ve...
Web API-> Mechanics
• Actions:
– /api/<entity>: list all the entities
• Controller’s Get() method is called
• May reduce t...
Web API-> Mechanics
• Actions:
– /api/<entity>: Creates a new entity
• based on the received form data
• Controller’s Post...
Web API-> Mechanics
• Actions:
– /api/<entity>/<id>: deletes the entity with
identifier <id>
• Controller’s Delete(id) met...
• Example
– rBExIS package for R
BEXIS Tech Talk #6: UI Structure and Web API
Exemplary Use-Cases
• Authentication/Authorization
• Dataset
• Schema of a dataset
• Metadata of a Dataset
BEXIS Tech Talk...
Sample Web API calls: Data
• http://www.name.com/api/data
• http://www.name.com/api/data/6
– /api/data/6?header=id,name
– ...
Sample Web API calls: Metadata
• http://www.name.com/api/metadata
• http://www.name.com/api/metadata/6
• http://www.name.c...
Outlook
Whats next in the talk series?
Source Control
Release Management
BEXIS Tech Talk #6: UI Structure and Web API
37
Thanks!
Questions?
Contact:
javad.chamanara@uni-jena.de
http://bexis2.uni-jena.de
Acknowledgment
BEXIS Tech Talk #6: UI...
Nächste SlideShare
Wird geladen in …5
×

6 The UI Structure and The Web API

189 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

×