Help with Popover window sizing from Tableview

You must Login before you can answer or comment on any questions.

I am trying to correctly size a popover window to match the passed Tableview contents. The height = 'auto' does not work, it won't display any size. I tried using Ti.UI.SIZE and Ti.UI.FILL and they appear broken with a JIRA issue that while showing resolved, I believe is only resolved in version 3.0 which is not out yet?

var annotationDetailPopover = Ti.UI.iPad.createPopover({
                        title:'Contact Details',
                        height:270,
                        width:300,
                        arrowDirection:Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP,
                        navBarHidden:false
                        //rightNavButton: travelMgmtRightNavButton
                     });
 
                     annotationDetailPopover.addEventListener('hide', function()    //Let's remove the selected annotation after the popover is killed
                    {   
                        isAnnotationDetailPopOverVisible = "false";
                    });  //end annotationDetail listener function
 
 
                    var annotationDetailPopoverWindow= Titanium.UI.createWindow({
                        title: "Contact Detail",
                        backgroundColor:'#BFBFBF',
                        //barColor:'black',
                        height:270
                    });
 
 
                    //**************** GET Tableview detail from********************************************    
                    var TestContactWindowTableview = getContactDetailsFromSqlDB( evt.annotation.id );  //will contain a tableview
                    //**************************************************************************************
 
                    annotationDetailPopoverWindow.add(TestContactWindowTableview); //Add tableview to detail window
                    annotationDetailPopover.add( annotationDetailPopoverWindow );  //Add window to popover
 
                    //************* Alpesh's code for Popover ****************************************
 
                    var lblTemp = Ti.UI.createLabel({
                        text: evt.annotation.subtitle,
                        width:'auto'
                    });
 
                    //win1.add(lblTemp);
 
 
 
                    var tempView = Ti.UI.createView({
                        top : 17,
                        left:0,
                        left : lblTemp.toImage().width-30,  //+38,
                        font:{fontSize:10},
                        //left:0,
                        width : 1,
                        height : 1
                    });
 
 
                     evt.annotation.leftView.add(tempView);
 
                    //********************************************************************************
 
 
                    if (isAnnotationDetailPopOverVisible  == false)
                    {       
                            annotationDetailPopover.show(
                                {   
                                    //view:evt.annotation.leftView,             //view here means is relative to where popover show display
                                    view:tempView,             //view here means is relative to where popover show display
                                    animated:true,
                                    x:10,
                                    y:10,
                                    width:350,
                                    //height:"auto",
                                    bottom:10,
                                    navBarHidden:true
                                }
                             ); // end popover show 
 
                            isAnnotationDetailPopOverVisible = "true";
 
                    }//end if isPoPOverVisible

— asked 1 year ago by Stephen Flournoy
1 Comment
  • Malcolm, first thank you for taking the time to look at this. What I am doing is a SQL lookup and building a tableview with this code as shown.

    var TestContactWindowTableview = getContactDetailsFromSqlDB( evt.annotation.id
    This tableview is NOT fixed height, so when I display it in the popover, I want the popover to grow or shrink in height to match the data (with the limits of the screen of course). apples own annotation Popover does this in the Maps app today.

    Currently when I display the popover using .FILL or .SIZE, Titanium doesn't show the tableview at all. This was documented as a bug I believe in a Jira post. The code I posted was fixed height because currently that's the only situation where it will work.

    I am building a custom view so that I have something to attach to the annotation window. My app is a mapping app and when a user touches the disclosure button a popover appears with more detailed data. If I could get the x and y coordinates of the pin I guess I could attach e popover there, but I haven't been successful with that yet either...(different problem)

    I will look at the properties you mention, I may have carried those over from someone else's code or some example... But I still have the problem with needing the popover to dynamically resize to the Tableview data. Hope this makes sense and hoping you can help.

    — commented 1 year ago by Stephen Flournoy

1 Answer

Hi

You have asked how to have your popOver match the size of the tableView, but I do not see any code for a tableView.

Are you hoping to match the size of the popOvers internal size to match that of a tableView where you require a fixed width and/or height?

When you set the width and height of the popOver, iOS will create a window large enough to supply the desired dimensions, however if you ask for dimensions greater than the device can provide or the current arrow position causes a restriction - the actual width and height returned will be less than asked for.

The popOver will act as a parent view so any children (tableView as example) can be added using the properties of Ti.UI.FILL for either (or both) width and height. This is by design and allows you table to expand (or shrink) to match the available space.

You have also added several parameters in the show method that do not exist and are not documented; including; x, y, width, height, navBarHidden & animated.

I am also not sure why you have added a tempview, unless is designed to fake where the arrow goes, if that is the case it SHOULD point to the thing that was clicked, it is designed to give context.

And finally you have tried to set arrowDirection which is READ-ONLY, this only tells you where iOS decided to point the arrow, not where you want it to appear.

In short; a popOver will act as a container and is designed for content that does not fill the screen - other views/windows are better suited for that. It controls how it points to the view that you nominate as the thing that initiated the popOvers appearance. Child views of any kind can easily fill it by using Ti.UI.FILL on width and/or height of the popOver itself.

— answered 1 year ago by Malcolm Hollingsworth
answer permalink
3 Comments
  • Hi

    I have some test code that you can use to show how you can have a popover have a height correct for the amount of data - so long as the row height is the same for all entries. I have also provided a easy way to show you how to attach the popover to the annotation - without any fake views.

    To see it work, create a new simple project and replace the entire app.js with the code below and run.

    It uses an array of months with the table being filled with a random number of them from 3-12. The height of the popover is calculated from this information.

    To remove the need for the fake view this example creates an imageView and assigns it to the leftView of annotation rather than a simple image. You can then use this connect to the popover.

    Let me know how this goes.

    Ti.UI.setBackgroundColor('#000');
     
    var tab1, tab2, tab3, tab4, tab5, tab6, tab7, tab8;
    (function () {
        var win = Ti.UI.createWindow({  
            height: Ti.UI.FILL,
            title: 'Map',
            width: Ti.UI.FILL
        });
     
        function addPin(obj) {
            var pin = Ti.Map.createAnnotation({
                latitude: obj.lat,
                longitude:  obj.lon,
                title: obj.title,
                subtitle: obj.subtitle,
                pincolor: Ti.Map.ANNOTATION_RED,
                animate: true
            });
            return pin;
        }
        var month = [
            { title: 'January' },
            { title: 'February' },
            { title: 'March' },
            { title: 'April' },
            { title: 'May' },
            { title: 'June' },
            { title: 'July' },
            { title: 'August' },
            { title: 'September' },
            { title: 'October' },
            { title: 'November' },
            { title: 'December' }
        ];
        var data = [];
        var imgTest1 = Ti.UI.createImageView({
            height: 43,
            image: 'KS_nav_ui.png',
            width: 46
        });
        imgTest1.addEventListener('click', function (e) {
            var data = month.slice(0, Math.floor(Math.random() * 9) + 3);
            var tbl = Ti.UI.createTableView({
                data: data,
                height: Ti.UI.FILL,
                rowHeight: 50,
                width: Ti.UI.FILL
            });
            var popover = Ti.UI.iPad.createPopover({
                height: data.length * tbl.getRowHeight(),
                title: 'Example',
                width: 300
            });
            popover.add(tbl);
            popover.show({
                view: imgTest1
            });
        });
        var imgTest2 = Ti.UI.createImageView({
            height: 43,
            image: 'KS_nav_views.png',
            width: 46
        });
        var pin = Ti.Map.createAnnotation({
            latitude: 52.4914,
            longitude: 0.6964,
            title: 'Corby',
            pincolor: Ti.Map.ANNOTATION_PURPLE,
            animate: true,
            leftView: imgTest1,
            rightView: imgTest2
        });
        data.push(pin);
        data.push(addPin({
            lat: 52.97,
            lon: -1.18,
            title: 'Nottingham'
        }));
        data.push(addPin({
            lat: 53.3822,
            lon: -1.4667,
            title: 'Sheffield'
        }));
        data.push(addPin({
            lat: 51.5171,
            lon: -0.1062,
            title: 'London'
        }));
     
        var map = Ti.Map.createView({
            annotations: data,
            height: Ti.UI.FILL,
            region: {
                latitude: 52.97,
                longitude: -0.18, 
                latitudeDelta: 2,
                longitudeDelta: 2
            },
            width: Ti.UI.FILL
        });
        win.add(map);
     
     
        tab8 = Ti.UI.createTab({  
            icon: 'KS_nav_views.png',
            title: 'Map',
            window: win
        });
    })();
    var tabGroup = Ti.UI.createTabGroup();
    tabGroup.addTab(tab8);
    tabGroup.open();

    — commented 1 year ago by Malcolm Hollingsworth

  • Did my example code answer your question?

    — commented 1 year ago by Malcolm Hollingsworth

  • Malcom,

    Thank you SOOOO much for taking the time with the code. Unfortunately, my day job has wiped me out in the last few days... no chance to test in my code yet. Please stand by...I am hopeful!

    — commented 1 year ago by Stephen Flournoy

Your Answer

Think you can help? Login to answer this question!