Completely change the appearance

Byte-Welt - Projekte / Projects DockingFrames
1

Hello!

What should I do to change the appearance of the fully dockable? title bar, buttons, tabs, dockables containers…

Where do I start?

Thanks!

2

some properties you cat see on docking-frames-demo-size-and-color.jar example.

3

Answering such a question is always hard, I could provide more help if I knew what exactly you want to do. But in general the framework is quite open to modifications.

In order to start thinking about customization:

  • The example of oshmianski is certainly a nice start.
  • The tutorials-application has some more nice examples.
  • The two guides (the large PDF files) explain some general concepts.
  • Looking at a DockTheme might give some inspirations.

In general classes which you might find interesting are:

  • The ThemeManager (DockController.getThemeManager) offers a lot of points where you can replace the factories that usually create UI elements.
  • The DockProperties (DockController.getProperties) allow access to settings that are used through the framework.
  • The DockTitleManager handles the factories for titles.
  • The Color-/FontManager handles colors and fonts (they wrap around a HashMap)
  • The ActionViewConverter generates the buttons.
4

Ok, I have not explained very well :). more details …

I’ve been reading the documentation (PDF), but I do not know what to do to get a look like attached image.

I know I should inherit from BasicTheme, but, which should I create classes?. I have no problems with Java2D, but do not know where I put the code to paint me as the components in the image.

As can be seen when one looks only dockable, this appears as a tab (as EclipseTheme). How do I get this on my new theme?

Thanks!

5

One step at a time :wink: From the look of your mockup functionality won’t be much of an issue. I don’t know if my answer is going to help you, but these are the steps I would suggest to start with. I fear this includes more than one day of work… I can write more to these steps, but let me first know what you actually do not understand. Or what you are missing.

A new theme is best implemented using the API of the Core project only, adjustements to work together with the API of the Common project can be done later. If you have a look at a class like „CEclipseTheme“ you’ll notice that themes can be easily modified to be useful in the Common project.

Needles to say, in the end your application should use the API of the Common project, as all the real goodies are implemented in Common.

As the framework includes some themes, its code is already optimized such that a new theme only has to define code to paint stuff. If you are thinking things like „do I need to implement drag and drop“ or „how do I define all tabs being on one line“, then you are probably thinking too much :wink:

  1. Subclassing BasicTheme is a good start, it offers several „set…“ methods we can use.

  2. The Component that paints all the tabs is a „StackDockComponent“, StackDockComponent is a rather simplistic interface, and the framework includes an abstract implementation „CombinedStackDockComponent“. If you create a subclass of „CombinedStackDockComponent“ you will be forced to implement methods like „newTab“ or „newMenu“. I suggest to have a look at the existing implementations, especially the „FlatTabPane“ as it is probably the implementation with the least code.

2.1 For the tabs: Tabs are just Components, it is up to you how to fill them. But using an „OrientedLabel“ to paint icon and text, a „ButtonPanel“ offering space for the „close button“, and a „TabComponentLayoutManager“ placing the labels and buttons, is a good idea. Again, have a look at „FlatTab“, it uses all of this stuff.

2.2 Do not care about a close button when implementing a tab, it will appear on the „ButtonPanel“ once everything is configured the right way. In the method FlatTab.setController you can see how the „tab relevant buttons“ of a Dockable are forwarded to the „ButtonPanel“.

2.3 There needs to be some place beside the tabs where buttons can appear. Make a subclass of „DockActionCombinedInfoComponent“, or just copy „FlatInfoComponent“. Install your „info component“ like it is done in the constructor of „FlatTabPane“. The configuration of the framework should make things appear on that „info component“ automatically.

  1. Install your new StackDockComponent in your new theme using code like in the constructor of FlatTheme (calling „BasicTheme.setStackDockComponentFactory“)

  2. To define the layout of the tabs (in this case: all in one row), you need to call the piece of code below in the „install“ method of your custom theme.
    controller.getProperties().set( TabPane.LAYOUT_MANAGER, new MenuLineLayout(), Priority.THEME );

  3. To tell the framework that all Dockables should have a tab, call
    controller.getProperties().set( SingleTabDecider.SINGLE_TAB_DECIDER, SingleTabDecider.ALWAYS, Priority.THEME );

Hm, what else. You do not want titles, because you have tabs.

  1. Create a new „NullTitleFactory“ (a factory that does not create titles) and install it in the „install“ method of your custom theme:

titleManager.registerTheme( SplitDockStation.TITLE_ID, factory );
titleManager.registerTheme( FlapDockStation.WINDOW_TITLE_ID, factory );
titleManager.registerTheme( ScreenDockStation.TITLE_ID, factory );
titleManager.registerTheme( StackDockStation.TITLE_ID, factory );```

Finally the borders around a Dockable: you need to know, a Dockable is just a Component without any decorations. Borders, titles, tabs, etc... all are created and shown by classes to which the Dockable has no access. The border around a Dockable is painted by a "DockableDisplayer".

7. Have a look at the "FlatDisplayerFactory", I guess you can just reuse it without modifications. Use its constructor with the "border" argument set to "false", call "BasicTheme.setDisplayerFactory" to install it in the constructor of your custom theme. Once again, have a look of how the FlatTheme does it.

Replacing buttons...

8. Buttons are Components. The framework uses factories called "ViewGenerator" to generate buttons, each button gets a "DockAction" and has to show the title, icon, etc... of that action. Have a look at the "BubbleTheme", it contains several inner classes that are "ViewGenerators". Buttons can make use of a class called "BasicButtonModel", which takes care of all the fun stuff like changing the icon because the mouse hovers over the button. Implementations like "RoundButton" should give you an impression of what a button needs to do.
6

Ohhh Yeah!

Incredible response ;). I’ll get to work on the following days, with the information you have given me.

I hope I’ve Understood it.

Thanks!!!