Sunday, December 28, 2014

Appfuse, customise pagination like Bootstrap pagination using DisplayTag

As in the previous post we saw how to update to version 3.3.1 of Bootstrap in our application with AppFuse, in this post I want to share with you how to customize paging used in the default application generated by AppFuse.

First we have to start by saying that the generated application with AppFuse used to display lists of data in tables is a library called "DisplayTags" if you want to learn more about DisplayTags you can go to the documentation on the home page. By default DisplayTags has a style like this one shown below:



Thanks to the AppFuse development team, they did a great job including in the skeleton generated application styles like Bootstrap 3, and this is the result obtained:



In this article we want to share and show DisplayTags paging component like Bootstrap style. For  doing this we need to go to the file "displaytag.properties" found in the Web module of our application in this path "web/src/main/resources/displaytag.properties" It is the content:


# For a list of settings you can customize, see
# http://displaytag.sourceforge.net/configuration.html

basic.empty.showtable=true
paging.banner.onepage=
export.banner=
export.pdf=true

This file is used by DisplayTags for configuration and personalization, in our case we want to show the paging component like Bootstrap paging, then we add this new configuration:

paging.banner.placement=top
paging.banner.no_items_found=<span class="pagebanner">No {0} found.</span>
paging.banner.one_item_found=<span class="pagebanner">One {0} found.</span>
paging.banner.all_items_found=<span class="pagebanner">{0} {1} found, displaying all {2}.</span>
paging.banner.some_items_found=<span class="pagebanner">{0} {1} found, displaying {2} to {3}.</span>

paging.banner.full=<nav><ul class="pagination"><li><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>{0}<li><a href="{4}"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li></ul></nav>
#<nav><div class="pagination"><ul><li class="disabled"><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li><li class="prev disabled"><a href="{2}" class="next" title="previous"></a></li>{0}<li><a href="{3}" class="next" title="next"></li><li class="next"><a href="{4}" class="next" title="lest"></li></ul></div></nav>
paging.banner.first=<nav><ul class="pagination"><li class="disabled"><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>{0}<li><a href="{4}"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li></ul></nav>
#<nav><div class="pagination"><ul><li class="prev"><a href="{1}" class="next" title="first"></a></li><li class="prev"><a href="{2}" class="next" title="previous"></li>{0}<li><a href="{3}" class="next" title="next"></a></li><li class="next"><a href="{4}" class="next" title="lest"></li></ul></div></nav>
paging.banner.last=<nav><ul class="pagination"><li class="disabled"><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>{0}<li class="disabled"><a href="{4}"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li></ul></nav>
paging.banner.onepage=<nav><ul class="pagination">{0}</ul></nav>

paging.banner.page.selected=<li class="disabled"><span>{0}</span></li>
paging.banner.page.link=<li><a href="{1}">{0}</a></li>
paging.banner.page.separator=

Then we save the changes and deploy our project and we will see this new design:

I hope this help.

Saturday, December 27, 2014

Appfuse, updating the bootstrap version to v3.3.1.

Appfuse, updating the bootstrap version to v3.3.1.

I have been initiating me with AppFuse and I found very good job by the development team, the idea seems very interesting, but does not become a framework for code generation, but it is a good start. In this first article I want to share with you, as the first of several that I want to share my experiences with AppFuse.

To begin we will assume that you have used the archetype for a generation skeleton of our application that comes with some basic implementations out-of-the-box which can be found at the homepage of AppFuse. In this case for this sample the following image:


mvn archetype: generate -B -DarchetypeGroupId = org.appfuse.archetypes -DarchetypeArtifactId = appfuse-modular-spring-archetype -DarchetypeVersion = 3.0.0 -DgroupId = org.onedevelopment -DartifactId = RegPlusX -DarchetypeRepository = https://oss.sonatype.org/content/repositories/appfuse

After we have completed this process, copy and paste the command line generated in the console in the path of our workspace:


Upon completion of this process we have in our workspace directory a folder with our generated code. In our example case we will not explain the process of starting with AppFuse, I recommend following the Quick Start at official site.
As our interest is to upgrade the version of Bootstrap we go to our generated code in the folder that maven created us, in this example "RegPlusX" then we must find our root "pom.xml", open it and verify the version of Bootstrap in this case is:

<bootstrap.version>3.0.2</bootstrap.version>

we changed to version "3.3.1" the current version at this moment, this will be this:

<bootstrap.version>3.3.1</bootstrap.version>

Then we will make all other changes for proper operation and execution of our application. Very important, in this example we are use multi-module so we will have a core module, where the core functions of our application are and a Web module for our web app. Then let see the file "pom.xml" found within the Web module and edit this section where Bootstrap specified:

To understand the method in which the javascripts and css are used, or static resources is recommend reading this article: Adding web resource fingerprinting to AppFuse With wro4j.

<!-- Add Bootstrap via WebJars -->
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
</dependency>
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap-datepicker</artifactId>
 <version>1.2.0</version>
</dependency>
<!-- Downgrade jQuery so it works with HtmlUnit -->
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery</artifactId>
 <version>1.8.3</version>
</dependency>

Then we make the following changes, in the above code with this:

<!-- Add Bootstrap via WebJars -->
<!-- Updated to newest version -->
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
 <!-- <version>3.3.1</version> -->
</dependency>
<!-- <dependency> -->
 <!-- <groupId>org.webjars</groupId> -->
 <!-- <artifactId>bootswatch</artifactId> -->
 <!-- <version>3.3.1+2</version> -->
<!-- </dependency> -->
<!-- Updated to newest version -->
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap-datepicker</artifactId>
 <version>1.3.0-3</version>
</dependency>
<!-- Updated to newest version -->
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery-cookie</artifactId>
 <version>1.4.1-1</version>
</dependency>
<!-- Downgrade jQuery so it works with HtmlUnit -->
<!-- Updated to newest version -->
<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery</artifactId>
 <version>1.11.1</version>
</dependency>
<!-- We add 1.7.7 of Wro4j because the old version 1.7.2 is not working with this version of boostrap -->
<dependency>
 <groupId>ro.isdc.wro4j</groupId>
 <artifactId>wro4j-core</artifactId>
 <version>1.7.7</version>
</dependency>

As can be seen, Bootstrap is updated to the version 3.3.1, but this implies also update "bootstrap-datepicker" to the version 1.3.0-3, "jquery-cookie" to the version 1.4.1-1, "jquery "to version 1.11.1 and also need to add the version 1.7.7 of " wro4j-core " as dependency because old versions does not work.

The next step is to change the setting of "Wro4j" found at the following path in the Web module "src/main/webapp/WEB-INF/wro.xml". Here we change the settings as follows:


<css>classpath:META-INF/resources/webjars/bootswatch/3.0.0/spacelab/bootstrap.min.css</css>
<css>/styles/style.css</css>
<js>classpath:META-INF/resources/webjars/jquery/1.8.3/jquery.min.js</js>
<js>classpath:META-INF/resources/webjars/bootstrap/3.0.2/js/bootstrap.min.js</js>
<js>classpath:META-INF/resources/webjars/jquery-cookie/1.3.1/jquery.cookie.js</js>
<js>/scripts/script.js</js>

With this changes shown:

<!-- If you wanto to use the default Appfuse stye uncomment this line -->
<!--<css>classpath:META-INF/resources/webjars/bootswatch/3.3.1+2/spacelab/bootstrap.min.css</css> -->
<css>classpath:META-INF/resources/webjars/bootstrap/3.3.1/css/bootstrap.min.css</css>
<css>/styles/style.css</css>
<js>classpath:META-INF/resources/webjars/jquery/1.11.1/jquery.min.js</js>
<js>classpath:META-INF/resources/webjars/bootstrap/3.3.1/js/bootstrap.min.js</js>
<js>classpath:META-INF/resources/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js</js>
<js>/scripts/script.js</js>

If you can notice, we change the versions that need to be updated, it is important to note that the above changes if you want to keep the default AppFuse style instead of using the style of Bootstrap, then include this library "bootswatch " and use this.

Finally test our changes to the browser, run this command in the console for the "core" module:

mvn install –DskipTests=true

Then go to "Web" module and run the same command before and finally test our code in jetty running following command over de "Web" module too:

mvn jetty: run

And the result is our AppFuse application running with version 3.3.1 Bootstrap and style too:

I hope this help, the source code can be downloaded from this location.