Design and Code basics


Thank you for your interest in the ServConnect Manager 2019 SDK. We think you’re going to love it!

Building a brand new app is always difficult, choosing how the design should be, which fonts to use and much, much more. Luckily, we’ve laid it all out for you. Our design requirements are minimal, but we have many optional components waiting for you like buttons and sliders. But if you want, you can shape the whole app to your design. We strongly advice on using our pre-built components to ensure a streamlined experience for the end user. The minimalistic style of our components are a perfect fit for any design.


Some of our pre-built components include:

Button (primary dark grey)

Button primary

Button (secondary light grey)

Checkbox (primary dark grey color)

States: Unselected and selected states shown respectively. When disabled, set the  alpha  property of the checkbox to 0.28.

Window controls (traffic light)

Window controls large (traffic light, use this if you have buttons in your top bar)

Creating your app

First things first; We are going to use Adobe Animate CC (previously Flash Professional) to design and create our app. You can download a 14-day trial from the Adobe website. You could also build your app with any other IDE that dumps an AIR-compatible .swf file. ServConnect Manager is based on HARMAN AIR (previously Adobe AIR) which is based on the Flash runtime. While Flash is dead, HARMAN AIR is not. Far from it in fact. You don’t have to remember anything of that, but we wanted to clairify why we are basing our app on a (in some peoples eyes) ‘dead’ technology. Just don’t be misled by the Flash association.

Now, let’s get to the good stuff. First off, create a new document. Select ‘Advanced’ in the top menu. Select ‘AIR for Desktop’ as platform. Set your document width and height. Keep in mind that the width and height of the document are the width and height of your app. Set the frame rate to 60fps (frames per second). ServConnect Manager is going to force that to 60fps. If you don’t, the animations look choppy in the preview, but will be much faster if you test it inside ServConnect Manager. If you are satisfied, click on ‘Create’.

There it is, a nice, blank canvas. Let’s start designing. We’re going to open the ‘Actions’ panel. Here you’re going to write your code. Let’s start coding by defining what type of window controls you want to use; the normal window controls, or the window controls with space for your buttons. Let’s keep it simple for now, we’re going with the normal window controls. But how do we define that we want to use the simple controls? Well, copy this code snippet, and I'll walk you trough all the options.

//stop at the current frame, if you don't, it will loop the document.

//The name of your app.
var appName:String = "YOUR APP NAME";

//The appID is a unique application identifier. This is not needed for testing with TestBed.
var appID:String = "YOUR APP NAME";

//The location of your icon, it must be a .png or .jpg file. We recommend using a .png because it is transparent. This variable is only required for TestBed.
var icoLocation:String = "/folder/pathtoicon.png";

//If you want the big window title bar, or the standard one.
var useBigTitleBar:Boolean = false;

//The window will appear on this location (x-axis)
var startX:Number = 0;

//The window will appear on this location (y-axis)
var startY:Number = 0;

//If the window is closeable or not. Please note that the user is always allowed to force-close the app.
var isCloseable:Boolean = true;

//If the window is minimizable or not.
var isMinimizable:Boolean = true;

This code is manditory for your app to start. If you don’t add these, the app won’t even start. ServConnect Manager would simply close it, and unload your assets. Please note that our customers’ safety is our number one priority. If developers launch apps without these lines inside ServConnect Manager too often, your account, API key and acces to ServConnect Manager could be terminated. So please be warned. The easiest way to add these lines automatically is by creating a 'cope snippet' inside Adobe Animate CC (or any other IDE if it supports the feature). With code snippets, you don’t have to type these lines, but you can simply double click to add them.

Moving on to the ‘Hello world’-part of this tutorial. Let’s add a textfield with our ‘Hello world’ text. Select the Text Tool-icon’Text tool’ (or create a new TextField or StageText instance on any other IDE). Click anywhere on the stage to add an TextField, and start typing.

Launching your app in ServConnect Manager

So, these are the basics of developing an app for ServConnect Manager. Now, let’s launch your new app inside ServConnect. But first, you’ll need to install it. We aren’t letting everyone download ServConnect Manager just yet. If you are one of the lucky few that got it; congratulations! Now we need to get your application ServConnect Manager-ready. Let’s start with publishing. It’s quite easy, just click on ‘File’ in the upper left hand corner and select ‘Publish settings…’, next select a location for your .swf file. You can do this by clicking on the folder icon next to the ‘Output name’-field. Change the name of the file to ’ TestBed.swf’. Next, ensure that the settings haven’t magically changed by comparing yours to mine.

Ready? Nice! Click on publish to export your app. Ignore the dialog that comes up asking for a signature, as we don’t need one. Next up, navigate to your ‘Documents’ folder on your computer and create a new folder inside the ’ServConnect Manager’-folder called ’TestBed’. Move your recently created .swf file to this folder. Open ServConnect Manager, and click on the ’ServConnect Manager’-menu in the top left. Next, click on ’ServConnect TestBed’. If you did it correctly, so should see something like this:

If so, then congratulations! You’ve just built your own app and launched it in ServConnect Manager. This is a great start! Please check the following if something went wrong:

  • You’ve selected ‘AIR for Desktop’ as ’target’ destination.
  • Make sure your AIR version is at least ‘AIR 32.x’. If not, download the AIR SDK from Adobe’s site. Click here to download it.
  • The .swf-file is copied correctly to the ’TestBed’ folder.
  • Try to recompile the app (publish it again, and copy the output .swf-file).
  • Check if you have the latest version of ServConnect Manager installed on your computer.
  • If you don’t see the TestBed app, try removing the ’ServConnect Manager’ folder inside your ‘Documents’ folder. Restart ServConnect Manager and enter the Config. Profile-id: ‘dev-testbed’.
  • Some of the code from the snippet may be missing.
  • If the font used for the text is different: Try clicking on the text in Animate CC, click on ‘Embed’ inside the ‘Properties’-pane, select ‘All’ and click on ‘OK’. Publish the app again, and copy the file to ‘Documents’ > ’ServConnect Manager’ > ’TestBed’. Restart ServConnect Manager and launch ’ServConnect TestBed’ from the ’ServConnect Manager’-menu.
  • Make sure the name of ‘.swf’-file is ’TestBed.swf’.

Please contact us if you are stuck, we’re happy to help.

copyright Alwin Lubbers Software/ContourReclame B.V. 2017-2019