How to use the AppDesigner

Of course it’s not very useful to design flows in a chart program like MS Visio and translate the flow to the flow Definition language. That’s one step too many because the developer has to update two documents each time the flow definition is changed. According to experience, two documents can never contain the same content. Some content will automatically be obsolete.

Therefore, the AppDesigner project was started. This program uses the AppBuilder itself and allows the developer to design flows that can be used by the AppBuilder directly.
The following screenshot shows the AppDesigner with one of its own flows:

AB3.AppDesigner.72.02.MainFlow.png
In the left part of the AppDesigner, you see the defined flows starting with the top level flow called MainFlow (tab "FLOW MAP"). It’s like the WPF document outline of Visual Studio. In the center part, you see the visualization of the flow. Yellow boxes currently show remarks of the flow (key word Remark). After each key word you can use some additional attributes to format the content of the chart. Caption is used for the content string. Top and Left for the positioning within the flow chart. Height and Width for the size. Camel cased steps and flows are split by a space to allow a useful word wrap. Steps are blue, flows are golden. Interfaces (In and Out) are green. On the right side, you will find all steps and flows that are defined somewhere within the flow. Below this list, you can see on which flows this step or flow is used. In the bottom window, (empty in the screenshot) you could find the mistakes you made (the outline was inspired by Visual Studio).

You can create your flow definition graphically. The flow text result is shown in the text window immediately. The needed formatting attributes are added by the designer itself. In the following table, you find the currently possible attributes:

Key word Sample Explanation Component Type
Caption "Structure presenters of the AppDesigner" Simple additional text to show in Chart Interface, Step / Flow, Remark, Wire
Point1 "10,20" Redirect wire on Chart (x,y) Wire
PointN "20,30" Redirect wire on Chart (x,y) Wire
Position "50,70" Position on Chart (x,y) Interface, Step / Flow, Remark
Size "100,50" The width and height Interface, Step / Flow, Remark
SourceEdge "Left" or "Top" or "TopLeft" or "TopRight" or "Right" or "Bottom" or "BottomLeft" or "BottomRight" Define where a wire starts at the component Wire
TargetEdge "Left" or "Top" or "TopLeft" or "TopRight" or "Right" or "Bottom" or "BottomLeft" or "BottomRight" Define where a wire ends at the component Wire


ATTENTION!
It’s possible that the visual presentation of the AppDesigner you are using is a little bit different than shown in the following screenshots because I’m currently working on some improvements. However, the function should work as described. If I have to change something important, I will update this documentation as soon as possible.

General functions

Font Size

New Buttons of toolbar

Edit used component

Reuse existing item

Modify the view of a component

Modify the view of a wire

Modify wire order

Remove a component

Last edited Dec 4, 2013 at 12:03 PM by InneHo, version 18

Comments

No comments yet.