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

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

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

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.

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.

A simple what you see is what you get (WYSIWYG) HTML editor control.

webeditor

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

GraffitiWebOption

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

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

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

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