Revised. I removed the text element from the ulink2 class. I include the
ulink2 class file (ulink2.lzx) and create a new ulink class that extends
ulink2. In this new class I define the text and set the width. This way I
can better determine the width for the text depending on nesting within
views. Revised ulink2 class:

<!-- * X_LZ_COPYRIGHT_BEGIN
***************************************************
* Copyright 2005 Laszlo Systems, Inc. All Rights Reserved.
*
* Use is subject to license terms.
*
* X_LZ_COPYRIGHT_END
********************************************************** 
* ulink2 class based on original ulink class. Additional code added by
* 
* Gary Schultz, Wisconsin Department of Commerce.
* -->
<!-- @LZX_VERSION@
-->

<!-- A class for URL links.

This differs from the use of the XHTML <a> attribute, e.g in '<text><a
href="http://openlaszlo.org";>OpenLaszlo.org</a></text>', in these ways:
- There is a hover effect.  (This defaults to underline.)
- There is a hover color.  (This defaults to blue.)
- The link content and target can be databound. 

Example:
  <ulink href="http://openlaszlo.org";>OpenLaszlo.org</ulink>

See ulink-test.lzx for additional examples. -->
<library>
  <class name="ulink2">
    <!-- The color when the link is <em>not</em> being hovered. -->
    <attribute name="color" type="color" value="blue"/>
    <!-- The color when the link is hovered. -->
    <attribute name="hoverColor" type="color" value="blue"/>
    <!-- A list of tags that are applied to the link when
    it is hovered.  This is either a list of tag names, e.g. "u"
    or "u b", or the HTML itself, e.g. "&lt;u&gt;". -->
    <attribute name="hoverTags" type="string" value="u"/>
    <!-- The text of the link. -->
    <attribute name="text" type="html"/>
    <!-- The URL target. -->
    <attribute name="href" type="string"/>
    <!-- Where the target opens.  See LzBrowser.loadURL for
    a list of values. -->
    <attribute name="target" type="string" value="_new"/>
    
    <method event="onmouseover">
      label.setAttribute('fgcolor', this.hoverColor);
      label.setText(makeTags(this.hoverTags)+this.text);
    </method>
    
    <method event ="onmouseout">
      label.setAttribute('fgcolor', this.color);
      label.setText(this.text);
    </method>
    
    <method event="onclick">
      LzBrowser.loadURL(this.href, this.target)
    </method>

    <method name="makeTags" args="tags"><![CDATA[
      if (tags.split('<').length > 1) return tags;
      var s = '';
      tags = tags.split(' ');
      for (var i = 0; i < tags.length; i++) {
        s += '<' + tags[i] + '>';
      }
      return s;
    ]]></method>

    <!--        
      This is where ulink2 class differs from ulink class. I have removed
the text element from the ulink2 class.
      I will extend ulink2 in the Laszlo project file and add the text
element within the new ulink class. There 
      I will add the multiline and width attributes so that the new ulink
class text will wrap inside a containing view. 
      For example: 
      
      <class name="myulink" extends="ulink2">
        <text name="label" resize="true" fgcolor="${parent.color}"
        text="${parent.text}" multiline="true"
        width="${parent.parent.width-4}" />
      </class>      
    --> 

  </class>
</library>


And this is how I use it in the Laszlo project file:

<include href="incubator/ulink2.lzx" />

<class name="newulink" extends="ulink2">
  <text name="label" resize="true" fgcolor="${parent.color}"
    text="${parent.text}" multiline="true"
    width="${parent.parent.width-4}" />
</class>

-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Schultz, Gary -
COMM
Sent: Thursday, February 01, 2007 1:06 PM
To: '[email protected]'
Subject: Re: [Laszlo-user] Openlaszlo box model? SOLVED

Solved. I found the solution in the ulink class. I created a new ulink
class, ulink2. Within this ulink class there is a text element. I added two
attributes to the text element, multiline="true" and width. In the case of
the width attribute, the value will vary depending on the nesting? (I
couldn't find a more direct method to find the width of the overall
containing view, so I cheated). Anyway, below is my ulink2 class that
constrains the width of the ulink text.


<!-- * X_LZ_COPYRIGHT_BEGIN
***************************************************
* Copyright 2005 Laszlo Systems, Inc. All Rights Reserved.
*
* Use is subject to license terms.
*
* X_LZ_COPYRIGHT_END
**********************************************************
* ulink2 class based on original ulink class. Additional code added by
*
* Gary Schultz, Wisconsin Department of Commerce.
* -->
<!-- @LZX_VERSION@
-->

<!-- A class for URL links.

This differs from the use of the XHTML <a> attribute, e.g in '<text><a
href="http://openlaszlo.org";>OpenLaszlo.org</a></text>', in these ways:
- There is a hover effect.  (This defaults to underline.)
- There is a hover color.  (This defaults to blue.)
- The link content and target can be databound. 

Example:
  <ulink href="http://openlaszlo.org";>OpenLaszlo.org</ulink>

See ulink-test.lzx for additional examples. --> <library>
  <class name="ulink2">
    <!-- The color when the link is <em>not</em> being hovered. -->
    <attribute name="color" type="color" value="blue"/>
    <!-- The color when the link is hovered. -->
    <attribute name="hoverColor" type="color" value="blue"/>
    <!-- A list of tags that are applied to the link when
    it is hovered.  This is either a list of tag names, e.g. "u"
    or "u b", or the HTML itself, e.g. "&lt;u&gt;". -->
    <attribute name="hoverTags" type="string" value="u"/>
    <!-- The text of the link. -->
    <attribute name="text" type="html"/>
    <!-- The URL target. -->
    <attribute name="href" type="string"/>
    <!-- Where the target opens.  See LzBrowser.loadURL for
    a list of values. -->
    <attribute name="target" type="string" value="_new"/>
    
    <method event="onmouseover">
      label.setAttribute('fgcolor', this.hoverColor);
      label.setText(makeTags(this.hoverTags)+this.text);
    </method>
    
    <method event ="onmouseout">
      label.setAttribute('fgcolor', this.color);
      label.setText(this.text);
    </method>
    
    <method event="onclick">
      LzBrowser.loadURL(this.href, this.target)
    </method>

    <method name="makeTags" args="tags"><![CDATA[
      if (tags.split('<').length > 1) return tags;
      var s = '';
      tags = tags.split(' ');
      for (var i = 0; i < tags.length; i++) {
        s += '<' + tags[i] + '>';
      }
      return s;
    ]]></method>

    <!--        
      This is where ulink2 class differs from ulink class. 
      I have added multiline and width attributes so that 
      the ulink2 class text will wrap inside a containing
      view. 
    -->                                 
                                        
    <text name="label" resize="true" fgcolor="${parent.color}"
          text="${parent.text}" multiline="true"
width="${parent.parent.width-4}"/>
  </class>
</library>


-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Schultz, Gary -
COMM
Sent: Thursday, February 01, 2007 11:12 AM
To: '[email protected]'
Subject: Re: [Laszlo-user] Openlaszlo box model?

OpenLaszlo and HTML example for comparison:

This is based on ulink-test.lzx, I simply called it ulink-test2.lzx and
placed in the incubator/test folder. Note that the ulink text is clipped,
but I want it to wrap. I have tried this with view layout axis x and and
vbox.

<!-- * X_LZ_COPYRIGHT_BEGIN
***************************************************
* Copyright 2005 Laszlo Systems, Inc. All Rights Reserved.
*
* Use is subject to license terms.
*
* X_LZ_COPYRIGHT_END ******************************************************
-->
<!-- @LZX_VERSION@
-->

<canvas layout="axis: y">
  <include href="incubator/ulink.lzx"/>
  <include href="incubator/tooltip/tooltip.lzx"/>
  
  <dataset name="ds">
    <link name="OpenLaszlo.org" href="http://openlaszlo.org"/>
    <link name="Go to LaszloSystems" href="http://laszlosystems.com"/>
    <link name="BlogBox.com" href="http://blogbox.com"/>
  </dataset>
  
  <vbox options="ignorelayout" x="150" bgcolor="red" width="100"
clip="true">
    <text multiline="true"><i><u>Go to LaszloSystems.com</u></i></text>
    <ulink bgcolor="green" width="100" datapath="ds:/link"
text="$path{'@name'}" href="$path{'@href'}">
      <tooltip text="$path{'@href'}"/>
    </ulink>
  </vbox>
</canvas>


HTML example for comparison in which the link text wraps within the div.

<html><body><h1>It works!</h1>

<div style="background:red;width:100px;">
<a href="http://laszlosystems.com"/>Go to LaszloSystems</a> </div>
</body></html>


Gary Schultz
 

-----Original Message-----
From: Matthew Cloy [mailto:[EMAIL PROTECTED]
Sent: Thursday, February 01, 2007 1:38 AM
To: Schultz, Gary - COMM
Cc: '[email protected]'
Subject: Re: [Laszlo-user] Openlaszlo box model?

Hi Gary,

So... AFAIK,

Coordinates are always relative to the parent view. (This means all sibling
views retain the same coordinate system). This is after any "placement" or
"defaultplacement" changes to the view hierachy.

A view is "clipped" if you specify the clipped="true" flag on it. If not
clipped then even though the view may be 10 units wide, a larger view will
"spill" out visually.

I think that as far as rendering the views is concerned, there's no other
rules to take into account. There isn't really a "box" model as all views
are just One rectangular area.

If you have an example of where you're getting confused that might help...

Of course if you add a layout into your view it will arrange the views
accordingly, but the coordinate system for each still stays the same.

Cheers!
Matt

Schultz, Gary - COMM wrote:
> I should have added that there is some urgency to this. If I cannot 
> get OpenLaszlo to perform as needed for the web project by the end of 
> this week, my boss is pulling the plug on using Openlaszlo and that 
> will pretty much end any future OpenLaszlo development in our agency.
>  
> Gary Schultz
> Wisconsin Department of Commerce
>
>
------------------------------------------------------------------------
>     *From:* [EMAIL PROTECTED]
>     [mailto:[EMAIL PROTECTED] *On Behalf Of
>     *Schultz, Gary - COMM
>     *Sent:* Wednesday, January 31, 2007 3:36 PM
>     *To:* '[email protected]'
>     *Subject:* [Laszlo-user] Openlaszlo box model?
>
>     Is there any resource that helps describe the OpenLaszlo "Box
>     Model", something similar to the CSS box model. I'm having a very
>     hard time trying to figure out when Openlaszlo renders something
>     such as a view in an "absolute" position versus a "relative"
>     position to another view. I have situations where I think
>     something should be relative it ends up being absolute and
>     text renders outside a containing view.
>      
>     I'm trying to implement OpenLaszlo for a web project, but honestly
>     have spent way too much time trying too learn it and use it. But
>     since I'm as far as I am, I figure I might as well go with
>     OpenLaszlo. But the positioning of views, text etc. is driving me
>     nuts.
>      
>     Gary Schultz
>     Wisconsin Department of Commerce
>

Reply via email to