Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
nuelbruno
Posts: 31
Registered: ‎05-18-2014
My Device: z10

webview inside listview problem

Hi all,

 

I am using the bellow code to show some html contents in listview using webview, these html contents are comming from webservice.

 

I have made the listview to scroll from left to right, so there are five contents are there, each will be shown in single view (i.e)  FlickMode.SingleItem is used in listview.. When i scroll the list view from 1 view to 5 view, the font size is changed in the last three views and when i scroll again from the first view, the font size becomes normal in all five views..

ListView {
            id: listviewAboutus

            layout: StackListLayout {
                id: listviewscrolltypeaboutus
                orientation: LayoutOrientation.LeftToRight
            }
            onCreationCompleted: {
                
            }
            flickMode: FlickMode.SingleItem
            scrollIndicatorMode: ScrollIndicatorMode.ProportionalBar
           // scrollRole: ScrollRole.Main
            //touchPropagationMode: TouchPropagationMode.Full
            //stickToEdgePolicy: ListViewStickToEdgePolicy.BeginningThenEnd
            dataModel: weatherService.modelPlateList

            listItemComponents: [

                ListItemComponent {
                    type: ""
                    
                    Container {
                        id: mainContaioner
                        background: Color.create("#F2EEE4")

                        Container {
                            topPadding: 10
                            leftPadding: 0
                            rightPadding: 0
                            maxHeight: 87
                            minHeight: 87
                            background: Color.create("#F2EEE4")

                            Container {
                                topPadding: 15.0
                                preferredHeight: 86
                                property int tabWidth: 590
                                property int tabsubWidth: 588
                                id: mContainerAboutTab
                                //background: mImagePaintDefinitionSelected.imagePaint
                                horizontalAlignment: HorizontalAlignment.Fill
                                verticalAlignment: VerticalAlignment.Fill
                                //preferredWidth: 768
                                Container {
                                    id: buttonContab1
                                    preferredHeight: 82
                                    preferredWidth: 768
                                    rightPadding: 30.0
                                    leftPadding: 40.0
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    verticalAlignment: VerticalAlignment.Top
                                    Label {
                                        id: mLabelAbout
                                        //text: qsTr("Welcome to Alameen services") + Retranslate.onLanguageChanged
                                        text: ListItemData.getTitle
                                       
                                        //customid: ListItemData.getTitle
                                        //horizontalAlignment: HorizontalAlignment.Right
                                        verticalAlignment: VerticalAlignment.Top
                                        textStyle.color: Color.create("#03879e")
                                        preferredHeight: 20
                                        onCreationCompleted: {
                                            
                                            console.debug('aboutus language code' + Qt.mLanguageCodeqt );
                                            
                                            if (Qt.mLanguageCodeqt  != "en") {
                                                mLabelAbout.horizontalAlignment =HorizontalAlignment.Right
                                            }
                                            else 
                                            {
                                                mLabelAbout.horizontalAlignment =HorizontalAlignment.Left   
                                            }
                                        }

                                    }
                                    
                                    
                                    Container {
                                        id: borderLinetab1
                                        preferredHeight: 16
                                        preferredWidth: 768
                                        // topPadding: 75.0
                                        horizontalAlignment: HorizontalAlignment.Center
                                        verticalAlignment: VerticalAlignment.Bottom
                                        background: Color.create("#03879e")
                                    
                                    }

                                }
                                
                                
                            }
                        } // sub main container
                       
                        Container {
                            topPadding: 30.0
                            bottomPadding: 10.0
                            rightPadding: 30.0
                            leftPadding: 40.0
                            id: mContainerAboutusMsg

                            horizontalAlignment: HorizontalAlignment.Fill
                            verticalAlignment: VerticalAlignment.Fill
                            visible: true

                            
                           
                            
                            WebView {
                                id: mWebViewaboutusArabic
                                
                                html: "<html><body style='font-size:31px'>"+ListItemData.getArea+"</body></html>"
                                visible: false
                                maxWidth: 700
                                minWidth: maxWidth
                                //maxHeight: 1000
                                //minHeight: maxHeight
                                settings.background: Color.Transparent
                                horizontalAlignment: HorizontalAlignment.Center
                                verticalAlignment: VerticalAlignment.Fill                               
                                settings.defaultFontSize: 31
                                settings.minimumFontSize: 31
                                // settings.defaultTextCodecName :"UTF-8"
                                //settings.devicePixelRatio: 4
                                //settings.textAutosizingEnabled: false
                                //settings.zoomToFitEnabled: true
                            
                            }
                            
                            
                            
                            onCreationCompleted: {
                               
                                if(Qt.mLanguageCodeqt != "en")
                                {
                                   // englishcontentscroll.visible = false;
                                    mWebViewaboutusArabic.visible = true;
                                   
                                    
                                }
                                else {
                                    //englishcontentscroll.visible = true;
                                    mWebViewaboutusArabic.visible = false;
                                }
                            }
                            

                        }
                    }

                } // ListItemComponent

 

 

Please use plain text.
BlackBerry Development Advisor
MSohm
Posts: 14,642
Registered: ‎07-09-2008
My Device: BlackBerry Z30, BlackBerry PlayBook

Re: webview inside listview problem

I ran into a similar issue when I created the BlackBerry Community App.  You can see how I resolved it in the ForumThreadItem.qml from the Community 3 open source project.

 

Let me know if you have any questions about that code.

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Please use plain text.
Developer
nuelbruno
Posts: 31
Registered: ‎05-18-2014
My Device: z10

Re: webview inside listview problem

 

Hi ,

 

Thanks for the reply.. u saved my time... 1 small issue is there

 

I am using arabic text to show the contents in the webview, so the arabic text is cutting at the right side( need to solve this)

 

Another thing.. how can i use Custom font in webview.. in the same example...

 

 

Thank you,

 

Please use plain text.
BlackBerry Development Advisor
MSohm
Posts: 14,642
Registered: ‎07-09-2008
My Device: BlackBerry Z30, BlackBerry PlayBook

Re: webview inside listview problem

The font is set within the HTML contents, not by the WebView.  So if you need to change it you'd need to change it within the HTML you are displaying.

 

Are you seeing the text cutoff with my sample?

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Please use plain text.
Developer
nuelbruno
Posts: 31
Registered: ‎05-18-2014
My Device: z10

Re: webview inside listview problem

yes.. its arabic.. so the text is aligned from right to left.. so the in the right side more space is there and in the left side no space....
so i used maxwidth , then the text aligned center ,, yet the text cut occures
Please use plain text.
BlackBerry Development Advisor
MSohm
Posts: 14,642
Registered: ‎07-09-2008
My Device: BlackBerry Z30, BlackBerry PlayBook

Re: webview inside listview problem

Can you post an example?

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Please use plain text.
Developer
nuelbruno
Posts: 31
Registered: ‎05-18-2014
My Device: z10

Re: webview inside listview problem

Here is the image attached plz check10472742_1415376322056824_3789899439621405518_n.jpg

 

 

the text is moving out  in left side.. and if i use maxwidth in webview.. the text is cutting in right side..

Please use plain text.
BlackBerry Development Advisor
MSohm
Posts: 14,642
Registered: ‎07-09-2008
My Device: BlackBerry Z30, BlackBerry PlayBook

Re: webview inside listview problem

I mean post sample code that shows how you've created the CustomListItem.

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Please use plain text.