Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Stack with TreeGrid and tabs not rendered correctly on iPhone and Opera

    Layouts that contain stack with Trees and Tabs are not rendered correctly on mobile browsers and on Opera 10 and 11.

    1. SmartClient Pro version: v82p_2012-04-12_Pro (this was reproducible with 8.1 Eval as well).
    2. browser(s) and version(s) involved: iPhone 3GS (v5.1), 4G (v4), Opera 11.62 on WinXp.

    Given below is the layout definition. I tried several variations and none of them render tabs correctly on mobile browsers and on Opera. This code works fine on all versions of FF, on Chrome, Safari, IE, Maxthon.

    I also tried it with Mobile and with TreeFrog skins - nothing helps.

    Code:
    Menu.create({
        ID:"chartMenu",
        autoDraw:false,showShadow:true,shadowDepth:9,cellHeight:18,menuButtonWidth:60,
        data:[
         {title:"New ...",icon:"new_chart.png"},
         {title:"Open ...",enableIf:"false",icon:"open.png"},
         {title:"<%=main_menu_charts_open_type%>",icon:"open.png",
          submenu:[
           {title:"All...",checked:true,enableIf:"false"},
           {title:"Selected",enableIf:"false"},
          ]},
         {title:"Print",enableIf:"false",icon:"printer.png"},
         {isSeparator:true},
         {title:"Import",enableIf:"false"}, 
         {isSeparator:true},
         {title:"Exit",icon:"close.png"}
        ],
        title:"Top Level Charts"
    });
    
    Menu.create({
       ID:"prdMenu", autoDraw:false, showShadow:true, shadowDepth:9, cellHeight:18, menuButtonWidth:75,
       data:[
         {title:"Forward ...",enableIf:"false",icon:"transit16.png"},
         {title:"Backward ...",enableIf:"false",icon:"returns.png"},
         {isSeparator:true},
         {title:"Freeze",enableIf:"false"}
       ],title:"Operations"
    });
    
    Menubar.create({
        ID:"menuBar", autoDraw:false, backgroundColor:"#CCCCCC",
        menus:[chartMenu, prdMenu]
    });
    VStack.create({top:23,width:"100%",members:[menuBar]});
    isc.HLayout.create({
        ID:"hpane",
        width:"100%",height:"94%",top:43,
        members:[
          isc.SectionStack.create({
          ID:"sectionStack",visibilityMode:"multiple",
                width:"20%",height:"100%", showResizeBar:true,border:"1px solid blue",
          sections:[
             {title:"Details",expanded:true,resizeable:false,
               items:[
                isc.DetailViewer.create({
                   ID:"dtlV",showEmptyMessage:true,emptyMessage:"No data selected",
                   fields:[
    		 {name:"chart_name",title:_field_NAME},
                     {name:"birth_date",formatCellValue:"fmtDate2(value)",title:_field_DATE},
                     {name:"city_name",title:field_CITY},
                     {name:"state_id",title:field_STATE},
                     {name:"country_id",title:field_COUNTRY,formatCellValue:"countriesData[value]"},
                   ]
                }),
                isc.HLayout.create({
                 membersMargin:5,
                 members:[
                  isc.Button.create({ID:"redraw",title:"Refresh",disabled:true,showDisabled:true}),
                  isc.Button.create({ID:"mapit",title:"Map",click:"mapView()"})
                 ]
               })
             ]},
             {title:"Listing",expanded:true,canCollapse:true,
                      items:[
    			isc.TreeGrid.create({
    			ID:"chartsTree",
    			nodeClick:function(viewer,node,recordNum){
    				var parentNode=chartsTree.data.find("node_id","2");
    			},
    			fields:[
    				{name:"Name",title:"Name",width:190},
    				{name:"Type",title:"Type",width:70},
    				{name:"Date",formatCellValue:"fmtDate2(value)",title:"Date",width:72}
    			],
    			wrapCells:true,showEmptyMessage:true,emptyMessage:"No data selected",prompt:"Click to Open",
    			data:isc.Tree.create({
    				ID:"cTree",modelType:"parent",rootValue:"0",nameProperty:"Name",idField:"node_id",parentIdField:"parent_id",
    				data:[
    				{node_id:"1",parent_id:"0",chart_id:"0",arr_id:"-1",Name:"<b>Current</b>",Type:"",Date:""},
    				{node_id:"2",parent_id:"0",chart_id:"0",arr_id:"-1",Name:"<b>Discarded</b>",Type:"",Date:""}
    				]
    			}),
    			width:"100%",height:400,nodeIcon:"icons/chart_open.png",showOpenIcons:false,showDropIcons:false,closedIconSuffix:""
    			})
    		]}
           ]
         }),
         isc.VLayout.create({
             ID:"vpanes",width:"80%",
             members:[
               isc.TabSet.create({
                 ID:"cTabs",
                 tabBarPosition:"top",width:"100%",height:"90%",
                 paneContainerProperties:{backgroundImage:"nebula.jpg"},
                 tabSelected:function(tabNum,tabPane,ID,tab){
                 },
                 removeTabs:function(tabs){
                   this.Super("removeTabs",arguments);
                 },
    		tabs:[]
    	})
          ]
        })
      ]
    });
    Thanks,
    - Gene

    #2
    Can you clarify "not correctly rendered"? A screenshot would help.

    Comment


      #3
      I'm attaching two files - one where the page renders correctly in Chrome, the other is the Opera bug. On iPhone the UI looks almost the same as on Opera.
      Newly added tabs to the main right pane also are never shown on mobile and Opera.

      Please let me know if you need more info.

      thanks,
      - Gene
      Attached Files
      Last edited by genev; 17 Apr 2012, 10:41.

      Comment


        #4
        Not reproducible on iPhone or iPad. There are some errors in the test case that needed to be corrected first, including a JSP directive and some missing variables, so we're going to assume this is a bogus report and the error is actually resulting from flaws in these areas.


        If you'd like it looked into again please make the test case minimal first and truly standalone, and indicate iOS versions.

        Comment


          #5
          Here's the isolated code. Adding table tag before the script breaks it on iPhone 3GS (iOS 5.1).

          With or without the table, this code doesn't work on Opera 11.

          Code:
          <body style="padding:0px; margin:0px; background-color:#FFFFFF" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0>
          <table width=100% cellspacing=0 cellpadding=5 border=0>
          	<tbody>
          	<tr>
          		<td class=pageHeader bgcolor=white>Layout Test Case</td>
          		<td class=pageHeader align=right bgcolor=white></td>
          	</tr>
          	</tbody>
          </table>
          
          <script>
          Menu.create({
              ID:"chartMenu",
              autoDraw:false,showShadow:true,shadowDepth:9,cellHeight:18,menuButtonWidth:60,
              data:[
               {title:"New ...",icon:"new_chart.png"},
               {title:"Open",icon:"open.png",
                submenu:[
                 {title:"All...",checked:true,enableIf:"false"},
                 {title:"Selected",enableIf:"false"},
                ]},
               {isSeparator:true},
               {title:"Exit",icon:"close.png"}
              ],
              title:"Top Level Charts"
          });
          
          Menu.create({
             ID:"prdMenu", autoDraw:false, showShadow:true, shadowDepth:9, cellHeight:18, menuButtonWidth:75,
             data:[
               {title:"Forward ...",enableIf:"false",icon:"transit16.png"},
               {isSeparator:true},
               {title:"Freeze",enableIf:"false"}
             ],title:"Operations"
          });
          
          Menubar.create({
              ID:"menuBar", autoDraw:false, backgroundColor:"#CCCCCC",
              menus:[chartMenu, prdMenu]
          });
          VStack.create({top:23,width:"100%",members:[menuBar]});
          isc.HLayout.create({
              ID:"hpane",
              width:"100%",height:"94%",top:43,
              members:[
                isc.SectionStack.create({
                ID:"sectionStack",visibilityMode:"multiple",
                width:"20%",height:"100%", showResizeBar:true,border:"1px solid blue",
                sections:[
                   {title:"Details",expanded:true,resizeable:false,
                     items:[
                      isc.DetailViewer.create({
                         ID:"dtlV",showEmptyMessage:true,emptyMessage:"No data selected",
                         fields:[
          				 {name:"chart_name",title: "Name"},
                           {name:"city_name",title: "City"},
                           {name:"state_id",title: "State"}
                         ]
                      }),
                      isc.HLayout.create({
                       membersMargin:5,
                       members:[
                        isc.Button.create({ID:"redraw",title:"Refresh",disabled:true,showDisabled:true}),
                        isc.Button.create({ID:"mapit",title:"Map",click:"say('test')"})
                       ]
                     })
                   ]},
                   {title:"Listing",expanded:true,canCollapse:true,
                     items:[
          			isc.TreeGrid.create({
          			ID:"chartsTree",
          			nodeClick:function(viewer,node,recordNum){
          				var parentNode=chartsTree.data.find("node_id","2");
          			},
          			fields:[
          				{name:"Name",title:"Name",width:190},
          				{name:"Type",title:"Type",width:70},
          				{name:"Date",title:"Date",width:72}
          			],
          			wrapCells:true,showEmptyMessage:true,emptyMessage:"No data selected",prompt:"Click to Open",
          			data:isc.Tree.create({
          				ID:"cTree",modelType:"parent",rootValue:"0",nameProperty:"Name",idField:"node_id",parentIdField:"parent_id",
          				data:[
          				{node_id:"1",parent_id:"0",chart_id:"0",arr_id:"-1",Name:"<b>Current</b>",Type:"",Date:""},
          				{node_id:"2",parent_id:"0",chart_id:"0",arr_id:"-1",Name:"<b>Discarded</b>",Type:"",Date:""}
          				]
          			}),
          			width:"100%",height:400,nodeIcon:"icons/chart_open.png",showOpenIcons:false,showDropIcons:false,closedIconSuffix:""
          			})
          		]}
                 ]
               }),
               isc.VLayout.create({
                   ID:"vpanes",width:"80%",
                   members:[
                     isc.TabSet.create({
                       ID:"cTabs",
                       tabBarPosition:"top",width:"100%",height:"90%",
                       paneContainerProperties:{backgroundImage:"nebula.jpg"},
                       tabSelected:function(tabNum,tabPane,ID,tab){
                       },
                       removeTabs:function(tabs){
                         this.Super("removeTabs",arguments);
                       },
          		tabs:[]
          	})
              ]
             })
            ]
          });
          </script></body></html>
          thanks.

          Comment


            #6
            We'll check this out (looks like maybe an iOS / Opera bug), but a better way to write your code would be to put the header HTML inside of an HTMLFlow, or just replace it with real widgets. This would fix iOS at least, unsure about Opera.

            Comment


              #7
              Adding that html piece to the Label's content attribute fixes the problem on iPhone.

              thanks,
              - Gene

              Comment


                #8
                We believe the underlying problem here is now resolved.
                Please let us know if this continues to be an issue.

                Regards
                Isomorphic Software

                Comment


                  #9
                  Thanks! Is it fixed on 8.2 branch or on 8.3?

                  thanks,
                  - Gene

                  Comment


                    #10
                    Thank you for the fix, it's working fine with the latest 8.2 build.

                    Comment

                    Working...
                    X