viernes, 25 de abril de 2014

Tutorial [LECCIÓN 4] Compartiendo el Mundo con Ayuda para BlackBerry10

Este nuevo tutorial es continuacion del anterior Hola Mundo....

Nuestra siguiente leccion, se que a muchos le parecera super util, ademas incluire un pequeño bono al final :smileyvery-happy:

Esta leccion aprenderemos a implementar un boton de accion para invocar el target de compartir algun contenido en diferentes sitios redes, bbm, correos etc, tambien usaremos el menu desplegable con Settings y Ayuda predeterminados, y un bono, compartir nuestro canal BBM Channel para que los usuarios se puedan suscribir... Tambien la Invocacion de un target para correo ultil cuando deseamos tener contacto con el desarrollador o empresa directamente de nuestra app. 


  •  Primero agregaremos el boton de compartir mediante Share, y BBM Channel nuestros datos para ello entendamos esto como una accion a realizar, esto se denota en el page como action. 
Page{

Container {

.....
}

action[

]

}

 Nuestra accion invocaremos un InvokeActionItem que son acciones especificas a realizas un ejemplo claro es 


Usaremos el siguiente codigo



      InvokeActionItem {
            imageSource: "asset:///images/main/icon_189.png"
            title: qsTr("Share")
            
        }

 y le añadimos una propiedad para determinar como queremos que aparezca la accion en nuestra barra.

ActionBar.placement: ActionBarPlacement.OnBar

Codigo Final seria

InvokeActionItem {
            imageSource: "asset:///images/main/icon_189.png"
            title: qsTr("Share")
            ActionBar.placement: ActionBarPlacement.OnBar
        }

Aclaro que la imagen es bueno usar color contraste con la barra negra, es decir un blanco o gris y sera de 81x81 la medida estandar que deberas conseguir.


nuestro proyecto se mostrara de la siguientre manera en el SDK

Captura19.JPG

OJO La advertencia es porque en mi proyecto no poseo un imagenSource para mostrar pero podremos borrar si queremos que por defecto se carga una imange.

  • Ahora mediante Query vamos a realizar las acciones, para mayor informacion visiten el siguiente link donde no solo obtendremos informacion de la mensionada accion, tambien existen muchas otras con diferente manera de estructurarse.


El Query necesita dos o tres propiedades para realizar el marco de invocacion.

  1. mimeType: describe los datos
  2. invokeActionId: accion predeterminada de invocacion
  3. uri: El URI identifica la ubicación de la fuente de datos
  4. data: Son datoa a compartir
  5. entre otras pero no la necesitamos en este momento.
Asi quedaria nuestro Query

        query {
                mimeType: 
                invokeActionId: 
                data: 
            }

Y lo llenamos de la siguiente manera.

  query {
                mimeType: "text/plain"
                invokeActionId: "bb.action.SHARE"
                data: mymundo.text + " / "+  mymundo1.text
            }
 use el text/plain porque deseo compartir datos de text, use el bb.action.SHARE porque deseo descargar, bajar, compartir o de cualquier otra manera esta informacion en algun lado y en data muy parecido a como trabajamos el boton, invocamos los ID de los Label y separamos con un mas que segun el marco debe ir en comillas " / "  el resto por ser una signal no necesita la comilla pero si una separacion entre ellos porque estamos cargando dos datos, para ellos usamos el + sin comillas. La accion completa seria

    actions: [
        InvokeActionItem {
            title: qsTr("Share")
            ActionBar.placement: ActionBarPlacement.OnBar
            query {
                mimeType: "text/plain"
                invokeActionId: "bb.action.SHARE"
                data: mymundo.text + " / "+  mymundo1.text
            }
    }   
     ]

Si corremos la app, en mi caso, en el simulador se vera de la siguiente manera al darle click y en cualquiera que usemos de las opciones que salen, se compartira la informacion que hay en ambos Labels

Captura20.JPG


Nuestro siguiente Accion seria la de invocar nuestro canal de BBM Channel para que los usuarios puedan suscribirse. De la misma manera tendremos todo el InvokeActionItem pero solo va a variar el contenido del query

 query {
            invokeTargetId: "sys.bbm.channels.card.previewer"
            invokeActionId: "bb.action.OPENBBMCHANNEL"
            uri: "bbmc:C0002C366"
        }
 En este caso en vez de data usamos el Uri que ya explique para que servia, pero usaremos una nuevo accion

  1. invokeTargetId: que estamos llamando ahora una target independiente de una app de tercerno por decir asi, que seria el BBM, en este caso tambien no es el BBM el que llamamos es el Channel.
Nuestro codigo completo quedaria asi incluyendo el anterior.

   actions: [
        InvokeActionItem {
            title: qsTr("Share")
            ActionBar.placement: ActionBarPlacement.OnBar
            query {
                mimeType: "text/plain"
                invokeActionId: "bb.action.SHARE"
                data: mymundo.text + " / "+  mymundo1.text
            }
    },
    InvokeActionItem {
        imageSource: "asset:///images/main/Bonjour.png"
        title: "BBM Channel"
        ActionBar.placement: ActionBarPlacement.OnBar
        query {
            // mimeType: "text/plain"
            invokeTargetId: "sys.bbm.channels.card.previewer"
            invokeActionId: "bb.action.OPENBBMCHANNEL"
            uri: "bbmc:C0002C366"
        }
    }
     ]

recordemos que entre acciones se separa con una , (Coma) para evitar errores en el proyecto


uri va nuestro Channel y en invokeActionID la accion a realizar mayor informacion.


Ahora nuestro codigo general se vera de la siguiente manera


import bb.cascades 1.2

Page {
    Container {
        layout: DockLayout {
        }
        ImageView {
                imageSource: "asset:///b.png"
        }
        Container {
            layout: StackLayout {
            }
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            Label {
                id: mymundo
                text: "Hello World"
                textStyle.color: Color.White
                textStyle.fontWeight: FontWeight.W500
                textStyle.base: SystemDefaults.TextStyles.BigText
            }
            Label {
                id: mymundo1
                text: "Hola Foro BlackBerry en Español"
                textStyle.color: Color.Red
            }
            Button {
                text: "Cambio!!!"
                id: mybutton
                horizontalAlignment: HorizontalAlignment.Center
                onClicked: {  
                    mymundo.text = "Hola Mundo";
                    mymundo1.text = "Estoy probando el Button";              
                }
            }
       }
   }
    actions: [
        InvokeActionItem {
            title: qsTr("Share")
            ActionBar.placement: ActionBarPlacement.OnBar
            query {
                mimeType: "text/plain"
                invokeActionId: "bb.action.SHARE"
                data: mymundo.text + " / "+  mymundo1.text
            }
    },
    InvokeActionItem {
        imageSource: "asset:///images/main/Bonjour.png"
        title: "BBM Channel"
        ActionBar.placement: ActionBarPlacement.OnBar
        query {
            // mimeType: "text/plain"
            invokeTargetId: "sys.bbm.channels.card.previewer"
            invokeActionId: "bb.action.OPENBBMCHANNEL"
            uri: "bbmc:C0002C366"
        }
    }
     ]
}

Ahora usaremos el menu Definition para mostrar las siguientes opciones

Page{
 Menu.definition:  MenuDefinition { 
        helpAction: HelpActionItem {}
        settingsAction: SettingsActionItem {}
            
    }
Container{

....
}
action[
......
]
}

 De manera predeterminada el sistema ya tenia dichos menu definidos solo agregaremos al final un tercero que es el de contacto.

(NOTA: el menu definition aparecera en todas las paginas que nuestro proyecto contenga, no necesitamos repetir en todos los qml, con hacerlo en el main.qml es suficiente.)





        helpAction: HelpActionItem {}
        settingsAction: SettingsActionItem {}

 le vamos a dar una accion, para que abra o ejecute mediante un qml dinamico un shet y asi tener a la mano toda la informacion, para esto usaremos la signal 


  onTriggered:{}

 y ambas la vamos a llenar con un Shet que crearemos dentro del main.qml quedara algo asi

Menu.definition: MenuDefinition {
        helpAction: HelpActionItem {
           onTriggered: {
                helpSheet.open();
            }
        }
        settingsAction: SettingsActionItem {
                  onTriggered: {
                settingSheet.open();
            }
        }

 Ahora mediante una nueva propiedad del QML usaremos 


attachedObjects: []

 que alli es donde ira nuestro contenido o lo que deseamos llamar, en este caso iran los Sheet que son unas ventanas emergentes que se abren mediante un QML dinamico es decir un QML nuevo. Independiente al main.qml


attachedObjects: [
          Sheet {
              id: helpSheet
              HelpScreen {
                  id: helpScreen
              }
          },
          Sheet {
              id: settingSheet
              SettingSreen {
                  id: settingScreen
              }
          }  
      ]

 si vemos en nuestro sample el id que le di a los Sheet son los que se abriran mediante la signal que tiene el helpAction y settingAction. alli usaremos un .open(); que es la senal de abri x contenido.

Ahora vamos a crear dos nuevos QML que seran los que se abriran cuando ejecutemos help o settings y agregaremos el boton cerrar, para quitar el sheet y no tener problemas luego para regresar al menu principal.

  1. Boton secundario del Mause encima de la carpeta Assets
  2. New
  3. QML File
  4. Nombre
  • uno se llamara SettingsScreen.qml
  • otro se llamara HelpScreen.qml

Captura21.JPG


quedara de la siguiente manera

Captura22.JPG

perfecto dentro de cada uno de estos dos qml que acabamos de crear le daremos el siguiente codigo, no encesito explicar que significa cada cosa porque ya lo hicimos en hola mundo y en este proyecto.

//HelpScreen:

import bb.cascades 1.2

Page {
    Container {
       Label {
            text: "Este es el menu de Ayuda"
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
        }
        
    }
    actions: [
        
        ActionItem {
            title: qsTr("Close")
            ActionBar.placement: ActionBarPlacement.OnBar
         onTriggered: {
                helpSheet.close();
            }
        }
    ]
}

//SettingsScreen

import bb.cascades 1.2

Page {
    Container {
        Label {
            text: "Este es el menu de Configuraciones"
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
        }
    
    }
    actions: [
        
        ActionItem {
            title: qsTr("Close")
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                settingSheet.close();
            }
        }
    ]
}


 Falta solo agregar un menu de contacto para que nos escriban en el menuDefinition de igual manera que creamos los invokeActionItem en los Action:[] este tambien se cree en base a la invocacion


 ActionItem {
                  title: "Feed Back"
                imageSource: "images/main/icon_199.png"
                  attachedObjects: [
                              Invocation {
                                  id: invoke
                                  query: InvokeQuery {
                                      id: invq
                                      mimeType: ""
                                      invokeTargetId: "sys.pim.uib.email.hybridcomposer"
                                      uri: "mailto:marcos.torres@zonablackberry.com?subject=Soporte%20de%20la%20App%20Nombre:%20DeviceSuite&body=Mi%20revision%20de%20la%20App%20DeviceSuite%20es:"
                                      invokerIncluded: true
                                      onQueryChanged: invq.updateQuery()
                                  }
                  
                              }
                  
                          ]
                  
                         onTriggered: {
                              invoke.trigger("bb.action.SENDEMAIL")
                          } 
    
                }

 pero va a variar un porquito porque en vez de ser un invikokeAction directamente, es una accion dinamica.


Para mayor informacion de contactos visita el siguiente link 


Solo cambiarias los datos generales que yo copie textualmente del mio ya terminamos este tutorial dejando el codigo general final aqui 

import bb.cascades 1.2

Page {
    Menu.definition:  MenuDefinition { 
        helpAction: HelpActionItem {
                  onTriggered: {
                helpSheet.open();
            }
        }
        settingsAction: SettingsActionItem {
                    onTriggered: {
                settingSheet.open();
            }
        }
        actions: [
        ActionItem {
            title: "Feed Back"
            imageSource: "images/main/icon_199.png"
            attachedObjects: [
                Invocation {
                    id: invoke
                    query: InvokeQuery {
                        id: invq
                        mimeType: ""
                        invokeTargetId: "sys.pim.uib.email.hybridcomposer"
                        uri: "mailto:marcos.torres@zonablackberry.com?subject=Soporte%20de%20la%20App%20Nombre:%20DeviceSuite&body=Mi%20revision%20de%20la%20App%20DeviceSuite%20es:"
                        invokerIncluded: true
                        onQueryChanged: invq.updateQuery()
                    }
                
                }
            
            ]
            
            onTriggered: {
                invoke.trigger("bb.action.SENDEMAIL")
            } 
        
        }
    ]
      attachedObjects: [
          Sheet {
              id: helpSheet
              HelpScreen {
                  id: helpScreen
              }
          },
          Sheet {
              id: settingSheet
              SettingScreen {
                  id: settingScreen
              }
          }  
      ]      
    }
    Container {
        layout: DockLayout {
        }
        ImageView {
                imageSource: "asset:///b.png"
        }
        Container {
            layout: StackLayout {
            }
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            Label {
                id: mymundo
                text: "Hello World"
                textStyle.color: Color.White
                textStyle.fontWeight: FontWeight.W500
                textStyle.base: SystemDefaults.TextStyles.BigText
            }
            Label {
                id: mymundo1
                text: "Hola Foro BlackBerry en Español"
                textStyle.color: Color.Red
            }
            Button {
                text: "Cambio!!!"
                id: mybutton
                horizontalAlignment: HorizontalAlignment.Center
                onClicked: {  
                    mymundo.text = "Hola Mundo";
                    mymundo1.text = "Estoy probando el Button";              
                }
            }
       }
   }
    actions: [
        InvokeActionItem {
            title: qsTr("Share")
            ActionBar.placement: ActionBarPlacement.OnBar
            query {
                mimeType: "text/plain"
                invokeActionId: "bb.action.SHARE"
                data: mymundo.text + " / "+  mymundo1.text
            }
    },
    InvokeActionItem {
        imageSource: "asset:///images/main/Bonjour.png"
        title: "BBM Channel"
        ActionBar.placement: ActionBarPlacement.OnBar
        query {
            // mimeType: "text/plain"
            invokeTargetId: "sys.bbm.channels.card.previewer"
            invokeActionId: "bb.action.OPENBBMCHANNEL"
            uri: "bbmc:C0002C366"
        }
    }
     ]
}


 Captura23.JPG

Captura24.JPGCaptura25.JPG

perfecto tendremos un menu configurado y asi se veria el de contacto.

Captura26.JPG

Ahora enviamos a Test primero le damos en Built
Captura15.JPG

y luego en play y correr

Captura16.JPG

y probamos en nuestro telefono.

Fin del Proyecto.


Gracias

Links de Decarga del Nuevo Proyecto si queremos probar
  1.  Link para pruebas, instalar via Sideload https://db.tt/40hESVQB
  2. Link de descarga para porbar el proyecto https://db.tt/gAM4Yr34
-----------------------------------------------------------------------------------

 Ahora acotaciones:
  1. Disculparme por lo extenso del tutorial tan corto pero por ser el primero y al usar tantas herramientas nuevas se hace largo, prometo que en los proximos seran mas cortos.
  2. Para que puedas hacer test debes crear el DebugToken que lo explique en la Leccion 1 
  3. Cualquier duda no duden en comentar en el este post
Imagenes: Creadas por Marcossit para este Tutorial
Fuente: Marcossit

Links de las herramientas a usar 
Para descargar las herramientas necesarias e instalar en sus PC usen el siguiente Link https://developer.blackberry.com/native/downloads/ 


Recuerden usar VMWare en modo administrador para ejecutar el Simulador. 
Aqui encontraras los requerimientos para el Simulador.

Publicadas por a la/s

2 comentarios:

Suscribirse a: Comentarios de la entrada (Atom)
PaidVerts
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más | Un PDF