EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application

Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 5 (a)
Building a QEWD Application
First Steps
(Using Windows & Caché)
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed

Pre-requisites
• Node.js installed
• Caché installed and running
• cache.node installed
• QEWD installed and running
• At least a basic text editor available
• These steps are covered in Part 4 of this
course

Assumptions in this tutorial
• Windows & Caché
• QEWD installed in C:qewd
• Default HTTP configuration for Express
– ie not SSL / HTTPS
• ewd-xpress port = 8080
• IP address of QEWD machine:
– 192.168.1.100
• Change paths etc accordingly for your set-up

Let’s Get Started…

Create new application
• Create new directory:
– C:qewdwwwdemo1
• Create index.html file
– C:qewdwwwdemo1index.html
<html>
<head>
<title>Demo QEWD application</title>
</head>
<body>
This is a demo!
</body>
</html>

Try loading in browser
• http://192.168.1.100:8080/demo1/index.html
• Should display:
• If so, QEWD successfully fetched your
index.html file from C:qewddemo1index.html
– How did it know to do that?
This is a demo!

Web Server Root Path
• Look in:
– C:qewdnode_modulesqewdlibmaster.js
• Around line 95:
var config = {
managementPassword: params.managementPassword || 'keepThisSecret',
serverName: params.serverName || 'ewd-xpress',
port: params.port || 8080,
poolSize: params.poolSize || 1,
webServerRootPath: params.webServerRootPath || process.cwd() + '/www/',
no_sockets: params.no_sockets || false,
qxBuild: qx.build,
ssl: params.ssl || false,
cors: params.cors || false,
masterProcessPid: process.pid,
database: params.database,
errorLogFile: params.errorLogFile || false,
mode: params.mode || 'production',
…etc
cwd = Current Working Directory
ie where you started QEWD

Web Server Root Path
• Look in:
– C:qewdnode_modulesqewdlibmaster.js
• Around line 95:
var config = {
managementPassword: params.managementPassword || 'keepThisSecret',
serverName: params.serverName || 'ewd-xpress',
port: params.port || 8080,
poolSize: params.poolSize || 1,
webServerRootPath: params.webServerRootPath || process.cwd() + '/www/',
no_sockets: params.no_sockets || false,
qxBuild: qx.build,
masterProcessPid: process.pid,
database: params.database,
errorLogFile: params.errorLogFile || false,
mode: params.mode || 'production',
bodyParser: params.bodyParser || false
};
So in our case,
http://192.168.1.100:8080/
maps to C:qewd/www/

QEWD URL mapping
http://192.168.1.100:8080/{applicationName}/{pageName}
maps to
C:qewd/www/{applicationName}/{pageName}
So:
http://192.168.1.100:8080/demo1/index.html
maps to
C:qewd/www/demo1/index.html

Detect that the page is ready
<html>
<head>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log('everything loaded!’);
});
</script>
This is a demo!
</body>
</html>

<html>
<head>
</head>
<body>
<script>
});
</script>
This is a demo!
</body>
</html>
Load jQuery from CDN site
Could use local installation

<html>
<head>
</head>
<body>
<script>
});
</script>
This is a demo!
</body>
</html>
jQuery function detects that
Page DOM is ready
All JavaScript, CSS loaded

Try it out
• Reload the URL in the browser
– Click Reload button
• To see output from console.log:
– In Chrome, open menu
• Developer Tools

Try it out
• Reload the URL in the browser
– Click Reload button
– In JavaScript console, you’ll now see:

Make the page dynamic
• Communicate with QEWD back-end
• To do this, need to use another EWD 3
module:
– ewd-client
• Client-side JavaScript file / module
• Provides the secure APIs to communicate between
a browser or React Native mobile device and the
ewd-xpess back-end

Make the page dynamic
• Install ewd-client:
– Open Command Prompt Window
• Then copy the file:
– C:qewdnode_modulesewd-clientlibprotoewd-client.js
• to:
– C:qewdwwwewd-client.js
cd qewd
npm install ewd-client

Loading ewd-client
<html>
<head>
</head>
<body>
<script src="/ewd-client.js"></script>
<script>
});
</script>
This is a demo!
</body>
</html>
Loads it from C:qewdwwwewd-client.js

Check that it loads
• Reload index.html in browser
• Click the Sources tab in the Developer
Tools window
Successfully loaded

Using WebSockets
• In this demo we’ll use WebSockets as the
means of communication between
browser and the QEWD back-end
• We could use Ajax instead
– WebSockets are faster and more flexible
– Ajax may be more scalable at high-end
• ewd-client normalises the two transports
so it’s easy to switch between the two

Using WebSockets
• QEWD relies on a standard module
named socket.io to provide WebSocket
support
• You must therefore load socket.io client-
side JavaScript library into the browser

Loading socket.io
<html>
<head>
</head>
<body>
<script src="/socket.io/socket.io.js"></script>
<script>
});
</script>
This is a demo!
</body>
</html>
Loads it from a virtual directory
created by socket.io at back-end

Ready to communicate with QEWD
• Everything is now in place to use QEWD
and ewd-client

Starting ewd-client
• EWD.start() function
– Creates the client environment
• Everything protected within a closure
– Establishes a web socket connection to the QEWD
back-end
– Registers the client application with QEWD
• Will examine this step in more detail later
• Must not be invoked until everything has
been loaded into the browser’s DOM

Starting ewd-client
<html>
<head>
</head>
<body>
<script>
EWD.start('demo1', $, io);
});
</script>
This is a demo!
</body>
</html>
Safe to start within $(document).ready() function
‘demo1’ is our application name
$ is jQuery object
io is socket.io object

Try it out
EWD has started successfully and
registered the application on QEWD

Ensuring that EWD is safe to use
• EWD.start() takes time to complete and
involves several round-trips between client
and back-end
• How do we know when it’s completed and
safe for us to begin communicating
between client and back-end?

ewd-registered Event
• When EWD.start() completes, it emits an
event:
– ewd-registered
• This can be used to safely commence
user functionality of application

Handling the ewd-registered event
<html>
<head>
</head>
<body>
<script>
EWD.on('ewd-registered', function() {
// OK the app is now ready for use
console.log('*** application registered and ready for us to start!!');
});
});
</script>
This is a demo!
</body>
</html>

Try it out

Tidy up the page
• Bad practice to have in-line JavaScript
within HTML pages
– Move to a separate JavaScript file
• C:qewdwwwdemo1app.js

Revised application files
<html>
<head>
</head>
<body>
<script src=”app.js"></script>
<div id=”content”>
Content goes here
</div>
</body>
</html>
EWD.on('ewd-registered', function() {
// EWD app code goes here
});
});
index.html
app.js

Now we’re ready to begin
• Use these index.html and app.js files as
templates for other applications
– Creates the basic environment needed for all
your hand-crafted QEWD applications

EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application

Similar to EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application (20)

More from Rob Tweed

More from Rob Tweed (12)

Recently uploaded

Recently uploaded (20)

EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application