New Theme Engine in Touch UI 2017

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Wednesday, February 1, 2017PrintSubscribe
New Theme Engine in Touch UI 2017

A new theme engine in Touch UI is included with the release 8.5.12.0. The brand new themes provide a modern look-and-feel for your line-of-business universal apps. Designed to work with both Desktop and Mobile devices, Touch UI offers a universal solution to application developers. Your end users can point with a mouse or a stylus and click or touch the responsive user interface elements.

The user inteface is customized with themes and accents. A theme provides the main color scheme. An accent provides additional color adjustments. The themes are CSS-based. The new release will ship with a single Light theme.  Additonal core schemes are expected to become available in the future. Accents are JSON files describing particular colors and other properties that will customize the theme. Release 8.5.12.0. ships with 35 accents. Developers can make a copy of any existing *.json accent under ~/touch folder and replace the colors with those that are matching the application requirements. Developers can standardize on a particular theme and accent for their app by deleting the standard themes and accents that are not needed.  The upcoming CoT v9 will also include an interactive theme builder that will allow producing custom accents within the live app.

The screenshots of the new Light theme with Citrus accent are below.

image

image

image

image

image

This is the new Azure accent for the Light theme:

image

The new Grapello accent in Light theme in the screenshot showing a modal form:

image

The new Plastic accent demonstrates interactive filtering in Light theme:

image

The new Berry accent demonstrates the view selector in Light theme:

image

This is the Light theme with Dark Knight accent on a small screen:

image

The user interface theme is constructed at runtime by applying properties defined in the JSON configuration of the accent to the chosen color scheme of the theme.

This is the actual configuration file for the Citrus theme.  You can create a new accent by making a copy of an existing one and replacing it’s colors.

JSON:

{
  "name": "Citrus",
  "color": "#FFA500",
  "header": {
    "background": "orange",
    "backgroundTransparent": "transparent",
    "border": "#FFA500",
    "paddingTop": 0,
    "icon": {
      "default": "#000",
      "hover": null,
      "selected": null,
      "backgroundOpacity": null
    },
    "text": {
      "default": "#000",
      "hover": null,
      "logo": null,
      "hoverBackground": "rgba(0,0,0,0.05)",
      "selectedBackground": "rgba(0,0,0,0.08)"
    },
    "split": {
      "background": null,
      "icon": { "default": null }
    }
  },
  "panel": {
    "icon": {
      "default": "#0a6332",
      "hover": "#003D00",
      "selected": null
    }
  },
  "buttons": {
    "promo": {
      "background": "#FFA500",
      "icon": {
        "default": "#000"
      },
      "menu": {
        "icon": {
          "default": null,
          "hover": null
        }
      }
    }
  },
  "sidebar": {
    "full": {
      "background": "#0a6332",
      "border": "#0a6332",
      "selectedColor": "#fff",
      "text": {
        "default": "#eee",
        "hover": "#fff",
        "active": null,
        "static": "#80ba99"
      },
      "icon": {
        "default": "#fff",
        "hover": "#FFA500",
        "active": null
      },
      "toolbar": {
        "background": "#0a6332",
        "border": "#0a6332",
        "selectedColor": "#fff",
        "icon": {
          "default": "#fff",
          "hover": "#FFA500",
          "active": null
        }
      }
    },
    "mini": {
      "background": "#0a6332",
      "border": "#0a6332",
      "selectedColor": "#fff",
      "icon": {
        "default": "#fff",
        "hover": "#FFA500",
        "active": null
      },
      "toolbar": {
        "background": "#0a6332",
        "border": "#0a6332",
        "selectedColor": "#fff",
        "icon": {
          "default": "#fff",
          "hover": "#FFA500",
          "active": null
        }
      }
    }
  }
}

 

The user interface elements and behavior are customized via the new ~/touch-settings.json configuration file in apps created with Code on Time 8.5.12.0.

JSON:

{
  "defaultUI": "TouchUI",
  "appName": "Inventory Manager",
  "map": {
    "apiKey": null
  },
  "charts": {
    "maxPivotRowCount": 100
  },
  "ui": {
    "theme": {
      "name": "Light",
      "accent": "Aquarium",
      "preview": null
    },
    "displayDensity": {
      "mobile": "Auto",
      "desktop": "Condensed"
    },
    "list": {
      "labels": {
        "display": "DisplayedBelow"
      },
      "initialMode": "SeeAll"
    },
    "menu": {
      "location": "toolbar",
      "tiles": null
    },
    "actions": {
      "promote": true
    },
    "transitions": {
      "style": "slide"
    },
    "sidebar": {
      "when": "Landscape",
      "mini": true,
      "apps": true,
      "toolbar": true,
      "icons": true
    },
    "toolbar": {
      "apps": true
    },
    "apps": {
      "location": "toolbar"
    },
    "showSystemButtons": null,
    "smartDates": true
  },
  "settings": {
    "enabled": true,
    "options": {
      "displayDensity": true,
      "theme": true,
      "transitions": true,
      "sidebar": true,
      "labelsInList": true,
      "showSystemButtons": true,
      "promoteActions": true,
      "smartDates": true,
      "initialListMode": true
    }
  },
  "membership": {
    "enabled": null,
    "profile": "view switch login logout",
    "help": true,
    "accountManager": {
      "enabled": true
    }
  },
  "help": true
}