Skip to content

Commit

Permalink
Added some initial content
Browse files Browse the repository at this point in the history
  • Loading branch information
MikeYeager2 committed Feb 12, 2021
1 parent f39fd2a commit 3ae6fd5
Show file tree
Hide file tree
Showing 16 changed files with 329 additions and 0 deletions.
33 changes: 33 additions & 0 deletions 00-Overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@

![](PhotinoFullLogo.png)
# Overview

Photino is a set of technologies for creating desktop apps with web (HTML/CSS/JavaScript) UIs. TryPhotino.io maintains the .NET build out and encourages the community to develop the Photino.Native control for use in other languages and platforms. We encourage and will support development of Photino.CPP, Photino.Rust, Photino.Go and others.

![](PhotinoBlazorSamples.png)

![](Photino-hello-world-angular-windows.png)

![](Photino-hello-world-vue-windows.png)

![](Photino-hello-world-react-windows.png)

## Quick Start for .NET Developers
<span>Photino.</span>NET and Photino.Blazor are available as NuGet packages for .NET developers. However, we recommend installing the Photino Project Templates and using those as a starting point for learning as well as for developing new projects.

Visual Studio users should install the [Visual Studio Photino Project Templates Extension]("https://marketplace.visualstudio.com/items?itemName=TryPhotino.PhotinoSamplesVSExtension") and search for Photino in the New Project dialog.

dotnet CLI and Visual Studio Code users should install the [Photino for .NET CLI and VS Code Project Templates NuGet Package]("https://www.nuget.org/packages/TryPhotino.VSCode.Project.Templates/"). Use `dotnet new --install TryPhotino.VSCode.Project.Templates` to install the templates, `dotnet new -l` to list installed templates, ` dotnet new photinoxxxxxx` to create new projects from the templates, and `dotnet run` to run the samples.

## The Photino Family
### Photino.Native
C++ wrapper around the OS's default browser control on Windows, Mac and Linux which creates a native OS window, places the browser control in it and exposes both the window and control to the host application.

### <span>Photino.</span>NET
.NET implementation of the Photino.Native control (beginning with .NET 5). Allows .NET developers to develop .NET applications that host a Photino.Native window for hosting an HTML/CSS/JavaScript UI.

### Photino.Blazor
Extension of Photino.NET that adds Blazor functionality to the Photino.Native hosted UI.

### Photino.Samples
A collection of starter applications for .NET developers that highlights various web UI frameworks and capabilities suitable for learning Photino and for use as starting points for new projects. The installable project templates described are the preferred way to create these samples, though they can also be downloaded as .zip files.
30 changes: 30 additions & 0 deletions 01-Photino.Native.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Photino.Native

## Audience
This document is for C++ developers who would like to understand or contribute to the Photino.Native project and for developers who would like to build Photino wrappers for their chosen language and/or development platform. The <span>Photino.</span>NET project is a reference implementation for the .NET development platform.

## Overview
Photino.Native is a C++ wrapper around the OS's default browser control on Windows, Mac and Linux which creates a native OS window, places the browser control in it and exposes both the window and control to the host application.

The source code can be found in a Visual Stuido solution in the [GitHub repository]("https://github.com/tryphotino/photino.Native"). It contains Microsoft C++ code for Windows, gcc C++ code for Linux, and Objective C++ code for Mac as well as code and resources shared in all 3 environments.

* The Windows code uses the Chromium-based Edge control in [webview2]("https://docs.microsoft.com/en-us/microsoft-edge/webview2/?ranMID=24542&ranEAID=je6NUbpObpQ&ranSiteID=je6NUbpObpQ-T5b4unLww4VC4k9j9e_XIQ&epi=je6NUbpObpQ-T5b4unLww4VC4k9j9e_XIQ&irgwc=1&OCID=AID2000142_aff_7593_1243925&tduid=(ir__jmet23akugkftm1hkk0sohzibm2xpj1pijghddor00)(7593)(1243925)(je6NUbpObpQ-T5b4unLww4VC4k9j9e_XIQ)()&irclickid=_jmet23akugkftm1hkk0sohzibm2xpj1pijghddor00")

* The Linux code uses the WebKit-based browser control in [WebKitGTK+2]("https://webkitgtk.org/").

* The Mac code uses the WebKit-based browser control in [WKWebView]("https://developer.apple.com/documentation/webkit/wkwebview").

Because these controls are always included on Windows and Mac and are usually included in Desktop Linux builds, there is no need to download or install the controls along with the application, making Photino applications lean and performant.

## Usage Instructions
If you just want to use the Photino.Native component, download or install the [NuGet package]("https://www.nuget.org/packages/Photino.Native/"). The required executable files for all environments are containted in the package and can be extracted using a NuGet utility or by renaming the .nupkg file to .zip and treating it as a .zip file.

## Building
The GitHub repository includes .yml files for automated CI/CD builds, packaging and deployments via Azure DevOps Pipelines. Please refer to these files for the latest information on dependencies and build commands.

* Windows - Open the solution in Visual Studio 2019 or later with the **Desktop development with C++** workload installed. The **Linux development with C++** workload is recommended, but not required. You *must* build in x64 configuration (*not* AnyCPU which is the default). You *must* install the [Edge Dev Channel]("https://www.microsoftedgeinsider.com/en-us/download"). Beta and Canary should work as well, but that hasn't been verified. Just having Edge Chromium installed will not work. The project will build, but will not work properly in a development environment.

* Linux - (Tested with Ubuntu 18.04 and 20.04) Install dependencies: `sudo apt-get update && sudo apt-get install libgtk-3-dev libwebkit2gtk-4.0-dev`. To compile, run `gcc -std=c++11 -shared -DOS_LINUX Exports.cpp Photino.Linux.cpp -o x64/$(buildConfiguration)/Photino.Native.so 'pkg-config --cflags --libs gtk+-3.0 webkit2gtk-4.0' -fPIC`

* Mac - Install Xcode. To compile, run `gcc -shared -lstdc++ -DOS_MAC -framework Cocoa -framework WebKit Photino.Mac.mm Exports.cpp Photino.Mac.AppDelegate.mm Photino.Mac.UiDelegate.mm Photino.Mac.UrlSchemeHandler.m -o x64/$(buildConfiguration)/Photino.Native.dylib`.

18 changes: 18 additions & 0 deletions 02-Photino.NET.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Photino.NET
## Audience
This document is for .NET developers who would like to understand or contribute to the <span>Photino.</span>NET and Photino.Blazor projects. It is a reference implementation of the Photino.Native project for the .NET development platform.

## Overview
<span>Photino.</span>NET is a wrapper around the Photino.Native C++ control by using the Photino.Native NuGet package. It's purpose is to make it easy for .NET developers to create .NET 5 and later desktop applications using a web (HTML5/CSS/JavaScript) UI that can work cross-platform on Windows, Linux and Mac instead of building OS specific UIs with technologies like Windows Forms, Windows Presentation Foundation (WPF), Xcode, Swift, or GTK.

If Blazor UIs are desired, please see the Photino.Blazor documentation which builds on the <span>Photino.</span>NET.

The Visual Stuido solution source code can be found in the [GitHub repository]("https://github.com/tryphotino/photino.NET")

## Usage Instructions
If you just want to use the <span>Photino.</span>NET component, download or install the [NuGet package]("https://www.nuget.org/packages/Photino.NET/"). If you only want to build and run Photino.Net-based projects, we recommend you install the Project Templates for Visual Studio and/or for dotnet CLI & VS Code.

## Building
The GitHub repository includes .yml files for automated CI/CD builds, packaging and deployments via Azure DevOps Pipelines. Please refer to these files for the latest information on dependencies and build commands.

Use standard Visual Studio build procedures for Visual Studio. If you're using the dotnet CLI (with or without VS CODE), use the standard `dotnet restore`, `dotnet build`, and `dotnet run` commands.
18 changes: 18 additions & 0 deletions 03-Photino.Blazor.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Photino.Blazor
## Audience
This document is for .NET developers who would like to understand or contribute to the <span>Photino.</span>NET and Photino.Blazor projects. It is a reference implementation of the Photino.Native project for the .NET development platform using Blazor.

## Overview
Photino.Blazor builds on <span>Photino.</span>NET by using the <span>Photino.</span>NET NuGet package. It's purpose is to make it easy for .NET developers to create .NET 5 and later desktop applications using a Blazor web UI that can work cross-platform on Windows, Linux and Mac instead of building OS specific UIs with technologies like Windows Forms, Windows Presentation Foundation (WPF), Xcode, Swift, or GTK. It simply adds Blazor capabilities to the .NET package.

If non-Blazor .NET web UIs are desired, please see the <span>Photino.</span>NET documentation.

The Visual Stuido solution source code can be found in the [GitHub repository]("https://github.com/tryphotino/photino.Blazor")

## Usage Instructions
If you just want to use the Photino.Blazor component, download or install the [NuGet package]("https://www.nuget.org/packages/Photino.Blazor/"). If you only want to build and run Photino.Blazor-based projects, we recommend you install the Project Templates for Visual Studio and/or for dotnet CLI & VS Code.

## Building
The GitHub repository includes .yml files for automated CI/CD builds, packaging and deployments via Azure DevOps Pipelines. Please refer to these files for the latest information on dependencies and build commands.

Use standard Visual Studio build procedures for Visual Studio. If you're using the dotnet CLI (with or without VS CODE), use the standard `dotnet restore`, `dotnet build`, and `dotnet run` commands.
15 changes: 15 additions & 0 deletions 04-Photino.Samples.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Photino.Samples

## Audience
This document is for .NET developers who would like to get started building Photino projects in .NET or Blazor and for those who would like to contribute to the samples repository.

## Overview
These samples represent a wide range of starter projects that highlight the use of various web UI frameworks and Photino capabilities on the .NET platform.

The Visual Stuido solution source code can be found in the [GitHub repository]("https://github.com/tryphotino/photino.Samples")

## Usage Instructions
If you just want to use the samples projects (not become a contributor), we recommend installing the project templates for Visual Studio and/or dotnet CLI (with or without VS Code). The templates will create the sample projects authored here.

## Building
Use standard Visual Studio build procedures for Visual Studio. If you're using the dotnet CLI (with or without VS CODE), use the standard `dotnet restore`, `dotnet build`, and `dotnet run` commands.
44 changes: 44 additions & 0 deletions 05-Photino.VSExtension.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Photino.VSExtension

## Audience
This document is for .NET developers using Visual Studio 2019 or later who would like to get started building Photino projects in .NET or Blazor and for those who would like to contribute to the Visual Studio Project Templates created from the Samples.

## Overview
The Visual Studio Extension intalls project templates for creating the Photino.NET and Photino.Blazor sample projects.

Photino project templates create bare-bones sample applications for various Photino project flavors such as .NET (plain html), Angular, React, Vue, and Blazor. Installing the project templates for Visual Studio 2019, the dotnet CLI and/or VS Code is the easiest way to get up and running creating Photino apps for .NET 5.

The Visual Stuido solution source code can be found in the [GitHub repository]("https://github.com/tryphotino/photino.VSExtension")

## Usage Instructions
If you just want to use the project templates (not become a contributor), we recommend installing the project templates for Visual Studio 2019 and later through the Visual Studio Manage Extensions dialog by searching on Photino or from the [Visual Studio Marketplace]("https://marketplace.visualstudio.com/items?itemName=TryPhotino.PhotinoSamplesVSExtension").

## Building
Open the solution in Visual Studio 2019 or later with the **ASP.NET and web development**, **.NET desktop development**, and **Visual Studio extension development** workloads installed.

1. Open the Photino.Samples solution [GitHub]("https://github.com/tryphotino/photino.Samples")
2. Update the samples as required and ensure they build and run correctly
3. From the Project menu, select Export Template…
4. For each project, enter description as: “Photino.XXX Sample application with XXX UI”
5. Set icon and preview images if you have them

Zip files are written to:
* C:\Users\xxxx\Documents\Visual Studio 2019\Templates\ProjectTemplates
* C:\Users\xxxx\Documents\Visual Studio 2019\My Exported Templates

Project templates will now be available on your dev machine and you can copy the .zip files from the My Exported Templates folder to the ProjectTemplates folder on other machines to ‘install them’ for testing.

1. Open the PhotinoSamples.VSExtension solution [GitHub]("https://github.com/tryphotino/PhotinoSamples.VSExtension")
2. Copy the .zip template files created above to the PhotinoSamples project folder
3. Add any new .zip files to the project and set the Copy to Output properties to Copy Always
4. Open the source.extension.vsixmanifest file and edit the Metadata properties
5. On the Assets tab, add each new .zip file as a Microsoft.VisualStudio.ProjectTemplate file
6. Update ReleaseNotes.txt putting changes since the last version at the top
7. Save vsix.extension.manifest changes and build the project
8. A new Visual Studio instance will open with the templates installed for testing. You will likely see 2 copies of each template since there is already a copy in the \ProjectTemplates folder from the steps above.

## Upload VSIX Extension to Visual Studio Gallery
* Sign in to https://marketplace.visualstudio.com with [email protected] Microsoft ID
* Click the “Publish Extensions” link


57 changes: 57 additions & 0 deletions 06-Photino.VSCodeTemplates.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# Photino.VSExtension

## Audience
This document is for .NET developers using the dotnet CLI (with or withough VS Code) who would like to get started building Photino projects in .NET or Blazor and for those who would like to contribute to the Visual Studio Project Templates created from the Samples.

## Overview
The VS Code Templates project intalls project templates for creating the Photino.NET and Photino.Blazor sample projects from the dotnet CLI (with or without VS Code).

Photino project templates create bare-bones sample applications for various Photino project flavors such as .NET (plain html), Angular, React, Vue, and Blazor. Installing the project templates for Visual Studio 2019, the dotnet CLI and/or VS Code is the easiest way to get up and running creating Photino apps for .NET 5.

The Visual Stuido solution source code can be found in the [GitHub repository]("https://github.com/tryphotino/photino.VSCodeTemplates")

## Usage Instructions
If you just want to use the project templates (not become a contributor), we recommend installing the project templates by using the dotnet CLI to install the templates NuGet package:
* Type `dotnet new -i TryPhotino.VSCode.Project.Templates` (the NuGet package name) to install the templates
* Type `dotnet new photinoangular` (or other sample short name) to create a new project using that template
* Type `dotnet new -l` to list all install project templates or `dotnet new -u` to list details about each template
* Type `dotnet new -u TryPhotino.VSCode.Project.Templates` to uninstall the templates

The [NuGet Package]("https://www.nuget.org/packages/TryPhotino.VSCode.Project.Templates/").

## Building
Create/Test A Single Project Template
1. Open a command prompt in the *<...>\Photino\photino.PhotinoSamples.VSCodeTemplates\working\templates* folder [GitHub]("https://github.com/tryphotino/PhotinoSamples.VSCodeTemplates")
2. Copy the latest versions of the source code for the projects in the Photino.PhotinoSamples solution into the matching folders in PhotinoSamples.VSCodeTemplates [GitHub]("https://github.com/tryphotino/photino.Samples")
3. Type `dotnet run` at the prompt to ensure each project builds and runs correctly
4. Verify the contents of the template.json files in the .template.config sub folders for each project
5. Delete the bin and obj folders, any, .gitignore or other files that should not be part of the templates (do not delete the .template.config folders)
6. From each project folder type `dotnet new -i ./` to install the template on your machine
7. Navigate to the *<...>\Photino\photino.PhotinoSamples.VSCodeTemplates\test* folder and delete all contents. If there is no *\test* folder, create one.
8. Type `dotnet new photinoangular` (or other sample, this is the shortName from the template.json file for each project) to test each template
9. Type `dotnet run` to test that the project is created correctly
10. Delete the contents of the test folder after testing each template
11. Type `dotnet new -u <...>\Photino\photino.PhotinoSamples.VSCodeTemplates\working\templates\<project>` to uninstall each template

Pack All Project Templates

1. Ensure all individual templates are up to date and work correctly (per single template above)
2. Open VS Code (or another editor) to the *<...>\Photino\photino.PhotinoSamples.VSCodeTemplates\working* folder
3. Edit the templatepack.csproj file to set version number for the NuGet package
4. From a terminal window or shell prompt, type `dotnet pack` to create the NuGet package
5. Note that you will likely see warnings. This is normal.
6. Assuming you have *NuGet Package Explorer* installed from the Microsoft Store (or some other package explorer utility), double-click on the NuGet package to inspect, update, and verify it
7. You must fill in some of the data manually as `dotnet pack` does not work with the following tags:

| Tag | Value to use |
|-----|--------------|
| Owners | TryPhotino|
| ProjectUrl | https://tryphotino.io |
| Copyright | TryPhotino 2020 |
<br>

## Upload package to NuGet
* Log into https://nuget.org with your Microsoft ID
* Click the Upload link and manually upload the package update


Loading

0 comments on commit 3ae6fd5

Please sign in to comment.