Cordova 3.4, XCode 5.1 e InAppBrowser

Ciao a tutti,
probabilmente, se siete finiti su questa pagina, state smadonnando come dei cinghiali sul perchè e sul per come Cordova non funzioni a dovere su XCode 5.1.

Tutto questo malfunzionare mi ha fatto bellamente scaricare ed installare ( da http://developer.apple.com/downloads ) la versione di XCode 5.0.4. Tutti quei warnings erano veramente fastidiosi, per non parlare delle modifiche manuali che bisogna apporre alle librerie CDVViewController e CDVCommandQueue.
Sicuramente avrete provato ed avrete incontrato non pochi errori di build.
Leggete qui, probabilmente vi risolverà non poco la vita.

Tutti questi errori con la vecchia versione di XCode non li avrete, quindi, se usate XCode prevalentemente per Cordova o Phonegap, vi consiglio vivamente di disattivarne gli aggiornamenti automatici. Gli sviluppatori di Apple sono molto più laboriosi di quelli di Cordova…

Il mio enorme problema era con InAppBrowser, il plugin che permette di aprire in una finestra separata, nella vostra app, qualsiasi URL esterno.
Nel mio caso è fondamentale poichè debbo aprire una pagina di pagamento bancario, impensabile fare tutto mediante Ajax, per non parlare della sicurezza…

Alcune cose che voglio condividere con voi: se avete scritto tutto bene, se  avete seguito alla lettera le indicazioni sulla pagina git del plugin stesso (che trovate qui), e nonostante tutto la finestra non vi si apre, beh, è colpa di Cordova, consolatevi.

Dovete sapere che, anche se il CLI di Cordova sembra fare tutto per bene, in verità così non è, e dovete fare qualche piccola modifica a manina in XCode.

Una volta che avete copiato tutti i vostri files nella cartella www (esterna a quella della piattaforma, COME SAPETE BENE, vero? ), andare a terminale e fate un bel cordova build.

Aprite XCode e verificate il nome della libreria inappbrowser.js situata in: www/plugins/org.apache.cordova.inappbrowser. Noterete che si chiama InAppBrowser.js.

Fin qui tutto bene, non è mica colpa sua se si chiama così.
Ora però il nome deve ritornarmi uguale nell’elenco plugins cordova_plugins.js, tenendo a mente che XCode si incazza perchè Case Sensitive.
Aprendo la libreria scopro che cosa?
La seguente riga: “file”:”plugins/org.apache.cordova.inappbrowser/www/inappbrowser.js”…MINUSCOLO!

Ma vai a morire ammazzato, va! 3 giorni di lavoro buttati, per non parlare del mal di testa!
Considerate una cosa: il simulatore, queste finezze pare non considerarle, quindi vi ritrovate con l’app che funziona nel simulatore e non nel device. Bella merda, eh?

Modificate il nome mettendo le maiuscole al posto giusto nel file cordova_plugins.js e re-buildate l’app, tutto andrà per il meglio (o almeno spero per voi, per me ha risolto).

CUSTOMIZZARE INAPPBROWSER

Ora che funziona, non ci accontentiamo del risultato (inguardabile) offerto dalle impostazioni di default.
Usando la sintassi corretta, apriamo l’InAppBrowser mediante il comando window.open(url, target, options);

URL
Fondamentale fare un bel encodeURI(url), vi risolvete un bel po’ di problemi di encoding del’URL.

TARGET
_blank serve per aprire la finestra correttamente nell’app, dando l’opportunità di chiuderla con l’apposito tasto.
_system vi aprirà il browser di default;
_self aprirà usando la WebView corrente, mandando a ramengo la vostra index.html

OPTIONS
Tenete bene a mente che dovrete passare le variabili divise da virgola e senza spazi.
Un esempio? Io volevo personalizzare l’InAppBrowser cambiando scritta, posizione e togliendo quell’orribile barra dell’URL.
Bene, il risultato, funzionante, è il seguente:
location=no,closebuttoncaption=Chiudi,toolbarposition=top

Manca però una cosa fondamentale: il colore della parola CHIUDI!
Mi sta tutto bene, sono attendo alla grafica ed ai dettagli, e questi fenomeni non mi mettono una opzione per customizzare il colore del link?

Risolviamo il problema aprendo, in XCode, Plugins/CDVInAppBrowser.m.
CMD-F e ricercate, all’interno del documento, la parola “tint”.
Troverete la riga
self.closeButton.tintColor = [UIColor colorWithRed:246.00 / 255.0 green:102.0  / 255.0 blue:66.0 / 255.0 alpha:1];

Cambiate i valori usando il formato RGB ed il gioco è fatto.
Spero di esservi stato utile!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *