After you have read about Customer's Canvas 5 and Design Atoms Framework, you may want to try our out-of-box sample demonstrating this framework. This topic describes how you can run the sample project and start using Design Atoms in your solution.
Design Atoms Framework consists of two parts - a front-end library available as npm package @aurigma/design-atoms
and ASP.NET assembly the Aurigma.DesignAtoms available at Nuget.
To install a front end, run in the command prompt in your project folder:
npm install @aurigma/design-atoms --save
To get a back-end library, you can run the following command in the Visual Studio Package Manager Console:
Install-Package Aurigma.DesignAtoms
This assembly implements all necessary endpoints required by the front-end library. All you need is to add a reference to this assembly and add one line of code to the Global.asax file. A sample project and front-end code samples are available in the following GitHub repository:
First, clone the DesignAtomsSamples repository or download it from GitHub. To build and start this project:
Aurigma.DesignAtoms.Samples.sln
in Visual Studio.
package.json
and click Restore Packages to get NodeJS packages.
To run projects based on the Design Atoms Framework, you need a valid license key. You can register a free trial key in the Customer's Canvas License Manager. If you don't have this tool, contact our support team.
In this project, pay attention to the following files:
Global.asax
- code for connecting to Design Atoms.index.html
- the entry point of the application.\samples\
- samples in single folders.\samples\<sampleName>\index.html
- an HTML markup of a sample.\samples\<sampleName>\index.ts
- TypeScript code of a sample.\samples\<sampleName>\style.css
- CSS styles.\scripts\
- common helpers and utilities for these samples.Now, let us see what samples you can find when you open the Aurigma.DesignAtoms.Samples repository.
An example of how to use back-end and front-end libraries together. It demonstrates the following features:
An example of how you can set and delete the background at the server side. The following features are illustrated:
A demo for the curved text feature. It demonstrates how you can (both back-end and front-end code):
Quick start demo. Here, you can see an example of how to work with the front-end library and CanvasViewer control. The following features are demonstrated:
An example of how you can detect changes in the design as well as get a selected item. The following features are illustrated:
An example of how you can upload a PSD or IDML file (with embedded resources) and convert it to a state file on the back end. You can use a controller implemented in this demo as a starting point if you want to use state files as the single design format used in Customer's Canvas.
Note that, to make it brief, this sample does not implement any validation of the uploaded files. For example, if your application doesn't contain fonts that were applied in a PSD file, it will throw an exception.
An example of how you can assign and delete mockups on the back end. The following features are illustrated:
An example of how to work with OpenType Features of text (such as ligatures, swash, all caps/small caps, subscript/superscript, and many more). It demonstrates:
An example of how you can specify safety lines on the back end. The following features are illustrated:
An example of how you can get a list of used fonts from a state file on the back end.
A demo for the mask feature. It illustrates the following features (both back-end and front-end code):