Skip to content

[howto] change resource references

Sebastien Briquet edited this page May 3, 2016 · 2 revisions

About Wicket tags stripping

If you are not using default themes (supplied through wicket-jquery-ui-theme-xxx or wicket-kendo-ui-theme-xxx), you need to strip Wicket tags to prevent some widget misbehaviors

public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();

		this.getMarkupSettings().setStripWicketTags(true);
	}
}

Customize jQuery UI Resource(s)

Get your custom theme at http://jqueryui.com/themeroller
You can either customize resources using HTML or Java/Wicket

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
	<head>
	    <!-- jQuery UI -->
	    <link rel="stylesheet" type="text/css" href="styles/jquery-ui.custom.min.css" />
	</head>
	<body>
	</body>
</html>	
public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();

		JQueryUILibrarySettings settings = JQueryUILibrarySettings.get();
		settings.setJavaScriptReference(new JQueryPluginResourceReference(...)); // if you want to change the js version	
		settings.setStyleSheetReference(new CssResourceReference(MyApplication.class, "jquery-ui.custom.min.css"));
	}
}

Customize Kendo UI Resource(s)

Get your custom theme at http://demos.telerik.com/kendo-ui/themebuilder
You can either customize resources using HTML or Java/Wicket

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
	<head>
	    <!-- Kendo UI -->
	    <link rel="stylesheet" type="text/css" href="styles/kendo.common.min.css" media="all" />
	    <link rel="stylesheet" type="text/css" href="styles/kendo.custom.min.css" media="all" />
	</head>
	<body>
	</body>
</html>	
public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();
		
		/* ... */

		KendoUILibrarySettings settings = KendoUILibrarySettings.get();
		settings.setJavaScriptReference(new JQueryPluginResourceReference(...)); // if you want to change the js version
		settings.setCommonStyleSheetReference(new CssResourceReference(MyApplication.class, "kendo.common.min.css"));
		settings.setThemeStyleSheetReference(new CssResourceReference(MyApplication.class, "kendo.custom.min.css"));
	}
}

Customize Kendo UI Console Resource(s)

public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();

		/* ... */

		ConsoleLibrarySettings settings = ConsoleLibrarySettings.get();
		settings.setStyleSheetReference(new CssResourceReference(...));
		settings.setJavaScriptReference(new JQueryPluginResourceReference(...));	
	}
}

Customize Calendar Resource(s)

If you wish to use jQuery UI themes within FullCalendar, either add a Wicket jQuery UI component in you page (it will add the stylesheet for you), or add the theme explicitly:

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
	<head>
	    <!-- jQuery UI -->
	    <link rel="stylesheet" type="text/css" href="styles/jquery-ui.min.css" />
	</head>
	<body>
	</body>
</html>	

If you wish to use custom implementation/fork of FullCalendar, you can customize resources like this:

public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();
		
		/* ... */

		CalendarLibrarySettings settings = CalendarLibrarySettings.get();
		settings.setStyleSheetReference(new CssResourceReference(...));
 		settings.setJavaScriptReference(new JQueryPluginResourceReference(...));
		settings.setGCalJavaScriptReference(new JQueryPluginResourceReference(...));
	}
}

Customize jQuery Emoticons Plugin Resource(s)

public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();

		/* ... */

		EmoticonsLibrarySettings settings = EmoticonsLibrarySettings.get();
		settings.setStyleSheetReference(new CssResourceReference(...));
		settings.setJavaScriptReference(new JQueryPluginResourceReference(...));	
	}
}

Customize jQuery FixedHeaderTable Plugin Resource(s)

public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();

		/* ... */

		FixedHeaderTableLibrarySettings settings = FixedHeaderTableLibrarySettings.get();
		settings.setStyleSheetReference(new CssResourceReference(...));
		settings.setJavaScriptReference(new JQueryPluginResourceReference(...));	
	}
}

Customize jQuery SuperFish Plugin Resource(s)

public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();

		/* ... */

		SuperfishLibrarySettings settings = SuperfishLibrarySettings.get();
		settings.setStyleSheetReference(new CssResourceReference(...));
		settings.setVerticalStyleSheetReference(new CssResourceReference(...));
	}
}

Customize jQuery Globalize Resource

public class MyApplication extends WebApplication
{
	public void init()
	{
		super.init();

		JQueryLibrarySettings settings = new JQueryLibrarySettings();
		settings.setJQueryGlobalizeReference(new JQueryPluginResourceReference(/* ... */));

		this.setJavaScriptLibrarySettings(settings);
	}
}