HTMLDialog vs WebDialog?

HTMLDialog vs WebDialog?

Postby leela » Wed Jul 12, 2017 12:10 pm

Do any developers here have an opinion on HTMLDialog vs WebDialogs?

It seems like the docs steer us towards using HTMLDialog but all of the learning resources available are for the WebDialog.

As I understand it some of the ways to pass data are different in the HTMLDialog windows, but they don't seem to be documented anywhere.

If I make an extension only for 2017 users that be very limiting?

Also are there any stats about % users for each version up to 2017?
0
User avatar
leela 
 

Re: HTMLDialog vs WebDialog?

Postby Garry K » Wed Jul 12, 2017 7:49 pm

I use the same strategy to move data back and forth between Ruby and the Dialog.

For SU 2017 users I have a configuration where you can use HTMLDialog or WebDialog. This configuration is ignored for older Sketchup versions.

I personally like the older IE style WebDialog. I trap the Enter key so you can use it instead of clicking OK. With the chrome version the enter key doesn't get trapped when a drop down list is opened. Also the position of the drop down list in Chrome is out immediately after moving the HTMLdialog form. Lastly I like to color the background of a checkbox for a little quicker visual and this does not work in Chrome.

At some point Trimble will drop the WebDialog in favor of just supporting Chrome.
0

Garry K 
Premium Member
Premium Member
 

Re: HTMLDialog vs WebDialog?

Postby driven » Thu Jul 13, 2017 10:45 pm

Garry

I can color the backgrounds of input boxes with css...

and the Enter key works as well...

test this fiddle in a HtmlDialog...

http://jsfiddle.net/wkpeq/1/

it works on a mac for CEF in SU...

are you trying with jQuery or another framework?

john
0
learn from the mistakes of others, you may not live long enough to make them all yourself...

driven 
PluginStore Author
PluginStore Author
 

Re: HTMLDialog vs WebDialog?

Postby Garry K » Fri Jul 14, 2017 4:01 pm

John

I use JQuery - not JsFiddle.

With Windows I can color the background of Input Text and Select - just not check boxes.
Also the Enter key doesn't trap while you are inside a drop down list.

Here IE allows me to color background of check boxes.

check boxes.png


And here is chrome - notice the check boxes background is transparent. Also I moved the form while the drop down list is open and now you can't tell which drop down I was in. The difference is IE closes the drop down when you click and drag the form - chrome does not.

check boxes chrome.png
0

Garry K 
Premium Member
Premium Member
 

Re: HTMLDialog vs WebDialog?

Postby driven » Sun Jul 16, 2017 8:45 pm

Garry K wrote:I use JQuery - not JsFiddle.


JsFiddle is an online test environment...

you can even test your jQuery in it...

if you launch it from within SU it quickly shows if code works in the SU browser of your running [IE/Safari/CEF]...

to test you use set_url and add code too see what flies...

both your issues work in CEF using vanilla js inside SU, so are most likely jQuery needing updating...

john
0
learn from the mistakes of others, you may not live long enough to make them all yourself...

driven 
PluginStore Author
PluginStore Author
 

Re: HTMLDialog vs WebDialog?

Postby Dan Rathbun » Tue Jul 18, 2017 10:54 pm

Garry K wrote:Also the Enter key doesn't trap while you are inside a drop down list.

But when the user (in CEF) hits ENTER on an `<select><option>`, that changes the selection does it not ? And therefore it should fire the some event ?



I just tested in normal Chrome and the ENTER key works fine.
http://jsfiddle.net/wkpeq/73/

Code: Select all
<!DOCTYPE html>
<html>
    <head>
        <script>
            function CheckKey(e) {
                var code = e.keyCode ? e.keyCode : e.which;
                if(code === 13) {
                  alert("You press Enter key.");
                }            
            }

            function SubstanceChangeHandler(val) {
              alert("New substance chosen: "+val);
              txtTest.value= val;
            }        
        </script>
    </head>
    <body>
        <input name="txtTest"  type="text" id="txtTest" onkeyup="CheckKey(event)"/>

        <select onchange="SubstanceChangeHandler(this.value);">
          <optgroup label="Alkaline Metals">
            <option>Lithium (Li)</option>
            <option>Sodium (Na)</option>
            <option>Potassium (K)</option>
          </optgroup>
          <optgroup label="Halogens">
            <option>Fluorine (F)</option>
            <option>Chlorine (Cl)</option>
            <option>Bromine (Br)</option>
          </optgroup>
        </select>  
    </body>

</html>
0
    I'm not here much anymore. But a PM will fire email notifications.
    User avatar
    Dan Rathbun 
    PluginStore Author
    PluginStore Author
     

    Re: HTMLDialog vs WebDialog?

    Postby Dan Rathbun » Wed Jul 19, 2017 12:26 am

    Garry K wrote: Also I moved the form while the drop down list is open and now you can't tell which drop down I was in. The difference is IE closes the drop down when you click and drag the form - chrome does not.

    Let us try some tests to see if we can get Chrome to close the <select> droplists.

    Code: Select all
     <body onmouseout="document.blur();" onmouseover="document.focus();">

    I'm hoping this will cause the current active selection element to lose focus and have it's blur event fire.

    If this does not work, then perhaps keep track of the current object that has focus:

    Code: Select all
    <!DOCTYPE html>
    <html>

        <head>
            <script>
                // Global variable:
                activeObject = document.body;
                previousObject = document.body;
               
                function setActive(obj) {
                    activeObject = obj;
                }

                function clearActive(obj) {
                    activeObject = document.body;
                    previousObject = obj;
                }

                function blurAll() {
                    if activeObject != document.body {
                        activeObject.blur();
                        if activeObject != document.body {
                            clearActive(activeObject);
                        }
                    }
                    document.blur();
                }

                function reFocus() {
                    document.focus();
                    if previousObject != document.body {
                        previousObject.focus(); // calls setActive(previousObject)
                        previousObject = document.body;
                    }
                }

                function CheckKey(e) {
                    var code = e.keyCode ? e.keyCode : e.which;
                    if(code === 13) {
                      alert("You press Enter key.");
                    }           
                }

                function SubstanceChangeHandler(val) {
                  alert("New substance chosen: "+val);
                  txtTest.value= val;
                }       
            </script>
        </head>

        <body onmouseout="blurAll();" onmouseover="reFocus();">
       
            <input name="txtTest"  type="text" id="txtTest" onkeyup="CheckKey(event)"/>

            <select onchange="SubstanceChangeHandler(this.value);"
                    onfocus="setActive(this);" onblur="clearActive(this);">
              <optgroup label="Alkaline Metals">
                <option>Lithium (Li)</option>
                <option>Sodium (Na)</option>
                <option>Potassium (K)</option>
              </optgroup>
              <optgroup label="Halogens">
                <option>Fluorine (F)</option>
                <option>Chlorine (Cl)</option>
                <option>Bromine (Br)</option>
              </optgroup>
            </select>

        </body>

    </html>


    If this scenario works, you can set the onfocus and onblur handlers for all <select> elements via an iteration loop after the page loads.
    0
      I'm not here much anymore. But a PM will fire email notifications.
      User avatar
      Dan Rathbun 
      PluginStore Author
      PluginStore Author
       

      Re: HTMLDialog vs WebDialog?

      Postby driven » Wed Jul 19, 2017 2:01 am

      Dan Rathbun wrote:Let us try some tests to see if we can get Chrome to close the select drop lists.


      using Enter or a Click closes them, if not, there is a javascript over-ride preventing default behaviour...

      john
      0
      learn from the mistakes of others, you may not live long enough to make them all yourself...

      driven 
      PluginStore Author
      PluginStore Author
       

      Re: HTMLDialog vs WebDialog?

      Postby Dan Rathbun » Wed Jul 19, 2017 3:59 am

      You missed the point John, he's doing neither. He is simply leaving the droplist and grabbing the window caption bar and moving the entire window. This is leaving the droplists behind (as if torn off) as shown in the screenshots above.

      My attempt to fix it would detect when the mouse leaves the body of the html document, and blur the <select> element hopefully making it close it's droplist.
      0
        I'm not here much anymore. But a PM will fire email notifications.
        User avatar
        Dan Rathbun 
        PluginStore Author
        PluginStore Author
         

        Re: HTMLDialog vs WebDialog?

        Postby driven » Wed Jul 19, 2017 9:28 am

        gotcha, you mean bug SU-35701.

        john
        0
        Last edited by driven on Wed Jul 19, 2017 9:00 pm, edited 1 time in total.
        learn from the mistakes of others, you may not live long enough to make them all yourself...

        driven 
        PluginStore Author
        PluginStore Author
         

        Re: HTMLDialog vs WebDialog?

        Postby Garry K » Wed Jul 19, 2017 8:57 pm

        Thanks guys - I haven't had time to look into this yet. But what I see looks encouraging.
        0

        Garry K 
        Premium Member
        Premium Member
         

        Re: HTMLDialog vs WebDialog?

        Postby Dan Rathbun » Mon Jul 24, 2017 10:27 pm

        Let us know if any of the suggestions work.
        0
          I'm not here much anymore. But a PM will fire email notifications.
          User avatar
          Dan Rathbun 
          PluginStore Author
          PluginStore Author
           

          SketchUcation One-Liner Adverts

          by Ad Machine » 5 minutes ago



          Ad Machine 
          Robot
           



           

          Return to Developers' Forum

          Who is online

          Users browsing this forum: Google Bot and 5 guests

          Visit our sponsors: