JSF usage in Sakai

What this is - I got a list of all the JSF tags that I could see in use or as placeholders. This includes the sakai (sakai) core (f), and the HTML (h), as well as some odds and ends.

Working from a profound ignorance of how they actually work, but with a fairly clear idea of what a useful toolkit should do I tried to find out the following:

Are they doing the right thing?
Are we using them right?
How close does the rendering match the requirements when we do use them right?
What else do we need in the toolkit?

So what follows is a little discursive. I have tried to include, for each tag, examples in use, what the tag attributes of significance for the rendering should be for best results, as well as for the simple tags (such as the HTML series) how to use them according to the style guide

The f: (core) tags are a bit of a black box, so not much to say, the h: (html) tags present some difficulties that I try to point out, but the main issue here is the usage. The sakai: tags need revamping or maybe I need a better understanding of that particular library.

Examining all the different UI practives in the new JSF based tools I am struck by the wide variability in how the JSF gets used, what JSF gets used, what the rendered markup looks like, the degree of compliance to the declared doctype and accessibility standards.

This is a long list, but probably better than my first atempt to understand this

What is needed in my view is:

Regularize usage for consistency - with specific reference to usage of the JSF tags. This needs to be a good and useful doc and is probably the first things that needs to be done.
Update the existing sakai:xxx tags to reflect changes in UI that have taken place in the last year
Hydrate the existing sakai:xxx placeholders (or help me find them if I just could not locate them and thought they are placeholders in consequence!)
Create new sakai:xxx tags that are needed
Address the h:xxx tags that are wrong for our needs. Not sure how to go about this.
Address the issue of different user agents other than web browsers

Sakai tags

sakai: | f: | h: | ?: | UI Element List

sakai:AlphaIndex

Not sure where used, looks like Samigo makes use of it in

 <h:panelGroup
			rendered="#{totalScores.anonymous eq 'false'}">
			<f:verbatim><span
			class="abc"></f:verbatim>
			<samigo:alphaIndex initials="#{totalScores.agentInitials}"
			/>
			<f:verbatim></span></f:verbatim>
			</h:panelGroup> 

In which case the tag is not complete - witness the <f:verbatim> part.

The Rendering needed

sakai:AnchorReference

sakai:Applet

sakai:ButtonBarItem

See below tag

sakai:ButtonBar

See extended examples.

The Rendering needed

sakai:Courier

sakai:DataLine

From: sam\webapp\jsf\author\item\itemHeadings.jsp

 <samigo:dataLine
			rendered="#{itemauthor.target == 'questionpool'}"
			value="#{questionpool.currentPool.parentPoolsArray}" var="parent"
			separator=" > " first="0" rows="100" > 

sakai:Debug

sakai:DocProperties

Could not find any examples. Is this supposed to render header info?

sakai:DocSection

Could not find any examples. The section of a document needs to be the content between one header and the next header (or subheader)

sakai:DocSectionTitle

Could not find any examples. The section title needs to a header or subheader

The Rendering needed

sakai:DynaTable

Could not find any examples.

The Rendering needed

sakai:FlatList

No direct examples. Some workarounds:

From: metaobj\tool\src\webapp\WEB-INF\jsp\editPermissions.jsp

 <table class="chefFlatListViewTable"
			cellspacing="0" summary ="" border="0"> 

From: scheduler\scheduler-tool\src\webapp\scheduler\main.jsp

 <h:dataTable
			value="#{schedulerTool.schedulerManager.globalTriggerListener.triggerEvents}"
			var="event" styleClass="chefFlatListViewTable"> 

Both of these point at a css class that would be well to deprecate in favor of new ones

The Rendering needed

sakai:FlowState

Used - no impact on rendering.

sakai:GroupBox

No examples found - what was it designed to do? Looks like a fieldset.

sakai:HideDivision

sakai:InputColor

sakai:InputDate

sakai:InputFileUpload

No examples of it in use - although a lot of tools are doing uploads, each it's own way.

The Rendering needed

sakai:InputRichText

sakai:InstructionMessage

The Rendering needed

sakai:Messages

From: preferences\preferences\src\webapp\prefs\noti.jsp

<sakai:messages />

From: presentation\tool\src\webapp\presentation\join.jsp

<sakai:messages />

That seem to render via various adhoc mechanisms like:
preferences\preferences\src\webapp\prefs\prefUpdatedMsg.jsp

 <span style="background-color:#FFF8DF;
			border:1px solid #B8B88A; color:#663300;
			font-size:x-small;margin:5px 0px 5px 0px; padding:5px 5px 5px
			25px;">Message</span> 

What is the difference between <sakai:messages /> and <h:messages>?

It would be excelent for <sakai:messages /> to have modes. Then we could do:

sakai:MultiColumn

Just demo examples found

sakai:OutputDate

Just demo examples found

sakai:Pager

From: gradebook\tool\src\webapp_common\inc\filterPaging.jspf

 <sakai:pager id="pager"
			totalItems="#{bean.dataRows}" firstItem="#{bean.firstRow}"
			pageSize="#{bean.maxDisplayedRows}"
			textStatus="#{msgs.paging_status_students}" /> 

Resulting in:

 <span class="nav">
			  <span class="instruction"> Viewing
			1 to 1 of 1 students </span>
			  <br>
			  <input name="gbForm:pager_first"
			value="|<" disabled="disabled" type="submit">
			  <input name="gbForm:pager_prev"
			value="<" disabled="disabled" type="submit">
			  <select name="gbForm:pager_pageSize"
			id="gbForm:pager_pageSize" onchange="javascript:this.form.submit();
			return false;">
			    <option
			value="5">
			     Show 5
			    </option>
			    <option
			value="10">
			     Show 10
			    </option>
			     <option
			selected="selected" value="20">
			     Show 20
			    </option>
			    <option
			value="50">
			     Show 50
			    </option>
			    <option
			value="100">
			     Show 100
			    </option>
			    <option
			value="0">
			     Show all
			    </option>
			   </select>   
			<input name="gbForm:pager_next" value=">"
			disabled="disabled" type="submit">   
			<input name="gbForm:pager_last" value=">|"
			disabled="disabled" type="submit">   
			<input name="gbForm:pager_pastItem" value="0"
			type="hidden"> </span> 

Issues:

The wrapper used in gradebook is a table, generated via

 <h:panelGrid
			styleClass="gbContainerNav" columns="2"
			columnClasses="gbLeftNav,gbRightNav"> 

Whereas it needs to be a block

The Rendering needed

sakai:PanelEdit

No examples found. Part of original tag list

sakai:PeerRefresh

No examples found.

sakai:Popup

No examples found.