354 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 117
Popover to Google Maps
Wed, Jan 1st 2014 115
My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 180
Asymmetric Modernization Explained
Mon, Nov 25th 2013 89
2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 136
Make your Bootstrap site Responsive
Fri, Sep 20th 2013 96
The Modern Notes Developer
Mon, Aug 19th 2013 88
Top 10
My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 180
2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 136
Easy Mobile Browser Detection
Tue, Nov 27th 2012 130
JQuery FullCalendar in XPages
Sun, Feb 17th 2013 118
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 117
Popover to Google Maps
Wed, Jan 1st 2014 115
Make your Bootstrap site Responsive
Fri, Sep 20th 2013 96
Implementing a Dojo Scrollable pane with the XPages Mobile Controls
Mon, Jul 29th 2013 91
Asymmetric Modernization Explained
Mon, Nov 25th 2013 89
The Modern Notes Developer
Mon, Aug 19th 2013 88


SnTT: Sectioned XPages Menu
Keith Strickland    

>I recently completed my first "Production" XPages application. Messing with the XPages calendar really helped but I learned that too long away from something after just learning it is bad. But anyways, while researching for said application I came across the IBM Lotus User Interface Developer Documentation site. I don't know where or how I found it but it contains a wealth of information on the oneUI classes with examples using them. On this site I found a Menu with Sections and the app needed a sectioned navigational menu. Since I was using the XPages Framework for this application (BTW, this is a great package and makes it VERY easy to come up with a very nice looking, functional app very quickly) I decided to just make a few modifications to add the required navigational menu. I sent these changes over to Steve Castledine for inclusion in the XPages Framework. Whether or not he'll use it, I don't know, but hopefully he will.

To make this I created a new custom control and called it ccSectionSideMenu. This very closely resembles the ccSideMenu custom control within the XPages Framework.

Now, to support the computed field in the code above, I had to make some changes to the xpUtil Server Javascript script libaray. These are the 2 functions I added:


And I modified the createFromProperties function and just added this code in between Side Bar and Footer Column blocks:

I really can't take a lot of credit for all the Javascript code I listed above. This code was just adapted from other functions and code blocks already in that script library. So I guess Steve Castledine and/or Niklas Heidloff wrote this code and really deserve the credit as all I did was re-task it to meet my needs. But the last piece of this puzzle is the layout.properties file. I added the following:

#Side Bar Menu Sections
sideBarSectionMenu.title=Section1,Section2
sideBarSectionMenu.link=Section1.xsp,Section2.xsp
sideBarSectionMenu1.title=subMenu1.1,subMenu1.2,subMenu1.3
sideBarSectionMenu1.link=subMenu1-1.xsp,subMenu1-2.xsp,subMenu1-3.xsp
sideBarSectionMenu2.title=subMenu2.1,subMenu2.2,subMenu2.3
sideBarSectionMenu2.link=subMenu2-1.xsp,subMenu2-2.xsp,subMenu2-3.xsp

This just sets up the data to be parsed and turned into the sectioned menu and follows the same format as the footer columns section.

Here's what you end up with:
sectionedMenu.jpg

And that's it, hopefully you'll get some mileage out of this. I didn't have time to give it twisty support where the menus collapse when you close the section, but I do plan on adding that in the future when time permits or the absolute need arises. But as long as you don't have a ton of menu items to display this actually works really well. Enjoy!



---------------------
http://www.keithstric.com/A55BAC/keithstric.nsf/d6plinks/KSTD-86VK8M
Jun 29, 2010
35 hits



Recent Blog Posts
117


On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 11:26a   Keith Strickland
Over on SocialBizUg - Web Worker Basics [read] Keywords:
115


Popover to Google Maps
Wed, Jan 1st 2014 11:34a   Keith Strickland
Posted over on SocialBizUg - Popover to Google Maps [read] Keywords: google
180


My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 11:48a   Keith Strickland
A couple of weeks ago I started messing with Titanium Appcelerator. Coming from Domino Designer and Eclipse the IDE will look very familiar. It's eclipse and it's based off of Aptana Studio. I guess the biggest issue to being productive is the learning curve for the API. But honestly when is that not the case? So starting to delve into this, Titanium apps are purely client side javascript based. You write the CSJS that builds the UI, Business Logic, Layout, everything. While this may [read] Keywords: domino ibm lotus notes notes client application dojo eclipse iphone javascript mobile oop openntf wiki
89


Asymmetric Modernization Explained
Mon, Nov 25th 2013 6:32a   Keith Strickland
Posted Asymmetric Modernization Explained over on SocialBizUg. [read] Keywords:
136


2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 1:42p   Keith Strickland
OK, so today is the 2nd day I've spent with the Mobile controls from Domino 9.0.1. I must say the lack of a 9.0.1 Beta is quite obvious. So some of the "improvements" IBM made to the mobile controls are the addition of onBeforeTransitionIn/Out onAfterTransitionIn/Out. While these events are sorely needed, the implementation IBM chose to use doesn't work is kind-of odd. So, a brief rundown of the transition events pre 9.0.1. I posted a while back about how to implement these methods i [read] Keywords: domino ibm application community dojo mobile network server
96


Make your Bootstrap site Responsive
Fri, Sep 20th 2013 2:50p   Keith Strickland
Just posted over on SocialBizUg a tutorial for putting together a responsive layout for your XPage Applications. [read] Keywords: applications




88


The Modern Notes Developer
Mon, Aug 19th 2013 8:09a   Keith Strickland
On SocialBiz User Group - The Modern Notes Developer [read] Keywords: notes xpages
91


Implementing a Dojo Scrollable pane with the XPages Mobile Controls
Mon, Jul 29th 2013 4:45p   Keith Strickland
Check out my first NotesIn9 video about adding a Dojo Scrollable Pane in order to get a fixed bottom tab bar with the Extension Library Mobile Controls. A big thanks to David Leedy for publishing my video. Hope you enjoy the video. [read] Keywords: xpages dojo mobile planetlotus planetlotus.org
76


Add Custom Style Classes to IBM Renderers
Tue, Jul 16th 2013 7:25a   Keith Strickland
I've published an article over on SocialBizUG describing how to take over an IBM Renderer to include your own style classes. Check it out, hopefully you'll find some use for it. [read] Keywords: ibm
87


Mobile First Development
Fri, May 10th 2013 9:06a   Keith Strickland
At Red Pill Development, Peter Presnell has encouraged our development efforts to use a "Mobile First" approach. The process is that you design your mobile interface first, get everything working properly and then move on from there to Tablet and then Web Browser interfaces re-using as much as possible from the previously working mobile implementation. This approach has several advantages: It forces you to research, gather requirements and only display and write code for the things you [read] Keywords: application development interface mobile properties widgets




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition