The Controls

These are the controls in WebStudio.

Base Class

2014r3 Source

Base component required to use the Bootstrap controls.
Sets up shared functions, CSS, and prepares the header.

Required to use any Bootstrap control.

BSButton

2014r3 Source

Drag and drop Bootstrap button. Comes with a handy-dandy Action event just like a Xojo button.

Available in your choice of color

BSCode

2014r3 Source

A block styled for displaying code.

It will look like this, but you can make it any size you like.

BSField

2014r3 Source

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.


BSImage

2013r1 Source

Subclass of an ImageWell lets you add Bootstrap borders: Circle, Rounded Corners, or Tumbnail

BSNavTabs

2014r3 Source

Tabbed navigation control. Customize colors, change tabs on the fly in code, very flexible.
Pair with Container Controls to create a tabbed app.


IDE Setup

Tabs - List of initial tabs for the control. Separated by line breaks.
SelectedTab - Intitially selected tab. Tabs are 0 based.
BorderColor - Color of the line stroke that makes the shape of the tabs.

Color codes are set up as strings for easier accuracy. I played with the color picker for a while and did not like it. You can use either hex or rgba values as these values are placed directly in the CSS.

Code Control

Tabs - Provide a EndOfLine delimitered string.
You can also use the function TabsFromCSV() to create tabs from a CSV string.

me.Tabs = me.TabsFromCSV("Nav,Tab,Control")
SelectedTab - Sets or gets the integer value for the selected tab.

Colors unfortunately cannot be set from code. Please set them at design time in the IDE.


Events

Action(SelectedIndex as Integer)
Triggers when a tab is clicked. Which tab was clicked is available through the SelectedIndex integer.
Tabs are 0-based.

BSProgressBar

2014r3 Source

Bootstrap progress bar. Behaves just like a Xojo progress bar, set the Maximum and the Value.

Comes in colors, stripes, and can even animate!

BSShortcut

2013r1 Source

WebStyle with the properties of a Bootstrap shortcut.

ctrl + s

Login Form

2014r3 Source

Pre-built login form. Implemented as a non-visual tray-item in the IDE.


IDE Setup

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.


Events

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


Methods

ShowLogin - Will show the login form, animating it's entry.
CloseLogin - Will hide the login form, animating it's exit.


Preview

Facebook Preview

2014r3 Source

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 facebookexternalhit/1.1


Usage

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.

LinkCanDisable

2013r1 Source

This issue is still present in 2016r4.1

The built in WebLink item does not have the ability to disable. This subclass can be disabled in both the IDE and Code and updates the interface to reflect the disabled status.

Multi-Line Button

2014r3 Source

A custom button control that allows for multiple lines of text. Not exactly the prettiest control, be sure to style it with a WebStyle.

ResizeWatcher

2014r3 Source

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 ResizeWatcherInstance.Watch(MyWebDialog)

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