OK, here’s a very simple Component, the Language Maintenance page.

It only has 2 input fields. The Language Code, and the Language Name.

Here’s the source JSP:

<%@ taglib uri="fclui" prefix="aspicio" %>
<%@ page language="java" pageEncoding="UTF-8"
import=”java.util.Map,
com.aspicio.persistence.*,
com.aspicio.security.AspicioUser,
com.aspicio.util.PersistenceMgr,
com.aspicio.util.Utils,
com.aspicio.util.Logger,
com.aspicio.entity.base.Language”%>

<%
Language entity = null;
final String listManagerId = request.getParameter(“listManagerId”);
final String entityId = request.getParameter(“entityId”);
Dao dao = AspicioUser.getCurrentUser().getDao();
if (entityId != null)
entity = (Language)dao.getById(Language.class, Long.parseLong(entityId));
else {
final String entityCode = request.getParameter(“code”);
if (entityCode != null) {
try {
entity = (Language)dao.getByCode(Language.class, entityCode);
} catch (Exception e) {
}
}
}
boolean isNew = false;
if (entity == null) {
isNew = true;
entity = new Language();
}
%>





” property=”name”/>

At the end of this post is the generated page that the browser sees.

You will not be able to run this page. The generated markup and generated script are tightly iintegrated with custom classes.

AU.initPage is a function which builds a BorderLayout in the document.body and creates the standard north, west, center and south Regions, sets up the menu according to the passed tree config, and readies the page for it’s content.

The function activatePage consists of code which has been “contributed” by all the JSP tags which need to be created and activated in javascript code.

They all add their own code fragments to the overall tags handler which concats them all and puts them into this function.

The Form tags is especially complex. It collects its nested input fields, and creates an array of fields. Each input handling tag outputs an anonymous function which creates, and initializes and returns the javascripts widget, so you’ll see the “fields” array looking like

var fields = [
function() {
var f = new Ext.form.TextField();
// preprocess f
return f;
}(),
function() { blah){}
];

Each field is applied to a field that the input field’s tag hander output as HTML with a unique, generated ID.

We have to generate all IDs because of the nature of popup key lookup windows. Each lookup pops up the full maintenance Component for the desired table, so any page may exist in the document more than once. So no ids can be referenced. This probably happens a lot in “Ajax” apps. Dynamic loading from the same URL more than once causing id clashes. Our tags generate all ids.

In script, you can see that all the scripts are within the same scope They are executed in the scope of a ComponentPanel widget (activatePage.call(cp); where cp is the ComponentPanel, a subclass of ContentPanel) through which access to the form, and fields within that form is possible.

>

That’s the code that is produced if that JSP page is requested directly from the browser’s navigation bar as a main page.

The app is single page, so usually, that Component will be Ajax-loaded through an XHR. Whan that happens the page handling tag does NOT produce a full HTML document with script to create a BorderLayout etc. Instead it produces script to just put that page into the content area that was generated when the app was first loaded.

The HTML which constitutes the actual page content is the same though: