JSF Adding CSS

Adding CSS

• The style sheet is located at "tool/src/webapp/css/TaskList.css"

  • .firstColumn {
        width: 5%;
        text-align: center; 
    }
    .secondColumn {
        width: 20%;
    	text-align: left;
    }
    .thirdColumn {
        width: 55%;
    	text-align: left;
    }
    .fourthColumn {
    	width: 20%;
    	text-align: center;
    }
    .headerAlignment {
    	text-align: center ! important;
    }
    
    

• Modify TaskList.jsp to take advantage of the styles
  • Edit <h:dataTable> tag to reference styles for "columnClasses" and "headerClass"

    <%@ taglib uri="http://sakaiproject.org/jsf/sakai" prefix="sakai" %>
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 
    <f:loadBundle basename="org.sakaiproject.tool.tasklist.bundle.Messages" var="msgs"/>
     
    <f:view>
    	<sakai:view_container title="Task List Tool">
    		<style type="text/css">
    			@import url("/sakai-tasklist-tool/css/TaskList.css");
    		</style>
    
    		<sakai:view_content>
    			<h:form id="tasks">
    			
    			 	<sakai:view_title value="#{msgs.task_list_title}"/>
    			 	
    			 	<h:outputText value="Hello, #{TaskListBean.currentUserDisplayName}"/>
    			 	
    			 	<sakai:panel_edit>
    			 		<h:inputText value="#{TaskListBean.taskText}" size="60"/>
    	 				<h:commandButton value="#{msgs.task_list_add}" action="#{TaskListBean.processActionAdd}" />
    			 	</sakai:panel_edit>
    			 	
    			 	<h:dataTable
    			 		id="tasklist"
    			 		value="#{TaskListBean.allTasks}"
    			 		var="entry"
    			 		columnClasses="firstColumn,secondColumn,thirdColumn,fourthColumn"
    			 		headerClass="headerAlignment"
    			 		styleClass="listHier">
    
    					<h:column>
    						<f:facet name="header">
    							<h:outputText value=""/>
    						</f:facet>
    						<h:selectBooleanCheckbox id="taskSelect" value="#{entry.selected}" rendered="#{entry.delete}"/>
    						<h:outputText value="" rendered="#{not entry.delete}"/>
    					</h:column>
    
    					<h:column>
    						<f:facet name="header">
    							<h:outputText value="#{msgs.task_list_owner}"/>
    						</f:facet>
    						<h:outputText value="#{entry.task.owner}"/>
    					</h:column>
    					
    					<h:column>
    						<f:facet name="header">
    							<h:outputText value="#{msgs.task_list_text}"/>
    						</f:facet>
    						<h:outputText value="#{entry.task.task}"/>
    					</h:column>
    
    					<h:column>
    						<f:facet name="header">
    							<h:outputText value="#{msgs.task_list_date}"/>
    						</f:facet>
    						<h:outputText value="#{entry.task.creationDate}">
    							<f:convertDateTime type="both" dateStyle="medium" timeStyle="short" />
    						</h:outputText>
    					</h:column>
    					
    				</h:dataTable>
    				
    				<sakai:button_bar>
    					<sakai:button_bar_item id="deleteTask" action="#{TaskListBean.processActionDelete}" value="#{msgs.task_list_delete}"/>  
                    </sakai:button_bar>
                    
    			 </h:form>
      		</sakai:view_content>	
    	</sakai:view_container>
    </f:view>
    

• Screen capture

  • !TaskList-CSS!