21

Build Great-Looking Web Apps Fast With WebJars and Wicket

 5 years ago
source link: https://www.tuicool.com/articles/hit/NJbUJrR
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Introduction

WebJars is a well-known project that offers a huge set of client-side web libraries packed as Jars that are ready to be used. Each Jar contains the full distribution of a specific library version, which means that we can easily integrate these libraries with our familiar build tools (like Maven, Gradle, etc..) without the burden of installing and using web development tools like npm, Node, Bower, etc.

Things get even more interesting if we decide to use WebJars to theme our website with one of the many open source templates or themes freely available on the Internet. In this case, WebJars is a self-contained source for front-end libraries, meaning that with a single artifact we get the whole library with all the required dependencies.

In this article, we will see how to make our application look great with a WebJar of the popular Bootstrap theme SB Admin . The application will be built with Apache Wicket, which comes with two great feature:

  • Markup inheritance: we can implement a base page with the desired layout/theme and then make all other pages extend this parent page to inherit the style.

  • Resource handling: using server side resources with Wicket is a piece of cake. The framework exposes many core classes meant to simplify this task as much as possible.

The code for this article is available on GitHub at https://github.com/bitstorm/webjar-example

WebJar Structure

Before jumping into code, let's take a look at the WebJar we are going to use. On the WebJars site , we can search for a specific WebJar and look at its content. In our case, the WebJar contains the 3.3.7 version of SB Admin:

3qQnaay.png!web

As we can see in the picture above, all files that are stored inside WebJars have a standard path which follows this simple schema:

zQBFFvA.png!web

Wicket Support for WebJars

Wicket can easily read WebJars content using a utility library called wicket-webjars which can be used either to load resources by code or directly adding it in the HTML using 'webjars' as the root segment:

<script src="/webjars/startbootstrap-sb-admin/3.3.7/js/jquery.js"></script>

Our example is a simple Wicket quickstart application with the addition of the the webjar library and the wicket-webjars in its pom.xml: 

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>startbootstrap-sb-admin</artifactId>
    <version>3.3.7</version>
</dependency>

<dependency>
    <groupId>de.agilecoders.wicket.webjars</groupId>
    <artifactId>wicket-webjars</artifactId>
    <version>2.0.7</version>
</dependency>

Now we can move to example code. First, in order to work, wicket-webjars needs to be installed in the application class:

@Override
  protected void init() {
    super.init();
    WicketWebjars.install(this);
  }

Before looking at the markup of our base page, let's see which web resources are required in order to use the SB Admin template:

  • jquery.js: the mother of all libraries, required by Bootstrap.

  • bootstrap.min.css: our theme library is based on Bootstrap, so this dependency is required.

  • font-awesome.min.css: SB Admin uses icons from this popular library.

  • sb-admin.css: the SB Admin library.

All these resources are loaded in the head section of the base page:

...
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>SB Admin - Wicket-Bootstrap Admin Template</title>

    <script src="/webjars/startbootstrap-sb-admin/3.3.7/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="/webjars/startbootstrap-sb-admin/3.3.7/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="/webjars/startbootstrap-sb-admin/3.3.7/css/sb-admin.css" >
    <link rel="stylesheet" type="text/css" href="/webjars/startbootstrap-sb-admin/3.3.7/font-awesome/css/font-awesome.min.css" >
</head>
...

The remaining part of the page just contains the stub for a sidebar menu page layout:

<body>
    <div id="wrapper">
        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         ....
        </nav>
        <div id="page-wrapper">
            <div class="container-fluid">
                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <wicket:child/>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
</body>

Please note the <wicket:child/> tag which is used as placeholder for the content of children pages. For the sake of simplicity in this article we won't implement dynamic content for the navigation menu.

Now we can implement a home page to show the final result. We will insert a simple placeholder as page content:

<wicket:extend>
     <div class="page-header">
        <h1>Thumbnails</h1>
     </div>
  <img class="img-thumbnail" src="http://placehold.it/800x800" alt="">
</wicket:extend>

If you run the project and open the browser to http://localhost:8080 you will see the home page in all its beauty:

QRBBnqv.png!web

Conclusions

In this article, we have seen how easy is to use WebJars in our web applications and how it simplifies the integration with a given client-side library. On the WebJars site , you can find tons of other libraries packed into JARs ready to be used and there is a good chance that even your favorite library is among them.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK