New Java API idea: ext4j

[alien3d]

What i really compare coldfusion tag <cf></cf> and jsp tag it just make programmer more confuse more.It really easy for non programmer thought but in logic business customer always stupid so they key in that they key in this which are not suppose to.So how you want to add error handling control ?So i choose php vc tag based cause i do me all the dirty code which ignore the customer problem .Or are we going to be backbase ajax solution which make the old programmer confuse more to see more xml futuristik.Ext is good enough for me Quick Dirty Solution Javascript.

Are we going discuss this topic as religous topic.Lock it la

[XASD]

No,not HibernateStore-AstoriaStore
http://www.base4.net/Blog.aspx?ID=395,
http://blogs.msdn.com/pablo/

[XASD]

To-DavidHu
It's all about balanced declarative/imperative approach,sometimes I want treat something as data-declarative,but other time it's code-imperative.Ext style you present is imperative side,consisting of instruction sequence,which direct javascript parser/interpreter what to do.And it can't be seen as data out of javascript context.Tags add level of abstraction,but in the same time sucrifice clarity-it says,I want some kind of grid with two columns,restriction "like" etc. and it's machine readable=generateable out of javascript context.It describe end result I want,not sequence of steps to get there,so any program can analyze and predict the result to some degree.

[loukili]

In my opinion, having Jsf components warapping Ext components is very important when working in big projects. for small projects, ExtJs way is sufficient.

In the end of this month, a new OpenSource JSF component Library 'ExtJsf' will be available, it provides all ExtJs components, with Ajax/ActionListener Jsf Lifecycle capabilities and more.

You don't need to use JavaScript to update the presentation tier. When updating the server component, the API tracks this change and translates it to a Js change (CGLIB concept).

Animal, In 'ExtJsf' DataStore concept is very easy to implement, you just extend a dataReader by implementing one or two easy java methods.

Jack, talking about Client/Server Validation, when using a RegEx for an Input that RegEx must be the same at the server side. When using Jsf (Server matadata), RegEx is unique and it's used in both sides, if I change it, synchronization is implicite.

demo, Documentations and download will be communicated soon.

I hope that this work helps concerned.

[ffzhuang]

I like David's idea. Why make simple things complex. You can not really make tag as flexible as pure JavaScript. Simple and straight forward is the best, especial for big project. Struts/JSF/web work will be gone.

http://bp2.blogger.com/_gx3yNfk96Ts/...0-h/webApp.jpg

My 2 cents

Fenqiang Zhuang

[loukili]

I like David's idea. Why make simple things complex. You can not really make tag as flexible as pure JavaScript. Simple and straight forward is the best, especial for big project. Struts/JSF/web work will be gone.

http://bp2.blogger.com/_gx3yNfk96Ts/...0-h/webApp.jpg

My 2 cents

Fenqiang Zhuang

"You can not really make tag as flexible as pure JavaScript"
but javascript still accessible !!! you can declare the component and add what you want in javascript.
"Why make simple things complex". Componentization, reduces Markup/Js code to 50% beacause there is no need of coding 'markup and Js", "team knowledge in only three days imagine".

I'll not going to talk about having a controller or Jsf Lifecycle benefits. In my opinion, the goal of such api (ExtJs), is to converge to win32 model and after to be open for other target machines. With Jsf Component Model (near to win32 model), we are in the right road.
This is why more that 50 big companies like IBM, Sun and Oracle invest a lot on that concept (JSF-AJAX-SOA).

[cilquirm]

I agree with David. Why try to write an app in a tag language? You end up with something very cumbersome and difficult to maintain. Why write the UI in Java at all when JavaScript can be so much faster to develop with?

Not all of us are quite the JS gods that you and some others on here are.


I am definitely interested in tags. I've tried to start one myself, as a Struts2 plugin, based on the work of the YUI plugin and the dojo plugin, but I'm too lazy to go anywhere with it.

If you're looking for a good svn, your best bet is probably google-code. It seems like a lot of new projects are heading there. It's far faster than SourceForge or dev.java.net, and it's got a nice set of functionality.

[Ronaldo]

Hi all,

I've quickly scanned all replies here, and I just wanted to say that we should not start a discussion about if is better or not to use a taglib to create extjs javascript code. Some like it, some don't.
So, if you think you're better off writing all the javascript code yourself, well, that's fine with me. (I'm sure that reading through the lines shows I'm in favor of a taglib?)

And the reason is that I'll be using these tags for my code generator, which now only misses a decent (generated) gui, but is already capable of generating jsp pages with custom tags. And I'd love to use extjs for the gui.

This very next week, starting with tomorrow, I had planned to start creating a jsp taglib for extjs. So, if I can lean a helping hand, I will. (I'd love to start using spring/hibernate/jsf, but I still have to start learning jsf, so for the very near future, I will use jsp.) I need a grid tag and the form tag this week, so if no one has finished one yet, I'll create one. Otherwise, I'd like to join/help/extend/test.

Ronald

[Animal]

A tag library is just so practical for large apps.

I think most web apps currently are 5 to 10 pages. A banking "application" for example.

Or legacy app has maybe 500 screens.

Our programmers are not javascript experts.

I will be completing a tag library specifically designed for our app which simplifies the code-monkey's task considerably.

No need to write the same, repetetive Javascript over and over again for each form with complex UI widgets on.

Example, one small page is "activated" by this javascript:

<div id="AspicioPage1184574723203" >
<script type="text/javascript">
var cp=AW.ComponentPanel.getParentPanel("AspicioPage1184574723203");
cp.setComponent(37);
cp.setTitle('Contact Maintenance');
cp.setEntityType('ContactDetails');
cp.setParentEntityType('ContactDetails');
cp.hasPopupSubcomponents=false;
cp.hasTabSubcomponents=false;
function activatePage() {
var fields=[
function(){
var b=Ext.get('AspicioForm1184574723218FilterField0FindButton');
var f=new Ext.form.TextField({	id:'AspicioForm1184574723218FilterField0',
	name:'jobTitle',
	helpKey:'ContactDetails.jobTitle',
	allowBlank:false,
validatorMask:/[A-Za-z0-9]{1,50}/,value:'Geek'}).applyTo('AspicioForm1184574723218FilterField0');
b.on('click', function(){cp.supercomponent.searchOnFieldValue('AspicioForm1184574723218FilterField0'
);})
f.on({});
return f;}(),
function(){var f=new fcl.widget.KeyField({	id:'AspicioForm1184574723218KeyField1',
	name:'person',
	helpKey:'ContactDetails.person',
	allowBlank:false,
entityName:'Person',
componentId:50,
propertyName:'person',
allowMaintenance:true
}).applyTo('AspicioForm1184574723218KeyField1.knownAs');
f.on({});
return f;}(),
function(){
var store=new Ext.data.SimpleStore({
	fields:['id','description'],
	data:[]
});
var f = fcl.widget.KeyList.KeyListAspicioForm1184574723218KeyList2=new cl.widget.KeyList('AspicioForm1184574723218KeyList2InputField'
,{
	store: store,
	entityName:'GeneralAnalysis',
	propertyName:'generalAnalysis',
	displayField:'description',
	drillButton:'AspicioForm1184574723218KeyList2DrillButton',
	hiddenInputContainer:'AspicioForm1184574723218KeyList2KeyListValues',
	allowMaintenance:true,
	typeAhead: true,
	mode:'local',
	triggerAction: 'all',
	emptyText:'Select...',
	selectOnFocus:true,
	filters:'5 in elements(_this.entityControl)'
});
f.on({});
return f}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField3',
	name:'phoneNo',
	helpKey:'ContactDetails.phoneNo',
validatorMask:/[0-9 ]{1,20}/,value:''}).applyTo('AspicioForm1184574723218TextField3');
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField4',
	name:'phoneExt',
	helpKey:'ContactDetails.phoneExt',
validatorMask:/[0-9 ]{1,5}/,value:''}).applyTo('AspicioForm1184574723218TextField4');
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField5',
	name:'faxNo',
	helpKey:'ContactDetails.faxNo',
validatorMask:/[0-9 ]{1,20}/,value:''}).applyTo('AspicioForm1184574723218TextField5');
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField6',
	name:'mobileNo',
	helpKey:'ContactDetails.mobileNo',
validatorMask:/[0-9 ]{1,20}/,value:''}).applyTo('AspicioForm1184574723218TextField6');
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField7',
	name:'emailBox',
	helpKey:'ContactDetails.emailBox',value:'nigelw'}).applyTo('AspicioForm1184574723218TextField7');
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField8',
	name:'emailDomain',
	helpKey:'ContactDetails.emailDomain',
validatorMask:/[A-Za-z0-9\.\-]{1,50}/,value:'forwardcomputers.co.uk'}).applyTo('AspicioForm1184574723218TextField8'
);
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField9',
	name:'altEmailBox',
	helpKey:'ContactDetails.altEmailBox',value:''}).applyTo('AspicioForm1184574723218TextField9');
f.on({});
return f;}(),
function(){var f=new Ext.form.TextField({	id:'AspicioForm1184574723218TextField10',
	name:'altEmailDomain',
	helpKey:'ContactDetails.altEmailDomain',
validatorMask:/[A-Za-z0-9\.\-]{1,50}/,value:''}).applyTo('AspicioForm1184574723218TextField10');
f.on({});
return f;}()];
var form=new Ext.form.BasicForm('AspicioForm1184574723218',{
	id:'AspicioForm1184574723218',
	url:'/aspicio/MaintainEntity.do',
	method:'POST'
});
Ext.ComponentMgr.register(form);
form.add.apply(form, fields);
form.on('beforeAction',function(f,a){
	if((a.type == 'submit') && !f.areFieldsValid()){
		aspicio.util.displayMessage('Some fields are invalid or incomplete and must be corrected before you
 can save any changes.', aspicio.util.ERROR);
		f.highlightInvalid();
		return false;
	}});
Ext.get('AspicioForm1184574723218').on('submit',function(e){
	e.stopEvent();
	this.submit();
},form);
}
activatePage.call(cp);
cp.setSubcomponents([]);

But the JSP is this simple:

<aspicio:page>
<aspicio:form method="post" id="contactdetailsForm" action="/MaintainEntity.do">
<input type="hidden" name="formUserAction" value='<%=isNew ? "create" : "update" %>'></input>
<input type="hidden" name="formEntityType" value="ContactDetails"/>
<input type="hidden" name="id" value="<%=entity.getId()%>"/>
<input type="hidden" name="version" value="<%=entity.getVersion()%>"/>
	<aspicio:fieldset labelWidth="150" legend="Primary data">
		<aspicio:filterfield listId="<%=listManagerId%>" entity="<%=entity%>" property="jobTitle"/>
		<aspicio:keyfield entity="<%=entity%>" property="person"/>
		<aspicio:keylist entity="<%=entity%>" property="generalAnalysis"/>
		<aspicio:textfield entity="<%=entity%>" property="phoneNo"/>
		<aspicio:textfield entity="<%=entity%>" property="phoneExt"/>
		<aspicio:textfield entity="<%=entity%>" property="faxNo"/>
		<aspicio:textfield entity="<%=entity%>" property="mobileNo"/>
		<aspicio:textfield entity="<%=entity%>" property="emailBox"/>
		<aspicio:textfield entity="<%=entity%>" property="emailDomain"/>
		<aspicio:textfield entity="<%=entity%>" property="altEmailBox"/>
		<aspicio:textfield entity="<%=entity%>" property="altEmailDomain"/>
	</aspicio:fieldset>
</aspicio:form>
</aspicio:page>

All the knowledge about the complexities is encapsulated in the tag handling system. All input field tags declare themselves to the form tag which generates its own initialization script.

All scripts necessary for the functioning of any widgets that any of the tags need are requested from the <page> tag which buffers up all output and creates the page with correct script in the correct place.

[mglaser]

I've been working with Dojo over the last few months but have started porting code to Ext because of the grid control and I kind of like the 'code-behind' style of javascript that goes with it - the Ext coding style is well thought out.

I was just thinking this tag approach is what Dojo uses - you can instantiate a control and set event handlers and properties in the HTML tag that represents a control, as well as create controls in pure JS code.

Maybe a similar client side tag parser could be adapted for XHTML/MXML and optionally included to provide this functionality to the projects that need them?