tomando el proyecto del anterior tutorial...
Estuvimos trabajando en base a un par de Componentes de QML el Imagenview y el Label con su respectivo propiedades, asi le dimos tamaño y color ademas de una pocision dentro de la pantalla. Ahora trabajaremos con un par de componentes mas que sera muy util a futuro.
Nuestro Poryecto anterior quedo mas o menos asi
import bb.cascades 1.2
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///b.png"
}
Container {
layout: StackLayout {
}
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
Label {
text: "Hello World"
textStyle.color: Color.White
textStyle.fontWeight: FontWeight.W500
textStyle.base: SystemDefaults.TextStyles.BigText
}
Label {
text: "Hola Foro BlackBerry en Español"
textStyle.color: Color.Red
}
}
}
}
abrimos el BlackBerry Native SDK 10.2.0 y en Proyectos buscamos el nuestro, ademas abrimos el main.qml
Agregaremos primero un ID que es un identificador de componentes, muy util en caso de usar algo signal u otras acciones. Ademas que tenemos en orden nuestos componentes a la hora de buscarlos si tenemos una cantidad considerable.
El Primer Label le pondremos
id: mymundo
Y quedaria
Label {
id: mymundo
text: "Hello World"
textStyle.color: Color.White
textStyle.fontWeight: FontWeight.W500
textStyle.base: SystemDefaults.TextStyles.BigText
}
al Segundo Label le pondremos
id: mymundo1
y Quedara asi
Label {
id: mymundo1
text: "Hola Foro BlackBerry en Español"
textStyle.color: Color.Red
}
Nuestro Proyecto quedara 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
}
}
}
}
Ahora si agregamos el Boton, para ello, sera agregado dentro del contenedor de los Label, podriamos si queremos colocar un ID a este solo a manera de no confundirnos en el futuro cuando sea nombrados. El buton lo arrastramos desde componentes como hicimos con los anteriores. Y le pondremos un ID a este, en mi caso sera ID: mybutton
Button {
id: mybutton
}
Perfecto a este boton le daremos igualmente unas propiedades para centrar, y unas acciones a realizar.
Para centrar usaremos horizontalAlignment: HorizontalAlignment.Center
y la accion que vamos a realizar es cambiar el texto de ambos Label que ya tenemos.
Para ellos usaremos la signal
onClicked: {
}
Quediaria nuestro Boton y codigo general 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 {
id: mybutton
horizontalAlignment: HorizontalAlignment.Center
onClicked: {
}
}
}
}
}
Al boton podremos agregar una imagen si deseamos y un titulo.
para el titulo dentro del Boton usamos text: "Cambio!!!"
todo el proyecto se vera asi...
Tendremos un boton mas vistozo...
Pasaremos ha agregar la signal.
primero recordamos que Objecto es el que deseamos cambiar en este caso el Label y segundo con que deseamos cambiar lo que ese objecto tienen en este caso el texto, asi quedaira.
mymundo y mymundo1 es el Id que le colocamos a los Label. debemos luego terminar con un .text que es la propiedad del text de esta manera hara el cambio. mymundo.text mymundo1.text por ultimo debemos escribir lo que vamos a mostrar luego de darle click al boton. en el primer label seria mymundo.text = "Hola Mundo"; en el segundo seria mymundo1.text = "Estoy probando el Button";
Quedara nuestro codigo general del 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";
}
}
}
}
}
Ahora enviamos a Test primero le damos en Built
y luego en play y correr
y probamos en nuestro telefono.
Fin del Proyecto.
Proximo Tutorial agregaremos un menu de acciones para compartir nuestro contenido y un menu emergente para Help y Settings
Gracias
Links de Decarga del Nuevo Proyecto si queremos probar
- Link para pruebas, instalar via Sideload https://db.tt/8wzMFbdb
- Link de descarga para porbar el proyecto https://db.tt/CRJqHje3
--------------------------------------------------
Ahora acotaciones:
- 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.
- Para que puedas hacer test debes crear el DebugToken que lo explique en la Leccion 1
- Cualquier duda no duden en comentar en el este post
Imagenes: Creadas por Marcossit para este Tutorial
Fuente: Marcossit
Links para ayuda y soporte: https://developer.blackberry.com/native/documentat
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/
Para descargar algun Simulador https://developer.blackberry.com/native/downloads/
Recuerden usar VMWare en modo administrador para ejecutar el Simulador.
Aqui encontraras los requerimientos para el Simulador.
No hay comentarios.:
Publicar un comentario