Tutorial: Die Lösung gegen zu lange Strings

weihnachten
Topliste: Anzeige im User Interface

In meinem heutigen Blogeintrag geht es um die Problematik Strings so anzupassen, dass sie nicht die Pixelangaben überschreiten. Wofür dies sinnvoll ist und wie man es anwendet, zeige ich euch mit einem Beispiel, welches ich für meine User App im Channel Besserwisser bereits gebrauchen konnte.

Mir ist am Sonntag ein Problem aufgefallen: In meinem User Interface waren Spielernamen länger als mein HTML Container. Das zerstört die Optik! IgelchenM wird sicherlich nicht gnädig beim nächsten App-Check sein, also ran an den Code und verbessern.

Der Text überschreitet die Begrenzung. Dieses Verhalten möchten wir nicht und müssen die Strings abschneiden. Doch wie?

Um das Problem zu lösen, muss ich dieses erstmal reproduzieren können. Um es zu verdeutlichen nutze ich folgenden Code:

var session = user.getAppContentSession(AppViewMode.Overlay);

if (session) {
    var NickPlace1 = 'NickVonPlatz1ExtraLang';
    var NickPlace2 = 'NickVonPlatz2ExtraLang';
    var NickPlace3 = 'NickVonPlatz3ExtraLang';
    var data = [
        {nick: NickPlace1 , Point: 3},
        {nick: NickPlace2 , Point: 2},
        {nick: NickPlace3 , Point: 1}
    ];

    session.sendEvent('keyfürUI', data);
}

Ich hole mir die Overlay Session des Users und übertrage ein Array mit dem geordneten Inhalt. Doch wie ihr sehen könnt, sind die Nicknamen zu breit für meine kleine Anzeige.

In der API-Dokumentation im Bereich der String-Prototypes habe ich „limitString(fontSize, isBold, maxPixelWidth, [abbreviationMarker]) “ entdeckt.

Liefert einen String, der in der Schriftart Arial mit der gegeben Schriftgröße und Information, ob Text fett dargestellt werden soll maximal maxPixelWidth breit ist. Wird der Text dafür gekürzt, so wird an das Ende abbreviationMarker angehangen. Falls abbreviationMarker nicht übergeben wurde, so ist es automatisch ‚…‘.

Nun testen wir die API einfach mal. Um den unterschied zu erkennen, ändere ich den Nick von Platz 1.

var NickPlace1 = 'NickVonPlatz1ExtraLang'.limitString(12, false, 90) ;
var NickPlace2 = 'NickVonPlatz2ExtraLang';
var NickPlace3 = 'NickVonPlatz3ExtraLang';

var data = [
    {nick: Nickplace1, Point: 50},
    {nick: NickPlace3, Point: 10},
    {nick: NickPlace3 , Point: 5}
];

session.sendEvent('keyfürUI', data);

Nachdem ich den obenstehenden Code ausführen lasse, werden wir sehen dass der erste String so gekürzt wird, dass er perfekt ins Layout passt. Wenn ein String kürzer als die angegebene Maximalbreite ist, wird er ganz normal ausgegeben.

weihnachten

Ich denke, das Ergebnis kann sich sehen lassen und das ursprüngliche Problem mit zu langen Nicknamen in HTML UIs sollte damit Geschichte sein.

Ein Gedanke zu “Tutorial: Die Lösung gegen zu lange Strings

  1. Das Limitieren mittels Javascript ist suboptimal, wenn man das Layout (zum Beispiel durch resize) verändern kann.

    Dies geht mittels CSS viel einfacher:

    #element {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    Zu lange Strings werden durch der Browser-Engine voll automatisch mittels „…“ gekürzt, egal wie lang am Ende nun die Breite des jeweiligen Elementes ist.

    Gefällt 1 Person

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s