These are the controls in WebStudio. Select one to learn more.
Base component required to use the Bootstrap controls.
Sets up shared functions, CSS, and prepares the header.
Required to use any Bootstrap control.
A block styled for displaying code.
It will look like this, but you can make it any size you like.
A Bootstrap text-field. Many types all in one.
Currently supports: Text, Password, Email, Number, Phone Number.
Also includes an optional label. The label will also take on the color of the field if set.
Subclass of an ImageWell lets you add Bootstrap borders: Circle, Rounded Corners, or Tumbnail
Bootstrap progress bar. Behaves just like a Xojo progress bar, set the Maximum and the Value.
Comes in colors, stripes, and can even animate!
WebStyle with the properties of a Bootstrap shortcut.
ctrl + s
Pre-built login form. Implemented as a non-visual tray-item in the IDE.
RegisterLink - Set the url for the "Register" link.
ForgotLink - Set the url for the "Forgot Password" link.
Both of these can only be set in the IDE. Setting them at runtime has no effect.
User submit the form with without both fields filled.
LoginSubmit(Username as String, Password as String)
User submit the form with both fields filled. You can access the Username and Password values via the two strings passed. Please warn your users that their password will be transmitted unsecured if you are not serving your web app over https!
ShowLogin - Will show the login form, animating it's entry.
CloseLogin - Will hide the login form, animating it's exit.
This simple control defines the meta tags necessary for generating a custom link preview on Facebook. For this control to function you must allow unsupported browsers, or specifically
There are constants in the control that you fill in with the information you'd like Facebook to use.
This control is not capable of different link previews for different pages.
FBDerscription - Description text for Facebook to display
FBImageURL - Preview image for Facebook
FBSiteName - The name of your site as a title not a url. Optional.
FBTitle - Title text for Facebook to display.
FBURL - The URL Facebook will link to. Be sure to use this with your web app or Facebook might link to the landing page.
This issue is still present in 2016r4. See Feedback Case #39623
It was discovered in Xojo 2015r2.2 that the Resized event only fires once on a Modal WebDialog. To correct that issue, ResizeWatcher watches the selected WebDialog and fires it's Resized event when necessary. This watcher does not fix the size reporting issue.
ResizeWatcher is entirely browser-side, which saves you from the server traffic and processing associated with setting up a Timer in Xojo code for the same task.
Drag an instance of the watcher to a WebPage, and watch a WebDialog with
WebStudio has a lovely selection of tools and controls that expand the functionality of Xojo Web.
Utilizing popular web frameworks like Bootstrap, WebStudio offers many easy to add interface elements. Just drag and drop.
Currently, WebStudio is broken up into three categories: Bootstrap Controls, Drop-ins, and Tools.
Bootstrap Controls are Xojo controls that are styled using the Bootstrap styles. They are self-contained and don't need to load any external resources, which makes them great for high-security applications.
They include: Button, Code Area, Input Fields (text, password, email, number;) Image Borders, Navigation Tabs, Progress Bar, and Shortcut Style
Drop-ins are simple ways to add complex items to your app. Just drop one in, set it up in the IDE, and you are up and running with full solutions.
At the moment you can get a Login Form drop-in to easily add a stylish login form to your app!
Tools work around existing Xojo bugs, or add useful capabilities and subclasses that one may need in the process of creating their app.
These include: Facebook Preview control, Link (that can disable), Multi-Line Button, and ResizeWatcher