34

Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

  • Upload
    uniface

  • View
    242

  • Download
    8

Embed Size (px)

Citation preview

Page 1: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Uniface Responsive Web1 of 3 Getting Started

David Akerman ndash Solution Consultant

AgendaDemo Starter ApplicationWhy

PrerequisitesProject ConsiderationsEnvironmentDevelopment

Why

Any time anywhereMultiple Devices

Shared Business LogicBYOD (varied screen size format etc)

Varied LocationOffice home mobile workingConnected offlineInternet intranet

Improve User Interface amp Experience

Deployment and Updates

Uniface Solution Dynamic Server Pages

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 2: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

AgendaDemo Starter ApplicationWhy

PrerequisitesProject ConsiderationsEnvironmentDevelopment

Why

Any time anywhereMultiple Devices

Shared Business LogicBYOD (varied screen size format etc)

Varied LocationOffice home mobile workingConnected offlineInternet intranet

Improve User Interface amp Experience

Deployment and Updates

Uniface Solution Dynamic Server Pages

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 3: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Why

Any time anywhereMultiple Devices

Shared Business LogicBYOD (varied screen size format etc)

Varied LocationOffice home mobile workingConnected offlineInternet intranet

Improve User Interface amp Experience

Deployment and Updates

Uniface Solution Dynamic Server Pages

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 4: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Any time anywhereMultiple Devices

Shared Business LogicBYOD (varied screen size format etc)

Varied LocationOffice home mobile workingConnected offlineInternet intranet

Improve User Interface amp Experience

Deployment and Updates

Uniface Solution Dynamic Server Pages

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 5: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Improve User Interface amp Experience

Deployment and Updates

Uniface Solution Dynamic Server Pages

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 6: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Deployment and Updates

Uniface Solution Dynamic Server Pages

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 7: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Uniface Solution Dynamic Server Pages

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 8: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Javascript API

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 9: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Uniface Mobile

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 10: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Prerequisites

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 11: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Core Skills and Competencies

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 12: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Resources to aid UI development

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 13: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Project Considerations

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 14: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Typical ApproachRequirementPlanTrainAnalysePrepareProof of ConceptEstimateDevelop Modernise Extend

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 15: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

User Experiencebull Familiar look and feel or new UI

Scalability amp Fault Tolerancebull Load Balancingbull Auto-failover or manual

Securitybull Authenticationbull Resilience

Performancebull SLA targets

Non-functional Requirements

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 16: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Environment

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 17: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Uniface Web Request Dispatcher

libwrdjar in Tomcat

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 18: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Multiple Web ApplicationsDifferent URL per appenvironment

httpserverprodwrdmainhttpserverapp1testmain

Each environment has web config +Urouter configuration

Context Servlet ComponentProtocol Serverport

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 19: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Configuration Tomcat (Context)httpserverportWebStartTomcat virtual directory definitiontomcatconfCatalinalocalhostWebStartxml

Points to project web folderltContext docBase=DProjectswebstartwebgt ltValve className=orgapachecatalinavalvesAccessLogValve prefix=tabs- suffix=log pattern=commongt

ltContextgt

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 20: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Configuration Tomcat (wrd)Physical folder contains WEB-INFwebxml DProjectswebstartwebWEB-INFwebxml

webxml defines servlet mapping eg httpserverportWebStartwrd

Servlet defines connections to Uniface UROUTER

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 21: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Tomcat webxml servlet configurationlt-- Uniface W(eb) R(equest) D(ispatcher) Servlet --gtltservletgt ltservlet-namegt wrd ltservlet-namegt ltservlet-classgt comcompuwareunifaceurdWRDServlet ltservlet-classgt ltinit-paramgt ltparam-namegtMIDDLEWAREltparam-namegt ltparam-valuegtUV8localhost+13001|userver||webstartltparam-valuegt ltinit-paramgt

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 22: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Tomcat webxml servlet mapping ltservlet-mappinggt ltservlet-namegtwrdltservlet-namegt lturl-patterngtwrdlturl-patterngtltservlet-mappinggt

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 23: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Uniface Common resourceseg unifacewebappsunifacecommonunifacejsWeb folder commonOverride in wasvasn[SETTINGS]$UNIFACE_RUNTIME_BASE_URL=unifacecommonor Tomcat Context (virtual dir)CommontomcatconfCatalinalocalhostWebStartcommonxml

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 24: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Development

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 25: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

User Interface ElementsNavigationTabsModality amp Overlays Icons Validation amp business logicError handling amp messagingResponsivenessAccessibility

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 26: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

DSP Containers Nav

Page

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 27: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Content DSP Container

DSP Container Flow

2 NAV DSP

Page DSP Container

ALERT DSP Container

MENU 1

1 LOGIN DSPALERT DSP Container

MENU 2 MENU 3

LOGIN

Username Password

MAIN DSPALERT DSP

MESSAGE

2a PAGE DSP

1 CONTENT = ldquoLOGINrdquo

2 CONTENT = ldquoNAVrdquo

2a NCONTENT = ldquoPAGErdquo

NAV DSP

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 28: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

ConsiderationsLayout HTML CSS LayoutLong transaction Browser persistence (eg tabs)Client-side code JavaScript webtriggersValidation (Web)triggersError handling (Web)operationsVariables State managementHitlist Data pagingAuthentication Session managementFrameworks Templates Libraries amp Snippets

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 29: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Desktop vs Web No Structure Editor Triggers Statements amp functions Stateless Database transactions Security Performance Fault Tolerance

Function Replaced by

Macro activate of operation$prompt In Javascript in 9702$dbocc Javascript OccurrencegetStatus Function if

necessary on client sideedit display $editmode

Displaymode can be achieved in DSPs only by use of non editable widgets

$formtitle Headers in HTML or in Uniface fieldsmessage WebmessageApexit exit (0) do not leave with negative statusaskmess Separate Dialog (DSP or JavaScript) with buttons

for the answer$curhits No stepped hitlist in web$fieldcheck No option to force validation with $fieldcheck If

immediate reaction is neccessary best check for change in Javascript

$instanceparent Function works also in DSPs but sequence of activation and perhaps DSPs itself different from CS

$batch DSPs canlsquot run in batch Forms can be kept for batch usage

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 30: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Application Architecture

Features egNavigationModalityError Handling + MessagingTab control

Uniface defaultsAuthentication Inject JSCSS external HTML layout

Component TemplatesCommon types eg List Maintenance Tab

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 31: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Resources Uniface Help Tutorials Uniface Training unifaceinfo - Samples forums blogs youtubecomuniface githubcomuniface- Frameworks amp tools

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 32: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

WalkthroughWebStart App

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34
Page 33: Uniface Lectures Webinar - Building Responsive Applications with Uniface: Getting Started

Thank Youamp Questions

  • Slide 1
  • Slide 2
  • Agenda
  • Slide 4
  • Any time anywhere
  • Improve User Interface amp Experience
  • Deployment and Updates
  • Uniface Solution Dynamic Server Pages
  • Javascript API
  • Uniface Mobile
  • Slide 11
  • Core Skills and Competencies
  • Resources to aid UI development
  • Slide 14
  • Typical Approach
  • Non-functional Requirements
  • Slide 17
  • Uniface Web Request Dispatcher
  • Multiple Web Applications
  • Configuration Tomcat (Context)
  • Configuration Tomcat (wrd)
  • Tomcat webxml servlet configuration
  • Tomcat webxml servlet mapping
  • Uniface Common resources
  • Slide 25
  • User Interface Elements
  • DSP Containers
  • DSP Container Flow
  • Considerations
  • Desktop vs Web
  • Application Architecture
  • Resources
  • Slide 33
  • Slide 34