6 the ui structure and the web api

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:javad.chamanara@uni-jena.dehttp://bexis2.uni-jena.de

Acknowledgment