ICEsoft.org Forums: ICEfaces, ICEmobile, ICEpdf

Hi

I am using the following code:
Code:

 
 <p><ui:repeat value="#{customerOrdersUtil.sortedOrders}" var="order">
                 <mobi:outputListItem group="true">
                 <p>Order #{order.orderNumber}</p>
                 </mobi:outputListItem>
 				<ui:repeat value="#{order.lineitems}" var="lines">
                 <mobi:outputListItem>
                 <p>Line #{lines.lineitemId}</p>
                 <mobi:inputText value="#{lines.qtyOrdered}"
     			type="number" singleSubmit="true"
     			title="number from popup number menu"/>
     				<h:selectOneMenu partialSubmit="true" value="#{lines.product.name}" >
 					 <f:selectItems value="#{customerOrdersUtil.productNames}"/>
 						</h:selectOneMenu>
                 </mobi:outputListItem>
 				
 			</ui:repeat>
 			</ui:repeat></p>

this works fine if I run the app in the explorer insideEclipse, or any explorer as Safari in the MAC, but when I run in the iPhone (iOs 4.3,3) doesn't open the combo, it opens without problem the combo at the foot, to choose device.

Is the selectOneMenu visible on the iPhone but just not interactive? Does it help to remove the singleSubmit and partialSubmit attributes?

Yes is visible, but doesn't open the combo selector when you press on it, removing singleSummit and partialSubmit, doesn't makes any difference

You are saying this worked in the mobile browser but not the iPhone?
I tried a similar nesting of elements but used our new <mobi:outputListItems> component for the first list of items with a nested <ui:repeat> similar to this:-
<h:form id="layoutform">
<h5>this list has list of commandLinks</h5>
<mobi:outputList id="commandLinkList" inset="true">
<mobi:outputListItem type="group">commandLinks List</mobi:outputListItem>
<mobi:outputListItems value="#{list.linksList}" var="cmdLnk">
<h:commandLink value="#{cmdLnk.title}" action="#{cmdLnk.getAction}"/>
<h:panelGroup id="pdnl">
<ui:repeat value="#{cmdLnk.simpleList}" id="nestedList">
<mobi:inputText type="text" id="itText" value="#{cmdLnk.selected}"/>
<h:selectOneMenu value="#{cmdLnk.selected}" id="selectInList">
<f:selectItem itemValue="One" itemLabel="1"/>
<f:selectItem itemValue="Two" itemLabel="2"/>
<f:selectItem itemValue="Three" itemLabel="3"/>
</h:selectOneMenu>
</ui:repeat>
</h:panelGroup>
</mobi:outputListItems>
</mobi:outputList>
</h:form>

and this worked fine on my iPad, iPhone and desktop browsers. Are you using latest trunk for ice mobile project?

Is it possible to save the raw HTML from the desktop browser and post it here? We could then test it directly.

judy.guglielmin wrote:

You are saying this worked in the mobile browser but not the iPhone?
I tried a similar nesting of elements but used our new <mobi:outputListItems> component for the first list of items with a nested <ui:repeat> similar to this:-
<h:form id="layoutform">
<h5>this list has list of commandLinks</h5>
<mobi:outputList id="commandLinkList" inset="true">
<mobi:outputListItem type="group">commandLinks List</mobi:outputListItem>
<mobi:outputListItems value="#{list.linksList}" var="cmdLnk">
<h:commandLink value="#{cmdLnk.title}" action="#{cmdLnk.getAction}"/>
<h:panelGroup id="pdnl">
<ui:repeat value="#{cmdLnk.simpleList}" id="nestedList">
<mobi:inputText type="text" id="itText" value="#{cmdLnk.selected}"/>
<h:selectOneMenu value="#{cmdLnk.selected}" id="selectInList">
<f:selectItem itemValue="One" itemLabel="1"/>
<f:selectItem itemValue="Two" itemLabel="2"/>
<f:selectItem itemValue="Three" itemLabel="3"/>
</h:selectOneMenu>
</ui:repeat>
</h:panelGroup>
</mobi:outputListItems>
</mobi:outputList>
</h:form>

and this worked fine on my iPad, iPhone and desktop browsers. Are you using latest trunk for ice mobile project?

What I mean is that works in desktop Browser (IE, Mozilla, Safari, eclipse internal browser) but not in iPhone Browser (safari).

I can not use </mobi:outputListItems> because I get "no tag was defined for name: outputListItems" error, I am used the "1.0 BETA2" that is the one is show in download, Where can I get last trunk?

ted.goddard wrote:

Is it possible to save the raw HTML from the desktop browser and post it here? We could then test it directly.

Here is the HTML, that I got in the desktop browser, I don't know how to get it in iPhone's browse
Code:

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />
     <meta content="yes" name="apple-mobile-web-app-capable" />
     <meta content="black" name="apple-mobile-web-app-status-bar-style" />
     <link href="./resources/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
     <link href="./resources/images/favicon.ico" rel="icon" type="image/x-icon" />
     <title>ICEfaces Mobile Showcase</title><link href="/BusLogicDemoICEmobile/javax.faces.resource/ipad.css.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?ln=org.icefaces.component.skins" media="screen" rel="stylesheet" type="text/css" /><link href="/BusLogicDemoICEmobile/javax.faces.resource/showcase.css.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?ln=css" media="screen" rel="stylesheet" type="text/css" /><script src="/BusLogicDemoICEmobile/javax.faces.resource/jsf.js.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?ln=javax.faces" type="text/javascript"></script><script src="/BusLogicDemoICEmobile/javax.faces.resource/icepush.js.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?rand=2115285897" type="text/javascript"></script><script src="/BusLogicDemoICEmobile/javax.faces.resource/bridge.js.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?rand=2115285897" type="text/javascript"></script><script src="/BusLogicDemoICEmobile/javax.faces.resource/iscroll-min.js.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?ln=org.icefaces.component.util" type="text/javascript"></script><script src="/BusLogicDemoICEmobile/javax.faces.resource/component.js.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?ln=org.icefaces.component.util" type="text/javascript"></script></head><body>
 
     <div class="mobi-panel-stack-header" id="h">
 <form action="/BusLogicDemoICEmobile/tablet.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D" enctype="application/x-www-form-urlencoded" id="toolbar" method="post" name="toolbar">
 <input name="toolbar" type="hidden" value="toolbar" />
 <input name="ice.window" type="hidden" value="fjgwdc6ghe" /><input name="ice.view" type="hidden" value="vyzdx1l5" /><script id="toolbar_captureSubmit" type="text/javascript">ice.captureSubmit('toolbar',false);ice.captureEnterKey('toolbar');</script>
 
                 Mobile Suite
 
                 <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-2372287545543361923:-7241785659194044882" autocomplete="off" />
 </form>
     </div>
 
     
     <div class="mobi-panel-stack-body" id="menu-wrapper" style="width:30%;float:left;">
 
         <div class="mobi-panel-scrollable">
 <form action="/BusLogicDemoICEmobile/tablet.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D" enctype="application/x-www-form-urlencoded" id="j_idt12" method="post" name="j_idt12">
 <input name="j_idt12" type="hidden" value="j_idt12" />
 <input name="ice.window" type="hidden" value="fjgwdc6ghe" /><input name="ice.view" type="hidden" value="vyzdx1l5" /><script id="j_idt12:j_idt12_captureSubmit" type="text/javascript">ice.captureSubmit('j_idt12',false);ice.captureEnterKey('j_idt12');</script><ul class="mobi-list " id="j_idt12:j_idt13"><li class="mobi-list-item mobi-list-item-group " id="j_idt12:j_idt14"><div class="mobi-list-item-default "></div></li><li class="mobi-list-item" id="j_idt12:j_idt16:0:j_idt17"><div class="mobi-list-item-default "><a href="#" id="j_idt12:j_idt16:0:_t18" onclick="mojarra.jsfcljs(document.getElementById('j_idt12'),{'j_idt12:j_idt16:0:_t18':'j_idt12:j_idt16:0:_t18','destBean':'listBean','custName':'Alpha and Sons'},'');return false">Alpha and Sons</a></div></li><li class="mobi-list-item" id="j_idt12:j_idt16:1:j_idt17"><div class="mobi-list-item-default "><a href="#" id="j_idt12:j_idt16:1:_t18" onclick="mojarra.jsfcljs(document.getElementById('j_idt12'),{'j_idt12:j_idt16:1:_t18':'j_idt12:j_idt16:1:_t18','destBean':'listBean','custName':'Bravo Hardware'},'');return false">Bravo Hardware</a></div></li><li class="mobi-list-item" id="j_idt12:j_idt16:2:j_idt17"><div class="mobi-list-item-default "><a href="#" id="j_idt12:j_idt16:2:_t18" onclick="mojarra.jsfcljs(document.getElementById('j_idt12'),{'j_idt12:j_idt16:2:_t18':'j_idt12:j_idt16:2:_t18','destBean':'listBean','custName':'Charlie\'s Construction'},'');return false">Charlie's Construction</a></div></li><li class="mobi-list-item" id="j_idt12:j_idt16:3:j_idt17"><div class="mobi-list-item-default "><a href="#" id="j_idt12:j_idt16:3:_t18" onclick="mojarra.jsfcljs(document.getElementById('j_idt12'),{'j_idt12:j_idt16:3:_t18':'j_idt12:j_idt16:3:_t18','destBean':'listBean','custName':'Delta Engineering'},'');return false">Delta Engineering</a></div></li></ul><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-2372287545543361923:-7241785659194044882" autocomplete="off" />
 </form>
         </div>
     </div>
 
     
     <div class="mobi-panel-stack-body" id="body-wrapper" style="width:70%;float:left;">
         <div class="mobi-panel-scrollable">
         </div>
     </div>
 
     
      <div class="mobi-panel-stack-footer" id="f">
 
     <div style="float:left;display:inline-block;text-align:left;">
 <form action="/BusLogicDemoICEmobile/tablet.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D" enctype="application/x-www-form-urlencoded" id="j_idt27" method="post" name="j_idt27">
 <input name="j_idt27" type="hidden" value="j_idt27" />
 <input name="ice.window" type="hidden" value="fjgwdc6ghe" /><input name="ice.view" type="hidden" value="vyzdx1l5" /><script id="j_idt27:j_idt27_captureSubmit" type="text/javascript">ice.captureSubmit('j_idt27',false);ice.captureEnterKey('j_idt27');</script><div id="j_idt27:j_idt28"><script type="text/javascript">ice.enableSingleSubmit('j_idt27');</script></div><select id="j_idt27:_t29" name="j_idt27:_t29" size="1">	<option value="" selected="true">Auto</option>
 
 	<option value="iphone.css">iPhone</option>
 	<option value="ipad.css">iPad</option>
 	<option value="android.css">Android</option>
 	<option value="bberry.css">BlackBerry</option>
 </select><input class="mobi-button mobi-button-default" id="j_idt27:_t35" name="j_idt27:_t35" type="submit" value="Change Theme" /><input disabled="true" id="j_idt27:ajaxDisabled" type="hidden" value=" j_idt27:_t35 " /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-2372287545543361923:-7241785659194044882" autocomplete="off" />
 </form>
     </div><span id="_t37" style="float:right;display:inline-block;margin: 5px 15px 0 0;"><img src="/BusLogicDemoICEmobile/javax.faces.resource/icemobile_thumb.png.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D?ln=images" style="width:30px;height:30px;" /></span>
     </div><span id="vyzdx1l5_icefaces_config"><script>ice.setupBridge('vyzdx1l5_icefaces_config', 'vyzdx1l5', 'fjgwdc6ghe', {deltaSubmit: false,disableDefaultErrorPopups: false,standardFormSerialization: false,sendDisposeWindow: true,blockUIOnSubmit: false});</script></span>
 
 <form action="/BusLogicDemoICEmobile/tablet.jsf;jsessionid=A07006E0F1E903CC472E5F28B0C73C6D" id="vyzdx1l5" method="post" name="vyzdx1l5">
 <input name="vyzdx1l5" type="hidden" value="vyzdx1l5" />
 <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-2372287545543361923:-7241785659194044882" autocomplete="off" />
 </form><span id="vyzdx1l5_icepush"><script type="text/javascript">ice.push.configuration.contextPath="/BusLogicDemoICEmobile";ice.push.configuration.blockingConnectionURI="/BusLogicDemoICEmobile/javax.faces.resource/listen.icepush.xml.jsf";ice.push.configuration.createPushIdURI="/BusLogicDemoICEmobile/javax.faces.resource/create-push-id.icepush.txt.jsf";ice.push.configuration.notifyURI="/BusLogicDemoICEmobile/javax.faces.resource/notify.icepush.txt.jsf";ice.push.configuration.addGroupMemberURI="/BusLogicDemoICEmobile/javax.faces.resource/add-group-member.icepush.txt.jsf";ice.push.configuration.removeGroupMemberURI="/BusLogicDemoICEmobile/javax.faces.resource/remove-group-member.icepush.txt.jsf";</script></span></body>
 </html>

any news ?
How can I get <mobi:outputListItem>?

I try to download ICEmobile-1.0.BETA3-bin.zip but it says that zip file is corrupted, this file supost to include <mobi:outputListItems>, that I need to test combo problems in Iphone, but I can get because the mention corrupted zip.

How can get a new jar files that include this component?

I try the following code after getting Beta 3

Code:

<h5>this list has list of commandLinks</h5> 
 <mobi:outputList id="commandLinkList" inset="true"> 
 <mobi:outputListItem type="group">commandLinks List</mobi:outputListItem> 
 <mobi:outputListItems value="#{customerOrdersUtil.sortedOrders}" var="order"> 
 <h:commandLink value="#{order.amountTotal}" action="#{cmdLnk.getAction}"/> 
 <h:panelGroup id="pdnl"> 
 <ui:repeat value="#{order.lineitems}" id="nestedList"> 
 <mobi:inputText type="text" id="itText" value="#{cmdLnk.selected}"/> 
 		<h:selectOneMenu value="#{lines.product.name}" >
     				 <f:selectItems value="#{customerOrdersUtil.productNames}"/>
 							</h:selectOneMenu>
 <h:selectOneMenu value="One" id="selectInList"> 
 <f:selectItem itemValue="One" itemLabel="1"/> 
 <f:selectItem itemValue="Two" itemLabel="2"/> 
 <f:selectItem itemValue="Three" itemLabel="3"/> 
 </h:selectOneMenu> 
 </ui:repeat> 
 </h:panelGroup> 
 </mobi:outputListItems> 
 </mobi:outputList> 
 </h:form>

And it works in the desktop but not in Iphone safari, there the selectOnemenu doesn't do nothing when you press on it, any of the two defined

I has found that the problem is relate to the following Javascript:

Code:

    <script type="text/javascript">
         var myScroll;
         var loader = function () {
             setTimeout(function () {
                 // tweak safari css for iscroll.
                 document.getElementById("wrapper").style.position = "absolute";
                 document.getElementById("wrapper").style.overflow = "hidden";
                 // clean up the old scroller
                 if (myScroll != null) {
                     myScroll.destroy();
                 }
                 myScroll = new iScroll('wrapper', { vScroll:true});
                 myScroll.refresh();
             }, 100);
         };
 
         var onLoadCallback = function () {
             loader();
         };
         var afterUpdateCallback = function(updates) {
             loader();
         };
 
         var unloadHandler = function() {
             ice.log.debug(ice.log, 'unload handler iScroll');
             myScroll.destroy();
             myScroll = null;
         };
 
         // only load iscroll for apple devices.
         if (navigator.platform.indexOf('iPhone') != -1 ||
                 navigator.userAgent.indexOf('iPod') != -1 ||
                 navigator.userAgent.indexOf('iPad') != -1) {
 
             if (navigator.userAgent.indexOf('iPhone OS 5_0') != -1) {
                 return;
             }
 
             // setup icefaces callbacks bridge.
             ice.onLoad(onLoadCallback);
             ice.onUnload(unloadHandler);
             ice.onAfterUpdate(afterUpdateCallback);
 
             var supportsOrientationChange = "onorientationchange" in window,
                     orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
             window.addEventListener(orientationEvent, afterUpdateCallback, false);
 
             window.addEventListener('resize', function() {
                 setTimeout(function () {
                     ice.log.debug(ice.log, 'resize iscroll refresh');
                     myScroll.refresh();
                 }, 0);
             });
         }
 
     </script>

If I take off then the combo works fine in the Iphone, but the the header and the footer are scrolled at the same time than the body

What iOS is your iPhone running? If iOS5, then much of that javascript is not being called.
Please post the javascript console errors that are being triggered.

The iOS is 4.3.3, the error that are show in the console are in the attached picture

If you want to try out the markup, you can do so within the components/test/mobitest application, which doesn't have any scrolling panels setup (as does the mobile-showcase) application. (or just disable the scrolling for now.
Plans are to create a component for the layout/scrolling. (not sure yet when that will be delivered.
Other option is to update your iOS to 5.