WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Releases
  • Login
  • Start free trial

›Develop extensions

Getting started

  • Introduction
  • Walkthrough

App design

  • UI Overview
  • Create Pages
  • Designing Pages
  • Widgets Composition
  • Page Configure

    • Page Layout
    • Page Artefacts
    • Partial Page
    • Page Parameters
    • Navigation
    • Events
    • Examples

    Apply Styles

    • Themes
    • Templates

Backend

  • Backend Services
  • Introduction to API Designer

Data services

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database
    • ORM Artifacts

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • Database APIs
    • Database Service APIs

Web services

  • Web Services Overview
  • Services

    • REST Services
    • Secure Server-side Properties
    • REST Services using OAuth 2.0
    • Working with SOAP Services
    • Working with WebSockets

    Web Service Variables & API

    • Web Services Variable
    • Web Service APIs

Java services

  • Java Service
  • Java Services

    • Java Integration Services
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Manifest files

    • 3rd Party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Security services

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Service integration

  • Service Integration
  • Variables

    • Variables Overview
    • Model Variable
    • Device Variables
    • Variable Binding

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Developer options

  • Test and Run (Preview) Apps
  • Import, Export & Update Apps
  • Project Shells
  • Localization
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Debugging
    • Extending the Application using IDEs

    Deployment

    • Release Management
    • Configuration Profiles
    • Build Options for App Deployment
    • One-Click Deployment
    • Manage Deployed Apps

    Configuring Web Server

    • Deploy to Web Server Overview
    • Building a War from a WaveMaker Project
    • AWS
    • Azure
    • Google Cloud
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Develop extensions

  • Create Prefab
  • Use Cases - Prefabs
  • Create Themes
  • Create Template
  • Artifacts Repository

Mobile app

  • Building Hybrid Mobile Apps
  • Native Device Support
  • First Mobile App
  • Mobile Design

    • Mobile Page Design
    • Gesture Support
    • Mobile Tabbar
    • Mobile Navbar

    Mobile Installer

    • Test Run (Preview)
    • Debugging Mobile Apps
    • Testing Hybrid Mobile Apps using WaveLens
    • Mobile Build - Android
    • Mobile Build - Phonegap
    • Mobile Build - Manual

    Mobile Integrations

    • Mobile Integrations - Amazon Mobile Analytics
    • Mobile Integrations - Amazon SNS
    • Using Push Notifications in Mobile Device
    • Invoking Web App APIs in Mobile Apps

    Offline Features

    • Offline Data Support
    • Implementation
    • Switching between Offline and Online Mode

Enterprise

  • Setup Guide
  • Launching Instances
  • DEB Installer - Private AMI
  • Add external VCS Configuration
  • Custom Apps Capacity
  • Setting up WME
  • Configuration
  • Adding Capacity
  • Maintenance
  • Upgrading
Edit

Creating Themes


WaveMaker app (Web & Mobile) theme is based on the BootStrap CSS markup. For creating a theme, you should know HTML, CSS, LESS and Grunt.

Prerequisites

Before creating a theme, make sure you have installed the following on your machine:

  • Nodejs
  • GIT

Setup

  1. Open GIT Bash prompt
  2. Install grunt using the following command:
npm install -g grunt-cli

For more information, see Grunt.

  1. Install bower using the following command:
npm install -g bower

For more information on bower click here

  1. Setup the WaveMaker Theme repository.

For Git clone, see Grunt Wavemaker Theme.

cd grunt-wavemaker-theme
npm install

Follow the instructions given at the Git repository.

  1. After setting up the repository, under the src folder you will find the following files that can be modified as per your needs:

theme-web

note

Themes for Web and Mobile (Android/iOS) apps are different, use the appropriate theme source file to generate the theme bundle.

Directory Structure

  1. Fonts folder: The web fonts can be copied here and referenced in the theme. There will be references to Roboto regular fonts in the variables.less (src/web), to avail them please download Roboto regular fonts and paste them in fonts directory (src/web/fonts).

  2. .wmprojects.properties: This contains essential properties required to identify the theme.

    .wmprojects.properties

    • name: for the theme,
    • version: of the theme. Updated version will be used to replace the existing theme in the project.
    • description: a short meaningful description of the theme,
    • type: THEME (DO NOT CHANGE THIS), and
    • author: name of the author for the theme.
  3. theme.png: Used to visually identify the Theme in the Theme dialog. The size of the image should be 160 x 120 px.

  4. style.less: This less file includes styles for components like header, footer, leftnav, calendar etc., which are not defined in the bootstrap CSS. These components can be further customized in this file by using the variables defined at the beginning of the file eg header background color can be changed using the @wm-header-bg-color variable.

  5. variables.less: This less file includes the styles defined by bootstrap. The values defined in this file are used by the widgets like buttons, links, textbox etc. Refer Bootstrap documentation on LESS variables for more details.

Creating WaveMaker Theme for Web Apps

Following are steps for creating a theme for a web app:

  1. After setting up theme repository, navigate to the web folder.
  2. Open style.less and variables.less in the editor of your choice.
  3. To use the web fonts in the theme, copy the web fonts (.ttf,.eot,woff) in the font folder and include the font definition in variables.less:
@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/Roboto-Regular-webfont.woff') format('woff'),
    url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
    url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
}
  1. The variables.less contain variables which are used while building the bootstrap CSS. For example, @brand-primary value change will affect all the styles using this specific property value. More information on variables at the Bootstrap site.
//## Gray and brand colors for use across Bootstrap.
@brand-primary:         #551C2B;
@brand-success:         #088362;

More on Styling App Components

  1. Replace the theme.png with your image in the web folder
  2. Update the .wm-properties to provide theme information
  3. Build the theme.
  4. The theme will be saved under grunt-wavemaker-theme/dist as web.zip
  5. Import and Apply the Theme to your app.

Creating WaveMaker Theme for Web apps using Bootswatch

Bootswatch provides bootstrap themes that can be integrated into your WaveMaker web apps. The prerequisites and setup for building WaveMaker theme are the same as mentioned in the previous section.

  1. Select a theme from Bootswatch.
  2. Download the variables.less and bootswatch.less files for the selected theme.
  3. After setting up theme repository, navigate to the bootswatch folder.
  4. Copy bootswatch.less and variables.less files to grunt-wavemaker-theme/src/bootswatch folder.

bootswatch_folder

note

The variable files downloaded from bootswatch will fail if placed in any other theme folders like mobile or web.

  1. You can further customize the theme in style.less specific to the header, footer, leftnav etc. See here for details.
  2. Replace the theme.png with your image in the bootswatch folder
  3. Update the .wm-properties to provide theme information
  4. Build the theme.
  5. The theme will be saved under grunt-wavemaker-theme/dist as bootswatch.zip
  6. Import and Apply the Theme to your app.

Creating WaveMaker Theme for Mobile Apps

Mobile Apps come in two flavors - Android and iOS. The theme renders differently on these platforms and as such the theme needs to be packaged differently.

For example, below is the rendering of a Live Form within List on Android and theme-diff-android iOS device:

theme-diff-ios

As mentioned in the previous section, WaveMaker provides two folders for Mobile Themes - Android and iOS. The structure is replica of that for Web with the content tailored for the specific platform. When building theme for Mobile Apps, make sure that you use the appropriate files and make the same changes to both sets. DO NOT replicate the files, make changes where needed.

Building WaveMaker Theme

Once you have incorporated all your changes to the Theme files, you need to build it.

  1. From the command prompt, build the themes using the following commands:

    cd grunt-wavemaker-theme grunt themes

  2. A zip file (web.zip/mobile.zip/bootswatch.zip) for the theme will get generated in the grunt-wavemaker-theme/dist folder.

  3. You can import the theme and apply it to your application.

Testing a Custom Theme

You can test the custom theme, before import, by copying the style.css file directly into your app. From the left Developer Utilities, open File Explorer and you will find the style.css file under webapps -> current theme folder. Save and run the app. Notes:

  • These changes are temporary, for permanent change you have to import the Theme.
  • If you make changes to the default theme style.css file and do not import it as your custom theme, updating the theme will erase those changes.

Publishing a Custom Theme

Enterprise Version post 10.0 release

In order to make a custom theme available to developers across the enterprise, it needs to be published. Following are the steps to publish a Theme:

  1. Once you have created a custom theme, import and test it in your application.
  2. From the Project Configurations, under Export select the Theme to EDN option.

  1. Theme publishing wizard with three steps will appear:

    1. Information regarding the Category, Version, Description and Change Log.
    2. Configuration allows you to add Tags for search and tracking purposes and also includes the Metadata populated automatically.
    3. Summary for a review before Publishing.

  2. Note that the current Theme applied to the application will be selected for Publishing.

  3. Once the EDN Admin approves the Theme, the same will be available in the Artifacts listing and the Themes dialog for other developers to select and apply.

WaveMaker Theme Package Structure

Web Responsive

For creating a custom theme for WaveMaker application, you need to understand the package structure. The theme package contains the following files:

NameDescription
FontsFolder containing web-based fonts used in the app.Required
.wmproject.propertiesContaining essential properties required to identify the theme which includes the name of the theme, version of the theme, a short meaningful description of the theme, the type should be THEME (DO NOT CHANGE THIS), and the name of the author for the theme.Required
style.cssContaining styles related to the theme.Required
theme.pngTheme icon.Required
variables.lessLESS variables to define colors, sizes and more.Required

Hybrid Mobile

In a hybrid app mobile theme, there can be different flavors for android and ios systems. Hence, in a theme bundle, there are different folders for android and ios.

Following is the package structure:

Sub-FolderNameDescription
none.wmproject.propertiesContaining essential properties required to identify the theme which includes the name of the theme, version of the theme, a short meaningful description of the theme, the type should be THEME (DO NOT CHANGE THIS), and the name of the author for the theme.Required
nonetheme.pngTheme icon.Required
AndroidFontsFolder containing web-based fonts used in the app.Required
style.cssContaining styles related to the theme.Required
variables.lessLESS variables to define colors, sizes and more.Required
iosFontsFolder containing web-based fonts used in the app.Required
style.cssContaining styles related to the theme.Required
variables.lessLess variables to define colors, sizes and more.Required

We have learned how WaveMaker themes work and how we can build, import and apply custom themes.

Last updated on 11/8/2019 by Swetha Kundaram
← Use Cases - PrefabsCreate Template →
  • Creating WaveMaker Theme for Web Apps
  • Creating WaveMaker Theme for Web apps using Bootswatch
  • Creating WaveMaker Theme for Mobile Apps
  • Building WaveMaker Theme
  • Testing a Custom Theme
  • Publishing a Custom Theme
  • WaveMaker Theme Package Structure
    • Web Responsive
    • Hybrid Mobile
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2019 WaveMaker, Inc. All rights reserved.