I was tasked with designing the interface and user experience for the Universal Package Explorer.
The Universal Package Explorer (UPE) is a free and open source Windows desktop application that makes it easy to create, view, and publish universal package files. You can load a .upack file from disk or directly from a ProGet universal feed.
Acknowledgements. This project was created by Inedo with inspiration from the NuGet Package Explorer project; since the project was derived from the NuGet Package Explorer, I took inspiration from the functionality but tried to make it our own.
Final Desktop Application
I published a blog on inedo.com spec'ing out how to use the Universal Package Manager and created a video on how to use the UPE to create and edit a Universal Package in conjunction with ProGet:
Spec Sheet
I began the mockup process from a spec sheet with an application that had no styling:
Creating a Package
- Launch UPE and select File > New (Ctrl-N), or select Create a new package from the Common tasks dialog when Package Explorer starts: {{ UPE’s common tasks dialog }}
- Select Edit > Edit Package Metadata (Ctrl-K) to open the editor for the underlying .upack file. Details for the metadata can be found in the [universal package file format] reference. {{ Editing package metadata with the Package Explorer }}
- Open the files you want to include in the package in Windows explorer, then drag them into the Package contents pane of UPE. {{ The package's lib folder with added content }}
- Save your package with File > Save (Ctrl-S).
User Interface / Specifications
Icon: the application icon should be the upack hexagon icon.
Title: Universal Package Explorer {currently open package name open}
CommonTasks Dialog
Three options, similar to NuGet Package Explorer
Open From Feed Dialog
This is a greatly simplified version of NPE.
Package Source URL textbox
Search text below
Table with following columns:
- ID
- Version
Cancel and Open
Publish to Feed Dialog
Main Window
The main window has two panes: Metadata and Content
Metadata Pane
The Metadata has two views; View and Edit.
Edit Mode
Edit Metadata should have single-line text boxes for group, name, version, title, icon; multi-line text box for description, dependencies. Similar style to this:
There should be a set of key/value text boxes (and a [+]) for additional metadata; similar to following screenshot (but with no combobox for Assembly name):
View Mode
Single line text boxes should be displayed inline; multi-line on a new line.
Additional metadata can be displayed as single-line entries
Content pane
The content pane displays files and folders in a tree.
Right clicking on the content pane provides three options; see the Menu Tree for description about how these work:
- Create New File…
- Add Existing file…
- Create New folder…
Right-Clicking on a Folder provides
- Create New File…
- Add Existing file…
- Create New folder…
- Rename…
- Delete…
Right-Clicking on a File…
- View File Content
- Shell open…
- Save As… (Opens a file dialog and saves to specified location)
- Rename…
- Delete…
Dragging files/folders to pane ads them to the package.
Menu Tree
File
New [Ctrl + N]
- Prompts for unsaved changes
- Closes current package
- Creates new package (MyPackage-1.0.0.0)
Open… [Ctrl + O]
- Prompts for unsaved changes
- Opens file dialog
- When selected, closes current package and opens selected file
Open from Feed… [Ctrl + G]
- Prompts for unsaved changes
- Opens the Open from Feed Dialog
- When selected, closes current package, downloads selected, opens it
Close
- Prompts for unsaved changes
- Closes package
- Opens New Task dialog
Save [Ctrl + S]
- If package is stored in app data storage, opens file dialog
- Saves file
Save As… [Ctrl + Shift + S]
- If package is stored in app data storage, opens file dialog
- Saves file
Publish… [Ctrl + P]
- Saves package
- Opens Publish Package Dialog
Recent Files
- Recent package file list
Exit
- Prompts for unsaved changes
- Closes program
Edit
Edit Metadata
- Active only in view mode on metadata
- Switches to edit mode on the metadata
Content
View File Content [enter]
- Active only when a file is selected in the contents pane
- Opens the select content using notepad.exe
Open file in Windows shell…
- Active only when a file is selected in the contents pane
- Performs a shell open of the file
[+] Add
- Flyout menu with three options:
New File…
- Opens a dialog window that prompts for a valid file name; creates as a zero-byte entry in the package root or currently selected folder
Existing File…
- Opens a file browse dialog window; adds selected file to the package root or currently selected folder
New Folder…
- Opens a dialog that prompts for a valid directory name; creates directory with that name in the package root or currently selected folder
Rename… [F2]
- Active only when a file or folder is selected in the contents pane
- Opens a dialog window that prompts for a valid file name; renames selected file unless file of same name already exists
Delete… [Delete]
- Active only when a file or folder is selected in the contents pane
- Prompts “Are you sure you want to remove the selected file or folder from the package?”
Help
UPE Project Home
- Link to GitHub Docs; open in browser
UPack File Reference
- Link to Inedo Docs; open in browser
About…
- Opens a dialog that displays current version number