First, thanks for the prompt response.
Okay, so I am struggling with writing a menu component. I saw the
Suckerfish menu example and tried to adapt that towards my needs. I
want my fellow developers to be able to write something like:
MyMenu topMenu = new MyMenu("topMenu");
MyMenu subMenu1 = new SubMenu("subMenu1", "Here is a submenu");
MyMenu subMenu2 = new SubMenu2("subMenu2", "Here is another submenu");
subMenu1.addMenuItem(new BookmarkableLink(LINK_ID, SomePage.class),
"Some Page");
subMenu2.addMenuItem(new BookmarkableLink(LINK_ID,
SomeOtherPage.class), "Some Other Page");
submenu1.addMenuItem(new MyMenuSeparator());
subMenu1.addMenuItem(new Link(LINK_ID) {
public void onClick() {
//do something
}
}, "An action");
subMenu1.addMenuItem(new MyClientSideAction("Do Local Work", "some
javascript code or the name of a client side function to invoke or
something"));
subMenu2.addMenuItem(new Link(LINK_ID) {
public void onClick() {
//do something else
}
}, "Another action");
subMenu2.addMenuItem(new MyClientSideAction("Other Local Work", "some
javascript code or the name of a client side function to invoke or
something"));
Which would then generate Ext code. Either as one large block using
the Ext JSON config objects (if you've ever seen Ext code you know
what I mean), or generating a series of smaller scriptlets each
generating the indiidual item needed and adding by name to the
component that is it's parent.
The former might look like this ("m just typing this now so forgive
any typoes).
Ext.onReady(function() {
//some code to make parent components not shown until we get to it's
items array which might look like:
items: [{
xtype: 'menu',
items: [{
xtype: 'menu',
text: 'Here is a submenu',
items: [{
xtype: 'menuitem',
text: 'Some Page',
handler: { //some magic code that somehow gets the wicket link
to forward to Some Page }
}, {
xtype: 'separator'
}, {
xtype: 'menuitem',
text: 'An Action',
handler: { //some magic code that somehow invokes the onClick
method on the server in the right link }
}, {
xtype: 'menuitem',
text: 'Do Local Work',
handler: { //the code or function provided }
}] //end first submenu's items
}, {
xtype: 'menu',
text: 'Here is another submenu',
items: [{
xtype: 'menuitem',
text: 'Some Other Page',
handler: { //some magic code that somehow gets the wicket link
to forward to Some Other Page }
}, {
xtype: 'menuitem',
text: 'Another Action',
handler: { //some magic code that somehow invokes the onClick
method on the server in the right link }
}, {
xtype: 'menuitem',
text: 'Other Local Work',
handler: { //the code or function provided }
}] //end secondsubmenu's items
}] //end topMenu's items
}] //end the parent object (whatever that is) items
});
the second proposal might have independent script tags at each
wicket:id tag, replacing the element with a script tag that gets the
parent (as detected by the parent hierarchy in wicket) and adds the
component to it's parent. Because Ext stores each function and
executes it in order, it should have the same effect as above, but
allow the component to be more independent. It only needs to detect
it's parent. I like this style better, but I have less idea how to
implement it through wicket. How can I override what wicket writes
for it's body?
So I would end up with many small block like the following throughout
my rendered markup.
<SCRIPT>
Ext.onReady(function(){
var parent = Ext.getCmp("myParent");
parent.add(Ext.create("whatever we are creating", {
//the config parms
});
});
</SCRIPT>
Since I don't know how to do that, I have been writing towards the
first example. the result of my stumblings is a set of components
that all implement an interface that asks for the snippet of the first
example that represents their contribution, and then adds it as a
header contribution to the page. Links are resolved by css styling
the markup wicket generates as display:none, and then using javascript
to pick up the link and text of the menu item to add after render.
But this solution feels 'hacky' and inelegant. It feels like I am
sneaking around the framework, not USING the framework.
As to jQuery. I know zilch about jQuery. Because I also am just
learning wicket, I am leery of getting 'sucked into the rabbit hole'
on reading and learning how another library was implemented and then
finding out that it doesn't apply. But if you think it applies, I can
give it a shot. Is there a particular implementation that you think
is good to review?
Again, thanks for responding quickly, Ernesto. It's appreciated.
Brian Mulholland
On Mon, Oct 24, 2011 at 9:04 AM, Ernesto Reinaldo Barreiro
<reier...@gmail.com> wrote:
> Brian,
>
> Why don´t you look at how things have been implemented for other
> libraries (e.g. jquery UI). Can you give a concrete example of
> component you want to integrate that is giving you problems?
>
>
>> And the strict Wicket component to markup structure is frustrating
>> because ExtJS 4 builds components solely through javascript. It feels
>> like Wicket is fighting me every step of the way, and that screams to
>> me that I am misusing the tool.
>
> So do many jQuery based components and they can still be integrated with
> wicket.
>
> Regards,
>
> Ernesto
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
