Building Web-Enabled, Cross-Platform Applications with

MiServer 3.0

Brian Becker, Applications Tools Group ManagerMorten Kromberg, CTO

Slide 2

Agenda

Session 1

• Intro and Overview–Motivation–Demo–Install/Config–Objects

Slide 3

Agenda

Session 2

• Building Pages–Widgets/APIs–Events–Data Binding–Sample Page

Slide 4

Agenda

Session 3

• Web Apps and Services–Web Applications

• Session Data–RESTful Web Services

• Sample Service–Questions

Slide 5

To Build Web Applications...1. Develop expertise in some combination of

– HTML– CSS– JavaScript– jQuery– HTTP

2. Host the web application– Learn to install, configure and manage IIS or

Apache or– Find someone else to host your web application

Slide 6

To Build Web Applications...1. Develop expertise in some combination of

– HTML– CSS– JavaScript– jQuery– HTTP

2. Host the web application– Learn to install, configure and manage IIS or

Apache or– Find someone else to host your web application

Slide 7

To Build Web Applications...1. Download and unzip MiServer2. Learn a basic set of APL tools to manipulate

web content

Our goal is to make it easy and natural for someone familiar with Dyalog APL to build rich, browser-based user interactions.

MiServer 3.0 – Why?

• Because it's easy...– To provide your users access to your application

• All they need is a browser• Run from any operating system (that has a browser)• Run from any platform (that has a browser)

– Desktop, Laptop, Tablet, Phablet, Phone...

• No software or updates to distribute, download, or install

• Customers are always running the latest software– To build and deploy applications

• "Easy as ⎕WC"• Run server on any platform where Dyalog and Conga

run– Windows, Linux, AIX, Mac OS!, (watch this space)

Easy as ⎕WC? Let's see...

• Disclaimer:

I love ⎕WC

⎕WC

Easy as ⎕WC? Let's see...

Controls...

Callbacks

Layout of Controls

Slide 14

MiServer

• Stand-alone APL-based Web Server• Tools to Generate Web Content• Integrates Dyalog and Web

Environment

Slide 15

APL-based Web Server

• Can serve both web pages and web services

• All you need is a TCP/IP port • Any platform where Dyalog APL runs• Client – any platform with a browser• Run locally, intranet, internet• Extensible – open architecture

Slide 16

Tools to Easily Generate Web Content• Web pages consist of a combination of:

– HTML– JavaScript

• Raw JavaScript• JavaScript Libraries like jQuery, Syncfusion, et al• JSON

– CSS

Slide 17

Integrates Dyalog with the Web• Event handling• Data binding (watch this space)• Relational Database Interface (SQAPL)

Slide 18

Hands On – Install MiServer• Either:

– Download from:• https://github.com/Dyalog/MiServer

– Copy from available flash drives• Unzip the zip• )load miserver 1 Start 'DyNA'

• Let's explore...• http://localhost:8080/

Slide 19

A Few Terms...

• MiSite a MiServer web site• MiPage a MiServer web page

also the name of the base class for pages

• EAWC Easy As WC (⎕WC)• HTTPRequest object representing a

request from the client (browser)

• Widget a small progam you can embed in your

web page• API Application Programming

Interface (how you talk to a widget)

Slide 20 of

Anatomy of a MiPage

]load [ws]\DyNA\inputform• :class inputform : MiPage• ∇Render• ∇r ← CallbackFn• http://localhost:8080/inputform

We've Got a Lot of Class(es) ]load [ws]\dyna\indexDyNApage page template for this conference

adds "look and feel" EAWC Easy As WC template

adds shortcuts for direct access to widgets MiPage base class for all MiPages

adds MiServer "cognizance", events, etc. HtmlPage base class for all HTML pages

adds page "wrapper" HtmlElement core class for all HTML elements

Pay No Attention to the Classes Behind the Curtain

HTTPRequest

Break inputform.dyaloghttp://localhost:8080/inputformExamine _Request

Data Binding

The challenge is synchronizing (at least) two copies of the data, one in the browser and one on the server. Yesterday :public fieldsToday _PageData and ∇GetTomorrow Server Sent Events/AJAX

WebSockets

Working with Content

• To add things to a page or object, use the Add method.

• For raw HTML elementsAdd element {content} {attributes}Add h2 'Hello World' 'class=blue'

• For all widgetsAdd widget {selector}Add ejDatePicker 'myPicker'

Working with Content

• Add returns a reference to the added object d←Add div 'This is a div element' d.Add p 'This is an added p element'• Seven common HTML attributes are directly available –

id, name, class, value, title, type, styleExample: 4 ways to set the class for an h2 element Add h2 'Hello' 'class=blue' (Add h2 'Hello').class←'blue' (Add h2 'Hello').Set 'class' 'blue' (Add h2 'Hello').Attr[⊂'class']←⊂'blue'

• Experiment in immediate execution: h←⎕NEW _html.h2 h.Render

Event Handling

There are 2 basic ways to specify event handling• Use the element's On methodmyDiv.On 'click' 'myCallback' • Add a Handler to the pageAdd Handler '#mydiv' 'click' 'myCallback'

Event Handling

Sending a response back to the clientThere are 4 basic responses that can be sent back by a callback function

Wonderful World of Widgets• MiServer 3 has over 100 widgets

between Syncfusion, jQueryUI, third party, and Dyalog-built– Charts, Grids, Input Elements, Content

Formatters...• Where it makes sense, we are in the

process of implementing APL "friendly" APIs for widgets.

• Mobile widget libraries will follow this summer.

Exercise – Book a Stay

Build a page with• 2 Datepickers

– one for check-in– one for check-out

• A drop down selection of room types and costs

• A button which will execute a callback to calculate the number of nights and total cost

• The callback function should display something like: "King-size room for 4 nights @ $150 = $600" on the page

Web Services

• What is a web service?– SAWS – SOAP-based– MiServer – "RESTful"http://localhost:8080/pv?FV=10000&r=.08&n=10

Exercise - Mortgage Web Service• Copy the mortgage web page and

convert it to be a web service• Use the PV web service as a

guideline

QUESTIONS?