voyent
Displaying components within a dataView / dataViewColumn?  XML
Forum Index -> ICEmobile General Go to Page: 1, 2 Next 
Author Message
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


We have used the ice dataTable for years and have displayed components such as the selectOneMenu within in a column. The idea is that user can select a standard action from a selectOneMenu for each record (along with displaying other data specific to that row in other columns).

For the new mobi dataView, it doesn't appear like we can do that? Per the documentation, it only looks like specific types can be displayed in a dataViewColumn (text, bool, date, image, markup).

Are there any plans to allow displaying components such as the selectOneMenu to a dataViewColumn?
nils.lundquist

Joined: 31/Aug/2010 11:18:29
Messages: 198
Offline


No, there are no plans for any input from columns of the mobi:dataView. The dataView is a component with a complete separation of input and output- this allows us to make the tabular region far more lightweight on the server and client. Without this separation many of the features that the dataView is designed around couldn't be implemented.

The columns of the mobi:dataView are built as output alone- all input is handled in the detail region.
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


My apologies. I meant to ask if you can add a component like a selectOneMenu to the dataViewDetails, not the dataViewColumn. Basically, I'm trying to do something like this below:

Code:
	<mobi:dataView id="inboxList" value="#{messagesBean.msgs}" var="currMsg" activationMode="server"
                        rowStripe="true">
 		<mobi:dataViewColumns>
 			<mobi:dataViewColumn headerText="Actions" value="not sure what to put here" />
 			<mobi:dataViewColumn headerText="Message" value="#{currMsg.truncBody}" />
 
 <other columns...>
 		</mobi:dataViewColumns>
 		
 		<mobi:dataViewDetails>
 		 	<h:panelGrid columns="5" styleClass="innerBorder">	
 				<h:selectOneMenu id="msgAction" 
 					value="">
 					<f:selectItem itemLabel="" />
 					<f:selectItem itemLabel="Reply" itemValue="Reply" />
 					<f:selectItem itemLabel="Forward" itemValue="Forward" />					
 					<f:ajax execute="@this" render="@all" />
 				</h:selectOneMenu>
 				<ice:panelGroup panelTooltip="messageTooltip">
 					<ice:outputText value="#{currMsg.truncBody}" />
 				</ice:panelGroup>
 				<ice:panelTooltip id="messageTooltip" styleClass="messageTooltip">
 					<f:facet name="body">
 						<ice:outputText value="#{currMsg.body}" />
 					</f:facet>
 				</ice:panelTooltip>
 <other data...>
 		</mobi:dataViewDetails>
 	</mobi:dataView>
 
 
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


The way we used to do this with an ice dataTable is as follows:


<ice:dataTable id="inboxList" value="#{messagesBean.msgs}" var="currMsg">
<ice:column>
<f:facet name="header">
<h:outputText value="Actions" />
</f:facet>
<ice:selectOneMenu id="msgAction"
value="">
<f:selectItem itemLabel="" />
<f:selectItem itemLabel="Reply" itemValue="Reply" />
<f:selectItem itemLabel="Forward" itemValue="Forward" />
<f:ajax execute="@this" render="@all" />
</ice:selectOneMenu>
</ice:column>
tyler.johnson


Joined: 18/Apr/2007 00:00:00
Messages: 93
Offline


Hey Jeff,

Both the ace:selectMenu and h:selectOneMenu components work as expected with ICEfaces 3.3 and ICEmobile 1.3. Can you consider using one of these vs ICE? Here is my code:

Code:
<mobi:dataView value="#{dataViewBean.cars}" var="car"
 			activationMode="server" rowStripe="true">
 			<mobi:dataViewDetails>
 				<h3>Details</h3>
 				<h:panelGrid columns="2">
 					<ace:selectMenu value="#{car.model}">
 						<ace:ajax execute="@this" render="@form" />
 						<f:selectItem itemLabel="A" itemValue="A" />
 						<f:selectItem itemLabel="B" itemValue="B" />
 						<f:selectItem itemLabel="C" itemValue="C" />
 					</ace:selectMenu>
 					<h:outputText value="#{car.model}"/>
 				</h:panelGrid>
 			</mobi:dataViewDetails>
 
 			<mobi:dataViewColumns>
 				<mobi:dataViewColumn headerText="Model" value="#{car.model}" />
 			</mobi:dataViewColumns>
 		</mobi:dataView>


Ty
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


What I'm trying to do is have a dropdown list of static values in the first column of the dataView which triggers an action for that selected row. e.g. I have a list of messages and I want to put "reply" and "forward" in the dropdown which triggers an action, once selected. The other columns will have data values for that particular row. When I try the following, the menuButton is not displaying.

Code:
 <mobi:dataView id="inboxList" value="#{messagesBean.msgs}" var="currMsg" activationMode="server"
                        rowStripe="true">
 		<mobi:dataViewColumns>
 			<mobi:dataViewColumn headerText="From" value="#{currMsg.from}" />
 			<mobi:dataViewColumn headerText="Recipients" value="#{currMsg.recipients}" />
 			<mobi:dataViewColumn headerText="Time In" value="#{currMsg.timeIn}" />
 			<mobi:dataViewColumn headerText="Subject" value="#{currMsg.subject}" />
 			<mobi:dataViewColumn headerText="Message" value="#{currMsg.truncBody}" />
 		</mobi:dataViewColumns>
 		
 		<mobi:dataViewDetails>
 			<h3>Details</h3>
 		 	<h:panelGrid columns="6" styleClass="innerBorder">	
 				<mobi:menuButton id="selectedPanel" style="float:right"
 					buttonLabel="Action">
 					<mobi:menuButtonItem label="" value=""
 						actionListener="#{navigationBean.setSmallPaneAction}" />
 					<mobi:menuButtonItem label="Reply" value="replyPanel"
 						actionListener="#{navigationBean.setSmallPaneAction}" />
 				</mobi:menuButton>				
 				<h:outputText value="#{currMsg.from}" />
 				<h:outputText value="#{currMsg.recipients}" />
 				<h:outputText value="#{currMsg.timeIn}" />
 				<h:outputText value="#{currMsg.subject}" />
 				<ice:panelGroup panelTooltip="messageTooltip">
 					<ice:outputText value="#{currMsg.truncBody}" />
 				</ice:panelGroup>
 				<ice:panelTooltip id="messageTooltip" styleClass="messageTooltip">
 					<f:facet name="body">
 						<ice:outputText value="#{currMsg.body}" />
 					</f:facet>
 				</ice:panelTooltip>
 			</h:panelGrid>
 		</mobi:dataViewDetails>
 	</mobi:dataView>
 


It seems like you need a dataViewColumn that maps to an entry in dataViewDetails by the var name?

I'm also trying to use an ice:panelTooltip within the dataViewDetails and that's not working on a desktop browser (see above).
nils.lundquist

Joined: 31/Aug/2010 11:18:29
Messages: 198
Offline


The way you're trying to implement this isn't possible. The a column of a DataView can never contain an arbitrary JSF component, it can currently only be used for the output of information. No input, no events.

The DataViewDetail component defines a region of the dataView separate from the table region that allows arbitrary JSF component children. These components are displayed to the user when a row from the table region is activated via a tap. To implement your functionality the drop down cannot be in a column, it instead would have to be in the detail region that is displayed when a row is activated.

Have you reviewed the DataView example in the showcase application?
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


That is what I want - the dropdown to appear in the detail region of the data view. Like I mentioned above, we're currently doing this for ice:dataTable and it works just fine. I'd also like to get the panelTooltip to work too when hovering over data in the data view (like we do for data Table). And, yes, I have reviewed the dataView example. What's confusing to me is how the dataViewColumns and dataViewDetails are linked.

Also, I'm seeing 2 different column headers when I try the above code.
[Thumb - 7-17-2013 8-28-39 AM.png]
 Filename 7-17-2013 8-28-39 AM.png [Disk] Download
 Description double column headers
 Filesize 7 Kbytes
 Downloaded:  1365 time(s)

nils.lundquist

Joined: 31/Aug/2010 11:18:29
Messages: 198
Offline


Tyler's code above accomplishes a simple example of what you want then. There isn't a deep link between the detail and column regions. Only that both may share the same ValueReferences to the row object or elsewhere.

The issue you're seeing with double headers is due to a known issue mixing mobi with ice (rather than ace or h) components. There's likely related JS errors in the console. The 3.4 release ice components will contain a fix for this incompatibility, but using ice components within mobi components will still be hazarded against.
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


ok so just to confirm, we cannot nest h/ice/ace components within a mobi dataView like we can for ice/ace data tables?

In regards to the duplicate column headers, I removed the ice components and only have the following and still see the duplicates.

Code:
 	<mobi:dataView id="inboxList" value="#{messagesBean.msgs}" var="currMsg" activationMode="server"
                        rowStripe="true">
 		<mobi:dataViewColumns>
 			<mobi:dataViewColumn headerText="From" value="selectedPanel" />
 			<mobi:dataViewColumn headerText="Recipients" value="#{currMsg.recipients}" />
 			<mobi:dataViewColumn headerText="Time In" value="#{currMsg.timeIn}" />
 			<mobi:dataViewColumn headerText="Subject" value="#{currMsg.subject}" />
 			<mobi:dataViewColumn headerText="Message" value="#{currMsg.truncBody}" />
 		</mobi:dataViewColumns>
 		
 		<mobi:dataViewDetails>
 				<h:outputText value="#{currMsg.from}" />
 				<h:outputText value="#{currMsg.recipients}" />
 				<h:outputText value="#{currMsg.timeIn}" />
 				<h:outputText value="#{currMsg.subject}" />
 				<h:outputText value="#{currMsg.truncBody}" />
 		</mobi:dataViewDetails>
 	</mobi:dataView>
 
nils.lundquist

Joined: 31/Aug/2010 11:18:29
Messages: 198
Offline


Are any ice components still used in the page or any ice JS resources loaded? The incompatibility I referred to stems from the old Prototype library used in ICEfaces compat. Anything that causes Prototype to load will cause the double header issue.

The 3.4 compat release fixes that issue, but still won't recommend mixing compat with ICEmobile.
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


Ok, if we're using mobi components, the recommendation is to only use h or ace components in the cases where an equivalent mobi component is not available? For ace, I had thought that because they're heavier weighted that we shouldn't use those at all for mobile development?

Regardless, I created a sample page with no ice ns declarations and it still displays a double header. Other, unrelated pages still include the ice ns but not this one so didn't think that mattered.

Code:
<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
 	xmlns:h="http://java.sun.com/jsf/html"
 	xmlns:f="http://java.sun.com/jsf/core"
 	xmlns:ui="http://java.sun.com/jsf/facelets"	
 	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">
 <h:head>
 </h:head>
 <h:body>
       
 	<mobi:dataView id="inboxList" value="#{messagesBean.msgs}" var="currMsg" activationMode="server"
                        rowStripe="true">
 		<mobi:dataViewColumns>
 			<mobi:dataViewColumn headerText="From" value="selectedPanel" />
 			<mobi:dataViewColumn headerText="Recipients" value="#{currMsg.recipients}" />
 			<mobi:dataViewColumn headerText="Time In" value="#{currMsg.timeIn}" />
 			<mobi:dataViewColumn headerText="Subject" value="#{currMsg.subject}" />
 			<mobi:dataViewColumn headerText="Message" value="#{currMsg.truncBody}" />
 		</mobi:dataViewColumns>
 		
 		<mobi:dataViewDetails>
 				<h:outputText value="#{currMsg.from}" />
 				<h:outputText value="#{currMsg.recipients}" />
 				<h:outputText value="#{currMsg.timeIn}" />
 				<h:outputText value="#{currMsg.subject}" />
 				<h:outputText value="#{currMsg.truncBody}" />
 		</mobi:dataViewDetails>
 	</mobi:dataView>
 	</h:body>
 </html>


From Recipients Time In Subject Message
From Recipients Time In Subject Message
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


Also, is it possible to trap an event when, say, clicking on a row in a dataView in order to, say, present a panel popup? With that, I could get around needing a dropdown on the row itself.
jdcurry

Joined: 30/Sep/2009 00:00:00
Messages: 22
Offline


Is it possible to have an action listener for when a row is clicked? We'd then be able to present a panel popup to do what need to do versus having an inline component within the data view (which we currently do with ice data tables)

Thanks
bcantu

Joined: 02/Nov/2009 00:00:00
Messages: 45
Offline


I have the issue that the header of the DataViewColums and the header of the dataViewDetails are both displayed. So the I have two headers... I have removed all references to ice and ace but still have the JS error described in one of the posts found here. The error is:

[Error] TypeError: 'undefined' is not a function (evaluating 'this.each(function(value, index) {
if (iterator.call(context, value, index))
results.push(value);
})')
findAll (icefaces-compat.uncompressed.js, line 784)
getStyleSheet (component.js, line 1226)
initTableAlignment (component.js, line 1317)

line 784 ... /javax.faces.resource/icefaces-compat.uncompressed.js?ln=ice.compat&v=3_3_0_130416

function findAll(iterator, context) {
var results = [];
this.each(function(value, index) { <---HERE!!!!
if (iterator.call(context, value, index))
results.push(value);
});
return results;
}

Is there something I have missed?
 
Forum Index -> ICEmobile General Go to Page: 1, 2 Next 
Go to:   
Powered by JForum 2.1.7ice © JForum Team