NFC/XFC

This feature requires Platform 4.5.39 or later; NFC was been deprecated in Platform 4.5, and has been reintroduced to support the xal syntax.

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 Controllerimplementation which uses NFC as the view.

Sample 1 (Traditional DOM code) 

public void addNewWindow(Element rootPane, NxSession session) {
    Document uiDoc = session.getDocumentProvider().getUIDocument();

    Element newWindow = uiDoc.createElement("window", "http://openxal.org/ui/java");
    newWindow.setAttribute("backgroundColor", "blue");
    newWindow.setAttribute("borderWidth", "2");
    newWindow.setAttribute("borderStyle", "inset");

    rootPane.appendChild(newWindow);
}

Sample 2 (NFC code) 

public void newWindow(RootPane rootPane, NxSession session) {
    Application app = Application.getApplication(getSession());

    Window newWindow = new Window();
    newWindow.setBackgroundColor(BackgroundColorType.BLUE);
    newWindow.setBorderWidth(new MeasureType("2px"));
    newWindow.setBorderStyle(BorderStyleType.INSET);

    rootPane.addWindow(newWindow);
}

Components

The NFC represents UI widgets as components. The com.nexaweb.xfc.componentspackage contains components representing every standard UI element. In addition, there is a special component, com.nexaweb.nfc.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.xfc.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.xfc.listenerspackage defines Listener interfaces.

Content

Events

The NFC performs event handling through listeners. To handle an event, implement the appropriate listener. Thecom.nexaweb.xfc.eventspackage 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. 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 XAL 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 whendesigning 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 their parent pane to the font color of that button. The index.xal 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.xal 

<xal xlmns="http://openxal.org/ui/java">
<declarations xmlns="http://openxal.org/core/mco">
  <mco id="BackgroundColorChanger" src="BackgroundSwitch"/>
</declarations>
<freePane id="topLevelPane">
  <button fontColor="red" width="100" height="25" text="Red Background" 
  onCreate="mco://BackgroundColorChanger.clientCreationHandler(this, topLevelPane)"/>
  <button fontColor="blue" width="100" height="25" text="Blue Background" 
  onCreate="mco://BackgroundColorChanger.clientCreationHandler(this)"/>
</freePane>
</xal>

BackgroundSwitch.java 

import com.nexaweb.client.mco.AbstractMco;
import com.nexaweb.nfc.components.Application;
import com.nexaweb.xfc.components.Button;
import com.nexaweb.nfc.components.Root;
import com.nexaweb.xfc.events.CommandEvent;
import com.nexaweb.xfc.listeners.ICommandListener;
import com.nexaweb.xml.Element;
/**
 * 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 { 
    private FreePane _freePane = null;

    /** 
     * 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, Element topPane) { 
        Application app = Application.getApplication(getSession()); 
        Button b = (Button) app.getComponent(element);        if (_freePane == null) _freePane = (FreePane) app.getComponent(topPane); 
        b.addCommandListener(this); 
    } 
    /* (non-Javadoc) 
     * @see com.nexaweb.xfc.listeners.ICommandListener#processEvent(com.nexaweb.xfc.events.CommandEvent) 
     */ 
    public void processEvent(CommandEvent event) { 
        // Set the parent pane's color based on the button's font color. 
        Button b = (Button) event.getSource(); 
        _freePane.setBackgroundColor(BackgroundColorType.findType(b.getColor().toString()) ); 
    }
}