BEXIS Tech Talk Series #6: UI Structure and Web API Javad Chamanara August 2016 Jena, Germany
BEXIS Tech Talk Series
#6: UI Structure and Web API
Javad ChamanaraAugust 2016
Jena, Germany
BEXIS Tech Talk #6: UI Structure and Web API
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 Web API
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
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
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 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
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
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
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
<Module>/Views/_ViewStart.cshtml
BEXIS Tech Talk #6: UI Structure and Web API
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 Structure and Web API
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
23BEXIS Tech Talk #6: UI Structure and Web API
Branding-> Applied
BEXIS Tech Talk #6: UI Structure and Web API
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
Web API-> Mechanics
• Project Structure– In respective modules’ Controller folder– Derived from ApiController class
BEXIS Tech Talk #6: UI Structure and Web API
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
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
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
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
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
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
• 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 #6: UI Structure and Web API
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
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?ConvertTo=EML
BEXIS Tech Talk #6: UI Structure and Web API
Outlook
Whats next in the talk series?
Source ControlRelease Management
BEXIS Tech Talk #6: UI Structure and Web API
37
Thanks!Questions?
Contact:[email protected]://bexis2.uni-jena.de
Acknowledgment