Wiki features implemented during Sprint July-2008

• Leadership Sponsor: Roger Bly
• Developer: Uros
• Peer Review: Avinash

The previous sprint history is available here: http://dev.project.net/trac/pnet-community/wiki/feature-wiki

Tasks for this Sprint

During this sprint the following wiki features should be implemented (Priority order):

1. All features moved to Tapestry5 version; JSP version removed.
2. UI Improvements
3. Page Change History -- Clicking the history item shows that version of the wiki page rendered. The user can make any previous version of the wiki page the current version. This does not need to have "difference" feature at first. Just a list of who changed the page when.
4. Page Index (at workspace level)

If time allows:

• Ability to have a wiki page that refers to other project.net object. (e.g. a wiki page for a Task/Assignment)
• Ability to link to other project.net objects within the wiki text. (e.g. Document, Task, Form Item).
• What's Changed view -- List of most recent wiki page changes. Based on a new Event, and ChangeHistory? API?

UI Improvements

Two phases during this sprint:

1. Implement UI per Dorothy image with Roger's markup. Tapestry version with the new top menu and sidebar.
2. Send HTML and CSS templates to designer for cleanup. The cleaned up UI will likely be deployed in the next sprint.

• Remove "Edit this page", "delete", and "History" link from top of main page. Use toolbar icons for Edit and Delete. Use left sidebar for "Recent Changes" (was History), Top Page, Attach File, Index.
• Use top menu and left sidebar UI design. Similar to Blog.
• Need better error message when attempting to attach non-images files. Such as "You can only attach image files to a wiki page."
• "Blog Project" link should not be appearing (T5).
• Need sidebar link "Top Page" to return to root wiki page.

Further UI Improvements

Some Tool Bar icons moved to left column (words instead of icons); (other icons deleted):

Wiki page tools:

• Create icon -> "New"
• Modify icon -> "Edit"
• Remove icon -> "Delete" (we need a dialog box to confirm that the user wants to delete a page.)

add:

• "Upload File"
• "What Links Here"
• "Change History"

General wiki tools:

• "Top Page"
• "Index By Title"
• "Recent Changes"

What was done during this sprint

During this sprint I have done (changeset http://dev.project.net/trac/pnet/changeset/17744):

• removed JSP Version of wiki integration,
• implemented wiki image features in tapestry 5 wiki version,
• implemented new design for wiki (Dorothy design), according to image proposed in previous sprint,
• removed small typo from history table script, so it is possible to see basic history feature (Deepak's).

Added with changeset http://dev.project.net/trac/pnet/changeset/17784:

• making old revision of page active,
• current revision shows current active page,
• page index functionality,
• what links here functionality,
• faster editing preview (DWR call),
• user notified when trying to upload not supported file type (DWR call),
• modified wiki layout and css,
• fix for issue with switching from existing wiki space to non existing wiki space,
• removing old wiki tokens from defaultsettings.properties,
• modifying wiki properties in update_system_properties.sql file.

Removing JSP Version

As for removing JSP Version of wiki, I have removed all JSP Version specific files:

• JSP pages
• Controller classes (introduced by Uros and Sachin previously)
• Spring related mappings.

Image features in tapestry version of wiki

Related to implementing image features in tapestry 5 version of wiki, this implemnetation had 2 phases:

1. feature was implemented exacly the same as it was in JSP Version - images were attached to concrete wiki page, and so we could say that they had page visibility.
2. new design for image features was set after consultation with Roger - each image has project(object) level visability, so basic principles are:
   • images are uploaded to project's(object's) wiki,
   • in order to see image, it needs to be attached to concrete wiki page within some wiki space (wiki for some project),
   • images available for attaching are only those that are uploaded to concrete wiki space we are working with.

From Developers perspective

To make image uploading possible, from developers perspective, I added new tapestry component - Upload cmp, for uploading images to some wiki space we are in. For making this cmp, I used tapestry cmp for uploading (imported new lib tapestry-upload-5.0.5.jar), and made some additional calls (DWR) to methods for checking if image with specific name exists in this wiki space, methods for checking file extension (displaying error for file types other than images). For uploading I removed previously used springs UploadController?, and placed all logic in WikiProviderImpl? class with some additional changes to FileUtils? class.

To make attaching images feature, I've added few new files:

• trunk/core/src/org/apache/tapestry/corelib/components/SelectObject.java
• trunk/core/src/net/project/view/components/GenericSelectionModel.java
• trunk/core/src/net/project/view/components/GenericValueEncoder.java

which enables developer to present select option list with List<Object> used as generator for that list, and passing Object type as the result of selection (I used List<PnWikiAttachment?> object to generate selection list).

From User perspective

As previously stated, in order to see image on some wiki page, you:

1. Need to upload that image to wiki space you are working with.
   To do so once you are in wiki space to which your wiki page belongs, click on Upload Image link in left wiki specific menu.
   The upload page is presented to you, so select image you wish to upload from file system, and click on upload link.
   Image is uploaded to wiki space you are working with - and from that moment automatically attached to root wiki page for that wiki space, making it possible for you to see that image on root wiki page by entering appropriate image tag.
2. Need to attach uploaded image to wiki page you wish to display it.
   Navigate to wiki page where you would like to display your image.
   Click on Attach Image link from left wiki specific menu. The select option is presented at the top of current wiki page content with list of all images uploaded to current wiki space, to select image from.
   Select image you wish to attach, and click Attach.
   The outcome: You can display image on wiki page by entering appropriate image tag. (Image is attached to wiki page)

New UI design for wiki

As for new UI wiki design: it was implemented in taptestry 5 version of wiki according to image provided by Roger during previous sprint (image can be found at the bottom of the previous sprint page: http://dev.project.net/trac/pnet-community/wiki/wiki-Sprint-June-20-2008). There are some things left to be done related to this, in order for this design to follow the latest design proposed (proposed on this page - upper image), like removing action bar from the top left and implementing features specific to it inside of left wiki menu.

Newest changes made to layout - added new look to wiki by changing css. Made changes in presenting current date (top right of WikiInfo? cmp - more calendar like look of current date).

From Developers perspective

From develpers point of view - in order to implement this I've added 2 new components:

• WikiInfo? cmp - for displaying rectangle with info saying which action you are performing (Viewing/Editing/Uploading/History for wiki WikiPgName?)on top of each wiki page content, and current date,
• WikiMenu? cmp - introduced for displaying left wiki specific menu.

I made this components in order to remove repetition code from wiki (tapestry) pages, there by making some logical structure. I removed much of code from previous wiki pages and added new code in those components in order to achieve this.

Exaple of new wiki layout:

Example of how new upload image page looks like:

Wiki History

After each editing of some wiki page, you are able to click on Recent Changes link in left wiki specific menu and see list of changes for specific wiki page.
You are able to click on link and see that specific change you selected. (Deepak)

Now it is possible to work with activation of recent revisions of some wiki page in following ways:

• clicking on Recent Changes - brings you to history features for current wiki page: listing all old editing revisions for that spec. wiki page.
• by selecting one revision - you are able to see the content of that revision.
• by clicking on current revision link (upper right) - you are brought back to the current revision of this wiki page. (I corrected this to work as it is working now, before always root wiki space page was shown to the user).
• by clicking on activate link (upper right) - you are making that revision of wiki page active again, and making new record in history accordingly.

How it is implemented

• I implemented this by adding new form and method to Welcome page template and class.

Page Index feature

• click Page Index link from left menu, while you are in 'viewing page' mode in some wiki space, to be able to see the index of all existing wiki pages in that wiki space.
• by clicking on any item from Page Index list - you are forwarded to that specific wiki page you clicked on.

How is it implemented

• added new methods for creating 'Page Index' feature located in class WikiProviderImpl? ( wikiPageIndex / renderPageIndex ).

What Links Here feature

• click on What Links Here link from left wiki menu - at the top of the page the list of wiki pages that this wiki page has links to is presented.

How is it implemented

• I created getLinksFormated method in ExtWikiModel? class for this functionality.

Editing preview working faster

• by clicking on Preview option while editing some wiki page - the content of the page is presented much faster than before.

How it is implemented

• I implemented this by using DWR call.

Note: Plan to convert that into extJs Ajax call ASAP, since I found out that DWR is going to be removed from pnet use.

User notified when trying to upload non supported file type to wiki space

How it is implemented

• I implemented this by using DWR call. Plan to convert that into extJs Ajax call ASAP.