Truco: Selector de país para aplicaciones Web

Todos estamos acostumbrados a tratar con ese tipo de formularios web en los que debemos de seleccionar el nombre de un país de una larga, larga lista (después de todo, hay más de 200 países); simplemente para seleccionar el nombre de nuestro propio país en la mayoría de los casos. Esto es, parte de la información que el propio servidor web obtiene del cliente, a través de su dirección IP.

¿No sería más útil, eficiente y una mejor práctica de usabilidad simplemente pre-seleccionar el nombre del país correspondiente al visitante de nuestro sitio web? Sigue leyendo y compartiré contigo un modo en el que puedes añadir una “pizca” de inteligencia en tus propios formularios web, basándonos para ello en una subclase de WebPopupMenu.

Para poder obtener el código ISO de país a partir de la dirección IP necesitaremos utilizar cualquiera de los múltiples servicios disponibles, como por ejemplo FreeGeoIP.

Por supuesto, y principalmente para evitar que tengas que teclear el nombre de más de 250 países, puedes descargar el proyecto de ejemplo desde este enlace.

Como siempre, pongamos en marcha los motores ejecutando el IDE de Xojo. A continuación, selecciona la plantilla correspondiente a un nuevo proyecto Web y arrastra y suelta un control WebPopupMenu desde la Librería sobre el Navegador de Proyectos. Esta acción nos proporcionará una nueva subclase que podemos modelar a nuestras necesidades.

Selecciona el elemento que tendrá, probablemente, el nombre “CustomWebPopupMenu” en el Navegador de Proyecto y cambia su nombre en el Panel Inspector por algo más en consonancia con su función, por ejemplo “CountrySelectorPopup“.

A continuación, añade una nueva Constante a nuestra nueva subclase y nómbrala como “kCountries“. No te olvides de seleccionar “String” como su Tipo de dato y “Private” para su ámbito (Scope).

Esta será la constante que incluirá el nombre de todos los países junto con sus correspondientes códigos de país ISO; pero asumamos que los has tecleado utilizando el siguiente formato (encontrarás la constante ya definida en le proyecto de ejemplo descargado):

countryName#ISOcode_countryName#ISOcode…

Esto es, estoy utilizando el caracter “#” como separador entre el nombre de país y su código de país ISO (estoy seguro de que no figura en el nombre de ningún país); al tiempo que utilizo el caracter “_” como separador de los nombres de país propiamente dichos.

Añadamos a continuación el evento “Open” a nuestra subclase, de modo que podamos ejecutar el código de inicialización para que se seleccione el país del cliente cuando se carga la página web y se muestra el control.

Este es el código que se ejecutará:

Var countries() As String = kCountries.ToArray("_")

Var index As Integer
Var found As Boolean
Var country As String
Var request As New URLConnection

country = request.SendSync("GET","https://freegeoip.app/json/"+Session.RemoteAddress)

country = country.DefineEncoding(encodings.UTF8)
Try
  
  Var jReply As xojo.core.dictionary = xojo.data.ParseJSON(country.totext)
  
  country = jReply.Value("country_code")
  
Catch e As JSONException
  
  System.DebugLog(e.Message)
  
End Try
For Each s As String In countries
  
  Me.AddRow s.NthField("#",1)
  
  If s.NthField("#",2) = country Then 
    Me.listindex = index
    found = True
  End If
  
  index = index + 1
  
Next

If Not found Then Me.listindex = 0

RaiseEvent open

Por último, añade una nueva definición de evento “Open“, de modo que el usuario de la subclase pueda incorporar su propio código de inicialización sobre dicho evento.

Como puedes ver, no se trata de nada realmente mágico… pero probablemente ofrecerá una mejor experiencia a tus usuarios; evitándoles que tengan que navegar entre una larga lista de elemento en el caso de que realmente no tengan la necesidad de hacerlo.