This post is part of a larger code repository search application that I have been working on as a side project. The complete code is on my github here. In order to keep the post short and sweet, it assumes some familiarity with a lot of technologies from the front-end: backbone+marionette+requirejs to the middle and service tiers: java+spring+cxf+elasticsearch+hibernate+mysql.

The focus of this post is primarily this use case:

  • as a user, I want to be able to configure my application layout so that I can have my search results on the left side and my document preview on the right side or vice versa.

Examples:

1. Results on the left and preview on the right

2. Preview on the left and results on the right

My complete project setup on github:

  • owlpad-webapp: web application
  • owlpad-service: public api
  • owlpad-domain: domain objects shared by the api, service and the client
  • owlpad-service-impl: service implementation

To start, I created 4 classes under the domain project:

Configuration.java

Layout.java

LayoutType.java

Region.java

Under the owlpad-service project, I created an interface:

ConfigurationService.java

Under the owlpad-service-impl, I then created my dao/dao implementations as well as service implementations:
ConfigurationDao.java

ConfigurationDaoImpl.java

ConfigurationServiceImpl.java

applicationContext.xml for owlpad-service-impl:

There is rather a bit more involved with setting up the REST service, MySQL, and Hibernate, but this is left to the user to experiment with and figure out since the complete code is here

When the service starts, Hibernate creates the tables:

then import some default configuration data located under:
owlpad-service-impl/src/main/java/resources/META-INF/db/initialize.sql

Now that we’ve setup the REST Service, we go into our webapp and setup the spring controller and repository:

Under the owlpad-webapp project, we create:
ConfigController.java

ConfigRepository.java

servlet-context for webapp:

servlet-context.xml

Now that all the backend and middle tiers have been setup. We can look at the fun javascript, backbone, marionette parts. Again, this project assumes that the user is familiar with requirejs, backbone and marionette and has a good understanding already.

In order to make a call to get the application configuration, we create an ajax entity:
configEntities.js

then a configMediator:

configMediator.js

Then our marionette application:
app.js

The important part here is the call to load the application configuration:
configMediator.loadConfig() which returns the json:

Then using underscore’s built in functions _.object and _.map, we create a nicer object for the regions:

Configuring the application is a matter of changing which selector goes with what region in the database. In this case, we have the preview region on the left (r1) and results on the right (r2).

I will add a part 2 later to explain in more details…but for now, the github repo is a good source…