''' an introduction to

1

• ... an introduction to
• Writing Web Applications in Dyalog
• Morten Kromberg
• (with BIG thanks to
• Nicolas Delcros and Stefano Lanzavecchia)
• Dyalog User Conference 2006

Version 1 October 2006
2
Agenda

• 1. Introduction to HTML
• 10 or so HTML tags you NEED to know
• Making it look nice using Style Sheets
• Input Forms in HTML
• 2. Microsoft Internet Information Services
• The Dyalog.Net IIS Tutorial
• Advanced topics Custom Controls and Session
  Handling
• 3. Web w/out IIS WildServer 2006

Web Applications at Dyalog 06
3
Course Format

• Three First sessions
• Morten talking for 10-30 mins at a time
• Frequent Experiments and time for questions
• Coffee or Lunch
• Final Session
• Time to experiment with your choice of
  technology Individually or all one big Agile
  Jam Session
• Or Switch and follow the end of one of the other
  sessions (e.g. John Daintree on WebServices
  .Net)

Web Applications at Dyalog 06
4
Does it make sense to Write Web Applications in
APL?

• Absolutely, but!
• A good framework is required
• Some of us have built frameworks, but as usual it
  has been every APLer for himself
• Now, v11.0 brings smooth integration with IIS
• v11.0 Classes make shared tool development easier
• Goal for today
• At the end of today, you should be able to (or at
  least know how to ?) build a simple,
  decent-looking web site in hours,
• ... Either using Microsoft IIS, or Dyalog APL
  alone

Web Applications at Dyalog 06
5
Examples of a Web Page Using APL IIS
This page by Tommy Johannesen, who is at the
conference this week
Web Applications at Dyalog 06
6
Example of an APL Web Page Using Raw APL
(Mortendid thisfor hisbike club)
Web Applications at Dyalog 06
7
Part I Introduction to HTML

• HTML HyperText Markup Language(was, once
  upon a time) A simple mechanism for creating
  formatted, linked text pages, connected together
  in a web.

Web Applications at Dyalog 06
8
Some Simple HTML
A web
Web Applications at Dyalog 06
9
HTML Tags You WILL Need to Learn
Web Applications at Dyalog 06
10
Simple Formatting tags

• AlsoltTTgt Teletype (fixed width font)ltBIGgt
  ltSMALLgt Bigger or smaller than surrounding
  textltSUBgt ltSUPgt Subscript and SuperscriptltBLINKgt
  The most obnoxious tag in HTML. Dont use it.

Web Applications at Dyalog 06
11
Headers
Web Applications at Dyalog 06
12
Lines and Paragraphs
Web Applications at Dyalog 06
13
Anchors and Links
Web Applications at Dyalog 06
14
Table
Web Applications at Dyalog 06
15
Table Data
Web Applications at Dyalog 06
16
Images and Maps
Web Applications at Dyalog 06
17
Special Characters
Web Applications at Dyalog 06
18
How to find HTML documentation
Web Applications at Dyalog 06
19
How to find HTML documentation
Web Applications at Dyalog 06
20
How to find HTML documentation

• Most important Go to nice-looking pages and use
  ViewSource in your browser. Reverse
  Engineering is a good wait to learn!

Web Applications at Dyalog 06
21
Time to write some APL code (Excercise 1)

• Write an APL function which generates a web with
  at least 2 pages, using ALL of
• ltbgt ltigt ltfontgt lth1gt ltpgt ltagtlttablegt ltimg srcgt
  lthrgt
• BEWARE of unbalanced tags!
• See functions in .h in the WildServer ws, eg
• 'href"myfile"' .h.a 'xxx'

Web Applications in Dyalog at Dyalog 06
22
Making it Look Good (Part I)
Web Applications at Dyalog 06
23
ltHEADgt

• HTML documents have 2 parts
• ltBODYgt is the displayable part
• ltHEADgt contains meta-tags for the page
• ltTITLEgtPage Titlelt/TITLEgt sets the browser title
  for the page
• ltMETAgt Allows the setting of a wide variety of
  tags used by search engines etc.
• ltSTYLEgt Sets formatting information.

Web Applications at Dyalog 06
24
ltSTYLE (IMPORTANT!)gt

• Style tags are a MUCH better way of controlling
  formatting, compared to ltfontgt, ltbgt, ltigt (etc) in
  the HTML
• ltSTYLEgt statements allow you to control the
  formatting for ALL elements of a given type at
  once

25
ltSTYLE Examplegt
Web Applications at Dyalog 06
26
ltSTYLE Example with Linked Style Sheetgt
27
ltSTYLE DIV and SPANgt

• ltDIVgt and ltSPANgt allow specification of a style
  class to part of a document
• Styles cascade for nested tags (URG within IMP)
• Attributes of outer tag are preserved

Web Applications at Dyalog 06
28
ltMulti-Column Layouts (Looking Good Part III)gt

• At least we all agree on ONE thing...

Web Applications at Dyalog 06
29
ltMulti-Column Layoutsgt

• Multi-Column layouts can be achieved using TABLE
  ..but can
  be hard to control

Web Applications at Dyalog 06
30
ltMulti-Column Layoutsgt

• Multi-Column layouts can also be done using
  FRAMESAdvantage is frames navigate
  independently, so very flexible.Can be a devil
  to get a good user interface design Not so
  popular.

Web Applications at Dyalog 06
31
ltMulti-Column Layouts using Style Sheetsgt
Web Applications at Dyalog 06
32
ltMulti-Column with CSS...gt
Web Applications at Dyalog 06
33
ltThe problem with CSSgt

• Browsers seem to disagree about defaults... So
  you need to experiment to get identical look on
  all browsers

Web Applications at Dyalog 06
34
Time to write some APL code (Excercise 2)

• Play with style3cols.css until YOU think it looks
  nice
• Apply it to your web, so your existing content is
  in the middle column of each page
• Alternatively Use either TABLE or FRAME

Web Applications in Dyalog at Dyalog 06
35
Making it Look Good Part III

• Pictures and Graphics improve the look of your
  web enormously!
• The Dyalog Bitmap object has MakePNG and MakeGIF
  methods (PNG is compressed but not supported by
  all browsers)
• Rain and NewLeaf are able to output EPS, WMF,
  VML, PNG and GIF files
• The HTML tag ltimg srcfile namegt embeds images
  in JPG, GIF, PNG, BMP (and more)

Web Applications at Dyalog 06
36
Time to write some APL code (Exercise 3)

• Take a look at the function Budget in the
  WildServer workspace. Use it to produce a file
  and embed it in one of your web pages
• Create a BitMap object and draw some text
  graphics on it, then use the MakePNG or MakeGIF
  method to create a file
• If you find yourself waiting for others, use
  ltMAPgt and ltAREAgt to make hotspots in your
  BitMap and link to different places.

Web Applications in Dyalog at Dyalog 06
37
Dynamic Web Pages

• So far, we have looked at and generated static
  web pages
• Static pages can be viewed from anywhere (even
  using the File Explorer)
• HTML provides a ltFORMgt tag which can be used to
  define an input form
• To work, forms require an active Web Server
  with a scripting language
• That is where IIS or WildServer come into the
  picture.

Web Applications at Dyalog 06
38
HTML ltFORMgt Tags You Need to Learn
Web Applications at Dyalog 06
39
ltINPUT TYPETEXTgt

• Im counting on you all to really visit
  htmlcodetutorial.com and see the ads so I dont
  get sued for taking these screen shots...

Web Applications at Dyalog 06
40
ltINPUT TYPECHECKBOXgt

• With ads this time ?

Web Applications at Dyalog 06
41
ltINPUT TYPECHECKBOXgt
Web Applications at Dyalog 06
42
Time to write some code (Excercise 4)

• Update your web-generation code, or simply edit
  and HTML page, to create a form which looks like
  this

Web Applications in Dyalog at Dyalog 06
43
Excercise 4 - Solution
Web Applications in Dyalog at Dyalog 06
44
Here Endeth Lession 1

• Hopefully, you should now understand enough HTML
  and CSS to
• Design reasonably nice web pages(making nice
  pages remains an art)
• Examine HTML output by web servers to understand
  a bit of what they are doing

Web Applications at Dyalog 06
45
Writing Dynamic Web Applications

• Web Servers are TCP/IP applications which listen
  on a particular port
• The main web server on a machine typically
  listens on port 80
• Web Browsers open connections to web servers and
  request HTML pages or other files.
• Pages are names using Uniform Resource Locators
  (URL) like http//www.dyalog.com or
  http//www.dyalog.com/images/_logo.gif

Web Applications at Dyalog 06
46
GET Requests

• Browsers typically send two types of Hyper Text
  Transfer Protocol (HTTP) requests. The most
  common is the HTTP GET request, which might look
  like this
• GET /tutorial/intro1.apls HTTP/1.1
• Accept /
• Accept-Language da
• Accept-Encoding gzip, deflate
• User-Agent Mozilla/4.0 (compatible MSIE 6.0
  Windows NT 5.1 SV1 .NET CLR 1.1.4322 .NET CLR
  2.0.50727 WinFX RunTime 3.0.50727)
• Host localhost8080
• Connection Keep-Alive
• Cookie WSIDao90yABzEiakNsyT7PljH10L5gAC3f3GL79BW
  oIAP8s
• Authorization Basic c3VwZXI6cw

Web Applications at Dyalog 06
47
POST Requests

• When a control in a FORM submits data, a POST
  request is sent
• POST /tutorial/intro2.apls HTTP/1.1
• Accept image/gif, image/x-xbitmap, image/jpeg,
  image/pjpeg, application/x-shockwave-flash,
  application/vnd.ms-excel, application/vnd.ms-power
  point, application/msword, /
• Referer http//localhost8080/tutorial/intro2.apl
  s
• Accept-Language da
• Content-Type application/x-www-form-urlencoded
• Accept-Encoding gzip, deflate
• User-Agent Mozilla/4.0 (compatible MSIE 6.0
  Windows NT 5.1 SV1 .NET CLR 1.1.4322 .NET CLR
  2.0.50727 WinFX RunTime 3.0.50727)
• Host localhost8080
• Content-Length 26
• Connection Keep-Alive
• Cache-Control no-cache
• Cookie WSIDao90yABzEiakNsyT7PljH10L5gAC3f3GL79BW
  oIAP8s
• Authorization Basic c3VwZXI6cw
• Arg12Arg22DoSumSumSum

Web Applications at Dyalog 06
48
The Job of a Web Server

• Deliver Static pages, images, on request
• Provide a scripting language on top of HTML,
  which handles
• Session State information (is user logged in?)
• Generation of dynamic elements in the result
• Handling callbacks in POST events
• Access to decoded information from HTTP headers,
  and ability to set HTTP return codes and other
  header information

Web Applications at Dyalog 06
49
Two Web Servers

• Microsoft Internet Information Services (IIS) is
  included with Windows XP Professional or Server
• WildServer is a new Open Source Web Server
  written in Dyalog APL by Stefano Lanzavecchia

Web Applications at Dyalog 06
50
Part II Writing Web Applications using Dyalog
and IIS

• If IIS is not installed on your machine, check
  Add/Remove Windows Components
• If IIS is present when Dyalog 11.0 is installed,
  a virtual directory is added
• The DYALOG.NET virtual directory contains a set
  up samples and a tutorial
• In Internet Explorer, the Links drop-down has a
  menu item which takes you to the DYALOG.NET home
  page

Web Applications at Dyalog 06
51
The dyalog.net Web Site
Web Applications at Dyalog 06
52
The virtual directory
Web Applications at Dyalog 06
53
The ASPX Tutorial
Web Applications at Dyalog 06
54
Principles of ASPX Pages

• In addition to HTML, .aspx pages contain
• ltscriptgt tags, which can contain code written in
  any .Net language including dyalog. A class
  is generated based on this code.
• ltasp ... /gt tags, which define asp objects,
  which also become members of the class (which
  means that the script code can refer to them as
  variables)

Web Applications at Dyalog 06
55
Principles of ASPX Pages (2)

• When events occur in the browser, an HTTP post
  occurs
• The state of the server-side objects is updated
  using POST information
• Script code may be called and has a chance to
  update the on-page objects
• In the page, each ltasp...gt tag is replaced by
  the result of calling the Render method of the
  object
• The resulting combination of static and dynamic
  HTML is returned to the browser

Web Applications at Dyalog 06
56
Principles of ASPX Pages (3)

• Thats all there is to it, all you really need to
  do now is
• Learn about some important ASP.NET server-side
  controls
• Learn how to design and implement stateless
  applications, or
• Understand the Session object which allows you to
  save some data which survives for the duration of
  a session
• Maybe a few other .Net Framework classes

Web Applications at Dyalog 06
57
Principles of ASPX Pages (4)

• Now walk through the ASPX tutorial

Web Applications at Dyalog 06
58
Overview of ASP.Net Server-Side Controls (1 of 2)
Web Applications at Dyalog 06
59
Overview of ASP.Net Server-Side Controls (2 of 2)
Web Applications at Dyalog 06
60
ASP.Net controls covered

• The tutorial shows examples of
• We can play with others if we have time

Web Applications at Dyalog 06
61
Learning more about ASP.NET and .ASPX

• There is tons of documentation on the web, there
  are books, etc.
• See http//207.46.248.104/quickstart/
• Steal C or VB code and convert it, for
  example, after browsing about, I
  foundhttp//207.46.248.104/quickstart/util/srcvi
  ew.aspx?path/quickstart/aspplus/samples/webforms/
  ctrlref/webctrl/datagrid/datagrid13.src
• ... and converted it to datagrid13.aspx in APL
• It is not VERY hard to learn to convert C to APL
  we will be publishing some hints, tips and
  maybe some tools

Web Applications at Dyalog 06
62
Getting .ASPX Pages to Look Good

• Use Styles, and Graphs. The ltaspLiteralgt control
  can be a useful way to insert style sheet code
  into an application

Web Applications at Dyalog 06
63
Exercise 5

• Customize a DataGrid example to create a page
  which looks like this
• If you have the energy, use ltaspLiteralgt to add
  style sheet information to the page

Web Applications in Dyalog at Dyalog 06
64
Writing your own ASP.Net Controls

• By writing a class which derives from
  System.Web.UI.Control, you can create a Custom
  Control (you could put your ENTIRE application
  inside one)
• See the examples in samples/asp.net/temp for more
  information

Web Applications at Dyalog 06
65
Using the Session object and Response.Redirect

• The Session object is a collection which contains
  data which survives for the duration of an IIS
  Session
• The following code fragment from a possible
  solution to Exercise 6 illustrates its use.
• Also note the use of the Response.Redirect
  method, which redirects the browser to another
  page

Web Applications at Dyalog 06
66
Exercise 6

• Use the Session object and Response.Redirect to
  force the user to log in before entering sales
  data.
• The Logout link on the data entry page should log
  the user out again
• For extra points,Add a button whichdisplays a
  Raingraph on the budget

Web Applications in Dyalog at Dyalog 06
67
Here Endeth Lesson 2

• Hopefully, you are now able to use .ASPX pages to
  develop ASP.NET pages using Dyalog version 11.0
• For more information, examine the samples
  provided with v11

Web Applications at Dyalog 06
68
Part III Writing Web Applications without IIS

• Using the TCPSocket object, it is possible to
  write a APL application which listens on port 80
• All it needs to do is decipher the GET and POST
  messages and respond suitably
• If it looks, smells and tastes like a Web Server,
  it IS a Web Server
• Dyalog provide a simple HTTP server in a ws
  called SERVER

Web Applications at Dyalog 06
69
Introducing WildServer 2006

• Stefano Lanzavecchia is an object-savvy APLer who
  has written a number of Web Servers in APL
• He will present the philosophy behind the
  WildServer in a presentation later this week
• Two weeks before the v11 release, he started
  working using Release Candidate 11
• Since he knew exactly what he wanted, it did not
  take him long...

Web Applications at Dyalog 06
70
WildServer 2006 Components

• Static File Server
• Namespace as a File System
• Extensible FileHandlers
• aplx files
• apls files

• HTTPListener
• HTTPHeaders
• HTTPRequest
• HTTPResponse
• HTML Utils
• User Validation
• Sessions

Web Applications at Dyalog 06
71
Options for Web Page Development using WildServer

• Namespaces, like the LOAN example
• (lets trace a call to loan.RUN)
• APLX files
• Look interesting, but not quite what I wanted, so
• NEW APLS files...
• Since last Wednesday, Nicolas Delcros and I have
  developed extended the WildServer with an APLS
  file handler, to provide functionality similar
  to ASP.NET

Web Applications at Dyalog 06
72
The APLS Tutorial
Web Applications at Dyalog 06
73
Principles of APLS Pages

• Similar but not identical to ASPX In addition to
  HTML, .aspx pages contain
• An ltAPLScriptgt tag, which must contain a partial
  Dyalog APL Class definition
• Within APLScript, tags ltbasegt and ltincludegt allow
  definition of a base class and namespaces to
  include
• In the HTML, APL code within curly braces is
  executed on the instance of the page (public
  members only)
• may be replaced by lt gt to allow dfns, and
  also a mechanism to allow references to the
  private space of the instance

Web Applications at Dyalog 06
74
Principles of APLS Pages (2)

• When events occur in the browser, an HTTP post
  occurs
• If the apls page has changed, the class is
  refixed and public fields are copied across to
  the new instance
• If there is an onXXXX method which correspondes
  to a SUBMIT object, this method is called
• In the page, each section is replaced by the
  result of calling the APL expression
• The resulting combination of static and dynamic
  HTML is returned to the browser

Web Applications at Dyalog 06
75
Principles of APLS Pages (3)

• Thats all there is to it, all you really need to
  do now is experiment with it, noting that
• The syntax is experimental and will almost
  certainly change soon (but since it is
  open-source you can keep the current one)
• The APLS page handler is only a few pages of APL
  code and can easily be enhanced

Web Applications at Dyalog 06
76
Principles of APLS Pages (4)

• Now walk through the APLS tutorial

Web Applications at Dyalog 06
77
Overview of APLS Server-Side Controls

• There IS one server-side control, the
  apls.DataGrid, which you can see used in
  intro8.apls and intro9.apls
• Automated support more similar to ltaspxxxgt is
  likely in the near future (so you dont need to
  call the UpdateData method explicitly)

Web Applications at Dyalog 06
78
Getting .ASPX Pages to Look Good

• Use Styles, and Graphs, as for any web page.
• Instead of ltaspLiteralgt, you can insert HTML
  anywhere using any expression within

Web Applications at Dyalog 06
79
Exercise 7

• See if you can create a DataGrid similar to the
  ASPX one (extend DataGrid to support checkboxes
  if you can, otherwise forget that column)
• If you have the energy, add style sheet
  information to the page to put the grid in a
  3-column layout

Web Applications in Dyalog at Dyalog 06
80
Custom Controls in APLS

• You can write more controls using
  .apls.DataGrid as a model (you should probably
  create a new namespace for them).
• It is suggested that they implement a Render
  method and an UpdateData method, but you can call
  them anything you like so long as you remember it

Web Applications at Dyalog 06
81
Exercise 8

• Either extend apls.DataGrid to support check box
  input, or design your own custom control
• If you dont have any ideas, create a label
  control which changes colour every time the page
  is refreshed

Web Applications in Dyalog at Dyalog 06
82
Using the Session object and Response.Redirect

• Within the WildServer, the session object works
  as in IIS but is currently called ctx._Session
• Response.Redirect method is called
  .WildHeart.HTTPListener.Redirect
• (note unlike in IIS, it does not terminate
  the thread, so you need to exit your fn cleanly)
• WildServer has default authentication, which you
  can easily modify

Web Applications at Dyalog 06
83
Here Endeth Lesson 3

• Hopefully, you are now able to use the WildServer
  to develop a web by
• Using a namespace as a virtual directory, or
• Using APLS files, or
• Adding your own file handler, security mechanism,
  etc etc...

Web Applications at Dyalog 06
84
Conclusion

• Regardless of whether you decide to build static
  web pages, use ISS, the WildServer or other
  tools...
• I hope that I have been able to pass on some of
  the things I have learned about generating nice
  webs
• Thank you for your attention!
• See you in the bar...

Web Applications at Dyalog 06