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.

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.

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