SHOW103: Sidebar Safari everything you wanted to know about the Notes 8.5 Sidebar including a new API

Sidebar Safari: Controlling and Extending the Lotus Notes Sidebar with Policies, Widgets, and More

Mary Beth Raven | Lotus Chief UX Designer| IBM

SHOW 103

Jamie Liu/ Sidebar Architect / IBM

Agenda: Explore the Sidebar from Three Perspectives

Q & A

Michaela Zelber, Application developer

Wants to develop sidebar apps

Control sidebar panels

Philippe Babineaux, Business End User

Wants to leverage the sidebar for maximum productivity

Fred Adams, Domino System Admin

Wants to deploy the right sidebar apps to the right people

On His Sidebar Safari, Philippe will:

Manipulate the sidebar and its panels

Explore the My Widgets sidebar panel and setting preferences

Add a Notes view to the Sidebar

Corral the Inbox into the sidebar

Track local gas prices in a sidebar panel

Observe “Widget culture” in all 4 configurations

Trek through “Google Gadget Park” for a Live weather panel and mailing it home to a friend

On His Sidebar Safari, Fred Will:

Set desktop policies to deploy the sidebar

Set desktop policies to deploy widgets

Deploy a widget catalog

On her Sidebar Safari, Michaela Will:

Add a Notes view to the sidebar and edit the URL to the outline view is stripped off

Add the “Cheapest Gas Prices” Google Gadget

Create a “zip code” recognizer to that any where she sees a zip code, she can click and get the cheapest gas prices in a sidebar panel

Add the Digg iPhone app to the sidebar

Add a web app that requires authentication (Gmail)

Extend the Sidebar with Eclipse Development

Add an Eclipse view to the sidebar as a sidebar panel

Show and hide a sidebar panel automatically when she opens or closes mail

Programmatically close the entire sidebar when she opens any of the Symphony editors

Extra bonus if time: add a panel to the left or Right sidebar in a Composite Application without programming

Philippe Needs the Following Gear for his Safari

Lotus Notes 8.5 (on Windows XP, Linux or Mac)

The default preference to “Use the Web browser embedded in this client”

Internet access so he can get to the public widget catalog on IP address 72.51.41.44

Permission to turn on and use widgets (set by his admin using a desktop policy)

Fred Needs the Following Equipment for his Safari

Lotus Notes 8.5

Internet access so he can get to the public widget catalog on IP address 72.51.41.44

Domino Server; Admin client version 8.5

Or just pubnames.nsf for setting polices

A working knowledge of how to set up and deploy Domino policies

Michaela Needs These Supplies for her Safari

Lotus Notes 8.5

The default preference to “Use the Web browser embedded in this client”

Internet access to get to the public widget catalog

Permission to create widgets and publish them to the Widget catalog (granted by her system admin using desktop policies)

A Gmail account or other internet app that requires authentication

Eclipse IDE version 3.2.2

For the Bonus: The Composite Application Editor, Version 8.5

Join us on the Safari at Your Own Risk!

Everything we show you is in the hand outs

Step by step

Screen by screen

If you follow along, great, but we don't have time to stop and help you during the session.

Important Terms to Remember for Survival in the Wilderness!

Panel – a rectangle in the sidebar

Widget - a portable chunk of code that gets put anywhere in Notes – as a sidebar panel, or elsewhere

Component – very generic term for any kind of building block – A widget can have components, composite apps have components

Notes View – table of Notes data (.nsf)

Eclipse View – a way to display information (can get the data from a Notes .nsf or elsewhere)

Let’s Begin Philippe’s Sidebar Safari

Manipulate the sidebar and its panels

Explore the My Widgets sidebar panel and setting preferences

Add a Notes view to the Sidebar

Corral the Inbox into the sidebar

Track local gas prices in a sidebar panel

Observe “Widget culture” in all 4 configurations

Trek through “Google Gadget Park” for a Live weather panel and mailing it home to a friend

Philippe: 1. Manipulate the Sidebar (1 of 5 slides)

The Sidebar has 3 states:

Open

Thin

Closed

Go to View – Right Sidebar

To change the state

Or, click the dark area of the splitter (it turns orange on hover).

First click = Thin

Second click = Close

Philippe: 1. Manipulate the Sidebar (2 of 5 slides) This is what the Sidebar looks like in “Thin” mode (there are 4 Sidebar panels by default; this screenshot shows more) This is what the Sidebar looks like when it is closed.

Philippe: 1. Manipulate the Panels in the Sidebar (3 of 5)

Make sure your sidebar is Open (View – Right Sidebar Panels – Open)

The Sidebar has panels. A panel can be

Maximized

Minimized to a Title bar

Minimized to an icon

Restored

Hidden

To Drag to resize: put your mouse at the top of a title bar. Wait for the “double-headed arrow”, then drag up (or down). Keep dragging up and you’ll see the other title bars get minimized to icons at the top. To Maximize, click the 3 rd button in the title bar Click the middle button to minimized (Or, if minimized, it will restore)

Philippe: 1. Manipulate the Panels: Hide a Panel (4 of 5) Go to View – Right Sidebar Panels - <Panel name> and uncheck the name of the panel you want to hide.”

Philippe: 1. Manipulate the Panels with the Panel Menu (5 of 5) The first button in the title bar is the panel menu Actions specific to that panel are at the top of the menu Actions generic to all panels come next Menu items for manipulating the sidebar, and hiding specific panels are repeated from the View menu for easy access

Philippe: 2. Explore the Widgets Sidebar and Set Prefs (1 of 5)

The My Widgets Sidebar panel is a way to add and manage additional sidebar panels.

Turn on the Widgets sidebar panel and toolbar by going to File – Preferences – Widgets

Choose File - Preferences Choose Widgets

Philippe: 2. Explore the Widgets Sidebar and Set Prefs (2 of 5)

Check ”Show Widgets Toolbar and the My Widgets Sidebar panel”

Enter the widget catalog server: 72.51.41.44 (this is a public catalog brought to you by the Turtle partnership)

Enter the catalog name: Widgetcatalog.nsf

Click Apply and Wait for the “Categories to install” to appear, but do NOT check any yet.

Click OK

Philippe: 2. Explore the Widgets Sidebar and Set Prefs (3 of 5) You should now see a new toolbar with 3 buttons You should now see a “My Widgets” Sidebar panel

Philippe: 2. Explore the Widgets Sidebar and Set Prefs (4 of 5) Open up the Notes Widgets catalog to browse what you can add: From the Panel menu, choose Catalog - Browse

Philippe: 2. Explore the Widgets Sidebar and Set Prefs (5 of 5) The notes Widgets catalog is a plain old Notes database that you can browse or search This catalog sooo cool, you’ll want to make a sidebar panel for it!

Philippe: 3. Add a Notes View to the Sidebar—Widget Catalog (2 steps)

Add the “By Category” view of the Notes Widgets catalog to the sidebar

Simply click the “Add to Sidebar” toolbar button (or the corresponding menu item on the Tools – Widgets menu)

Philippe: 3. Add a Notes View to the Sidebar – Widget Catalog

Wait, wait… voila! You have a new sidebar panel

The widget catalog shows up as a sidebar panel, and is removed as a tab It does not look that great– more about how to customize it from Michaela’s safari in a bit.

Philippe: 4. Corral the Inbox into the Sidebar

You can put any Notes view (or document!) into the sidebar by clicking the “Add to Sidebar” toolbar button

HOWEVER, the Java views present a problem– they don’t work as sidebar panels. The workaround?

Open the “old traditional” view

Press CTRL + ALT when you open any of the java views (Mail, Calendar Contacts, To dos, Notebook)

Put focus on Mail in the Open list. Press CTRL+ ALT, and then click

Philippe: 4. Corral the Inbox into the Sidebar

Click the “Add to Sidebar” toolbar button

Once the old version of the mail template is open, just click the “Add to Sidebar” button

Philippe: 4. Corral the Inbox into the Sidebar A mail sidebar appears, and the mail tab along the top is closed

Philippe: 4. Corral the Inbox into the Sidebar Drag the outline view closed so that you can more easily see who is sending you mail Michaela will have a more sophisticated way to do this on her safari

Philippe: 5. From Widget Catalog, Track Local Gas Prices in a Sidebar Panel (7 Steps)

From the My Widgets Panel menu, choose Catalog-Browse

Open up the Notes Widgets catalog to browse what you can add: From the Panel menu, choose Catalog - Browse

Philippe: 5. Track Local Gas Prices in a Sidebar Panel Search for the “Gas prices by zip code” widget by typing “zip” in the search center

Once the catalog is open, type “zip’ in the search center to search for zip code widgets

Philippe: 5. Track Local Gas Prices in a Sidebar Panel You should get 2 results. Double-click the “Local Gas Prices for _UP_zipcode to open it

To open the zip code widget, double click “local Gas prices for _UP_Zipcode

Philippe: 5. Track Local Gas Prices in a Sidebar Panel Once the form is open, install the widget by going to: Tools – Widgets – Install this Widget…

Go to Tools – Install this Widget to install it

Philippe: 5. Track Local Gas Prices in a Sidebar Panel The “Introductory text” disappears from the My Widgets sidebar panel, and a thumbnail of your gas prices should appear

Philippe: 5. Track Local Gas Prices in a Sidebar Panel

To Open the new Gas prices widget in its own sidebar panel, right-click to display a context menu

Choose Open in – Sidebar Panel. The Local Gas prices widget opens in its own sidebar panel

Enter the zip code for the Dolphin hotel here in Orlando –32830

Press OK

Philippe: 5. Track Local Gas Prices in a Sidebar Panel The form disappears and you get a table of gas prices in the sidebar panel

Philippe: 6. Observe “Widget Culture” in all 4 Configurations

We’ve opened a widget as a sidebar panel, but Philippe can open widgets in other ways:

Tab

Sidebar panel

New Window

Floating Window

Open the Gas prices widget as a tab:

Philippe: 6. Observe “Widget Culture” in all 4 Configurations The Gas prices form as a tab

Philippe: 6. Observe “Widget Culture” in all 4 Configurations Open as a new window. Right-click and choose Open in – New Window

Philippe: 6. Observe “Widget Culture” in all 4 Configurations Open as a floating window. Right-click and choose Open in – Floating Window (floating window has different opening animation)

Philippe: 7. Trek Thru “Google Gadget Park” for Live Weather

Goal: Put the Live Weather Google Gadget (from the Google Gadget catalog), add it to the sidebar, and then mail it to a friend

Go to the Google Gadgets web site by choosing Configure a Component from – A Google Gadget (from the Panel menu)

A wizard is launched; choose to browse the Google Gadget directory, and click Finish

A Browser tab opens with the Google Gadget Web site

Click the Weather forecasts to open that page

Click the “Add to Sidebar” button; See that the Weather gadget has been added to your sidebar

Edit the weather location to make it Orlando

Click Edit

Edit the weather location to make it Orlando

Enter the Orlando zip code 32830

Mail the Live Weather Gadget to a friend

Click the My Widgets title bar to Open the My Widgets Panel

Click the title bar to maximize the My Widgets panel

Locate the Live Weather thumbnail in the My Widgets Sidebar

Left-click to select it

Left-click to select the live weather thumbnail Note that the live weather widget (and thumbnail) might look different from this screenshot if Google changes its appearance

Right-click and choose “Email to…”

Right-click and choose “Email to..”

A mail message opens (note the boilerplate text; you can change it)

Address the email to a friend (or yourself for testing purposes)

Address the email to a friend who has Notes 8.5 You can change the boilerplate text (and subject) but DO NOT TOUCH the XML attachment!

Click Send to send the message

Click Send

Questions about Philippe’s Safari?

We’ll take 5 Minutes to answer questions about Philippe’s Safari before we move on to Fred’s

Let’s Begin Fred’s Safari:

Set desktop policy to deploy the sidebar

Set desktop policies to deploy widgets

Deploy a widget catalog

Fred: 1. Set Desktop Policies to Deploy the Sidebar (9 Steps)

Fred can control whether Philippe sees the Sidebar

Open Pubnames.nsf

Create a new policy by clicking the Add Policy Action bar button

Click Add Policy

Fred: 1. Set Desktop Policies to Deploy the Sidebar

Fill in the fields as appropriate

Locate the Desktop policies

Click New

Click New

Fred: 1. Set Desktop Policies to Deploy the Sidebar

Click the Preferences tab

Click the Window Management tab

In the “Display sidebar” dropdown, choose Yes (this is the default so to give users the sidebar, you really do not have to do anything)

Click Save & Close

Click Preferences Click Window Management Choose to display the sidebar (This is the default)

Fred: 2. Set Desktop Policies to Deploy Widgets

Fred can control many things in the widgets sidebar or toolbar and catalog by using Domino Policy

You should be on the New Policy page (after saving and closing the sidebar setting)

Click New for Desktop policy again to set widget policies

Click the Widgets tab

Click New Click Widgets

Fred: 2. Set Desktop Policies to Deploy Widgets

Not all Widget policy settings have to do with the sidebar

Complete the pertinent fields

Default catalog name is toolbox.nsf; change to Noteswidgets.nsf Public server is 72.51.41.44

Fred: 2. Set Desktop Policies to Deploy Widgets Widget Categories to install refers to the categories from the widget catalog. Widgets in these categories automatically get installed on Philippe’s computer You have to type in these categories by hand in the policy, separated with a comma

Fred: 2. Set Desktop Policies to Deploy Widgets If you turn on “Show the My Widgets panel…” in this policy, then Philippe sees the My Widgets sidebar panel and toolbar automatically This will be checked on

Fred: 3. Deploy a Widget Catalog: Overview of Steps

Get the template, put it on a server

Set Access control

Create Categories

Enable the Sweeper agent

Verify that the low-priority replication schedule is working

Fred: 3. Deploy a Widget Catalog: Get the Template

Obtain the Widget Catalog template (TOOLBOX.NTF). The template is installed with the IBM® Lotus® Domino® server.

Create the catalog, for example named MyNotesWidgets.nsf, using the supplied TOOLBOX.NTF template

Fred: 3. Deploy a Widget Catalog: Set ACLs

Give Admins/power users read and write access to the catalog.

Give admins the [Admins] role

Give Admins/power users one of the following access rights to the catalog:

Manager

Designer

Editor

End users need reader access if they will not be adding to the catalog

Read and write access Admin role Add access rights

Fred: 3. Deploy a Widget Catalog: Create Categories

Choose which type of categories to create:

Admin categories (keywords) are locked and only the admin can add to them

User-defined categories (keywords) allow users to add categories and things to the categories

For Admin categories, Open the administration part and choose Keywords Click New Keyword

To create user-defined categories, go to the All Widgets view and click “Add Widget to Catalog”

All Widgets View Click Add Widget to Catalog

Locate the Category field and click to enter categories

Type in your categories or click to launch the keyword dialog Or type in keywords here

Fred: 3. Deploy a Widget Catalog: Enable Toolsweeper Agent

Deploying the agent is optional

This agent ensures that Widget documents are properly created and populated; if a problem is found the offending document is removed from the user views, is placed in the Administration/Document Queue, and an e-mail is sent to the document author informing him of the problem

From the widget catalog, go to View - Agents

Fred: 3. Deploy a Widget Catalog: Enable Toolsweeper Agent

Select the agent

Click Enable

Click Enable If you are looking at the public catalog on the turtleweb site, it is not there. You have to be using your own Widget catalog on your own server.

Fred: 3. Deploy a Widget Catalog: Local Replica

A local copy of the catalog will be created on the user's client system and periodically updated based on a 24 hour (default) replication schedule.

IMPORTANT! The catalog does not follow your replication schedule, it replicates once every 24 hours. Hardcoded. No choice.

Fred: Questions about Fred’s Sidebar Safari?

We’ll take 10 minutes for questions about Fred’s safari

Let’s Begin Michaela’s Sidebar Safari

Add a Notes view to the sidebar and edit the URL so the outline view is stripped off

Add the “Cheapest Gas Prices” Google Gadget

Create a “zip code” recognizer to that any where she sees a zip code, she can click and get the cheapest gas prices in a sidebar panel

Add the Digg iPhone app to the sidebar

Add a web app that requires authentication (Gmail)

Extend the Sidebar with Eclipse Development

Add an Eclipse view to the sidebar as a sidebar panel

Show and hide a sidebar panel automatically when she opens or closes mail

Programmatically close the entire sidebar when she opens any of the Symphony editors

Extra bonus if time: add a panel to the left or Right sidebar in a Composite Application without programming

Michaela: 1: Add a Notes View; Edit the URL openListMail_cropped.GIF

Open the “old traditional” Mail view (not the Java view)

Select Mail and hold down CTRL + Alt when the application opens

Michaela: 1: Add a Notes View; Edit the URL oldMailInbox_cropped.GIF When the Mail Application opens, Select a document in the Inbox view and open it.

Michaela: 1: Add a Notes View; Edit the URL mailDocOpen.GIF After the document opens, click the second button in the Widgets toolbar: “Configure a Widget from Current Context…”

Michaela: 1: Add a Notes View; Edit the URL The “Configure a component from Notes” dialog will open inboxConfigureNotes_cropped.GIF Select the second radio button, “Open a Notes view, document, or frameset”

Michaela: 1: Add a Notes View; Edit the URL

The Notes URL will be displayed in the text field below the radio button selection.

A Notes URL has the following format:

notes://server/db/view/document?Command&params=values

In this Example, the Notes URL has the following properties:

Server: d27ml602

Database: 862570390016DF7A

View: 38D46BF5E8F08834852564B500129B2C

Document: 468D1DF52D46A72985257512006CB029

inboxConfigureNotes_url1.GIF

Original Notes URL:

To hide the navigator:

First, remove the “document” part of the URL such that it is in the following format: notes://server/db/view

Then, we can add the following command and parameter: “OpenView&hidenavigator” (preceded by a question mark)

configureNotes_url2.GIF configureNotes_url3.GIF inboxConfigureNotes_url1.GIF

Click “Next” which will bring you to the “Configure a Component” wizard page

configureAComponent.GIF

Select “Display sidebar panel

Click Next to continue

Optionally, you can change the title of the sidebar panel here.

finishNotes.GIF inboxSidebar.GIF Michaela: 1: Add a Notes View; Edit the URL Click finish at the “Test and Publish” wizard page See your inbox view open up in your sidebar with the navigator hidden

Michaela: 2. Add “Gas Price by Zip Code” to Catalog (22 steps)

Philippe added the “Gas price by zip code” widget from the catalog. This exercise explains how Michaela built it, assigned a static zip code, and put it in the catalog.

From the My Widgets Sidebar Panel menu, choose Configure Component from – Google Gadget

Michaela: 2. Add “Gas Price by Zip Code” to Catalog

Take the defaults: Browse the Google Gadget directory

Click Finish

The embedded browser opens to the Google Gadget Catalog

Search for “Gas prices”

Click to open the gas price widget page

Click the toolbox icon to “Configure a Component from Current Context”

Click the toolbox icon

Take the default to configure a Google Gadget

Agree to the Google Gadget terms of service

Name the component “Gas Prices for Orlando”

Enter the default value (the Orlando zip code) of 32830

Choose to display as a Sidebar panel

Add the Orlando zip code of 32820 as the default value

Read the info. Make sure you test!

Click Finish

A thumbnail of the gas prices component appears in the My widgets sidebar.

Watch carefully! Because then in a minute, the actual gas prices sidebar panel appears and makes the My Widgets panel collapse

Watch for the thumbnail of the gas Prices component

The gas prices sidebar panel appears

This differs from the one Philippe added because Michaela hardcoded the Orlando zip code

Michaela: 2. Add “Gas Price by Zip Code” to Catalog: Publish

Open the My Widgets Panel

Locate the Gas prices thumbnail

Right-click and choose “Publish to Catalog”

Choose “Publish to Catalog” to publish to the catalog listed in your preferences. Wait! You might not want to actually publish if you are pointing to the public catalog on the Turtleweb site– it will end up having LOTS of gas prices widgets!

Michaela: 2. Add “Gas Price by Zip Code” to Catalog: Publish You can see that I was able to published mine

Michaela: 3. Create Zip Code Recognizer for Live Text Results in Sidebar (12 Steps)

Return to the Gas Prices Google Gadget and click the Toolbox Icon to launch the wizard

Give it a new name This time, leave the default value blank because we’re going to hook it to zip codes in Notes documents Wire it as an action Start by clicking the toolbox icon

Michaela: 3. Create Zip Code Recognizer for Live Text Results in Sidebar

The “Address” recognizer is shipped with Notes. Choose address as the recognized content (Ensure that the policy is enabled for “Enable default recognizers)

Wire address.zip to Zip Code

Choose Sidebar

Choose Address Wire address.zip (as part of the address recognizer) to the Zip Code component property Choose Zip Code Choose Sidebar (because we’re on a Sidebar Safari)

Read the summary and test it

Click Finish

Ensure the new component was saved (Find the thumbnail of your new Zip code component)

Open a document that has one or more zip codes in it

Click the zip code to see if your new action is listed

Locate your new Zip code recognizer component Here’s the new action

Click your new Live text action

See the results open in a sidebar panel

Return to My Widgets panel and publish to catalog if you want

Michaela: 4. Add the Digg iPhone App to Sidebar clientGettingStarted.GIF Click the first button on the Widgets toolbar “Getting Started with Widgets…”

Michaela: 4. Add the Digg iPhone App to Sidebar webStartConfig.GIF Select the second radio button: “Web Page” Click Next to continue

Michaela: 4. Add the Digg iPhone App to Sidebar webConfigURL.GIF Select the second radio button: “Web page by URL” and type in the URL “ http://www.digg.com/iphone ” Click Next to continue

Michaela: 4. Add the Digg iPhone App to Sidebar webConfigWebPage.GIF Select the first radio button: “The Web Page: Build a component from the web page (HTTP GET)” Click Next to continue

Michaela: 4. Add the Digg iPhone App to Sidebar webPreview.GIF Click Next to continue View a preview of the Digg web app

Michaela: 4. Add the Digg iPhone App to Sidebar webConfig.GIF Select the second radio button “Display as a sidebar panel” Click Finish

Michaela: 4. Add the Digg iPhone App to Sidebar webInClient.GIF The Digg view opens up in the sidebar

Michaela: 5. Add Web App that Requires Authentication (Gmail) webBrowserOpenList.GIF

Open the Web Browser application

Michaela: 5. Add Web App that Requires Authentication (Gmail) gmailInBrowser.GIF

Type http:// gmail.google.com (or any other mail web app) in the address bar

Click the second button in the Widgets toolbar: “Configure a Widget from Current Context…”

Michaela: 5. Add Web App that Requires Authentication (Gmail) webAuthConfig.GIF

The Configure a Component wizard opens and detects two options from the context: Configure a component from this web page or Configure a component from a form on this web page.

Choose the first option: “This Web Page…(HTTP GET)”

Check the “authentication required” check box at the bottom and click Next

Michaela: 5. Add Web App that Requires Authentication (Gmail) webAuthChooseForm.GIF

Choose the correct login form in the table at the top (make sure you are logged out of the page). In this case, there is only one form on the page. If there were more than one, you could select the different numbered forms and see the corresponding fields get highlighted in green in the web page below.

Notice the Username and Password fields are highlighted in green since the correct form, Form 1, is selected at the top.

Choose the correct form and click Next to continue

Michaela: 5. Add Web App that Requires Authentication (Gmail) webAuthAccount.GIF

Create a new account, if one does not already exist for this website. Give the account a unique name.

Enter your log in credentials for Gmail (or whichever web app you decided to use). If you don’t have one, you can use: Username: sidebar.safari Password: lotusphere

Michaela: 5. Add Web App that Requires Authentication (Gmail) webAuthentication.GIF

If login was successful, you will see yourself logged into the Web page on the next screen. If not, press Back and fix any mistakes.

Click Next to continue.

Michaela: 5. Add Web App that Requires Authentication (Gmail) webAuthModifyURL.GIF

On the next page, you will be given the opportunity to modify the URL to include any parameters. This is not needed since we are simply viewing our email inbox.

Click next to continue

Michaela: 5. Add Web App that Requires Authentication (Gmail) webAuthConfigComponent.GIF

Once again, we see the Configure a Component wizard page

Click Display as a sidebar panel at the bottom, and click Finish

Michaela: 5. Add Web App that Requires Authentication (Gmail) webAuthInSidebar.GIF Gmail view opens up in the Sidebar

Michaela: 6. Extending the Sidebar with Eclipse development

We will now begin the exploration of extending the Sidebar via Eclipse plug-ins. On this journey, Michaela will be:

Adding an Eclipse view to the sidebar as a sidebar panel

Showing and hiding a sidebar panel automatically when she opens or closes mail

Programmatically closing the entire Sidebar when she opens any of the Symphony editors

Note : You should already be set up to launch Notes from the Eclipse IDE. If not, please refer to the instructions at the end of this presentation on how to set that up.

Michaela: Extending the Sidebar with Eclipse development twitnotes.GIF TwitNotes (image stolen from http://lekkimworld.com) journalIt.GIF Journal It (sample provided at http://www.ibm.com/developerworks/lotus/library/notes8-context/ ) Why? To create your own custom panel in the Sidebar. Here are some examples:

Michaela: Extending the Sidebar with Eclipse development contextView.GIF Let’s now add our own custom panel to the Sidebar. At the end of this journey, you will have a new panel called “Journal It” in your Sidebar. This panel is context sensitive – it responds to a user’s selection!

Michaela: 6.1. Adding an Eclipse view to the sidebar

It only takes 3 steps to add an Eclipse view to the sidebar

Create an Eclipse ViewPart

Contribute that ViewPart by creating a view extension in the plugin.xml

Create a shelfView extension in the plugin.xml

Let’s see how this is done in our sample project – launch the Eclipse IDE now to get started!

importproj.GIF Michaela: 6.1. Extending the Sidebar with Eclipse Development eclipseImport.GIF

First, import the project provided in lotusphereShow103.zip by going to File - Import

Select “Existing Projects into Workspace” under General and click Next

Click Browse, and go to the unzipped lotusphereShow103 directory

Select all the projects and click Finish

Michaela: 6.1 Adding an Eclipse View to the Sidebar contextViewPackageExplorer.GIF

Expand the project com.ibm.lotuslabs.journal.ui.context in the Package Explorer view

Open JournalCurrentViewPart.java in the lotusphere.samples.views package

It extends the abstract class org.eclipse.ui.part.ViewPart

When extending that class, you only need

to fill in two methods:

createPartControl(Composite parent)

setFocus()

We have already filled these in for you 

Michaela: 6.1. Adding an Eclipse View to the Sidebar

Open the plugin’s plugin.xml file and search for “org.eclipse.ui.views”

We have added the extension as seen below:

Let’s now add that view to the sidebar by contributing it to the “com.ibm.rcp.ui.shelfViews” extension point

Open the plugin.xml in com.ibm.lotuslabs.journal.ui.context

eclipseAddExt.GIF 1. Click on the Extensions tab 2. Click Add… to add a new extension

Michaela: 6.1. Adding an Eclipse View to the Sidebar eclipseNewExt.GIF eclipseNewShelfView.GIF Right click on the new extension point to bring up its context menu. Go to New - shelfView Start typing “ com.ibm.rcp.ui.shelfViews ” in the text field next to “Extension Point filter:” Select it and click Finish

Michaela: 6.1. Adding an Eclipse View to the Sidebar eclipseShelfViewIdt.GIF eclipseviewId.GIF You will see the different shelfView properties are listed on the right The “view” property in the shelfView extension must correspond to the “id” property in the org.eclipse.ui.views extension The “view” property in the shelfView extension must correspond to the “id” property in the org.eclipse.ui.views extension

Michaela: 6.1. Adding an Eclipse View to the Sidebar eclipseShelfDone.GIF Set a unique ID for the shelfView Choose the region of the sidebar in which you want the panel to show up Keep default as true to show the titlebar Choose which sidebar to display the panel. Lotus Notes 8.5 allows RIGHT or LEFT

ShelfView Attributes

id – unique identifier for shelf

view – identifier of the view as defined by the org.eclipse.ui.views extension

page – (optional) RIGHT | LEFT page names for sidebars on right and left sides of the Notes client. By default, the view will be placed in the RIGHT sidebar

region – (optional) TOP | MIDDLE | BOTTOM placeholders position the view in the respective areas in the sidebar

showTitle – (optional) boolean describing whether or not to show a titlebar. By default, this is true

Press Ctrl+S to save changes

Switch to the plugin.xml tab at the bottom

eclipseShelfDonePluginxml.GIF You can now see new lines added to the plugin.xml file representing the new shelfView contribution

Michaela: 6.1. Adding an Eclipse View to the Sidebar Now, let’s launch the client! See the new panel titled “Journal It” now appears in the right sidebar

Michaela: 6.2. Programmatically Show/Hide a Panel

Now that we know how to add a panel, we can programmatically show and hide it.

Why?

You want the user to view information in a sidebar panel when a particular application opens in the main area

You want the user to perform an action in a particular sidebar panel when they select something in the main tab

In our next activity, we are going to associate the panel we just added with Mail. We want to change it such that users will only see the Journal It Panel when they are working with their Mail inbox.

Mail tab active with Journal It open

Michaela: 6.2. Programmatically Show/Hide a Panel contextHidden.GIF

In our next activity, we are going to associate the panel we just added with Mail. We want to change it such that users will only see the Journal It Panel when they are working with their Mail inbox.

Getting Started tab active with Journal It now closed

In order to manipulate the Sidebar, we want to programmatically get access to the com.ibm.rcp.ui.ShelfPage

Open up Activator.java

Locate the convenience method getShelfPage() :

ShelfPage controls the entire sidebar. It gives you access to some useful methods, includi

showView(String viewId, String secondaryId, int mode )

hideView(IViewReference ref)

setMode(int mode)

getMode()

There are 3 modes you can specify when showing a panel:

ShelfPage.VIEW_CREATE – creates the view, but does not expand it

ShelfPage.VIEW_VISIBLE – creates the view, expands it, but does not bring focus to it

ShelfPage.VIEW_ACTIVATE – creates the view, expands it, and brings focus to it

Now, find the activityListener inside Activator.java and add the following to show and hide the view when Mail is active:

mailContext.GIF Michaela: 6.2. Programmatically Show/Hide a Panel Launch the client again and open Mail See that the panel is visible at the bottom of the Sidebar

Michaela: 6.2. Programmatically Show/Hide a Panel Try switching back to the Getting Started tab contextHidden.GIF See that the panel is now hidden and the Sametime Contacts panel is open instead

Michaela: 6.3. Programmatically Close Entire Sidebar

We can also programmatically change the mode of the sidebar:

mode_open.GIF mode_thin.GIF mode_closed.GIF

Why?

You want to close the sidebar because your application needs as much screen real estate as possible

You want to make sure a particular panel is visible whenever the user opens a particular application

Open Thin Closed

Since Symphony has its own sidebar, it has no need for ours.

In this next activity, we will now show you how to programmatically close the Sidebar any time a Symphony application becomes active, and restore the Sidebar state when it closes or another tab is activated.

In Activator.java, add the following to the perspective listener:

Michaela: 6.3. Programmatically Close Entire Sidebar Launch Notes, and open Symphony Document, Presentation, or Spreadsheet symphony.GIF Notice the Notes Sidebar is closed, and only the Symphony sidebar appears on the right

Michaela: 6.3. Programmatically Close Entire Sidebar Switch to the Getting Started tab symphonyDeactive.GIF Notice the Notes Sidebar is reopened to the state it was in before we opened Symphony

Michaela: 6.3. Programmatically Close Entire Sidebar Note: we added the listeners in our Activator class because we do not own the Symphony applications. If you wanted to manipulate the Sidebar when your own application opens, you can do that directly in your application code, rather than when the plugin bundle starts up.

Michaela: 7. Add Panel in a Comp App CAappNew.GIF In 8.5, Composite Applications used our API to implement the new feature of allowing users to add components to the Sidebars without programming. Let’s try this now! CAblank.GIF Go to File > Application > New… Enter in a Title Select Blank Composite Application and hit OK

Michaela: 7. Add Panel in a Comp App CAeditApp.GIF When the empty application opens, go to Actions > Edit Application to open up the Comp App Editor

Michaela: 7. Add Panel in a Comp App In the Editor, you can drag components from the Component palette to the main area OR to the Right or Left Sidebar labels in the Sidebars view CAE.GIF Page navigator listing the different pages in your Comp App Main area displaying views in the selected page Component palette Sidebars view

Michaela: 7. Add Panel in a Comp App

Drag any component to the main area, such as Managed Browser

Drag a component to the Right Sidebar, such as Mail Mini view. When you hover over the label, you will see the rectangle indicator around the label and the mouse cursor changes

Drag a component to the Left Sidebar, such as Recent Collaborations

CArightSidebar.GIF CAEcomponents.GIF

See the components listed after they are added, and notice the Sidebar tab at the top to allow you to view Sidebar

Michaela: 7. Add Panel in a Comp App CAEsave.GIF CAinclient.GIF Close the Comp App and select Yes at the dialog to save changes. See that we now have 2 new sidebar panels, one on the left and one on the right

Questions about Michaela’s Safari?

More Information

Domino Administration Infocenter http://publib.boulder.ibm.com/infocenter/domhelp/v8r0/index.jsp

Open NTF widget catalog: http://openntf.org/mywidgets

Extending the IBM Lotus Notes V8 sidebar and toolbar (http://www.ibm.com/developerworks/lotus/library/notes8-sidebar/)

Leveraging user context in the IBM Lotus Notes V8 sidebar and toolbar (http://www.ibm.com/developerworks/lotus/library/notes8-context/)

Related session: AD209– What’s New in Lotus Notes Widgets and Live Text: Linking Your Data to the World

Follow www.NotesDesignBlog.com

We Hope You Enjoyed Your Safari

Don’t Forget to Fill Out Your Evaluation!

Instructions: How to launch Notes from Eclipse IDE (1/5)

The next few slides cover the following instructions in detail:

Launch your Eclipse IDE (the screenshots will show version 3.2.2)

Set the target platform

Add the Notes JRE

Create a runtime configuration in the Run/Debug dialog

eclipseTargetPlatform.GIF eclipseWindowPrefs_cropped.GIF Instructions: How to launch Notes from Eclipse IDE (2/5)

Launch your Eclipse IDE (the screenshots will show version 3.2.2)

Set the Target Platform and JRE by going

to Window > Preferences

1. select Target Platform in the tree control on the left 2. In the Location control, type or browse to “C:Program FilesIBMLotusNotesframeworkeclipse” and click Reload 3. Click Apply

Create an additional installed JRE

Expand the Java node in the tree control on the left

Select “Installed JREs”

Click Add

For JRE name, enter Notes JRE

Enter or browse to C:Program FilesIBMLotus otesframework cpeclipsepluginscom.ibm.rcp.j2se.win32.<version number> for the JRE Home Directory

See the jar files populate in the area below

Create a runtime configuration in the Run/Debug dialog

Choose Run - Run, and then select Eclipse Application.

Right-click and choose New, and enter a name (for example, Notes).

Under Program to Run, select “Run a product,” and then select com.ibm.notes.branding.notes.

In the Runtime JRE, select Notes JRE.

In the Arguments tab, enter the following in the Program arguments text box: -personality com.ibm.rcp.platform.personality -product com.ibm.notes.branding.notes -debug -console

Enter these arguments in the VM arguments text box : -Drcp.home=${notes.install}framework

-Drcp.install.config=user

-Dosgi.install.area=${notes.install}framework cpeclipse

-Dcom.ibm.pvc.osgiagent.core.logfileloc=${notes.install}framework cp

-Dcom.ibm.pvc.webcontainer.port=0

-Declipse.pluginCustomization=${notes.install}framework cpplugin_customization.ini

-Declipse.registry.nulltoken=true

-Djava.protocol.handler.pkgs=com.ibm.net.ssl.www.protocol

-Djava.util.logging.config.class=com.ibm.rcp.core.internal.logger.boot.LoggerConfig

-Dosgi.hook.configurators.exclude=org.eclipse.core.runtime.internal.adaptor.EclipseLogHook

-Dosgi.framework.extensions=com.ibm.rcp.core.logger.frameworkhook

-Djava.security.properties= file:$ {notes.install}framework cpeclipseplugins${rcp.base} cp.security.properties

-Xbootclasspath/a:${notes.install}framework cpeclipseplugins${rcp.base} cpbootcp.jar;

-Xss384k

Finally, follow these steps to complete the runtime configuration:

Click Variables.

Click Edit Variables.

Click New.

Enter notes.install for the name.

Enter the path where you installed Lotus Notes for the value, and then click OK. This path should not have any spaces in it. For example, if you installed to C:Program FilesLotusNotes, your notes.install value should be: C:PROGRA~1IBMLotusNotes.

Repeat steps 1 to 3.

Enter notes.data for the name.

Enter the location of your data directory for the value, and then click OK. For example, use the default: C:PROGRA~1IBMLotusNotesData.

Repeat steps 1 to 3.

Enter rcp.base for the name.

Enter the version of the folder name for com.ibm.rcp.base plug-in that is installed for the value, and then click OK. To do so, go to the following location: <notes install location>framework cpeclipseplugins. There is a folder that looks like com.ibm.rcp.base_6.1.1.<date>. For example, in Lotus Notes Beta 3, this value is com.ibm.rcp.base_6.1.1.200705170110.

Click OK, and then click Cancel to the Select Variable dialog box (if you click OK to select the variable, it adds the variable at the insertion point).

Legal disclaimer Please delete all instructions (text in red) and insert this information at the end ofexternal publications.

The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.

References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.

If the text contains performance statistics or references to benchmarks, insert the following language; otherwise delete:

Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.

If the text includes any customer examples, please confirm we have prior written approval from such customer and insert the following language; otherwise delete:

All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer.

Please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM Lotus® Sametime® Unyte™). Subsequent references can drop “IBM” but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server). Please refer to http://www.ibm.com/legal/copytrade.shtml for guidance on which trademarks require the ® or ™ symbol. Do not use abbreviations for IBM product names in your presentation. All product names must be used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included in your presentation.

IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.

If you reference Adobe® in the text, please mark the first use and include the following; otherwise delete:

Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries.

If you reference Java™ in the text, please mark the first use and include the following; otherwise delete:

Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

If you reference Microsoft® and/or Windows® in the text, please mark the first use and include the following, as applicable; otherwise delete:

Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.

If you reference Intel® and/or any of the following Intel products in the text, please mark the first use and include those that you use as follows; otherwise delete:

Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.

If you reference UNIX® in the text, please mark the first use and include the following; otherwise delete:

UNIX is a registered trademark of The Open Group in the United States and other countries.

If you reference Linux® in your presentation, please mark the first use and include the following; otherwise delete:

Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.

Other company, product, or service names may be trademarks or service marks of others.

If the text/graphics include screenshots, no actual IBM employee names may be used (even your own), if your screenshots include fictitious company names (e.g., Renovations, Zeta Bank, Acme) please update and insert the following; otherwise delete: