NFC

The Nexaweb Foundation Class (NFC) library is a collection of classes that facilitate UI development via a convenient, type-safe interface. Historically, development for the Nexaweb user experience has been accomplished through direct manipulation of the UI document object model (DOM) using the traditional DOM API. As you can see in the sample methods below, using NFC allows a level of abstraction which makes coding simple UI tasks a bit shorter and cleaner.  In addition to standard NFC, the NFC package also includes an Model View Controller implementation which utilizies NFC as the view.

Sample 1 (Traditional DOM code)

public void newWindow() {
    Document uiDoc = getSession().getDocumentProvider().getUIDocument();

    Element newWindow = uiDoc.createElement("window");
    newWindow.setAttribute("backgroundColor", "blue");
    newWindow.setAttribute("borderWidth", "2");
    newWindow.setAttribute("borderStyle", "inset");

    Element rootElement = uiDoc.getRootElement();
    Vector kids = rootElement.getChildren();
    Element rootPane = null;
    for (int i = 0; i < kids.length(); i++) {
        if (kids.elementAt(i) instanceof Element) {
            (Element) curElement = (Element) kids.elementAt(i);
            if (curElement.getLocalName().equals("rootPane") {
                rootPane = curElement;
            }
        }
    }
    if (rootPane == null) {
        rootPane = uiDoc.createElement("rootPane");
        rootElement.appendChild(rootPane);
    }

    rootPane.appendChild(newWindow);
}  

Sample 2 (NFC code)

 public void newWindow() {
    Application app = Application.getApplication(getSession());

    Window newWindow = new Window();
    newWindow.setBackgroundColor("blue");
    newWindow.setBorderWidth(2);
    newWindow.setBorderStyle(BorderStyle.INSET);

    RootPane rootPane = app.getRoot().getRootPane();
    if (rootPane == null) {
        rootPane = new RootPane();
        app.getRoot().addRootPane(rootPane);
    }

    rootPane.addChild(newWindow);
}  

Components

The NFC represents UI widgets as components. The com.nexaweb.nfc.components package contains components representing every standard UI element. In addition, it contains a special component, TextComponent, which represents any textual data in the Nexaweb UI DOM.

Properties

The properties defined for components correspond to the attributes defined for Nexaweb UI elements. Properties are available through standard get and set methods in the component definition. A property may be any standard Java type such as int, float, and String. In addition, there are special enumerative properties for attributes with well defined enumerative definitions, and these enumerations are located in the com.nexaweb.nfc.types package.

Listeners

Listeners are similar to properties except you register and deregistered them using add and remove listener methods. You may use listeners to implement logic to fire when a UI event fires. You define listeners for any UI event attributes, that is, attributes prefixed by on, for example, onCommand. To register a listener, implement the appropriate listener interface and call the appropriate add Listener method on the component, supplying your listener. The com.nexaweb.nfc.listeners package defines Llstener interfaces.

Content

Events

The NFC performs event handling through listeners. To handle an event, implement the appropriate listener. The com.nexaweb.nfc.events package defines events. Each event type contains all the information that the client reports including the source component and any additional information specific to the event. The NFC allows multiple listeners to be registered for each UI event.

Note: Since NFC registers its event handlers using the event attributes supplied in the NXML syntax, event registration will overwrite any existing event attribute if one has been declared ahead of time in XML.

How to enable NFC in your application 

For a traditional client-driven application, you must indicate the use of NFC libraries on the client side. You do this either by:

• Checking the checkbox labeled Incorporate Nexaweb Foundation Classes when designing the application in Nexaweb Studio
• Editing the nexaweb-client.xml file to set the nfc element to true

It is not considered a best practice to maintain UI DOM state on the server side using Nexaweb. However, the NFC library has been built as agnostically as possible with regard to location. You can use it to drive the UI from the server side if this is required.

Example - A simple Nexaweb application with an NFC MCO

The following example files represent a simple Nexaweb application. This application contains two buttons that, when pressed, change the color of the root pane to the font color of that button. The index.nxml file contains the UI definition created with the Nexaweb Studio visual editor.  This example includes the BackGroundSwitch.java class that was created to implement the ICommandListener interface from NFC to process pressed buttons. The buttons' onCreate events register each button with the MCO.

index.xml

<nxml>
<declarations xmlns="http://nexaweb.com/mco">
    <mco id="BackgroundColorChanger" src="BackgroundSwitch"/>
</declarations>

<rootPane>
    <button fontColor="red" width="100" height="25" text="Red Background" 
    onCreate="mco://BackgroundColorChanger.clientCreationHandler(this)"/>
    <button fontColor="blue" width="100" height="25" text="Blue Background" 
    onCreate="mco://BackgroundColorChanger.clientCreationHandler(this)"/>
</rootPane>
</nxml>

BackgroundSwitch.java

import com.nexaweb.client.mco.AbstractMco;
import com.nexaweb.nfc.components.Application;
import com.nexaweb.nfc.components.Button;
import com.nexaweb.nfc.components.Root;
import com.nexaweb.nfc.events.CommandEvent;
import com.nexaweb.nfc.listeners.ICommandListener;
import com.nexaweb.xml.Element;
/*
 * Created on Oct 17, 2005
 */

/**
 * A simple object for the client side to allow a button to register itself
 * and when pressed, change the background of the root pane.
 */
public class BackgroundSwitch extends AbstractMco 
       implements ICommandListener { 

    /** 
     * Allows us to register a button when it is created in the UI on the 
     * client using the onCreate event. 
     * 
     * @param element The element representing the button. 
     */ 
    public void clientCreationHandler(Element element) { 
        Application app = Application.getApplication(getSession()); 
        Button b = (Button) app.getComponent(element); 
        b.addCommandListener(this); 
    } 

    /* (non-Javadoc) 
     * @see com.nexaweb.nfc.listeners.ICommandListener#processEvent(
     *  com.nexaweb.nfc.events.CommandEvent) 
     */ 
    public void processEvent(CommandEvent event) { 
        // Set the root pane's color based on the button's font color. 
        Button b = (Button) event.getSource(); 
        Application app = Application.getApplication(getSession()); 
        ( (Root)app.getRoot() ).getRootPane().setBgColor(b.getFontColor() ); 
    }

}