Sample project
- 4 minutes to read
After you have read about the 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.
Distribution Packages
The 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 two lines of code to the Global.asax file:
At the beginning of
Application_Start
, addAurigma.DesignAtoms.Configuration.Configuration.Setup(enableCors: true);
At the end of
Application_Start
, addAurigma.DesignAtoms.Licensing.License.Check();
A sample project and front-end code samples are available in the following GitHub repository:
Starting the Sample Project
First, clone the DesignAtomsSamples repository or download it from GitHub. To build and start this project:
Open Aurigma.DesignAtoms.Samples.sln in Visual Studio.
On the menu, click Tools > NuGet Package Manager > Manage NuGet Packages for Solution > Restore to get NuGet packages.
In the Solution Explorer, right-click package.json and click Restore Packages to get NodeJS packages.
On the menu, click Build > Build Solution.
Click Debug > Start Debugging to start the project.
Important
To run projects based on the Design Atoms Framework, you need a valid license key. You can register a key in the Customer's Canvas License Manager. If you don't have this tool, contact our support team.
The Project Structure
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.
Available Samples
Now, let us see what samples you can find when you open the Aurigma.DesignAtoms.Samples repository.
backend
An example of how to use back-end and front-end libraries together. It demonstrates the following features:
- Constructing a design on the server side.
- Sending the design from a server to a client and vice versa.
- Loading a template from an IDML or PSD file.
- Rendering a design to a JPEG or PDF file on the server.
- Serialization/deserialization of a design to a file system (i.e. save/restore in its own file format).
background-backend
An example of how you can set and delete the background at the server side. The following features are illustrated:
- Setting a color as the background.
- Setting an image as the background.
- Deleting the background.
curved-text
A demo for the curved text feature. It demonstrates how you can (both back-end and front-end code):
- Create a curved text item based on a path and text.
- Apply it to both plain text and rich formatted text.
demo
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:
- Constructing a design on the client side.
- Changing the colors of all items.
- Changing font settings of a currently selected item.
- Reading item properties of a currently selected item.
events-demo
An example of how you can detect changes in the design as well as get a selected item. The following features are illustrated:
- Listening to the product model changes.
- Determining what items and properties are changed.
- Receiving the old and new values.
- Detecting elements being added or removed.
- Detecting an element selection.
import
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.
mockup-backend
An example of how you can assign and delete mockups on the back end. The following features are illustrated:
- Setting images as mockups.
- Deleting mockups.
open-type-feature
An example of how to work with OpenType Features of text (such as ligatures, swash, all caps, subscript/superscript, and many more). It demonstrates:
- Adding and removing OpenType Features to/from text items on the back end and front end.
- Reading OpenType Features and updating the user interface based on them.
pdf-box-backend
An example of how you can specify safety lines on the back end. The following features are illustrated:
- Setting the trim box.
- Setting the crop box.
- Setting the bleed box.
state-fonts-backend
An example of how you can get a list of used fonts from a state file on the back end.
vector-mask
A demo for the mask feature. It illustrates the following features (both back-end and front-end code):
- Adding a vector mask to different design item types.
- Removing a mask.