wffweb - Java Developers Guide

MLTP Architecture

MLTP stands for Model Logical-Template Push. The model (AKA domain object) gives the data required for logical-template. Logical Template could be a reusable custom template class containing wff java code which can generate a piece of html for the UI. Push, which is done by the framework internally itself when a template/layout is embedded by another template and we don't have to take care about the push part.

---

Logical-template

Logical-template is a reusable template class which can generate a specific portion of a ui with needful functionalities. The below code shows a simple example for Logical-template. The logical template may be provided model to show required data (it's not included in the below code but you can simply modify). The mere responsibility of a logical-template class is to generate a specific portion for ui with functionalities

/**
 * this code is updated so it will be valid since wffweb-2.1.2 version
 */				
public class ListUsersTempate extends Div implements ServerAsyncMethod {

    private static final Logger LOGGER = Logger.getLogger(ListUsersTempate.class.getName());
    
    private TBody tBody;
    
    private Collection previousRows;
    
    private int rowCount = 0;
    
    private Button nextRowsButton;
    
    private OnClick nextRowsButtonOnClick;
    
    private OnClick commonOnClick;
    
    private Button markGreenButton;
    
    private Button markVioletButton;
    
    private Button removeColoumnStyleButton;
    
    private Style countryColumnStyle;
    
    public ListUsersTempate() {
    	super(null);
    	countryColumnStyle = new Style("background:yellow");
    	develop();
    }
    
    private void develop() {
    
    	new StyleTag(this) {{
    	    new NoTag(this, "table {\n    font-family: arial, sans-serif;");
    	    new NoTag(this, "border-collapse: collapse;\n    width: 100%;");
    	    new NoTag(this, "}\n\ntd, th {");
    	    new NoTag(this, "border: 1px solid #dddddd;\n    text-align: left;");
    	    new NoTag(this, "padding: 8px;\n}");
    	    new NoTag(this, "tr:nth-child(even) {\n    background-color: #dddddd;");
    	    new NoTag(this, "}");
    	}};
    
    	new Table(this) {{
    	    tBody = new TBody(this) {{
    	        new Tr(this) {{
    	            new Th(this) {{
    	                new NoTag(this, "Company (会社)");
    	            }};
    	            new Th(this) {{
    	                new NoTag(this, "Contact (接触)");
    	            }};
    	            new Th(this) {{
    	            	new NoTag(this, "Country (国)");
    	            }};
    	        }};
    	    }};
    	}};
    
    	new Br(this);
    	new Br(this);
    
    	nextRowsButtonOnClick = new OnClick(this);
    	commonOnClick = new OnClick(this);
    
    	nextRowsButton = new Button(this, nextRowsButtonOnClick) {{
    	    new B(this) {{
    	        new NoTag(this, "Next");
    	    }};
    	}};
    
    	markGreenButton = new Button(this, commonOnClick) {{
    	    new B(this) {{
    	        new NoTag(this, "Mark column green");
    	    }};
    	}};
    
    	markVioletButton = new Button(this, commonOnClick) {{
    	    new B(this) {{
    	        new NoTag(this, "Mark column violet");
    	    }};
    	}};
    
    	removeColoumnStyleButton = new Button(this, commonOnClick) {{
    	    new B(this) {{
    	        new NoTag(this, "Remove style from column");
    	    }};
    	}};
    
    	// initially add rows
    	addRows();
    }
    
    private void addRows() {
    
    	Collection rows = new LinkedList();
    
    	for (int i = 0; i < 25; i++) {
    
    	    Tr tr = new Tr(null) {{
    	        
    	        rowCount++;
                
    	        new Td(this) {{
    	            new NoTag(this, "Alfreds Futterkiste " + rowCount);
    	        }};
    	        new Td(this) {{
    	            new NoTag(this, "Maria Anders " + rowCount);
    	        }};
    	        new Td(this, countryColumnStyle) {{
    	            new NoTag(this, "Germany " + rowCount);
    	        }};
    	        
    	    }};
    
    	    rows.add(tr);
    	}
    
    	if (previousRows != null) {
    	    tBody.removeChildren(previousRows);
    	}
    
    	tBody.appendChildren(rows);
    
    	previousRows = rows;
    
    }
    
    @Override
    public WffBMObject asyncMethod(WffBMObject dataFromClient, Event event) {
    
    	// if nextRowsButtonOnClick is equal to event.getSourceAttribute()
    	// then nextRowsButton will be equal to event.getSourceTag()
    	// because nextRowsButtonOnClick attribute is added only in
    	// nextRowsButton
    	// But, in the case of commonOnClick it's added in
    	// three buttons so the sourceTag must also be checked.
    
    	if (nextRowsButtonOnClick.equals(event.getSourceAttribute())) {
    
    	    addRows();
    
    	} else if (commonOnClick.equals(event.getSourceAttribute()) 
    		    && markGreenButton.equals(event.getSourceTag())) {
    
    	    LOGGER.info("Mark column green");
    	    countryColumnStyle.addCssProperties("background:green");
    
    	} else if (commonOnClick.equals(event.getSourceAttribute()) 
    		    && markVioletButton.equals(event.getSourceTag())) {
    
    	    LOGGER.info("Mark column violet");
    	    countryColumnStyle.addCssProperties("background:violet");
    
    	} else if (commonOnClick.equals(event.getSourceAttribute())
    		    && removeColoumnStyleButton.equals(event.getSourceTag())) {
    
    	    LOGGER.info("remove style");
    	    AbstractHtml[] ownerTags = countryColumnStyle.getOwnerTags();
            
    	    for (AbstractHtml ownerTag : ownerTags) {
    	        ownerTag.removeAttributes(countryColumnStyle.getAttributeName());
    	    }
    	}
    
    	return null;
    }

}

Later you can add this template class to any specific portion of ui, eg:

ListUsersTempate listUsers = new ListUsersTempate();

//suppose you have a div in the ui to add, then

div.appendChild(listUsers);