Windows UX Design-Teil 3-Navigation

Die Zeiten von Menüleisten und dutzenden Knöpfen auf der Oberfläche sind vorbei. Aber wie navigiert man sich durch seine App und den verschiedenen Anwendungsszenarien?

Das erklärt dieser Teil der Videoserie zum Thema Windows 8 UX – Design.

Office Mobile for iPhone Release

Am Freitag veröffentlichen wir in den USA Office Mobile für das iPhone im Apple App Store ohne zusätzliche Kosten für Office 365 Abonnenten. Ab dem 18. Juni wird Office Mobile für iPhone in 136 internationalen Märkten und 29 Sprachen zur Verfügung stehen. Kostenlos für Office 365 Abonnenten bietet es die Möglichkeit, Word, PowerPoint und Excel mobil anzuzeigen und zu bearbeiten. Die Ankündigung erfolgt über den Office Blog, mit zusätzlichen Details auf dem Office Technical Blog.
Link zum Blogpost: http://blogs.technet.com/b/microsoft_presse/archive/2013/06/14/apple-fans-d-252-rfen-sich-freuen-microsoft-office-mobile-kommt-f-252-r-das-iphone-auf-den-markt.aspx

Windows Phone 8: Zentrale Datenhaltung mittels einfachem ViewModel

Wo halte ich meine Daten? Wo ist meine Logik? Wer steuert eigentlich die App intern?

Immer wieder stoße ich auf sehr wilde Apps, die sich mit wildestem Spaghetti-Code hinter jedem Button-Click-Ereignis ihre Daten von diversen Quellen zusammen suchen, und dabei ein und den selben Code 4x schreiben.

Dabei geht es doch auch viel einfacher. Man steuert alles über eine zentrale Klasse und tut nur noch das Nötigste in der eigentlichen Phone-Page. Nämlich mit einer zentralem ViewModel. Entwicklungsesotheriker und CleanCode-Fanatiker werden bestimmt meckern, das sei ja “schmutzig“, denen Antworte ich aber, “Es ist pragmatisch, einfach und ich werde sogar fertig mit meiner App und sterbe nicht in Schönheit”.

Was benötigt man? Eine zentrale Klasse (das ViewModel), das alles andere steuert, je nach Komplexitität auch Unter-ViewModels. Diese Klasse wird einmal statisch bei Anwendungsstart erzeugt und steht von da an, von überall zur Verfügung.

Hier meine einfachste Version eines ViewModels:

using System.Collections.ObjectModel;
using System.ComponentModel;

namespace PhoneViewModelSample
{
    public class MyViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<Customer> _customerList;

        public ObservableCollection<Customer> CustomerList
        {
            get 
            {
                if (_customerList == null)
                {
                    _customerList = new ObservableCollection<Customer>();
                    for (int i = 0; i < 100; i++)
                    {
                        var newCustomer = new Customer();
                        newCustomer.Name = "Kunde " + i;
                        newCustomer.Id = i;
                        _customerList.Add(newCustomer);
                    }
                }
                return _customerList; 
            }
            set { _customerList = value; OnPropertyChanged("CustomerList"); }
        }

        #region INotifyProperty - Stuff

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion

        private Customer _selectedCustomer;
        public Customer SelectedCustomer
        {
            get 
            {
#if DEBUG
                if (DesignerProperties.IsInDesignTool)
                {
                    _selectedCustomer = new Customer();
                    _selectedCustomer.Id = 11;
                    _selectedCustomer.Name = "Oliver Scheer Inc.";
                }
#endif
                return _selectedCustomer; 
            }
            set { _selectedCustomer = value; }
        }
    }
}

Die dazugehörige Customer-Klasse:

namespace PhoneViewModelSample
{
    public class Customer
    {
        public string Name { get; set; }

        public int Id { get; set; }
    }
}

Die Klasse MyViewModel wird zentral in der App.xaml instanziert und steht dann allen UI-Elementen in der App sofort zur Verfügung. D.h. ich kann sofort gegen Elemente aus dem ViewModel binden.

image

Damit man auch aus dem Code drauf zugreifen kann, habe ich eine Statische Variable in der App-Klasse erzeugt, die dieses Resources “TheViewModel” auch im Code anbietet.

 

 

public static MyViewModel TheViewModel { get; set; }

private void InitializePhoneApplication() { if (phoneApplicationInitialized) return; // Create the frame but don’t set it as RootVisual yet; this allows the splash // screen to remain active until the application is ready to render. RootFrame = new PhoneApplicationFrame(); RootFrame.Navigated += CompleteInitializePhoneApplication; TheViewModel = (MyViewModel)Resources[„TheViewModel“]; // Handle navigation failures RootFrame.NavigationFailed += RootFrame_NavigationFailed; // Handle reset requests for clearing the backstack RootFrame.Navigated += CheckForResetNavigation; // Ensure we don’t initialize again phoneApplicationInitialized = true; }

 

Das Video, das das ganze noch mal langsam erklärt befindet sich hier.

Der Sourcecode zur App kann hier heruntergeladen werden.

Windows 8 App-Publishingfest in Pforzheim

Du willst schon seit längerem auf den App-Zug aufspringen bzw. endlich eine App von dir im Store sehen? Dir fehlte aber bisher die nötige (Start-)hilfe oder die Gelegenheit deine App fertig zu stellen und einzureichen?

Kein Problem, denn am 15.6. hast du nun die Möglichkeit mit unserer Unterstützung innerhalb eines einzigen Tages und selbst ohne Programmierkenntnisse eine App vollständig umzusetzen und die Welt mit deiner eigenen App zu bereichern. Wir heißen aber natürlich auch alle Entwickler willkommen, die bereits an einem Projekt arbeiten und die Veranstaltung nutzen wollen ihrer App den letzten Schliff zu verleihen und diese schließlich zu veröffentlichen.

Zu Beginn der Veranstaltung wird es eine kurze Einführung geben bei der wir verschiedene App-Vorlagen vorstellen. Diese verhelfen im Anschluss auch absoluten Neulingen zur ersten eigenen App. Natürlich bekommst du im Laufe des Tages auch weitere persönliche Unterstützung durch Windows 8 und Windows Phone Experten von Microsoft und medialesson.

Beim Design helfen dir Studenten des Studiengangs Intermediales Design der Hochschule Pforzheim, welche mit den Windows Design Guidelines bestens vertraut sind.

Alle Infos zu dem Termin und Veranstaltungsort des Events findet Ihr unter http://bit.ly/w8appfest .