Base de Datos de Modelos Backbone con Titanium Alloy

Por Oscar Salas | 2164 vistas | Lectura de 3 minutos

Este es un ejemplo rápido de desarrollo de aplicaciones móviles sobre cómo integrar modelos backbone con Titanium en Alloy.

foto de Base de Datos de Modelos Backbone con Titanium Alloy

Desde el lanzamiento del complemento Alloy, el desarrollo en Titanium ha sido extremadamente simple y rápido. En este tutorial, te mostraré cómo implementar una base de datos local con modelos backbone en 5 sencillos pasos.

Paso 1

Crea un nuevo proyecto de aplicación móvil, llámalo ToDoList y ábrelo en tu editor favorito.

ti create --name ToDoList --type app --alloy

Paso 2

Dentro del proyecto, creemos un nuevo modelo llamado toDoList con el siguiente comando:

alloy generate model toDoList sql id:'INTEGER PRIMARY KEY AUTOINCREMENT' value:TEXT hasCheck:INTEGER

El archivo generado lo podrás encontrar en ./app/models/toDoList.js.

Paso 3

El siguiente paso es crear la interfaz de usuario, ve al archivo index.xml e inserta este código:

<Alloy>
  <!-- Instancia del modelo -->
  <Collection src="toDoList" />

  <NavigationWindow>
    <Window title="ToDo App">
      <View id="insertView">
        <TextField id="inputField" onReturn="doInsert" />
        <Button id="insertButton" title="Insertar" onClick="doInsert" />
      </View>

      <!-- Especifica el singleton o instancia de la colección para vincular a la tabla. -->
      <TableView id="tbToDoList" dataCollection="toDoList" onSingletap="checkUncheckRow" onLongpress="confirmDialog">
        <!-- rowId="{id}" es una propiedad personalizada para tener una referencia a la clave principal de los registros -->
        <TableViewRow id="listRow" rowId="{id}" hasCheck="{hasCheck}">
          <View id="componentView">
            <!-- text="{value}" es el valor del registro de la base de datos -->
            <Label id="lblValue" text="{value}" />
          </View>
        </TableViewRow>
      </TableView>

      <AlertDialog id="alertDialog" cancel="1" message="Eliminar" onClick="confirmRemoveRow">
        <ButtonNames>
          <ButtonName>Sí</ButtonName>
          <ButtonName>No</ButtonName>
        </ButtonNames>
      </AlertDialog>
    </Window>
  </NavigationWindow>
</Alloy>

Paso 4

Ve al archivo index.css e inserta los siguientes estilos:

'Window': {
  layout: 'vertical',
  extendSafeArea: false,
  backgroundColor: '#ffffff',
}

'TextField': {
  height: 40,
  width: '75%',
  borderWidth: 1,
  borderRadius: 6,
  clearOnEdit: true,
  autocorrect: false,
  borderColor: 'gray',
  backgroundColor:  '#f2f2f2',
  padding: { left: 10, right: 10 },
  textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT
}

'Button': {
  height: 40,
  width: '25%',
}

'TableView': {
  top: 10,
  widht: Ti.UI.FILL,
  height: Ti.UI.FILL
}

'TableViewRow': {
  height: 40,
  hasCheck: false,
  width: Ti.UI.FILL
}

'Label': {
  left: 0,
  color: 'black',
  font: { fontSize: 14, fontFamily: 'HelveticaNeue' }
}

'#insertView': {
  top: 10,
  left: 10,
  right: 10,
  height: Ti.UI.SIZE,
  layout: 'horizontal'
}

'#componentView': {
  left: 10,
  width: '90%',
  height: Ti.UI.FILL
}

Paso 5

Aquí está la parte divertida: el archivo index.js:

// Abre la ventana
$.index.open()

// Restablece el estado del modelo desde la base de datos.
Alloy.Collections.toDoList.fetch()

function doInsert() {
  // Oculta el teclado en iOS
  $.inputField.blur()

  // si hay algo en el cuadro de texto
  if ($.inputField.value.trim() !== '') {

    // Así es como creamos una instancia de un modelo y lo guardamos en la base de datos.
    // Si el modelo ya existe, la operación será una "actualización".
    Alloy.createModel('toDoList', {
      hasCheck: false,
      value: $.inputField.value.trim()
    }).save()

    $.inputField.value = ''

    // Restablece el estado del modelo desde la base de datos
    Alloy.Collections.toDoList.fetch()

  } else {
    alert('Por favor, completa el campo de texto arriba.')
  }
}

// Check/Uncheck
function checkUncheckRow(event) {
  if (event.row) {
    // Método de fábrica para instanciar una colección Backbone de objetos modelo
    let todoModel = Alloy.createCollection('toDoList')

    // Buscamos el modelo por su id que está guardado en rowId
    todoModel.fetch({ query: `SELECT * FROM toDoList WHERE id = ${event.row.rowId} LIMIT 1` })

    // Aunque solo es un solo resultado ( LIMIT 1 ), la colección es un array de modelos
    todoModel.models.forEach(model => model.save({ hasCheck: !model.get('hasCheck') }))

    // Restablece el estado del modelo desde la base de datos
    Alloy.Collections.toDoList.fetch()
  }
}

// si hacemos una pulsación larga, podemos eliminar la fila
function confirmDialog(event) {
  $.alertDialog.rowId = event.row.rowId
  $.alertDialog.show()
}

function confirmRemoveRow({ index, source }) {
  if (index === 0) {
    // hizo clic en "Sí"
    removeRow(source.rowId)
  }
}

function removeRow(rowId) {
  let todoModel = Alloy.createCollection('toDoList')

  // Buscamos el modelo por su id que está guardado en rowId
  todoModel.fetch({ query: `SELECT * FROM toDoList WHERE id = ${rowId} LIMIT 1` })

  // Aunque solo es un solo resultado ( LIMIT 1 ), la colección es un array de modelos
  todoModel.models.forEach(model => model.destroy())

  // Restablece el estado del modelo desde la base de datos
  Alloy.Collections.toDoList.fetch()
}

Puedes descargar el proyecto en GitHub. ¡Solo haz clic aquí!

Imagen del Post Introducción a JavaScript: Fundamentos y conceptos básicos

Introducción a JavaScript: Fundamentos y conceptos básicos

JavaScript

Por Editorial | 1771 vistas | Lectura de 17 minutos

Imagen del Post Cómo hacer peticiones efectivas a ChatGPT sobre programación

Cómo hacer peticiones efectivas a ChatGPT sobre programación

Programación ChatGPT

Por Editorial | 2926 vistas | Lectura de 9 minutos

Imagen del Post Potencia tus aplicaciones con los servicios estrella de Firebase

Potencia tus aplicaciones con los servicios estrella de Firebase

Servicios

Por Editorial | 532 vistas | Lectura de 6 minutos

Contáctanos por WhatsApp

Copyright © 2024 Código Móvil. Todos los Derechos Reservados.