html还原ui,HtmlUIForTemplates

To register your HTML based wizard with your template, use @TemplateRegistration annotation and provide reference to your HTML page:

public class X {

@TemplateRegistration(

page = "cz/xelfi/test/x.html",

scriptEngine = "freemarker",

displayName = "JS Wizard",

folder = "Other",

content = "x.fmk"

)

public static String jsWizard() {

return "init();";

}

}

the return value of the annotated method should of type String and its content should be snippet of JavaScript code to execute inside of your specified HTML page (e.g. x.html) to create an instance of KnockoutJS model to drive the wizard. Here is the sample of the model:

function init() {

var ok = ko.observable(false);

var msg = ko.observable('');

var current = ko.observable('Init');

var data = {

'errorCode': ko.computed(function() {

if ('Init' == current()) return 0;

if (!ok()) return 1;

if (msg()) return 0;

return 2;

}),

'steps': ko.observableArray([ 'Init', 'Info', 'Summary']),

'current': current,

'ok': ok,

'msg' : msg

}

return data;

}

it defines wizard composed of three panels (observable steps) and a verification function (registered as errorCode) to check if everything is OK. In addition to that it defines proprietary text value msg which is going to be filled by the wizard and cannot be empty.

Each page of the wizard is registered as a KnockoutJS template named according to the name of the specified step. A dummy initial page:

This is Initial Page

JavaScript will ask you few questions about your mood.

an interactive page with checkbox and an input field:

This is Query Page

Is everything OK?

How do you feel?

and a simple summary page showing the specified values:

This is Summary Page

You are feeling !

The Next/Finish buttons can be controlled by the errorCode property. If it is non-zero, there is an error and these buttons are disabled. Also once can use that inside of the HTML page to display user related errors:

Please check you are OK!

Tell us how do you feel!

The L10N of the wizard is done on the level of HTML pages. The whole page gets translated into different language with appropriate suffix x_cs.html and it is then selected instead of the default one, when user runs in such locale.

When the wizard is successfully finished, all the values specified in the model are transfered to the templating engine, so they can influence the content of created files. Here is a sample x.fmt content which reuses the msg value provided by the wizard:

Hi,

I am Freemarker.

I feel ${wizard.msg}.

System of this kind is portable between existing NetBeans infrastructure (see branch WizardFor247926 in ergonomics repository) as well as demo of embedding the same wizard into browser (see on-line demo).