Call Javascript Functions Inside An HTML Panel

[itg-assistant]

Chris asked 2016-10-04 00:27:28 UTC

So in the Visual WebGui version of my IRC chat, I had incoming messages appear in an HTML Box so they'd have links, smileys, etc.  I discovered that the HTML Box would blink as it refreshed whenever the HTML property was set, and I needed it to stay scrolled to the bottom anyway, so I added some Javascript functions to the initial HTML that would add an incoming message to a div and then scroll the div to the bottom instead of setting the HTML property every time.

The two functions in the HTML header are:

function myHtmlScroll(objWindow) {
var objBody = objWindow.document.body;
if (objBody.scrollHeight > objBody.clientHeight) {
objBody.scrollTop = objBody.scrollHeight - objBody.clientHeight;
}
}
function AddMsg(NewText) {
var objBody = document.getElementById('chatdiv');
objBody.innerHTML +=NewText;
myHtmlScroll(window);
}

And whenever a message came in I'd call that with:

VWGClientContext.Current.Invoke("GenericIframeInvoke", ASChatMain.ID.ToString(), strMethod, strParm)

function GenericIframeInvoke(strId, strFunctionName, parm1, parm2, parm3, parm4, parm5) {
var objFrame = document.getElementById("TRG_" + strId);
if (objFrame) {
var objMethod = objFrame.contentWindow[strFunctionName];
if (typeof objMethod === "function")
objMethod.call(null, parm1, parm2, parm3, parm5, parm5);
}
}

How do I go about doing that with the HTML Panel in WiseJ? Or is there a better way to accomplish the rich text + no blink + scroll to bottom thing?  I thought I might be able to get away with a label with AllowHTML set on, but it has no scrollbar options and the old autosize-inside-a-panel trick didn't seem to work.

Thanks,
Chris

[itg-assistant]

Luca answered 2016-10-04 16:50:15 UTC

Hi Chris,

You don't need all that. There are several simpler ways in Wisej to achieve what  you need, you can use an HtmlPanel, a ListBox or a Panel (AutoScroll=true). I am preparing a sample app showing all three options. I will send it later on today or tomorrow - it uncovered a couple of issues that need to be fixed for Panel.ScrollIntoView() to work properly.

The ListBox way adds items with html text and selects the last item.

The panel way, adds labels with html text docked to top and scroll the last added one into view.

The  html box way, adds html text and scrolls the inner div to the bottom.

One of the problems in VWG was that most changes to the content of any control caused the re-creation of the dom (that's the flickering). Wisej never recreates the dom, the widgets always manipulate it through a fast-dom indirection.

Best,

Luca

[itg-assistant]

Chris answered 2016-10-05 17:31:48 UTC

I played around with doing it with the ListBox and individual labels and ran into a couple of other problems.  One is just it makes switching channels kind of a pain since either I have to store each individual message and readd them or store multiple controls and turn them on and off.  Right now I just add them to an overall channel HTML property and set the HTML Box to that whenever there's a switch.  With the ListBox specifically, I can't have the text coming up from the bottom and the latest message ends up highlighted.

That was another part of the reason I ended up doing a div inside the HTML back in VWG since I needed to get the text bottom-aligned, and it didn't have a way to do that.  I don't know if that would be an issue with the example you're working on though.

[itg-assistant]

Luca answered 2016-10-05 18:52:58 UTC

Hi Chris,

See attached sample app. You need to update Wisej first - there are a couple of enhancements and fixes related to the HtmlPanel and ComboBox that are necessary for this sample to work properly.

To scroll to the bottom any scrollable panel you can simply use panel.Call("scrollToY", int.MaxValue).

HTH

Best,

Luca

[itg-assistant]

Chris answered 2016-10-27 17:55:20 UTC

Hey Luca,

Sorry to take so long to reply!  ScrolltoY is exactly what I was looking for, thanks!

One thing though, is there a way to get the text aligned to bottom? Everything I try gives me a blank HTML box.

Thanks,
Chris

[itg-assistant]

Luca answered 2016-10-27 18:25:38 UTC

Can you send me a screenshot of what you get and what you'd like to get?

Best

Luca

[itg-assistant]

Chris answered 2016-10-27 18:46:16 UTC

Sure can. Attached.

The one on the left is the VWG version of the chat where the text comes up from the bottom.  The WiseJ version on the right is if I don't add any manipulation to the divs in the HTML box besides some padding to avoid going under the scroll bar, so the text comes down from the top.  If I use the same absolute positioning I did in VWG, I just get a blank area with no text at all.

[itg-assistant]

Luca answered 2016-10-27 21:29:42 UTC

Use this class instead of HtmlPanel. It removes "top:0px" and adds "bottom:0px" to the inner html widget. It can be in many ways, this one doesn't require a javascript extended class.

public class HtmlPanelEx : HtmlPanel
{
  public HtmlPanelEx()
  {
    // make sure the control is created, otherwise
    // Update may re-enter when calling Eval() on a control that is not
    // created yet (this "problem" may probably be changed).
    CreateControl();
  }

  public override void Update()
  {
    // if the control is created and it's a new rendering, dock the
    // inner html widget to the bttom.
    if (this.Created && ((IWisejControl)this).IsNew)
    {
      DockHtmlWidgetToBottom();
    }
    base.Update();
  }

  private void DockHtmlWidgetToBottom()
  {
    // remove the top style and add the bottom style
    // when the widget is rendered into the dom.
    this.Eval(@"
      this.addListenerOnce('appear', function() {
        var el = this.getChildControl('html').getContentElement();
        el.setStyle('top', null);
        el.setStyle('bottom', '0px');
      });
    ");
   }
}

[itg-assistant]

Chris answered 2016-10-27 22:05:52 UTC

Works like a charm! Thanks Luca!

[itg-assistant]

Chris Abate answered 2016-12-28 20:50:45 UTC

Hey Luca,

Just updated to the latest build and it seems to have broken the alignment part of this.  It's fine when it loads, but messages added afterwards end up outside the bounds of the control.  It will fix the alignment if I resize the panel, but then will resume adding messages down beyond the control bottom.

Any ideas on how to fix that?

Thanks,

Chris

[itg-assistant]

Frank (ITG) answered 2016-12-28 22:05:26 UTC

Hi Chris,

thanks, we already noticed this problem and fixed it in our build but it is not yet released.

We´ll keep you updated.

Best regards
Frank