Developing a Custom Program

Developing a custom "program" for your portfolio is relatively easy; it's as simple as making a an Angular component or (in certain cases), a JSON object. The program-definitions.var.ts controls the behavior of these programs.

Developing a Link Program

A link program links to an external website like Linkedin or Github. It's not really an Angular component. The shortcut in the taskbar/desktop will take the user to the external website when clicked on.

1. Go to the program-definitions.var.ts file in src\app\programs\program-definitions.var.ts. You will see an Array of objects. Each object is a program definition.
2. At the bottom of the Array, append a new Object with the structure below (replace the {{ }}} with settings):

  {
    id: '{{STRING: id unique relative to the other program definitions}}',  
    icon: '{{STRING: path relative to src to icon image. Can be any size}}',  
    name: '{{STRING: the name of the program/link, doe snot need to be unique}}',  
    openOnStart: {{BOOLEAN: that states whether the program should open on start}},  
    pin: {  
      desktop: {{BOOLEAN: that states whether a shortcut for it should exist on the desktop}},  
      taskbar: {{BOOLEAN: that states whether a shortcut for it should be pinned onto the taskbar}}  
    },  
    webLink: '{{STRING: the link (including http(s) to the external site}}'  
  } 

3. Recompile the project and the Link Programshould be created. NOTE: Currently, you can't easily change the order of shortcuts in the Desktop. The best way to do this is changing the order of the program definintions.

Example of Link Program:

  {
    id: 'linkedin',
    icon: './assets/programs/link-programs/linkedin.png',
    name: 'Linkedin',
    openOnStart: false,
    pin: {
      desktop: true,
      taskbar: false
    },
    webLink: 'https://www.linkedin.com/in/bryce-plunkett-930b77164'
  }

Developing a Complete Custom Program

1. Create an Angular Component within src\app\programs. It is recommended that you follow the format for other programs. Each program is given it's own folder within the programs folder.
2. Go to src\app\app.module.ts and add the Component to your declarations and entryComponents. NOTE: You should also be able to define this Component in an external module. If you know how to do this, import the Module and add the component to your entryComponents.
3. Import src\app\programs\program-component.class.ts at the top of your Component class. Example import statement:

import { ProgramComponent } from '../program-component.class';

4. Your component should extend the ProgramComponent class AKA in your class' header:

export class {{COMPONENT NAME}} extends ProgramComponent

5. Implement the abstract methods with the following signatures. The first method is called whenever the browser window is resized. Guaranteed keys on the event are width and height which give the new width and height of the browser. NOTE: In the current version, the function is not called yet. The second method is called whenever the browser window is closed.

public windowResize (event: any): void

public windowClose(): void

6. Your program can receive arguments when an instance of it is run. To learn how to take advantage of this feature, read this page.
7. Wrap your component's template with what's below. Don't change anything.

<window-component [inputId]="id" [programDefinition]="programDefinition">
*YOUR COMPONENT'S TEMPLATE*
</window-component>

8. Go to the program-definitions.var.ts file in src\app\programs\program-definitions.var.ts. You will see an Array of objects. Each object is a program definition.
9. Import your Program's component in the file
10. At the bottom of the Array, append a new ProgramDefinition object. Structure outlined in section below.
11. Your program is now ready to be to used on your portfolio

NOTE: If your program implements any lifecycle hooks (such as ngOnInit), ensure it calls the super of the lifecycle hook otherwise a number of errors can occur

Example Custom Programs:

• Console
• PDF Browser
• File Explorer

Program Definition Object

Program Definition objects can be found in The program-definitions.var.ts. This Program Definition section outlines the structure for a custom program not a link program definition (which is much simpler).

Key	Type	Description	Required
component	The type of your custom component (Component class name)	The root component of your program	Yes
id	string	The UNIQUE identifier for your program. The user will never see. Mostly for debugging purposes	Yes
icon	string	The path RELATIVE to the /src directory to the icon image. Can be any size.	Yes
name	string	The name of your program. The user will see this.	Yes
openOnStart	boolean	Determines whether the program will be 'launched' when the portfolio first loads.	Yes
pin	Object	Two keys. Determines whether the program should be pinned to the desktop, taskbar, or both. See table below for more info on this object	Yes
unique	boolean	Can the user have multiple 'instances' of the program running at the same time? False if wanted. True if not.	Yes
alwaysUsePreferred	boolean	If the user always wishes to use a predefined preferred size when a program is run. Normal behavior: if a program is run again after it is closed, it will take the size of the previously closed program	No
preferred	Object	Two keys. Defines a preferred size that a program will take when it's first run. Otherwise, when a program is run, it will be 500x500. See table below for more information on the preferred object	No UNLESS always usePreferred is true.
openFiles	Array of strings	Each string is a file type that the program can open. See creating file-based program for more information	No

Pin Object:
Found the under the pin key in a program definition

Key	Type	Description	Required
desktop	boolean	Should the program have a shortcut on the desktop	Yes
taskbar	boolean	Should the program be pinned to the taskbar	Yes

Preferred Object:
Found the under the preferred key in a program definition

Key	Type	Description	Required
width	int	The preferred width of the program	Yes
height	int	The preferred height of the program	Yes

Examples:
Example program definitions

  {
    component: InfoBoxComponent,
    id: 'info-box',
    icon: './assets/programs/info-box/info.png',
    name: 'Info Box',
    openOnStart: false,
    pin: {
      desktop: false,
      taskbar: false
    },
    unique: false,
    alwaysUsePreferred: true,
    preferred: {
      width: 400,
      height: 150
    }
  }

Another example:

  {
    component: BrowserComponent,
    id: 'browser',
    icon: './assets/programs/browser/browser.png',
    name: 'Browser',
    openOnStart: false,
    pin: {
      desktop: true,
      taskbar: true
    },
    unique: false,
    openFiles: [
      'pdf'
    ]
  }