sábado, 16 de diciembre de 2017

Emulador Nox en modo desarrollo

Para cambiar Nox al modo desarrollo, deberemos seguir unos pasos, esto nos sirve para probar nuestras aplicaciones web en un emulador de android.

1º-Instalamos y ejecutamos Nox, al ejecutarlo debemos ir a configuración del sistema, en el menu de Nox (arriba), se nos abre por defecto la pestaña configuración general, y ahí cambiamos en iniciar root, lo habilitamos pulsando sobre el checkbox ( el cuadradito), pulsamos abajo en guardar configuración y reiniciamos Nox.

2º- Con Nox reiniciado, vamos a settings (ajustes) en el Android, es decir dentro de nuestro emulador, no a los botones de Nox, en mi versión por ejemplo ajustes está en tools, en la pantalla principal.

3º- Ahora vamos a información de la tablet ( about tablet) y entramos, y donde pone Número de compilación, pulsamos 5 veces, puede que en otras versiones haya que pulsar más o menos veces, cuando este preparado te lo indicará con una advertencia el android, que ya esta en modo desarrollo.

4º- Volvemos atrás y en ajustes ( settings ), te saldrá una pestaña nueva, llamada Opciones de desarrollo, pues entramos ahí, en la zona de depuración ( debug ), habilitamos la opción Depuración USB ( debugger USB ).

5º- Reiniciamos Nox, y en nuestra consola ejecutamos, primero adb kill-server para parar el servidor por si está ejecutándose algo, después con el Nox encendido, ejecutamos adb connect 127.0.0.1:62001. Para comprobar si nuestra sistema reconoce el dispositivo, ejecutamos la consulta de nuestro dispositivo, por ejemplo en Nativescript que es lo que yo estoy utilizando ejecuto en la consola: tns device , si hay algún dispositivo o emulador este comando te lo muestrá, y para terminar ejecuto en la consola: tns run android, que correrá la aplicación en el emulador Nox.

Espero que les haya servido de ayuda.

miércoles, 13 de diciembre de 2017

Crear opacidad en una imagen de fondo en nativescript

Para crear una imagen de fondo con nativescript a falta de otros recursos yo lo he hecho de esta manera:

1º- En la etiqueta page, pero puede ser en cualquier etiqueta que vaya de cabecera en la página, pues introducimos el background-image: url ("ejemplo.jpg"), con background-size: cover, y después viene la raiz del problema, entonces creamos una etiqueta que envase el resto de la página por ejemplo un GridLayout y establecemos el color de fondo con rgba, background-color: rgba(255, 249, 192, 0.7) por ejemplo y ya esta, ya tenemos nuestra imagen de fondo
la opacidad creada.

Aquí os dejo un código de ejemplo que yo he utilizado:

CSS:

page {background-image: url("~/images/pixabay_motocross.jpg"); background-size: cover;}
GridLayout {
background-color: rgba(255, 249, 192, 0.7);
}

HTML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" tintColor="yellow">
<GridLayout rows="*,80">
<ScrollView row="0">
<FlexboxLayout id="teledeporte" flexDirection="column">
<FlexboxLayout flexDirection="column">
<Label text="Introducir deporte" ></Label>
<textField hint="introducir" autocorrect="false" autocapitalizationType="none" [(ngModel)]="Ideporte">
</textField>
<Label text='Has elegido: {{Ideporte}}'></Label>
<Button text="enter" (tap)="enter()" class="enter"></Button>
</FlexboxLayout>
<FlexboxLayout flexDirection="column">
<Label text="Eliminar deporte" ></Label>
<textField hint="introducir" autocorrect="false" autocapitalizationType="none" [(ngModel)]="Rdeporte">
</textField>
<Label text='Vas a eliminar: {{Rdeporte}}'></Label>
<Button text="delete" (tap)="delete()" class="delete"></Button>
</FlexboxLayout>
<Button text="Consultar" (tap)="loadFile()" class="consultar"></Button><br>
<FlexboxLayout flexDirection="column">
<StackLayout *ngFor="let item of str">
<Label [text]="item" textWrap="true"></Label><br/>
</StackLayout>
</FlexboxLayout>
</FlexboxLayout>
</ScrollView>
<StackLayout row="1" orientation="horizontal">
<Button text="< BACK" (tap)="goBack()" class="back"></Button>
</StackLayout>
</GridLayout>
</Page>


Espero que le pueda servir de ayuda a alguien.