How to customize account page look and feel
Where to start
All Java source files located in /apps/account/gwt/src/com/thiblo/client/
All styles for account page located in /static/stylesheets/com.thiblo.account/index.css
iBoxes
Account page consists of iGoogle like draggable boxes (we call it "iBoxes"). They are technically subclasses of ExpandableBox custom composite widget. Box consists of header and body.
Header has style STYLE_HEADER = "indexed-panel-head" and currently consits of panel with single label with caption text. ExpandableBox.getHeading method returns widget which is used as a drag handle for this box. This widget should implement SourcesMouseEvents interface.
Body is SimplePanel with style STYLE_LABEL = "indexed-panel-label" (yes, a bit weird name, will be changed soon). To this panel widget returned by getContent() is added which is actual content of iBox. Of course, getContent is overridden in every specific box.
iBoxes are contained in DraggableBoxesContainer custom widget. Boxes are vertically stacked in the fixed number of columns. Each column has STYLE_COLUMN = "column".
DraggableBoxesContainer also takes care of navigation bar and handles box expansion and collapse.
How boxes are expanded
When user tries to expand iBox (ExpandableBox), it fires onExpand, which is handled by container (DraggableBoxesContainer). Container calls getExpandedContent method of box returning appropriate widget (usually a kind of panel). Widget is wrapped by RoundedPanel with STYLE_EXPANDED_BOX = "expanded-box". To the widget itself STYLE_EXPANDED_BOX_CONTENT = "expanded-box-content" is applied. Currently this style does nothing except complementing rounded frame with left and right borders. Wrapped widget is added to expandedContentPanel horizontal panel (STYLE_EXPANDED_CONTENT_PANEL = "expanded-content-panel") right after the "Back button" (STYLE_BACK_BUTTON = "back-button"). This button is an image at URL BACK_BUTTON_IMAGE = "/static/images/account/account-backbutton.gif".
Comments box
In collapsed state it's a GWT Grid containing LAST_COMMENTS_LIMIT last comments and "More..." link stacked in VerticalPanel. Grid has styles STYLE_LAST_COMMENTS_TABLE = "lastcomments" and STYLE_TABLE = "comment-tables".
Comments box in expanded state is simply a FlexTable wrapped by SimplePanel. To the table STYLE_TABLE = "comment-tables" is applied (note that it is currently also applied to last comments table in collapsed state). Additional styles should be applied in fillCommentsGrid method, where table is (re)created on refresh.
When comment is expanded, a new row with one cell is added right after comment row, and its colspan is set to the total number of columns in table. Then ExpandedCommentPanel custom composite widget is inserted there. Widget creation and styles application are performed entirely in its constructor.
