Hi there I am trying to get started with Xojo Web and its controls.
Having some general knowledge about PHP,HTML,CSS, I really wonder how I can control more of the XojoWeb aspects such as editing html, the bootstrap, theming, custom controls, adding own css rules, adding own objects. We built applications also on Tailwind UI and I wonder how I can integrate html elements and controls in Xojo Web.
The next step obviously is the build my own controls for the Xojo Web, however I bought a book at https://www.xdevlibrary.com/
Program HTML, CSS, and JavaScript with Xojo (RBL-0059) but unfortunately the WebControlWrapper seems depreciated removed and the new control is the webSDKcontrol.
I looked in all documentation of Xojo but I cannot find any good documentation here how to write my own controls with HTML, CSS, Javascript.
What is the replacement control for the WebControlWrapper?
Will this documentation be updated soon? Alot is missing? Anyway can’t wait to get started with the Web but I am missing documentation. Does anyone have some good directions for me? The book really dealt with some interesting ideas but seem not compatible anymore with the new framework.
You can apply your own Bootstrap 4.x theme by simply dragging the “bootstrap.min.css” file in to the project navigator in the IDE.
Custom Controls
In the IDE’s Choose a Project window, which should appear when you first open Xojo or by going to File > New, select “Examples” on the left, then in the center listbox, go to Topics > Web > WebSDK.
For documentation, there is a PDF included in Xojo’s installation directory under Extras > WebSDK as well as some other resources.
Thanks for you reply. I saw the examples with the gravatar and this seems a good example but still missing alot of documentation.
Besides the PDF is there a comprehensive book available on the new websdk 2.0? The book I bought about the WebControlWrapper was really great but unfortunatly this approach is not valid anymore since it was for API 1.0.
For example I have some embeded code from userback.io. It needs to be placed in the body html.
It was possible with the wrapper. But what is the approach now to just add some embed code?
I hear what you’re saying, Pieter. I have read the pdf documentation and tried to make the examples in the extra folders run (no luck so far), but I have no idea where to begin. I know there’s javascript involved but I have no idea where to put it or what it attaches to. I haven’t seen one cradle-to-grave implementation so far (which starts out with “Here’s what you write and here’s where it goes”). I wasn’t around for Web 1.0 so I’m starting from nothing.
It’s too bad because every question I have about customizing a control involves a response pointing me to the WebSDK.
Yes, I watched your video and watched half of it again. I’m sure it was very informative to people who were already familiar with Xojo Web and the previous versions of Xojo Web.
Starting from scratch, however, with no understanding of what you or anybody else at Xojo is talking about when it comes to the WebSDK, what I am really looking for is a tutorial or guide that takes you from “Here’s an empty Xojo web project” to “Here’s where you write the Javascript” to “Here’s where you put it in Xojo” to “Here’s what you have to know to compile and ship with Javascript and/or CSS”.
I’m not a fan of Javascript, but I’ve done Node.js before so I have a general idea. I’ve created several small Xojo Web projects and have been unhappy with the look of some controls, and the response to my questions on the forum concerning my dissatisfaction usually amount to “learn WebSDK”. So if that’s my only alternative, okay I will, but you really have to start with no assumptions. I have looked at all the examples in the several versions I have of Xojo 2022. I know I have to move some part of the example projects into mine, but this process is not clear to me. None of them run out of the box and I assume they’re not intended to. I read the WebSDK pdf, but it doesn’t tell me how to begin a new project.
I have done websites in PHP and MySQL and even Visual Basic before, so I get the paradigm. I just can’t get to first base with this concept. So either I’m an idiot (very possible) or you folks are all assuming I’m already on first base and I should be coached on how to reach second base.
In summary, please point me to a complete example of how a WebSDK project can be started and completed and I will undertake it right away. By the way, I’ve seen nothing on how one might utilize CSS in this WebSDK. Because, really, all I wanted to do when I started was make the DatePicker control bigger with a bigger font and no borders. I don’t even know why I’d use javascript in Xojo even if I could.
Thank you for your response. I’m sure I’ll get a lot out of your video once I learn how to start a WebSDK project.
Thank you for your feedback. I think we could maybe write an step by step blog post for creating custom controls, similar to what we did for custom WebListBox Cell Renderers.
There is an example included that has all of the WebSDKUIControl events commented, explaining what they do. You can find it under Examples > Platforms > Web > WebSDK > CustomButton.
But still, I think the WebSDK Docs.pdf is definitely the best starting point at the moment. There is a section to write your first JavaScript control. If you’ve already coded in Node.js, everything will sound more or less familiar.
TypeScript isn’t necessary (but we recommend it). There are two examples included in your Xojo installation folder:
If you want to use TypeScript, you’ll need to install it in order to compile your controls.
In order to send and receive events between Xojo Web server and your controls, this cheat sheet might help:
All that said, for customizing the WebDatePicker control, you can do it with CSS without using the Web SDK. If you open a new thread in the Web target sub-forum, with a mockup or something to see what you want to achieve, we all be more than happy to help you.
I can’t say that I didn’t get a comprehensive and thoughtful answer to my question. I did look at that cell renderer before. Your example had a lot more event handlers, but I will immediately take your advice and look for the example in the WebSDK pdf. The trouble is that, as in any other coding problem, it all looks like gobbledygook until you find the piece that makes sense from your context and work up from there.
Thank you very much for this information. I am sure I’ll benefit from it one way or the other. Now that I know it can be done, I’m starting with that Web Date Picker control.
