Add Custom CSS Code

From JRapid

Jump to: navigation, search

Contents

Introduction

For any project you create it will have a professional, default JRapid look and feel that can easily be changed to suit your particular needs. By default it creates a Main.css file in WebContent/Main/css that you can edit, or you can simply add additional CSS files utilizing usestylesheet. The strength of this approach is that you can easily create special themes for different screens in just a few lines. Your application maintains the same basic look and feel while you retain the ability to define your own custom stylesheet for whichever component you desire.

Integrating CSS and JavaScript contains a description and an example of how to add JavaScript that manipulates, adds or removes CSS styling in your project on the fly.

Editing Main.css

At times you will need to make a universal change to one of the styles for your entire project. This can be done easily by updating the Main.css file provided for you in WebContent/Main/css.

Note: when making multiple changes to the CSS and JavaScript files, they can become cached in your browser. If you are not seeing updates you make to these files and have synchronized with the file view showing your changes clearing your cache will probably help.

Examples

If for example you want to change one form element, the element will follow this pattern <EntityName>_<PropertyName> in lowercase. For example, a name field for entity company will be represented with a name value in the HTML of company_name.

Add the following to your Main.css file either through the Eclipse IDE or through the file viewer, and regenerate.

/* WRITE HERE YOUR CSS STYLES */

#company_name {
    height:50px;
    font-style:italic;
    font-size:14px;
    color: #06185c;
}

File:company_name_example.PNG

All text areas can also easily be changed if you want the text a different size, in bold, or want to resize the field. Add the following to your Main.css file either through the Eclipse IDE or through the file viewer, and regenerate.

/* WRITE HERE YOUR CSS STYLES */

textarea.jrapid_textarea {
  font-size:12px;
  font-weight:bold;
  width: 200px;
}

Before change:

File:beforecss.PNG

After:

File:aftercss.PNG

A list of the overwritable tags can be found under WebContent/jrapid-runtime/css/master/master.css, so you know which particular tag to overwrite for the desired effect. Any value not defined by you will use the value in master.css. In the previous example, the text area height was defined in master.css and not overwritten, so that value was used.

Adding CSS files

This can be accomplished from the designer's file view, but it is simpler to accomplish from the Eclipse IDE. Create a file under your Main folder to keep this apart from auto-generated content and your java and javascript files.

File:csseclipse.PNG

This file then needs to be added to your source's configuration section with a usestylesheet line so the application knows where to find it:

<?xml version="1.0" encoding="UTF-8"?>
<app basepackage="com.libraryproject" engine="forms-0.9" name="Main">
    <!-- This file is the input for JRapid Code Generator and it's written using JML (JRapid Modeling Language). -->
    <!-- Basically, there are <entity> elements which contain <property> elements, and allow you to design your application. -->
    <!-- Additionally, there are many more elements such as <subset>, <listing>, <filter> or <action> that let you create powerful applications. -->
    <!-- For a JML (JRapid Modeling Language) reference, please visit http://www.jrapid.com/documentation.html -->
    <config>
        <usestylesheet location="../jrapid-runtime/css/ui-lightness/jquery-ui-1.8rc2.custom.css"/>
        <usescript location="../jrapid-runtime/jquery-1.4.2.min.js"/>
        <usescript location="../jrapid-runtime/jquery-ui-1.8rc2.custom.min.js"/>
        <usescript location="../Main/js/functions.js"/>
        <usestylesheet location="../Main/css/libraryproject.css"/>
        <usewidget jquery="datepicker" jqueryoptions="{changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy'}" name="jdatepicker">
            <usescript location="../jrapid-runtime/extras/widget-jdatepicker/js/jquery.ui.datepicker.min.js"/>
        </usewidget>
    </config>
    ...

Examples

The example here links the custom CSS directly below to a form in your project:

.grey_property {
   background-color: grey;
   color: white;
}
<entity label="Company" menu="menu" name="Company">
   ...
   <property label="Address" name="address" type="text" class="grey_property"/>
   ...
</entity>

File:cssresult.PNG

See also

Personal tools