Git Product home page Git Product logo

rtl's Introduction

There are three category tags in the package:

  • Template Tags
  • Paginate Tags
  • Html Tags

Installation

Currently you need to install the artifact manually

  1. git clone git://github.com/donnior/RTL.git
  2. mvn install

Add dependency in maven to use it.

<dependency>
    <groupId>me.donnior</groupId>
    <artifactId>rtl</artifactId>
    <version>0.3</version>
</dependency>

Templating Tags

How to use

Set the template page in web.xml, make sure the param name is RTLTempatePage; if not, RTL will use the default template page which is WEB-INF/views/layout/template.jsp; for some complex scenes, you can use specify a RTLTemplateResolverClass class which implemented TemplateResolverin web.xml.

<context-param>
    <param-name>RTLTempatePage</param-name>
    <param-value>/WEB-INF/views/layout/template.jsp</param-value>
</context-param>

or

<context-param>
    <param-name>RTLTemplateResolverClass</param-name>
    <param-value>com.your.CustomizedTemplateResolver</param-value>
</context-param>

Define your template page

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="r" uri="r-tag"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<r:yieldTitle prefix="Gloable Title | "></r:yieldTitle>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<r:yieldStylesheets></r:yieldStylesheets>

<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>

<r:yieldJavascripts />

</head>
<body>
    <div id="body">
        <div id="sidebar">
                
        </div>
        
        <div id="main">
            <div class="content" >
                <r:yieldBody></r:yieldBody>
            </div>
        </div>
    </div>
</body>
</html>

Use the template in your every page needed to be templated. Like this:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="r" tagdir="r-tag"%>

<r:stylesheet name="/resources/styles/input.css"></r:javascript>

<r:javascript name="/resources/js/input.js"></r:javascript>

<r:layout title="title for this page">
    <h3>page title</h3>
    <ul><li>...</li></ul>   
</r:layout>

Tags Explain

  • yieldTitle
    Used in template page, can set the single page's title
  • yieldStylesheets
    Used in template page, add the page specific style
  • yieldJavascripts
    Used in template page, add the page specific javascript
  • yieldBody
    Used in template page, output the your templated page
  • layout
    Used in templated page, declare current page needs templated
  • stylesheet
    Used in templated page, specify one stylesheet which needed by current page
  • javascript
    Used in templated page, specify one javascript which needed by current page

Paginate Tags

How to use

Set the i18n resouces needed by the paginate tag, this step is required.

default.paginate.label.previous = Previous Page
default.paginate.label.next = Next Page

Use the PaginateSupportArray to wrap your normal List which will be used on the paginating page.

public List<User> listAllUsers(int page, int pageSize){
    List<User> users = // get record from database
    int total = //count from database
    PaginateSupportArray list = new PaginateSupportArray(users);
    list.setTotal(total);
    list.setPage(page);
    list.setPageSize(pageSize);
    return list;
}

Use the wrapped List in jsp

<r:paginate data="${results}" />

Customize Style

The paginate tag will generate the following html code without any specific styles, you can set styles in your css file.

<div class="pagination">
    <a href="/xxx?page=9" title="Next Page" class="label pre">Previous Page</a>
    <a href="/xxx?page=10" class="number current">10</a>  
    <span>...</span>
    <a href="/xxx?page=31" class="number">31</a>
    <a href="/xxx?page=11" title="Next Page" class="label next">Next Page</a>
</div>

Paginate Tag's attributes explain

Attribute NameRequiredUsageNote
dataYthe data list which got pagination info fromthe data object must be an instance of PaginateSupportArray
pathNcustomzied url for links in the paginationRTL will get it automaticly if it's not given.
pageVarNthe variable name which identify the page infodefault is "page"
preLabelNthe text will be displayed as the previous page link labelgot from i18n if not setted
nextLabelNthe text will be displayed as the next page link labelgot from i18n if not setted

Html Tags

  • a
  • table

Both tags support dynamic attributes like css, id ...

<r:a>

Use a tag to create html link. It's a replacement of JSTL's <c:url>

Example

<r:a class="link_a" href="/user/${user.id}">${user.login}</r:a>

<r:table> & <r:col>

RTL's table tag is a very simple solution for rendering data table. If you want more powerful solution, the Display Tag is a recommendation.

Use <r:table> and <r:col> to define a data table.

Example

<r:table data="${users}" var="user" id="tbl_1" class="table" varStatus="loop">
  <r:col headerKey="user.login.label" >
    <r:a class="link_a" href="/user/${user.id}">${user.login}</r:a>
  </r:col>
  <r:col header="Mail">${user.email}</r:col>
  <r:col header="Operation"></r:col>
</r:table>

Both table and col tag support dynamic attribute, you can customize their styles or whatever you like.

License

RTL is released under the MIT license:

rtl's People

Contributors

donnior avatar

Watchers

waytt avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.