Jasig Spring 2010 Tab Tags
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Jasig Spring 2010 Tab Tags

on

  • 1,023 views

Hello, here are the slides to the presentation "Implementing Multi-leve Navigation in uPortal"

Hello, here are the slides to the presentation "Implementing Multi-leve Navigation in uPortal"

Statistics

Views

Total Views
1,023
Views on SlideShare
1,022
Embed Views
1

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • need to have a method of organizing A LOT of content for a diverse set of users without alienating any of the many content providers
  • worked out really well for student portal… able to have a lot of content by default without it being overwhelming
  • technology advances provide for a an alternative to multiple levels of navigation, but there are scaling issues to consider
  • from the beginning this approach was very appealing
  • we feel it may benefit others as well, and jeff is going to share some details on how to take it for a test drive
  • I am logged in as the demo user.
  • Identify our nomenclature tab -> page -> portlet. Though our pages are really uportal tabs.
  • This allows for portlets that our best viewed full screen to have their own tab. My user has 18 tabs that contain content.
  • show demo on local machine.
  • This will produce the effect as in the previous slide, where the tab named "Developement" is a  sub-tab or sub-page of the tabTag container "Demo"
  • This will get you there, but it probably isn't enough. That is when a user adds a tab, it won't be tagged correctly.  or a users open tab won't persist when navigation between tabTags.
  • note, this is leveraging existing functionality in uPortal that is available to add and track custom structure attributes.
  • notice the tabTag folder attribute. If we added this to the fragment layout.
  • Need to add snapshot of incoming theme xml and show tabTagList
  • Screenshot from navigation.xsl
  • urls get large – passing through more sturct and theme params – we will see.
  • For example, if a user wants to add a new tab to the group of tabs that are within the admin tabTag group, the add tab functionality needs to add this page to the correct group.
  • selector finds value of the activeTabTag… mention that bold text is new or changed…
  • currently, we use the import/export utility to add new tabs (with tab tags)
  • show image

Jasig Spring 2010 Tab Tags Presentation Transcript

  • 1. Implementing Multi-Level Navigation in uPortal JASIG Spring 2010 Conference
  • 2. Basic Problem…
    • Sizable Multi-Campus implementation with hundreds of portlet publications
    • Governance is very distributed, and there is a lot of content that the committees want provided by default
    • How do we organize this information in a usable way?
  • 3. Lesson Learned
    • In uPortal 2, we implemented a subtab structure to support this
    • This required a lot of custom code
    • This was a structural change that made our uPortal 3 upgrade much more difficult
    • The import/export scripts had to be changed and augmented to account for the new level of hierarchy in the layout
  • 4. Things to Consider
    • Tab Carousels
      • suffer from an out of sight out of mind dilemma
      • still have a usability issue, when tab numbers are high… how many tabs will a user scroll through?
    • Click counts
      • how do we get people to what the need quickly?
  • 5. Revelation
    • One of the things our users like is the ability to find things at a glance and drill down for more detail
    • We needed a new approach that would provide the same functionality without the upgrade and maintenance headaches
    • Jeff conceptualized tabTags…
  • 6. The tabTag Approach
    • Does not change the structure of the layout XML
    • Uses out-of-box uPortal “structure attribute” functionality to track tags associated with at tab
    • Is implemented via an optional new theme
  • 7. The tabTag Approach
    • Requires minimal code enhancements (to remember the selected tab)
    • Has no code changes that break the out-of-box uPortal theme
    • Quickly became a clear choice to meet our needs
  • 8. Currently, uPortal only has single level navigation at the tab level . I am logged in as the staff user on the default uPortal32 install.
  • 9.  
  • 10.  
  • 11. So how do we produce multi-level navigation? In this screenshot the Admin “tab container” is a navigational construct which contains three tabs: Development, Testing, Admin Tools
  • 12. The tabTag idea
      • What if we could give each tab a label, and then filter by that label?
      • Essentially, assign a non-hierarchical   type of metadata to a tab, or "tag" the "tab".
      • Analogous to labeling emails in gmail or tagging bookmarks in delicious.
      • These "tabTags" can be used to identify like tabs, and organize them accordingly during the rendering pipeline.
  • 13. How does one “tag” a tab? The power of the folder structure attribute
    • Once tabTag functionality is implemented, all one needs to do is add the structure attribute as a child of the <tab> element in a .fragment-layout or .layout file.
    <tab unremovable=&quot;N&quot; immutable=&quot;N&quot; hidden=&quot;N&quot; name=” Development &quot;>        <structure-attribute type=&quot;folder&quot;>            <name> tabTag </name>            <value> Admin </value>        </structure-attribute>
  • 14. Multi-Level Navigation Implementation Overview
      • Small footprint - non-invasive
      • Implementated in the rendering pipeline
      • UP_LAYOUT_STRUCT table remains unchanged
      • All UI components, ( css, javascript ), remain compatible
    So how do we implement this... In a nutshell, we are leveraging the power of the default uPortal distribution with minimal customizations.
  • 15. List of files need to implement tabTag functionality at its most basic level.
      • DLM_Tabs_and_columns-1.structure
      • columns.xsl ( structure transform )
      • navigation.xsl ( theme transform )
      • fragment layout files -- add tabTag folder structure attribute to these.
    However, at this basic level, “add a tab” customization does not work properly. In addition, persistent navigation at a subtab level is not possible. We will address these enhancement later in this talk.
  • 16. DLM_Tabs_and_columns-1.structure
    • <parameter>
    • <name> tabTag </name>
    • <default-value> UNTAGGED </default-value>
    • <description> Value of tabTag to apply set on a tab </description>
    • <type> 2 </type>
    • </parameter>
    Add the following parameter to structure entity file This will add a row to the UP_SS_STRUCT_PAR . Any tab that is not assigned a tabTag folder structure attribute, will default to the UNTAGGED value.
  • 17. Modified Structure and Theme Transforms
    • columnsTabTag
      • columns.xsl
    • universalityTabTag
      • navigation.xsl
  • 18. columns.xsl
    • 1. The activeTab param being passed into this transform that is used to determine the activeTabId is NOT the position of the tab, but rather the Tab Id itself.
    • 2. A few new params are being passed through – the most important being the activeTabTag
    • 3. This is where all the tabTag folder attributes are sorted for display, and the tabs with a tabTag = activeTabTag is selected.
    This file is the most extensively modified. There are three important changes to take note of:
  • 19. Incoming XML to structure <folder ID=&quot;u10l1s4&quot; dlm:fragment=&quot;6&quot; dlm:precedence=&quot;40.0&quot; hidden=&quot;false&quot; immutable=&quot;false&quot; locale=&quot;en_US&quot; name=&quot;Development&quot; type=&quot;regular&quot; unremovable=&quot;false&quot; externalId=&quot;&quot; width=&quot;100%&quot; tabTag=&quot;Admin&quot; activeChildId=&quot;doNotPersist&quot; xmlns:dlm=&quot;http://www.uportal.org/layout/dlm&quot;> This is the <folder> element for the Development tab. Every folder that represents a tab will have the tabTag attribute.
  • 20. How are these tabTags sorted in columns.xsl
    • <!-- #### CUSTOM-TABTAG #### 
    • <tabTagList>
    • <xsl:attribute name=&quot;activeTabTag&quot;>
    • <xsl:value-of select=&quot;$TAB_TAG&quot;/>
    • </xsl:attribute>
    • <xsl:for-each select=&quot;/layout/folder/folder[generate-id() = generate-id(key('tabTagKey',@tabTag)[1])]&quot;>
    • <tabTagListItem>
    • <xsl:value-of select=&quot;@tabTag&quot;/>
    • </tabTagListItem>
    • </xsl:for-each>
    • </tabTagList>
    • <!-- #### END-CUSTOM-TABTAG #### -->
    This code produces a <tabTagList> sent to the theme.
  • 21. Incoming XML to theme
    • <tabTagList activeTabTag=&quot;Admin” >
    • <tabTagListItem> Welcome </tabTagListItem>
    • <tabTagListItem> Staff </tabTagListItem>
    • <tabTagListItem> Admin </tabTagListItem>
    • </tabTagList>
    This is then transformed by navigation.xsl in the theme.
  • 22. navigation.xsl
    • <tabTagList> is transformed into the navigational display.
    • All URLs are modifed to pass through new params such as activeTabID and activeTabTag
    • These URLs include tabTag, Tab, Portlet, and portlet flyout urls.
    • The tabTag containers cannot be moved, nor can there names be changed by the user. As of this point, these tags are decided by the implementers.
  • 23.  
  • 24. tabTag Enhancements
    • Add Tab functionality
      • DLM_XHTML-1.theme
      • ajax-preferences-jquery.js
      • UpdatePreferencesServlet.java
    • Navigation Persistence
      • DLM_Tabs_and_columns-1.structure
      • RDBMDistributedLayoutStore.java
    • Theme Housekeeping (set global vars for readable URLs)
      • universality.xsl
  • 25. Implement “Add Tab” functionality in multi-level navigation
      • DLM_XHTML-1.theme
      • ajax-preferences-jquery.js
      • UpdatePreferencesServlet.java
    When a user adds a tab to their layout, the new tab needs to have the active tabTag value assigned to it as structure folder attribute. List of files modified:
  • 26. DLM_XHTML-1.theme
    • <parameter>
    • <name> newTabTag </name>
    • <value> Welcome </value>
    • <description> Add new tabTag to new tab </description>
    • <type> 1 </type>
    • </parameter>
    This inserts a new row into UP_SS_THEME_PARM Need to add new theme param:
  • 27. ajax-preferences-jquery.js
    • // Tab editing persistence functions
    • var addTab = function() {
    • var newTagTabVal = $(&quot;#activeTabTag&quot;).text();
    • $.post(settings.preferencesUrl, {action: 'addTab', newTabTag: newTagTabVal },
    • function(xml) {
    • if ($(&quot;success&quot;, xml).text() == 'false') { handleServerError(xml); return false; }
    • window.location = settings.portalUrl +
    • &quot;?uP_root=root&uP_sparam=activeTab&activeTab=&quot; +
    • ($(&quot;#portalNavigationList > li&quot;).length + 1) +
    • &quot;&uP_sparam=prevTabTag&prevTabTag=&quot; + newTagTabVal;
    • });
    • };
    The addTab function needs to modified to include the newly added theme param newTabTag.
  • 28. updatePreferencesServlet.java This servlet gets the the newTabTag value sent by ajax-preferences and persists and binds it as the folder structure attribute for the newly added tab.
  • 29. Navigation Persistence
    • This is not strictly necessary, but it is a nice usability enhancement.
    • Essentially, this functionality keeps track of the currently viewed tab under a specific tabTag as a user navigates across tabTags.
    • Files involved are:
      • DLM_Tabs_and_columns-1.structure
      • RDBMDistributedLayoutStore.java
  • 30. DLM_Tabs_and_columns-1.structure
    • <parameter>
    • <name> activeChildId </name>
    • <default-value> doNotPersist </default-value>
    • <description> activeTabId of activeTabTag </description>
    • <type> 2 </type>
    • </parameter>
    Once again, add a new parameter to the structure entity file This will add a row to the UP_SS_STRUCT_PAR
  • 31. RDBMDistributedLayoutStore.java
    • /*
    • * Persist folder attributes defined in the stylesheet
    • * description only if the user value is non null and
    • * there is no default or the user value
    • * differs from the default.
    • *
    • * CUSTOM-TABTAG - if default value of attribute is &quot;doNotPersist&quot;,
    • * do not persist this attribute to the database. This was customized
    • * so that activeChildId will not be persisted between sessions.
    • * See UP_SS_STRUCT_PAR to view default value for a type 2 attribute.
    • */
    Not going to show code – it isn’t difficult or complex, but the snippet of code is verbose, so instead I will include the comments.
  • 32. Done.... build and deploy
  • 33. Add tabTag param to fragment-layout files. For example... <tab unremovable=&quot;N&quot; immutable=&quot;N&quot; hidden=&quot;N&quot; name=” Development &quot;>        <structure-attribute type=&quot;folder&quot;>            <name> tabTag </name>            <value> Admin </value>        </structure-attribute> ... and import
  • 34. yeah... multi-level navigation
  • 35. Next Steps and Ideas…
    • Work toward including tabTag theme in future version of uP3.x
    • Create Admin settings options
      • support setting tabTag outside of fragment import process
      • this will better support existing implementations that want to migrate to this theme
    • Create more theme options
      • portletTag drop down theme… no tabs or pages... just select a tag in a drop down that results in those portlets showing on a page
      • portletTag filter theme… a list of portlets that users can label/tag which results in the creation of tabs for each label
      • one of these might be a nice mobile theme option
  • 36. Contacts: Tim Carroll [email_address] Jeff Dimpsey [email_address]