Personal tools

IE

Dec 09, 2014

Integrate an alternative PDF viewer in Lotus Domino

Give me a choice....

Integrate an alternative PDF viewer in Lotus Domino

All browsers has its own PDF plug-in for PDF files, Acrobat Reader is for IE. But...have you ever had problems with it? I will! That's why I looked for another solution.

Everything starts googling "acrobat reader gray screen loading": as result you could obtain tons of pages suggesting you any kind of solution (that, in my case, doesn't works!). The problem? Open a pdf file using Acrobat Reader IE plugin.

read more

Aug 20, 2012

Tip per la gestione Web di tiff multipagina

Un'idea per gestire i file tiff

Tip per la gestione Web di tiff multipagina

Filed Under:

Un semplice tip/trick "IE-only way" per utilizzare AlternaTIFF anche se il client non ha installato un visualizzatore TIFF o ne ha un'altro

Mi è capitato di dover gestire la visualizzazione di file tiff multipagina via browser.

Nessun problema se sul client è installato qualche tipo di visualizzatore per tali file, ma cosa succede se non è cosi'?

read more

Jul 21, 2010

Migliorare l'usabilità dei link interni in TinyMCE

Analisi di collective.tinymceplugins.advfilelinks, un'alternativa al plugin di TinyMCE per i link interni a Plone che permette di gestire in modo differente i link a file del sito.

La Regione Emilia Romagna sta lavorando alacremente al miglioramento dell'accessibilità e dell'usabilità di Plone.

Dato che il futuro dell'editor WYSIWYG in Plone non è più Kupu (difficilmente personalizzabile e non troppo supportato) ma TinyMCE, già da tempo la scelta è stata di passare a TinyMCE anche nella versione 3 di Plone, usata in vari siti regionali.

Migliorare TinyMCE è più semplice che Kupu e lo dimostra come è stato possibile da parte nostra aumentarne le funzionalità per venire incontro ad alcune delle richieste della Legge Stanca (modifiche di cui si è discusso in un altro post, e ora integrate nella release ufficiale già dalla versione 1.1rc9); Altro particolare: trovo importante che questo editor esista anche come progetto indipendente.

Altre novità: la gestione dei link

Una richiesta recente per aumentare l'usabilità dei documenti è stata la seguente:

Modificare Plone in modo che i link interni, se fatti a contenuto di tipo File, mostrino l'icona del tipo di contenuto e la dimensione del file stesso

Una simile modifica aumenta l'usabilità generale della pagina, nonché impatta col Requisito 19 della Legge Stanca.
Dopo una prima analisi è risultato chiaro come fosse necessario scrivere un nuovo plugin per TinyMCE.

Come funziona collective.tinymceplugins.advfilelinks?

Il prodotto rilasciato fornisce il minimo delle modifiche possibili a TinyMCE (ma non minime quanto avrei voluto... ne parliamo dopo). Si tratta di un un plugin aggiuntivo (e per fortuna la presenza di plugin è prevista non solo dall'editor ma anche dalla sua configurazione di Plone) che sostituisce quello predefinito di Plone per i link interni (dal nome autoesplicativo plonelink).

Dopo un'analisi attenta di come poter ottenere le funzionalità richieste e della flessibilità delle API di TinyMCE, su indicazione della Regione stessa abbiamo preso la seguente strada, forse un po' limitata ma di minimo impatto sullo sviluppo e con una resa eccezionale se il browser è aggiornato:

  • I link a file acquisiscono un nuovo attributo type (previsto dallo standard HTML anche se poco conosciuto) ed viene fornito un CSS aggiuntivo contenente varie regole per fornire l'icona.
    Esempio:
    a[type='application/pdf'] {
        background: url(pdf.png) no-repeat 0 50%;
        padding-left: 20px;
    }
    Questo tipo di regola CSS ha un buon supporto (da Internet Explorer 7 in poi).
  • La dimensione del file è prima di tutto inserita nel title del link (che normalmente il plugin originale non fornisce) ma un buon effetto è ottenuto associando una ulteriore regola CSS:
    a.internal-link-tofile:after {
    	content: " ("attr(title)")";
    }
    Questa magica regola CSS (fa parte dello standard CSS 2, per quanto Internet Explorer la supporti solo dalla versione 8 in poi) inserisce del testo aggiuntivo dopo i link con classe internal-link-tofile.
    Il contenuto di questo testo è preso dall'attributo title, ma vi vengono aggiunte delle parentesi. Ovviamente questa classe CSS aggiuntiva è inserita dal nostro plugin in aggiunta alla già nota internal-link.

L'ultima funzionalità è forse la più interessante e per quanto il metodo usato sia davvero poco invasivo e l'effetto finale a dir poco bello, il limite ad avere Internet Explorer 8 è ancora grande.
E' comunque sopportabile? Sì, dato che l'attributo title rimane comunque disponibile agli utenti (e agli Screen Reader) in tutti i casi.

Preview degli effetti del Plugin

Note tecniche di estendibilità

TinyMCE per Plone sfrutta chiamate AJAX per richiedere al server informazioni sui contenuti. Come sempre le modifiche lato server sono minime e perfettamente integrate con quanto Plone già fornisce.

E' bastato fornire un nuovo adapter.

  <adapter
        for="Products.ATContentTypes.interface.IATFile"
        provides="Products.TinyMCE.adapters.interfaces.JSONDetails.IJSONDetails"
        factory=".adapters.JSONDetails"
        />

Grazie alla ZCA, questo adapter aggiuntivo interviene solo per i contenuti di tipo File o sottotipi (a volte ho l'impressione che senza adapter i plonisti non vivrebbero più!).

I problemi maggiori sono lato client... L'idea sarebbe come sempre estendere e non sovrascrivere. In un mondo perfetto questo plugin si sarebbe dovuto integrare con quello preesistente, sfruttandone tutto il codice presente.

Non mi è ancora chiaro se questo non è stato possibile per limiti miei, del plugin stesso, o di TinyMCE, ma il risultato per quanto funzionante è anche una copia di molti dei file originali (una forma di branch del plugin)... probabilmente non dormirò di notte per aver dovuto copiare i file di lingua... ma dopo tutto è una versione alpha!

Il limite maggiore di TinyMCE attualmente è che non usa jQuery (per quanto ci sia un progetto che integra jQuery e TinyMCE) e soprattutto che non c'è uso di eventi Javascript.

Selezione link interni in TinyMCESarebbe stato bello (ma che dico bello! Utile) se al click del mouse sul pulsante radio che seleziona un file piuttosto che un qualunque altro documento a cui associare il link, venisse lanciato un evento Javascript... evento al quale un buon plugin per jQuery avrebbe potuto reagire per eseguire azioni...

Per ora questo non pare possibile, ma sarebbe un buon passo avanti per TinyMCE.

Nota sul namespace

Sono rimasto colpito nel vedere come sulla collective ci siano così pochi plugin the TinyMCE (l'unica eccezione pare essere collective.tinymcetiles). Ci sono state sanguinose discussioni in passato sull'uso di namespace a 2 o 3 livelli (ne ricordo una completa e interessante). In questo caso l'uso dei 3 livelli mi è parso opportuno.

Spero che in futuro altri contribuiscano al gruppo di plugin collective.tinymceplugins e figli!

Riferimenti

Jul 13, 2010

Evil Javascript... use strip() or trim()?

Filed Under:

I hate doing the same error all the time! One time again: how to obtain a cross browser method for Javascript to remove leading and trailing whitespaces inside strings?

Every time I make the same stupid error! So, let's make quickly, a guide for obtaining this behavior.

The trim() function works only on Firefox and maybe other browsers, but not on IE.

In my experience the stript() function instead works better, both on Firefox and IE.

So what is the problem? That every time I forget to use this last one, and I use again trim instead of stript...

There is a solution for my lazy brain? Well... I use very often (AKA "always") jQuery for our projects, so... please Luca... from now just use jQuery.trim().

I feel better! No more error from now...

...

... until next time.

Jun 29, 2010

TextAreaBound: trying my first jQuery plugin

Filed Under:

HTML has some nice attributes to control the size and bound of input fields. However those features aren't working for textarea. Our customer asked us for those features: max number of lines in a textarea, max numbers of character in the textarea AND in a line... Let's try to develop a jQuery plugin for obtaining this!

The APIs we want

We must reach this:

$(...).maxLinesLengthBound(n)
$(...).maxLinesCountBound(n)
$(...).maxTextLength(n)

Obviously, we like jQuery chaining so also this must work:

$("#textareaid").maxLinesLengthBound(20).maxLinesCountBound(15)

All of the 3 new jQuery feature take all the textarea element from the expression given and apply new bounds.

  • The maxLinesLengthBound method will put a limit on the number of lines in a textarea
  • The maxLinesCountBound method will put a limit in the number of characters of each line
  • The maxTextLength method is the most simple: put a limit to the number of total character in textareas

Bad news one: Javascript events

When adding character in Javascript we can rely on 3 events:

  • keydown event is called when a key is pressed (before it's released)
  • keyup event is called when a key came up after keydown.
  • keypress event is called when a key is... pressed! So it goes down and then up. More important, if you keep pressed a button, starting the characters-repeat, this even is called multiple times.

As you can see, the keypress is the best choice... but using this event has a great limitation.

When you rely on keydown event, the "actual" value of the field is the old one. When you bind an handler to the keyup or keypress events the value you can read is the new one. You have no way to know what was the old value of the field.

Don't think to use other events like change event. This type of event has the same problems and also is called only when the control loose focus.

Solution to bad news one

Yes, we can only read the new value of the field, but we can also use the event object and take from it the value of the pressed key, so we can know what new character will be added to the textarea

Bad news two: knowing where the cursor is (on Internet Explorer)

Unluckily in a textarea you not always append characters... you can also add new characters inside the text. The pressed key is still a very important resource, but we must also know in which position we are inside the textarea.

The task seems simple on all browsers, with only a single exception: you can read the selectionStart attribute of the textarea DOM element.

We really need this only for one of the 3 APIs we need above: the maxLinesLengthBound method. Other 2 APIs don't need to know where the cursor is...

The vary bad news is this: Internet Explorer do not support selectionStart!

Solution to bad news two (AKA: bad news three)

You can surf the Web looking for an alternative, and you will find a lot of blog post, articles and script for giving an alternative.

What is clear is that you must use some funny IE specific APIs like getBookmark and createRange... and you will fail.

I found no way to really have the same simple features. On Internet Explorer 7 I have a lot of problems when I go to the second line. Those APIs seems buggy and the browser don't see that you go on a new line.

Tired of this, I leave the problem to someone more expert than me with IE Javascript.

Wanna help me?

The jQuery plugin

You can find the plugin on the jQuery plugin official page, and also other info and the SVN repository in my Google Code space.