Cette page présente un deuxième exemple de evan_keyboard et de evan_input, associé à un exemple de géolocalisation. Le code de cet exemple est disponible ici. On reprend ici le code de l'API météo que l'on va modifier un peu:

• On ajoute de la géolocalisation. Au lancement de l'appli, on récupère l'ipv6 de la box, on calcule l'ipv4, et on géolocalise cette ip. On demande ensuite la météo dans cette ville. S'il ne la trouve pas, il cherche la météo de Paris.
• Si on appuie sur "Ok", on fait apparaître une zone de texte, qui permet d'entrer un nom de ville, au choix. On valide en refaisant ok et l'API cherche la météo de cette ville, ou Paris si elle ne trouve pas.

Le programme javascript

On commence avec l'en-tête usuel. On charge le module réseau ecore-con et les objects Evan, ainsi que la géoloc. On définit quelques variables globales.

var FN = "/.fonts/";
var test = true;

test &= elx.load("evas");
test &= elx.load("ecore");
test &= elx.load("ecore-evas");
test &= elx.load("ecore-con");
test &= elx.load("edje");

elx.include("EWeather.edj", "EWeather_Smart")
elx.include("EWeather.edj", "Geoloc")
elx.include("evan.edj", "Evan_Keyboard");
elx.include("evan.edj", "Evan_Input");

var o_weather = null;
var o_bg = null;
var win = { w: 720, h: 576 };
var smartClavier = null;
var smartInput = null;
var bgGris = null;
var villeEnCours;
var mode;

La callback pour les touches. Soit on quitte, soit on montre la zone de texte (avec show_input, voir plus bas), et on arrête de surveiller les touches "Ok". C'est la zone de texte qui les gérera.

function key_up_cb(data, e, obj, event)
{
   switch (event.keyname)
     {
      case "b":
      case "Red":
      case "equal":
      case "Stop":
      case "Home":
      case "Escape":
      case "Start":
	 ecore_main_loop_quit();
	 break;
      case "Return":
      case "RC/Ok":
      case "KP_Enter":
      case "Select":
      case "Green":
	 if(mode == "meteo"){
	    elx.print("Action \n");
	    show_input(data);
	    evas_object_key_ungrab(o_bg, "Return", 0, 0);
	    evas_object_key_ungrab(o_bg, "RC/Ok", 0, 0);
	    evas_object_key_ungrab(o_bg, "KP_Enter", 0, 0);
	    evas_object_key_ungrab(o_bg, "Select", 0, 0);
	    evas_object_key_ungrab(o_bg, "Green", 0, 0);
	    mode = "input";
	 } else {
	    mode = "meteo";
	 }
     } 
}

Lors du redimensionnement, on redimensionnee tout:

function _resize_cb(ee)
{
    var evas;
    var geom;

    evas = ecore_evas_get(ee);
    geom = evas_output_size_get(evas);
    evas_object_resize(o_bg, geom.w, geom.h);
    evas_object_resize(o_weather, geom.w, geom.h);
    if(smartClavier)
    evas_object_resize(smartClavier, geom.w-100, geom.h-200);
    if(smartInput)
    evas_object_resize(smartInput, geom.w-200, 0.05*geom.h);
    if(bgGris)
    evas_object_resize(bgGris, geom.w, geom.h);
}

Inutile (?), mais dans l'appli d'origine.

function show_when_ready(obj, data)
{
}

La fonction principale. On ajoute un fond, un callback pour les touches.

function main()
{
   var eweather;

   ecore_init();
   ecore_evas_init();
   ecore_con_url_init();
   ecore_con_init();
   edje_init();

   ecore_animator_frametime_set(1 / 20);

   ee = ecore_evas_new(null, 0, 0, win.w, win.h, "name=Test;");
   ecore_evas_callback_resize_set (ee, _resize_cb);

   var evas = ecore_evas_get(ee);

   evas_image_cache_set(evas, 10 * 1024 * 1024);
   evas_font_path_prepend(evas, FN);
   evas_font_cache_set(evas, 512 * 1024);

   o_bg = evas_object_rectangle_add(evas);
   evas_object_resize(o_bg, win.w, win.h);
   evas_object_color_set(o_bg, 0, 0, 0, 255);
   evas_object_show(o_bg);

   evas_object_event_callback_add(o_bg, EVAS_CALLBACK_KEY_UP, key_up_cb, evas);
   evas_object_focus_set(o_bg, 1);

On demande de récupérer les info de géoloc. Un fois les infos récupérées, la fonction don_geoloc est appelée :

   get_geoloc_info(done_geoloc);

Les fonctions du Smartobject eweather :

   o_weather = eweather_object_add(evas);
   eweather = eweather_object_eweather_get(o_weather);

En attendant d'avoir la réponse de la géoloc, on le met sur Paris :

   eweather_code_set(eweather, "Paris");
   villeEnCours = "Paris";

On retaille, on affiche :

   evas_object_resize(o_weather, win.w, win.h);
   evas_object_move(o_weather, 0, 0);
   eweather_object_ready_callback_add(o_weather, show_when_ready, null);
   evas_object_show(o_weather);

Au démarrage, on est en mode météo. On surveille donc les touches Ok, en plus des touches pour quitter :

   mode = "meteo";

   evas_object_key_grab(o_bg, "Return", 0, 0, 0);
   evas_object_key_grab(o_bg, "RC/Ok", 0, 0, 0);
   evas_object_key_grab(o_bg, "KP_Enter", 0, 0, 0);
   evas_object_key_grab(o_bg, "Select", 0, 0, 0);
   evas_object_key_grab(o_bg, "Green", 0, 0, 0);

   evas_object_key_grab(o_bg, "b", 0, 0, 0);
   evas_object_key_grab(o_bg, "Red", 0, 0, 0);
   evas_object_key_grab(o_bg, "equal", 0, 0, 0);
   evas_object_key_grab(o_bg, "Stop", 0, 0, 0);
   evas_object_key_grab(o_bg, "Home", 0, 0, 0);
   evas_object_key_grab(o_bg, "Escape", 0, 0, 0);
   evas_object_key_grab(o_bg, "Start", 0, 0, 0);

On démarre la boucle principale, et en quittant on n'oublie pas de tout supprimer, dans l'ordre (sinon, SPANK SPANK !)

   ecore_evas_show(ee);
   ecore_main_loop_begin();
   
   if(smartInput)
      evas_object_del(smartInput);
   if(smartClavier)
      evas_object_del(smartClavier);
   if(bgGris)
      evas_object_del(bgGris);
   evas_object_del(o_weather);
   evas_object_del(o_bg);

   ecore_evas_free(ee);

   edje_shutdown();
   ecore_evas_shutdown();
   ecore_con_shutdown();
   ecore_con_url_shutdown();
   ecore_shutdown();
}

On veut afficher la zone de texte. On la crée si elle n'existe pas, on la met sur un fond gris transparent, on ajoute un clavier. On veut que le clavier soit proposé par défaut, on précise avec un evan_input_object_input_mode_set(smartInput, "azer"). Juste avant, on donne le focus au smartInput, sinon, on aura des problème au prochain affichage du clavier. Quand on valide la zone de texte, on précise que l'on appelle validation avec evan_input_object_callback_set.

function show_input(evas){

   if(!bgGris) {
   bgGris = evas_object_rectangle_add(evas);
   evas_object_resize(bgGris, win.w, win.h);
   evas_object_color_set(bgGris, 50, 50, 50, 150);
   }
   evas_object_show(bgGris);

   if(!smartClavier){
   smartClavier = evan_keyboard_object_add(evas);
   evas_object_resize(smartClavier, win.w-100, win.h-200);
   evas_object_move(smartClavier, 50, 200);
   }  

   if(!smartInput){
   smartInput = evan_input_object_add(evas);
   evan_input_object_keyboard_add(smartInput, smartClavier);
   evan_input_object_text_set(smartInput, villeEnCours);
   evas_object_resize(smartInput, win.w-200, 30);
   evas_object_move(smartInput, 100, 70);
   evan_input_object_callback_set(smartInput, validation);
   evan_input_object_change_mode_key_set(smartInput, "Swap,End");
   evas_object_focus_set(smartInput, 1);
   evan_input_object_input_mode_set(smartInput, "azer");
   }
   evas_object_show(smartInput);
   
evas_object_focus_set(smartInput, 1);
}

Lorsque l'utilisateur valide la zone de texte, on cache le fond et la zone de texte, et on fait une demande de météo. On surveille à nouveau les touches "Ok", pour une prochaine requête. On pourrait demander une géoloc, si l'utilisateur n'entre rien par exemple.

function validation(texte){
   evas_object_hide(bgGris);
   evas_object_hide(smartInput);
   
   villeEnCours = texte;
   eweather_code_set(eweather, villeEnCours);
   evas_object_focus_set(o_weather, 1);
   evas_object_key_grab(o_bg, "Return", 0, 0, 0);
   evas_object_key_grab(o_bg, "RC/Ok", 0, 0, 0);
   evas_object_key_grab(o_bg, "KP_Enter", 0, 0, 0);
   evas_object_key_grab(o_bg, "Select", 0, 0, 0);
   evas_object_key_grab(o_bg, "Green", 0, 0, 0);
}

Enfin, lorsque la géoloc se finit, on fait une demande de météo. Si aucune ville n'est trouvée, on demande Paris.

function done_geoloc(info){

for(var i in info)
   elx.print(i + "=>" + info[i] + "\n");
eweather = eweather_object_eweather_get(o_weather);

if(info && info.City && info.City != ""){
   villeEnCours = info.city;
   eweather_code_set(eweather, info.City);
} else {
   villeEnCours = "Paris";
   eweather_code_set(eweather, "Paris");
   }
}

Et Rock'N'Roll !

if (test)
  main();