Getting Started
Setting up
We will start by setting up Petra client and plugin, installing the plugin is as easy as double-clicking it (Petra.sketchplugin), to install Petra client (shown below), run the installer package Petra.pkg
Getting started with Sketch and Petra
Run Petra client app, initially, all platforms buttons would be disabled as shown in the previous screenshot. Next, run Sketch App, for this tutorial, we will use the Sketch file from this link. The drawing is a simple Star shape (you can use another Sketch file or create your own)
Notice the hierarchy from the previous screenshot, the Artboard name is "Tutorial" and it contains one shape named "Star", to convert the Artboard to drawing code, make sure you have selected the Artboard as shown in the previous screenshot and that Petra client is running in the background, then go to "Plugins" menu and select "Petra" (review "Setting up" section in case you can't find the plugin menu item)
Go back to Petra client app, if Petra was set correctly, all platforms button should be enabled, an Artboard added to the "Loaded Artboards" list and the "Status" label changed to highlight the time the Artboard was loaded, as shown in next screenshot. Click on any platform to copy the drawing code or save it, for this simple tutorial, we will generate a macOS drawing code, click macOS platform button and select "Copy" action (the same steps can be repeated for iSO and/or Android)
Generated Code
Now let us turn our attention to the generated code, Petra generates a class definition to represent Sketch Artboards, in our simple example, Petra generated "TArtboardTutorial" for Delphi and "ArtboardTutorial" for Xamarin (make sure to select a proper name for the Artboard)
Every drawing class contains a public drawing method as shown, this method will initiate the drawing
Xamarin : public void DrawArtboardTutorial(CGRect bounds, ArtboardTutorialFillMode fillMode){...}
Delphi : procedure DrawArtboardTutorial(Bounds: TRectF; FillMode: TArtboardTutorialFillMode);
FillMode parameter defines how the drawing fits within the supplied area (bounds parameter), possible values include
-
Fit
-
Fill
-
Stretch
-
Original
The fill mode type is coded as enumeration type distinguished by Artboard's name
Xamarin :
public enum ArtboardTutorialFillMode
{
ArtboardTutorialFit,
ArtboardTutorialFill,
ArtboardTutorialStretch,
ArtboardTutorialOriginal
};
Delphi :
type
TArtboardTutorialFillMode = (
ArtboardTutorialFit,
ArtboardTutorialFill,
ArtboardTutorialStretch,
ArtboardTutorialOriginal);
Petra drawing code is a series of calls to private methods/procedures, each method/procedure represents a drawing shape or group (collection of shapes) of shapes, for example, in our sample Sketch drawing we have "Tutorial" Artboard that contains one shape object named "Star", in our case, we have one object named "Star"
Xamarin :
private void DrawShapeObjectStar(CGContext context) {...}
Delphi :
private
procedure DrawShapeObjectStar(context: CGContextRef);
It is very important to name shape objects and groups in a way that will make it easy to map the objects to methods for easier code readability and tracing
Since we are creating code for macOS, the generated code is using CoreGraphics 2D API, hence, why we have a CGContext object passed for drawing, this means our drawings is resolution independent (will scale at any screen resolution, no 1x, 2x or 3x image resources), and best of all, the drawing code can be adjusted to add dynamic behavior or can be refactored to add custom properties that control drawing behavior
Generating Images
In addition to dynamic drawing code generation, the code generated by Petra defines a special method/property that returns an NSImage object (UIImage for iOS, Bitmap for Android and TBitmap in case Delphi is used)
Xamarin : public NSImage GenerateArtboardTutorialImage() {...}
Delphi : property ArtboardTutorialBitmap: TBitmap read GenerateArtboardTutorialBitmap;
The image property can be used to generate design time and runtime images to be used with other custom controls or UI elements that expects an image object as an input, for example, Xamarin Forms or Delphi FireMonkey, in addition to inheriting the same advantages of dynamic drawing code.