WebToolBarButton Cursor Change

  1. 6 weeks ago
    Edited 6 weeks ago

    Hi,
    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...
    Regards
    MB

    Webtoolbarbuttons have no webstyle, so you can’t change the cursor for the button with pure xojo code.
    The webstyle at toolbar level applies to the whole toolbar container.

    However, the toolbar is a HTML table, and buttons are table elements (<td>) so it is possible to do it using javascript.
    Rem: using javascript is not recommended as Xojo may change the web element structure/naming/... in a future release.

    Example:

    • set toolbar cursor to standard
    • place this in the open event of the toolbar
    ExecuteJavaScript("document.getElementById('" + me.ControlID + "_MyButtonName').style.cursor = 'pointer';")

    Where « MyButtonName » is the « Item Name » of the button.
    You need to do this for every button.

  2. Is any Xojo colleague to confirm this and that I'm not doing something wrong?

  3. Olivier C

    Sep 10 Pre-Release Testers, Xojo Pro Answer Europe (Belgium, France)
    Edited 6 weeks ago

    Webtoolbarbuttons have no webstyle, so you can’t change the cursor for the button with pure xojo code.
    The webstyle at toolbar level applies to the whole toolbar container.

    However, the toolbar is a HTML table, and buttons are table elements (<td>) so it is possible to do it using javascript.
    Rem: using javascript is not recommended as Xojo may change the web element structure/naming/... in a future release.

    Example:

    • set toolbar cursor to standard
    • place this in the open event of the toolbar
    ExecuteJavaScript("document.getElementById('" + me.ControlID + "_MyButtonName').style.cursor = 'pointer';")

    Where « MyButtonName » is the « Item Name » of the button.
    You need to do this for every button.

  4. Edited 6 weeks ago

    Thanks a lot! Appreciate...
    However, it seems that easy things in standard web languages are a bit tricky in Xojo....
    Ii seen as a big disadvantage in my opinion which keep users from not jumping in Xojo language
    Hope webapi 2.0 to make things a bit better...

  5. 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-

  6. Michel B

    Sep 11 Pre-Release Testers, Xojo Pro RubberViews.com
    Edited 6 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.

  7. 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 !

  8. 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.

  9. 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.

  10. Edited 6 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....

  11. Edited 6 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!

  12. Edited 6 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)?

  13. 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.

  14. 5 weeks ago
    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

  15. 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

  16. 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...

  17. 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.

  18. 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.

  19. 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.

  20. Edited 5 weeks ago

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

  21. Newer ›

or Sign Up to reply!