SlideShare une entreprise Scribd logo
1  sur  36
Implementing Multi-Level Navigation in uPortal JASIG Spring 2010 Conference
Basic Problem… ,[object Object],[object Object],[object Object]
Lesson Learned ,[object Object],[object Object],[object Object],[object Object]
Things to Consider ,[object Object],[object Object],[object Object],[object Object],[object Object]
Revelation ,[object Object],[object Object],[object Object]
The tabTag Approach ,[object Object],[object Object],[object Object]
The tabTag Approach ,[object Object],[object Object],[object Object]
Currently, uPortal only has single level navigation at the tab level . I am logged in as the staff user on the default uPortal32 install.
 
 
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
The tabTag idea ,[object Object],[object Object],[object Object],[object Object]
How does one “tag” a tab? The power of the folder structure attribute ,[object Object],<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>
Multi-Level Navigation Implementation Overview ,[object Object],[object Object],[object Object],[object Object],So how do we implement this... In a nutshell, we are leveraging the power of the default uPortal  distribution with minimal customizations.
List of files need to implement tabTag functionality at its most basic level. ,[object Object],[object Object],[object Object],[object Object],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.
DLM_Tabs_and_columns-1.structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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.
Modified Structure and Theme Transforms ,[object Object],[object Object],[object Object],[object Object]
columns.xsl ,[object Object],[object Object],[object Object],This file is the most extensively modified.  There are three important changes to take note of:
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.
How are these tabTags sorted in columns.xsl ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],This code produces a  <tabTagList>  sent to the theme.
Incoming XML to theme ,[object Object],[object Object],[object Object],[object Object],[object Object],This is then transformed by  navigation.xsl  in the theme.
navigation.xsl ,[object Object],[object Object],[object Object],[object Object]
 
tabTag Enhancements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Implement “Add Tab” functionality in multi-level navigation ,[object Object],[object Object],[object Object],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:
DLM_XHTML-1.theme ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],This inserts a new row into  UP_SS_THEME_PARM Need to add new theme param:
ajax-preferences-jquery.js ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The addTab function needs to modified to include the newly added  theme param newTabTag.
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.
Navigation Persistence ,[object Object],[object Object],[object Object],[object Object],[object Object]
DLM_Tabs_and_columns-1.structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Once again, add a new parameter to the structure entity file This will add a row to the  UP_SS_STRUCT_PAR
RDBMDistributedLayoutStore.java ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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.
Done.... build and deploy
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
yeah... multi-level navigation
Next Steps and Ideas… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Contacts: Tim Carroll [email_address] Jeff Dimpsey [email_address]

Contenu connexe

Similaire à Jasig Spring 2010 Tab Tags

Dita ot pipeline webinar
Dita ot pipeline webinarDita ot pipeline webinar
Dita ot pipeline webinar
Suite Solutions
 
What is struts_en
What is struts_enWhat is struts_en
What is struts_en
techbed
 
Silverstripe 2.4-highlights-gpmd
Silverstripe 2.4-highlights-gpmdSilverstripe 2.4-highlights-gpmd
Silverstripe 2.4-highlights-gpmd
GPMD Ltd
 
Krazykoder struts2 plugins
Krazykoder struts2 pluginsKrazykoder struts2 plugins
Krazykoder struts2 plugins
Krazy Koder
 
Drupal 7 Theming - what's new
Drupal 7 Theming - what's newDrupal 7 Theming - what's new
Drupal 7 Theming - what's new
Marek Sotak
 

Similaire à Jasig Spring 2010 Tab Tags (20)

WordPress Standardized Loop API
WordPress Standardized Loop APIWordPress Standardized Loop API
WordPress Standardized Loop API
 
Dita ot pipeline webinar
Dita ot pipeline webinarDita ot pipeline webinar
Dita ot pipeline webinar
 
Practical catalyst
Practical catalystPractical catalyst
Practical catalyst
 
SQL Server 2008 Performance Enhancements
SQL Server 2008 Performance EnhancementsSQL Server 2008 Performance Enhancements
SQL Server 2008 Performance Enhancements
 
What is struts_en
What is struts_enWhat is struts_en
What is struts_en
 
Struts Portlet
Struts PortletStruts Portlet
Struts Portlet
 
Little Gems in TYPO3 v12
Little Gems in TYPO3 v12Little Gems in TYPO3 v12
Little Gems in TYPO3 v12
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Dost.jar and fo.jar
Dost.jar and fo.jarDost.jar and fo.jar
Dost.jar and fo.jar
 
Silverstripe 2.4-highlights-gpmd
Silverstripe 2.4-highlights-gpmdSilverstripe 2.4-highlights-gpmd
Silverstripe 2.4-highlights-gpmd
 
Jasig Rubyon Rails
Jasig Rubyon RailsJasig Rubyon Rails
Jasig Rubyon Rails
 
Finding Your Way: Understanding Magento Code
Finding Your Way: Understanding Magento CodeFinding Your Way: Understanding Magento Code
Finding Your Way: Understanding Magento Code
 
Database testing
Database testingDatabase testing
Database testing
 
Mdst 3559-02-01-html
Mdst 3559-02-01-htmlMdst 3559-02-01-html
Mdst 3559-02-01-html
 
Krazykoder struts2 plugins
Krazykoder struts2 pluginsKrazykoder struts2 plugins
Krazykoder struts2 plugins
 
Component Framework Primer for JSF Users
Component Framework Primer for JSF UsersComponent Framework Primer for JSF Users
Component Framework Primer for JSF Users
 
Lesson 4
Lesson 4Lesson 4
Lesson 4
 
WordPress Structure and Best Practices
WordPress Structure and Best PracticesWordPress Structure and Best Practices
WordPress Structure and Best Practices
 
RomaFramework Tutorial Basics
RomaFramework Tutorial BasicsRomaFramework Tutorial Basics
RomaFramework Tutorial Basics
 
Drupal 7 Theming - what's new
Drupal 7 Theming - what's newDrupal 7 Theming - what's new
Drupal 7 Theming - what's new
 

Dernier

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Dernier (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Jasig Spring 2010 Tab Tags

  • 1. Implementing Multi-Level Navigation in uPortal JASIG Spring 2010 Conference
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 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.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 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.
  • 21.
  • 22.
  • 23.  
  • 24.
  • 25.
  • 26.
  • 27.
  • 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.
  • 30.
  • 31.
  • 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
  • 35.
  • 36. Contacts: Tim Carroll [email_address] Jeff Dimpsey [email_address]

Notes de l'éditeur

  1. 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
  2. worked out really well for student portal… able to have a lot of content by default without it being overwhelming
  3. technology advances provide for a an alternative to multiple levels of navigation, but there are scaling issues to consider
  4. from the beginning this approach was very appealing
  5. 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
  6. I am logged in as the demo user.
  7. Identify our nomenclature tab -&gt; page -&gt; portlet. Though our pages are really uportal tabs.
  8. This allows for portlets that our best viewed full screen to have their own tab. My user has 18 tabs that contain content.
  9. show demo on local machine.
  10. This will produce the effect as in the previous slide, where the tab named &amp;quot;Developement&amp;quot; is a  sub-tab or sub-page of the tabTag container &amp;quot;Demo&amp;quot;
  11. This will get you there, but it probably isn&apos;t enough. That is when a user adds a tab, it won&apos;t be tagged correctly.  or a users open tab won&apos;t persist when navigation between tabTags.
  12. note, this is leveraging existing functionality in uPortal that is available to add and track custom structure attributes.
  13. notice the tabTag folder attribute. If we added this to the fragment layout.
  14. Need to add snapshot of incoming theme xml and show tabTagList
  15. Screenshot from navigation.xsl
  16. urls get large – passing through more sturct and theme params – we will see.
  17. 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.
  18. selector finds value of the activeTabTag… mention that bold text is new or changed…
  19. currently, we use the import/export utility to add new tabs (with tab tags)
  20. show image