The Anubis project. Producing HTML/Javascript code. Copyright (c) Alain Prouté 2004. *** 1. Managing Web Arguments. *** 2. HTML Structure *** 2.1 Body of a HTML page *** 2.2 HTML pages *** 2.2.1 Definition of HTML_Page *** 2.2.2 Convenience fuctions *** 2.3 HTML_Element & HTML_Form *** 3. Convenience functions *** 3.1 for HTML_Element & HTML Form *** 3.2 for HTML_Form *** 3.4 Empty cells & empty rows *** 3.5 Spacers read tools/basis.anubis *** 1. Managing Web Arguments. ****************************** When a client submits a form, he sends informations to the server. This information is transformed by the server into a list of data of type 'Web_arg'. This is the reason why a 'web page' operation always has a unique argument of type 'List(Web_arg)'. The type 'Web_arg' is defined in 'web/common.anubis' as follows: public type Web_arg: web_arg(String name, String value), upload (String name, String value, String temp_file_path). read web/common.anubis In other words, a 'web argument' is just a pair made of the name of the argument, and the value of the argument, and both are character strings. 'upload' will be explained later. Of course, within the body of a 'web page' operation, you may want to recover the value of a particular web argument. To that end, use the operation 'web_arg_value', which takes 2 argument: - the list of all web arguments (the operand of the web page operation), - the name of the argument whose value is wanted. This operation has the following return type: public type Web_arg_value: not_found, found(String value). If the requested argument name is not found in the list, 'not_found' is returned. Otherwise, the value returned by 'web_arg_value' has the form 'found(v)', where 'v' is the value of the argument. The operation 'web_arg_value' is defined below. public define Web_arg_value web_arg_value ( List(Web_arg) l, String name ). *** 2. HTML Structure ********************* HTML_Element are all elements ou can find in an HTML page : text, table, image,form, link,... execept input and submit elements which are reserved for HTML_Form. HTML_Form has also as alternatives text, table,image,... Seperate those two kinds element gives the opportunity to avoid to have several 'form' in one HTML_Element, links into form,... all kinds of things that could disturb browsers mind. public type HTML_Item: HTML_Item & HTML_Item,... public type HTML_Element: HTML_Element & HTML_Element,... public type HTML_Form: HTML_Form & HTML_Form,... *** 2.1 Body of a HTML page *************************** public type Body_Option: background_color /* color for the background */ ( RGB ), background_image /* name of image file for the background */ ( String file_name ), load_image /* load an image (for next page), which is not displayed */ ( String name, ), left_margin /* left margin for document */ ( Int32 ), top_margin /* top margin for document */ ( Int32 ), margin_width ( Int32 ), margin_height ( Int32 ), reload_frame ( String name, /* name of target frame */ String url /* url to load in this frame */ ), onload ( String function_name /* nom de la fonction javascript (sans les '()') */ ). public type HTML_Body: body ( List(Body_Option), /* list of body options */ HTML_Item /* the content of the page */ ). *** 2.2 HTML pages ****************** *** 2.2.1 Definition of HTML_Page ********************************* The following produces '' tags, which are put in the head of the document. public type HTML_Meta: keywords ( List(String) ), refresh ( String url, Int32 delay // in seconds ), meta ( String name, String content ), http_equiv ( String name, String content ). public type HTML_Page: html_page ( String title, /* title appearing on top of browser */ List(HTML_Meta) meta_tags, Printable_tree head_scripts, /* scripts à placer dans la balise head */ HTML_Body body /* body of page */ ), standard_frameset ( String title, List(HTML_Meta) meta_tags, Int32 height, /* height of 'top menu' (pixels) */ Int32 width, /* width of 'left menu' (pixels) */ Printable_tree main /* url for main */ ). +---------+--------------------------+ | | ^ | |<-width->| top height | | | v | | left +--------------------------+ | | | | | main | | | | | | | | | | +---------+--------------------------+ Note: top and left frames must be loaded through the Web_body_option 'reload_frame'. *** 2.2.2 Convenience fuctions ****************************** public define HTML_Page html_page ( String title, HTML_Body body ) = html_page(title,[],[], body). public define HTML_Page html_page ( String title, List(HTML_Meta) meta_tags, HTML_Body body ) = html_page(title, meta_tags, [], body). public define HTML_Page standard_frameset ( String title, Int32 height, Int32 width, Printable_tree main ) = standard_frameset(title, [], height, width, main). *** 2.3 HTML_Element & HTML_Form ******************************** public type HTML_Element: text(Printable_tree), par(String),... public type HTML_Form: text(Printable_tree), par(String),... You may want to center a web standard in a page. Just enclose it into 'center(...)': public type HTML_Item: center(HTML_Item),... public type HTML_Element: center(HTML_Element),... public type HTML_Form: center(HTML_Form),... public type WebStyle: background_image(String file_name), background_color(RGB color), background_transparent, background_repeat_horizontal, // repeat the background image only horizontally background_repeat_vertical, background_no_repeat, color(RGB color), float_to_left, // the web item will float to the left and text will wrap around float_to_right, font_family(String font_name), // "verdana" "helvetica" "times" etc... font_size(Int32 size), italic, oblique, small_capitals, bold, bolder, lighter, line_height(Int32 height), text_center, text_left, text_right, text_justify, text_underline, text_blink, text_line_through, width(Int32 n). public type HTML_Element: style(List(WebStyle) styles, HTML_Element content),... public type HTML_Form: style(List(WebStyle) styles, HTML_Form content),... public type HTML_Element: image ( String file_name, String description ),... public type HTML_Form: image ( String file_name, String description ),... A HTML_Element and HTML_Form may be a table. A table is produced by the constructor 'table' from the type 'Web_item'. This constructor takes 2 arguments: - a list of 'table options', - a list of 'rows'. Of course, you use as many options as you want, including none (if you do not want any option, put the empty list '[ ]' as this argument). Some options have precedence over others. For example a background image will hide the background color. Table options are defined below: public type Table_Option: /* use a color as a background for the table, if you want it to be different from the background of the page */ background_color(RGB), /* or use an image as the background of the table */ background_image(String file_name), /* draw a border line around the table (and around each cell in the table). You may also specify a geometry (in pixels) for the border. This makes the 'in relief' part of the border appear more or less wide. You may also specify a color for the border. */ border(Int32, /* width of exterior (pixels) */ Int32, /* width of top */ Int32), /* width of interior */ border_color(RGB), absolute_width(Int32). public define Table_Option nude = border(0,0,0). A 'table row' is made of a list of 'row options', and a list of 'cells'. A 'cell' itself has a list of 'cell options', and a web item, which is its content. We begin by the description of options. public type Row_Option: /* following concerns the horizontal positions of items within the cells of the row */ left, h_center, right, /* the following concerns the vertical positions of items, within the cells of the row */ top, v_center, bottom, absolute_height(Int32), base_line, /* set the background color of all cells in the row */ background_color(RGB). public type Cell_Option: /* all row options are available for individual cells, and apply here only to one cell. */ left, h_center, right, top, v_center, bottom, base_line, background_color(RGB), /* you can set the width of the cell either absolutely (in pixels) or as a percentage of the width of the table. */ background_image(String file_name), absolute_width(Int32), relative_width(Int32), absolute_height(Int32), relative_height(Int32), /* a cell may span over several columns or rows in the table */ columns(Int32), rows(Int32), nowrap. public type Element_Cell: cell ( List(Cell_Option), HTML_Element ). public type Form_Cell: cell ( List(Cell_Option), HTML_Form ). public type Item_Cell: cell ( List(Cell_Option), HTML_Item ). public type Element_Row: row ( List(Row_Option), List(Element_Cell) ). public type Form_Row: row ( List(Row_Option), List(Form_Cell) ). public type Item_Row: row ( List(Row_Option), List(Item_Cell) ). row ( List(Row_Option), List(Form_Cell) ). public type HTML_Element: table ( List(Table_Option), List(Element_Row) ),... public type HTML_Form: table ( List(Table_Option), List(Form_Row) ),... public type HTML_Item: table ( List(Table_Option), List(Item_Row) ),... Special link for jumping to a label public type HTML_Element: label ( String lable_name ),... public type HTML_Element: go_to_label ( String label_name, HTML_Element content ). public type HTML_Form: label ( String lable_name ),... public type HTML_Form: go_to_label ( String label_name, HTML_Form content ), vscroller ( Int32 height, HTML_Form content ),... A form could contain a link. But the content of a link will be only a text or an image. public type HTML_Link: text(Printable_tree), image ( String file_name, String description ), style(List(WebStyle) styles, HTML_Link content). public type HTML_Form: text_input ( String name, /* text field to be documented by user */ Int32 size, String initial_value ), password_input ( String name, Int32 size ), upload ( String name, Int32 size ), submit ( String name, String text ), image_submit ( String name, String image_file_name, String description ), rollover_submit ( String name, String image_on, String image_off ), link_to_window ( String name, String label_name, String web_args, String window_name, HTML_Link content, Int32 width, Int32 height ), radio_button ( Printable_tree name, String value ), checked_radio_button ( Printable_tree name, String value ), check_box ( Printable_tree name, String value ), checked_box ( Printable_tree name, String value ). public type HTML_Item: element ( HTML_Element ), form ( Printable_tree name, // actually the URI String label_name, HTML_Form form ), named_form ( Printable_tree name, String form_name, String label_name, HTML_Form form ), link_to_window ( String name, String label_name, String web_args, String window_name, HTML_Element content, Int32 width, Int32 height ),... A 'rollover' has the same role as a submit button or link, but it is prettier. It is made of two images. The first one 'image_on' determines the aspect of the button when the mouse cursor is on it. The other one 'image_off' determines the aspect of the button when the mouse cursor is anywhere else. The two images should be of the same size, otherwise bad effects may occur. The last operand 'description' is a small text which describes the role of the button. It appears in a bubble in the browser's window. public type HTML_Item: rollover ( List(String) preload_images, String url, String target, String image_on, String image_off, String description ),... Special link to email : public type HTML_Item: mail_to ( String addr, HTML_Element content ). *** 3. Convenience functions **************************** *** 3.1 for HTML_Element & HTML Form ************************************* public define HTML_Element text ( String s ) = text([s]). public define HTML_Form text ( String s ) = text([s]). public define HTML_Link text ( String s ) = text([s]). public define HTML_Element integer ( Int32 n ) = text([integer_to_string(n)]). public define HTML_Form integer ( Int32 n ) = text([integer_to_string(n)]). public define HTML_Element float ( Float f, Int32 n ) = text([float_to_string(f,n)]). public define HTML_Form float ( Float f, Int32 n ) = text([float_to_string(f,n)]). public define HTML_Element image ( String file_name ) = image(file_name,""). public define HTML_Form image ( String file_name ) = image(file_name,""). public define HTML_Link image ( String file_name ) = image(file_name,""). *** 3.2 for HTML_Form ********************* public define HTML_Form submit ( String text ) = submit("sub",text). public define HTML_Form image_submit ( String name, String image_file_name ) = image_submit(name,image_file_name,""). public define HTML_Form image_submit ( String image_file_name ) = image_submit("sub",image_file_name,""). public define HTML_Form link_to_window ( String name, String web_args, String window_name, HTML_Link content, Int32 width, Int32 height ) = link_to_window(name,"",web_args,window_name,content,width,height). *** 3.3 For HTML_Item (-> element) ********************************** public define HTML_Item text ( String s ) = element(text([s])). public define HTML_Item par ( String s ) = element(par(s)). public define HTML_Item center ( HTML_Element he ) = element(center(he)). public define HTML_Item style ( List(WebStyle) lws, HTML_Element he ) = element(style(lws,he)). public define HTML_Item link_to_window ( String name, String web_args, String window_name, HTML_Element content, Int32 width, Int32 height ) = link_to_window(name,"",web_args,window_name,content,width,height). define Item_Cell cell ( List(Cell_Option) lco, HTML_Element he ) = cell([],element(he)). public define HTML_Item table ( List(Table_Option) lto, List(Element_Row) rows ) = element(table(lto,rows)). public define HTML_Item label ( String label_name ) = element(label(label_name)). public define HTML_Item go_to_label ( String label_name, HTML_Element he ) = element(go_to_label(label_name,he)). public define HTML_Item integer ( Int32 n ) = element(text([integer_to_string(n)])). public define HTML_Item float ( Float f, Int32 n ) = element(text([float_to_string(f,n)])). public define HTML_Item image ( String file_name ) = element(image(file_name,"")). public define HTML_Item form ( Printable_tree name, HTML_Form f ) = form(name,"",f). public define HTML_Item named_form ( Printable_tree name, String form_name, HTML_Form f ) = named_form(name,form_name,"",f). public define HTML_Item empty_item = element(text((Printable_tree)[])). *** 3.4 Empty cells & empty rows ******************************** public define Element_Cell empty_cell = cell([],text([])). public define Element_row empty_row = public define Form_Cell empty_cell = cell([],text([])). public define Item_Cell empty_cell = cell([],element(text([]))). public define Item_Row empty_row = row([],(List(Item_Cell))[]). *** 3.5 Spacers *************** public define HTML_Element spacer = image(anubis_directory+"/library/web/spacer.gif"). public define HTML_Form spacer = image(anubis_directory+"/library/web/spacer.gif"). public define HTML_Element spacer = image("spacer.gif"). public define HTML_Form spacer = image("spacer.gif"). public define Element_Cell h_spacer ( Int32 n ) = cell([absolute_width(n)],spacer). public define Element_Row h_spacer ( Int32 n ) = row([],[h_spacer(n)]). public define Form_Cell h_spacer ( Int32 n ) = cell([absolute_width(n)],spacer). public define Form_Row h_spacer ( Int32 n ) = row([],[h_spacer(n)]). public define Item_Cell h_spacer ( Int32 n ) = cell([absolute_width(n)],spacer). public define Item_Row h_spacer ( Int32 n ) = row([],(List(Item_Cell))[h_spacer(n)]). public define Element_Row v_spacer ( Int32 n ) = row([absolute_height(n)],[cell([],spacer)]). public define Form_Row v_spacer ( Int32 n ) = row([absolute_height(n)],[cell([],spacer)]). public define Item_Row v_spacer ( Int32 n ) = row([absolute_height(n)],(List(Item_Cell)) [cell([],spacer)]). public define HTML_Element spacer ( Int32 w, Int32 h ) = table([],[row([absolute_height(h)],[cell([absolute_width(w)],spacer)])]). public define HTML_Form spacer ( Int32 w, Int32 h ) = table([],[row([absolute_height(h)],[cell([absolute_width(w)],spacer)])]) . public define HTML_Item spacer ( Int32 w, Int32 h ) = element(table([],[row([absolute_height(h)],[cell([absolute_width(w)],spacer)])])). --- That's all for the public part ! -------------------------------------------------- *** 1. Managing Web Arguments. *** 2. Formating operations (Anubis --> HTML/Javascript) *** 2.1 Formating a rgb color. *** 2.2 Formating body options *** 2.3 Formating table options *** 2.4 Formating row options *** 2.5 Formating cell options *** 2.6 Formating cells *** 2.7 Formating rows *** 2.8 Formating selector *** 2.9 Formating web-styles *** 2.10 Formating common alternatives from HTML_Form et HTML_Element *** 2.11 Formating HTML_Form *** 2.12 Formating HTML_Element *** 2.13 Formating HTML_Item *** 3. Printing the HTML_Page variable Printable_tree scripts = [ ]. define One add_script ( Printable_tree script ) = scripts <- [*scripts . script]. define Printable_tree format ( String c_ticket, String s_ticket, HTML_Element e ). define Printable_tree format ( String c_ticket, String s_ticket, HTML_Form f ). define Printable_tree format ( String c_ticket, String s_ticket, HTML_Item i ). *** 1. Managing Web Arguments. ****************************** public define Web_arg_value web_arg_value ( List(Web_arg) l, String name ) = if l is { [ ] then not_found, [h . t] then if h is { web_arg(n,v) then if name=n then found(v) else web_arg_value(t,name), upload(n,v,tfn) then if name=n then found(v) else web_arg_value(t,name) } }. *** 2. Formating operations (Anubis --> HTML/Javascript) ******************************************************** *** 2.1 Formating a rgb color. ****************************** define String format ( RGB color ) = if color is rgb(r,g,b) then "#" + hexadecimal(word8_to_Word32(r),2) + hexadecimal(word8_to_Word32(g),2) + hexadecimal(word8_to_Word32(b),2) + "". *** 2.2 Formating body options ****************************** type BodyOnload: reload_frame(String name, String url). variable List(BodyOnload) body_onloads = [ ]. define One add_body_onload ( BodyOnload item ) = body_onloads <- [item . *body_onloads]. define Printable_tree format ( BodyOnload item ) = if item is { reload_frame(name,url) then (Printable_tree) [ " window.open('",url,"','",name,"');" ] }. define Printable_tree format ( List(BodyOnload) l ) = if l is { [ ] then (Printable_tree)[ ], [h . t] then (Printable_tree) [format(h) . format(t)] }. type ImageToLoad: simple ( String image_name ), with_rollover ( String image_name, String rollover_name ). variable List(ImageToLoad) images_to_load = []. define Printable_tree preload_list ( List(ImageToLoad) images, Int32 n, ) = if images is { [ ] then [ ], [h . t] then [" preloaded_images[",n,"].src = '",image_name(h),"';", if h is { simple(_) then [], with_rollover(n1,r) then [" preloaded_images[",n1,"].onload = 'allow_rollover(\"",r,"\")';"] } . preload_list(t,n-1)] }. define Printable_tree load_image_script ( List(ImageToLoad) images ) = if images is { [ ] then [ ], [_ . _] then [ "" ] }. define Printable_tree format ( Body_Option o ) = if o is { background_color(c) then [" bgcolor=" , (String)format(c)], background_image(n) then [" background=", n], load_image(n) then images_to_load <- [simple(n) . *images_to_load]; [ ], left_margin(n) then [" leftmargin=", n], top_margin(n) then [" topmargin=", n], margin_width(n) then [" marginwidth=", n], margin_height(n) then [" marginheight=", n], reload_frame(n,url) then add_body_onload(reload_frame(n,url)); [ ], onload(n) then [" onLoad=\"", n, "()\""] }. define Printable_tree format ( List(Body_Option) l ) = if l is { [ ] then [ ], [h . t] then [format(h) . format(t)] }. *** 2.3 Formating table options ******************************* define Printable_tree format ( List(Table_Option) l ) = if l is { [ ] then [ ], [h . t] then [if h is { background_color(c) then [" bgcolor=", (String)format(c)], background_image(f) then [" background=",f], border(e,top,i) then [" border=",e," cellspacing=",top," cellpadding=",i], border_color(c) then [" bordercolor=", (String)format(c)], absolute_width(n) then [" width=",n] }, format(t)] }. *** 2.4 Formating row options ***************************** define Printable_tree format ( List(Row_Option) l ) = if l is { [ ] then [ ], [first . others] then [if first is { left then [" align=left"], h_center then [" align=center"], right then [" align=right"], top then [" valign=top"], v_center then [" valign=center"], bottom then [" valign=bottom"], absolute_height(n) then [" height=\"",n,"\""], base_line then [" valign=baseline"], background_color(c) then [" bgcolor=",(String)format(c)] }, format(others)] }. *** 2.5 Formating cell options ****************************** define Int32 percentage ( Int32 n ) = if n < 0 then 0 else if n > 100 then 100 else n. define Printable_tree format ( List(Cell_Option) l ) = if l is { [ ] then [ ], [first . others] then [if first is { left then (Printable_tree)[" align=left"], h_center then (Printable_tree)[" align=center"], right then (Printable_tree)[" align=right"], top then (Printable_tree)[" valign=top"], v_center then (Printable_tree)[" valign=center"], bottom then (Printable_tree)[" valign=bottom"], base_line then (Printable_tree)[" valign=baseline"], background_color(c) then (Printable_tree)[" bgcolor=",(String)format(c)], background_image(n) then (Printable_tree)[" style=\"background: url(",n,")\""], absolute_width(w) then (Printable_tree)[" width=",w], relative_width(r) then (Printable_tree)[" width=",percentage(r),""], absolute_height(h) then (Printable_tree)[" height=",h], relative_height(r) then (Printable_tree)[" height=",percentage(r),""], columns(n) then (Printable_tree)[" colspan=",n], rows(n) then (Printable_tree)[" rowspan=",n], nowrap then (Printable_tree)[" nowrap"] } . format(others)] }. *** 2.6 Formating cells *********************** define Printable_tree format ( String c_ticket, String s_ticket, List(Element_Cell) l ) = if l is { [ ] then [ ], [first . others] then [ if first is cell(options,e) then [ "