Programmierung

CONZEPT 16 auf dem Mobilgerät

 

 

Die Nutzung von CONZEPT 16-Anwendungen auf mobilen Endgeräten ist immer wieder ein Thema, zu dem ganz unterschiedliche Lösungswege existieren. Eine interessante Variante funktioniert durch die Umsetzung der Windows-Oberfläche nach HTML 5, wodurch die Anwendung auf jedem Gerät läuft, das über einen aktuellen Web-Browser verfügt. Dazu haben wir ein neues Beispiel entwickelt.


Weiternutzung des Designers

Mobile Anwendungsentwicklung unterscheidet sich grundlegend von der Entwicklung für Desktopsysteme. Zurückzuführen ist das auf die Handhabung und die Unterschiede in der zur Verfügung stehenden Plattform der jeweiligen Geräte. Desktop-Systeme verfügen über eine größere Ausgabefläche und werden überwiegend per Tastatur und Maus bedient. Mobile Geräte hingegen besitzen eine kleinere Ausgabeeinheit und werden per Touch bedient.  Daher ist es offensichtlich, dass für die Entwicklung einer mobilen Anwendung auch eine andere Entwicklungsplattform benötigt wird. Dies wiederum bedeutet einen erhöhten Zeit- und Kostenaufwand.

Hier zeigen wir einen Lösungsweg, bei dem Sie Teile Ihrer bestehende CONZEPT 16-Anwendung für mobile Geräte zugänglich machen können, ohne das dafür die Einarbeitung in ein neues Entwicklungssystem notwendig wird. Für die Programmierung benötigen Sie ausschließlich CONZEPT 16.

Die Infrastruktur

Die mobile CONZEPT 16-Anwendung besteht aus einem Back-End und einem Front-End (Abb. 1).

Abb. 1: Schema der mobilen CONZEPT 16-Anwendung

Das Back-End der mobilen Anwendung bildet ein Windows-Server. Auf diesem läuft der CONZEPT 16-Datenbank-Server. Die CONZEPT 16-Anwendung wird in einer Windows-Sitzung ausgeführt. Die gesamte Grafik-Ausgabe der Anwendung wird von einem speziellen Web-Server in HTML5 gewandelt. Als Front-End der mobilen Anwendung genügt somit ein Gerät mit einem HTML5-Browser.

Beispiel-Anwendung

Anhand der Order-Datenbank, einer in CONZEPT 16 entwickelten Beispielanwendung mit Kunden-, Artikel- und Auftragsverwaltung, wird die Umwandlung von Desktop nach Mobil demonstriert.

Dabei soll nicht die komplette Funktionalität der Desktopumgebung umgesetzt werden. Verfügbar ist die Kundenverwaltung (Funktionalität des Menüpunktes „Kunden“) welche wir aus der Desktop-Version kennen (Abb. 2). Dazu gehören Anzeigen und Bearbeiten der Kunden, sowie die Anzeige der zugeordneten Aufträge und Ansprechpartner. Weiterhin kann eine Liste aller Kunden ausgedruckt und Dateien vom Server heruntergeladen werden.

Abb.2: Die Order-Datenbank als Desktopanwendung.

 

Bei der Umstellung der Oberfläche von Desktop auf Mobile sind einige Punkte zu beachten:

  • Kleinere Anzeigefläche
    • Anpassen der Layout-Struktur 
    • Informationsmenge auf wichtigste Punkte reduzieren
  • Größen für Touch-Bedienung anpassen
    • Fonts
    • Bilder
    • Fenster
    • Bedienelemente
  • Bedienbarkeit
    • Mini-Tutorials

Die neue Oberfläche

Ähnlich wie in der Desktop-Version gibt es einen Start-Bildschirm. Es sticht sofort hervor, dass das Ribbon-Menu durch ein Burger-Menu ersetzt wurde (Abb. 3).

Abb.3: Die mobile Version der Order-Datenbank.

Die Desktop-Anwendung (Abb. 4) stellt die Kundenverwaltung in MDI-Fenstern dar. Die Liste der Kunden befindet sich auf der linken Seite, die Details zum Kunden auf der rechten Seite. Die Ansprechpartner werden unter der Kundenliste dargestellt. Dies ist auf Grund des zur Verfügung stehdenden Platzes in der Mobil-Version natürlich nicht geeignet.

Abb. 4: Anordnung der UI-Elemente (Desktop).

Die Mobil-Version verteilt die Oberfläche auf separate Seiten. Diese können durch die Schaltfläche am oberen Rand durchlaufen werden. So kann der Anwender auf dem Mobilgerät einfach zwischen Kunden, Kundendaten und Ansprechpartnern wechseln (Abb. 5).

Abb. 5: Kunden und Kundendaten (Mobil-Version).

 

Die Navigation innerhalb der Applikation erfolgt über das Burger-Menu, Kontext-Button und den Paging-Buttons.

Möchten Sie die Anwendung selber testen? Kontaktieren Sie einfach unseren Vertrieb.

Keine Kommentare

Kommentar abgeben