UI

From JRapid

Jump to: navigation, search

Contents

Description

One of the most powerful benefits of using JRapid is that it generates a professional, robust and easily customizable front-end in very little time. This interface contains a default form and listing for every entity. Generating forms and listings produces code in every layer of the JRapid application stack. The robust front-end is created through a combination of HTML, JavaScript and CSS files. Styles for individual entities and customizations to the look and feel are easy to create.

Layout

JRapid Web Content

Javascript

WebContent contains the JavaScript files under jrapid-runtime. All applications will contain jQuery and jQuery-UI. The JavaScript under jrapid-runtime should not be changed. WebContent will also contain a folder named Main where you can place any custom JavaScript for your project.

You can easily include JavaScript from your main folder by placing it in the config section of your source:

<config>
        <usestylesheet location="../jrapid-runtime/css/ui-lightness/jquery-ui-1.8rc2.custom.css"/> <-- Included by default-->
        <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"/> <-- Custom js file -->

        ...
</config>

HTML

HTML for the forms and lists can be found in the WebContent/Main/ folder (where <Entity> is the name of the particular entity):

<Entity>_form.html

<Entity>_list.html

<Entity>_<listingName>_list.html

CSS

Similarly to JavaScript, you can easily include CSS files into your JRapid application. This can be done with the usestylesheet directive.

The jrapid-runtime folder also contains much of the application's default CSS files.

Example

Following is an example of a input form created by default for a sample Company entity. The input field is the the name of the company and contains javascript validation.

<div property="Company@name" class="jrapid_property" id="div_company_name">
<label class="jrapid">Name</label>
<input title="Name. " src="xml" selectexpr="evaluated('/company/name', me)" id="company_name" value="{/root/company/name}" class=" text jrapid_input " type="text" onchange="var me = jrapid.wrap(this);jrapid.validateElement(this); jrapid.checkIfIsNew(me);me.sync(); " validate=""/>
</div>

When the form is opened, a request is made to download the HTML file. A second request is made to the corresponding path to retrieve the data and an XSL transformation is used to populate the related fields with the data received from the controller.

See also

Retrieved from "http://wiki.jrapid.com/w/UI"
Personal tools