PnlPresetBrowser adding images

[GUJIAN]

So the teacher's template is like this, with pictures added. What's the problem with it? Which teacher can help me make the necessary changes

/*
    Copyright 2021, 2022, 2023 David Healey

    This file is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This file is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with This file. If not, see <http://www.gnu.org/licenses/>.
*/

namespace Presets
{
	reg expansionIndex = -1;
	reg masterGainValue;
	reg currentPresetFile;

	const uph = Engine.createUserPresetHandler();

	uph.setPreCallback(function(presetData)
	{
		 if (!uph.isInternalPresetLoad())
			masterGainValue = Footer.knbMasterGain.getValue();
	});

	uph.setPostCallback(function(presetFile)
	{
		if (!uph.isInternalPresetLoad() && isDefined(masterGainValue))
		{
			Footer.knbMasterGain.setValue(masterGainValue);
			Footer.knbMasterGain.changed();
		}

		currentPresetFile = presetFile;
		updatePresetLabel();
	});
	
	uph.setPostSaveCallback(function(presetFile)
	{
		currentPresetFile = presetFile;
		updatePresetLabel();
	});
    
    // pnlPresetDisplay
    const pnlPresetDisplay = Content.getComponent("pnlPresetDisplay");
    pnlPresetDisplay.setValue(0);

    pnlPresetDisplay.setPaintRoutine(function(g)
    {
		var a = this.getLocalBounds(0);
		var radius = this.get("borderRadius");
		
		g.setColour(this.get("bgColour"));
		g.fillRoundedRectangle(a, radius);
		
		if (this.getValue() > 0)
		{
			g.setColour(this.get("itemColour"));
			g.fillRoundedRectangle([a[0], a[1], (a[2] - 50) * this.getValue(), a[3]], radius);
		}
    });
    
    pnlPresetDisplay.setLoadingCallback(function(isPreloading)
    {
		if (isPreloading)
		{
			this.startTimer(50);
		}    		
    	else
    	{
	    	this.stopTimer();
	    	this.setValue(0);
	    	this.repaint();
    	}
    });

    pnlPresetDisplay.setTimerCallback(function()
    {
	   this.setValue(Engine.getPreloadProgress());
	   this.repaint();
    });

	// pnlPresetBrowserContainer
	const pnlPresetBrowserContainer = Content.getComponent("pnlPresetBrowserContainer");
    
    pnlPresetBrowserContainer.setPaintRoutine(function(g)
    {
		var a = [pnlPresetBrowser.get("x"), pnlPresetBrowser.get("y"), pnlPresetBrowser.getWidth(), pnlPresetBrowser.getHeight()];
		
		g.fillAll(this.get("bgColour"));

		g.drawDropShadow(a, Colours.withAlpha(Colours.black, 0.8), 20);
    });
    
    pnlPresetBrowserContainer.setMouseCallback(function(event)
    {
		if (event.clicked)
			hide();
    });
    
    // pnlPresetBrowser
    const pnlPresetBrowser = Content.getComponent("pnlPresetBrowser");
    
    pnlPresetBrowser.setPaintRoutine(function(g)
    {
	   var a = this.getLocalBounds(0);
	   
	   g.setColour(this.get("bgColour"));	   
	   g.fillRoundedRectangle(a, this.get("borderRadius"));
    });

    // pnlPresetNotesBlocker
    const pnlPresetNotesBlocker = Content.getComponent("pnlPresetNotesBlocker");

    pnlPresetNotesBlocker.setPaintRoutine(function(g)
    {
		var titles = this.data.titles;

        g.fillAll(this.get("bgColour"));

        g.setColour(this.get("textColour"));
        g.setFont("bold", 16);

		for (i = 0; i < titles.length; i++)
		{
			var w = this.getWidth() / titles.length;
			var x = w * i + (4 * i);

			if (titles.length == 2 && i == 1)
				w = w * 3;
			
			g.setColour(this.get("textColour"));
			g.drawAlignedText(titles[i], [x, 0, w, this.getHeight()], "centred");
		}
    });
    
    // btnPresetBrowserClose
    const btnPresetBrowserClose = Content.getComponent("btnPresetBrowserClose");
    btnPresetBrowserClose.setLocalLookAndFeel(LookAndFeel.filledIconButton);
    btnPresetBrowserClose.setControlCallback(onbtnPresetBrowserCloseControl);
    
    inline function onbtnPresetBrowserCloseControl(component, value)
    {
	    if (!value)
	    	hide();
    }
    
    

    
    
    // fltPresetBrowser
    const categories = getCategories();
    Engine.loadImageIntoPool("*.png");
    
    
    
    const fltPresetBrowser = Content.getComponent("fltPresetBrowser");
    fltPresetBrowser.setLocalLookAndFeel(LookAndFeel.presetBrowser);
    const laffltPresetBrowser = Content.createLocalLookAndFeel();
    fltPresetBrowser.setLocalLookAndFeel(laffltPresetBrowser);
    
    laffltPresetBrowser.registerFunction("drawPresetBrowserListItem", function(g, obj)
    {
    	var a = obj.area;
    	
    	g.setColour(Colours.black);
    	g.drawAlignedText(obj.text, a, "left");
    	
    	if (obj.columnIndex != 0)
    		return;
    
    	if (this.isImageLoaded(obj.text))
    		g.drawImage(obj.text, a, 0, 0);
    	else
    		g.drawImage("placeholder", a, 0, 0);
    });
    
    // Functions
    inline function loadImagesIntoLaf(categoryNames, laf)
    {
    	for (name in categoryNames)
    	{
    		laf.loadImage("{PROJECT_FOLDER}" + name.toLowerCase() + ".png", name);
    	}
    	
    	laf.loadImage("{PROJECT_FOLDER}placeholder.png", "placeholder");
    }
    
    inline function getCategories()
    {
    	local result = [];
    	
    	local presets = Engine.getUserPresetList();
    	
    	for (preset in presets)
    	{
    		local category = preset.substring(preset.indexOf("/") + 1, preset.lastIndexOf("/"));
    		result.pushIfNotAlreadyThere(category);
    	}
    
    	return result;
    }
    
    // Calls
    loadImagesIntoLaf(categories, laffltPresetBrowser);
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    // Broadcaster
    const bc = Engine.createBroadcaster({"id": "PresetBrowser", "args": [component, obj]});
    
    bc.attachToComponentMouseEvents(["fltPresetBrowser", "btnPreset0", "btnPreset1"], "Clicks Only", "");
    
    bc.addListener("mouseAction", "Mouse action for preset browser", function(component, event)
    {
		if (!event.mouseUp)
		{
			if (!isDefined(event.columnIndex))
				return;

			switch (event.columnIndex)
			{					
				case 2: // Presets
					if (event.doubleClick)
						hide();
					break;
			}
			
			return;
		}
		
		if (event.mouseUp)
		{
			if (event.target == "favoriteButton")
				setTitles(event.buttonState);
		}
    });
    
    
   
   
    
    
    
    // btnPresetBrowser
    const btnPresetBrowser = Content.getComponent("btnPresetBrowser");
    btnPresetBrowser.setValue(parseInt(pnlPresetBrowserContainer.get("visible")));
    btnPresetBrowser.setControlCallback(onbtnPresetBrowserControl);    

    inline function onbtnPresetBrowserControl(component, value)
    {		
		value ? show() : hide();
    }

	const lafbtnPresetBrowser = Content.createLocalLookAndFeel();
	btnPresetBrowser.setLocalLookAndFeel(lafbtnPresetBrowser);

    lafbtnPresetBrowser.registerFunction("drawToggleButton", function(g, obj)
    {
		var a = obj.area;

		g.fillAll(0x0);

		g.setFont("bold", 18);
		g.setColour(Colours.withAlpha(obj.textColour, obj.over ? 1.0 : 0.8));
		g.drawAlignedText(obj.text, [a[0] + 10, a[1], a[2], a[3]], "left");
    });

    // btnPreset - previous/next preset buttons
    const btnPreset = [];

    for (i = 0; i < 2; i++)
    {
        btnPreset.push(Content.getComponent("btnPreset" + i));
        btnPreset[i].setLocalLookAndFeel(LookAndFeel.iconButton);
        btnPreset[i].setControlCallback(onbtnPresetControl);
    }
    
    inline function onbtnPresetControl(component, value)
    {
		if (value || Patches.getPatchIndex() == -1)
			return;

        local index = btnPreset.indexOf(component);

		index == 0 ? Engine.loadPreviousUserPreset(false) : Engine.loadNextUserPreset(false);
    }
    
    // btnPresetSave
    const btnPresetSave = Content.getComponent("btnPresetSave");
    btnPresetSave.setLocalLookAndFeel(LookAndFeel.iconButton);
    btnPresetSave.setControlCallback(onbtnPresetSaveControl);
    
    inline function onbtnPresetSaveControl(component, value)
    {
	    if (value)
	    	return;
	    	
	    savePreset();
    }
   
    // Functions    
    inline function updatePresetLabel()
    {
		if (!isDefined(currentPresetFile))
			return;

		local category = currentPresetFile.getParentDirectory().toString(currentPresetFile.NoExtension);
		local name = currentPresetFile.toString(currentPresetFile.NoExtension);

		btnPresetBrowser.set("text", category + " | " + name);
    }

    inline function show()
    {
        pnlPresetBrowserContainer.fadeComponent(true, 100);
       	btnPresetBrowser.setValue(true);
		btnPresetBrowserClose.setValue(true);
    }
    
    inline function hide()
    {
		pnlPresetBrowserContainer.fadeComponent(false, 100);
		btnPresetBrowser.setValue(false);
    }
    
    inline function setTitles(favourites)
    {
		if (favourites)
			pnlPresetNotesBlocker.data.titles = ["FAVOURITES"];
		else
			pnlPresetNotesBlocker.data.titles = ["BANK", "CATEGORY", "PRESET"];

		pnlPresetNotesBlocker.repaint();
    }
        
    inline function savePreset()
    {
	    local presetName = Engine.getCurrentUserPresetName();
	    local isReadOnly = false;

	    if (isDefined(currentPresetFile))
	    	isReadOnly = Engine.isUserPresetReadOnly(currentPresetFile);	    	

	   	if (isDefined(presetName) && presetName != "" && !isReadOnly)
	   		overwriteCurrentPreset(presetName);
	   	else
	   		createNewPreset();
    }
    
    inline function overwriteCurrentPreset(presetName)
    {
	    Engine.showYesNoWindow("Overwrite Preset", "Do you want to overwrite the current preset?", function[presetName](response)
	    {
			if (response)
				Engine.saveUserPreset(presetName);
			else
				createNewPreset();
	    });
    }
    
    inline function createNewPreset()
    {
		local userPresetsFolder = Expansions.getCurrentUserPresetsFolder();

		if (!isDefined(userPresetsFolder))
			return;

	    FileSystem.browse(userPresetsFolder, true, "*.preset", function[userPresetsFolder](f)
	    {
			var grandparent = f.getParentDirectory().getParentDirectory().getParentDirectory();

			if (!userPresetsFolder.isSameFileAs(grandparent))
				return Engine.showMessageBox("Invalid Location", "Presets must be saved in a bank and category folder within the instrument's user presets folder.", 0);

			var isReadOnly = Engine.isUserPresetReadOnly(f);
			
			if (isReadOnly)
				return Engine.showMessageBox("Read Only", "The selected preset is read-only. Please create a new preset.", 0);

			Engine.saveUserPreset(f.toString(f.FullPath).replace(".preset"));

			currentPresetFile = f;
			updatePresetLabel();
	    });
    }
    
    // Function calls
    setTitles(false);
}

[d.healey]

@GUJIAN I don't understand the question, can you rephrase it?

[GUJIAN]

@d-healey The UI interface has changed, it turned out to be fine. I added an image list and the UI has changed. I don't know where the problem is

[d.healey]

@GUJIAN Show me the part you changed, before and after

[GUJIAN]

@d-healey Before modification

/*
    Copyright 2021, 2022, 2023 David Healey

    This file is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This file is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with This file. If not, see <http://www.gnu.org/licenses/>.
*/

namespace Presets
{
	reg expansionIndex = -1;
	reg masterGainValue;
	reg currentPresetFile;

	const uph = Engine.createUserPresetHandler();

	uph.setPreCallback(function(presetData)
	{
		 if (!uph.isInternalPresetLoad())
			masterGainValue = Footer.knbMasterGain.getValue();
	});

	uph.setPostCallback(function(presetFile)
	{
		if (!uph.isInternalPresetLoad() && isDefined(masterGainValue))
		{
			Footer.knbMasterGain.setValue(masterGainValue);
			Footer.knbMasterGain.changed();
		}

		currentPresetFile = presetFile;
		updatePresetLabel();
	});
	
	uph.setPostSaveCallback(function(presetFile)
	{
		currentPresetFile = presetFile;
		updatePresetLabel();
	});
    
    // pnlPresetDisplay
    const pnlPresetDisplay = Content.getComponent("pnlPresetDisplay");
    pnlPresetDisplay.setValue(0);

    pnlPresetDisplay.setPaintRoutine(function(g)
    {
		var a = this.getLocalBounds(0);
		var radius = this.get("borderRadius");
		
		g.setColour(this.get("bgColour"));
		g.fillRoundedRectangle(a, radius);
		
		if (this.getValue() > 0)
		{
			g.setColour(this.get("itemColour"));
			g.fillRoundedRectangle([a[0], a[1], (a[2] - 50) * this.getValue(), a[3]], radius);
		}
    });
    
    pnlPresetDisplay.setLoadingCallback(function(isPreloading)
    {
		if (isPreloading)
		{
			this.startTimer(50);
		}    		
    	else
    	{
	    	this.stopTimer();
	    	this.setValue(0);
	    	this.repaint();
    	}
    });

    pnlPresetDisplay.setTimerCallback(function()
    {
	   this.setValue(Engine.getPreloadProgress());
	   this.repaint();
    });

	// pnlPresetBrowserContainer
	const pnlPresetBrowserContainer = Content.getComponent("pnlPresetBrowserContainer");
    
    pnlPresetBrowserContainer.setPaintRoutine(function(g)
    {
		var a = [pnlPresetBrowser.get("x"), pnlPresetBrowser.get("y"), pnlPresetBrowser.getWidth(), pnlPresetBrowser.getHeight()];
		
		g.fillAll(this.get("bgColour"));

		g.drawDropShadow(a, Colours.withAlpha(Colours.black, 0.8), 20);
    });
    
    pnlPresetBrowserContainer.setMouseCallback(function(event)
    {
		if (event.clicked)
			hide();
    });
    
    // pnlPresetBrowser
    const pnlPresetBrowser = Content.getComponent("pnlPresetBrowser");
    
    pnlPresetBrowser.setPaintRoutine(function(g)
    {
	   var a = this.getLocalBounds(0);
	   
	   g.setColour(this.get("bgColour"));	   
	   g.fillRoundedRectangle(a, this.get("borderRadius"));
    });

    // pnlPresetNotesBlocker
    const pnlPresetNotesBlocker = Content.getComponent("pnlPresetNotesBlocker");

    pnlPresetNotesBlocker.setPaintRoutine(function(g)
    {
		var titles = this.data.titles;

        g.fillAll(this.get("bgColour"));

        g.setColour(this.get("textColour"));
        g.setFont("bold", 16);

		for (i = 0; i < titles.length; i++)
		{
			var w = this.getWidth() / titles.length;
			var x = w * i + (4 * i);

			if (titles.length == 2 && i == 1)
				w = w * 3;
			
			g.setColour(this.get("textColour"));
			g.drawAlignedText(titles[i], [x, 0, w, this.getHeight()], "centred");
		}
    });
    
    // btnPresetBrowserClose
    const btnPresetBrowserClose = Content.getComponent("btnPresetBrowserClose");
    btnPresetBrowserClose.setLocalLookAndFeel(LookAndFeel.filledIconButton);
    btnPresetBrowserClose.setControlCallback(onbtnPresetBrowserCloseControl);
    
    inline function onbtnPresetBrowserCloseControl(component, value)
    {
	    if (!value)
	    	hide();
    }
    
    
 //-----------------------------------------------------------------   

    
    // fltPresetBrowser
    const fltPresetBrowser = Content.getComponent("fltPresetBrowser");
    fltPresetBrowser.setLocalLookAndFeel(LookAndFeel.presetBrowser);
   

    
  //-------------------------------------------------------------  
    
    // Broadcaster
    const bc = Engine.createBroadcaster({"id": "PresetBrowser", "args": [component, obj]});
    
    bc.attachToComponentMouseEvents(["fltPresetBrowser", "btnPreset0", "btnPreset1"], "Clicks Only", "");
    
    bc.addListener("mouseAction", "Mouse action for preset browser", function(component, event)
    {
		if (!event.mouseUp)
		{
			if (!isDefined(event.columnIndex))
				return;

			switch (event.columnIndex)
			{					
				case 2: // Presets
					if (event.doubleClick)
						hide();
					break;
			}
			
			return;
		}
		
		if (event.mouseUp)
		{
			if (event.target == "favoriteButton")
				setTitles(event.buttonState);
		}
    });
    
    // btnPresetBrowser
    const btnPresetBrowser = Content.getComponent("btnPresetBrowser");
    btnPresetBrowser.setValue(parseInt(pnlPresetBrowserContainer.get("visible")));
    btnPresetBrowser.setControlCallback(onbtnPresetBrowserControl);    

    inline function onbtnPresetBrowserControl(component, value)
    {		
		value ? show() : hide();
    }

	const lafbtnPresetBrowser = Content.createLocalLookAndFeel();
	btnPresetBrowser.setLocalLookAndFeel(lafbtnPresetBrowser);

    lafbtnPresetBrowser.registerFunction("drawToggleButton", function(g, obj)
    {
		var a = obj.area;

		g.fillAll(0x0);

		g.setFont("bold", 18);
		g.setColour(Colours.withAlpha(obj.textColour, obj.over ? 1.0 : 0.8));
		g.drawAlignedText(obj.text, [a[0] + 10, a[1], a[2], a[3]], "left");
    });

    // btnPreset - previous/next preset buttons
    const btnPreset = [];

    for (i = 0; i < 2; i++)
    {
        btnPreset.push(Content.getComponent("btnPreset" + i));
        btnPreset[i].setLocalLookAndFeel(LookAndFeel.iconButton);
        btnPreset[i].setControlCallback(onbtnPresetControl);
    }
    
    inline function onbtnPresetControl(component, value)
    {
		if (value || Patches.getPatchIndex() == -1)
			return;

        local index = btnPreset.indexOf(component);

		index == 0 ? Engine.loadPreviousUserPreset(false) : Engine.loadNextUserPreset(false);
    }
    
    // btnPresetSave
    const btnPresetSave = Content.getComponent("btnPresetSave");
    btnPresetSave.setLocalLookAndFeel(LookAndFeel.iconButton);
    btnPresetSave.setControlCallback(onbtnPresetSaveControl);
    
    inline function onbtnPresetSaveControl(component, value)
    {
	    if (value)
	    	return;
	    	
	    savePreset();
    }
   
    // Functions    
    inline function updatePresetLabel()
    {
		if (!isDefined(currentPresetFile))
			return;

		local category = currentPresetFile.getParentDirectory().toString(currentPresetFile.NoExtension);
		local name = currentPresetFile.toString(currentPresetFile.NoExtension);

		btnPresetBrowser.set("text", category + " | " + name);
    }

    inline function show()
    {
        pnlPresetBrowserContainer.fadeComponent(true, 100);
       	btnPresetBrowser.setValue(true);
		btnPresetBrowserClose.setValue(true);
    }
    
    inline function hide()
    {
		pnlPresetBrowserContainer.fadeComponent(false, 100);
		btnPresetBrowser.setValue(false);
    }
    
    inline function setTitles(favourites)
    {
		if (favourites)
			pnlPresetNotesBlocker.data.titles = ["FAVOURITES"];
		else
			pnlPresetNotesBlocker.data.titles = ["BANK", "CATEGORY", "PRESET"];

		pnlPresetNotesBlocker.repaint();
    }
        
    inline function savePreset()
    {
	    local presetName = Engine.getCurrentUserPresetName();
	    local isReadOnly = false;

	    if (isDefined(currentPresetFile))
	    	isReadOnly = Engine.isUserPresetReadOnly(currentPresetFile);	    	

	   	if (isDefined(presetName) && presetName != "" && !isReadOnly)
	   		overwriteCurrentPreset(presetName);
	   	else
	   		createNewPreset();
    }
    
    inline function overwriteCurrentPreset(presetName)
    {
	    Engine.showYesNoWindow("Overwrite Preset", "Do you want to overwrite the current preset?", function[presetName](response)
	    {
			if (response)
				Engine.saveUserPreset(presetName);
			else
				createNewPreset();
	    });
    }
    
    inline function createNewPreset()
    {
		local userPresetsFolder = Expansions.getCurrentUserPresetsFolder();

		if (!isDefined(userPresetsFolder))
			return;

	    FileSystem.browse(userPresetsFolder, true, "*.preset", function[userPresetsFolder](f)
	    {
			var grandparent = f.getParentDirectory().getParentDirectory().getParentDirectory();

			if (!userPresetsFolder.isSameFileAs(grandparent))
				return Engine.showMessageBox("Invalid Location", "Presets must be saved in a bank and category folder within the instrument's user presets folder.", 0);

			var isReadOnly = Engine.isUserPresetReadOnly(f);
			
			if (isReadOnly)
				return Engine.showMessageBox("Read Only", "The selected preset is read-only. Please create a new preset.", 0);

			Engine.saveUserPreset(f.toString(f.FullPath).replace(".preset"));

			currentPresetFile = f;
			updatePresetLabel();
	    });
    }
    
    //-------------------------------------------------
    // Functions
 
    
    //-------------------------------------------------------------------------
    
    
    
    // Function calls
    setTitles(false);

}

I added this code, and the UI interface changed

    // fltPresetBrowser
    const categories = getCategories();
    Engine.loadImageIntoPool("*.png");
    
    
    
    const fltPresetBrowser = Content.getComponent("fltPresetBrowser");
    fltPresetBrowser.setLocalLookAndFeel(LookAndFeel.presetBrowser);
    const laffltPresetBrowser = Content.createLocalLookAndFeel();
    fltPresetBrowser.setLocalLookAndFeel(laffltPresetBrowser);
    
    laffltPresetBrowser.registerFunction("drawPresetBrowserListItem", function(g, obj)
    {
        var a = obj.area;
        
        g.setColour(Colours.black);
        g.drawAlignedText(obj.text, a, "left");
        
        if (obj.columnIndex != 0)
            return;
    
        if (this.isImageLoaded(obj.text))
            g.drawImage(obj.text, a, 0, 0);
        else
            g.drawImage("placeholder", a, 0, 0);
    });
    
    // Functions
    inline function loadImagesIntoLaf(categoryNames, laf)
    {
        for (name in categoryNames)
        {
            laf.loadImage("{PROJECT_FOLDER}" + name.toLowerCase() + ".png", name);
        }
        
        laf.loadImage("{PROJECT_FOLDER}placeholder.png", "placeholder");
    }
    
    inline function getCategories()
    {
        local result = [];
        
        local presets = Engine.getUserPresetList();
        
        for (preset in presets)
        {
            local category = preset.substring(preset.indexOf("/") + 1, preset.lastIndexOf("/"));
            result.pushIfNotAlreadyThere(category);
        }
    
        return result;
    }
    
    // Calls
    loadImagesIntoLaf(categories, laffltPresetBrowser);
    

[d.healey]

@GUJIAN You can only assign a single look and feel object to a component.

The second assignment will conflict with the first

fltPresetBrowser.setLocalLookAndFeel(LookAndFeel.presetBrowser);
const laffltPresetBrowser = Content.createLocalLookAndFeel();
fltPresetBrowser.setLocalLookAndFeel(laffltPresetBrowser);

[GUJIAN]

@d-healey No, it's too awkward. I still don't know how to modify the code. If the teacher has the source code, could you please help modify it and take a look

[d.healey]

@GUJIAN I'm not sure what to tell you, the code is there for you to modify how you like, but all the same rules apply as writing your own code from scratch. You can only assign one LAF object to a component, so you either need to remove the assignment that's in my code, or place your customisations within my LAF object.