Das Web UI ist die jüngste Entwicklung aus dem Hause SIB Visions. Basierend auf unserer Technologie unabhänigen UI Definition bringen wir JVx Applikationen - ohne Source Code Änderungen - direkt vom Desktop, in den Browser.
Die erste öffentliche Beta Release steht ab sofort zum Download bereit.
Was bietet die Web UI?
- Editieren in Tabellen
- Bilder aus BLOB Spalten, direkt aus der Datenbank anzeigen
- Image Choice Checkboxen
- Zell Editoren für gängige Datentypen
- Anpassbare Combos
- Border, Sequence und Form Layout
- Asynchrones Laden der Daten
- UI Anpassung mit CSS
- Debugging mit z.B. Firebug
- uvm.
Alle Widgets/Layouts wurden unabhängig von JVx entwickelt und können in bereits vorhandene extGWT Anwendungen integriert werden.
Das Web User Interface unterliegt der Apache Lizenz, Version 2.0.
Seit wenigen Augenblicken steht die erste Beta Release von unserer QT Jambi UI Implementierung zum Download bereit. Dieses Release enthält sowohl Erweiterungen zu den Standard Widgets als auch die Implementierung von javax.rad.ui.
Zu den Erweiterungen zählen unter anderem:
- Border Layout
Das gewohnte Border Layout mit der Ausrichtung NORD, SÜD, WEST, OST, ZENTRIERT
- Form Layout
Das Anker orientierte Layout ist eine Portierung aus dem Swing UI und ermöglicht die Erstellung von komplexen Layouts ohne Schachtelung.
- Sequence Layout
Im Gegensatz zu einem Flow Layout ermöglicht dieses Layout die Komponenten zu stretchen, die vertikale bzw. horizontale Anordnung der Komponenten sowie die Ausrichtung der Komponenten zu beeinflussen.
- Zell Editoren
Die üblichen Editoren für Datum, Passwort, Zahlen und Text.
- Anpassbare Combos
Im Normalfall ist es schwierig eine Combo Box mit einem speziellen Layout und/oder benutzerdefinierten Komponenten zu verändern. Die Bibliothek enthält bereits eine Basis Combo Box, mit der eine Combo Box beliebig gestaltet werden kann.
- Desktop und (modale) Internal Frames
Die Desktop Implementierung ermöglicht Frames die wahlweise modal angezeigt werden. Weiters wurde das Event handling von Java im Bezug auf Internal Frames umgesetzt.
Die Widgets sind unabhängig von JVx und können auch in Applikationen, die nicht auf JVx aufsetzen, integriert werden. Bei der Umsetzung wurde auf höchste Kompatibilität geachtet.
Die Showcase Anwendung steht zum Testen bereit.
Die Implementierung ist über unsere Download Seite verfügbar!
Die Web UI Implementierung von JVx wurde bereits in früheren Postings vorgestellt. Kurz zusammengefasst handelt es sich dabei um die Möglichkeit, eine bereits entwickelte Applikation als HTML/Ajax Anwendung zu starten, ohne auch nur eine Zeile Source Code zu verändern. Die vormals als RIA gestartete Anwendung wird einfach (zusätzlich) als Web Anwendung zur Verfügung gestellt z.B. für mobile Geräte.
Seit heute steht unsere Showcase Anwendung als Rich Internet Application und Web Application zur Verfügung. In beiden Fällen wird die selbe Applikation verwendet!
Überzeugen Sie sich von unserer Innovation und starten Sie die RIA und die Web Anwendung getrennt voneinander.
Selbstverständlich funktioniert unsere Web Anwendung auch auf mobilen Geräten wie dem iPad/iPhone oder einem Android Device wie dem HTC Desire. Die Anwendung wurde jedoch nicht für die Auflösung dieser Geräte optimiert. Das Ergebnis sollte aber auf alle Fälle beeindrucken:
iPad Showcase |
|
HTC Desire Showcase |
In den letzten Wochen haben wir neben dem Web UI auch am QT Jambi UI gearbeitet, um zu demonstrieren daß eine JVx Applikation mit unterschiedlichsten Technologien verwendet werden kann - ohne den Source Code der Applikation zu verändern. Was wir Ihnen bisher nur anhand von Screenshots gezeigt haben stellen wir nun als Anwendung bereit.
Den Showcase als QT Jambi Anwendung starten (im Moment wird nur Windows als Betriebssystem unterstützt).
Die Anwendung ist kaum von der Swing Anwendung zu unterscheiden - sehen Sie selbst:
Der Source Code wird unter der Apache License, Version 2.0, veröffentlicht.
Gestern wurden die Preise in den Räumlichkeiten von SIB Visions an die österreichischen Teilnehmer unseres WM Tippspiels übergeben. Der Hauptpreis wurde von Johannes Lett entgegengenommen und seine Freude drückte er mit dem Satz - "Es ist so geil, daß ich dieses Handy gewonnen habe!" - aus.
Weiters gratulierten wir Alex Reitter und Harald Wittmann. Der WM Ball Jabulani wurde bereits in der letzten Woche zu Andreas Meier nach Deutschland verschickt. Auf diesem Wege wünschen wir Ihm viel Spaß!
Wir freuen uns bereits auf das nächste Event!
Der Weltmeister heißt Spanien! Und unser Tippmeister ist johnny.
Als wir das Tippspiel starteten hätten wir nicht mit so starkem Interesse gerechnet, da wir eher die Software Entwickler ansprechen wollten anstatt die breite Masse. Die Packung! wurde mit JVx umgesetzt, einem sogenannten Newcomer in der Framework Szene. Darum war unser Ziel, den Bekanntheitsgrad von JVx zu steigern. Und diesem Ziel sind wir nun einen Schritt näher gekommen.
Besonders stolz sind wir jedoch auf die Qualität unserer Software. Ursprünglich für die WJAX Challenge entwickelt - einige Monate später, ohne Source Code Änderungen, eingesetzt. Es traten keinerlei Fehler auf und wir bekamen nur positives Feedback von unseren Usern. Aufgrund der ganzheitlichen Betrachtung der Anforderungen, der sehr detailierten Planung und der SIB Visions üblichen, professionellen, Programmierung war dies überhaupt erst möglich.
Aber um ganz ehrlich zu sein... die Features: Quick Tipp, Live Spielstände, Turniersieger Anzeige haben wir speziell für die WM implementiert. Die praktischen Erfahrungen sind eben auch mit der besten Planung nicht abzudecken, und das ist gut so.
Durch die Live Spielstände wurden die Punkte ebenfalls Live berechnet. Das machte sich bei jedem Tor, in der Statistik bemerkbar. Es war immer wieder spannend die aktuellen Platzierungen aufgrund des aktuellen Spielstandes zu beobachten.
Nachdem die Hälfte der Spiele absolviert wurden, haben unsere User um Feedback gebeten und wurden mit positiven Rückmeldungen überhäuft. Ein ganz großes DANKE an alle die uns Ihre Meinung mitgeteilt haben. Jedes einzelne E-Mail wurde beantwortet und die Wünsche werden wir beim nächste Event berücksichtigen.
Doch am Ende zählt doch nur der Sieg, oder?
Den Hauptpreis krallte sich johnny vor delray77. Auf Platz drei landeten Hary und Hansblafoo.
Die Punktestände und Spieltag Statistiken wurden laufend über Twitter bekanntgegeben.
Die Preise wurden bereits versendet bzw. werden in den nächsten Tagen persönlich übergeben. In den nächsten Tagen werden wir die Preisträger kurz vorstellen.
Nachdem die JVx .NET AddOns bereits wunderbar mit Silverlight harmonieren, haben wir einen ersten Versuch mit dem Windows Phone SDK gewagt. In erster Linie wollten wir prüfen ob die AddOns auch mit Windows Phone funktionieren. In der Spezifikation waren keine Stolpersteine zu fnden, daher sollte eine Integration problemlos möglich sein.
In der Praxis sieht die Sache natürlich etwas anders aus. Das SDK enthält (noch) nicht alle Klassen die in den AddOns verwendet wurden. Daher musste für unseren Test auf etwas Komfort verzichtet werden. Nach der Anpassung der AddOns war die Integration jedoch ohne Probleme möglich.
Wir setzten uns ein sehr bescheidenes Ziel für die Entwicklung der ersten App:
Darstellung einer Liste mit den Ländern aus unserer Showcase Anwendung.
Unsere App war überraschend schnell umgesetzt. Hierbei ist jedoch anzumerken, daß das Windows Phone SDK im Moment nicht mit der Konkurrenz mithalten kann. Dazu müssen noch wesentliche Details verbessert werden.
Unsere App, gestartet mit dem Windows Phone Emulator:
Windows Phone App
|
Der Source Code für den Zugriff auf die Daten ist in üblicher Manier zu schreiben:
private JVxDataAdapter dataSource
;
private MasterConnection Connection
;
public MainPage()
{
InitializeComponent();
SupportedOrientations = SupportedPageOrientation.Portrait
| SupportedPageOrientation.Landscape;
// init connection
HttpConnection conn = new HttpConnection(new UniversalSerializer(),
"http://demo.sibvisions.org/showcase/services/Server");
MasterConnection master = new MasterConnection(conn);
master.ApplicationName = "showcase";
master.LifeCycleName = "com.sibvisions.apps.showcase.frames.Contacts";
master.UserName = "admin";
master.Password = "admin";
// init data adapter
dataSource = new JVxDataAdapter(master);
dataSource.OpenComplete += new OpenCompleteEventHandler(OpenComplete);
// open connection
dataSource.Open();
}
void OpenComplete(OpenCloseCompleteEventArgs pEvent)
{
// fetch data
CommunicationCallback callback = new CommunicationCallback(
new AsyncCallback(EndFetch));
dataSource.Connection.call("countries", "fetch", callback,
new object[] {null, new SortDefinition(new String[] {"COUNTRY"}), 0, -1});
}
void EndFetch(IAsyncResult pResult)
{
CommunicationCallback requestCallback = (CommunicationCallback)pResult.AsyncState;
ArrayList result = (ArrayList)requestCallback.CallResult[0];
// fill list
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
foreach (object[] item in result)
{
if (item != null)
{
ListBox.Items.Add(item[1]);
}
}
});
}
Das XAML ist im Vergleich zum Datenzugriff weit komplexer:
<phoneNavigation:PhoneApplicationPage
x:Class="WindowsPhoneApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Navigation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="162"/>
<RowDefinition Height="44"/>
<RowDefinition Height="514*"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<Border BorderBrush="Silver" BorderThickness="5" Name="border0"
CornerRadius="20" Background="#18A2E7" Margin="12,0,12,20">
<Grid x:Name="TitleGrid" Height="147" >
<TextBlock Text="Windows Phone App" Foreground="Black"
x:Name="textBlockPageTitle"
Style="{StaticResource PhoneTextPageTitle1Style}"
Margin="7,6,12,100" />
<TextBlock Text="JVx showcase" Foreground="Black"
x:Name="textBlockAppTitle"
Style="{StaticResource PhoneTextPageTitle2Style}"
Margin="-3,26,-3,16" TextAlignment="Center" />
</Grid>
</Border>
<TextBlock Text="Countries" x:Name="textBlockListTitle" FontSize="30"
HorizontalAlignment="Right" Width="456" Margin="0,148,12,6"
VerticalAlignment="Stretch" Padding="0,5,0,0" Grid.RowSpan="2" />
<Border BorderBrush="Silver" BorderThickness="5" Name="border1"
Grid.Row="1" CornerRadius="20" Margin="12,35,12,0" Grid.RowSpan="2">
<ListBox Name="ListBox" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="480" Margin="5,5,5,5" />
</Border>
<Image Grid.Row="3" Height="74" Margin="0,6,0,0" Name="image1"
Stretch="Uniform" VerticalAlignment="Top"
Source="/WindowsPhoneApp;component/Images/sib_visions.png"/>
</Grid>
</phoneNavigation:PhoneApplicationPage>
Um native mobile Apps zu entwickeln sind die jeweiligen SDKs der Hersteller nötig. Eine alternative Entwicklungsmöglichkeit bietet das Open Source Framework PhoneGap. Die Apps werden mit HTML, CSS und Javascript entwickelt und native zur Verfügung gestellt.
Es ist zwar noch etwas früh um von einem Framework zu sprechen, dennoch klingt der Projekt Antrag - Sapphire - recht interessant. Die weitere Entwicklung bleibt jedoch abzuwarten.
Dennoch wird anhand des Antrages deutlich, daß die Applikationsentwicklung einfacher werden muss. Und mit JVx existiert bereits eine Lösung die genau das ermöglicht. Ob die Abhängigkeiten zu den Eclipse Frameworks nicht eher ein Nachteil, hinsichtlich der Einfachheit ist, wird die Umsetzung zeigen.
Seit heute ist unsere Packung! als mobile App, offiziell im Android Market erhältlich. Natürlich kostenlos!
Der Link für den Market: market://search?q=pname:com.sibvisions.apps.packung
Die App wurde ursprünglich entwickelt um zu zeigen, daß JVx auch unter Android ohne Probleme eingesetzt werden kann. Und das ohne Qualitätsverlust. Die App wurde zu 100% mit den JVx AddOns für Android und JVx selbst erstellt. Es kommen die selben Sourcen wie auch für die RIA zum Einsatz.
Doch mittlerweile ist das Projekt aus den Kinderschuhen entwachsen und zählt zu den Schmuckstücken in unserer Sammlung.
Was ermöglicht die App im Unterschied zur RIA?
Die App ist kein Ersatz für den großen Bruder, aber ein treuer Wegbegleiter. Mit der App ist es möglich, einfach und unkompliziert, von unterwegs seine Tipps abzugeben, mit den Spielergebnissen zu vergleichen und den Highscore einzusehen.
Folgende Screenshots zeigen die Funktionen im Detail:
Login |
|
Die Anmeldung
Mit dem vorhandenen Benutzernamen und Passwort wird die Anmeldung durchgeführt!
Ein neuer Benutzer muss zuerst in der Rich Internet Application registriert werden bevor die mobile Anwendung genutzt werden kann. Durch die Aktivierung der automatischen Anmeldung entfällt die Eingabe von Benutzernamen und Passwort, bei erneutem Start der App bzw. wenn die Verbindung aufgrund eines Kommunikationsfehlers neu geöffnet werden muss.
Über das Menü kann der Server gewechselt werden und die App lässt sich beenden.
|
|
Choose Server |
|
Die Server Auswahl
Es kann zwischen den zur Verfügung stehenden Systemen gewählt werden. Der Tournament Server ist das Live System für die WM 2010.
Der Demo Server ist ein System mit dem die Funktionen der RIA und das Zusammenspiel mit der mobilen App, getestet werden kann.
Der Development Server ermöglicht das Debuggen der Applikation und sollte nur von Software Entwicklern eingesetzt werden, die den Source Code der Anwendung zur Verfügung haben.
|
|
Categories |
|
Die Kategorie Auswahl
Das Hauptmenü der App enthält die möglichen Optionen:
- My Bets
Unterstützt beim Abgeben der Tipps.
- History
Vergleicht die Tipps mit den Ergebnissen und zeigt die Punkte pro Tipp.
- Statistics
Aktueller Highscore - Weltweit bzw. der privaten Tippgruppen.
|
|
MyBets |
|
Tippen
Pro Spieltag stehen die möglichen Spiele zur Verfügung. Das Wunschergebnis kann durch die Selektion des jeweiligen Spieles, eingegeben werden.
|
|
Place Bet |
|
Den Tipp eingeben
Den gewünschten Endstand eingeben und bestätigen. Solange die erlaubte Deadline nicht überschritten ist, kann das Ergebnis jederzeit korrigiert werden.
|
|
History |
|
Die Historie
In der historischen Ansicht wird das Endergebnis (rot) mit dem Tipp verglichen. Zusätzlich werden die Punkte pro Spiel angeführt.
|
|
Statistics |
|
Highscore
Der Highscore zeigt die aktuellen Platzierungen inklusive des Punktestandes. Sollten private Tippgruppen verwendet werden, sind auch diese sichtbar.
Der eigene Benutzername wird grau hinterlegt um die Übersicht zu bewahren.
|
|
User Info |
|
Die Benutzer Information
Der Benutzername sowie der Anmelde Zeitpunkt werden angezeigt. Mit dem Menü ist der Wechsel zu den Kategorien, die Abmeldung und die Beendigung der App möglich.
|
|
Am gestrigen JUGAT Event haben wir unsere Web Implementierung von JVx UI vorgestellt.
Was genau ist die Web Implementierung von JVx UI?
Dabei handelt es sich um eine HTML/Ajax Implementierung des Plattform unabhänigen User Interfaces das von JVx vorgegeben wird. Dadurch ist es nun möglich, eine JVx Applikation als klassische Web Anwendung zu starten. Und der entscheidende Vorteil dabei ist, daß die Applikation nicht geändert oder neu codiert werden muss. Eine Applikation die bisher als Swing Applet verwendet wurde, kann nun auch ohne Anpassung als HTML Client betrieben werden!
Und wie kann so eine Applikation im Web aussehen?
Auf den ersten Blick ist die Web Anwendung nicht von einer Swing Anwendung/Applet Anwendung zu unterscheiden. Und auch beim zweiten Blick sollte genau hingesehen werden. Doch genug der Worte - mit Screenshots sollte der WOW Effekt nun eintreten.
WebUI login |
|
Die Anmeldung
Im Vergleich zur Applet Anwendung ist der Unterschied kaum merkbar. |
|
Die Konkakte verwalten
Die gewohnten Features der Swing Anwendung stehen natürlich auch in der Web Implementierung zur Verfügung, wie z.B.: Master/Detail, Automatische Zellen Editoren, Bildanzeige usw. |
|
WebUI contacts |
|
WebUI contacts firebug |
|
Der Beweis
Mit Firebug treten wir den Beweis an, daß es sich bei der Anwendung tatsächlich um eine HTML/Ajax Anwendung handelt. |
|
Für die Umsetzung der JVx WebUI wurde die ext GWT Bibliothek eingesetzt. Diese bietet gute Komponenten auf denen wir aufsetzen konnten. Es wäre jedoch auch denkbar eine andere Bibliothek wie z.B.: qooxdoo zu integrieren.