CLOSE ✕
Get in Touch
Thank you for your interest! Please fill out the form below if you would like to work together.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Universal Package Manager

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

  1. 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 }}
  2. 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 }}
  3. 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 }}
  4. 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

Recent Projects