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
Posts: 18
Registered: ‎08-20-2014
My Device: Z10
My Carrier: Rogers
Accepted Solution

Imageview link and creating links to websites

Hello, I'm currently learning the ways and concepts of developing an app on Blackberry Native. And, I'm finding it hard to have images or text/buttons as links to websites. Can somebody help me?

Developer
Posts: 162
Registered: ‎10-19-2012
My Device: Playbook, BB10DevAlphaB/C, Z10
My Carrier: Sonera, Saunalahti

Re: Imageview link and creating links to websites

Could you be more specific, what kind of problems do you have exactly ?
Developer
Posts: 21
Registered: ‎06-10-2014
My Device: blackberry z10
My Carrier: T-mobile

Re: Imageview link and creating links to websites

[ Edited ]

You can do this with Invocations

 

Example below opens "http:/www.google.com when clicked on the image

 

Touch event for imageview:

 

	if (event.touchType == TouchType.Up)
    {
        thelink.trigger("bb.action.OPEN")

    }

 

 

 Attachedobjects:

 

attachedObjects: [
Invocation {
id: thelink
query: InvokeQuery {
mimeType: "text/plain"
invokeTargetId: "sys.browser"
uri: "http://www.google.com"
}
}
]

 

Developer
Posts: 18
Registered: ‎08-20-2014
My Device: Z10
My Carrier: Rogers

Re: Imageview link and creating links to websites

What I mean by that is I want an image to be like a link and when you click it you are directed to a website.

ex: google.ca

 

And, creating just text links, for example in HTML to create a link you write <a href="http://google.ca">Google</a>

Developer
Posts: 18
Registered: ‎08-20-2014
My Device: Z10
My Carrier: Rogers

Re: Imageview link and creating links to websites

**I forgot to mention, I'm building the app with QML.**

Developer
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Imageview link and creating links to websites

whenever you do stuff like creating custom clickable elements, just do this: create a parent container, add your stuff, and add a button on top which fills the whole container (several layers)

Like this:

Container (parent)
|__Button (layer, on top)
|__your original content


-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
Posts: 18
Registered: ‎08-20-2014
My Device: Z10
My Carrier: Rogers

Re: Imageview link and creating links to websites

Alright, I'll try it! Thanks
Developer
Posts: 18
Registered: ‎08-20-2014
My Device: Z10
My Carrier: Rogers

Re: Imageview link and creating links to websites


pyth wrote:
whenever you do stuff like creating custom clickable elements, just do this: create a parent container, add your stuff, and add a button on top which fills the whole container (several layers)

Like this:

Container (parent)
|__Button (layer, on top)
|__your original content



Please bare with me, I'm new with all this QML & Etc stuff. But, I'm still a little confused, Here's a picture of what I've got so far of the basic ImageButton. 

Developer
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Imageview link and creating links to websites

here's what I meant

 

import bb.cascades 1.2

Page {
    Container { //parent

        ListView {
            id: listView
            
            dataModel: GroupDataModel {
                id: listDataModel
                
                sortedAscending: true
                sortingKeys: ["label"]
                grouping: ItemGrouping.None
            }
            
            onCreationCompleted: {
                for (var i = 0; i < 100; i++) {
                    listDataModel.insert({"label": "test " + i})
                }    
            }
        }
    }
}

 

 

The listview would be my 'normal' content, right? the outer container doesn't really do anything

 

but now look here

import bb.cascades 1.2

Page {
    Container { //parent
        layout: DockLayout {

        }

        verticalAlignment: VerticalAlignment.Fill
        
        ImageButton {
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            opacity: 0.5 //for testing
            defaultImageSource: "asset:///images/background.png"
            
            onClicked: {
                //do stuff
            }
        }
        
        ListView {
            id: listView
            
            dataModel: GroupDataModel {
                id: listDataModel
                
                sortedAscending: true
                sortingKeys: ["label"]
                grouping: ItemGrouping.None
            }
            
            onCreationCompleted: {
                for (var i = 0; i < 100; i++) {
                    listDataModel.insert({"label": "test " + i})
                }    
            }
        }
    }
}

 

I added a docklayout to the outer container. the inner listview is still as it is. but what I can do now is add an imagebuttpn, stretch it over the whole container, and do whatever I want inside. the opacity was set to 0.5 for you to understand better. if you used a transparent image, you get a transparent button which fills your parent container. (I'm not sure if it works with opacity set to 0.0)

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Imageview link and creating links to websites

and for performance reasons: if you should do this, you should disable content which cannot be clicked anymore (in this example: disable the listview)
-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o