Transcript
Page 1: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

„Take the RISC!“CaptainCasa

Enterprise Client

XII. Community Meeting

Page 2: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Agenda

• 10:00 Opening / Positioning / 2017 in a Nutshell• 10:20 Issues around mobile applications• 10:45 Absolute positioning / z-layer arrangement• 11:00 CaptainCasa & PNA• 11:40 Coffee Break• 11:50 Entering the SAP Cloud• 12:30 Page Bean Components – New application controls

Page Bean Components – DOF reloaded• 13:00 Lunch Break• 13:45 Wow!ing your dialogs• 14:15 SpringBoot• 14:35 HTML inside Java• 14:50 Isolating User Activities• 15:10 Security Issues• 15:30 Coffee Break• 16:00 CaptainCasa Organization

Roadmap 2018 / Discussion

Page 3: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Still the same old picture

Web

UI H

ypes

Bu

s. A

ppl

icat

ion

Life

cyc

le

Page 4: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Where we are

Page 5: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Roadmap 2017

JavaFXBusinessClient

ApplicationComponents

Swing

Do not touch!

Active Product

RISC-HTML

Hot Product

???

Page 6: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Activities 2017

JavaFX

BusinessClient

ApplicationComponents

Swing

Do not touch!

Active Product

RISC-HTML

Hot Product

Some components...

Page 7: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Activities 2017

JavaFX

BusinessClient

ApplicationComponents

Swing

Do not touch!

Active Product

RISC-HTML

Hot Product

Some components...

Page 8: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Activities 2017Do not touch!

Active Product

Hot Product

JavaFX

BusinessClient

ApplicationComponents

Swing

RISC-HTML

Some components...

DevelopmentServices

+

+2+1

+2+1

Page 9: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

CaptainCasa

• Deutschland

– Björn Müller– Dr. Ulrich Hirsch

• BulgarienEvolution IT

– Nikolay Nikolov– Rostislav Gardinov– Alexander Krastev– Yulian Savov– Ivan Tonchev

Page 10: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Projects

• Cloud based Access Control Management• Contract document management• MES Planning Board („Fertigungsleitstand“)• BPMN Modelling Tool

Page 11: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Framework

Micro Kernel

RISC Browser Architecture

#Elements#Attributes

#CSS

„2“ El.

Control Libraries (.js)based

OnNucleus Elements

Complex Instruction SetClientCISC

Reduced Instruction SetClientRISC

Rendering„Algorithmic“

Rendering „Execution“

Page 12: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

RISC-HTML in Community

• All new customers / projects 100% RISC based

• Swing users– Swing is „Legacy Technology“ - and sometimes it's

not simple to kick it out...– Transfer-to-RISC projects with very good results

● Goood level of compatibility!● Performance on Chrome, Edge, Firefox

excellent, on IE 10,11 ok• FX user

– ...luckily HTML pressure is coming from customer site! ;-)

Page 13: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Positioning

Page 14: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

RISC-HTML outside Community

• Direct competitors– Vaadin

• Indirector competitors– AngularJS– ReactJS– ...

– Client side development <=> Server side development

Page 15: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Mobile Applications

Page 16: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Positioning

• CaptainCasa requires some server processing– „Stand alone“ is only possible if server can run on

local device● Industry Terminals● Windows Tablets

– Direct usage of JS control library...● Experience: JS quite far away from Java...

Page 17: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Scaling

• Query Parameter:

&ccscale=1.25

Page 18: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Image Resolution

• By default– Image size == physical size of Image

• But– Explicit setting of WIDTH/HEIGHT– Implicit setting by file name

● /images/save_16x16.png

Page 19: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Sliding through lists

• Implementation SCROLLPANE– Not too long lists...– Soft touch scrolling

• Implementation FIXGRID– No restrictions– Touch scrolling

Page 20: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Nice controls

• SHIFTCONTAINER• SLIDECONTAINER

Page 21: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Keyboard Input

• By default: managed by browser• Style

– switch CC keyboard support on via style parameter

Page 22: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Adaptive Layout

• ROWADAPTIVEAREA• ...

Page 23: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

SIZETRANSFER

• PANE SIZETRANSFER

• Sehr nützlich: ROWPAGEBEANINNERPART

Page 24: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Animations

• „Curtain-based“ animations• Sizing based animations

Page 25: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

AbsolutePositioning

/Layering

Page 26: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Available controls

• Container Management– OVERLAYAREA– OVERLAYAREAITEM

• Drawing– PAINTAREA– PAINTAREAITEM– PAINTAREALINEITEM

• ...actually OVERLAYAREA is just a functionally restricted version of PAINTAREA...

Page 27: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

PAINTAREAITEM

• New functions– ITEMID– LINEIDSENDING/STARTING– BOUNDSANCHOR

Page 28: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Access ControlManagement

Page 29: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Current Service Structure

ACM

ACMSuccess Factor

Connector

ACMIOT

Connector

Success Factors

IOT Box

Page 30: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Current Service Structure

ACM

ACMSuccess Factor

Connector

ACMIOT

Connector

Success Factors

IOT Box

FlatData

Importer

QueryExporter

REST / XML

Page 31: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

PageBeanComponents

Page 32: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

PageBean Components

• == logically the same as normal PageBeans

• But– all required information packaged with jar-file

● Layout (.jsp)● Resources (.png, ...)● Translations (.properties)

Page 33: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Layout Editor

• Much simpler editing of page beans...

Page 34: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Usage

• CCDataTree• CCTextDiff

Page 35: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

DOF Data Object Framework

• Fast development of boring CRUD screens• High level of extensibility

– UI design level– Logical level

Page 36: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Security Issues

Page 37: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

XSS – Cross Site Scripting

• Encoding aller String Inhalte by default im Client

Page 38: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Explicit Sanitizing by „Free Style“ Components

• TEXTPANE• SIMPLEHTMLEDITOR

• Sanitizing based on Google JavaScript algorithm– Positive list of HTML4 elements

Page 39: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

By the way...: SQL Injection?

• For all JDBC users:

What is the ultimative way of protecting your DB-code against SQL injection?

Page 40: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Session ID Hijacking

• Switch SecurityFilter on! (!!!)

Page 41: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

File access on server side

• Not allowed file access...

• CaptainCasa– FileManager

● Explicit configuration of directories that can be accessed

Page 42: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

PASSWORD Input

Page 43: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

„Isolating“User Activities

Page 44: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

BLOCKABLEAREA

Page 45: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Modal Popup

• setLeftTopReference*(id)– Top– Bottom– Centered

• setHighlightReference()• setOpacity()• setScreenBackground()

Page 46: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Sammelsurium

Page 47: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

CALENDAR/FIELD with background info

Page 48: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Rounding

Page 49: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

BLOCKABLEAREA

Page 50: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

DRAWAREA

Page 51: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Layout Editor - Search

Page 52: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

SAP Icon Font

Page 53: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Flexible TREENODE

Page 54: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Color Picker

Page 55: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Tips und Tricks!

Page 56: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Tips und Tricks

• Übersetzungstoleranz bei Labeln• Expression Manager• pbx()

Page 57: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC Roadmap 2018

Page 58: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Shortcuts to using CaptainCasa

• Frameworks– Maven– Spring Boot

• Development Environment– IntelliJ– (NetBeans?)

• Simplify first steps– Deliver basic scenarios

Page 59: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

UI Components / Features

• Right to Left

• PageBeanComponents– DOF!– ...and others!

Page 60: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Services

• Provide solid service packages

– CaptainCasa DE/BG

– Partner Network

Page 61: „Take the RISC!“ · RISC Browser Architecture #Elements #Attributes #CSS „2“ El. Control Libraries (.js) based On Nucleus Elements Complex Instruction Set Client CISC Reduced

Cap

tain

Cas

a En

terp

rise

Clien

t R

ISC

Roadmap 2018

Services

RISCClient

Swing (Maintenance)

FX (Maintenance)

PageBeanComponents


Top Related