Styling UI Controls

NeuroKernel UI controls can be styled programmatically using only the API. This is ensured by multiple way. Styling can be cached by the application at the client side and used repeatedly during the life time of the application run.

1. Basic Properties

Properties are not stored in controls at so there are no getters, but only setters are available. If required, it is possible to extend the controls and store the properties and supply getter methods for them. We didn't want to over-engineer structure of control classes saving memory in the process. The Properties that can be set for each component are listed in NPropertyTypes class. The list of directly accessible properties is shown below. These properties may or may not be available to all controls. The other property types listed in the class NPropertyTypes are used for event based property setters that are explained in this guide later on.

Property Description Method
FONT_FAMILY Changes the font family setFontFamily
CURSOR Changes the cursor setCursor
ALIGNMENT Changes horizontal text alignment setAlignment
ZORDER Changes the z-order of the control setZOrder
BACKGROUND_IMAGE Changes the background image and properties setBackgroundImage
FONT_STYLE Changes the font style setFontStyle
FONT_SIZE Changes the font size setFontSize
RESPONSIVE Makes a control responsive or not setResponsive
BORDER Changes the border of the control setBorder
BACKGROUND Changes the background color setBackground
FOREGROUND Changes the foreground color setForeground
INNER_TOP_LEFT Changes the inner top and left border color setInnerBorder
INNER_BOTTOM_RIGHT Changes the inner bottom and right border color setInnerBorder
OUTER_BOTTOM_RIGHT Changes the outer bottom and right border color setOuterBorder
OUTER_TOP_LEFT Changes the outer top and left border color setOuterBorder
FOCUS Focuses the control and renders focus indicator setFocus
IMAGE Changes the image setImage
ENABLE Enables or disables a control setEnabled
VISIBILITY Changes the visibility state of the control setResponsive
REMOVE Removes the control, (can not be used directly) dispose
CUSTOM Custom properties (can not be used directly) N/A
DRAGDROP Sets drag and drop properties setDragEnabled / setDropTarget
TOOLTIP Sets the tooltip of the control setTooltip
ATTACH_EVENT Attaches/Detaches events to control attachClientEvent / detachClientEvent
TEXT_VALUE Changes the text content setText
BOX_SHADOW Sets a box shadow setBoxShadow
TEXT_SHADOW Sets a text shadow setTextShadow
FILTER Sets some CSS3 level filters setFilter
ACCESSIBILITY Changes the ARIA roles and other accessibility related properties getAccessibility
CLASS_SELECTOR Changes the class selector (can not be used directly) N/A
RENDER_STYLE Styles the rendering states setProperty / setProperties
HTML Sets HTML content setHTML
SVG Sets SVG content setSVG

2. Manipulating Renderer

Applications can manipulate display server native renderer for performance by directly setting rendering states of components. The below example shows how to accomplish this.

import com.neurokernel.client.*;
import com.neurokernel.client.constants.RenderingState;
import com.neurokernel.adapter.NActionListener;
 
public class RenderingStates extends NApplication {
      @Override
      public void main(int argc, String[] argv) {
          final NFrame mainFrame=getMainFrame();
          NButton button=new NButton(mainFrame,"Hello");
 
          NColor transparent=NColor.TRANSPARENT;
          button.setBorderRadius(3);
          button.setOuterBorder(NColor.BLACK);
          button.setInnerBorder(transparent);
          //set the properties one by one, this wont overwrite the previously set value
          button.setProperty(RenderingState.PRESSED, NProperty.setBackground(NColor.BLUE));
          button.setProperty(RenderingState.PRESSED, NProperty.setInnerTopBorder(transparent, transparent));
          button.setProperty(RenderingState.PRESSED, NProperty.setInnerBottomBorder(transparent, transparent));
          button.setProperty(RenderingState.PRESSED,NProperty.setForeground(NColor.WHITE));
          //or set them all at once
          button.setProperties(RenderingState.RELEASED, NProperty.setBackground(NColor.LIGHTGRAY),
                                                NProperty.setForeground(NColor.BLACK));
                                                NProperty.setInnerBottomBorder(transparent, transparent));
                                                NProperty.setInnerTopBorder(transparent, transparent));
 
          mainFrame.setTitle("Rendering State Example");
          mainFrame.setBounds(20,20,200,200);
          mainFrame.setVisible(true);
      }
}

Here are the rendering states that can be used. Each state needs a list of properties to use. Multiple properties can be set on each rendering state at once.

Rendering State Description
DISABLED Disabled state of the control
ENABLED Enabled state of the control
PRESSED Pointer down state of the control
RELEASED Pointer up state of the control
ARMED Armed state of the control
UNARMED UnArmed state of the control
FOCUSED Focused state of the control
BLURRED Blurred state of the control

3. Accessing Sub Controls

Some non-composite controls have parts that can be automatically defined as a sub component. These are simple components such a button, label or image view. These sub controls can be styled as well individually making them more manageable. For example, buttons of NSpinner component can be individually styled.

   import com.neurokernel.client.*;
    import com.neurokernel.client.constants.Order;
 
   public class MyApplication extends NApplication {
      @Override
      public void main(int argc, String[] argv) {
         NFrame mainFrame=getMainFrame();
         NGridLayout layout=mainFrame.getLayout();
         layout.setSize(2,1).setGaps(5,5);
 
         new NSpinner(mainFrame,"0");
         NSpinner  spinner=new NSpinner(mainFrame,"0");
         NButton button=spinner.getSideControl(Order.First);
         button=setBorder(new NRoundedBorder(NBorder.RAISED,3));
 
         mainFrame.setTitle("Spinner Example");
         mainFrame.setBounds(20,20,200,200);
         mainFrame.setVisible(true);
      }
  }