Browser Widget/HTML5/LC Integration

[Richard Gaskin]

Alex Tweedly wrote:

 > HTML also has something else - CSS, The object inheritance model in
 > LC allows you to inherit properties (e.g. colour, margins, etc.) for
 > your objects - but it doesn't have any easy way to classify together
 > (I wanted to say "group" but that would get confusing :-) a number of
 > objects. So in the example here, there were a bunch of buttons (<li>
 > entries) whose properties could be changed consistently by tweaking
 > the CSS. I think we lack an equivalently easy way to do it in LC.

Being able to bind styles with the object as we do in LC is nice, but 
indeed lacking when we need to apply a style to a range of controls.

CSS does this well.  I believe Mark Waddingham had once suggested 
offhand that some sort of style management similar to CSS would be nice 
to consider adding to the engine, but with so much on their plates I'd 
be surprised if they've had time to explore it.

I have a need for this myself, and in the absence of an engine-provided 
solution I drafted my own:  I maintain a substack where I keep controls 
that I use as style templates, and in my user-facing controls I can 
assign a custom prop named "ufwStyleDef" which includes the short name 
of the relevant style template object.

It's property-based to be reasonably efficient ("set the properties of 
<object> to <array>" was added specifically for the purpose of rapidly 
replicating objects), but of course we don't want all properties carried 
over.  So the style definition object contains a property named 
ufwExcludedStyleProps, a simple return-delimited list of properties I 
don't want to change in the object subscribing to a style template 
(usually just name and rect, sometimes other).

This rough draft wound up working well enough that I haven't bothered 
refining it, though I'm sure opportunities are there for more refined 
control and greater efficiency.  But as-is it covered what I needed to 
do, and on my machine it updates at the rate of about 1 ms per object, 
which is fast enough for my needs since I only run the update loop 
during development.


on fwUpdateObjectStyle pObj
    put the ufwStyleDef of pObj into tStyle
    if tStyle is empty then exit fwUpdateObjectStyle
    if there is not a control tStyle of stack "fwStyleTMPLs" then
        exit fwUpdateObjectStyle
    end if
    put the long id of control tStyle of stack "fwStyleTMPLs" into \
       tStyleDefObj
    put the properties of tStyleDefObj into tStylePropsA
    -- Remove props we don't want changed:
    put the ufwExcludedStyleProps of tStyleDefObj into tExcludedProps
    repeat for each line tProp in tExcludedProps
       delete variable tStylePropsA[tProp]
    end repeat
    -- Merge remainder with target object props:
    put the properties of pObj into tPropsA
    union tStylePropsA with tPropsA
    -- Apply the merged set:
    set the properties of pObj to tStylePropsA
end fwUpdateObjectStyle


-- 
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  Ambassador at FourthWorld.com                http://www.FourthWorld.com