WebToolBarButton Cursor Change

  1. ‹ Older
  2. 5 weeks ago

    Paul S

    Sep 11 Pre-Release Testers, Xojo Pro Europe (Netherlands, Den Haag)

    You can set the cursor in the Inspector.
    Or am I misunderstanding your problem?

    -image-

  3. Michel B

    Sep 11 Pre-Release Testers, Xojo Pro RubberViews.com
    Edited 5 weeks ago

    @Michael B However, it seems that easy things in standard web languages are a bit tricky in Xojo....

    You are missing the point. Xojo is not a page designer, it is a Rapid Application Development (RAD). In practice, it provides an environment to very effectively port Desktop applications to the Web.

    I don't think HTML is always that simple. As soon as you try to reach the same kind of features as a Xojo Web application, you have to dive into CSS/JavaScript/Php/Perl, which can be far more complicated than a simple piece of code such as what @Olivier C gave you.

  4. Olivier C

    Sep 11 Pre-Release Testers, Xojo Pro Europe (Belgium, France)

    @Paul S You can set the cursor in the Inspector.
    Or am I misunderstanding your problem?

    Hi Paul, the question was about the WebToolbarButton which has no style.

    @Michel B You are missing the point. Xojo is not a page designer, it is a Rapid Application Development (RAD). In practice, it provides an environment to very effectively port Desktop applications to the Web.

    Michel you're damn right !

  5. Paul S

    Sep 11 Pre-Release Testers, Xojo Pro Europe (Netherlands, Den Haag)

    @Olivier C Hi Paul, the question was about the WebToolbarButton which has no style.

    ???

    @Michael B Is it normal when the Toolbar.cursor is set to automatic, then when the mouse is over its buttons to not change?
    Is there any way to implement such a basic feature, that is, when the cursor is over a webtoolbarbutton to change to a fingerpoint...

    I see nowhere that @Michael Batakis is asking about (Web)Style.
    WebStyle also doesn't have the possibility to set the type of cursor.

    As I mentioned before, the type of cursor (fingerpoint) can be set in the Inspector of the WebToolbar and that fingerpoint is shown when the cursor is over a WebToolbarButton.

  6. Olivier C

    Sep 11 Pre-Release Testers, Xojo Pro Europe (Belgium, France)

    @Paul S my mistake ! I meant « there is no ‘cursor’ at button level » .
    If cursor ‘finger’ is specified at toolbar level, the cursor is a finger point anywhere over the toolbar, even for areas where there are no buttons. The cursor is not set for buttons only.

  7. Edited 5 weeks ago

    @Paul Sondervan, I mean that set automatic does not work.
    "As I mentioned before, the type of cursor (fingerpoint) can be set in the Inspector of the WebToolbar and that fingerpoint is shown when the cursor is over a WebToolbarButton." This is not true!

    "If cursor ‘finger’ is specified at toolbar level, the cursor is a finger point anywhere over the toolbar, even for areas where there are no buttons. The cursor is not set for buttons only.".This is true.

    I thought that the scope of setting WebToolBar cursor was to change automatically when over a webToolBar button, as this make sense to me.
    IMO, ss it is now implemented in Xojo, it is meaningless for a UI design perspective....

  8. Edited 5 weeks ago

    Agree with @Michel but maybe this is a reason that Xojo is not so widespread language programming for the newer users? Such tiny details may make the difference!

    @Olivier Colard: I think if the Xojo will change web element structure sometime, it should be a wise thing to support us with a tiny converter that updates web structure element in our projects, automatically :-)

    Another nice thing is Xojo to provide us tiny javascript code snippets with basic UI tricks (menu within Xojo IDE as it happens in Visual Studio) that usually an average user is seeing in web surfing and be familiar with. Thsi would be very productive for prospect new Xojo users!

  9. Edited 5 weeks ago

    @Oliver Colard

    Any idea why the

    ExecuteJavaScript("document.getElementById('" + me.ControlID + "_AddPatientButton').style.cursor = 'FingerPointer';")

    is not working with me (set on WebToolBar.Open event)?

  10. Michel B

    Sep 13 Pre-Release Testers, Xojo Pro RubberViews.com

    @Michael B @Oliver Colard

    Any idea why the

    ExecuteJavaScript("document.getElementById('" + me.ControlID + "_AddPatientButton').style.cursor = 'FingerPointer';")

    is not working with me (set on WebToolBar.Open event)?

    Because in the Open event, the control is not yet formed. Do it in Shown instead.

  11. Edited 5 weeks ago

    I put already there but stiil no luck
    I tried in anew clean project just a toolbar and a webtoolbarbutton.
    https://www.dropbox.com/s/bhkt2a50u2tvhc2/toolbarbutton.xojo_binary_project?dl=0

  12. Tim P

    Sep 14 Pre-Release Testers Rochester, NY

    Had a little spare time and some inspiration so...

    Introducing TPWebToolbar - a WebToolbar subclass that lets you add a pointer to WebToolbarButtons.
    https://github.com/devtimi/TPWebToolbar

  13. Edited 5 weeks ago

    Thanks Tim, I will try it, now!
    However the question remains that is why the javascript code does not run as expected...

  14. Michel B

    Sep 14 Pre-Release Testers, Xojo Pro RubberViews.com

    Look at your WebToolBar with the browser developer tools. Chances are you will find what is missing.

  15. Tim P

    Sep 14 Pre-Release Testers Rochester, NY

    @Michael B However the question remains that is why the javascript code does not run as expected...

    I have no idea actually. When I tried your project and it didn't work I began working on my subclass.

  16. Michel B

    Sep 14 Pre-Release Testers, Xojo Pro RubberViews.com
    Edited 5 weeks ago

    In CSS 'FingerPointer" means nothing. The proper syntax was provided by Olivier in his original post. "pointer" is the value that displays the finger pointer.

    See https://www.w3schools.com/cssref/pr_class_cursor.asp

    Or use the ready made webtoolbar by Tim Parnell.

  17. Edited 5 weeks ago

    You mean ‘system.style.cursor.fingerpointer’ ?

  18. Michel B

    Sep 14 Pre-Release Testers, Xojo Pro RubberViews.com

    No, Micheal.

    Read the page I linked to about CSS cursors for available values.

    ExecuteJavaScript("document.getElementById('" + me.ControlID + "_AddPatientButton').style.cursor = 'pointer';")

    If you have trouble dealing with JavaScript/css, stick to Xojo webstyles. They shield you from complexity.

  19. I mean to try to learn some things about Javascript.
    I visited the cite mentioned but I have tried different permutations but nothing happened
    eg.
    ExecuteJavaScript("document.getElementById('" + me.ControlID + "_Button1').style.cursor = '{cursor: e-resize}';")

    but no luck. So, I would be gratefull if you modified my example to get a grasp how things works in Javascript and Xojo

  20. Michel B

    Sep 15 Pre-Release Testers, Xojo Pro RubberViews.com
    Edited 5 weeks ago

    What you got to understand is that when you use ExecuteJavaScript you no longer are using Xojo, but pure JavaScript.

    At the site I linked to, you have a list of available cursors.

    https://www.w3schools.com/cssref/pr_class_cursor.asp

    Example:

    .pointer {cursor: pointer;}

    This is the cursor you need. In CSS syntax, cursor: pointer; means cursor = pointer. Pointer being the finger pointer.

    You may enjoy this page, where you can see what each cursor does:
    https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

    Here is more about the syntax:
    https://www.w3schools.com/jsref/prop_style_cursor.asp

    The site w3Schools.com is a superb resource to learn HTML/CSS/JavaScript.

    Finally:

     ExecuteJavaScript("document.getElementById('" + me.ControlID + "_Button1').style.cursor = 'pointer';")

    Which I keep posting.

  21. 3 weeks ago

    I see! Thanks a lot for the detailed explanation :-)

or Sign Up to reply!