Professional

Home
Learn Shen
Videos
Community Wiki
Community
OS Kernel
OS Library
Shen Professional

The Web
Shen Professional contains provision for generating type secure web pages and reading pages off the web. The notation used is a type secure functional notation derived from HTML 5 called Shen Markup Language or SML 1.0. SML is based on HTML 5.

As far as possible (i.e. to the point of not overwriting existing Shen functions) the terminology of SML follows HTML.

SML 1.0 is a first release; this plugin will expand over time to include forms and other features. Notice however we do not support CSS. The very good reason for this is that functional programming provides its own abstraction mechanism for seperating style from content.

1. Reading Pages Off the Web
2. SML: top and bottom
3. Text
4. Images
5. Tables
6. Lists
7. Links
8. Combining Data
9. Verbatim
10. Rendering SML to HTML

1. Reading Pages Off the Web

The command (webpage <URL>) where <URL> is a string containing the URL of the web page will return the contents of that page as a string. Thus

(webpage "http://www.shenlanguage.org/learn-shen/comments.html")

returns a string beginning

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Comments &mdash; Learn Shen</title>

<link rel="stylesheet" href="_static/shen.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" /> ...........
      

The function strip-html of type string --> (list string) returns the text as a list of strings (words) from a string stripped of the HTML markup commands. The function links of type string --> (list string) returns the list of links in a webpage.

2. SML: top and bottom

In SML the top level function is sml which takes an object of type top and an object of type bottom and produces an object of type page. The these types correspond to the head and body of an HTML page.

The function top takes a list of of type (options top)and produces an object of type top.

In SML 1.0 these options are limited at present to giving the title of the page. SML follows the format of HTML in its choice of keywords so that title is used. The format would be

(top [title "My HTML page"])

A macro handles the bracketing so that

(top title "My HTML page")

is accepted. The function bottom takes an object of type (list data) and an object of type (options bottom). In SML 1.0 these options are limited to bg and background which take a hex value as a string. An example

(body <data ... here> [background "#FFFFFF"])

Again
(body <data ... here> background "#FFFFFF") is accepted.

The type data is a union type whose subtypes divide as follows.


3. Text

The type data is a semi-abstract datatype in the sense explained in TBos p 251. The subtypes are defined by functions that compose the texts and images etc.

The basic one for producing text is
format. As shown, text can be an unformatted string. The purpose of format is to format the string for presentation. The type of format is text --> (options format) --> text.

The format options are a list.

<option> :=
align <horizontal alignment> | face <string> | size <number> | b | i | strike | sub | sup | big | small | address | abbr | acronym | dfn | blockquote | q | cite | code | kbd | var | samp | p | em | str | u | s | pre | quote | tt

<horizontal alignment> :=
left | right | center

The format options correspond to the HTML markups (e.g.
em is <em> ... </em>). This example

(format
	"Chinese people never eat bean sprouts raw. 
	They are too 'cooling', and anyway there would 
	be hygiene issues. So they spice them up with ginger 
	and chillies. Nor do they tend to combine them with 
	other vegetables as a well cooked bean sprouts should 
	still be slightly crisp and it is difficult to achieve 
	this unless they are the main ingredient of the dish." [p])     

places the string within a paragraph - spacing it apart from the surrounding text. Again

(format "You can do it like this." p em u)

is acceptable. The option for all data objects may be empty in which case it can be omitted.

4. Images

An image is produced by the function
picture of type string --> (options image) --> image. The string is the path of the image file and the options are as follows.

<option> :=
width <number> | height <number> | alt <string>

corresponding to the HTML markups. e.g.

(picture "beansprouts.jpg" [height 200 width 300])

or

(picture "beansprouts.jpg" height 200 width 300)

5. Tables

Tables are created by the function
table of type (list (list data)) --> (options table) --> table. The first argument determines the contents of the table and the second controls the presentation. The options are

<option> :=
width <measure> | background <string>| cellpadding <number> | cellspacing <number> | border <number> | dir <direction> | summary <string> | rules <rule>

<vertical alignment> := top | middle | bottom | baseline
<horizontal alignment> :=
left | right | center
<direction> :=
rtl | ltr
<rule> :=
none | groups | rows | cols | all
<measure> := <number> | "^<number>^%"

The options correspond to the HTML markups. e.g.

(table [[Ingredients Recipe]] [width "80%" align center])

gives a table with one row in two columns whose contents are the data objects Ingredients and Recipe. It is permitted to omit the outer brackets in the options list.

(table [[Ingredients Recipe]] width "80%" align center)

Each element in the
(list (list data)) argument (i.e. each row) can have certain options prepended to it.

<option> := abbr <string> | align <horizontal alignment> | valign <vertical alignment> | axis <string> | bgcolor <string> | scope <scope> | rowspan <number>
<scope> :=
row | col | rowgroup | colgroup
<vertical alignment> :=
top | middle | bottom | baseline
<horizontal alignment> :=
left | right | center

e.g. (table [[Ingredients v-align top Recipe]])

The options correspond to the HTML markups.

6. Lists

SML lists correspond to HTML ordered and unordered lists. They are produced by the ol and ul functions of types
(list data) --> (options ol) --> data and (list data) --> (options ul) --> data respectively.

For ordered lists (ol) the options are

<option> :=
start <number> | type <ordered list type>

The options correspond to the HTML markups.

7. Links

A link is created by the function
link of type link text --> string --> (options link) --> link. The text is displayed in HTML, the string is the URL. The options are

<option> :=
alt <string>

8. Combining Data

The function
combine of type (list data) --> data combines a list of data objects into one. This can be used polyadically (combine d1 ...dn) combines n data-ojects into one.

9. Verbatim

The function
verbatim of type string --> text creates text in which the line breaks and tabs in the arguments are reflected in the HTML.

(verbatim 
      "
       Ingredients

350 g mung bean sprouts
6 Sichuan peppercorns
2 fresh chillies
1 teaspoon finely chopped spring onion
1/2 teaspoon finely chopped ginger
1/2 tsp salt
1/2 tsp vinegar
Pinch of sugar
20g coriander - cut into lengths
Splash of sesame oil
3 tsp groundnut or coconut oil")      

creates HTML in which the items in the recipe appear on new lines.

10. Rendering SML to HTML

The function
render of type page --> string converts an SML page into HTML.

(let Top (top title "Bean sprouts")
     Logo (picture "logo_transparent.png")
     Header (format "Hot and Fragrant Beansprouts" size 7 align center p)
     Frontpic (image "beansprouts.jpg" height 200 width 300)
     T1 (table [[Logo Header Frontpic]] width "80%" align center)
     L1 (link "About" "index.html")
     L2 (link "Contact" "contact.html")
     L3 (link "Classes" "classes.html") 
     L4 (link "Biography" "biography.html") 
     L5 (link "Recipes" "recipes.html")
     T2 (table [[L1 L2 L3 L4 L5]] width "80%" align center)
     RecipePara1 (format
		"Chinese people never eat bean sprouts raw. 
		They are too 'cooling', and anyway there would 
		be hygiene issues. So they spice them up with ginger 
		and chillies. Nor do they tend to combine them with 
		other vegetables as a well cooked bean sprouts should 
		still be slightly crisp and it is difficult to achieve 
		this unless they are the main ingredient of the dish." [p])
     RecipePara2 (format 
		"Wash and drain the beansprouts. Heat the wok,
		add the oil, then put in the Sichuan peppercorns and 
		fry until the flavour starts to release. Add the spring
		onions, ginger and chillies, stir, and then add the
		beansprouts. Stir fry until the sprouts 
		are just beginning to soften, add the vinegar and the salt.
		Mix well then remove from the heat and sprinkle over the
		coriander and sesame oil." p)
Ingredients (verbatim 
		"Ingredients

350 g mung bean sprouts
6 Sichuan peppercorns
2 fresh chillies
1 teaspoon finely chopped spring onion
1/2 teaspoon finely chopped ginger
1/2 tsp salt
1/2 tsp vinegar
Pinch of sugar
20g coriander - cut into lengths
Splash of sesame oil
3 tsp groundnut or coconut oil") 
Recipe (combine RecipePara1 RecipePara2) 
T3 (table [[Ingredients Recipe]] width "80%" align center)
Bottom (bottom [T1 T2 T3])
SML (sml Top Bottom)
HTML (render SML)
Write (write-to-file "recipe.html" HTML)
done)

produces the following web page