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

100 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
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
100
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Code: Themes.Default.Layouts._Layout.cshtml
    Themes.Default.Layouts._Layout.xml
  • _Layout.cshtml
  • _Layout.xml
  • Areas/site/views/Nav
  • DIM.Controllers.DataController: Get,
    RPM.Controllers.StrcuturesController: Get(id)
    CSV -- DIM.Controllers.DataController: Get(id)
  • ApiControllers in the Controllers folder
  • ApiControllers in the Controllers folder
  • ApiControllers in the Controllers folder
  • ApiControllers in the Controllers folder
  • ApiControllers in the Controllers folder
  • ApiControllers in the Controllers folder
  • ApiControllers in the Controllers folder
  • 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

    ×