Introduction to SmartUI SDK

Содержание

Слайд 2

Overview

Overview

Слайд 3

Overview SmartUI SDK The SmartUI SDK allows you to Integrate parts

Overview SmartUI SDK

The SmartUI SDK allows you to
Integrate parts of

SmartUI into other UI environments
Extend existing SmartUI by Commands, Node Types, Properties
Create new SmartUI Widgets
Use generic controls like Modal Alert, Node Picker …
It is delivered as 3 .zip files along with this slide deck:
csui-16.zip, generator-csui-extension.zip and style-override-kit.zip
csui-sdk.16.1.0.zip
Contains overall documentation
Focus is on UI elements
Contains examples for all common use cases
generator-csui-extension.zip
Provides a project generator preparing for deployment on CS
style-override-kit.zip
Allows for modifying / overriding SmartUI stylings
Слайд 4

Getting started with SmartUI SDK Download and unpack the SDK archive

Getting started with SmartUI SDK

Download and unpack the SDK archive (csui-sdk-16.zip)
Follow

the Readme.md (You have to download and install nodejs and npm here)
Open the samples-index.html and open some samples
At this point, you should be able to read and run samples
Donwload and unpack the Generator archive (generator-csui-extension.zip)
Follow the instructions in the Readme.md, and open the hello widget page
At this point, you should have produced a project specific for the CS module you want to use for deployment
After running grunt there should be an out-module directory, which can be imported for deployment into CS Oclipse IDE.
Deploy the generated module sources by importing it into Oclipse
Import out-module directory from generated project into Oclipse
Deploy to CS which is connected with your Oclipes
At this point you should be able to configure the hello widget in perspective manager and add it to your perspective
Copy and modify additional samples from SDK to your module project
Run grunt and deploy again
Find common use cases and acc. examples resp. documentation in the rest of this slide deck
Слайд 5

Widget Development IDE Create a new UI development project based on

Widget Development IDE

Create a new UI development project based on CSUI

project generator
Download CSUI project generator (generator-csui-extension.zip)
Follow Readme.md
Prepare and build (doc/index.html)
Add examples (from csui-sdk) and modify at your need
Generated project build produces ‘out-module’
Load content of out-module into OScript IDE
Build module in OScript and deploy in CS
In the following, the generated project is assumed to be named greetings
Слайд 6

Deployment through OScript Create an OScript module Orphan CSUI::Extension and specify

Deployment through OScript

Create an OScript module
Orphan CSUI::Extension and specify the Require.js

module prefix
Populate support folder with your development projects (e.g. greetings) out-module content
Deploy
Слайд 7

Extend Extend existing Smart UI components

Extend

Extend existing Smart UI components

Слайд 8

SmartUI Extension Points Overview New Command Toolbar Inline Action bar Context

SmartUI Extension Points Overview

New Command
Toolbar
Inline Action bar
Context menu
Custom Column
New metadata

panel
Add new metadata property panel
New nodetype
Icon
Default action
General form extension
Perspectives override
Custom URL path with perspective
Слайд 9

New Command

New Command

Слайд 10

New Command, Sample See greetings/src/commands/hello for a sample The hello command

New Command, Sample

See greetings/src/commands/hello for a sample
The hello command sample:
Creates a

command applicable to a single node
Registers the command in the CS UI framework
Places a button executing the command on the nodestable toolbar
Localizes user interface
Is developed using a mocked debugging page
Is tested by a mocked spec
Слайд 11

New Add Item command See greetings/src/commands/add.hello for a sample See greetings/src/commands/add.hello/add.hello.command.md

New Add Item command

See greetings/src/commands/add.hello for a sample
See greetings/src/commands/add.hello/add.hello.command.md for documentation
The

add.hello command:
Creates a command applicable to a container
Registers the command in the CS UI framework
Places an item to the menu of the "+" button
Lets a new object be created by the generic inline form
Provides a custom inline form
Localizes user interface
Is developed using a mocked debugging page
Is tested by a mocked spec
Слайд 12

Custom Column

Custom Column

Слайд 13

Custom Column See greetings/src/controls/cells/hello for a sample The greetings/src/controls/cells/hello column: Shows

Custom Column

See greetings/src/controls/cells/hello for a sample
The greetings/src/controls/cells/hello column:
Shows the text "Text",

"Hypertext" or or other document type, based on the MIME type of the document, or nothing if the item is no document.
Depends on presence of the `mime_type` property from the node information.
You can edit the `connection` and `node id` parameters in `test/index.html` to be able to test the custom column with your server.
You need to add it to the column collection of the table which you want to show it at.
Слайд 14

Custom Column: What controls the table columns REST API v1/node/:id/nodes provides

Custom Column: What controls the table columns

REST API v1/node/:id/nodes provides
Node properties
Property

schema
Custom Column list
Table columns are specified by the featuredColumns property
Type icon, name, size and last modification date
Table cells are rendered by CellViews registered for
Column property key
Column data type
Слайд 15

Custom Column: Rich Picture

Custom Column: Rich Picture

Слайд 16

Custom Column: Table cells supporting classes

Custom Column: Table cells supporting classes

Слайд 17

Custom Column: How the table columns are displayed

Custom Column: How the table columns are displayed

Слайд 18

Custom Column: Built-in table columns RequireJS modules “csui/widgets/nodestable/cells/*” Date (registered for

Custom Column: Built-in table columns

RequireJS modules “csui/widgets/nodestable/cells/*”
Date (registered for type -7)
DateTime

(registered for type 401)
Member (registered for types 14 and 19)
Name (registered for key “name”)
Parent (registered for key “parent_id”)
Select (registered for key “_select”)
Size (registered for key “size”)
Text (default for unregistered columns)
TypeIcon (registered for key “type”)
Samples in CS_CORE_UI/samples/cells/*
Reserved (registered for key “reserved”)
Social (registered for the mocked key “social”)
Слайд 19

Custom Column: Creating a custom table column Create a RequireJS module

Custom Column: Creating a custom table column

Create a RequireJS module
with a

view descended from CellView or TemplatedCellView
Register it in the cellViewRegistry
Create a testing page showing the NodesTableView
with the column key added to the featuredColumns (by require.config() or constructor NodesTableView)
Слайд 20

Metadata

Metadata

Слайд 21

New Metadata Panel See greetings/src/widgets/metadata/panels/hello for a sample See csui-sdk-16.1.0/doc/widgets/metadata/doc/metadata.panels/index.html for

New Metadata Panel

See greetings/src/widgets/metadata/panels/hello for a sample
See csui-sdk-16.1.0/doc/widgets/metadata/doc/metadata.panels/index.html for documentation
The Metadata

Widget shows multiple panels with node information, which are selectable by a dropdown control
The contentView can have an optional static method to check if the panel should be enabled (made visible) for the node opened in the metadata widget
Additional panels can be added by registering a module extension
Слайд 22

New Metadata Property Panel See greetings/src/widgets/metadata/property.panels/hello for a sample See csui-sdk-16.1.0/doc/widgets/metadata/doc/metadata.property.panels/index.html

New Metadata Property Panel

See greetings/src/widgets/metadata/property.panels/hello for a sample
See csui-sdk-16.1.0/doc/widgets/metadata/doc/metadata.property.panels/index.html for documentation
The

Property Panel of the Metadata Widget shows multiple (inner) panels with information, which are selectable by a tab control.
They are populated dynamically, based on the configuration of their controllers
Additional panels can be added by registering a module extension, which returns an array of panel controller specifications
Слайд 23

New Nodetype

New Nodetype

Слайд 24

New Nodetype: Overview For a new nodetype, one typically has to

New Nodetype: Overview

For a new nodetype, one typically has to provide:
An

Icon specifying the node type
A Default action executed when clicking of a node of the new type
A Perspectives override, for the perspective to be shown with the new type
Each of these extensions is described in the following
Слайд 25

New Nodetype: Icon Extend nodesprites nodesprites is the central SmartUI icon

New Nodetype: Icon

Extend nodesprites
nodesprites is the central SmartUI icon factory
Register

custom icon
Define icon
Слайд 26

New Nodetype: Default Action See src/commands/open.brava/readme.me Define Command for Default Action

New Nodetype: Default Action

See src/commands/open.brava/readme.me
Define Command for Default Action (sample src/commands/open.brava

in SDK)
Define command signature (your choice) for subtype
See doc/utils/commands/commands/index.html
Слайд 27

New Nodetype: Register Action Publish command in bundles/greet-all.js Register command in csui-extenstions.json

New Nodetype: Register Action

Publish command in bundles/greet-all.js
Register command in csui-extenstions.json

Слайд 28

New Nodetype: Perspectives Override Perspectives (configurations) are usually provided serverside through

New Nodetype: Perspectives Override

Perspectives (configurations) are usually provided serverside through REST

API (GET api/v1/perspectives), based on container type
SmartUI provides means however, to override the different perspectives behavior, i.e. to provide custom configurations
The preferred, and sustainable way, is server-side provision (as it is open for future personalization handling)
In the following, client-side perspective overrides are explained
Слайд 29

New Nodetype: Perspectives Override Depending on the perspective given by the

New Nodetype: Perspectives Override

Depending on the perspective given by the server,

there are two client-side overrides
Override Node Perspective
See documentation under doc/utils/contexts/perspective/node.perspectives/index.html
Override Search Perspective
See documentation under doc/utils/contexts/perspective/search.perspectives/index.html
See sample under greetings/src/perspective.overrides
Слайд 30

Custom URL

Custom URL

Слайд 31

Custom URL: Overview Extend the URL schema of SmartUI to provide

Custom URL: Overview

Extend the URL schema of SmartUI to provide additional

root urls or to extend existing URLs
Understand how perspective changes work in general
Understand that an apparent navigation is a perspective change, triggered usually by model changes
Models triggering perspective changes are kept in Perspective Contexts
Extend Perspective Contexts through plugins
Extend Perspective Router to communicate with Perspecive Context on URL changes
Слайд 32

Custom URL path with perspective: How Perspective Changes Work Perspective Context

Custom URL path with perspective: How Perspective Changes Work

Perspective Context
Gathers models and

collections, which contain state properties and trigger events, whenever the properties change.
Fetches perspective configuration and provides methods for fetching data.

Perspective Panel
Hosts perspective view with widget container,
Lets it parse perspective configuration, require widgets, render them and fetch their data.

Perspective Router
Synchronizes perspective models changes with window location and window location changes back with context models.

Слайд 33

Custom URL: Change Perspective = Navigate var nextNode = context.getModel(NextNodeModelFactory); nextNode.set('id',

Custom URL: Change Perspective = Navigate

var nextNode = context.getModel(NextNodeModelFactory);
nextNode.set('id', 2000);

var searchQuery

= context.getModel(SearchQueryModelFactory);
searchQuery.set({
'where': 'Radium',
'location_id1': 2000
});

Perspective change or refresh is triggered by changing properties of a model, which controls the particular scenario.
Get model instance from the context, which controls a particular scenario.
Set single or multiple properties of the model.
Property changes trigger perspective check and either load a new perspective configuration or refresh data shown in the existing perspective. Perspective change is an apparent page navigation.

Слайд 34

Custom URL: Perspective Context Extensibility

Custom URL: Perspective Context Extensibility

Слайд 35

Custom URL: Perspective Context Plugin Register perspective context plugin Declare context

Custom URL: Perspective Context Plugin

Register perspective context plugin
Declare context model to

control the perspective
Listen to changes of the context model
to populate the perspective configuration
or to re-fetch the context content, if the perspective configuration remains the same

// Add to greet-extensions.json
"csui/utils/contexts/perspective/perspective.context": {
"extensions": {
"greet": [
"greet/perspective.context.plugins/greetings/ hello.perspective.context.plugin"
]
}
}

Слайд 36

Custom URL: Perspective Router Extensibility Window location (URL) reflects the state

Custom URL: Perspective Router Extensibility

Window location (URL) reflects the state of

the context models.
Changes of the URL are reflected back to the context models.
Слайд 37

Custom URL: Perspective Router // Add to greet-extensions.json "csui/pages/start/perspective.routing": { "extensions":

Custom URL: Perspective Router

// Add to greet-extensions.json
"csui/pages/start/perspective.routing": {
"extensions": {
"greet":

[
"greet/perspective.routers/greetings/hello.perspective.router"
]
}
}

Register perspective router
Listen to changes of the context model to set window location and listen to window location changes to recognize the particular scenario and set context model properties

Слайд 38

Custom URL: Recommendations If your scenario is connected to a route

Custom URL: Recommendations

If your scenario is connected to a route without

any identifier or other parameter - like “favorites”
do not introduce a new context model to navigate; reuse the existing applicationScope.
If your scenario shows objects in the same perspective – like search results and not line node-specific perspectives
use the same model for the navigation, which you will use on the rendered perspective: searchQuery, workflowStep, for example.
If your scenario shows objects, which can have different perspectives configured
use a pair of models; one to carry the object information for the current perspective and one to navigate to the next perspective: node & nextNode, for example.
Слайд 39

Custom URL: Sample Sample of “greetings” and “greetings/{greetSubject}” routes with context plugins: //greetings/src/perspective.context.plugins/greetings/ //greetings/src/perspective.routers/greetings/

Custom URL: Sample

Sample of “greetings” and “greetings/{greetSubject}” routes with context plugins:
//greetings/src/perspective.context.plugins/greetings/
//greetings/src/perspective.routers/greetings/

Слайд 40

Create A Widget Create new Smart UI components

Create A Widget

Create new Smart UI components

Слайд 41

Application Widget: Create Setup Create folder src/widgets/ Create main view (controller)

Application Widget: Create

Setup
Create folder src/widgets/
Create main view (controller) .view.js
Create widget manifest

.manifest.json
Refer to the main view module from the main bundle
Register the widget for discovery API
Access Data
Create model and factory for the context
Request the model in the main view
Use the model in the view template
Test
Create index.html for debugging and demoing
Create test specs for mocked unit tests
Слайд 42

Application Widget: Main view src/widgets/hello/hello.view.js

Application Widget: Main view

src/widgets/hello/hello.view.js

Слайд 43

Application Widget: Manifest src/widgets/favorites/favorites.manifest.json

Application Widget: Manifest

src/widgets/favorites/favorites.manifest.json

Слайд 44

Application Widget: Registration src/greet-extensions.json

Application Widget: Registration

src/greet-extensions.json

Слайд 45

Application Widget: Widget in the Perspective Use the Require.js module folder path in the perspective

Application Widget: Widget in the Perspective

Use the Require.js module folder path

in the perspective
Слайд 46

Integrate Integrate parts of Smart UI to other portals

Integrate

Integrate parts of Smart UI to other portals

Слайд 47

Application Widgets: Overview Application Widgets allow to integrate parts of SmartUI

Application Widgets: Overview

Application Widgets allow to integrate parts of SmartUI into

other environments, e.g. portals
Application Widgets are public for integrators
Supported Application widgets are e.g. Nodes Table, Favorites, Shortcut …
Application Widgets expose a simpler interface for integrators
Also used by perspective views to handle application widgets
Widget manifests coming with Application Widgets provide basic documentation for developers
doc/models/widget/widget.discussion/index.html
Слайд 48

Application Widgets: Supported Widgets Tiles Widgets Favorites (doc/widgets/favorites/doc/favorites/index.html) Recently Accessed (doc/widgets/recentlyaccessed/doc/recentlyaccessed/index.html)

Application Widgets: Supported Widgets

Tiles Widgets
Favorites (doc/widgets/favorites/doc/favorites/index.html)
Recently Accessed (doc/widgets/recentlyaccessed/doc/recentlyaccessed/index.html)
My Assignments (doc/widgets/myassignments/doc/myassignments/index.html)
Shortcut
Nodes Table
Metadata

(doc/widgets/metadata/doc/metadata/index.html)
Search Box, Search Results
Слайд 49

Integration Code Sample (NodesTable) csui.onReady2([’csui/widgets/nodestable/nodestable.view’], function (NodesTableView) { var context =

Integration Code Sample (NodesTable)



{
var context = new BrowsingContext(),
nodesTableView = new NodesTableView({
context: context
data: {
start: {id: 2000}
}
}),
nodesTableRegion = new Marionette.Region({el: '#browser'});
GlobalMessage.setMessageRegionView(nodesTableView);
nodesTableRegion.show(nodesTableView);
context.fetch();
});

From Bootstrap to BINF

Слайд 50

Controls Use Generic Controls

Controls

Use Generic Controls

Слайд 51

Generic Controls: Overview Dialogs Node Picker Modal Alerts File Open Perspectives

Generic Controls: Overview

Dialogs
Node Picker
Modal Alerts
File Open
Perspectives
Flow, Grid, Left-Center-Right, Single, Tabbed, Tabbed-flow

Слайд 52

Generic Controls: Node Picker

Generic Controls: Node Picker

Слайд 53

Generic Controls: Node Picker Find samples at csui-sdk-16.1.0/lib/src/csui/dialogs/node.picker/test/index.html csui-sdk-16.1.0/lib/src/csui/dialogs/node.picker/test/index.try.html Find documentation

Generic Controls: Node Picker

Find samples at csui-sdk-16.1.0/lib/src/csui/dialogs/node.picker/test/index.html csui-sdk-16.1.0/lib/src/csui/dialogs/node.picker/test/index.try.html
Find documentation at csui-sdk-16.1.0/doc/dialogs/node.picker/node.picker/index.html
In index.html,

search for url: 'http://murdock.opentext.com/alpha/cs.exe/api/v1', and replace with your CS REST API URL to run the samples
Слайд 54

Generic Controls: Modal Alert

Generic Controls: Modal Alert

Слайд 55

Generic Controls: Modal Alert Find samples at csui-sdk-16.1.0/lib/src/csui/dialogs/modal.alert/test/index.show.html csui-sdk-16.1.0/lib/src/csui/dialogs/modal.alert/test/index.try.html Find documentation at csui-sdk-16.1.0/doc/dialogs/modal.alert/modal.alert/index.html

Generic Controls: Modal Alert

Find samples at csui-sdk-16.1.0/lib/src/csui/dialogs/modal.alert/test/index.show.html csui-sdk-16.1.0/lib/src/csui/dialogs/modal.alert/test/index.try.html
Find documentation at csui-sdk-16.1.0/doc/dialogs/modal.alert/modal.alert/index.html

Слайд 56

Generic Controls: File Open Find documentation at csui-sdk-16.1.0/doc/dialogs/file.open/file.open.dialog/index.html

Generic Controls: File Open

Find documentation at csui-sdk-16.1.0/doc/dialogs/file.open/file.open.dialog/index.html

Слайд 57

Generic Controls: Perspectives, Samples Flow csui-sdk-16.1.0/lib/src/csui/perspectives/flow/test/index.html Grid csui-sdk-16.1.0/lib/src/csui/perspectives/grid/test/index.html Left-Center-Right csui-sdk-16.1.0/lib/src/csui/perspectives/left-center-right/test/index.html Single csui-sdk-16.1.0/lib/src/csui/perspectives/single/test/index.html Tabbed csui-sdk-16.1.0/lib/src/csui/perspectives/tabbed/test/index.html Tabbed-flow csui-sdk-16.1.0/lib/src/csui/perspectives/tabbed-flow/test/index.html

Generic Controls: Perspectives, Samples

Flow
csui-sdk-16.1.0/lib/src/csui/perspectives/flow/test/index.html
Grid
csui-sdk-16.1.0/lib/src/csui/perspectives/grid/test/index.html
Left-Center-Right
csui-sdk-16.1.0/lib/src/csui/perspectives/left-center-right/test/index.html
Single
csui-sdk-16.1.0/lib/src/csui/perspectives/single/test/index.html
Tabbed
csui-sdk-16.1.0/lib/src/csui/perspectives/tabbed/test/index.html
Tabbed-flow
csui-sdk-16.1.0/lib/src/csui/perspectives/tabbed-flow/test/index.html

Слайд 58

Replacing Bootstrap with Binf A namespaced version of Bootstrap as being used by SmartUI

Replacing Bootstrap with Binf

A namespaced version of Bootstrap as being used

by SmartUI
Слайд 59

Bootstrap to BINF: Overview

Bootstrap to BINF: Overview

Слайд 60

From Bootstrap to BINF In SmartUI, you have the complete Bootstrap

From Bootstrap to BINF

In SmartUI, you have the complete Bootstrap styles

and plugins available for building your widgets
Original Bootstrap however is meant to be used exclusively on a page, while SmartUI widgets used in integration scenarios cannot expect to be alone.
As a consequence, there are mutual impacts causing layouts to get distorted, both our own and the environmental
Bootstrap ‘normalizations’ cause impacts on the environmental styles
Other Bootstrap versions in the environments will have impact on us
In order to avoid this, we had to introduce a name-spacing on Bootstrap styles. 
We did this rigorously, as we actually took a snapshot of Bootstrap, which we now call BINF, and modified it to our needs.
Слайд 61

What we did technically 1/2 With BINF, every former Bootstrap style

What we did technically 1/2

With BINF, every former Bootstrap style got

now prefixed with ‘binf-’
e.g. the Bootstrap CSS class btn became binf-btn, dropdown-menu became binf-dropdown-menu, etc.
The jQuery functions calling Bootstrap plugins got prefixed with ‘binf_’
i.e. if you want e.g. to open a dialog, you now have to call $el.binf_modal(), instead of the former $el.modal()
We introduced a namespacing in different places, which guarantees that BINF only has influence where we want it to have. The namespace is the CSS class 'binf-widgets'.
I.e. in any html container having this class assigned, BINF styles and settings become active.
Слайд 62

What we did technically 2/2 We did this name-spacing also for

What we did technically 2/2

We did this name-spacing also for so

called normalizations
So e.g. the former Bootstrap div { margin: 0px; } became in BINF .binf-widgets div { margin: 0px; }
This avoids that we are having an impact on environments into which we integrate
without the namespace we potentially influence any div on the page where a SmartUI widget is integrated.
The name-spacing changed the precedence of certain selectors, which makes it necessary that you add to single-class selectors the class .binf-widgets.
E.g. if you have a style spec like .my-class {...} make a .binf-widgets .my-class {...} of it.
Слайд 63

Style Overrides Customize SmartUI by overriding CSS styles

Style Overrides

Customize SmartUI by overriding CSS styles

Слайд 64

Table of Contents Motivation Customization Example What Is Style Override Anatomy

Table of Contents

Motivation
Customization Example
What Is Style Override
Anatomy Of Style Overrides
Smart UI

Settings
Custom Page Using CS UI Widgets
Слайд 65

Motivation Maintaining a complete Smart UI styling is next to impossible.

Motivation

Maintaining a complete Smart UI styling is next to impossible.
Parametrized theming

became to be too much to be delivered in December.
Slow adding of theming parameters will not satisfy the needs of current customers.
Style Overrides offer the same power as full styling and will complete the parametrized styling in more complicated scenarios.
Слайд 66

Customization Example

Customization Example

Слайд 67

What Is Style Override A selector contains an original style defined

What Is Style Override

A selector contains an original style defined by

Smart UI default theme:
body.binf-widgets {
background: linear-gradient(to bottom, #004b71 0%, #00a4d8 100%);
background-attachment: fixed;
}
The same selector with an additional style either replaces or extends the original stykle:
body.binf-widgets {
background: linear-gradient(to bottom, #00714b 0%, #00d8a4 100%);
}
Слайд 68

Anatomy Of Style Overrides Style overrides are a directory with stylesheets,

Anatomy Of Style Overrides

Style overrides are a directory with stylesheets, fonts

and images, which are supposed to be loaded via a single (master) stylesheet, which is supposed to be placed after the original Smart UI main stylesheet.
alberi/
fonts/ Font faces used in the local stylesheet
images/ Images referred from the local stylesheet
damascus-pattern.jpg
favourites.svg
overrides.css “master” stylesheet with overridden styes
Слайд 69

Smart UI Settings Available only with CS 16.0.3 (December)

Smart UI Settings
Available only with CS 16.0.3 (December)

Слайд 70

Custom Page Using CS UI Widgets Find the element, which loads

Custom Page Using CS UI Widgets

Find the element, which loads

the original Smart UI stylesheet.
Insert a new element after the original one, point it to the overriding
stylesheet and set the extra attribute “data-csui-theme-overrides” on it to
“true”.
href="{cs_support_url}/csui/themes/carbonfiber/theme.css">