Presentation Layer - Configure your Ext J.S components with XML

It is based on Spring MVC and it has dual purpose

  • Generate and serve your Configured Ext J.S components, from now on called Views.
  • Expose your Services (Business Cases) on the web.

On the Services Section you can find more information on how to expose your services on the web. On this section you will see how to configure your Ext J.S and to consume the data generated by the services.

Access your Services on the Web

The services that you created on the business layer need to be accessible over the web in order your configured Ext J.S components to consume them. The good news here is that the only thing that you dont have to write any code. You just need to configure a generic servlet and define the url that it will be accessible. 

Define a servlet

Open/Edit sampleweb/src/webapp/WEB-INF/servletConfiguration/application/confs/exampleCountries.xml and add

<bean id="dispatchCountryListDataController" class="org.jprovocateur.mvc.basisweb.controller.SimpleDataController" >
  <property name="metaDataClass" value=""/>
  <property name="dtoClass" value="com.exampleServices.businesslayer.objectmodel.account.Customer"/>
  <property name="businessLogic" value="countryListBC"/>
  <property name="controllerView" ref="jsonView"/>

Only the values on red are the ones you need to specify to have a working servlet.

You have defined a servlet called dispatchCountryListDataController with the following parameters are

  • class: org.jprovocateur.mvc.basisweb.controller.SimpleDataController is a generic controller provided  by Jprovocateur
  • metaDataClass:the metadata class. Use the default one.
  • dtoClass:The hibernate object that the service is using
  • businessLogic:The name of the service as you defined it in DB (table bc).
  • controllerView:The view that the controller will use to transform the data.
    • jsonView: it is a preconfigured view that transforms your data in a Json result. It is fully integraded with the Ext J.S forms
    • xmlView: it is a preconfigured view that transforms your data in XML. It can be used for communication with other systems. It is NOT integraded with the Ext J.S forms.

Define the servlet URL

Open/Edit sampleweb/src/webapp/WEB-INF/application-servlet-url.xml and add

<prop key="/json/listCountries">dispatchCountryListDataController</prop>

You can view the result on the demo application (guest/guest) Menu Tree>Countries>Countries List JSON

Now your service is available on http://localhost:8080/sampleweb/json/listCountries

This JSON result will be used by the Ext J.S Grid as the datasource. The service that you just created already support the following grid features paging/filters/sorting.

Create your Ext J.S Views

The creation of Views is done throught XML confguration.  The values defined on the xml with the use of freemarker generic templates will produce the page with the Ext J.S javascript.

Developer defines the components(grids/forms) that are required on a view and assign them to a template. The template is assigned to a servlet.

When the user request a page, the servlet process the template definition and the included components, locates the freemarker templates that are required by each component and generate the final html page with the ext j.s code.

 Go to the next page>>

Design downloaded from free website templates.
Web Templates created with FlashMint. .