u97 javascript webinar

www.uniface.coml ectures.

l ectures.

JavaScriptMichael TaylorProduct ManagerMay 1, 2023

l ectures.


Agenda

• JavaScript Basics• Using Uniface’s JavaScript API• Integrating DSP’s into existing websites


What is JavaScript• Programming language

High-level, weakly-typed, dynamic, interpreted Standards based - ECMAScript

• Started as a web automation language• Highly optimized

Google v8 engine

• Full access to (D)ocument (O)bject (M)odel• It is not Java

Java is like Star Trek – JavaScript is like Star wars


My First JavaScript• Defined inside <script> tag• Can be in head or body• Normally in-line as the page is passed

• Can be set to async


JavaScript Variables• JavaScript variables are containers for storing data• Should be declared

Or it will be created globally

• No data type specified Can contain anything String, Number, Boolean, Array, Object, undefined

var myArray = [“Volvo”, “Saab”, “Ford”]; myArray[0];

var myObject = {myProperty1: “ABC”, myProperty2: 1000}; myObject.myProperty1; myObject[“myProperty1”];


JavaScript Functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).


JavaScript Functions

• Name• Parameters

only input

• Can return a value


Separate JS files

• Improve loading times• Readability• Encapsulate functionality• Include 3rd party utilities


Conditions


Operators

== equal to

=== equal value and equal type

!= not equal

!== not equal value or not equal type

> greater than

< less than

>= greater than or equal to

<= less than or equal to

? ternary operator


Loops

• break/continue {label}


More (advanced) Information

• Objects Constructors Prototypes

• Closures• Errors and exceptions


Agenda

• JavaScript Basics• Using Uniface’s JavaScript API• Integrating DSP’s into existing websites


Uniface JavaScript API• uniface Instance

Entity Occurrence

Field

• Enables interaction with fields and data in browser

• Frames within frames Similar to Client/Server

Documentation: Uniface Reference -> APIs: JavaScript


Data types (Examples)• String

get/setValue

• Object get/setProperties

• Array Get/setValrepArray


webOperation/webtrigger

• Instructs Uniface to • Client side JavaScript operation

• Callable from API or web activate• Attach an event (onClick, OnChange, detail)

• Scope (Optional – defaults to input/output)

• Params (Optional – IN/INOUT only)• JavaScript/EndJavaScript (optional)


Context• weboperation

“this” is the instance

• webtrigger “this” is the field

• getParent()


Promises

A promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value or reason for failure will materialize.


What do they look like


Agenda

• JavaScript Basics• Using Uniface’s JavaScript API• Integrating DSP’s into existing

websites


Uniface in an existing website• Client/Server communication• State• Scoping• Blocking• Re-use


Configure Uniface

• wasv.asn Set the location of the Uniface JS/CSS runtime

$uniface_runtime_base_url

Set the location to load dspjs files $js_base_url

• web.xml Security – CORS Google - tomcat CORS


Sample CORS section

<filter><filter-name>CorsFilter</filter-name><filter-class>

org.apache.catalina.filters.CorsFilter</filter-class>

</filter>

<filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern>

</filter-mapping>


Using uniface.js


Thank You / Q & A

Thank You!Q & A


Follow us online

uniface.comunifaceinfo.com/forum

http://www.uniface.com/

http://unifaceinfo.com/forum/

u97 javascript webinar

Technology