building web-enabled, cross-platform applications with miserver 3.0 brian becker, applications tools...
TRANSCRIPT
![Page 1: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/1.jpg)
Building Web-Enabled, Cross-Platform Applications with
MiServer 3.0
Brian Becker, Applications Tools Group ManagerMorten Kromberg, CTO
![Page 2: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/2.jpg)
Slide 2
Agenda
Session 1
• Intro and Overview–Motivation–Demo–Install/Config–Objects
![Page 3: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/3.jpg)
Slide 3
Agenda
Session 2
• Building Pages–Widgets/APIs–Events–Data Binding–Sample Page
![Page 4: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/4.jpg)
Slide 4
Agenda
Session 3
• Web Apps and Services–Web Applications
• Session Data–RESTful Web Services
• Sample Service–Questions
![Page 5: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/5.jpg)
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
![Page 6: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/6.jpg)
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
![Page 7: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/7.jpg)
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.
![Page 8: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/8.jpg)
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)
![Page 9: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/9.jpg)
Easy as ⎕WC? Let's see...
• Disclaimer:
I love ⎕WC
⎕WC
![Page 10: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/10.jpg)
Easy as ⎕WC? Let's see...
![Page 11: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/11.jpg)
Controls...
![Page 12: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/12.jpg)
Callbacks
![Page 13: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/13.jpg)
Layout of Controls
![Page 14: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/14.jpg)
Slide 14
MiServer
• Stand-alone APL-based Web Server• Tools to Generate Web Content• Integrates Dyalog and Web
Environment
![Page 15: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/15.jpg)
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
![Page 16: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/16.jpg)
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
![Page 17: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/17.jpg)
Slide 17
Integrates Dyalog with the Web• Event handling• Data binding (watch this space)• Relational Database Interface (SQAPL)
![Page 18: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/18.jpg)
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/
![Page 19: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/19.jpg)
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)
![Page 20: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/20.jpg)
Slide 20 of
Anatomy of a MiPage
]load [ws]\DyNA\inputform• :class inputform : MiPage• ∇Render• ∇r ← CallbackFn• http://localhost:8080/inputform
![Page 21: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/21.jpg)
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
![Page 22: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/22.jpg)
HTTPRequest
Break inputform.dyaloghttp://localhost:8080/inputformExamine _Request
![Page 23: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/23.jpg)
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
![Page 24: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/24.jpg)
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'
![Page 25: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/25.jpg)
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
![Page 26: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/26.jpg)
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'
![Page 27: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/27.jpg)
Event Handling
Sending a response back to the clientThere are 4 basic responses that can be sent back by a callback function
![Page 28: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/28.jpg)
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.
![Page 29: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/29.jpg)
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
![Page 30: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/30.jpg)
Web Services
• What is a web service?– SAWS – SOAP-based– MiServer – "RESTful"http://localhost:8080/pv?FV=10000&r=.08&n=10
![Page 31: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/31.jpg)
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
![Page 32: Building Web-Enabled, Cross-Platform Applications with MiServer 3.0 Brian Becker, Applications Tools Group Manager Morten Kromberg, CTO](https://reader030.vdocuments.mx/reader030/viewer/2022033022/56649e0c5503460f94af4d4f/html5/thumbnails/32.jpg)
QUESTIONS?