Continuacion del Hola Mundo Parte I...
Creacion del Hola Mundo en Cascades para BlackBerry10
Cuando creamos un nuevo proyecto, este generalmente o casi siempre, abrira con una etiqueta en la edicion que dice Hello World (Hola Mundo en ingles) es lo mas basico que existe para probar, debido a esto, me tome el tiempo para modificar ligeramente dicho proyecto y crear uno muy parecido pero usando otros componentes y las Propiedades de QML.
- Lo que primero debemos hacer es abrir o ejecutar el icono de BlackBerry Native SDK 10.2.0 en el escritorio. Se abrira una ventana que de manera predeterminanda pidiendo donde deseas comenzar a trabajar, se llama WorkSpace, siempre se usara como predeterminado segun la version de SDK que bajaste en mi caso tengo la 10.2.0 Gold, este creo un Workspace con dicho nombre, ojo, podemos modificar esta ruta segun nustros gusto y criterio de diseño, no necesariamente debemos usar esta, podremos usar X cantidad de rutas.
- Al abrirse el programanos encontramos con lo ya mensionado en la leccion anterior, los componentes y area de edicion trabajo etc (En mi caso esta ligeramente modificada por razones personales y criterior de desarrollo, pero no varia con lo expuesto en la leccion anterior). Vamos a encontrar en el Editor, una ventana de Bienvenida con los Links principales, con explicacion de Momentics IDE y muchas cosas mas. Podremos cerrar esta ventana ya que no es presindible,
- El siguiente paso es crear el nuevo proyecto, para ello vamos a File>>New>>BlackBerry Project
- Nos abrira una ventana de dialogo donde debemos seleccionar que queremos trabajar con Cascades.
- Luego la siguiente pestaña, Templates seleccionamos que queremos la plantilla estandar, la mas basica, pero tenemos otras que va a variar segun quieras trabajar en tu aplicacion.
- La siguiente plantilla son para la configuraciones Basicas. Tendremos varias opciones la unica que usaremos es Project name, en el cual si ustedes quieren puede repetir el nombre que use ¨HolaMundoBB¨ aunque podemos usar cualquier otro.
- Y por ultimo seleccionamos el nivel de api que deseamos contruir la app, recordemos que todos descargamos la 10.2.0 porque es la mas actual y posee modulos actualizados, pero hay Desarrolladores que por cuestion de compatibilidad descargan la mas basica 10.0.9 para que todos los equipos puedan usarla, yo recomendaria minimo si desean descargar el api 10.1 aunque es mejor como lo temenos el 10.2, y le damos Finish. El proyecto se cargara por un momento.
- Este sera nuestro primer proyecto basico creado automaticamente como plantilla estandar.
import bb.cascades 1.2
Page {
Container {
//Todo: fill me with QML
Label {
// Localized text with the dynamic translation and locale updates support
text: qsTr("Hello World") + Retranslate.onLocaleOrLanguageChanged
textStyle.base: SystemDefaults.TextStyles.BigText
}
}
}
El proyecto esta constituido por un
Import bb.cascades 1.2
Page{}
Container{}
Label{}
Con el import bb.cascades 1.2 estamos llamando o importando trodos los componentes basicos de trabajo, es importante.
El resto son componenten que estan ubicados en la ventana Componentes de QML
Borramos todo y dejamos solo el
import bb.cascades 1.2
- Ahora vamos a arrastrar un componenten Page{} y luego dentro de este un Componente Container{} como muestra el siguiente Gif
tendremos algo asi
import bb.cascades 1.2
Page {
Container {
}
}
- Nuestro siguiente paso es agregar un fondo, darle la propiedad a ese Contenedor (Container) para que las imagenes y componentes se acoplen de una manera mas ordenada y se adapte a la pantalla de nuestro telefono, mostrare la diferencia si se usa uno acomple a otro.
usaremos el
layout: DockLayout {
}
dentro del contenedor principal porque es nuestra raiz.
Luego dentro del contenedor arrastraremos y soltamos un ImageView{} como lo hicimos previamente con el Page{} y Container {}. Nuestro codigo quedara de la siguiente manera.
import bb.cascades 1.2
Page {
Container {
layout: DockLayout {
}
ImageView {
}
}
}
Ahora debemos importar una imagen a nuestro proyecto que sera el fondo de pantalla, yo use una, que anexare luego en el proyecto final si desean usarla. La manera mas facil y rapida de importar archivos a nuestro proyecto es mediante el Copy&Paste
Es Decir copiamos la imagen donde la tengamos y nos vamos a nustro Explorador de Proyecto ubicamos nuestro HolaMundoBB y en la carpeta assets que es donde se almacena todo lo relacionado a QML, vamos a dar pegar quedara de la siguiente manera.
- Podremos incluso crear carpeta independientes para cuando manejemos mas de un QML y mas de una imagen, queda a criterio de cada persona, a modo de ejemplo lo hago de la forma sencilla.
- El siguiente paso es el de crear la ruta en nuestro ImageView para que nos muestre la imagen en el visor de QML y por defecto asi se vera en nuestro equipo.
usamos el imageSource: "" para llamar a la ruta asset:///b.png
quedara de la siguiente manera nuestro codigo.
import bb.cascades 1.2
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///b.png"
}
}
}
y en el visor de QML ya podremos vislumbrar esta imagen de manera centrada y renderizada.
- Ahora queremos usar una Etiqueta donde nos muestre Un titulo, nombre o algun Texto en especifico, pero queremos que dicha Etiqueta tenga unas propiedades independientes a la que tiene el contenedor principal. Para ello arrastramos otro Container{} y soltamos luego del ImagePreview, esto para que cualquier edicion que le hagamos a este no repercuta en el resto de componentes. Quedaria el codigo de la siguiente Manera.
import bb.cascades 1.2
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///b.png"
}
Container {
}
}
}
A este container tambien tambien le daremos una propiedad por defecto para que de acomple de manera adecuada las etiquetas. Usaremos el
layout: StackLayout {
}
Y para el siguiente paso agregamos las dos etiquetas dentro de este nuevo contenedor. Para las etiquetas arrastramos el componente Label{} quedara de la siguiente manera el Codigo.
import bb.cascades 1.2
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///b.png"
}
Container {
layout: StackLayout {
}
Label {
}
Label {
}
}
}
}
Ya casi concluimos el tutorial, debemos agregar que deseamos mostrar en cada etiqueta y darle algunas caracteristicas y propiedades.
Cada Label{} para comenzar a redactar abrimos comillas "" y escribimos lo que queramos mostrar alli de la siguiente forma.
import bb.cascades 1.2
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///b.png"
}
Container {
layout: StackLayout {
}
Label {
text: "Hola Mundo"
}
Label {
text: "Hola Foro BlackBerry en Español"
}
}
}
}
Pero aun falta las propiedades para culminar, primero por defecto tendremos un texto negro pero si nuestro fondo es oscuro no se podra ver asi que debemos colocar color a nuestro text, seleccionamos en el Label {} y en el panel de propiedades nos vamos a posicionar en Appearance y en Font Color seleccionamos el Blanco
Y nuestro codigo que dara de la siguiente manera, Acoto que en el otro Label seleccione el Rojo.
import bb.cascades 1.2
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///b.png"
}
Container {
layout: StackLayout {
}
Label {
text: "Hello World"
textStyle.color: Color.White
}
Label {
text: "Hola Foro BlackBerry en Español"
textStyle.color: Color.Red
}
}
}
}
- Ahora solo nos falta darle un tamaño y grosor al primer Label de Hola World y centrar nuestro text.
- Para centrar el texto vamos a seleccionar el Container que posee Los Label y escribimos la siguiente propiedad.
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
Esto hara que nuestras etiquetas queden centradas y mejor presentadas. La veremos de la siguiente manera y el codigo quedaria casi para finalizar 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
}
Label {
text: "Hola Foro BlackBerry en Español"
textStyle.color: Color.Red
}
}
}
}
Por ultimo pe daremos la propiedad a la Etiqueta o Label uno para que logre indenticarse mejor como un titulo, con mayor tamaño y en mas rellena. Dentro del label usaremos lo siguiente
textStyle.fontWeight: FontWeight.W500
textStyle.base: SystemDefaults.TextStyles.BigText
Y el codigo Final seria
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
}
}
}
}
Ya tenemos creada la UI de la Aplicacion ahora debemos Construir para luego hacerle Test, vamos a darle click en Built
- Previamente debemos tener conectado via USB el Telefono para hacer la prueba asi le damos click en Play y la app se enviara a el telefono.
Fin del Proyecto.
Gracias
Links de Decarga del Proyecto
- Link para pruebas, instalar via Sideload https://db.tt/CNmK92FV
- Link de descarga para porbar el proyecto https://db.tt/2TYpMueA
--------------------------------------------------
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