Html – Displaying HTML node in tree – height issue

apache-flexhtml

Grrr so close yet still failing…

I display this tree, in Flex, which contains two nodes types:

Regular nodes, which are rendered normally like text (because they are!)
Rich (HTML) nodes – that's where things get twisted

Note that my issue is when I dynamically add a new (HTML) node to my tree.

So… How do I display HTML nodes?

I subclass TreeItemRenderer
In that subclass, I override set data() and add a text child to my renderer

Therefore I now have:

[icon] [label]

[text component]

Why?

The default label is a pure text component, not HTML-capable, hence the extra component: I want to display the new guy and forget the default label.

(continued) I override updateDisplayList() and, if the node is a rich one, I set label's height to zero, set my component's x and y to label'x and and y.

So…what am I missing? Ah, yes: I need to set my node's height since HTML text can be bigger or smaller than its text counterpart.

(continued) I override measure()
If my node is not a rich one, I simply invoke super.measure() and return
If it is a rich one, I give my html component a width (htmlComponent.width = explicitWidth – super.label.x;) and its height should be automatically computed.

This gives me a fairly reliably unreliable result!

When I fold/unfold my tree, every other time, I seem to get a correct height for my HTML node. The other time I get a height of '4' which happens to be the HTML component's padding alone, without content.

I know that I must be doing something fairly stupid here…but I am not sure what. I will post my code if my rambling is too incoherent to make any sense of…

**** EDIT: here is the source code for my renderer
As you can see, only 'notes' nodes use HTML.
I add a 'htmlComponent' child that will display the rich text while the default label is zero-sized and disappears.
It's definitely very raw code, as it's in progress!

    package com.voilaweb.tfd
{
    import mx.collections.*;
    import mx.controls.Text;
    import mx.controls.treeClasses.*;
    import mx.core.UITextField;
    import mx.core.UIComponent;
    import flash.text.TextLineMetrics;

    public class OutlinerRenderer extends TreeItemRenderer
    {
        private function get is_note():Boolean
        {
            return ('outlinerNodeNote' == XML(super.data).name().localName);
        }

        override public function set data(value:Object):void
        {
            super.data = value;
            var htmlComponent:Text = super.getChildByName("htmlComponent") as Text;
            if(!htmlComponent)
            {
                htmlComponent = new Text();
                htmlComponent.name = "htmlComponent";
                addChild(htmlComponent);
            }
            if(is_note)
                htmlComponent.htmlText = XML(super.data).attribute('nodeText');
            else
                htmlComponent.htmlText = null;
            setStyle('verticalAlign', 'top');
        }

 /*
  * Today we've learnt a valuable lesson: there is no guarantee of when createChildren() will be invoked.
  * Better be dirty and add children in set data()
        override protected function createChildren():void
        {
            super.createChildren();
            var htmlComponent:Text = new Text();
            htmlComponent.name = "htmlComponent";
            addChild(htmlComponent);
        }
*/
        override protected function measure():void
        {
          if(is_note)
          {
            super.measure();
            var htmlComponent:Text = super.getChildByName("htmlComponent") as Text;
            //Setting the width of the description field
            //causes the height calculation to happen
            htmlComponent.width = explicitWidth - super.label.x;
            //We add the measuredHeight to the renderers measured height
            //measuredHeight += (htmlComponent.measuredHeight - label.measuredHeight);
            // Note the silly trick here...hopefully in the future I figure out how to avoid it
            //
            // Here is what happens: we check if measuredHeight is equal to decoration such as margin, insets...rather than that + some height
            // If so, then we need to come up with an actual height which we do by adding textHeight to this height

            // Note that I care about text being equal to margin etc but do not have proper access to these
            // For instance UITextField.TEXT_HEIGHT_PADDING == 4 but is not accessible
            // I am going to check if "<10" that will cover this case...
            trace("For text " + htmlComponent.htmlText);
            trace("width = " + htmlComponent.getExplicitOrMeasuredWidth()+" x height = " + htmlComponent.getExplicitOrMeasuredHeight());
            var m:TextLineMetrics = htmlComponent.measureHTMLText(htmlComponent.htmlText);
            //if(10 > htmlComponent.measuredHeight && !isNaN(htmlComponent.explicitHeight))
            //htmlComponent.explicitHeight = m.height + htmlComponent.measuredHeight;
            //if(htmlComponent.measuredHeight < 10) htmlComponent.explicitHeight = 50;

            //measuredHeight += (htmlComponent.getExplicitOrMeasuredHeight() - super.label.getExplicitOrMeasuredHeight());
            measuredHeight += (htmlComponent.getExplicitOrMeasuredHeight() - label.getExplicitOrMeasuredHeight());
            trace("m:"+m.height+" Height: " + htmlComponent.getExplicitOrMeasuredHeight());
          }
          else
          {
            super.measure();
          }
        }     

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            label.height = label.getExplicitOrMeasuredHeight(); // If you tell me my height, then I shall use my variable height!

            graphics.clear();

            if(is_note)
            {
                label.height = 0;
                var htmlComponent:Text = super.getChildByName("htmlComponent") as Text;
                htmlComponent.x = label.x;
                htmlComponent.y = label.y;
                htmlComponent.height = htmlComponent.getExplicitOrMeasuredHeight();

                graphics.beginFill(0x555555);
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                graphics.endFill();
            }

            var complete:XMLList = XML(super.data).attribute('complete');
            if(complete.length() > 0 && true == complete[0])
            {
                var startx:Number = data ? TreeListData(listData).indent : 0;
                if(disclosureIcon)
                    startx += disclosureIcon.measuredWidth;
                if(icon)
                    startx += icon.measuredWidth;
                graphics.lineStyle(3, getStyle("color"));
                var y:Number = label.y + label.getExplicitOrMeasuredHeight() / 2;
                graphics.moveTo(startx, y);
                graphics.lineTo(startx + label.getExplicitOrMeasuredWidth(), y);
            }
        }
    }
}

Best Solution

You made false assumption about label component in default renderer - it is capable of displaying html content. This renderer works for me:

public class HtmlTreeItemRenderer extends TreeItemRenderer {
    override protected function commitProperties():void {
        super.commitProperties();
        label.htmlText = data ? listData.label : "";
        invalidateDisplayList();
    }
}

Related Solutions

Html – What are valid values for the id attribute in HTML

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case 'f') and #FirstName { color: red } in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.

Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here: http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.