Add dockable pane and dockable frame components

[mgarin]

Add WebDockablePane and WebDockableFrame components.

Original request:
http://weblookandfeel.com/forum/viewtopic.php?f=2&t=61

[Sciss]

Are there any specific plans? I have played around with DockingFrames; the library is quite large (?) but the framework works ok, and I think defining a custom theme that would match up with WebLaF is straight forward.

[mgarin]

I don't really want to rely on any 3rd-party library when it comes to custom components - they are always hard to style and have a lot of hidden issues you might not find at first glance. Plus I really want to have a few custom features I didn't find anywhere before (in dockable components). And I also have some base functionality ready for this component, but finishing StyleManager and related features comes first as this will affect almost everything in WebLaF - that is why it is not yet released.

[chaddaniels]

Hi, I was just wondering which release you are targeting the WebDockablePane for? Also, you mentioned that you are considering adding new features not found in other docking frameworks, so would you mind telling about those? Thanks.

[mgarin]

I plan to release WebDockablePane in v1.29 update if everything goes well.

I don't like the way some of the dockable panes work (for example the Jide one) - I'm more into the IntelliJ Idea's -like dockable pane that is a bit more static (less options where dockable frames can be placed), but clean and consistent.

I can't say for sure which features will be included into the first release, but here are some planned ones (aside of the core features every dockable pane must have):

• Frames styling
• Frames content customization
• Dockable pane buttons styling
• Proper save/restore of frame states

Probably some others I am unaware of yet.

And I'm not yet sure about how frames will be dragged/placed - this is still an open question.

So if there is something you want to see in WebDockablePane - its exactly the time to talk about it :)

[chaddaniels]

I recently switched from Netbeans to IntelliJ, and I do like both of their docking systems. I agree with your assessment that IntelliJ is more static, but that does make it easier to use (at least in the beginning) and it keeps the UI clean and consistent. I built applications on top of the Netbeans Platform for a long time, and users would always end up with these completely customized window configurations based on where they dragged things, thus making it extremely difficult for anyone else to use their setup or understand what was going on if viewing their screen. Not sure if that is a good thing (great customization) or bad thing (too cluttered and inconsistent) in the end.

The only docking feature that I find awkward to use in IntelliJ is the way the "Split Mode" feature works, or perhaps it is just the way it is named. Let me explain a bit. I started out with two left side panels, and wanted to see them both at the same time. How to do that? I thought that the logical thing to do would be to enable "split mode" on both panels. Of course, I thought wrong. The way to see two left side panels at once is to have one in "split mode", and the other not. As it turns out, the "split mode" setting separates out your panels into two distinct groups, those that have it enabled and those that don't, and you're allowed to see one from each group at a time. For the left sidebar, that setting is really a toggle between "top-left mode" and "bottom-left mode".

Anyway, I don't know if you can make the above situation any clearer in your docking framework, but it threw me for a loop so I thought it was worth mentioning.

One other thing I would like to see (and you'd probably do this without me mentioning it) is the ability to enable or disable closing, hiding, floating, moving, etc. for any given panel.

Thanks!

[mgarin]

I built applications on top of the Netbeans Platform for a long time, and users would always end up with these completely customized window configurations based on where they dragged things, thus making it extremely difficult for anyone else to use their setup or understand what was going on if viewing their screen. Not sure if that is a good thing (great customization) or bad thing (too cluttered and inconsistent) in the end.

Its not that I don't like the customize-all approach there, I don't like when there are 999 possible frame positions and you can't really drag the frame where you want easily since you need to aim "that damn 1px above the other frame" and such. And sometimes you can't even understand where you have to drag the frame to get the desired effect. This is what I don't like.

IntelliJ Idea's dockable pane is pretty customizable - you can have any frame at any position around the middle (content) area. It just doesn't have more than 8 positions for frames - top left/right, bottom left/right, left top/bottom, right top/bottom. I have worked with a lot of different apps which use some kind of docking panes (photoshop, IDEs, visual designers, mail clients etc. etc.) and I am sure that those positions are more than enough to fit almost any situation. Probably I will add a few more possible frame positions later, but not with the first release for sure.

There is also a pretty simple explanation for the cases. For example - why don't put more than two frames on the same side? - because usually there won't be enough space to see the frame content.

The only docking feature that I find awkward to use in IntelliJ is the way the "Split Mode" feature works, or perhaps it is just the way it is named.

Never used it before, I just started to drag frame buttons around and simply found that its enough to place buttons apart on the same side to get the split between two frames. But I agree that the way split can be done is not obvious at all and that this "split" feature is totally useless and confusing.

I weren't going to implement it or any other "strange" features anyway. I was talking mostly about the frames composition when refering to IntelliJ Idea.

Basically I am going to make two draggable parts: the frame itself (for example - drag it to the side of the another frame to get the split) and frame's button (same as in the IntelliJ Idea).

One other thing I would like to see (and you'd probably do this without me mentioning it) is the ability to enable or disable closing, hiding, floating, moving, etc. for any given panel.

Yes, there will be a lot of options including these.

[chaddaniels]

I agree that the 8 position approach will work for most use cases. It works for the few that I was considering. I can't wait.

[mgarin]

Yep, thats the point - I didn't actually ever see anyone using other than those 8 positions.
Anyway, I have checked a few things today and now I am sure that it will be included in v1.29 update.

Version will be released near the end of this month, though the WebDockablePane will be available approximately in the end of the next week. I am working on it right now.

[Sciss]

I like IntelliJ IDEA very much, so if the system works similar, that's probably great. Perhaps take a look at other systems to see how they designed their API. I have settled now on DockingFrames, because the API is fairly simple, and the outcome is quite ok. You distinguish between single and multiple dockable items. Perhaps an overall screen layout with the 8 positions is not a bad idea. I think it's useful to be able to 'float' any window, i.e. detach it from the docking system and be able to have it float freely around.

Also if the docking framework would be a modular component, perhaps even abstracted from the look-and-feel in the first place, that would be great. That is to say, if there was a general API which could serve also system look-and-feel if one wanted, and then have a thin layer on top that makes the best experience for WebLaF.

2c

[mgarin]

Well, API will be pretty straightforward - create WebDockablePane, add WebDockableFrames on it, use it. All settings you need will be withing those two objects and named properly. So with a help of any modern IDE you will easily find out the methods you need. Or you can just read the guide about using WebDockablePane that I will put into wiki (yeh, I am slowly filling up wiki with articles which might be useful).

And yes, you will be able to "separate" frames into a floating window. Not sure how that will look like yet, but it will probably be close to other popular implementations.

I have already mentioned that somewhere before - I will be separating all extended components into another module with later updates so there will be -core, -laf and -ext modules and similar separate binaries available. But I doubt that I will put any specific extended component into its own separate module/binary. That might be nice for perfectionists, but the -ext package will be really small on its own - about 400-500kb I guess - so there is no real point in splitting it even more.

There are also more internal changes and improvements coming to make WebLaF more agile and clean from within and remove some deprecated code from the UIs and components.

[j9hamon]

I'm really interested in this feature (and maybe some other components as they look great). I tried the example in the WebDockablePane but it seems there is no way to move the frames (or maybe I don't understand how it works).

When do you plan to release the next version of WebLaF?

[mgarin]

As soon as possible, working on the release changes right now.

WebDockablePane which was in the code so far was simply a placeholder and will have nothing common with the final dockable pane component. Its actual implementation will be available shortly before the release.

[mgarin]

Base dockable framework implementation is now available in styling branch source code.
It does not have all of the common docking features yet, but the missing ones will be added quite soon.

Snapshots with all latest changes are always available here:
http://weblookandfeel.com/downloads/styling/
https://oss.sonatype.org/content/repositories/snapshots/com/weblookandfeel/

I will also add a wiki article about docking components usage soon.

[mgarin]

I have added an introduction guide on docking framework usage on wiki:
https://github.com/mgarin/weblaf/wiki/How-to-use-WebDockablePane

[mgarin]

Dockable framework is now fully available and all features planned for v1.2.9 release are already there and you could try them out on the snapshot builds.

@chaddaniels Coming back a bit at our discussion - I have tried to implement IntelliJ Idea dockable layout at first but it was a failure in a lot of ways:

1. Due to its static nature of frame positioning I have to hardcode those positions and frames behavior which leaves no room for future improvements
2. There are indeed a few inconvenient things with that layout which you have mentioned, and me and my colleagues found those too important to ignore
3. The whole layout is good for simple cases, but terrible for some more complex cases and that will force you to use a different framework in the end

Plus some other minor code and layout -related problems I have encountered while trying to implement simple layout.

So in the end I went with a complex layout used in a lot of applications. For inspiration I used latest Visual Studio and Jide docking frameworks. Of course I tried to exclude most inconvenient features and keep everything good. There are still some minor things to be tweaked but I think it is already quite good to be worth using. We already included it in dev branches of our commercial apps and had mostly good feedback so far :)

But anyway, feel free to try it out and post your feedback and/or improvement suggestions - those are always welcome!

[mgarin]

Grouping feature will be available in the next v1.3.0 update: #397

[mgarin]

Update v1.2.9 is live and dockable framework is now officially available:
https://github.com/mgarin/weblaf/releases/tag/v1.2.9