Better UI for the Web


GraffitiWebAccordion allows for easy and compact representation of UI elements within container controls (access to WebContainers is required for GraffitiAccordion).

webaccordion2

GraffitiWebAccordionNav provides a means of incorporating an accordion-style navigation area of your application, including the display of notification counts.

accordionnave1

GraffitiWebAdSense allows you to easily embed AdSense advertising in your Xojo web application for monetization.

GraffitiWebAlert gives access to a robust framework of messages, including OK Only, OK/Cancel, Yes/No, Yes/No/Cancel, Log Messages, Error Log Messages, Success Log Messages, and even WebContainers!

gwalert2 gwalert1 gwcal4

GraffitiWebAnimator is a powerful web animation component that allows you to easily chain animations for complex and interesting effects without writing multiple lines of code for each transition.

GraffitiWebBarcodeReader allows Xojo developers to implement barcode and QR reading capabilities directly in to their web applications using a device's camera, complete with device selection.

Supports AZTEC, CODABAR, CODE39, CODE93, CODE128, EAN8, EAN13, ITF, PDF417, QR, RSS14, UPCA and UPCE.

GraffitiWebBattery

This class allows you to read the current session's hardware battery status, including charge and drain times.

An advanced button class with many features, including icons!

web_button

An advanced SegmentedControl which supports icons in captions, and a variety of styling options.

web_segment

GraffitiWebCalculator allows Xojo developers to embed an attractive and functional calculator directly in to their web applications.

A full page calendar class with both basic and agenda views for Month / Week / Day. Supports event management by dragging and resizing, and addition to Google Calendar feeds.

gwcal2 gwcal1 gwcal3

GraffitiWebCamera

GraffitiWebCamera allows for the display of real-time streams from a user's camera, or capturing single-frames to a BASE64 data URI.

GraffitiWebCard is an amazing modern component that allows Xojo developer to display information in interesting ways, directly on their page. Whether you need to provide instruction, an error message, or a product listing, GraffitiWebCard can handle it.

Custom client-side charting solution with support for the following data display types:
Bar
BarStacked
Doughnut
Line
Pie
Polar
Radar
gwchart5 gwchart1 gwchart4 gwchart7 gwchart3 gwchart2 gwchart6

This class provides a semi-advanced color selection method for your applications.

gwcol1 gwcol4 gwcol2 gwcol3

GraffitiWebContextMenu

Allows for the presentation of custom context menus with Font Awesome icons, and triggered on left  click, hover, right click, or via function call.

An Input element for the display and input of currency-related data. Allows fine-tuned control of all aspects of the data within the element.

webcurrencyfield

Allows for the using a FontAwesome icon as the cursor of either a single control or the whole page.

An  input box designed for selection of dates and date ranges by use of a popup calendar.

Allows for the validation of entered email addresses, and make suggestions based on the input. Can be used to automatically correct typographical errors. For instance, if a user type “myemail@hotnail.con”, this class will suggest “myemail@hotmail.com”.

webemailvalid

Provides an implementation for displaying notification counts in the favicon of a web application.

gwfavicon2 gwfavicon1 gwfavicon4 gwfavicon3

Allows developers to add support for custom format and cuetext on any WebTextField. Includes an event for Mask completion as a form of field validation.

gwmaskfield2 gwmaskfield gwmaskfield3

Allows for the implementation of FontAwesome icons in Xojo web apps. Includes all current styles, and the demo includes a list of all currently available icons.

gwfawe5 gwfawe4 gwfawe2 gwfawe3 gwfawe gwfawe6

GraffitiWebGrid is an amazingly complex grid component.

Features:

  • Cell or Row Select
  • Cell Editing
  • Column Sorting
  • Column Reordering
  • Keyboard Navigation
  • Custom Displays for for percentages and boolean values
  • And More…

webgrid1 webgrid2 webgrid3 webgrid4 webgrid5 webgrid7 webgrid8 webgrid67

An extensive and powerful What You See If What You Get (WYSIWYG) editor with support for many different types of HTML tabs, from Bold to Tables.

GraffitiWebLabel is an advanced responsive label class that supports a wide variety of functionality:

  • Automatic height based on content
  • HTML formatted content
  • FontAwesome Icons
  • Xojo WebStyles

An amazing solution to problems of resizable application layouts. GraffitiWebLayout allows you to assign panels to the four cardinal directions, then can makes those panels resizable, hideable, closable, and more.

Layout1 Layout2

GraffitiWebLikert allows you to build questionnaires for your users using a range of selectable options.

Likert1 Likert2

A class that allows Xojo applications to intercept events from the browser that are fired when the user physically moves their device.

web_motion

GraffitiWebNotifier allows Xojo developers to leverage the power and usability of the browser's built-in notification system to display messages directly on the users' desktop.

GraffitiWebOption

GraffitiWebOption is a set of two classes, one for boolean display (Checkbox), and the other for group selection (Radiobutton).

GraffitiWebPagePanel mimics Xojo's desktop PagePanel by allowing the quick and easy switching of WebContainers while retaining size and position.

GraffitiWebPagination provides an easy means of allowing users to select between sets of data. The developer can set the maximum numbers of pages, currently selected page, and fully style the component.

GraffitiWebPDF allows Xojo developers to create PDF files for viewing or download directly in their web projects. With support for fonts, colors, shapes, images, and tables.

A searchable popup menu control with support for multiple selections and disabled options.

webpopupmenu webpopupmenu2 webpopupmenu3 webpopupmenu4

An animated progress bar component with support for either fixed-value or indeterminate display, and two different radial progress displays (radial and semicircle).
gwProg1

gwProg2

A generator for QR codes with custom color selection.

webqr1 webqr2

Adds the ability to slide a containercontrol on to and off of the page on-demand, with advanced styling.

web_sidebar

Facilitates the capture of signatures in web applications.

gwsig1 gwsig2

GraffitiWebSlider is an advanced numeric selector with a number of interesting features and styling possibilities, including the ability to style background ranges directly in the component.

A jQuery-based slideshow component with support for multiple navigator styles and pause on hover.

webslideshow1

GraffitiWebSpeak

Allows for Text-To-Speech functionality from within the browser by using the HTML5 SpeechSynthesis API, which includes many voices for different languages.

Allows for storing custom data in the user’s browser. Can be either persistent or session specific. Developers may also bind the class to controls to automatically store and restore their values.

Storage

An amazingly versatile code highlighter and editor with support for a wide array of languages. Has built-in breakpoint, annotation, formatting options, built-in undo engine, and a robust Find/Replace system.

Available Themes:
Ambiance
Chaos
Chrome
Clouds
Clouds Midnight
Cobalt
Crimson Editor
Dawn
Dreamweaver
Eclipse
GitHub
Idle Fingers
Katzenmilch
KR Theme
Kuroir
Merbivore
Merbivore Soft
Mono Industrial
Monokai
Pastel on Dark
Solarized Dark
Solarized Light
Terminal
TextMate
Tomorrow
Tomorrow Night
Tomorrow Night Blue
Tomorrow Night Bright
Tomorrow Night Eighties
Twilight
Vibrant Ink
XCode

Currently supported languages:
ABAP
ActionScript
ADA
Apache_Conf
AsciiDoc
Assembly_x86
AutoHotKey
BatchFile
C9Search
C_Cpp
Cirru
Clojure
Cobol
coffee
ColdFusion
CSharp
CSS
Curly
D
Dart
Diff
Dockerfile
Dot
Eiffel
EJS
Erlang
Forth
FTL
Gcode
Gherkin
Gitignore
Glsl
golang
Groovy
HAML
Handlebars
Haskell
haXe
HTML
HTML_Ruby
INI
Io
Jack
Jade
Java
JavaScript
JSON
JSONiq
JSP
JSX
Julia
LaTeX
LESS
Liquid
Lisp
LiveScript
LogiQL
LSL
Lua
LuaPage
Lucene
Makefile
Markdown
MATLAB
MEL
MUSHCode
MySQL
Nix
ObjectiveC
OCaml
Pascal
Perl
pgSQL
PHP
Powershell
Praat
Prolog
Properties
Protobuf
Python
R
RDoc
RHTML
Ruby
Rust
SASS
SCAD
Scala
Scheme
SCSS
SH
SJS
Smarty
Soy_Template
Space
SQL
Stylus
SVG
Tcl
Tex
Text
Textile
Toml
Twig
Typescript
Vala
VBScript
Velocity
Verilog
VHDL
XML
XQuery
YAML

gwsyntax3 gwsyntax1 gwsyntax2

An advanced tab-style control for switching content based on user-selection.

web_tabbar

A TabPanel control which supports embedding WebContainers for full integration with your Xojo web application.

webtabpanel1 webtabpanel2

A time selection control with support for localization. Uses a beautiful clock-face style selector.

TimePicker1 TimePicker3 TimePicker2

A custom toggle control with 5 different styles, support for both clicking and dragging, and custom strings for True and False values.

webtoggle1 webtoggle2

GraffitiWebToolbar is a powerful toolbar replacement control with support for flexible spaces, flexible buttons, Bootstrap styling, and FontAwesome icons baked in.

An animated and stylized tooltip that can be bound to any control type. Supports Hover, Focus, and Click events.

gwtool1 gwtool6 gwtool2 gwtool3 gwtool4 gwtool5

An advanced TreeView-style control with a plethora of options, including:

- Full control over item styling
- Per-item icons
- Row editing
- HTML content in items, including image/video/audio embedding.
- and more!

web_tree3

web_tree1

web_tree2

GraffitiWebUploader

This class facilitates the transfer of files from the user's computer to web applications via a drag-and-drop interface, and results in a BASE64 DataURI representation of the file.

A responsive grid component for displaying images or containers in a flowing paradigm similar to some popular sharing sites.

gwwall2 gwwall1