Last modified 16 years ago
Last modified on 08/07/09 15:42:48
Analysis
Overview
The goal of this revision of the task is to create a more beautiful mydoggy interface for every skin of Sophie2.
Task requirements
- Provide a way to define skin parts for mydoggy. Currently there is no such mechanism. The skinning of the layout is provided by the base layout library with titles and tool-tips. The visual part that is mydoggy, should also be skinnable. This means that every layout component that provides a tool window manager should become a BaseVisualElement and define a skin part.
- Mydoggy skin parts for every skin should be themselves included in the skin.
- For some parts of mydoggy a custom UI should be provided. This is needed because mydoggy overrides the look and feel UIs that are provided by default.
- Provide icons for the title bar of every tool window. Icons for flaps are slightly different from icons for inner tool window managers.
- Provide colors for other parts of mydoggy.
- Create a mechanism for auto updating of all mydoggy skin things.
Task result
- Source code.
Implementation idea
- See the already added updateUI() method of MDManageable where the UI is updated upon skin changing.
- Change the super class of some of the layout components to BaseVisualElement and provide a method:
@SkinPartDef private static void defineSkin(ElementSkinPart part) { //fill in skin part. } - Add an ID for the skin called "mydoggy-properties" that contains mydoggy customizations.
- For UI classes no idea yet.
Related
BASE_LAYOUT_R0
APP_LAYOUT_MYDOGGY_R0
APP_LAYOUT_MYDOGGY_R1
GROUP_BASE_SKINS_R0
How to demo
- Run sophie and change the skin from the skin menu.
- Mydoggy should change its appearance depending on the skin chosen.
Design
- In order to define skinning for mydoggy, every MD component that has a tool window manager should become a BaseVisualElement and fill in skin parts using:
@SkinPartDef private static void defineSkin(ElementSkinPart part) { //fill in skin part. } - These components are the components that implement MDManageable.
- A class that sets up mydoggy skinning and updates mydoggy upon skin changing will be created. It will be named MDSkinUpdater.
- For current revision we should change the icons, title bars and tabs of mydoggy.
- Icons will be setted up inside the MDSkinUpdater by putting a new icon (replacing the old one) in the resource manager of every tool window manager.
- For title bars and tabs we should define custom UI classes. After a serious research it turned out that the classes we need to extend are:
- ToolWindowTitleBarUI - for every title bar of a tool window in mydoggy.
- ToolWindowRepresentativeAnchorUI - for the tab button of a tool window in mydoggy.
- The new classes will be SophieTitleBarUI for the title bars and SophieTabButtonUI for the tabs. These two will provide same functionality as their super classes and will extend it by providing the opportunity to draw images for title bars and tabs.
- We need to specify a way to map mydoggy resources for its customizing to string ids for the skin - colors and images for icons, tab buttons and title bars. In order to do so there will be e package named constants placed - "org.sophie2.main.layout.mydoggy". It will contain an interface named MDSkinDefID having a single method getSkinID(). See the javadoc for more info. A several enums will be used for every part of mydoggy customization:
- MDButtonIconID
- MDColorID
- MDTabButtonImageID
- MDTitleBarImageID
- Every enum constant from above will contain the skin id needed.
- How things work
- Hopefully most of the md components have alike skinning. Only flaps are different from the rest of the layout components. This means that defining skin parts will be done for the MDMainWindow and the MDCompoundLayoutElement. All their descendants will have equal skinning.
- The MDSkinUpdater will do all the work. There should be an auto property defining whether this is a colored or imaged skin. Colored skins will be the default one and the alternative. Sophie2 skin however will use images to customize mydoggy. A resource property will set mydoggy the custom sophie UIs. Every UI will take as an argument the MDSkinUpdater in order to acquire the images if current skin contains mydoggy images (see SophieTitleBarUI and SophieTabButtonUI for more info). Images are auto computed upon skin updating inside the MDSkinUpdater. We will take advantage of the update() method of the UIs defined, which will be invoked automtically by swing. This way images or colors will be set properly. Icons of the button located on the title bar of md components will be put directly in the resource manager. Their updating is forced.
- In order to define a the resources modify SkinDefIds so that icons are loaded.
- Resouces used (empty icons are used for not yet defined icons :-)):
- Title bar icons for flaps:
- btn_flap_close.png
- btn_flap_maximize.png
- btn_flap_minimize.png
- btn_flap_pin.png
- btn_flap_empty.png
- Title bar icons for palettes:
- btn_palette_close.png
- btn_palette_maximize.png
- btn_palette_minimize.png
- btn_palette_pin.png
- btn_palette_empty.png
- Title bars:
- title_bar_active.png
- title_bar_inactive.png
- Tabs:
- tab_bar_top_active.png
- tab_bar_top_inactive.png
- tab_bar_bottom_active.png
- tab_bar_bottom_inactive.png
- tab_bar_left_active.png
- tab_bar_left_inactive.png
- tab_bar_right_active.png
- tab_bar_right_inactive.png
- NOTE THAT THESE ARE ONLY A SMALL PART OF WHAT HAD BEEN DEFINED AS FUNCTIONALITY. We need:
- Icons for active, inactive title bars
- Icons to replace the empty ones - either not defined at all or ON, OFF icons for some buttons.
- Title bar icons for flaps:
- Screenshot Sophie2 skin:
- Changesets:
Implementation
- Renamed ID => Id.
- ImmColor constructor that takes a String, changed to a method inside the ImmColor.
- The boolean value in the skin that takes true or false for colored or imaged UI changed so that values are not hard coded.
- Builds successfully under true.
- Runs with author and reader (true launchers)
- Changesets:
Merged in the trunk [5017].
