U97 JavaScript Webinar

www.uniface.comlectures.
lectures.

JavaScript
Michael Taylor
Product Manager
April 15, 2016
lectures.

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

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.com
unifaceinfo.com/forum

U97 JavaScript Webinar

More Related Content

What's hot

Viewers also liked

Similar to U97 JavaScript Webinar

More from Uniface

Recently uploaded

U97 JavaScript Webinar