Building Custom UIs for APS 2.0 Applications. Timur Nizametdinov, APS Dynamic UI Lead Developer

Size: px

Start display at page:

Download "Building Custom UIs for APS 2.0 Applications. Timur Nizametdinov, APS Dynamic UI Lead Developer"

Justina Hopkins
5 years ago
Views:

1 Building Custom UIs for APS 2.0 Applications Timur Nizametdinov, APS Dynamic UI Lead Developer

cross-resource integration APS Authentication

2 Introducing APS 2.0 A Platform for Integration APS Dynamic UI HTML5 Extensibility Certified Services APS Service Bus User/account context Secure cross-resource integration APS Authentication Protocol Multi-factor, multiprovider SSO (OpenID Connect, SAML, AD ) Profit from the cloud 2

3 Why Customize? Possibility to implement scenario-oriented User Interface Complex screens - with dynamic UI (AJAX style) - with possibility to operate with multiple resources at the same time (i.e., while in mailbox can access child resources like forwarding rules, etc.) Custom interaction with Platform - clear way to interact between Resources and APSC (for events, notifications, etc.) - Integration with Platform s workflows (e.g. user creation, mailbox creation, etc.) Profit from the cloud 3

4 Auto-generated vs. Custom Auto-generated UI Pros +no need to write code for screens (declared in APP-META.xml) Cons - predefined behavior with little to no customization - no AJAX - impossible to implement scenario-oriented UI Custom UI Pros +any complex UI screen that can be expressed using HTML + JS can be defined +fully dynamic, responsive screens +freedom to create custom html with js with help of APS JS SDK Profit from the cloud 4

5 Feature Overview Possibility to use any JS framework and integrate any html-based screen APS JS SDK to make development of common scenarios simple Simple Skinability (Branding) with APS JS controls Security application is isolated from other applications on the screen Platform independency applications could be integrated into different APS platforms (PA, Plesk, etc.) Profit from the cloud 5

6 Key Architecture Features Top Frame Navigation Tab1 Tab2 Tab3 Tab4 APS App Frame (static html page + js) Submit Cancel REST APS Controller REST Environment APS App (Business Logic only) All UI rendering logic on the client side no html rendering on the server side APS JS SDK to provide skinability and ease of use All data is transferred to/from backend using ajax Each application screen is isolated inside of its own container (an iframe) Profit from the cloud 6

7 Technology Stack DOJO JS framework for widgets and as MVC/MVVM implementation HTML4/5 as a base markup JSON as primary intercommunication data format OpenAJAX Hub as an iframe communication JS framework Profit from the cloud 7

8 Development workflow resourcesschema.json + provisioning logic using declaration in APP-META.xml with HTML and/or with APS JS SDK APS Dynamic UI APS Service Bus APS Authentication Protocol Profit from the cloud 8

Define Navigation How to define Screens Screens are defined in the <presentation> section of APP-META: <presentation> <group id="vpsng" label="vps"> <view id="ves.summary"/> <view id="ves.

9 Define Navigation How to define Screens Screens are defined in the <presentation> section of APP-META: <presentation> <group id="vpsng" label="vps"> <view id="ves.summary"/> <view id="ves.list"/> </group> <group id="ve" label="ve ${name}"> <view id="ves.general"/> <view id="ves.backups"/> </group> </presentation> ves. summary ves. general ves. list ves. backups vpsng group ve group Groups elements are currently represented by tabs in the Control Panel Profit from the cloud 9

10 Write HTML Pages APS JS SDK Provides core navigational functions Hides all complex panel browser intercommunication logic (iframes, cross-domain messaging, auto-resizing) Provides API to get and retrieve data from/to backend Provides UI controls to easy develop screens and to brand applications APS JS SDK + = Branded applications Profit from the cloud 10

11 Write HTML Pages JS SDK APIs View API - Grid with pagination, sorting, filtering: aps/grid - Input: TextBox, Select, Slider, CheckBox, etc. - Output: EnhancedList, Gauge, Message, ProgressBar, Radio, etc. - Control: Button, Toolbar, etc. Model API - Model data model for APS resources - Store sends/receives data over APS REST API Navigation API - gotoview() switch to another view of the application - onsubmit(), onedit(), oncancel() appropriate handlers on events Profit from the cloud 12

12 Write HTML Pages JS SDK Basics Framework is modular (modules are in Asynchronous Module Definition format used by require.js, dojo, etc.) UI Controls are thick (have state, own HTML renderer) Each property change of widget could be listened Model is a special representation of js object (including APS resources) Each property change of widget could be bound to a model Store is a way to operate with backend (get, post, put, delete) asynchronously Profit from the cloud 13

13 Write HTML Pages Navigation API Screen initialization phase ends in callback function via aps/ready require plugin - require([ aps/ready! ], callback); Handlers like onedit, onsubmit, oncancel come from standard buttons that Panel creates based on view class in APP-META Main navigation method is gotoview Profit from the cloud 14

aps/pagecontainer layouts the page (messages, screen captions etc) Each widget

14 Write HTML Pages JS SDK View API 3 ways to declare UI: js declarative (module load), html js imperative Widget is placed inside its own module Main widget aps/pagecontainer layouts the page (messages, screen captions etc) Each widget can be bound with a model using watch method and/or at marker Profit from the cloud 15

Write HTML Pages JS SDK Model API Store is a way to operate with a backend (get, put, post, delete) Some widgets like Grid, Select can read data from Store Model is an abstraction to work with

15 Write HTML Pages JS SDK Model API Store is a way to operate with a backend (get, put, post, delete) Some widgets like Grid, Select can read data from Store Model is an abstraction to work with resources on the client-side and listen to changes Using a Model 2 ways-binding can be implemented: - changes in the model are reflected in the bound widgets - changes in widgets are reflected in the bound model Profit from the cloud 16

16 Summary Screens could be written on client-side with HTML and JS only. There is no UI-backend REST everywhere Navigation is declarative. Different applications could be merged into one navigation tree Use APS JS SDK to: - communicate with backend - develop applications easy with help of UI controls and MVC abstractions - let applications be brandable Let creativity rule the day! Profit from the cloud 17

17 Docs and Samples request access Spec: API: Samples are placed inside the APS JS SDK ui-runtime inside tests folder The package that demonstrates custom-ui is called custom-ui-test Profit from the cloud 18

18 Next Steps Plan to Build APS 2.0 Packages Parallels PartnerNet Portal Cloud Services Developer Program - Sign up by March 13th (for APS-enabled ISV/SI partners) APS 2.0 Beta Program - Access to APS 2.0/PA 5.5 Hands-on-labs, Sandbox, and documentation - Additional online technical training & regular readiness check-in calls with APS engineers and architects - Program Requirements Include the scenario you want to solve with APS 2.0 to qualify to participate If qualified, you will be invited to the APS 2.0 Beta kickoff - Get your hands dirty with APS 2.0 Beta Be ready for launch your own packages! Profit from the cloud 19

19 Questions?

Advanced Dreamweaver CS6

Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this