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
Regular Contributor
Posts: 75
Registered: ‎05-31-2013
My Device: 9900
My Carrier: Ufone
Accepted Solution

changing value of text using slider

[ Edited ]

hi you all

i need a help from your side

 

i have created a slider and want to change the size of listview text using slider

 

here is my code

 

 Slider {
                       id: slider
                        fromValue: 8.0
                        toValue: 16.0
                        value: 8.0
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 0.1
                        }
                        preferredWidth: 200.0
                        maxWidth: 250.0
                        preferredHeight: 20.0
                        visible: true
                        enabled: false
                        horizontalAlignment: HorizontalAlignment.Center
               onImmediateValueChanged: {
                            
// descriptionText is the id of label
          descriptionText.textStyle.fontSize = FontSize.PointValue
           descriptionText.textStyle.fontSizeValue = immediateValue
                        }
                    
                    }

/***********************************************************************//
i am adding data to listview using remote source

  Container {
            id: listviewContainer
            
            layout: StackLayout {
            
            }
            ListView {
                id: myListView1
                dataModel: dataModel1
                //{
                //  source: "asset:///models/xmldata.xml"
                //      }
                
                // Use a ListItemComponent to determine which property in the
                // data model is displayed for each list item
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            rightPadding: 20
                            leftPadding: 20
                            horizontalAlignment: HorizontalAlignment.Center
                            verticalAlignment: VerticalAlignment.Center
                            layout: StackLayout {
                                orientation: LayoutOrientation.TopToBottom
                            
                            }
                            
                            Container {
                                topPadding: 40
                                
                                horizontalAlignment: HorizontalAlignment.Fill
                                
                                layout: DockLayout {
                                
                                }
                                // The Item content container
                                Container {
                                    
                                    verticalAlignment: VerticalAlignment.Top
                                    horizontalAlignment: HorizontalAlignment.Right
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.RightToLeft
                                    
                                    }
                                    
                                
                                }
                               
                            
                            }
                            
                            
                          
                            // Description text label
                            Label {
                                id: descriptionText
                             //  
                           //     objectName: descriptionText
                                //  leftMargin: 20
                                horizontalAlignment: HorizontalAlignment.Right
                                verticalAlignment: VerticalAlignment.Top
                                text : ListItemData.des
                                textStyle.color: Color.create("#868686")
                                textStyle.textAlign: TextAlign.Justify
                                multiline: true
                                textFormat: TextFormat.Plain
                                textStyle.fontSizeValue: 8.0
                            }
                            
                            
                        
                    }
                
                }
        ]
        
        
    
    }
    
    attachedObjects: [
        GroupDataModel {
            id: dataModel1
            
            // Sort the data in the data model by the "pubDate" field, in
            // descending order, without any automatic grouping
            sortingKeys: [ "date" ] //[ "pubDate" ]
            sortedAscending: false
            grouping: ItemGrouping.None
        },
        DataSource {
            id: dataSource1
            objectName: ""
            // Load the XML data from a remote data source, specifying that the
            // "item" data items should be loaded
            source:"http://10.121.10.139/simplehtmldom/getdescnews.php?newsid="+dataSource1.objectName

            query: "/news/property/"
            type: DataSourceType.Xml
            
            onDataLoaded: {
                // After the data is loaded, clear any existing items in the data
                // model and populate it with the new data
                dataModel1.clear();
                dataModel1.insert(data)
                myIndicator12321.setRunning(false);
                myIndicator12321.setVisible(false);
                //      dataModel.insert(data)
                
               
            }
                   
                }
    ]
}

// in the end i am calling on creating complete

onCreationCompleted: {
        // When the top-level Page is created, direct the data source to start
        // loading data
        dataSource1.load();
    }

 problem i am facing is, it cannot find the variable descriptionText, which is the id of Label

 

can any one help ?

Retired
Posts: 571
Registered: ‎06-25-2010
My Device: Z10
My Carrier: Vodafone

Re: changing value of text using slider

Can you share the whole QML page and the error messages from the log please? 

 

I notice that the Slider is not enabled but presumably this is not your problem and you enable it somewhere else?

 

With all the QML, perhaps I can see what is happening.

--------------------------------------------------------------------------------------------
Feel free to press the like button on the right side if you liked my attempts to help :-)
And please mark posts as solved if you think I found the solution or set you on its path. Thanks!
Follow me on Twitter: @mdwrim
Regular Contributor
Posts: 75
Registered: ‎05-31-2013
My Device: 9900
My Carrier: Ufone

Re: changing value of text using slider

Yes i have enabled the slider in oncreation completed
I will share my whole xml in the next post
Regular Contributor
Posts: 75
Registered: ‎05-31-2013
My Device: 9900
My Carrier: Ufone

Re: changing value of text using slider

here is full qml file

i am getting the error on log

ReferenceError: Can't find variable descriptionText

 

import bb.cascades 1.0
import org.labsquare 1.0
import bb.data 1.0

Page {
    id: topPage
    
    property bool fontSizeBtn : false
       Container {
        
        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        
        }
        
        //Top header container with backbutton
        Container {
            topPadding: 20
            leftPadding: 20
            bottomPadding: 20
            horizontalAlignment: HorizontalAlignment.Fill
            background: Color.create("#f6f4f4")
            layout: DockLayout {
            
            }
            // Top Header Container
            Container {
                rightPadding: 20
                
                verticalAlignment: VerticalAlignment.Top
                horizontalAlignment: HorizontalAlignment.Right
                layout: StackLayout {
                    orientation: LayoutOrientation.RightToLeft
                
                }
                
                
               
                //label for src news
                ImageButton {
                    id:fontSizeButton
                    rightMargin: 50
                    defaultImageSource: "asset:///images/text.png"
                    pressedImageSource: "asset:///images/text.png"
                    horizontalAlignment: HorizontalAlignment.Right
                    verticalAlignment: VerticalAlignment.Top
                    
                    onClicked: {
                        if(fontSizeBtn == false)
                        {
                            mainsliderContainer.visible=true
                            fontSizeBtn =true
                        }
                        else 
                        {
                            mainsliderContainer.visible=false
                            fontSizeBtn =false
                        }
                    }
                }
            
            
            }
            
            
        
        }
        
        // line separator
        
        ImageView {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Top
            imageSource: "asset:///images/sep.png"
        
        }
              
        // slider container for text
        Container {
            id: mainsliderContainer
            //     leftPadding: 80
            visible: false
            verticalAlignment: VerticalAlignment.Top
            horizontalAlignment: HorizontalAlignment.Center
            layout: AbsoluteLayout {

            }       
            // main container without bg
            Container {
                
                id: sliderContainer
                topPadding: 30
                rightPadding: 80
                leftPadding: 50
                layout: StackLayout {
                
                }                                         
                // slider and font size container
                Container {
                    verticalAlignment: VerticalAlignment.Bottom
                    horizontalAlignment: HorizontalAlignment.Center
                    //  rightPadding: 40
                    leftPadding: 40
                    layout: StackLayout {
                        orientation: LayoutOrientation.RightToLeft
                    
                    }                                                  
                    Slider {
                        id: slider
                        
                        fromValue: 8.0
                        toValue: 16.0
                        value: 8.0
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 0.1
                        }
                        preferredWidth: 200.0
                        maxWidth: 250.0
                        preferredHeight: 20.0
                        visible: true
                        enabled: true
                        horizontalAlignment: HorizontalAlignment.Center
                        onImmediateValueChanged: {

                         
                           descriptionText.fontSize = FontSize.PointValue
                           descriptionText.fontSizeValue = immediateValue
                        }                   
                   }                  
                }          
            }      
        }
        Container {
            id: listviewContainer
            
            layout: StackLayout {
            
            }
          
            ListView {
                id: myListView1
                dataModel: dataModel1
                
                
                //{
                //  source: "asset:///models/xmldata.xml"
                //      }
                
                // Use a ListItemComponent to determine which property in the
                // data model is displayed for each list item
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        id: sample
                        
                        Container {
                            id:mainListViewContainer
                            rightPadding: 20
                            leftPadding: 20
                            horizontalAlignment: HorizontalAlignment.Center
                            verticalAlignment: VerticalAlignment.Center
                            layout: StackLayout {
                            orientation: LayoutOrientation.TopToBottom
                            
                            }
                            
                            // /------------------------------------------------------------------------------------------*
                            Container {
                                topPadding: 40
                                
                                horizontalAlignment: HorizontalAlignment.Fill
                                
                                layout: DockLayout {
                                
                                }
                                // The Item content container
                                Container {
                                    
                                    verticalAlignment: VerticalAlignment.Top
                                    horizontalAlignment: HorizontalAlignment.Right
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.RightToLeft
                                    }                               
                                }                              
                            }
                                                      
                            // original label for UI
                          
                           
                           
                           
                           
                            // Description text label
                            Label {
                                id: descriptionText
                           //     objectName: descriptionText
                                //  leftMargin: 20
                                horizontalAlignment: HorizontalAlignment.Right
                                verticalAlignment: VerticalAlignment.Top
                                text : ListItemData.des
                                textStyle.color: Color.create("#868686")
                                textStyle.textAlign: TextAlign.Justify
                                multiline: true
                                textFormat: TextFormat.Plain
                                textStyle.fontSizeValue: 8.0
                                
                            }
                           
                    }
                
                }
        ]  
    
    }
    
    attachedObjects: [
        GroupDataModel {
            id: dataModel1
            
            // Sort the data in the data model by the "pubDate" field, in
            // descending order, without any automatic grouping
            sortingKeys: [ "date" ] //[ "pubDate" ]
            sortedAscending: false
            grouping: ItemGrouping.None
        },
        DataSource {
            id: dataSource1
            objectName: ""
            // Load the XML data from a remote data source, specifying that the
            // "item" data items should be loaded
            source: "http://192.168.1.8/simplehtmldom/getlistnews-Copy.php?catid=fjsd,sdfjkl&type=LN"

            
            query: "/news/property/"
            type: DataSourceType.Xml
            
            onDataLoaded: {
                // After the data is loaded, clear any existing items in the data
                // model and populate it with the new data
                dataModel1.clear();
                dataModel1.insert(data)
             
                myIndicator12321.setRunning(false);
                myIndicator12321.setVisible(false);
          //      slider.enabled=true
              //      dataModel.insert(data)
                
                
            }
                   
                }
    ]
}
ActivityIndicator {
    id: myIndicator12321
    preferredWidth: 50
    verticalAlignment: VerticalAlignment.Center
    horizontalAlignment: HorizontalAlignment.Center
    //    running: true

}
    onCreationCompleted: {
        // When the top-level Page is created, direct the data source to start
        // loading data
     
        dataSource1.load();
        myIndicator12321.setRunning(true);
    }
  
    }
    
        
    
}

 can you please help me

Developer
Posts: 50
Registered: ‎11-15-2012
My Device: Q10
My Carrier: WIND

Re: changing value of text using slider

The problem seems to stem from you wanting to change a property on many items by doing a single assignment.

 

You're going to need at the very least to loop over every list item and then (maybe?) get access to its member elements in order to make this change.

 

Or else maybe it's possible to use some sort of mutable FontStyle object?  I'm not really sure about the abilities of QML styling yet.

Regular Contributor
Posts: 75
Registered: ‎05-31-2013
My Device: 9900
My Carrier: Ufone

Re: changing value of text using slider

I dont to change property of many items
Just want to change text size of one label
I hope you are getting what i want
Retired
Posts: 571
Registered: ‎06-25-2010
My Device: Z10
My Carrier: Vodafone

Re: changing value of text using slider

I think your problem description is clear. Thanks for the QML. I'll take a look at it now.

--------------------------------------------------------------------------------------------
Feel free to press the like button on the right side if you liked my attempts to help :-)
And please mark posts as solved if you think I found the solution or set you on its path. Thanks!
Follow me on Twitter: @mdwrim
Retired
Posts: 571
Registered: ‎06-25-2010
My Device: Z10
My Carrier: Vodafone

Re: changing value of text using slider

OK, the problem is that listItemComponents attached to a Control such as a ListView have their own context. The documentation for ListItemComponent refers to this I think. So you need to proceed like this:

 

1. Have a property defined as an attribute of the ListView

2. Bind your listItemComponent Label fontSizeValue to the ListView property. Note though that to do this, you need to get a reference to the ListView using ListItem.view from the Container that your Label is in. Not obvious I know.

3. Have your Slider update the property that you defined for the ListView. 

 

Slider---------> ListView property p_font_size <---------- Label

 

Like this:

 

ListView {
  id: myListView1
  property real p_font_size: 10

 

 

  listItemComponents: [ 
    ListItemComponent {
      type: "item"
      id: sample

 

     

      Container {
        id: mainListViewContainer

 

          Label {
            id: descriptionText

            ..........
            textStyle.fontSize: FontSize.PointValue
            textStyle.fontSizeValue: mainListViewContainer.ListItem.view.p_font_size

          }

 

 

and elsewhere in your page

 

 

Slider {
  id: slider

 

  fromValue: 8.0  
  toValue: 16.0
  value: 8.0
  layoutProperties: StackLayoutProperties {
    spaceQuota: 0.1
  }
  preferredWidth: 200.0
  maxWidth: 250.0
  preferredHeight: 20.0
  visible: true
  enabled: true
  horizontalAlignment: HorizontalAlignment.Center

 

  onImmediateValueChanged: {
    myListView1.p_font_size = immediateValue
  }
}

 

I test and this works. Please make this answer as the solution if it works for you too :-)

--------------------------------------------------------------------------------------------
Feel free to press the like button on the right side if you liked my attempts to help :-)
And please mark posts as solved if you think I found the solution or set you on its path. Thanks!
Follow me on Twitter: @mdwrim
Regular Contributor
Posts: 75
Registered: ‎05-31-2013
My Device: 9900
My Carrier: Ufone

Re: changing value of text using slider

it works

really thanks for the support 

 

can i access other things like check box value like the method you have defined ?

Retired
Posts: 571
Registered: ‎06-25-2010
My Device: Z10
My Carrier: Vodafone

Re: changing value of text using slider

You're welcome :-)

 

Yes, that technique should work in the general case. Using a property attached to the ListView in the way I showed here, should give you access to other components in the same way.

 

Good luck!

--------------------------------------------------------------------------------------------
Feel free to press the like button on the right side if you liked my attempts to help :-)
And please mark posts as solved if you think I found the solution or set you on its path. Thanks!
Follow me on Twitter: @mdwrim