Top
Search

Categories
Tags
Archives
Recent Entries
Latest Comments
Latest FAQ's
RSS
Linkage

Entries in Controls (5)

Thursday
10Dec2009

dominoOutline Control

DateThursday, December 10, 2009 at 7:12PM

One of the things I have missed with XPages is an effective Outline control.  There have been a range of solutions published but none have met my needs.  So I decided to build my own as part of the xDomino Framework.

My first effort was based upon the implimenting the standard Notes Client Outline control as a dojo dijitree.  This provided the tree structure needed for an outline but there were issues.  As the outlines got more complex they would cease to render correctly on Internet Explorer.  In Firefox the digitree would still appear but could take several minutes to load.

The inspiration for my next effort came from Elguji's iPhone interface for idea jam.  It brings simplicity to the outline design as well as a design pattern that is becoming known and liked by an increasing number of people.  It also offers the advantage of being able to be implemented as a solution for the Notes classic, Web client, and mobile devices.  The following examples of the outline can be viewed at www.dominoframework.com.

The outline is generated using three custom controls.  A style sheet is then used to style the outline to have a similar look to the iPhone.

dominoOutline

The dominoOutline control acts as a container control for the outline. The dominoOutline control contains two facets.  The first for (optional) dominoHomeEntry controls and the second for the dominoOutlineEntry controls. The control has a single property:-

  1. Title: Text that appears at top of outline

Note: To provide the full flexibility of Outlines the outline control would be placed on an Xpage which is then placed in the left frame of a framset.

dominoOutlineEntry

A panel control is first added to the dominoOutline control to allow multiple dominoOutlineEntry controls to then be added to build the outline.  The dominoOutlineEntry has five properties allowing it to be customized:-

  1. text: The text to appear in the outline entry
  2. url: The url to be launched when the outline entry is selected
  3. target: The target frame into which the url is to be launched
  4. icon: An optional icon to be displayed with the outline entry
  5. menu: Set to true to denote the entry links to a submenu.  (used to add the menu icon >)

dominoHomeEntry

The dominoHomeEntry control is used for submenus as a way of navigating up one or more levels much in the same way as breadcrumbs work.  The control has two properties:-

  1. text: The text to appear in the outline entry
  2. url: The url that returns to that home menu

dominoOutlookDivider

This is not a control, but by adding and styling a division it is possible to group outline entries as demonstrated below.

Example:

The Code

The code for these controls is s little lengthy for a blog.  I will shortly post the code for this and the dominoToolTip control as a new download on OpenNTF.  These controls will also be included (later) in the xDominoFramwork project on OpenNTF.

 

AuthorPeter Presnell | Comment1 Comment |
tagged , , in
Tuesday
10Nov2009

Working out the API for Xsp Classes in XPages

DateTuesday, November 10, 2009 at 1:30AM

One of the biggest problems I have is interacting with the various components of an XPage programatically. It's not that I can't get hold of them, but it is that I don't know what classes they are from a Java point of view, and therefore don't know what methods and properties I have available to me.

So my solution is to first create an error. Say, for example, I want to programatically control a Pager control. I'll add a button to my XPage with an onClick event something like this:

getComponent("pager1").setStart(1);

I know this will fail, but if I have the default error page enabled then I'll get an error message like this:

And from the error message I can now tell that the object I want to talk to is of the class "com.ibm.xsp.component.xp.XspPager" and when I add that to the variable definition I'll get full type ahead of the API for that class in Domino Designer. So now I know that I can write something like this:

var pager:com.ibm.xsp.component.xp.XspPager = getComponent("pager1");
pager.gotoFirst();

AuthorMatt White | Comment5 Comments | Reference2 References |
tagged , , in
Tuesday
18Aug2009

File upload control and partial refresh

DateTuesday, August 18, 2009 at 2:55AM

If you use a file upload control on your XPage, make sure your submit/save button does a full refresh, not a partial refresh.

It seems that in 8.5.0 a partial refresh causes the upload control to fail, a file is not saved to the document.

AuthorJulian Buss | CommentPost a Comment |
tagged , in
Thursday
23Jul2009

Combobox, Formula Item for Values and Partial Refresh and What # and $ are for

DateThursday, July 23, 2009 at 12:13AM

I just came across the issue that I had a combobox with values taken from a "formula item".

But: the values didn't refresh on a partial refresh. I found that in the script editor for "values -> formula item" there is no choice between "compute dynamically" and "compute on page load". So I guess it's hard-wired to "compute on page load", which explains why the values don't compute again on a partial refresh.

Luckily, we have the source view of the XPage. And what you perhaps didn't know yet (but what I'm going to tell you right now) is: when you see a piece of server side javascript in the source view of a XPage, there is a leading "$" or "#". These prefixes define if that javascript is computed dynamically (#) or computed on page load ($).

So, brave as I am I just tried to change the $ prefix of the combobox values' javascript to a # and ét voilá, the values are computed on a partial refresh.

Remember two things:

(1) the prefix "#" means "compute dynamically, "$" means "compute on page load"

(2) the source view is your friend if you miss some switch or property in some editor

 

AuthorJulian Buss | CommentPost a Comment |
tagged in
Wednesday
15Jul2009

Using Themes In XPages Part Two

DateWednesday, July 15, 2009 at 9:42AM

In the last part of this mini series I showed you how to add basic resources to a theme document but I also mentioned that when you use themes you need to keep a cheat sheet handy because the class names are not listed in the styles property tab for any control.

There is, however, another feature of theme documents that can make things easier by automatically applying style classes to certain controls.

Lets say you have written some CSS that you want to use on all the 'Pager' controls in your application. You could manually add the style names to the styleClass property each time you add a pager to your application or you can use the theme document by adding a control section that looks like this

<control>
 <name>Pager</name>
 <property>
 <name>outerStyleClass</name>
 <value>myPagerContainer</value>
 </property>
 <property>
 <name>styleClass</name>
 <value>myPager</value>
 </property>
 </control>

The name of the control your are specifing the properties for is in the name tag. There are a lot of controls and even sub controls that you can include in here from the simple controls like 'link' or 'text' or 'button' to the more advanced ones like 'PagerControl.Pager.First' or 'DataTable.ViewPanel'. next we define the property that we want to manage using a <property> tag and inside that tag we specify the name and value. In most cases the name of the property that we want to manage will be 'styleClass' but as you can see in my example about there may be other properties like 'outerStyleClass' or 'selectedTabStyleClass' ( which you'll find in a tabbed panel control).

If you are extending a built in theme like oneui that the theme document may already have a <control> section for the control you are setting up your default properties for. Under normal circumstances extended themes are merged in with your theme but you can override this by adding an override attribute to the control tag like this

<control override='true'>

The control override will ensure that your control property definitions take precidence and none of the property definitions from the theme you are extending will bleed through into your application.

So what happens if you manually add a value to the styleClass property in your XPage? Well under normal circumstances the value manually specified overrides anything that may appear in the theme document for that control. So if you have a control property for buttons setup so that all buttons in your application look the same but you need to put in a special button using a different style you still can. This behaviour, however, can also be overridden in the theme document by adding a 'mode' attribute to a property tag like this

<control>
 <name>ViewRoot</name>
 <property mode="concat">
 <name>styleClass</name>
 <value>tundra</value> 
 </property>
 </control>

here I am using 'mode="concat" to make sure that the Dojo style call of 'tundra' is added to every Xpage. The control name 'ViewRoot' is equivilent to the <body> tag in the generated HTML.

In the next part I'll show you how to create special controls and how to apply them in the design of your XPage application.

Using Themes In XPages Part One

AuthorDeclan Sciolla-Lynch | Comment1 Comment |
tagged , in