JxLib 3.1 beta 1

[Jon Bomgardner]

List,

The new JxLib 3.1 beta 1 is now ready for testing. You can either clone the githb repo and checkout the tag 3.1b1 or you can download a full build from the github downloads section. Also, the website now has reference material available for both 3.0 and 3.1b1. When you click on examples or api you'll go to page that gives you a choice of what version you want to view.

This version features:

• Mootools-core and -more compatability with 1.4.1 (and 1.3.2)
• New Widgets:
• Jx.Editor - A rather simple WYSIWYG editor based on mooeditable in the JxLib style using a plethora of plugins.
• Jx.Field.Editor - A Jx.Field wrapper around Jx.Editor.
• Jx.Panel.Form - A Jx.Panel that can configure and instantiate a Jx.Form, associated validators and error display (via a plugin) that is done via JSON configuration.
• A re-written Jx.Tree (and associated classes) - rewritten to take advantage of mootools support for event delegation as well as a plugin that alows drag-and-drop reordering of tree siblings.
• A bunch of other fixes and improvements

if you find any issues please log them in Lighthouse (http://jxlib.lighthouseapp.com/projects/71243-jxlib/overview). Hopefully we'll be able to release the final around the end of the month.

Thanks,

Jon

 

[aek]

Is there any chance to include any of this in the next release:
this are classes that I develop and their code is on this group
TreeCombo
ComboBox
DatePicker, MonthPicker and Date Field
?

I cannot upload to a github repo but I can create gist with this.

[Jon Bomgardner]

aek,

Post links to the gists and I'll see what I can do. No guarantees though I'll do my best.

Thanks,

Jon

[aek]

Jx.DatePicker.js can be found here:
https://gist.github.com/1227018

Jx.MonthPicker.js can be found here:
https://gist.github.com/1227028

Jx.Field.Date.js can be found here:
https://gist.github.com/1227036

CSS classes created to correctly display the Calendar widgets can be
found here:
https://gist.github.com/1227099

Jx.Field.TreeCombo.js and Jx.Field.ComboBox.js can be found here:
https://gist.github.com/1352416

Jx.Field.Spinner.js can be found here:
https://gist.github.com/1352469
Jx.Field.Spinner can be used as base class for widgets like
Jx.Field.Number

I think that those widgets can be added to the core library so many
more users can contribute to making those better, but as an initial
solution they would be ok

[Jon Bomgardner]

aek,

 

Thanks for getting the links up. I'll get them in as soon as I can take a good look at them.

 

For the record though, I will put the date/month stuff in but I kinda had an idea for an implementation of my own that would include a completely stand-alone calendar component that could be used both in pickers like yours and by itself. It's a ways from reality at the moment so yours will definitely go in so we have something that offers that functionality now but they're likely to change at some point.

 

Just wanted you to know. Thanks for all of the work and contributions.

 

Jon.

[aek]

I began this evening to review a little the code of the Jx.Grid and
the classes around in the jxlib-3.1b1.
I notice a few things that I want to share:
1- In the init of the Jx.Grid class there is a change in the store
configuration option name, now it's called model and is used as
grid.model in Jx.Row.getRowHeader. I think that if the store of the
grid it's now called model it make sense that should be assigned to a
property model of the grid instead of store with all the changes that
this may involve.
2- Jx.Columns can be renamed to be Jx.Grid.ColumnModel or
Jx.ColumnModel because can be confused with Jx.Column and like a
comment in the code said: "Think of it as a model for columns". The
property and the option columns of the Jx.Grid can be renamed to be
columnModel
3- Jx.Row can be renamed to be Jx.Grid.RowModel or Jx.RowModel to be
consistent with the previous rename of the Jx.Columns. The property
and the option row of the Jx.Grid can be renamed to be rowModel.
4- property columns of Jx.Store and Jx.Record can be renamed to fields
because it make more sense and looks more natural to developers who
came from others UI toolkits.

I think that the Jx.Grid has a bug around how get the data displayed
from the store. I notice this bug in the use that I made of the
Jx.Grid. The bug is that I get more columns displayed than those
defined in the columns options of the grid because it use the columns
defined in the store where I have defined more than those defined to
be displayed on the grid. I will digg about this in the code and I
going to try to get here with a solution but this is happening since I
began to use JxLib.

[Jon Bomgardner]

aek,

Thanks for the comments. You make some good points. As for the display, I dug around a bit and it's happening because we create default columns for anything that doesn't get passed explicitly (though I'm not really sure why... Paul would have to comment on that since he rewrote most of the grid code). We could probably solve this by setting those columns to not display somehow - I'll look into it.

Could you post these issues into the lighthouse tracker? The tracker is at http://jxlib.lighthouseapp.com/projects/71243-jxlib/tickets

Thanks,
Jon

[Jon Bomgardner]

aek,

 

I have most of this ready to go but had a question on the TreeCombo. Did you intend this to be able to select folders as well as items? With the new tree code I find that it's pretty hard to do both when the folders start out closed. Clicking on a folder not only opens it but selects it which immediately closes the flyout. I need to know which behavior you would prefer:

 

1) All folders open to start and are selectable

 

2) Folders start collapsed, can not be selected, but can be toggled open and closed.

 

3) Clicking on the +/- sign toggles the folder open/closed but clicking on any other part of the folder selects it and closes the flyout.

 

Which would you prefer?

 

Also, once I get the date pickers into the master repo you will need to look at it and sort some things out for me. I can get it to work but the buttons seem to appear in the wrong places. I'll let you know when it's there and you can look at it and tell me what I botched....

 

Thanks,

Jon

[Jon Bomgardner]

aek,

so, I just merged your new components into the master. I believe everything is working (I choose option 3 for the treecombo). I also got the Field.Date picker straightened out as best I can for now (there's only one small glitch). I intend on getting a beta 2 version out by the end of the week which will include these changes.

if you have any questions, let me know.

Thanks,

Jon

[aek]

The folders (must) can be selected as in the combo. I like the option 3 because is more general, +/- items are there to open/close the folders and clicking on the icon or text node can be used to select the node for the combo.

[aek]

I dont't know what is the glitch that you see, In my previous test there is one associated with the icon of the input used in the component template and a property 'type' of Class definition. This apply to the Jx.field.ComboBox and Jx.field.Date, it's ok in the Jx.field.TreeCombo.

the solution is:

in the template option:

<input type="text" class="jxInputText" name="{name}">

should be replaced with:

<input type="text" class="jxInputText" name="{name}">

in the Class definition:

type: 'Combo'

should be replaced with:

type: 'Text'

and remove any reference to icon of the Combo in the Class Definition because this Combos aren't icon based.

[Jon Bomgardner]

aek,

 

The problem I referenced was actually in the placement of the MonthPicker when activated from the DatePicker in the Field. It seems to be offset by 5px vertically and horizontally. I'm not 100% sure what's causing it but will hopefully get a chance to look at it soon.

 

Thanks,

Jon

[aek]

I got the solution, I raise into this before, that's why there is a div with monthPickerFly class in the template of Jx.DatePicker.

You have a small change in the final version of the Jx.DatePicker in the positionElement option of the flyout that contains the Jx.MonthPicker with this.domObj, the original value is self.monthPickerFly to correct this issue (this.monthPickerFly works too).

It's a little hack but works.

[Jon Bomgardner]

I had that in there originally but it exhibited the same problem....

[aek]

but you have differents height values than original try applying a negative marging to the monthPickerFly div

[Jon Bomgardner]

right, the different heights/widths were to help remove the scrollbars that were appearing and to make the whole thing appear nicely in the flyout viewport. I'll take a stab at the negative margin idea when I have time (hopefully this evening).

Jon