What can I embed within a WebListBox?

  1. ‹ Older
  2. last year

    Brian O

    21 Feb 2018 Pre-Release Testers, Xojo Pro Calgary, AB

    So am I out of luck? Do I have to buy a new Pro License?

  3. @Brian OBrien So am I out of luck? Do I have to buy a new Pro License?

    Test this

    ListBox1.AddRow "<raw><b>Test</b></raw>"

    If you can see bold "Test" then you don't need to buy a new license.

  4. Maurizio R

    21 Feb 2018 Pre-Release Testers, Xojo Pro
    Edited last year

    You don't need to buy a new license, you can embed stuff using javascript just like Xojo does.

    As stated by Xojo staff, if you need something not available in the web framework you can doit using javascript and WebSDK.
    As an example one thing that you can't use at its full potential is CSS i.e. styles: this is something that also the latest Xojo version simply lack.

    The problem is if you want to invest in knowledge or pay someone else for plugins.
    It's not so difficult to master javascript for some things like adding an image to a cell as already reported in the above forum link.
    Knowledge in HTML, CSS and javascript is something that can be reused a lot if you need to develop web apps.

  5. Brian O

    21 Feb 2018 Pre-Release Testers, Xojo Pro Calgary, AB

    @AsisPatisahusiwa Test this

    ListBox1.AddRow "<raw><b>Test</b></raw>"

    If you can see bold "Test" then you don't need to buy a new license.

    No I see the text exactly as is. :(

  6. Brian O

    21 Feb 2018 Pre-Release Testers, Xojo Pro Calgary, AB

    Thanks all.

  7. 5 weeks ago

    Hal G

    Jan 16 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    Can WebListBox's embed WebControls?

  8. Brock N

    Jan 16 Pre-Release Testers, Xojo Pro

    The Raw tag helps with basic things, you can hook up the events you embed with a custom WebControlWrapper control if you need. I've also used JQuery to embed container controls inside of listboxes in the past as well.

  9. Hal G

    Jan 17 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    Just requested:

    54683 - Add WebListBox.CellContainer Method for easy Lists of WebContainers
    Feedback Case #54683

    WebListBox has the ability to place Text, HTML, and Pictures into WebListBox Cells.

    While Scrolling WebContainers make it possible to create a list of WebContainers, it adds complexity in order to manage positioning WebContainers when adding or removing WebContainers. Adding a WebContainer to a Scrolling WebContainer requires finding the top of the lowest item, adding its height, and adding a margin. Removing a WebContainer from a Scrolling WebContainer requires removing the WebContainer, then finding each WebContainer lower than the WebContainer and moving it up based on the height of the removed WebContainer plus the margin.

    If WebListBox could hold WebContainers, it would make managing as list of WebContainers a pleasure.

    Workarounds:
    Scrolling WebContainers with Embedded WebContainers

  10. Hal G

    Jan 17 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    @Brock N The Raw tag helps with basic things, you can hook up the events you embed with a custom WebControlWrapper control if you need. I've also used JQuery to embed container controls inside of listboxes in the past as well.

    Hey Brock,

    I'm going to test this soon, but I was wondering if the following idea might work based on your amazing experience...

    • Create a WebListbox
    • Add a Listbox Row with something like this in the Cell
    <raw><div id='myListboxRowUUID'></div></raw>
    • Instantiate a WebContainer in the Listbox RowTag
    • Embed the WebContainer somewhere on the page
    • Move the WebContainer from the page to the WebListbox Cell with something like this
    jQuery("#webContainerUUID").detach().appendTo('#myListboxRowUUID')

    Do you think that would work?

  11. Hal G

    Jan 17 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL
    Edited 5 weeks ago

    I just built a test Web App that implements the bullet points above:
    http://campsoftware.com/files/LongTerm/Xojo/ListContainers.zip

    After clicking the button the calls the jQuery moving of the WebContainer to the WebListbox Cell, I can see that it did move as shown in the picture below. But it's not actually showing in the WebListbox Cell. Any idea what I did wrong or I'm missing?

    -image-

  12. Brock N

    Jan 18 Pre-Release Testers, Xojo Pro
    Edited 5 weeks ago

    @Hal G I just built a test Web App that implements the bullet points above:
    http://campsoftware.com/files/LongTerm/Xojo/ListContainers.zip

    After clicking the button the calls the jQuery moving of the WebContainer to the WebListbox Cell, I can see that it did move as shown in the picture below. But it's not actually showing in the WebListbox Cell. Any idea what I did wrong or I'm missing?

    -image-

    Yeah let me see if I can find my example project. From what I recall I had to change the positioning attributes as well, moving it alone was not sufficient.

    --UPDATE --
    ButtonAction

    Sub Action() Handles Action
      dim cc as new CCTest3
      cc.EmbedWithin(self, 0, 0, cc.width, cc.height)
      ListBox1.cellPrependControl(cc, 0, 0)
      currentControl = cc
    End Sub

    cellPrependControl Method

    Public Sub cellPrependControl(extends lb as WebListBox, wc as webcontrol, row as integer, column as integer)
      dim script() as string
      script.append wc.JqeurySelector+".detach().prependTo("+lb.cellSelector(row, column)+");"
      script.append wc.JqeurySelector+".css('position','relative');"
      lb.ExecuteJavaScript(join(script, EndOfLine.Windows))
      wc.Left = 0
      wc.Top = 0
    End Sub
  13. Brock N

    Jan 18 Pre-Release Testers, Xojo Pro

    Here's an example of embedding a Raw Checkbox into a WebListBox and hooking it up to the WebControlWrapper for eventing
    https://www.dropbox.com/s/km6xhef84nlv4io/WebCheckBoxRaw.xojo_binary_project

    Here's an example of embedding a containerControl into a WebListBox
    https://www.dropbox.com/s/t7hpy00tpu0mdwu/EmbedCCinListbox.xojo_binary_project

    Here's an example of a column based responsive grid to avoid the Listbox altogether
    https://www.dropbox.com/s/io7zw55homxykjg/ResponsiveGrid-2018-04-13.zip

  14. Hal G

    Jan 18 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    @Brock N Yeah let me see if I can find my example project. From what I recall I had to change the positioning attributes as well, moving it alone was not sufficient.

    Brock, you rock. THANK YOU very much. Being able to embed more objects into WebListBox is huge!

    @Greg OLone , do you think Feedback Case #54683 is something worth adding to Xojo so we don't have to mess with JavaScript?

  15. Brock N

    Jan 18 Pre-Release Testers, Xojo Pro

    @Hal G Brock, you rock. THANK YOU very much. Being able to embed more objects into WebListBox is huge!

    @Greg OLone , do you think Feedback Case #54683 is something worth adding to Xojo so we don't have to mess with JavaScript?

    You bet! I've definitely had to hack and build out tons of custom controls for the web framework. I'll often build it once though and reuse it all over. Might as well share with you all! I'm also pretty optimistic that the new WebFramework will address our concerns of responsive layouts (Hopefully with a column based ContainerList in the mix).

    On a side note it is really annoying that the apostrophe in Greg's name makes it so you can't tag him properly...

  16. Hal G

    Jan 18 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    @Brock N , your suggestions rocked to get the WebContainer into the WebListBox.

    -image-

    Have you had problems with being able to enter into the WebTextField using this technique? I can successfully click the button which shows a msgbox, but when I click the WebTextField it ignores my clicks. I tried to set the z-index, of my cell raw div, the textfield and the textfield_inner, but that made no difference.

    I updated my example file which shows the issue.
    http://campsoftware.com/files/LongTerm/Xojo/WebListboxContainers2019-01-18/ListContainers.xojo_binary_project.zip

  17. Hal G

    Jan 19 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    Did some more testing.

    • Clicking on the TextField is firing the Listbox SelectionChanged event and skipping the TextField GotFocus event.
    • Clicking on the Button is firing the Button Action and then the Listbox SelectionChanged event.

    Weird that the text field can't get focus.

  18. Hal G

    Jan 19 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    Seems like the Listbox SelectionChange event is intercepting the click, but TextField.MouseDown gets a click.

    I set TextField.MouseDown to call me.SetFocus and now the text field can get the focus, but the cursor goes to the left of the input, ignoring where the user clicks.

    Somehow I need to disable the Listbox from handling SelectionChanged, but it fires even without a defined event probably so it can change the style...

    Updated example file: http://campsoftware.com/files/LongTerm/Xojo/WebListboxContainers2019-01-18/ListContainers.xojo_binary_project.zip

  19. Hal G

    Jan 21 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    Thank you so much @Brock N and @Tim P with your help on getting WebContainers into WebListboxes!

    Tim found how to disable the Listbox click events that was preventing the controls in the container from getting clicks!

    // Remove the Listbox Click Events 
    ExecuteJavaScript("document.getElementById('" + Listbox1.ControlID + "').removeEventListener('mousedown', Xojo.input.begin);")

    I still need to test on Mobile to see if there are Listbox touch events to remove.

    Updated the example file to no longer need jQuery, added a loop of containers, and simplified the code:
    http://campsoftware.com/files/LongTerm/Xojo/WebListboxContainers2019-01-18/ListContainers.xojo_binary_project.zip

  20. Hal G

    Jan 21 Pre-Release Testers, Xojo Pro, XDC Speakers Orlando, FL

    If you like this, please add it to your Feedback Top Cases: Feedback Case #54683

  21. 4 weeks ago

    Robert L

    Jan 22 Pre-Release Testers, Xojo Pro

    I added it to my Top Cases...

or Sign Up to reply!