wiki:PAGE_PREVIEW_PALETTE_R0
Last modified 16 years ago Last modified on 09/13/09 20:15:38

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

Error: Macro TicketQuery(summary=PAGE_PREVIEW_PALETTE_R0, format=table, col=summary|owner|status|type|component|priority|effort|importance, rows=description|analysis_owners|analysis_reviewers|analysis_score|design_owners|design_reviewers|design_score|implementation_owners|implementation_reviewers|implementation_score|test_owners|test_reviewers|test_score|) failed
current transaction is aborted, commands ignored until end of transaction block

Analysis

Overview

The page preview palette is a part of the page tab in the left flap of the main window. It contains a list of representations of all pages in the book which can be manipulated to add, delete, or rearrange pages.

Task requirements

  • The page palette should list thumbnails of the pages in the currently selected book.
  • Selecting a thumbnail makes its page the current page of the book.
  • A selected page may be deleted. User should be able to delete by pressing DELETE or BACKSPACE.
  • The thumbnails are redrawn when the user changes pages.
  • For this revision, thumbnails should be a fixed width (say 100 pixels wide) so that they are not redrawn when the user changes the flap width.
  • For this revision, two buttons should appear at the bottom of the palette, labeled "Add Page Before" and "Add Page After". If "Add Page Before" is clicked, a new page is inserted immediately before the current page. If "Add Page After" is clicked, a new page is inserted immediately after the current page.

Task result

The result of this task is source code.

Implementation idea

Add the palette to the left flap and bind the list of its items to the books pages.
Change the existing PagePreviewPalette and PagePreviewCellRenderer classes. Use the framework in org.sophie2.base.scene to get page information (use scenes).

How to demo

  • Open the page preview palette and show the thumbnails of all the pages in the book.
  • Click on another page thumbnail in the page preview palette and see that Sophie goes to that page.
  • Change something on a page and go to another page to show that the thumbnails are redrawn.
  • Add a new page after the current page by clicking the "Add Page Before" button.
  • Select a page in the page preview palette and hit DELETE to delete the page.

Design

  • Drawing
    • We need to add a ReadPageWorkArea property in PagePreviewPalette.PageItem.
    • The ReadPageWorkArea should be used to set the current page as the page changes so a Scene object can be extracted from it.
    • A PageThumbnail object will be created for each page item and used to draw the page in a overriden paintComponent method.
    • Before the drawing the Graphics object is scaled by the ratio of thumbwidth/pagewidth.
  • Setting the selected thumbnail as current page - already done.
  • Deleting a page - already done.
  • Updating the thumbnails once another page is selected - already done.
  • Add pages
    • Two resource properties for the two buttons (add page before/after) should be created in PagePreviewPalette.
    • They should be added to the bottom of the palette in an overridden initFooter method. To facilitate this the ListPalette class will be supplemented with methods to add visual components to the footer of the palette.
  • Classes to be changed:
    • PagePreviewPalette
    • PagePreviewPaletteCellRenderer
    • ListPalette to add a footerComponent and an initFooter method.
    • MainAppLayoutModule to add the palette to the Pages tab.
  • Test - [3476], [3492], [3496], [3538]

source:/branches/private/sveto/sveto2/sophie2-platform/modules/org.sophie2.main.app.layout/doc/PAGE_PREVIEW_PALETTE_R0.jpg

Implementation

  • A problem with Page.delete method was fixed - current page was not set after deletion causing a null pointer exception.
  • A ListPaletteCellRenderer was added allowing ListPaletteItems to return java.awt.Components in their render method and it will be drawn.
  • User interaction has been disabled for reader and preview mode.

Changesets:
[3409] (At the time of commit the only differences from trunk are in PagePreviewPalette, PagePreviewPaletteCellRenderer, ListPalette and MainAppLayoutModule)
[3463]
[3476]
[3499]
[3538]
The changes are in ​svn://sophie2.org/sophie2/branches/private/sveto/sveto2

Problems exist with the implementation:

  • The thumbnails are clipped from the right and bottom.
  • Some page elements (like pattern fill) are misplaced by some pixels.
  • The border around thumbnails is not visible when you click one.

3rd implementation, by mitex:

Testing

Comments

For later revisions:

  • The user can rearrange pages by dragging them up and down.
  • Dragging a page template from the right flap into the page preview template is creating a new page from this template. The new page is inserted before, between, or after existing pages depending on where the template was dropped.
  • A template may be applied to a page by dragging the template to a page in the page preview palette.
  • The thumbnails should be resized when the user changes the width of the flap.

Notes:

  • I suspect that updating the page thumbnails every time a page is changed will end up making the entire program very slow. Probably we want to redraw thumbnails more frequently that every time the user changes pages, but we might want to think about only making some changes trigger thumbnail redrawing.

Design:

  • The render method of ListItem is used to create an array of objects set in JList.setListData. This way the list data is treated as String and even if an array of Components is used it is rendered as Strings, i.e. by calling their toString method. I think that we need a cell renderer to display the thumbnails.