Pliant talk forum

Pliant talk forum

Discussion: Styling in the HTTP server

Message posted by hubert.tonneau on 2003/06/02 10:32:25
I've uploaded http://pliant.cx/archive/pliant-85experimental2.tgz
in order to demonstrate the new styling mechanism in the HTTP server.
This is experimental, so you've been warned.


The general idea behind this heavy change of the Pliant HTTP server
styling part is to prepare for the futur Pliant web system.

Basically, we now have a cleaner design where:
. the server is executing code that calls instructions that will build
  the XML result, so a .page is an XML generator
. styling is filtering the XML output and turns it on the fly to something
  best suited for the client browser.

All this is a bit difficult to express on my side because all the framework
for the ultimate FullPliant application server is now there, but the code is
not yet, so please feel free to ask for extra explainations.


The new styling has several advantages:

. the system allow to carry attributs Pliant does not understand
  as an example, you can now write things like

  cell width "100%" colspan 3
    [foo]

  there is a new /pliant/protocol/http/tag.pli module defining 'HtmlTag'
  data type which holds a tag that will be passed from language to styling
  layer.

. declaring a new instruction in a .style is much easier since you don't need
  to do meta programming anymore

  see /pliant/protocol/http/style/default.style as an example

. most side effects are now handled in the style rather than at language level
  in the meta, so it's truely possible to create advanced styling.


And a major drawback: you have to make small changes in all you .page files

cell color lsh 80 10 0
  [foo]

must be translated to

cell color (color hsl 0 10 75)
  [foo]

Please notice that 'hsl' is a different formula than 'lsh' so inverting the
numbers is not enough: the 'light' value has to be re adjusted.

image "/common/myimage.png" right
  [foo]

has to be translated to something like

image "/common/myimage.png" right
para
  [foo]
Message posted by hubert.tonneau on 2003/06/02 10:45:00
I've forgotten: you have to also change things like:

color lsh 25 50 240
  [foo]

to something like (again, the values will need to be rejusted):

font color (color hsl 240 50 25)
  [foo]
Message posted by maybe Marcus on 2003/06/03 19:54:54
> And a major drawback: you have to make small changes in all you .page files

> cell color lsh 80 10 0
>   [foo]

> must be translated to

> cell color (color hsl 0 10 75)
>   [foo]

Just a comment (question) for now: Regarding the second parameter of cell below

cell color (color hsl ....)                  (1)

namely, (color hsl ...). Can it be different things other than (color ...)?
Because, IMHO, those two 'color' in (1) seem a bit reduntant...

I liked the default style and header styles, BTW.
Message posted by hubert.tonneau on 2003/06/03 20:00:56
> namely, (color hsl ...). Can it be different things other than (color ...)?
> Because, IMHO, those two 'color' in (1) seem a bit reduntant...

It's the price to pay to genericity.

Most Pliant HTML tags now agree to carry some attributs they are not awared of,
so most on them look like:

the_tag the_required_parameters additional_id1 additional_value1 additional_id2 additional_value2 ...
Message posted by hubert.tonneau on 2003/06/03 21:19:09
> I liked the default style and header styles, BTW.

It will be back in a fiew days.
The new styling is much more powefull. I've done a hard work of completely
rewritting default.style and the tarball is demonstrating the mechanism,
but now I still have to extend default.style so that it can be easy to get
several different styles. 
Message posted by marcus on 2003/06/03 21:25:15
Nice.

Later, could you also provide some documentation 'cards' on the new syntax and
semantics of the affected .page instructions? Based on them, I will update 
(also later) the current documentation for the .page instructions.
Message posted by hubert.tonneau on 2003/06/08 13:50:38
I've uploaded http://pliant.cx/archive/pliant-85experimental4.tgz

This one contains a new from scratch rewrite of the styling mechanism,
which should be an order of magnitude more efficient.
The complete rewrite available in experimental1 to experimental3 has been
dropped, because not clean and efficient enough :-(

Basically, each tag is declared through a 'html_tag' instruction
(many samples in /pliant/protocol/http/style/default.style)

Then, there is an HtmlStack data structure (implemented in /pliant/protocol/http/stack.pli)
which is responsible for storing the current value of all attributes for all
tags, and provides backtracking capabilities.

On an HtmlStack, we can do:
mark: take a snaphost of all values
attribute: get the value of a given tag
push: set a new value for a given tag that will be backtracked
rewing: restore the snapshot

So, there are three main performances advantages with the new implementation:
. each declared attibute is typed, so there is no need to convert from and
  to string
. each attribute is assigned an index, so getting it's value does not require
  hashing
. backtracking is clean an efficient
and a semantic advantage:
. attributes values can be inherited, so it will be easy to introduce things
  like 'class'

Also the current code is for demonstration only: the default style still needs
to be completed before the next Pliant release can come out.

Message posted by hubert.tonneau on 2003/06/08 15:58:55
http://pliant.cx/archive/pliant-85experimental5.tgz
is the same, but closer to something usable.
Message posted by michel on 2003/06/08 16:40:58
What about Windows users ?
Message posted by hubert.tonneau on 2003/06/08 16:44:03
> What about Windows users ?

There is experimental.
If you want to try it under Windows, just untar the .tgz, then restore the
executables from plain release 84. It should work.
Message posted by hubert.tonneau on 2003/06/08 17:28:20
http://pliant.cx/archive/pliant-85experimental6.tgz
some more bug fixes, and many existing pages fixes.
Message posted by hubert.tonneau on 2003/06/09 22:30:21
http://pliant.cx/archive/pliant-85experimental10.tgz is available.

This one is close to working (even if the default style still needs to be enriched).

Also I found a very strange bug:
when using the photo editing tool under Mozilla (Debian 1.3.1-2 package),
the selected photo will often not display. The problem does not append with
Netscape 4 or Firebird.
Please report any success or failure in this area using your configuration since
it's hard for me to conclude if the problem is on Pliant or on Mozilla side.
Message posted by maybe pom on 2003/06/10 10:16:12
The site style options do not seem to be applied; furthermore, I have a white
background...

Small bug (appear at debuging level 2):

file /pliant/protocol/http/style/common.pli line 162 should be
        e compile_as (expression immediat (flags .and. flag)<>0 substitute flag (expression constant a:flag near e))

(substituted expression should be linked to a module)
Message posted by maybe pom on 2003/06/10 10:25:01
Concerning the "strange bug": the probable explanation is that
Mozilla sometimes postpones the loading of the image. When it tries
to access it after the page is loaded, it receives an empty image.
To see this, simply try to click on "view image" in the contextual menu of
Mozilla on some image that appears: you will see an empty image and, when
going back, the image will disappear (Mozilla considers that the emty
image corresponds to an "updated version").
Message posted by hubert.tonneau on 2003/06/10 14:03:26
> Concerning the "strange bug": the probable explanation is that
> Mozilla sometimes postpones the loading of the image. When it tries
> to access it after the page is loaded, it receives an empty image.

It seems that the final answer is that sometime mozilla starts a request
about an image, then cancels it before receiving the answer, and will
restart it.

So the problem was that as the result of the first query, I was assuming
that the browser had received the image, so was removing it from the cache,
so failed to provide it to the second request.

Now, I will not remove the image from the cache if the TCP connection breaks
before all the image is sent. So, the image will still be available when the
second request is received.
The only problem is that it's loading more the server memory because when the
user clics on a link or button before the all page images are loaded, then these
will remain in the server cache until shrink appends. It might exhaust the
server memory with less load that with the previous scheme.
This will not be a serious problem when the Pliant single cache mechanism is
in, but it's not yet :-(
Message posted by hubert.tonneau on 2003/06/10 14:14:06
> Small bug (appear at debuging level 2)

Corrected in http://pliant.cx/archive/pliant-85experimental11.tgz
with several other details.

Message posted by hubert.tonneau on 2003/06/11 16:44:27
http://pliant.cx/archive/pliant-85experimental14.tgz is available.

Now you can start to try styling.
Here are some sample instructions you can use in 'Style options' field of your
site definition:

common bgcolor (color hsl 60 20 85)
common url_icon "/helio/graphic/service/icon/ok_url.png"
title font "Century Gothic" "bold" 72 color (color hsl 240 100 28)
header font "Century Gothic" "bold" 36 24 16 color (color hsl 240 100 28)
font family "Helvetica"
cell header_color (color hsl 240 50 85)


Please notice that if you want to use server side rendered fonts, then you
have to use page
http://localhost/pliant/graphic/vector/font.html
and button 'scan for fonts' in order to tell Pliant where to search type 1
fonts on your disk.

Have fun.
Please also notice that it's still experimental.
Message posted by marcus on 2003/06/12 12:48:19
> Have fun.

I already am. 

Very interesting.

I wonder whether it would be interesting to also allow the user to set the 
colour parameters of a title/headers background. It seems that they are 
pretty much hard coded in the style_setup. 

The rationale is that people might want to customize that title background colour
without having to get their hands muddy with style_setup.

I would say that some wouldn't want a title background colour at all. 

Message posted by hubert.tonneau on 2003/06/12 12:56:28
> I wonder whether it would be interesting to also allow the user to set the
> colour parameters of a title/headers background.

Will be in release 85 final.
It will also be possible to have 3D effects or the borders.

I make experimental releases in order to let people see, review and comment
the engine. The details to make the default style as much flexible as possible
will take a bit more time.

Basically, customizing is possible at different levels depending on the complexity
of the project and the technical capabilties of the author:
. forcing constants in the style in the site decaration (CSS level)
. forcing values in the style in the middle of the .page (HTML level)
. creating a custom .style
. creating new tags and a custom .style (XML level)
Message posted by hubert.tonneau on 2003/06/12 13:01:32
If you want to see the power of the existing parts of the default style, you
can try a line like this one in you site style options:
button font "Century Gothic" "bold" 14 tcolor (color rgb 0 0 144) button "button.png" bsize 96 96 margin 16 8 16 8 bcolor (color hsl 60 20 75)

It will ask the server to render buttons on server side (please also notice that
the font you use must be available in the fonts listed in
http://localhost/pliant/graphic/vector/font.html)
Message posted by hubert.tonneau on 2003/06/12 19:22:24
http://pliant.cx/archive/pliant-85experimental17.tgz is available.

It's the first really powerfull one, also still experimental.

Here are some sample instructions you can use in style options field:

common bgcolor (color hsl 130 5 80)

title font "Century Gothic" "bold server" 36
title button "button.png" bsize 96 96
title color (color hsl 130 100 10)
title bgcolor (color hsl 130 15 60)

header font "Helvetica" "bold" 36
header round 10
header color (color hsl 130 100 10)
header bgcolor (color hsl 130 15 60)
header factor 0.5 0.25 0.125
header shade 0.2 0.4 0.6

In
title font "Century Gothic" "bold server" 36
'server' means server side font rendering for the title.

title button "button.png" bsize 96 96
means that we want a 3D effect for titles.

header round 10
mans rounded corners for headers.

...

Message posted by maybe Marcus Vinicius on 2003/06/13 18:37:55
I can't get my header with the colour I want. Below is how I am styling my site:

common bgcolor (color hsl 60 30 80)

title font "Avant garde" "bold server" 36
title color (color hsl 130 100 10)

header font "Avant garde" "bold" 36
header color (color hsl 130 100 10)

common url_icon "/pliant/welcome/image/url.png"

Why?
Message posted by hubert.tonneau on 2003/06/13 19:27:40
title font "Avant garde" "bold server" 36
title color (color hsl 130 100 10) # set the text color
title round 5
title bgcolor (color hsl 130 100 60) # set the ground color

Please notice that the ground color for the title will apply only if the title
is in a box, so if either you have something like:
title round 5 # flat box with round corner (the old Pliant style)
or like:
title button "button.png" bsize 96 96 # 3D modeled according to an image in /pliant/protocol/http/common/icon/



Message posted by maybe Marcus on 2003/06/13 21:56:04
I could set the colour of my title. No problems. What I can't, is to set the colour
of the subsection titles, i.e., header titles.  To do that, I tried

header font "Avant garde" "bold" 36
header color (color hsl 130 100 10)

But it does not work.
Message posted by hubert.tonneau on 2003/06/13 22:21:01
Same answer:
You have to use
header round 10
or
header button "button.png" bsize 96 96

Message posted by hubert.tonneau on 2003/06/13 23:04:16
Assuming that you are using at least Pliant 85 experimental 21,
then you could even try:
header button "round.png" bsize 64 64 margin 30 30 30 30

You have to understand it as:
use /pliant/protocol/http/common/icon/round.png as the 3D model,
resize it to 64 x 64 pixels,
the center part (I mean the one which will be extended to contain the all
header) is ranging from pixel 30 to pixel 33 in each direction (in other
words the non central part is 30 pixels on left, top, right and button sides)
Message posted by maybe Marcus on 2003/06/14 00:55:55
Now I got it. I was missing a parameter, namely, instead of

header font "Avant garde" "bold server" 36

I was trying

header font "Avant garde" "bold" 36
Message posted by maybe Marcus on 2003/07/16 12:11:45
In my server, buttons are currently styled as follows:


button font "Courier" "bold" 16 tcolor (color rgb 44 300 100) button "button.png" bsize 96 96 margin 16 8 16 8 bcolor (color hsl 60 20 75)

I would like to produce a button with the label "Forgot your password?"

But the server renders it as "Forgot your password&#63;"

I have tried several fonts (those that show up at /pliant/graphics/vector/fonts.html), but still I couldn't find one that 
eliminates the problem.
Message posted by hubert.tonneau on 2003/07/16 12:25:48
In module /pliant/protocol/http/style/default.style, just replace the
existing 'tyle_tag button' bloc with the following one:

  style_tag button
    if button=""
      write "<input type=[dq]submit[dq] name=[dq]"+target+"[dq] value=[dq]"+label+"[dq]>[lf]"
    else
      var Str action := "[dq]button_pressed('"+target+"')[dq]"
      var Str event := shunt browser="netscape" "onMouseUp" "onClick"
      var Str url := "/common/button"+(http_encode " [dq]"+html_decode:label+"[dq] font [dq]"+family+"[dq] [dq]"+attributes+"[dq] "+string:size+(shunt extend=defined " extend "+string:extend "")+(shunt center " center" "")+" tcolor [dq]"+string:tcolor+"[dq] button [dq]"+button+"[dq]"+(shunt bsize_x=defined " bsize "+string:bsize_x+" "+string:bsize_y "")+(shunt margin_left=defined " margin "+string:margin_left+" "+string:margin_top+" "+string:margin_right+" "+string:margin_bottom "")+" bcolor [dq]"+string:bcolor+"[dq] bgcolor [dq]"+string:(attribute common bgcolor)+"[dq]")
      write "<img src=[dq]"+url+"[dq] align=[dq]middle[dq] "+event+"="+action+">"
    if not has:noeol
      write "<br>[lf]"
Message posted by maybe Marcus on 2003/07/30 13:22:47
The area specific style setting does not seem to work.

In the site configuration page, I have defined some specific settings for a area.
After restarting the server, the style settings do not show up in the area.
Message posted by hubert.tonneau on 2003/08/19 22:55:32
I've uploaded http://pliant.cx/archive/pliant-85experimental24.tgz

Styling in the HTTP server should now be close to final.

This experimantal tarball also introduces the bases for Pliant vector
drawing system (as a result, the Pliant browser is broken)
/pliant/graphic/vector/prototype.pli,
a very experimental PDF loader /pliant/graphic/vector/pdf.pli,

and experimental webdav support in /pliant/appli/file_browser.pli
Experimental webdav support means that now, if you export some part of your
tree through Pliant file browser, then the same part can also be accessed
directly from Windows and others through mounting it as a network unit.