All controls that are listed here – and more… – are part of the online demo workplace. Please directly test-drive the controls there!
Basic controls
Field
![co001](http://captaincasa.org//wp-content/uploads/2016/09/co001.png)
![co015](http://captaincasa.org//wp-content/uploads/2016/09/co015.png)
- flexible background styling by application
- mandatory/error management
- maximal input length definition
- check of input against regular expressions
Multi line field / Text area
![co002](http://captaincasa.org//wp-content/uploads/2016/09/co002.png)
Formatted field
![co009](http://captaincasa.org//wp-content/uploads/2016/09/co009.png)
![co011](http://captaincasa.org//wp-content/uploads/2016/09/co011.png)
![co010](http://captaincasa.org//wp-content/uploads/2016/09/co010.png)
- automated formatting according to localization
- automated check of input, no acceptance of wrong values
- data types: integer, number, date, time
- localization (country/language) explicitly define-able
Password
![co017](http://captaincasa.org//wp-content/uploads/2016/09/co017.png)
Field with popup support
![co023](http://captaincasa.org//wp-content/uploads/2016/09/co023.png)
![co024](http://captaincasa.org//wp-content/uploads/2016/09/co024.png)
- optical comes as field, styled as combobox
- possibility to attach application defined popup management and attach explicitly defined dialogs
Calendar field
![co012](http://captaincasa.org//wp-content/uploads/2016/09/co012.png)
![co013](http://captaincasa.org//wp-content/uploads/2016/09/co013.png)
- with/without time definition
Combo box
![co004](http://captaincasa.org//wp-content/uploads/2016/09/co004.png)
- static/dynamic definition of items
- editable/non-editable
- flexible background styling by application
- mandatory/error management
![co005](http://captaincasa.org//wp-content/uploads/2016/09/co005.png)
- single line/double line item definitions
List
![co006](http://captaincasa.org//wp-content/uploads/2016/09/co006.png)
- single / multiple selection
Checkbox
![co007](http://captaincasa.org//wp-content/uploads/2016/09/co007.png)
- with / without text
- triple state (true/false – undefined)
Radio button
![co008](http://captaincasa.org//wp-content/uploads/2016/09/co008.png)
Spinner
![co014](http://captaincasa.org//wp-content/uploads/2016/09/co014.png)
- from/to definition
- scrolling via icons / mouse wheel / up/down-keys
Long text field
![co016](http://captaincasa.org//wp-content/uploads/2016/09/co016.png)
- field with option to edit the multi-line content in some popup
Button / Icon
![co018](http://captaincasa.org//wp-content/uploads/2016/09/co018.png)
![co019](http://captaincasa.org//wp-content/uploads/2016/09/co019.png)
Link
![co020](http://captaincasa.org//wp-content/uploads/2016/09/co020.png)
Awesome font icon
![co021](http://captaincasa.org//wp-content/uploads/2016/09/co021.png)
- icon image defined by reference to character that is rendered with “awesome font”
Menu bar / menu / menu items
![co042](http://captaincasa.org//wp-content/uploads/2016/09/co042.png)
- any number of hierarchies
- with/without icon
- optional separators between items
Button menu
![co043](http://captaincasa.org//wp-content/uploads/2016/09/co043.png)
- button opens up assicuated menu
Popup menu
![co044](http://captaincasa.org//wp-content/uploads/2016/09/co044.png)
- menu that pops up on right mouse button
Simple HTML Editor
![co022](http://captaincasa.org//wp-content/uploads/2016/09/co022.png)
- direct editing of HTML content via simpe editor
- based on nicedit-editor project
Grid controls
Basic Grid Features
![co025](http://captaincasa.org//wp-content/uploads/2016/09/co025.png)
- any control (field, label, button, …) usable as cell control
- intelligent scrolling on huge amount of data items
- single / multiple item selection
- column sorting (single column, multiple columns)
- drag/drop update of column sequence and column width
- optional persistence of column sequence, sorting and sizing
Header and footer
![co026](http://captaincasa.org//wp-content/uploads/2016/09/co026.png)
- any number of header / footer lines
Additional controls in column header
![co027](http://captaincasa.org//wp-content/uploads/2016/09/co027.png)
Double (triple, …) line definitions
![co028](http://captaincasa.org//wp-content/uploads/2016/09/co028.png)
Tree
![co029](http://captaincasa.org//wp-content/uploads/2016/09/co029.png)
- combine-able with any number of addtional columns
- lazy loading
- hot keys for keyboard navigation (cursor keys)
- configure-able icons
- optional additional control as part of tree node (e.g. checkbox or any other control)
Fix column definition
![co030](http://captaincasa.org//wp-content/uploads/2016/09/co030.png)
Example: schedule grid
![co031](http://captaincasa.org//wp-content/uploads/2016/09/co031.png)
Example: tree with column structure that depends on the type of item
![co032](http://captaincasa.org//wp-content/uploads/2016/09/co032.png)
Layout / Container Controls
Pane container
![co033](http://captaincasa.org//wp-content/uploads/2016/09/co033.png)
- container nest-able without any limits
- consistent sizing rules for horizontal and vertical sizing
- no size: control occupies space that it requires (minimum size)
- fix size: control receives explicit height or width definition
- percentage size: control is sized according to available space – and its own minimum size
Scroll container
![co034](http://captaincasa.org//wp-content/uploads/2016/09/co034.png)
- explicit definition of scroll policies
Split container
![co035](http://captaincasa.org//wp-content/uploads/2016/09/co035.png)
Fold-able / Titled container
![co036](http://captaincasa.org//wp-content/uploads/2016/09/co036.png)
- customize-able header components
- folding status control-able by application
- lazy loading
Tab container
![co037](http://captaincasa.org//wp-content/uploads/2016/09/co037.png)
![co038](http://captaincasa.org//wp-content/uploads/2016/09/co038.png)
- navigation between multiple sub-containers
- navigation via tab-buttons or via menu icon
Stacked / Layered pane
![co039](http://captaincasa.org//wp-content/uploads/2016/09/co039.png)
- two (or more) containers sharing same space on different z-layers
Adaptive containers
Adaptive areas
- subcontent arranged following defined sizing rules
- example:
- definitions NOT depending on device/screen size but on available space for the component
Flexible row/column arrangement
- content is arranged in rows / columns
- number of rows / columns depends on number and size of content items
- example (row arrangement)
Adaptive line
- content of line is split into two lines
Adaptive header
- header content arranged in header line – if available space is sufficient. Otherwise content is made available by popup
Adaptive navigation bar
- bar is visible at side / top of content – either in parallel or overlayed
Special components
Accordion
![co046](http://captaincasa.org//wp-content/uploads/2016/09/co046-97x300.png)
Dashboard
![co047](http://captaincasa.org//wp-content/uploads/2016/09/co047-300x201.png)
- Drag/drop of content items
- Change of content item size (small, medium, wide, big)
- Any content item (not only button)
- Optional: automated persisting of positions and sizes
Tab line
![co045](http://captaincasa.org//wp-content/uploads/2016/09/co045-300x72.png)
Pivot grid
![co040](http://captaincasa.org//wp-content/uploads/2016/09/co040-300x113.png)
Integration components
Open Street Map (OSM)
![osm1](http://captaincasa.org//wp-content/uploads/2016/08/osm1-300x279.png)
- positioning on defined coordinate
- definition of markers
Chart.js
![chart3](http://captaincasa.org//wp-content/uploads/2016/08/chart3-300x300.png)
- flexible passing of “any” chart information
- adaptation to available space