Home

GUI Machine User Manual

1. By the first object By the second object pa a a ee E E j 1 U G o i l 1 E p n f E a E iz 7 2 pi gt m 2 Hi 2 i gM m i Er l n aau a i s 3 6 a r p ee eee ee mama 7 iiinn a Ee ape Figure 40 Matching the height of objects Placing objects one after another You can rank the objects by clicking on this button The following parameters can be set up for the placement of the objects gt Gap the distance between the objects in pixels gt Place o Horizontally o Vertically gt Objects order The objects are placed by dragging The window with settings is shown on the figure below x 2007 2011 ALEE Software GUI Machine 1 5 8 page 43 of 236 GUI Machine User s Manual P Placement settings we settings Gap px 2 Place Ui Horizontally ah Objects order if JLabel1 Buttons _ Buttoni Simple _ Button1 Iconed E C IButton1 On press change _ Button On press change u Gt JButtoni Text at left _ Button1 lt With simple HTML _ Buttoni lt Some extended H _ Button1 Text at bottom E TRuttoni lt Different colors ar Figure 41 Placement settings After pressing the Place button the objects will be ranked in accordance with the settings 3 3 3 Standard Menu The Standard menu is shown on the figure below __ Button E Image pop Dynamic layout Panel if Label 7 Password wH Check
2. Customer EM enbaHos HApE Order date 01 04 2011 Activation date 01 04 2011 Expiration date unlimited Connection settings Figure 12 Information about the license 2007 2011 ALEE Software GUI Machine 1 5 8 page 19 of 236 GUI Machine User s Manual Press Next The window containing the text of the license agreement should appear on the screen Read the license if you accept the terms select the checkbox I agree and press Next IMPORTANT LEGAL NOTICE TO ALL USERS CAREFULLY READ THE FOLLOWING LEGAL AGREEMENT BEFORE YOU START USING THE SOFTWARE BY PAYING THE SOFTWARE YOU CONSENT TO BE BOUND BY THE TERMS AND CONDITIONS OF THIS AGREEMENT SUCH ACTION IS A SYMBOL OF YOUR SIGNATURE AND YOU ARE CONSENTING TO BE BOUND BY AND ARE BECOMING 4 PARTY TO THIS AGREEMENT AND AGREE THAT THIS AGREEMENT IS ENFORCEABLE LIKE ANY WRITTEN NEGOTIATED AGREEMENT SIGNED BY YOU IF YOU DO NWOT AGREE TO ALL OF THE TERMS AND CONDITIONS OF THIS AGREEMENT CANCEL THE PAYMENT OF THE SOFTWARE AND DO NOT INSTALL THE SOFTWARE AFTER PAYING THE SOFTWARE YOU HAVE THE RIGHT TO USE THE SOFTWARE IN ACCORDANCE WITH THE TERMS AND CONDITIONS OF THIS AGREEMENT 1 Definitions 1 1 Software means software including any Updates and related materials 1 2 Rightholder owner of all rights whether exclusive or otherwise to the Softwar K I agree with terms Figure 13 License agreeme
3. Figure 37 Vertical alignment of objects j l 0 Matching width heighth Press the button El to match the width of the selected objects After pressing the button the dropdown list containing two options match to the object s width and match to the maximal width should appear on the screen The first option is to make the object as wide as the selected object E Choose object C Equalize by object ERC JButton1 Align left Button1 Text at image Buttoni Align right TI JLabel1 Toggle buttons _ Button Font color and st __ JButton1 lt Words wrapping i _ Buttoni Text at top E4 C JButton1 Large icon text gi D TToggleButton1 Disabled anc Buttoni lt Disabled with sim _ Buttoni Disabled icon _ JButtoni Disabled i O ITeggleButton1 Different ico AT TToodleButton1 and not Figure 38 Selection of an object The second option is to make all objects as wide as the object with the maximal width a 2007 2011 ALEE Software GUI Machine 1 5 8 page 42 of 236 GUI Machine User s Manual By the maximum width By the second object By the first object r l H 1 7 1 a 1s M ae 4 a BEE m e e r U o AMO O NE SmE Loob d bet i z m i i E E een oe l E 3 m i a 3 n i 3 T 5 o r NN tos Figure 39 Matching the width of objects The button I allows to match the height of the selected objects
4. The action will be performed when the new cycle of the timer begins Timer event Settings gt 1 each cycle gt 0 the first cycle gt 1 the second cycle etc The action will be performed if the window is closed in any of the following ways gt by the standard closing button gt by pressing Alt F4 gt with the help of the action Closing window ie Closing window Settings gt before closing window the action will be performed before closing the window gt after closing window the action will be performed after closing the window The action will be performed if one of the tabs of a tab panel is selected Tab selection Select the checkbox Exact tab selection if you would like to select the concrete tab as the action trigger 2007 2011 ALEE Software GUI Machine 1 5 8 page 168 of 236 GUI Machine User s Manual The action is performed when an item in the tree is selected Select one of the following options Exact selecting elements gt On any marked object selection the i action will be performed if any of the tree E Tree item selection l re items is selected gt On all marked object selection the action will be performed when all elements of the tree are selected If the checkbox is deselected the action will be performed is anyone of the tree elements is selected a Reashiing a mTeEEE ho a message on the por
5. Empty field text vertical alignment Allows to align the empty field text vertically Allows to select the masking character for password fields Masking character Line break Allows prohibits the line break Wordwrap Allows prohibits the wordwrap B conen ype a A a Ti Editable aa text available for editing when 4 2 1 10 Properties for the placeholder Table 13 Properties for the placeholder Icon Property Description Properties for the placeholder Allows to select an object to be replaced by the al Object to be replaced siseahalder e 2007 2011 ALEE Software GUI Machine 1 5 8 page 78 of 236 GUI Machine User s Manual 4 2 1 11 Properties for the progress bar Table 14 Properties for the progress bar Properties for the progress bar Allows to select the bar position horizontal or it Orientation vertical The way of visualizing used in situations where the extent of the task is unknown or the progress of the task cannot be determined in a way that could be expressed as a percentage Indeterminate ez Show values Allows to display the scale 4 2 1 12 Properties for lists Table 15 Properties for lists Properties for lists Allows to fix the type and the number of i List settings a g elements in the list H Row height Allows to set the height of the rows Ba Indices of selected
6. 9 Image Editor The Image Editor is a simple easy to use tool for processing images used in prototypes It allows to process and correct images without recourse to any other special software It allows to perform all basic operations upon images Launching the image editor Add an image on the edit area then perform one of the following operations gt double click on the object and select an image from the file system or from the previously used images gt select the value for the Image property gt paste an image from the clipboard by the selecting the appropriate item in the context menu or by pressing Ctrl V Open the context menu and select the item Edit Image The image editor will be launched The editor can also be launched by selecting Tools and frames Open image editor in the main menu the icon xy 2007 2011 ALEE Software GUI Machine 1 5 8 page 208 of 236 GUI Machine User s Manual File Edit Image Actions history E Image inserted a Pencil a Figure 193 The Image editor e 2007 2011 ALEE Software GUI Machine 1 5 8 page 209 of 236 GUI Machine User s Manual 9 1 Tools of the Image Editor The tools of the Image editor are described in the table below Table 39 Image Editor Tools Icon Item Description o Marquee tool Allows to select a part of the image es Move tool Allows to change the position for the s
7. Figure 155 A window under the object gt X width Y window height locating the window over the upper right corner of the object WF e js Show wWindovy Figure 156 A window over the right upper corner gt Ifthe option Exact x y coordinates is selected gt X screen width window width Y screen height window height locating the window in the lower right corner of the screen gt X screen width 2 window width 2 Y screen height 2 window height 2 locating the window in the center of the screen gt X 0 Y 0 locating the window in the left upper corner of the screen ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 180 of 236 GUI Machine User s Manual 6 4 3 Moving resizing window This action allows to resize windows and change their position The object of the action gt Window gt Vaadin Window 4 Do not move outside screen bounds Me 1 Y 1 Width 1 Height 1 i Available parameters i Usage examples Figure 157 Settings for moving resizing windows The checkbox Do not move outside screen bounds allows prohibits to locate the window beyond the borders of the screen For moving the window enter the coordinates X Y Thus the shifting of the window being opened relativ to the upper left corner is configured To resize the window enter the width and the height Configuring settings for moving resizing windows Coordinates X Y as well
8. Figure 176 Renaming a snapshot par 2007 2011 ALEE Software GUI Machine 1 5 8 page 194 of 236 GUI Machine User s Manual The Settings panel Backgrond the settings for the background The checkbox Fill background allows to enable disable the displaying of the background If the checkbox is deselected the alpha layer is displayed and the settings for the background color are blocked Settings for the background color A The field for selecting the main background color B Default colors black and white C Switching between colors D The field for selecting the additional background coloer Area shadowing the opacity of the shadowing layer from 0 up to 100 where 0 is absolutely transparent 100 is absolutely opaque Smart selection border spacing settings for configuring smart selection borders The spacing can be configured by entering the size in the appropriate fields Top the upper spacing Left the left spacing Bottom the bottom spacing Right the right spacing o Smart selection border spacing Top 5 Lef 5 Bottom 5 Right 5 Figure 177 Configuring the spacing x 2007 2011 ALEE Software GUI Machine 1 5 8 page 195 of 236 GUI Machine User s Manual Making a snapshot To make a new snapshot gt press the snapshot creation button or the A key gt holding the left mouse button select the snapshot area on the workspace The n
9. GUI Machine User s Manual Click Next to enter the key The following window should appear on the screen mz You need an internet connection for a quick activation If You have some problems with internet connection You can also activate license in offline mode Offline activation will be automatically offered in case You don t have active connection or itis limited by firewall or other software Q Connection settings Figure 10 Entering the license key Enter the key in the text field and click Next NB You can copy the key and enter it into the field by pressing Ctrl V If the key you entered is incorrect the following window should appear en 2007 2011 ALEE Software GUI Machine 1 5 8 page 17 of 236 GUI Machine User s Manual a GUI Machine activation Entered key is not valid Press Back to retry s Connection settings Figure 11 The information about the incorrect license key Press Previous to retry Enter the key and press Next If the key is correct the license will be activated and the you will see the following window appear ani 2007 2011 ALEE Software GUI Machine 1 5 8 page 18 of 236 GUI Machine User s Manual GUI Machine activation GUI MACHINE Li informati F83300F e8e4 463e b513 7ef20ae988b5 Product Alee Software GUI Machine Licenses amount 1 Developer Alee Software Inc
10. With the help of the History settings panel it is possible to manage the history records If you want to limit the number of records to be stored select the checkbox Keep limited number of record and enter the value in the text field If the checkbox is deselected the text field will be blocked and the number of history records will not be limited The tab Project information is shown on the figure below e 2007 2011 ALEE Software GUI Machine 1 5 8 page 150 of 236 GUI Machine User s Manual tinge E Projectinforaten F Total 4 Pages 1 Guidelines 0 2 Objects 2 coo Actions 0 Multi page 0 E Events of type a Actions of type Disk space _ Project file size 61 84 KB El Images total 2 size 1 41 KB El Screenshots total 0 size 0 B a Total project size 63 26 KB Figure 137 Project information In this tab you can find the following information The number of pages The number of preview objects The number of guidelines The total number of objects The number of objects of different typers The total number of actions and the number of multipage actions The number of events of different types The number of actions of different types The size of the project file 10 The number of images and their total size 11 The number of screenshots and their total size 12 The total size of the project the used RAM Se a eee a Fari 2007 2011 ALEE Software GUI Machine 1 5
11. 389x110 E Preview Image 1 616x122 Figure 203 The Print Screen tool The tool will be launched automatically after starting the preview of any object interface Press the button on the toolbar to select unselect this option The interface of the tool can be divided into three parts gt the toolbar gt the screenshot tree far 2007 2011 ALEE Software GUI Machine 1 5 8 page 220 of 236 GUI Machine User s Manual gt the available windows The tool bar The functions of the toolbar buttons are described in the table below Table 40 The Print Screen toolbar Icon Description Add a new screenshot Remove the selected screenshot from the tree Create a new folder in the tree Remove the selected folder from the tree Refresh the screenshot tree eto 2 ag Enable disable launching Print Screen during the preview The screenshot tree It is recommended to create a tree like structure of folders before starting to make screenshots Enter the name of the folder in the window shown on the figure below Directory creation Figure 204 Entering the name of the folder To rename folders screenshots gt select a folder a screenshot and press F2 gt double click on the folder screenshot The tree is duplicated in the file system in the folder Screenshots located in the project directory If you modified the tree in the file system refresh it by pressing
12. In chapters 6 3 Event types n 6 4 Types of actions the types of events and actions are described in details 6 2 Editing and removing actions There are two ways of editing actions gt By a double click on an action or on an event in the Layers tree gt By pressing the buttin amp on the Layers panel This button works only when an action or an event is selected The interface of editing actions is similar to that of adding actions Edit action New Action 3 E Event settings __ 4 Action settings JPopupMenu4 a 2 VaadinTextField1 m r p Popup menu item selection 5 Text change Figure 147 Editing actions 2007 2011 ALEE Software GUI Machine 1 5 8 page 163 of 236 GUI Machine User s Manual The two interfaces differ only in headers and control buttons Edit the actions and press the button Save changes To undo the changes press Cancel There are several ways for removing actions gt By pressing Delete action on the action editing panel gt By selecting the object to be removed in the tree of objects and pressing the button on the Layers panel gt By removing either the object of the event or the object of the action Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 164 of 236 GUI Machine User s Manual 6 3 Event types A set of events for a concrete objects depends upon its type There are unique related to only
13. Prototypes created with dynamic layouts are lively and realistic This way of prototyping is recommened if you want to simulate the work of a real program In mixed prototyping both static and dynamic layouts are used This is the optimal way of creating prototypes but it requires a certain experience of working with GUI Machine par 2007 2011 ALEE Software GUI Machine 1 5 8 page 124 of 236 GUI Machine User s Manual 5 2 Working with static layouts A static layout can contain several objects without ruling To create an interface enter the necessary objects into the layout If an object having a great size is inserted the layout will be increased automatically If the objects in the layout are not displayed correctly rearrange them with the help of the Layers tool The possibility of adding actions to static layouts is limited A possible solution is inserting a dynamic layout into a static one 10 3 11 i ojo m i S E a aa Be aai a a Ana i E JRadioButton Full version GUI MACHINE i E Radobutton4 Demo i JButton3 Text E a Staticlayout3 be R e PlaceHolder 3 u StaticLayout4 i E Ge VaadinButton4 Register VaadinButton3 Cancel a E n B HA VaadinDateField3 ty epee TT E B Images Register Cancel Figure 104 A static layout interface being previewed 2007 2011 ALEE Software GUI Machine 1 5 8 page 125 of 236 GUI Machine User s
14. ie Message send Address 127 0 0 1 Port 16000 Message Hello Figure 163 Settings for sending a message 2007 2011 ALEE Software GUI Machine 1 5 8 page 185 of 236 GUI Machine User s Manual If you want to trigger an action by receiving a message on the specified port do the following 1 In the event settings for the connector object specify the event Receiving a message and enter the text 2 In action settings specify the action to be performed after receiving the message If you want the action to be performed after the concrete message is received select the checkbox Certain message figure 164 New Action 13 r E Event settings Fd ConnectorIcon Message redeve w Figure 164 Settings for receiving a message a 2007 2011 ALEE Software GUI Machine 1 5 8 page 186 of 236 GUI Machine User s Manual 7 Real time preview of prototypes 7 1 Previewing objects 7 1 1 Previewing objects in GUI Machine This tool allows to preview prototypes their elements and single objects in real time mode It also allows to control the work of objects and make screenshots of the interfaces During the preview prototypes look like real working programs The look of the prototype being previewed differs from that on the edit area It is recommended to preview prototypes when working upon them Not all objects can be previewed The following objects cannot be previewed Pop up menus Timer Tray
15. A panel which can store content in a compact space m User can hide or reveal the content of the panel by Collapsible pane aes clicking on its tab Text pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 66 of 236 GUI Machine User s Manual Clocks Allows to add to the interface clocks of different types Media aj Audio player An interface element used for playing sound files FH Cal _ Compound g A list consisting of checkboxes Each checkbox can m Checkbox list be selected or deselected enabled or disabled System h An icon that can be added to the system tray It can Tray icon have a tooltip an image a popup menu or set of listeners accociated with it An interface element allowing to establish Connector object connection with other prototypes or applications via system sockets Actions 6 Timer A specialized type of clock used to control the sequence of an event or a process Shapes Shapes E Ea Simple Simple pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 67 of 236 GUI Machine User s Manual C Circle Allows to add a circle Allows to add an oval Oval ki Square Allows to add a square R kK ectangle Allows to add a rectangle gt sharatne Allows to add a rhombus Extended is Polygon Allows to add a polygon v gt
16. E Text a E ou an edit them olof them Link URL even insert images Al Font Tahoma Plain 11 g A Font color E 0 0 0 i Background color C 255 255 255 Z i Text margin 0 0 0 0 Horizontal alignment Left Vertical alignment Top S Horizontal text position Center Vertical text position re Center 250 1 1 1 1 5 a Objects deleted 12 01 18 a Objects created 12 01 36 af Objects properties edited 12 06 24 a 8 a Objects resized 12 06 33 8 a Objects resized 12 06 36 a Objects resized 12 06 39 a Objects resized 12 06 50 8 a Objects properties edited 12 06 57 S gt Objects properties edited 12 07 01 E New page Figure 70 Modifying text on edit area 2007 2011 ALEE Software GUI Machine 1 5 8 page 94 of 236 GUI Machine User s Manual The font of the text can be changed with the help of the standard key shortcuts gt Ctrl I italic gt Ctrl B bold gt Ctrl U underlined HTML code After editing the text in the HTML editor you can view the automatically generating HTML code in the appropriate tab gt HTML Text editing CVE HIM citer EP T 2 lt head gt 3 lt head gt 5 6 body gt T lt p gt lt font face Archangelsk gt In lt font gt lt font color ff335fF gt this lt font gt lt i gt window lt i gt lt span style background color fff B lt
17. Figure35 Text format blocked 3 3 2 3 The aligning of the objects To align the objects select the item Edit Align objects in the main menu on ol Horizontal alignment These tools allow to align objects horizontally to the left to the right or to the center Select the objects and press click on the proper button cal Hah mos ileal ae ee I eM ee ee l l M l O 1 E Ei i E E E I E E m i E E E TTP 7 if ir 2 a 2 z 2 r l l i i E i E E I N I EE I E E E l E E aa e 3 b Pop a an 3 1 i I I B l f 1 ee ee ee Bee Bees EB fe Ee oo 8 8 Figure 36 Horizontal alignment of objects il at Vertical alignment These tools allow to align objects to the left to the center and to the bottom Select the objects and click on the proper button pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 41 of 236 GUI Machine User s Manual di en A Se e e i amp iO e e ee p f i a E 3 E i l 2 3 gt i 2 E au E a el s a el See Pe ee Beene BK SS Pee ee Beene BK A ll e me ee ee aM ww BT EB ESE TT ST 9 eee eee eee Bm KH eI _ 1 1 _ s gt 1 a 2 se 3 8 gt 4 fo 2 au a _ 5 _ i p m E See 1m m m m m a m i i E L mr a eel
18. GUI Machine User s Manual 3 Rectangle 4 Losange 5 Rhombus 2 Extended 6 Polygon 3 3 6 Vaadin menu 4 File E Edit amp 3 Standard E3 Extended gb Shapes gt Vaadin H Tools and Frames i Help __ Button _ Tabbed pane O Field HTML editor Date field m Progress bar List __ Window D Toggle Password Calendar F Combobox ie Tree T Text area LP Slider EF Table Buttons Layout Text Date Compound Windows Figure 45 The Vaadin menu The Vaadin menu includes the following items Buttons Layout Text Date Compound Window oS a ee 3 3 7 Tools and Frames menu The Tools and Frames menu is shown on the figure below B ch m m Ol c amp a 6 E A B E Edit Area zoom 100 i Bi pees y m in He He Lica BE bay C A amp E PE a AAAA AAKS ABAAA AAAA ANARE AS Area settings Frames settings Tools Zoom Figure 46 The Tools and Frames menu It includes the following items Area settings Frames settings Tools Zoom a ie Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 46 of 236 GUI Machine User s Manual If a tool is available its icon is highlighted The description of the interfaces of all tools is given in section Tools 3 3 7 1 The display of actions ae Hide display actions on the edit area Each action is designated by a blue arrow directed from the object defining the event towards the object of the action The button
19. allows to display and to hide actions on the edit area Hiding the actions may be useful when for instance the objects are connected by a great number of actions and their visualization makes difficulties in the perception of the interface If it is necessary to define the actions the objects are connected by it is sufficient to display the actions again 3 3 7 2 Objects view customization cc Display the borders This button allows to display the borders of the area occupied by the object The borders are marked by the black dotted line The function may be useful when working with objects whose border is implicit Text Label Text Label Figure 47 The borders are not Figure 48 The borders are displayed displayed x 2007 2011 ALEE Software GUI Machine 1 5 8 page 47 of 236 GUI Machine User s Manual 3 3 8 The Help Menu The Help menu is shown on the figure below E3 Extended E Shapes gt Vaadin Tools and frames w Help Fie E Edt 4 amp 8 Standard L 3 F i 2 User el Tip of the day GUI Machine site ALEE Software site About program Send us an e mail Visit our forum Help About Leave feedback Figure 49 The Help Menu It includes the following items User s Manual Tip of the day GUI Machine site ALEE Software site About the programs Send us an e mail GUI Machine forum oe a ee ee an 2007 2011 ALEE Software GUI Machine 1 5 8 page 48 of 236 GUI Machine User s Manual 3 4 E
20. gt the Images panel gt the Settings panel gt the workspace re 2007 2011 ALEE Software GUI Machine 1 5 8 page 193 of 236 GUI Machine User s Manual The workspace The workspace is a snapshot of the part of the edit area occupied by objects The part not containing objects is not displayed You can navigate the snapshot in one of the following ways gt by pressing the middle mouse button gt by holding pressing the left mouse button and holding the Space key gt by pressing the arrow keys and Ctrl Home Ctrl End The blue box on the workspace displays the borders of the snapshot It is possible to move the box by pressing the left mouse button and to resize it The area outside the box is covered by the semitransparent layer The degree of opacity of this level can be configured If there are several snapshots on the workspace each of them is displayed in a box The box of every snapshot can be modified The first snapshot is made automatically at the launch of the tool Its box outlines the region occupied by all objects The image panel The tools of the panel are described in the table below Table 35 The tools of the Image panel Button Function lal Add image Add smart image iz Deletee selected image oa Delete all images The list of snapshots is displayed under the toolbar To rename a snapshot double click ob it and enter the new name in the window that will open
21. lt Different colors Figure 172 Selecting the next object for preview 2007 2011 ALEE Software GUI Machine 1 5 8 page 191 of 236 GUI Machine User s Manual 7 2 Export tools 7 2 1 Exporting prototypes Prototypes can be exported and launched as fully functional applications Select File Export prototype in the main menu The following window should open Export prototype Save directory C Program Files Alee Gui Machine temp GD Fefm0 Adek6 0123I iA4r3 ID Preview settings J Main preview object W None selected Fj Allow to preview all selected launchable objects C Allow to preview all objects Do not show GUI Machine Viewer Export settings ES Prototype versions AY Windows x32 GUI_Machine_project_Windows_x32 AY Windows x64 E GUI_Machine_project_Windows_x64 A Linux x32 0 GUI_Machine_project_Linux_x32 A Linux x64 ib GUI_Machine_project_Linux_x64 a Mac ih GUI_Machine_project_Mac Figure 173 Settings for exporting prototypes Specify the folder in which you would like to save the prototype in the field Save directory Configure the settings for the preview of the prototype You can select any of the objects included in the prototype as the main launchable object Select the operating system under which the prototype will be launched in Export settings You can select several operating systems at once Press the Export now button The following window should appear Figure 174 The progress
22. options are available Center Left Right Horizontal alignment Allows to align the content vertically Three options are available Center Left Right Vertical alignment 5 Pav A 2007 2011 ALEE Software GUI Machine 1 5 8 page 73 of 236 GUI Machine User s Manual 4 2 1 4 Properties for separators Table 7 Properties for separators Icon Property Description Properties for separators Allows to position the separator horizontally or it Orientation vertically Allows to select the backgroung color for Pe Background color separators Unlocked Allows to lock unlock the object a 4 2 1 5 Properties for layouts Table 8 Properties for layouts Icon Property Description Properties for layouts This property shows the number of objects linked to the layour and cannot be edited iil Linked objects This property shows the number of columns and Columns rows rows in the layout and cannot be edited d Allows to change the border color Sas eden CMM eore Allow to set the background color Allows to display the layout object when it is GE Update content dynamically i l RF used in another interface by means of an action or a placeholder Allows to display the border of a dynamic layout Eo Show borders as when previewing die Border width Allows to set up the width of borders rar 2007
23. 126 Figure 106 Type of the size of the layout Cells scsessesessssssessessssesesssssssesesssesssesessesesessesessesesecseseesesusseseessseeseseensaes 127 Figure 107 Identification Of rows and COLUMNS cecsessessssessessssessssessessssssesecsssessesessessesesssseesesussesseseesesussesesseeseseseseseaeseeeees 128 Figure 108 Setting the size of layout 0 INC Seger ects sccm asec eases puget acerepes se eases oes cneasccnouseieetocaruri ces seasteeteceeg ep 128 Figure 109 Stretching the object over two layout CellS sssessssssessssessssssssssssesessesssessssessesssesssessesssesssessesesesrseseseess 129 Figure 110 Inserting an object in two layout CelIS ec esessessssessssessssesessesesecsesesneseseeseseesesesesesessesesseseseseeeeseseeeeseeeseees 129 Figure 111 An error occuring at inserting an object into a dynamic laAYOUTL ee ecesesseseeessesecessesesesseseseetsssesees 129 Figure 112 Changing the background of layout CelIS ee ecessessesssssessesesseesesessessssensseesesessesessesseseeseeeeseeneseecesenseeteeees 130 Figure 113 Selecting cells to change the DackQround cssesssssessssesssssssessssessseessssssesessessssesssessesessesssessssesesssseseseeses 130 Figure 114 Background Settings for layout CelIS esssesssssssssesssssssessssessssscssssssessesessessesessesscsssessessssessesecsesseseseesaceeaeees 131 PIOUS 115 Selecting Ol Oesrtsesenscnacecsasy riie EENES NaS TE ROTE tacit EEE EAE arei 131 RALE ETa p E A A E E E A E E E A
24. 64 Bit Server VM OS version 6 1 Service Pack 1 Vendor Sun Microsystems Inc Architecture amda 2 Development and testing Application development Garin Mikle lt mqgarin alee com gt Livotov Dmitry lt dlivotov alee com gt Graphics and icons Alena Kim lt akim alee com gt Testing Rustem Gayfutdinov lt rg alee com gt Mariya Wwanova lt mivanova alee com gt Kirill Kozlov lt kkozlov alee com gt Alee Software 1997 2011 All rights reserved Figure 209 Information about the program In the window shown on the figure above the following information is displayed in the tab General gt gt gt gt gt information about the operating system the version of JVM Java Virtual Machine GUI Machine official site the participants of the projects and their e mail addresses o developers o testers o designers the company that owns the license In the tab Agreement the text of the license agreement is displayed In the tab Third party software the information about the software of other developers used in GUI Machine is presented pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 225 of 236 GUI Machine User s Manual 15 Feedback To contact the developers select Help Send us an e mail The following window will open Fill the form to send us an e mail GUI Machine version GUI Machine v1 5 6 build 17697 Release License number 3dce61F 1Fdf 4 cd 85e4 97c24c59
25. 8 page 151 of 236 GUI Machine User s Manual Application settings Select the item File Application settings in the context menu The following window will open SE Application settings Jk App ng The language will be changed only after application restart 4 Java virtual machine settings GUI Minimum available memory Xms 256 Mb MACHINE Maximum available memory Xmx 512 Mb New JVM settings will take effect only after application restart H Save settings General Save edited images Always ask w settings W Autosave project Save project every 10 ie Connection settings _ Use proxy Address Exceptions localhost local Login Password Figure 138 Application settings By clicking on the icons you can select different types of settings General settings Visual settings Search settings Preview settings Component settings e 2007 2011 ALEE Software GUI Machine 1 5 8 page 152 of 236 GUI Machine User s Manual General settings In this window fig 138 you can edit the following parameters Application language English Russian Minimum available memory Maximum available memory Settings for saving edited images Always ask Always into a separate file Always into the same file Setting for autosaving the project Time intervals for autosaving 7 Proxy settings address exceptions login password w AN a A i pan 2007 2011 ALEE Software G
26. A E N A E E E A ON E Tare nese 101 7A PORT TINS EAO an A E E E E E E E A E E E EA EES 102 Aa VN VON a E E EE E A E A EE EE E 103 A EE lt 1 8 0 e E E E E E S Sae ere ve Tr re ent 103 IY iT NMI OO eane ase egenets en truce etd E EE E E E E 104 Ae ee CMUM OPA VV SUMS cece cere carat ee eens ecco acces cute otaaet doe E sate cg ommtineciteaacoss 105 TD vA MN ON gets settee cece da tae chee senna des ak gat E cp cans E A EA I oe E A PE anced ats A EN 108 A2 2 10 Selecting IMa 0 c geemrmmmeermenenrtere es teereprir rer eremmre crite etre auerer erent veContecl tt rienerarre wri tecrentr daddi iiaa kaiia iiai aaa iesene areri 110 A MEPIS E T A E A EA E EE E 112 4 3 1 Tools for working with lAYErS ce ceessssessssessssessssessssesecsesessesessssessssesussesussesussessssesessssessssecsssesussesesseeseseseessseessseseeseseseaeeseeseseaess 114 AAE a E E A E AE 116 A EA a E N E E E ic vtvausenendeeesdsancse 119 4 5 1 Importing exporting templateS s sssesssessoessoosssesssessseesstsssessseesseesseesssesssesssesssessstosstosseosssessensssesssrnsssosseosstosseossrossresessesessese 120 5 WORKING IN GUI MOC HINE casecczsasessecesctaest ci nsseeccceuessessncescssssscesiesnesnceccasacceascsscecassseleassessasta cases covesauese ANONN Eau R TEER 121 5 1 GENERALISED o oo ssscssssersesecsssessersesessessesersesocsescssersosavsessotsnseusessesssorseuseacssersesesacseetorsesassessseorseuscssessescestsstses 121 5 2 WORKING WITH STATIC fe eee 1
27. Combobox oe B Slider gi List CO M Figure 64 Vaadin menu Figure 65 The Shapes menu Components are represented by leaf nodes of the tree They are united in groups in accordance with their function forming terminal nodes You can change the way of displaying components by a right button click at any place ani 2007 2011 ALEE Software GUI Machine 1 5 8 page 61 of 236 GUI Machine User s Manual amp Components Hx amp Standard mEnE E ATAT ww Siti HOr amp amp y Extended Boaowka Shapes OHOoHO sSs gt Vaadin HAMA a Ae SS Figure 66 The compact view of the components panel To display the components panel select Tools and Frames Frame Settings and click the icon Components Fig 67 The tool is switched on by default DoE Components Frames settings Figure 67 Swiching the components tool on off This tool is designed for adding components on the edit area There are two ways to add a component on the edit area gt by a double click gt by dragging it with the mouse All the components are described in table below a 2007 2011 ALEE Software GUI Machine 1 5 8 page 62 of 236 GUI Machine User s Manual Table 2 Components Icon Component Function Standard H E Buttons Buttons A user interface element providing the user a simple _ Button way to trigger an event A button with the additional possibi
28. E E 132 Figure It AY oe SY oes dae an MMag Sirina aE A A ATN Eaa EE EEE errr nr eee ee ener 132 Figure 118 Selecting the image placement eeseseseessseessseesssesssseesseessstesseessseesseeosssrossresssresseessstesseeosseeossresssresstesssersseessens 133 Figure 119 Placing an image as a background IMAGE cscssessesessessstessseesssessssssessssessssesesessesessesssesssseesessseeseneaeseseaeerees 133 Figure 120 Fitting to image SIZE sesiiisssesreirnsereeneen reana en raea aa eere a a a aa Sena onana Teaio s ra hpp en Esaa raaa 134 Foure 121 Fang tO tll mMage SiZ Epea ae oaa arar eee rer eee eer 134 Figure 122 Settings for the alpha layer cesscssssssssssssssessssssssssesssssssssssssessesessesesssssssucsesesssssesessesessssesseesesesseseseseseseasasesasess 135 Figure 123 Settings for the background of CONS sccoiereczeznscseeseecoiesshscahicsisctestauestctetsseadontehenshd cahicvesiansioussictadsestiaieoeieadiceeneees 136 Figure 124 Previewing a WAY OU cscs ca ct cecccsnesctt caked ccsecatnactigc cee sa gephee dncasece tant oaiae EGOE OE aaa aaee Laaa 137 Figure 125 Changing the background of a single Cell ssssesssssssessssessesscssssescssssesessssessesesessesessesesseseessesseesseseeeeess 137 Figure 126 Clearing the background Of CelIS ce cesessesssseseseesessssessesessesscsecsesessescsesussecseseesesssecsesessesesseeussecseeesseeeeneeeees 138 a 2007 2011 ALEE Software GUI Machine 1 5 8 page 234 of 236 GUI
29. Frames Frames Settings Layers The hierarchy of objects is represented as a tree structure fall Layers i EEC JButton2 Font color and style from non HTML source _ JButtoni lt Words wrapping due to HTML content gt E C JButton1 Text at top _ Button Large icon text gap i I CO TToggleButton1 Disabled and selected i C JButton1 lt Disabled with simple HTML gt Button1 Disabled icon gt JButton1 Disabled i CD JroggleButton1 Different icon and text on selection Ef CO JToggleButton1 and not DE CD JToggleButton1 Selected _ Button lt Different colors and different fonts by HTML gt ECO JButtoni Text at bottom l ECO Buttoni lt Some extended HTML data 1 5ome 2 Si gt ECO Buttoni lt With simple HTML c gt i JButton1 Text at left __ IButtoni On press change undecorated _ Button On press change ECO JButton1 Iconed ECO JButton1 Simple Figure 94 Layers The tree of objects Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 112 of 236 GUI Machine User s Manual Th tree of objects is created on the basis of connections between them Actions and events are also included in the tree structure The tree allows to visualize the structure of the interface The tree like structure is used for the representation of interfaces the most often The fashion of the representation of the objects can be changed Approach the cursor
30. Manual 5 3 Working with dynamic layouts 5 3 1 Ruling Ruling allows to divide a dynamic layout into several rectangle cells Select the layout and press the button H gt Ifyou press the button under the layout a column is added gt Ifyou press the button on the right of the layout a row is added To remove a column or a row press the button H NB when removing a row or a columns all objects inside it are also removed a amp a Lo0 pit 100g E g E B re ait ie ae T A Enma nE 17277 in m l m amp i e 1 of 2 ja 8 a E Only 1 object I j COra TERR E j CO a E fy o 3 4 E En o 3 E a O a R C i UF i E E ti i E B ee t an Gi MEN E Figure 105 Ruling a layout 5 3 2 The size of cells The size of each cell can be set by moving the slider gt in pixels O gt fit to the optimal size of an object inserted into a layout cell Preferred size D gt in percentage of the free layout space The size indicated in pixels is fixed Changes brought to the layout do not cause resizing such zones The size of the zone set as preferred size becomes equal to that of the object inserted into the appropriate cell The optimal size is the size of the object at which its image text etc are seen The size of the zone indicated during the editing of the layout will be ignored The size of the zone set as the preferred size can be chan
31. The context menu for panels sissies tesa ceca sent este eee see eae 33 Figure 27 Jointing panels sessione EE a E Ea E EEEa 34 Foure 2e JONTA Dan IS aane E E E E EEE EE N 35 Foure 29 MOn PANE NS ssaa a TE T A A 36 POU 0 TETA A E E E E E EAE OE IEE EEE AEE 38 se CS Lee aa anaE E E T 38 FMS 2 Ye E eE E E E E E E A A E E E 39 FELIS s eig O E E E E A EEE 40 Figure J4 TO E 5 E EE ee EN E E 40 2007 2011 ALEE Software GUI Machine 1 5 8 page 232 of 236 GUI Machine User s Manual FUMES Sy Ta Oa O kO AE AEE E 41 Foure 30 AHonzontalalionment OT GD CCS sissoo sae aeeai raei EE eeuteeseeoenomsatieannneaa aeaareeni ies 41 Figure 37 Vertical alignment Of objectS se sssossseoessessssessseessseonssesnssrnssrenssrosseossseensstensseosstonssrosneoosstensstenssenssrensenstosensensenses 42 Poea o lec onora O E E E E NS 42 Figure 39 Matc hingine WIC 1 OO 1S reae e Ea a aise a eee 43 Figure 40 Matching the height Of ODJjeCtS sessssssssssessssssessssssessssessssssssssssscsssusssesessssssecssssssessssessesessesnsseseseseseseseeeseesees 43 Figure 41 Placement Settings sssrin aeara Ear eatea Eeen RERE EEE AAE E EE ae REE E ESE EEA EEE ae RERA ater 44 HUGA e anara MOT T E E EA E 44 ETE eNA e a a a O E E E E E E ne ee T eee ee eee 45 PIQUA The Shapes MENU sereni nE ne a e s ienaa aE A a aSa aaa e ES REENEN AA sea aai 45 Fured TMe Vaadin TNU aA E E E AAE EEEE 46 Honre Te TOO ana Frames MONU sensi a R T E E S eee 46 Figure 49 TRE H
32. To display other objects click on dots x 2007 2011 ALEE Software GUI Machine 1 5 8 page 202 of 236 GUI Machine User s Manual The following window will open ER JRadioButton3 Text be JCheckBox4 Text EE Gi JLabel2 Text H Eaka IPasswordField2 Text ERTI JTextField Text H 25 _ JPanel EG ClockObject2 H ER we ICheckBox3 Text 23 IRadioButton2 Text t is a StaticLayouts ow E Layouts OTM Ha Figure 183 Objects under mouse cursor If the objects are linked to each other and form a tree they are displayed as tree like structure GF 7 JrextField2 Text j FF IMenuBar6 ECO Button10 Text ECO Buttons Text n EC JButtons Text ECO JButton Text ECO Button Text ECO Buttons Text ECO Button4 Text i EC Eutton3 Text Figure 184 The tree of objects under the mouse cursor en 2007 2011 ALEE Software GUI Machine 1 5 8 page 203 of 236 GUI Machine User s Manual For some types of objects the additional items are added to the context menu Additional items for menus Delete menu File Add menu before File Add menu after File ioe Choose popup for menu File Figure 185 Additional item for menus The detailed description of the additional items is given in the table below Table 37 Additional items of the context menu for menus Icon Item Description Delete menu lt name gt Allo
33. after one of the object properties 1 Text 2 Text on selection 3 Border header 4 Tooltip text 5 The name of the object In the list of properties their priority is taken into consideration If all properties are configured the snapshot is name after the text of the object If the value of the Text property is empty the object is named after the Text on selection and so on Saving images After creating the snapshot press the Save button in the lower right corner Select the location for saving the snapshots in the window that will open and press the Save button If the names of the files in the selected directory coincide with those of the created screenshots the following window will open P File conflict p File Simple png already exists in choosen directory Choose desired action Replace file File C Program Files Alee Gui Machine demo Demo Project Simple png will be overwritten File will be saved with name Simple 1 png Skip this file File will not be changed __ Do same action for all conflicts Figure 179 File conflict You can do the following gt Replace the existing file the existing file will be replaced by the new one gt Save both files the both files will be saved The new snapshot will be saved with the new name gt Skip this file the old file will remain unchanged and the new one will not be saved Select the checkb
34. an image and it faster and more convenient than those described above gt click on an existing image or on an object containing images gt copy the value of the Image property gt insert it into the Image property of the necessary object How to create a pop up window Add a window on the edit area Disable the property Decorated and enable the property Close on focus loss Despite of the fact that it is displayed as a decorated window on the edit area it will look like a pop up window and will be closed on focus loss when launched Example a pop up window appears when pressing the button August 2010 EES 1 42 3 4 5 6 7 8 9 10 14 12 13 14 15 17 18 19 2 77 E eaennnnnepenennenenonneess 22 23 24 J _ gt 29 30 31 _ ee 25 Show calendar 4 August 2010 e H SUN MON TUE WED THU FRI SAT 1 2 3 4 5 6 T 9 10 11 12 13 414 15 WEJ 17 18 19 20 7 22 23 24 25 26 X 28 29 30 31 Figure 129 A pop up window in preview NB the property Decorated can be disabled for standard windows only With Vaadin windows the operation described above is impossible x 2007 2011 ALEE Software GUI Machine 1 5 8 page 141 of 236 GUI Machine User s Manual Grouping objects Objects like radio buttons and toggle buttons can be united in groups Select the objects you would like to unite and enter the number of the group into the property Grouping During the preview these objects will work
35. as a group This means that gt only one object from the group can be in the selected state gt if only one objects in the group is selected the other ones become deselected How to create single line and multiline texts Sometimes it is necessary to make the text in a label single line or multiline If you want to locate the text on several lines open the Text property and select the tab HTML editor HTML texts are always multiline If you want to make multiline text single line go to the tab HTML code and tag it lt nobr gt lt nobr gt Aleksandr Sergeevich j Pushkin F a oo lt lt cm E ee eee eee eee i Figure 130 Multiline and single line texts g You can use all HTML tags in the tab HTML code x 2007 2011 ALEE Software GUI Machine 1 5 8 page 142 of 236 GUI Machine User s Manual Operations with images on the edit area On images located on the edit area the following operations can be performed gt increasing or decreasing the size of the object to the size of the image gt rotating the image around its center These operations are performed by pressing the buttons above the image E E E 8 E E E T Ho oy E a ws jes te ed a E E 4 iiaii es ELES Figure 131 Operations with imae By double clicking the the rotation angle is set as 0 How to set the border for an object a region You can use a Panel as a border for
36. as the width and the height can be configured in two ways gt inexact number of pixels gt with special parameters The coordinates in exact number of pixels can be entered as follows gt 0 0 o X Y for moving the window to the left upper corner of the screen o width height for reducing the size of the window to smallest possible one 2007 2011 ALEE Software GUI Machine 1 5 8 page 181 of 236 GUI Machine User s Manual gt 1 1 in this case the action will not be moved or resized gt any integer number for the indication of the position or the size of the window When configuring the coordinates with special parametes you can use the following values x n y a coordinates of the position of the window relative to the upper left point of the screen width n height the width and the height of the window screen width n screen height he width and the height of the screen YYY It is also possible to use the following mathematical operations addition substraction multiplication division VV VV When you right click on the field the context menu with all settings will appear Click on the necessary item to insert it in the field being edited Examples gt X x width Y y height moving window rightwards and downwards from the current position fs Figure 158 Moving the window rightwards and downwards gt Width Width Height Width makes th
37. cells gt open the context menu of the layout gt select the item Change cells background a Change selected cell background E Change cells background H Clear cells background Figure 112 Changing the background of layout cells gt select the cells keeping the left button of the mouse pressed A amp amp 3go 3go 3 o o i i es fa i 1 748 L l l ex Es o S 8 S B S Figure 113 Selecting cells to change the background Release the mouse button The following window should open pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 130 of 236 GUI Machine User s Manual ol mE current H 0 A To z 100 255 255 255 E FFFFFF E Figure 114 Background settings for layout cells There are the following options for the background of the cells gt Color gt Gradient gt Image gt Alpha layer Select the necessary tab When selecting the tab Color the cells will be painted with solid color Background settings 1 259 zo 255 FFFFFF Figure 115 Selecting color 2007 2011 ALEE Software GUI Machine 1 5 8 page 131 of 236 GUI Machine User s Manual When selecting the item Gradient the selected cells will be flooded with gradient Background settings Figure 116 Gradient You can select the type of the gradient linear or radial in the dropdown menu Type In the dropdown menu Repeat you can define whether the gradient will repeat The
38. elements Displays images for selected list elements ag Allows to change orientation for the elements of Orientation the list 2007 2011 ALEE Software GUI Machine 1 5 8 page 79 of 236 GUI Machine User s Manual psy Visible range Allows to fix the visible range of list elements Displays the selected element Allows to select Bi Selected element the element to be displayed in the field Allows to choose the color for the font of the Selection fore ground J selected list elements Allows to choose the background for the selected Selection background list elements 4 2 1 13 Properties for the spinner Table 16 Properties for the spinner Properties for the spinner T Current value AE Allows to adjust the current value of the spinner Allows to select the type of the value Number or HE Value type Date 4 2 1 14 Properties for the slider Table 17 Properties for the slider Properties for the slider paas Small division Adjusts the size of small scale divisions ay Coarse division Sets the size of coarse scale divisions 2007 2011 ALEE Software GUI Machine 1 5 8 page 80 of 236 GUI Machine User s Manual ka Switches on off the display of divisions value Show values Allows to display the small and coarse divisions basi Show ticks of the scale with intervals equal to the sizes of sm
39. folder within the selected directory select the check box Select subdirectory Press Create to create the new project Open recent project To open the last project you worked with select Open recent project The last opened project will be loaded x 2007 2011 ALEE Software GUI Machine 1 5 8 page 26 of 236 GUI Machine User s Manual Loading a project To load one of previously created projects select Load project The standard file selection menu should appear di Justinmind dl CChINKH JA Mysbika di archive3plugins dJi New GUI Machine project di configprops E VsoeGpaxenna di datastorage di preview di gimp 2 6 di PsiData di java di resources di thumbnails dl CoxpaHeHHble HTpbI di com alee archives nichclient di screenshots KOHTAKThI B Nock BM Pabounti cton a Bugeo E OKY MEHTbI z GUI Machine project il Sarpy3ka F Me6paHHoe GUI Machine project File name ul Machine project qui Files of type GUI Machine project gui gdv gar Figure 20 Opening a project Select the project file and press Open Projects can also be loaded by dragging them to the edit area 2007 2011 ALEE Software GUI Machine 1 5 8 page 27 of 236 GUI Machine User s Manual Demo projects l o GUI MACHINE Dovricad fom st g Demo projects ot projects on a Web Q Connection settings Figure 21 Selecting a demo project to be loaded Select the necess
40. icon Connector object Audio player x x x x x There are several ways to preview the selected object gt by opening the context menu of the object and selecting the Preview item Preview F5 4o Add action There is no events on object here is no actions on object La Edit fe Move object to top layer Figure 165 Launching preview in the context menu gt By pressing the button in the upper toolbar 2007 2011 ALEE Software GUI Machine 1 5 8 page 187 of 236 GUI Machine User s Manual D E i selected v Figure 166 The button for launching preview in the upper toolbar gt By pressing F5 If there are several objects on the edit area it is impossible to preview them all at the same time However the objects can be previewed separately File search File search d Files found vf Select Pp Cancel vf Select Pp Cancel ca He Figure 167 Preview of an object with different properties You can create the bookmark of the object for the quick launch Select the object and press the button amp in the upper toolbar Add preview object Add selected object to preview objects list on this page Figure 168 Creating a bookmark The bookmark will be added to the list To launch the preview select the necessary object from the dropdown list and press the button i To remove the bookmark select the object and press the button 2 To return to the default preview mode choose the it
41. of nonprintable symbols It can be changed and hidden The size of the grid is changed when changing the ruler settings It is possible to change the grid spacing and the area width To change the grid size select the item Tools and Frames Area Settings 3 4 1 3 Guidelines The guidelines as well as the grid allow to position the objects more exactly The guidelines are displayed as nonprintable blue lines on the edit area The guidelines can be added moved hidden and deleted They can also be fixed lest they moved by mistake The distance between the guidelines can be set ad libitum You can set any distance between the guidelines When moving any guideline is highlighted with red The guidelines work in the following way gt The selected objects are snapped to the guidelines when moving for 8 pixels from them To disable snapping the objects to guidelines select Tools and Frames Area Settings and Q click the icon if snap to guidelines Adding guidelines Guidelines can be added in the following way Double click the horizontal ruler to add a vertical guideline and the vertical rule to add a horizontal guideline Press the right mouse button when the cursor is on the vertical or on the horizontal ruler and move the cursor to the edit area in order to create the guidelines gt Press the left mouse button when the cursor is on the crossing of the rulers and move the cursor to the edit area to create guidelines Movin
42. of the export of the prototype After exporting the prototype is saved in the directory named after the operating system If you select several folders will be created The exported prototype can be previewed on any other computer It is not necessary to install GUI Machine or GUI Machine Viewer Fay the folder and launch the file designreviewer exe or designreviewer sh 2007 2011 ALEE Software GUI Machine 1 5 8 page 192 of 236 GUI Machine User s Manual 7 2 2 Exporting images The image export tool allows to make configurable screenshots of the edit area The tool is launched gt by selecting File Save images in the main menu gt by pressing Ctrl Q The following window will open Iii Buttons png I Simple png Et Jf Iconed png J On press change png On press change undecorate Ul Text at left png J With simple HTML c png IE Some extended HTML data Ut Text at bottom png II Different colors and differen it i Selected png iat J and not png Ii Different icon and text on se UE Disabled pnag 3 Ji Disabled icon png 10 Disabled with simple HTML pr Disabled and selected png gt Area shadowing arii jf iawn ij D 30 i00 Align left a Smart selection border spacing To 5 Let 5 Bottom 5 Right 5 E al Disabled _ E Disabled icon i a _2 I Figure 175 The preview of the edit area The main window of the tool can be divided into three parts
43. on type of objects and repeatable related to several types of objects events All event types are described in the table below Table 33 Types of events Icon Event Description l The action is performed when one of mouse Button click E bottons is clicked It can also be performed on pressing Space and Enter keys The action will be performed on gaining losing the focus by the selected object Settings H Focus gain focus loss gt Focus gain io gt Focus loss gt Changing focus state The action will be performed on changing the state of the object Check state change Settings yf gt Selected gt Unselected gt Opposite to the current The action will be performed on selecting an item in the list To indicate the item enter its number The numeration of items begins with 0 Settings gt 1 any item gt 0 the first item gt 1 the second item Item selection par 2007 2011 ALEE Software GUI Machine 1 5 8 page 165 of 236 GUI Machine User s Manual The action will be performed after the selected mouse event gt Mouse button click Left button 2 Mouse wheel _ Right button _ Any button gt Pressing mouse button 5 Left button 2 Mouse wheel 7 Right button 7 Any button gt Releasing mouse button 5 Left button baal Mouse event _ Mouse wheel _ Right button _ Any button gt Mouse enter into the
44. p gt lt font color 0066ff gt You can edit them font gt lt p gt S lt p gt lt font color FfT0066 gt Color them font gt lt p gt 10 lt prand even insert images lt p gt 11 lt p gt lt img border 0 src Elen 1 png gt lt p gt 12 lt body gt 13 Figure 71 HTML code You can edit the HTML code manually Switch to the HTML code tab and enter the necessary text In the HTML editor tab you can see how the texts looks like after the changes you made a 2007 2011 ALEE Software GUI Machine 1 5 8 page 95 of 236 GUI Machine User s Manual Text editor If you want to create a text without HTML formatting you can use the Text editor tools Texts previously edited in the HTML editor will be displayed as plain text In this window you can type texts You can edit them Color them and even insert images Figure 72 Text editor tab Texts created in this tab will not be HTML formated When editing text in the text editors do not wrap the words by pressing Enter If the text was a wrapped all lines will be merged in one 4 2 2 2 Image selection tool This tool allows to select an image gt from the file system gt from the previously used images 2007 2011 ALEE Software GUI Machine 1 5 8 page 96 of 236 GUI Machine User s Manual gt from screenshots gt from the set of icons gt from the images found by Google To open the image selection tool enter the object properies se
45. page 138 of 236 2007 2011 ALEE Software GUI Machine 1 5 8 GUI Machine User s Manual 5 4 Recommendations and examples Q Avoid situations when the size of a layout cell is equal to the minimal size of the object inserted into it In the Q If you cannot diminish a layout on the edit area check the zones whose size is indicated in percentage of the free layout space It is more than likely that one of these zones reached its minimal size Q If one of the zones whose size is indicated in percentage of the free layout space has reached its minimal size when adding a new cell to the layout the size of the layout will be increased by 10 pixels How to remove table headers To remove the header of a table disable the property Scroll bars Thus the borders of the table will also be removed Text 1 w Text 2 L Figure 127 A table without header Scroll bars Be attentive when using scroll bars On figure 128 you can see the layout with the disabled on the left and enabled on the right Scroll bars property If this property is disabled the layout looks as it is displayed on the edit area when previewed In the layout with scroll bars enabled the horizontal scroll bar lead to the increasement of the first column whose size was indicates in percentage of the free layout space Thus the images shifted to the right i Far A 2007 2011 ALEE Software GUI Machine 1 5 8 page 139 of 236 GUI Machine User s Manual Sometim
46. position of the elements of the table by pressing the buttons AJ and lt add images to the cells of the table by pressing the button remove images from the cells by pressing the button rename the columns of the table by double clicking on them permit prohibit the editing of the cells by selecting the appropriate checkbox select one of the following 6 tab types VV VV VV V o Text o Integer o Floating o Date o Boolean o Icon EE Table values editor 03 02 2011 1272 Figure 79 Table editor Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 102 of 236 GUI Machine User s Manual 4 2 2 5 Tree editor The tree editor allows to add and remove tree elements by pressing the buttons and change the level of elements by pressing the buttons O and move elements up and down by pressing the buttons and to add images to the tree elements by pressing the button a remove images by pressing the button rename the tree elements by double clicking on them VV VV VV Tree editor oleole eoo gE E Root Element 2 9 aa Element 1 1 Element 1 2 Flement 3 Figure 80 The tree editor 4 2 2 6 List editor The list editor allows to add and remove elements by pressing the buttons and to change the position of the elements by pressing buttins and to change the background of the elements of the list by pressing the buttons and amp r
47. range of the gradient can be set up by moving the slider located above the dropdown menu Set the necessary parameters and press Save button To use and image as the background for the layout cells select the tab Image Background settings Image placement As background image Horizontal alignment Center Vertical alignment Center 2007 2011 ALEE Software Figure 117 Selecting an image page 132 of 236 GUI Machine User s Manual Select the way of placing the image in the Image placement dropdown list gt As background image gt Fit to full object size gt Fit to image size As background image N Fit to image size Fit to full object size As background image Figure 118 Selecting the image placement If you select the option As background image the image will be set as background It will be multiply repeated without resizing Background settings Bg image C Users aemeljanov Desktop klen png Image placement lAs backgror Horizontal alignment Center Vertical alignment Center Background preview Figure 119 Placing an image as a background image If you select the option Fit to image size the image will be located in the center of the selected cells without resizing e 2007 2011 ALEE Software GUI Machine 1 5 8 page 133 of 236 GUI Machine User s Manual Background settings E Image Alpha layer Image placement Fit to i Horizontal alignment Center Vertical ali
48. road map hybrid A Map size Allows to set the size of the map in pixels Mab Zoom Allows to increase the map according to the P given scale Allows to select the format for the map PNG8 Map image format PNG32 JPEG compressed JPEG image GIF image Allows to fit the image it Orientation e to the image size e to the object size e as a background image a Scale l Horizontal and vertical scaling of the image 3 Rata E Allows to set the rotation angle for the image from 0 up to 359 rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 86 of 236 GUI Machine User s Manual Allows to align the object horizontally There are three possible options Left Right Center Horizontal alignment Allows to align the object vertically There are three possible options Left Right Center Vertical alignment 4 2 1 21 Properties for collapsible panes Table 24 Properties for collapsible panes Icon Property Description Properties for collapsible panes Allows to select the design of the collapsible pane AA ae e Dropdown list e Tree e Separator e Plain Allows to select the position of the pane There E Placement are four possible options Top Right Left Bottom A Emphasized Allows to emphasize the header of the pane Y Switches on off the ability of the pane to Expandable collapse expand Col
49. the appropriate button so that it be displayed correctly in Print Screen main window x 2007 2011 ALEE Software GUI Machine 1 5 8 page 221 of 236 GUI Machine User s Manual Available windows In the list of available windows the following elements are displayed gt nterfaces being previewed gt objects linked to the interfaces being previewed by means of actions NB gt interfaces not being previewed are displayed as disabled gt if you click on the interface being previewed it will be displayed atop all windows gt the screenshot of the interface being previewed is created when clicking upon it Making a screenshot When you press the Add screenshot button the main window of the instrument will be hidden and the interface being previewed will be covered by the semitransparent layer Figure 205 Making a screenshot The layer specifies the region of the screen that will be shot The layer can be moved by the corners and thus resized If you right click on the layer it will cover the content of the window Figure 206 A screenshot of window content Right click on the layer to return to the previous size xy 2007 2011 ALEE Software GUI Machine 1 5 8 page 222 of 236 GUI Machine User s Manual To make the screenshot the window covered by the layer press either button either the Print Screen key Enter the name of the new screenshot in the window that should open Figure 207 Entering
50. the name of the screenshot The window of the Print Screen tool will open The new screenshot will be added to the folder selected before making it After pressing the button the making of the screenshot will be canceled The window of the Print Screen tool will open If several interfaces are being previewed simultaneously and yoy want the semitransparent layer to be moved from one window to another do the following gt press the button gt click on the location to which you would like to move the layer The layer can be moved not only on the windows being previewed but also to the windows of GUI Machine tools or to the windows of the application itself For instance the layer can be moved to a stack of floating panels Figure 208 Covering a stack of floating panels with the semitransparent layer 2007 2011 ALEE Software GUI Machine 1 5 8 page 223 of 236 GUI Machine User s Manual All screenshots you make are saved to the directory of the project to the folder Screenshots we 2007 2011 ALEE Software GUI Machine 1 5 8 page 224 of 236 GUI Machine User s Manual 14 User Manual and Information To open this manual select Help User Manual in the main menu To see the information about the program select Help About program Application and OS information GUI Machine v1 5 3 http gui machine com build 0 Release 4 Java version 1 6 0_26 AY OS Windows 7 Wi Java HotSpoti Th
51. the object of the event gt press the button on the Layets panel Q Not all objects can become action targets or action triggers ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 159 of 236 GUI Machine User s Manual The following objects cannot perform the function of action triggers event objects x All shapes o Oval o Rectangle o Rhombus o Polygon x Placeholder The following objects cannot become action targets x All shapes o Oval o Rectangle o Rhombus o Polygon x Placeholder g One and the same object can be the action target and the action trigger at the same time The interface for adding actions is shown on the figure below e New Action __ Button a Dog D Button dick Object E None selected Select layout cells al Clear cells before insert Figure 143 Adding a new action 2007 2011 ALEE Software GUI Machine 1 5 8 page 160 of 236 GUI Machine User s Manual By default or actions are named as New Action The number of the action is indicated in brackets It is recommended to name the actions in accordance with their function It can make the orientation in projects containing multiple actions much easier In the Event settings field the event object is displayed You can change the event object by pressing the button sa The type of the event can be selected in the dropdown menu Choose object A L
52. to the Layers panel and press the right mouse button Show objects list Ctrl Alt L Set a5 main preview object Show actions Ascending Descending De not sort Sort by object layer Sort by object name Sort by object text property Sort by object type Figure 95 Context menu for the layers Select the item Show objects list The content of the panel will be displayed as shown below ERC JButtoni Align right E3 C Buttoni Align left _ JEutton Font color and style from non HTML source __ Buttoni lt Words wrapping due to HTML content gt 1st C Buttoni Text at top i IButtoni Large icon text gap a D JoggeButtoni Disabled and selected E Buttoni lt Disabled with simple HTML gt i C JButton1 Disabled icon it C Buttoni Disabled 2 O TroggleButton1 Different icon and text on selection i TreggleButton1 and not D JreggleButton1 Selected _ Buttoni lt Different colors and different fonts by HTML gt _ Button Text at bottom _ Buttoni lt Some extended HTML data 1 Some 2 Si gt IButton1 lt With simple HTML c gt _ Eutton1 Text at left F TRutoni On nress channe undecorated Figure 96 The list of objects 2007 2011 ALEE Software GUI Machine 1 5 8 page 113 of 236 GUI Machine User s Manual The names of the objects as well as those of the actions can be edited To rename an object or an action select it and press F2 Objects in the tree can be renamed
53. wait while Setup installs GUI Machine on your computer Alee Software 1997 2011 Figure 7 GUI Machine installation an 2007 2011 ALEE Software GUI Machine 1 5 8 page 14 of 236 GUI Machine User s Manual Completing the GUI Machine Setup Wizard Setup has finished installing GUI Machine on your computer The application may be launched by selecting the installed icons Click Finish to exit Setup Figure 8 Installation completed When the installation is completed the dialog box shown on figure 8 will appear Press Finish to quit the setup wizard Select the checkbox Run GUI Machine to launch the application right after pressing Finish re 2007 2011 ALEE Software GUI Machine 1 5 8 page 15 of 236 GUI Machine User s Manual 2 3 Licensing 2 3 1 Online licensing If your version of GUI Machine is not registered after the fist launch of the program the dialog of activation should appear on the screen Figure 9 The program will offer you to visit the official site of GUI Machine in order to buy the license or to enter the license key GUI Machine activation A o GUI MACHINE You can either visit our site to purchase license s http igui machine com Or enter already recieved key on next page You can press Next to proceed there p Q Connection settings k Figure 9 The activation of GUI Machine an 2007 2011 ALEE Software GUI Machine 1 5 8 page 16 of 236
54. y focus loss HF Pack height Allows to shrink the window by height when viewing Pack width Allows to shrink the window by width when viewing A Font Allows to select the style and the size of the font A Font color Allows to select the font color jns Background color Allows to select background color If this property is disabled the window can be closed by pressing Shift F4 or by stopping the preview of all interfaces in the main menu 4 2 1 19 Properties for menus Table 22 Properties for menus Icon Property Description Properties for menus Displays the number of menu items and Menu settings T 9 launches the menu editor rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 85 of 236 GUI Machine User s Manual Displays the number of pop up menu items and launches the menu editor il Pop up menu settings A Font Allows to select the style and the size of the font A Font color Allows to select the font color sa Background color Allows to select background color 4 2 1 20 Properties for Google maps Table 23 Properties for Google maps Icon Property Description Properties for Google maps Allows to mark with keywords the selected geographical points on the map Map location keywords Allows to select the type of the map road map Map type satellite map physical relief map satellite and
55. z Disabled with simple HTML HTML content Different colors AMA different fonts by HTML Font color and style from non HTML source a sds sain Standart Layout Standart Text Standart Condition Standart Compound Standart Windows Standart Menu Extended Layout Extended Compound Forms Simple Figure 25 The workspace of GUI Machine The Main Menu is located at the top of the application and includes eight root level items The Edit Area displays the current project The Layers panel allows to structure the objects used in the project The Components palette displays components which can be used in work The panel Object Properties displays the properties of a selected object or that of a selected group of objects on Edit Area The Templates panel shows templates used in the current project The History panel contains records concerning all manipulations made during the work par 2007 2011 ALEE Software GUI Machine 1 5 8 page 32 of 236 VV VV V Y Y GUI Machine User s Manual 3 2 Workspace Customization It is possible to move the tools to change their size and close them if necessary with the help of the mouse 3 2 1 Hide show tools To enlarge the space on the edit area the tools can be hidden The tools can be shown hidden in the two following ways gt by selecting the item Tools and Frames Hide all frames in the main menu g
56. 1 5 710_html_7364da53 15711_html14cb87e2 2 15 712_html75cecOla M 1 5 715_html_5cbf2499 Bi 1 5 710_html_9593 26 Ma 1 5 711_html219af6c8 f 15 712 html allb34 Mis 1 5 715_html_m185a5b5 1 5 710_html_975e736 1 5 711_htmi_38721a90 Bs 15 712 htm f53478e M 1 5 715_htrnl_m217b922 1 5 710_html_ml7ebdab2 W 1 5 711_html_53f0071a M 1 5 712_html_m164c035f M 1 5 715_html_m3a582d 1 5 710_html_m19650200 W 1 5 711_html_617c43ad M 1 5 712_html_m220babdc M 1 5 715_html_m7c5d7ae 1 5 710_html_mle0c757c W 1 5 711_html_m19e12d5a E 1 5 712_html_m7653389b W 1 5 71_html_19fe9792 1 5 710_html_m23e79ec6 W 1 5 711_html_mlfa2b3a4 Ma 1 5 712_html_m7c2df505 M 1 5 71_html_m30e695e Files of type Images jpeg jpe jpg gif png ico Q Connection settings Figure 73 Selecting an image from the file system gt From used before the window displaying the thumbnails of previously used images 2007 2011 ALEE Software GUI Machine 1 5 8 page 97 of 236 GUI Machine User s Manual 15 Choose image aes 0_65c50_600e33e 0 _65c50_600ea3e6 1 5 712_html_75 alee _logo 3 png anchor png arrow branch png f Z arrow join png arrow redo png arrow refresh png arrow _rotate_antic DSC00331 JPG klen 1 pnq 7 klen i2 png ToDo NW 43526 Ww Connection settings Figure 74 Selecting an image from the previously used ones By selecting de
57. 11 ALEE Software GUI Machine 1 5 8 page 53 of 236 GUI Machine User s Manual OE C sedete v Figure 54 Tools for preview For the detailed description of the tools will be given in furhter items 3 4 2 1 Settings for the edit area The edit area can also be customized from the main menu 3 4 2 2 Print settings al File Print pages In this item you can change such settings as the type of the printer the number of copies the print range NpwHtep Himn Kyocera FS4000DN KX CocToAHHe Toto Tun Kyocera FS 4A0000N KX Mecto 10 10 9 11 KommMeHTapiat E Neyat e arin Danasa nesam Kon Bce Yucno Konmit 4 22 33 O Capaxmupi c 1 no 9999 Bb DENeHHbIA parMenT _ Paso6pat no komam Omera Figure 55 Print Settings File Show pages m 2007 2011 ALEE Software GUI Machine 1 5 8 page 54 of 236 GUI Machine User s Manual This item allows to display the borders of the printable pages and areas The borders of pages are marked by red lines ox o 50 400 450 200 260 300 350 4 00 450 5 H m r mm E m D mm mm C a Ww La Co CI m co Ww m a co T m Wi x mm m r EE Figure 56 The outline of printable pages pe L il e e ey File Print Settings Pa After selecting this option you should see the following window appear ar 2007
58. 153 Settings for opening thie WING OW s sssrecessnenin nn E NNR 177 Fgu re 154 settings Tor closing WNA ON ssis E E Oa 177 Figure 155 A window under the ODJeCt eeesessssessessssesessssssessessssesssuesesessessssesscuesesussessessssenesssscaesseseseesesesssesesesesesesssesenees 179 Figure 156 A window over the right Upper COrnEer sssssssessseessessssesseesssesssesssesserssseessressrosstessrosstosstossresseessrenseessessessesens 179 Figure 157 Settings for moving resizing WIM A OWS x cxcescrczesiac cessccessesegesseeercnesetteacasereseteareeeamcasecraeeatanaeteintonamietnen 180 Figure 158 Moving the window rightwards and COWNWaAIMG ccssssssssessssesessesssssesesseseseeseseesesesseseceeseseeseseeseaeeteseeeseess 181 Figure 159 Selecting the type of the message to be displayed in the tray ccccecesssesesessesssessesessesssessesessesseseesees 182 Figure 160 Setting for displaying the message IN the tray cececececesesessesssessesessessssesessesessssessssesessessesssseessesesseseesseeess 183 Fel TS Mh PG MV SSS Ne E eaaa sce net ccsatescteve R E E E E EE EN 183 Figure 162 Setting for CHANGING the tray ICOMi rnp as ne e r na rE a aio eei iiaia 184 Figure 163 Settings for sending a Message esseesssseessesssesessstesrsstsssstesssstesssstessstesssstesssteessstesssetesstreossteessteeosstenssseseest 184 Figure 164 Settings for receiving a MESSAGE cessessssessesssssssessssecsesessssesseseesesscsessescsecuesesscsesseses
59. 1daa Your name Figure 210 Sending an e mail message Fill in the fields Your name Your E mail Subject and enter the text of your message in the lower field You can add files and images to your message To add a file click on the Bi button and select the file int the window that will open an 2007 2011 ALEE Software GUI Machine 1 5 8 page 226 of 236 GUI Machine User s Manual To add an image press Bi The window described in 4 2 2 2 Image selection tool will open To add one more file press To remove a file select it and press You can up to 5 files whose size does not exceed 40 Mb The fields GUI Machine version and License number are filled in automatically and cannot be added Press the Send button to send your message If you do not want to send the message press the Cancel button To clear all fields and remove all files press the Reset button pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 227 of 236 GUI Machine User s Manual 15 Keyboard shortcuts The keyboard shortcuts used for the quick access to the application functions are described in the table below Table 41 Keyboard shortcuts Key combination Function General Ctrl N Create a new project Ctrl O Open a project Ctrl S Save the project Ctrl Shift S Save the project as Ctrl Q Open the Image Export Tool Ctrl P Print the proj
60. 2011 ALEE Software GUI Machine 1 5 8 page 55 of 236 GUI Machine User s Manual S lapameTphbi CTPAHHLbI Figure 57 Print settings In this window you may change the following settings gt Size gt Feeding gt Orientation gt Margin After changing the settings press OK 3 4 2 3 Settings for the appearance of the edit area L Tools and Frames Area Setting Show Background Clicking this icon you can switch the display of the background on off When the background is switched off the edit area looks as shown on the figure below pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 56 of 236 GUI Machine User s Manual Figure 58 The edit area without background This function may be useful for the more demonstrative display of transparent and nontransparent objects E E E Ei E E 30 Togra 30 30 100 30 ag aS oa i PAm ea aja i ll pl 5 ot E Pata Bip ee ac e j2 ei i aa Eada ah ea x 113 Jn Bea Cee A n 13 para aap Figure 59 The white background Figure 60 Without background E Tool frame Area settings Pages background color Clicking on this button you can change the necessary color of the page background Tools and Frames Area Settings Show large grid The size of the grid increases when pressing this button 3 4 2 4 Settings for guidelines HL Tools and Frames Area settings Snap to guidelines Wh
61. 2011 ALEE Software GUI Machine 1 5 8 page 74 of 236 GUI Machine User s Manual E Show cell borders over the background Allows to display the borders of the cells we Spacing Allows to fix the spacing between the cells of the layout 4 2 1 6 Properties for panels Table 9 Properties for panels Icon Property Description Properties for panels Allows to select the type of the border There are 7 border types e Empty e Line Eo Border type e Rounded e Lowered bevel e Raised bevel e Lowered etched e Raised etched H Border width Allows to set the border width Border color Allows to select the border color Border dark side color Allows to select the color for the dark side of the border pi Baderie de color Allows to select the color for the light side of the border Allows to set the header for the border of the i Border header panel e 2007 2011 ALEE Software GUI Machine 1 5 8 page 75 of 236 GUI Machine User s Manual 4 2 1 7 Properties for split panels Table 10 Properties for split panels Properties for split panels Shows the location of the divider on the split TL Divider location _ panel JE Divider size Allows to change the size of the divider 4 2 1 8 Properties for tabbed panels Table 11 Properties for tabbed panels Properties for tabbed panels cat Pabeccrocenies Di
62. 23 of 236 GUI Machine User s Manual Copy the code and paste it into a text file Visit the site http www gui machine com Im activate from any computer connected to the Internet and press Activate Enter the serial number in the field The number of your license In the field Activation code enter the key your received Press Activate Then you will get the validation code Enter the code into the dialog box Your license will be activated 2 3 3 Activating and deactivating the license After the installation of the program you can read the information about the license You can deactivate the license and activate it again Select the item Help gt About program in the main menu The window containing the information about the program will appear To validate the license press Validation To deactivate the license press Deactivate About GUI Machine D o a GUI MACHINE F8S300F7 e8e4 463e b513 7ef20ae988b5 Product Licenses amount Developer Customer Order date Activation date Expiration date Alee Software 1997 2011 All rights reserved Alee Software GUI Machine 1 Alee Software Inc EM nbaHos AHAper 01 04 2011 01 04 2011 unlimited amp Uninstall license Figure 17 License information pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 24 of 236 GUI Machine User s Manual 2 4 Launch To start GUI Machine you need to go to the installation folder or any shortcut you may have
63. 25 2007 2011 ALEE Software GUI Machine 1 5 8 page 3 of 236 GUI Machine User s Manual 5 3 WORKING WITH DYNAMIC WAVOUTS cseccinsaestacsacecnenoudaonetes cause dedeaucadaadesiasseneseadoesiodedeausnieileawnedusuanednabodeadocnededeccnedndhGowediedesbedanebecadtuceteands 126 aa RAN ee E E EE E E A EAE E EEA EA TEETE ENE 126 e AN a LEE E e EAEE E AE EE EEEE A EAE acs IAE AA E 126 5 3 3 Inserting an object in several CelS ce eecsessssessssssescsssssessssssescssesesessssessssssesessssesesessssesessssesessssseseesssescsuesesessseseeseaeaeaneeeeeees 129 33A TNE CHOU OF CUS sorene i a cede aE seit EEEE E EEES 130 54 RECOMMENDATIONS AND CAI PUES sess arses cx enaena AAA EAA aA aAA NEE AAi i 139 5 5 OPERATIONS ON THE PROJECT oerrinne aai aAa raaa aeaa EEEE A AEE Eaa aieiaa 147 O ACTIONS aa ee On een ee ne ene eee SESE eee eee em eee eee 159 Ge DING ACTIONS EE E EE EE EA A EE A A AE EE AA AE densa 159 SAPR o EE EE dN E E E EE E EEE EEEE 163 oo ME TS N TPE e 165 CAT O ATTON a A E geced cate esse aaseeatietincechaseh cee seesdaceyeascsteuseaiens 170 6 4 1 Inserting an object or clearing layout CelIS ee sesssessesessssssesesessescssssesesessssesessesesessssesessesesesnssesesesesseseeesseseeeseeseaeeneseess 174 6 4 1 1 Inserting an object into layout CElIS esesessessssssesssessesessssesessssssessesssesscsesesscssssssesssussesssssesussssesusscseassesecuseeseeusseseessesesesesseeeeseeaes 174 6 4 1 2 Clearing layout cells sussisasiiessnissinss
64. An error occurred while proceeding this operation Figure 161 A message in the tray NB The actions for the tray icon will be performed only if the icon has been added to the tray Q by another action 6 4 5 Changing the appearance of the tray icon This action allows to change the image used as the icon in the tray Object of the action tray icon an 2007 2011 ALEE Software GUI Machine 1 5 8 page 184 of 236 GUI Machine User s Manual Figure 162 Setting for changing the tray icon Press the arrow near the Change icon field The standard tool for selecting images will open Cf 4 2 2 2 Image selection tool Select the new image for the icon 6 4 6 Connecting the prototype with other prototypes and applications GUI Machine allows to connect the prototype with other prototypes and applications Select the component Connector object from the Extended set The connector object can become the target of actions of different types pressing a button selecting a checkbox etc Example The action of sending a message by pressing a button is configured in the following way 1 Add a button and a connector object on the edit area Select the connector object as the target object of the action 2 In action settings indicate the number of the port and enter the text of the message to be sent New Action 12 E Event settings 4 Action settings Buttonit sia a Connectoricon2 D Button dick Y i
65. Ctrl C Ctrl V Ctrl Z A Copy Ctrl C F Paste Ctrl V Undo Ctrl Z Redo Ctrl R Ctrl R Insert ASCII value Ctrl I Always on top Ctrl T Change F2 Cancel change Escape Clear Ctrl Shift D To file To clipboard Insert ASCII value Ctrl I Always on top Ctrl T Journal gt To file Copy journal gt f To clipboard Change F2 re e 155 x 60 HOC Cancel change Escape Clear Ctri Shift D RUB RUB Figure 87 Adding submenus to popup menu items 2007 2011 ALEE Software GUI Machine 1 5 8 page 107 of 236 GUI Machine User s Manual 4 2 2 9 Menu editor The menu editor allows to add and remove the items by pressing the buttons and change the order of items by pressing the buttons and O enable disable the menu items the Enabled column set mnemonics for menu items by pressing Alt mnemonic select popup menus for each menu items edit the text of menu items including HTML texts YYYyYVV V O Menu bar editor Figure 88 Menu editor If you need to edit the text of the items including HTML texts you can do it right on the edit area by double clicking them r a Calf Edt view Help i Figure 89 Editing HTML text in a menu item The connection between the menu item and its popup menu is marked by gray arrows pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 108 of 236 GUI Machine User s M
66. DwVF ID E i preview i D screenshots 2 ER Project 2 B GD 71UBL 9kV77 IC6R 27pwS ID iji preview fe W screenshots tA Denia Figure 170 Selecting an object for preview Select the object and press the Open project button Depending on project setting either the object marked as the main will be launched or the window for selecting the object for the preview will be opened Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 190 of 236 GUI Machine User s Manual O0 GUI MACHINE VIEWER uS Project information i age Demo Project aa eee Mike Garin Alee Software GUI Machine demo project Basic components usage Different advanced components possible usage Many simple and complex examples Project preview i Preview object marked as main E None selected Figure 171 Settings for object preview in GUI Machine Viewer Selecting the radiobutton Preview other object you can preview any other object of the project a Layers i EE Buttoni Align right 2 z mE JButton1 Align left i E Buttoni Text at image i i i JLabel1 Toggle buttons HO i m Button Font color and JButtoni lt Words wrappin JButton1 Text at top IButton1 Large icon text TroggleButton1 Disabled a IButton1 lt Disabled with s i JButton1 Disabled icon Hi JButton1 Disabled GE JToggleButton 1 Different i i GE JToggleButton1 and not i JToggleButton1 Selected JButton1
67. E Alpha rectangle width 7 REFS Red Light Red 32 Background type image Color Fit to image size SS Sa Sa ees a Gee oats oer a ae eee ees eee eee a 3 Background type image SI bColor Fit to full object size a Background type image k Color als Figure 123 Settings for the background of cells a 2007 2011 ALEE Software GUI Machine 1 5 8 page 136 of 236 GUI Machine User s Manual When previewed the layout shown on figure 123 looks as it is shown on the figure below i Preview Layoutl Background type Color Background type Aloha rectangle width Colors Background type Aloha rectangle width Colors Background type Color Background type Color Background type Color Color Red Alpha fayer Td White Gray Aipha layer eee nn one 7 mra a a a a anann n nn E E Red Light Red onna nE nNpEnNNnpE image Fit to image size image ps Fit to full object size mage ili l As background image Figure 124 Previewing a layout To change the background of a single cell gt select the cell and click on it to open the context menu gt select the item Change selected cell background toa Add object by cells E Change selected cell background Change cells background TA ai i Figure 125 Changing the background of a single cell Clear cells background It is possible to put several backgrounds into one layout cell That is why i
68. EE Software GUI Machine 1 5 8 page 8 of 236 GUI Machine User s Manual 2 Installation Instructions 2 1 System requirements The system requirements for the work with the application are indicated in Table 1 Table 1 System requirements Operating system CPU Memory HDD Windows XP 2000 2003 Vista 7 1 5gHz 2 gHz 512 M 1024 M 200 Mb Mac OS X 10 4 Power PC or Intel 1 5gHz 2 gHz 512 M 1024 M 200 Mb Linux 2 2 6 Solaris 10 1 5gHz 2 gHz 512 M 1024 M 200 Mb GUI Machine can work on any operating system supporting JDK 6 Update 20 and higher Notes gt Parameters marked by are interpreted as the minimal and the maximal ones gt The parameter indicated without is interpreted as the minimal one Attention Be aware that increasing the complexity of the project leads to the severization of the system requirements xy 2007 2011 ALEE Software GUI Machine 1 5 8 page 9 of 236 GUI Machine User s Manual 2 2 Installation Execute the setup file Alee_GUI_Machine_xxx_1 5 4zzz where xxx is for the operating system Unix Linux or MacOS and zzz is the setup file extension You should then see the following window appear Figure 1 Language selection Select the language and press OK Then you should see the welcome screen of the setup wizard QP Setup GUI Machine Welcome to the GUI Machine Setup Wizard This will install GUI Machi
69. Figure 61 Page manager The page manager allows to gt create new pages 2007 2011 ALEE Software GUI Machine 1 5 8 page 58 of 236 GUI Machine User s Manual remove pages rename pages to browse the list of pages to switch between the pages VVUVY There are several ways to create a new page to make a right button click on the tab of any page and select the item Create new page to press Ctrl N to select the item Edit New page in the main menu to make left button double click on the empty area located on the right of the tabs of the pages VVvVY There are several ways to delete pages to click the pages tab and select the item Delete page to select the item Edit Delete page in the main menu to press Ctrl W Vv There several ways to rename pages to doubl click on the tab of the page to be renamed to make a right button click on the tab of the page and select the item Rename page to select the item Edit Rename page in the name menu to press Ctrl F2 VVUVY There are three ways to switch between the panels v to make a left button click on the tab of the page If the tab is located beyond the zone of vision press the buttons 4 or use scrolling by the mouse wheel to select the necessary page from the list to select the tab of the page and press the arrow buttons Vv Cache flush To flush the cache select the item File Program settings and press the button Clea
70. GUI Machine User s Manual 2P GUI MACHINE USER MANUAL Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 1 of 236 GUI Machine User s Manual Table of Contents 1 INTRODUCING GUI MACHIDNE cccccccsscsssssccsscscccscscccccscccccsccscccccccccscocccscccscsccccssccccssccccssccoccscscccsscccccscccccsccccssssccecees 6 1 1 ABOUT THE PROGRAM sesessesessesseresresessesessesresesestesestestsresesestestetosteststeststosterestesteses tests testsres tests tes tests testsresosestesteoestesesoesesesoeeeseesee 6 1 2 HOW TOUSE THIS MANUAL gees ect asses cesta TEA NEEE N EEOAE ANONEST 8 U EE E PORT EE AENA EEE E AEE A N E A AET E E I AEN E AA A A A 8 2 INSTALLATION INS TRUCTIONG ccccscssssscccssccccccsccsccccccccccccccsccccsccccccccccscccccsccsoccscocccscccsssccoccsccscssccscsssccsscccoccsecsess 9 2 1 SYSTEM REO OI EIEN sesso saczceescceat encnseaee casein ceatuaaeteaneeecied acest sacs suctesteas uavedeucaebeectuauauecstirasteactecioustceossiouoseeancenseetaaet sean aetestincssieatceuoaeteuesbeseseeces 9 DD MING TERT ON taser se E EENEN cetera obese eae ese secre ATRE ve cate seadebe E OEE RE A ENEE 10 DS MGI SON ae gcc hn asec act E AAE a clara cea tts een E A a cease atscasae ante E 16 Wie Seems 9 area els a bol ge Revere remtererem seme tee teen ceey nee ere nee nem E Neier oer poner En Ta TnC TnL E ore ee ere 16 2 3 2 Activating the license without Internet CONNECTION cecesesesesesssescsessese
71. Machine User s Manual Figure 127 A table without Neado srs iaaa a N O aT aapea aea naiai ii 139 Figure 128 The influence of scroll bars on the display of the layout esesessssesesesessessssesecsesescessseeeeeseceeseeesees 140 Figure 129 A pop up window in preview cessssessssesssesssssssssesesssessesssessssssssesscsesessesesessesesssessesesssesssssessessesesasseseseeeeesesseseess 141 Figure oMultline and SMngle lino TOX Supersano S N atte 142 Foure DST DSF AOS Wi ULNA sasas o EE a a AER A 143 Figure 132 Curving the sides Of a POlyQOn u cecsecesssssssessssesssessesessesessesessssessssesessesessesesussesssssessesessssesesesesssecseeeseseeseecanees 144 Figure 133 A window with WIA TV ae conierce set ecicccteadexicedoneonsesmnneouteassasenegeenanndedsessonsusasncnnashesauamsusestacoteremensusubieneenetamoncesseeceniets 145 Figure 134 Editing the properties for a TONS sic ssetscsczcezeccescesdechcoucesedetuendedccesdacstareecesedachcoudueeateystulesesdbectoveneucetedhcstdserdentecsees 146 FUN Le FOS SUNS ac scece E evtezscascecsucdeseeeeeceetsesesuae oz ezsctsdnesucdeticteecaecsnedesusesesieaeesestenesesees 149 Figure 136 Selecting the main Preview ODJe Ct ceesessesessesssssseseesssesecsssessssesecsesesneseseesesessesesnsseseesssessssesseseceeaeeeseeseeeeeeens 150 Aore loe Proectoare ame te EEE non E EEEE erg rere re nee er 151 Pono o APPIE CTN nner enter ne ce ener et ee ee E T 152 Figure 139 Visual settings TON TIVE applicatio erdirsin
72. Se E ANE ERE E E E EEE EE TAEAE Aai 154 Fgura Search Seting Seien ai ai EE EET E AEA EE N aaa AnaS OESE 156 Figure 14L FPreviow setings scrisoarea Ea iene a e aE E EAEE a EARI aaaea aE AE aa 157 Figure 142 Settings tor COMMS ON SINS eseado E EEE EEA ES EATER Era 158 Figure 143 Adding a al s arz ed veeremmrrervereeevaerereresternert verter rte cererenrertieerre tere rtetcrrirnte Sererrecietivateerenietiterce et aaaeaii Eaa aiaia 160 Figure 144 Selecting an action event OO CCE ae ccerasoastenceeasccsecasenapsbucdcscucasatsonseeseeccacsececseanepataplencenessaeese tee uceeanseteaacesttesecunent 161 Figure 145 Events and actions in the tree Of ODjects esssssssessssssssssesssssessssesssssessssssecsssessessssessessssssesesesssseseseaeseseess 162 Figure 146 Icons denoting actions ON the edit Ara csessesssesssessesesessssesssessessesessseesssesessesessseessseessesseesseeesseeeseees 162 Four A ce CIM 1G sl CUNO NS a E E E E E E E E AE E E 163 Figure 148 Settings Tor IASC REV ACUO emre Ee ra E E E 174 Figure 149 Inserting a calendar into layout cellS ses sssessssessseessseessseesssrsssseessesssseesseessseesssresssresseesssresseessseeseeseeseesensens 175 FU Ss So Adang NAE O e E E E EEE E E E EEA T E E digest 175 Figure 151 The work of the the action of INSEItiNG ee esessesssssssesssseesesessesscsesscsessesssseesesessesucsecueseesesussesueseeseseeseesseaneesans 175 Roure a2 Gean aa Vay OUT CN a T E E EAA EA E E EAE EN 176 Figure
73. UI Machine 1 5 8 page 153 of 236 GUI Machine User s Manual Visual settings gt Application settings ojo o Hide page if only one page is open i CZ Edit area settings GUI Minimum area size 5000 x 5000 pixels MACHINE W Additional area size when extended Additional area size when extended 100 x 100 pixels Tj Show pages preview a M Navigation scroll with middle mouse button wheel 47 Smooth area scroll while navigating between objects 7 Animate area if any active objects are present Animation frame rate per second 18 M Show object preview on insert reve transparency Invisible ss Co Opaque alerts Pixels ow Minor ticks spacing 10 Major ticks spacing 50 Figure 139 Visual settings for the application In this window you can configure the following settings The position of the tabs of the pages Hiding the tabs when only one page is open Minimal area size height width in pixels Settings for the supplementary size of the area when extended Supplementary size in pixels Show pages preview Enabling the scroll with the mouse wheel ee E ee 2007 2011 ALEE Software GUI Machine 1 5 8 page 154 of 236 GUI Machine User s Manual 8 9 10 11 12 13 14 15 Enabling the smooth scroll when navigating between objects Animate the area including active elements Animation frame rate Showing the preview of objects being inserted The transparency of the preview Rul
74. User s Manual 3X Main settings Name GUI Machine project m Directory C Program Files Alee Gui Machine temp GD IEM4x i2rH4 1WLU4u ug28P IB Project gui gt Main preview object None selected W Allow to preview all selected launchable objects __ Allow to preview all objects _ Do not show GUI Machine Viewer Figure 135 Project settings In the tab Main settings the following parameters can be edited the name of the project the owner of the project the company of the owner the description of the project VV VV With the help of the preview settings you can manage the work of the prototype during its preview in GUI Machine Viewer Click on the field Main preview object to access to the tree like structure of project elements Select the object and press the button Choose Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 149 of 236 GUI Machine User s Manual 2 Choose object MI ol Layers wi GE gil JCheckBox2 No l i O window Text Figure 136 Selecting the main preview object If you do not need to choose the main preview object deselect all objects by clicking on them while keeping the Ctrl key pressed and then press the button Choose To enable the preview of all launchable objects in GUI Machine Viewer select th appropriate checkbox If you want to preview all the objects of the project in GUI Machine Viewer select the checkbox Allow to preview all objects
75. Vaadin Vaadin Components Gal Date Date A widget allowing the user to enter the date either Date field by typing it or by choosing it from the calendar in the dropdown menu inl A widget displaying the calendar and allowing to Calendar select the date m 2007 2011 ALEE Software GUI Machine 1 5 8 page 68 of 236 GUI Machine User s Manual Note The Vaadin set of components also includes components similar to those included in the standard set As their functions are the same their detailed description is not included in this table 4 2 Object Properties With the help of this tool you can select different settings for object thus modifying the look of interface elements When an object on the edit area is selected its properties are displayed in the special window The number of properties depends upon the type of the object Each object has unique i e pertinent to a certain type of objects and repeated pertinent to objects of different types All object properties can be divided into the following groups gt properties for concrete types of objects gt general properties characteristic for all objects gt editor properties i e those infuencing the display of the object on the edit area but not in the prototypes It is possible to modify the properties of the objects set by default Some of the properties can be modified when editing Some of the properties cannot be changed for insta
76. a region Insert the panel into necessary region and disable the property Border header Select the type the color and the width for the border in the properties How to create a switching To create a checkbox with switching icons gt select the image representing the checkbox in the Image property gt select the image for the selected state of the checkbox in the Selected image property The same procedure can be applied to Radiobuttons This procedure can be applied to toggle buttons if the property Decorated is disabled Copying objects containing actions To copy the objects with actions related to them select the objects being event triggers and action targets together and copy them If only one object either event trigger or action target is selected and copied the action will not be copied par 2007 2011 ALEE Software GUI Machine 1 5 8 page 143 of 236 GUI Machine User s Manual Working with polygons To add a corner press the icon To remove an angle press Ctrl and click on it To move the vertex of angle not only on the borders of the object but also inside it disable the property Snap points to sides To curving the sides of the polygon disable the property Snap points to sides wand move the vertices holding the Shift key Figure 132 Curving the sides of a polygon How to add a menu to a window There to ways to add a menu to a window gt Open the context menu and select the item Choose wi
77. aa Eaei esmassa 215 Foure 201 MACS CULO VAIS COL tOO kenene nnn E A T A E 216 POUC 202 PEIDO e E E A E N ee E R 217 Figure 203 The Print Screen tooOl sess sssesssseesssessssesssesssseesseessseessereessresseessseesseeosseeossreossressteesstesseeosseeessreossresseeesstesseressessesteses 219 Figure 204 Entering the name of the folder sesssssssssssssssssssssssssssssssessssessessessssesessssessessssessesesssseeseesssesseseessssesseasensaes 220 Fel IT OO IVAN a SSS UN SN a see S EE E A E E 221 Figure 206 A Screenshot Of WINGOW Content serieen n aa i a E n a E E 221 Figure 207 Entering the name 0f the screenshots reenter aeua rae EA E ESERE raS 222 Figure 208 Covering a stack of floating panels with the semitransparent layer cecesessessesesesseeeseseeseseeeeeees 222 Figure 209 Iniormation about the Drograli 2iscescete scene crsesesesech ccascdte cd risene a O arena aaeeei 224 Figure 210 Sending an e mail MESSAGE cccesessesssessesssessesssssesssssessesssesesssssssscsesssscsesessesesssessesessseeseassssessasseeeseseseeseeeeeseass 225 2007 2011 ALEE Software GUI Machine 1 5 8 page 236 of 236
78. age Allows to switch between the alpha layer and the E Do not fill background with color selected background color Allows to anti alias the lines made by the pencil and ia Paintining antialias antialiasin J g eraser tools Allows to configure the color for the background of Change first color images x 2007 2011 ALEE Software GUI Machine 1 5 8 page 211 of 236 GUI Machine User s Manual 9 3 The main menu The main menu of the image editor is shown on the figure below File Edit Image Figure 194 The main menu of the image editor It comprises 3 items gt File gt Edit gt Image 9 3 1 The File item The submenu for the File item is shown on the figure below Edit Image Insert image Ctrl I Save and exit Ctrl Save image as Ctrl Shift Exit editor Alt Fa Figure 195 The File menu It includes the following items Insert image Save and exit Save image as Exit the editor VV VV If you select the Insert image item the standard image selection tool will open Cf Figure 73 Selecting an image from the file ay 2007 2011 ALEE Software GUI Machine 1 5 8 page 212 of 236 GUI Machine User s Manual If you select Save and exit item the editor will be closed but the image will be saved It will be opened at the next launch of the editor If yoy select Save image as the standard interface for saving files should open Imag
79. all and coarse divisions respectively g5 Snap slider to divisions Snaps the slider to the divisions of the scale 4 2 1 15 Properties for the scrollbar Table 18 Properties for the scrollbar Icon Property Description Properties for the scrollbar i Allows to configure the orientation of the iit Orientation scrollbar horizontally or vertically ua Small division Sets the size of small scale divisions ey Coarse division Sets the size of coarse scale divisions ea Switches on off the display of divisions value Show values Allows to display the small and coarse divisions pati Show ticks of the scale with intervals equal to the sizes of small and coarse divisions respectively e 2007 2011 ALEE Software GUI Machine 1 5 8 page 81 of 236 GUI Machine User s Manual Ep Snap slider to divisions Snaps the slider to the divisions of the scale essay Minimal value Allows to set the minimal value of the interval pasaj Maximal value Allows to set the maximal value of the interval Current value pay Allows to set the current value Allows to select the region which is visible when e viewing the slider Ic 4 2 1 16 Properties for the tree Table 19 Settings for trees Icon Property Description Properties for trees Allows to modify the structure of the tree and Tree settings g add new elements All
80. amic preview 1 Automatic closing of previously previewed objects 2 Displaying the previewed objects above all windows 3 Launching the screenshot making tool when launching the preview par 2007 2011 ALEE Software GUI Machine 1 5 8 page 156 of 236 GUI Machine User s Manual S Application settings i Dynamic preview settings Automatically dose previously viewed objects op o Always show viewed objects on top of all other windows Fj Always show screenshotter on preview GUI i E Images preview settings MACHINE Initial images selection on preview Each unlinked object Selection leftgap 5 jrightgap S topgap 5 Preview settings Figure 141 Preview settings Settings for image preview 1 Selecting images for preview Each unlinked object Divide by guidelines All together Without selection 2 Setting gaps for the selection in pixels Settings for components ee Click on the icon above to configure these settings In the window shown on the figure below you can configure the properties for all components inserted into the prototype Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 157 of 236 GUI Machine User s Manual Default components settings for insertion ir Standard E Properties for StaticLayout El hs Buttons BS Linked objects 0 Border color EE o o o ii Background color Ea MACHINE kama 2 Ll i ee et General properties Properties for editor Components se
81. and Select none pari 2007 2011 ALEE Software GUI Machine 1 5 8 page 12 of 236 GUI Machine User s Manual lt gt Setup GUI Machine Select File Associations Which file associations should be created Select the file associations you want to create dear the file associations you do not want to create Click Next when you are ready to continue GUI Machine project file qui GUI Machine viewer file qdv Alee Software 1997 2011 Figure 5 Creating file associations After creating associations files will be opened by double clicking Press Next to continue The next window will allow you to select the location for GUI Machine shortcuts Setup GUI Machine Select Start Menu Folder Where should Setup place the program s shortcuts Select the Start Menu folder in which you would like Setup to create the program s shortcuts then dick Next GUI Machine Create shortcuts for all users Don t create a Start Menu folder Alee Software 1997 2011 Figure 6 Selection of the location for shortcuts 2007 2011 ALEE Software GUI Machine 1 5 8 page 13 of 236 GUI Machine User s Manual Select the destination folder from the given list or type the name of the folder in the text field You can also select the checkbox Do not create a Start menu folder Press Next to complete the installation The next window will display the progress of GUI Machine installation Installing Please
82. anual F cae Edit View Help Copy Ctrl C Paste Ctrl i Undo Ctrl Z Redo Ctrl R Insert ASCI value Ctrl Always on top Ctrl T Figure 90 The connection between the menu and the popup menu The menu with popup menus looks as it is shown on the figure below Cate P Edit View Help ig Copy Ctrl C rm Paste Ctrl i Undo Ctrl z C Redo Ctrl h Insert ASCO value Ctrl Always on top Ctrl T Figure 91 Menu A popup menu can be removed from the item in the main menu To remove the pop up menu approach the mouse cursor to the item press the right button and select the item Remove popup menu in the context menu pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 109 of 236 GUI Machine User s Manual Preview Add action There is no events on object There is no actions on object Delete menu Edit Add menu before Edit Add menu after Edit Choose popup for menu Edit Remove popup from menu Edit Edit m Redo Insert ASCI value Always on top Mowe object to top layer Mowe object layer up Move object layer down Move object to bottom layer Hide selected objects 1 t0 boea Show all hidden objects Hidden total 0 Objects under cursor JMenuBars UMenuBar Figure 92 Removing a popup menu To underline the mnemonic symbols press the Alt when viewing To select the menu item press the key with the underlined symbol Q If the text of the i
83. area of the selected object gt Mouse exit from the area of the selected object gt Scrolling the mouse wheel 1 Up i Down Uin any direction You can specify the area for this type of events The action is performed by pressing the key A Sey event combination specified by the user R Far A 2007 2011 ALEE Software GUI Machine 1 5 8 page 166 of 236 GUI Machine User s Manual The action will be performed if one of the elements of the dropdown list is selected Dropdown list item selection Settings selection of any element selection of the empty element selection of the definite element VV v The action will be performed if one of the table FA Table cell selection cells is selected You can select a cell in the table preview The action will be performed if an item in the popup menu is selected For the items Radiobutton and Checkbox the additional settings Pop up menu item selection are available gt Item selected gt Item deselected gt Any other changing of the state The action will be performed if the collapsible pane is collapsed expanded Collapsible pane expanded Settings 2007 2011 ALEE Software GUI Machine 1 5 8 page 167 of 236 r Expanded Collapsed Any state change VV v GUI Machine User s Manual Timer countdown completion The action is performed when the countdown of the timer is completed
84. ary project and press Load project Projects can also be opened by double clicking Start without a project If you do not wish to create a new project or wish to start working with projects later select the item Start without a project The new file will not be created After selecting this option the window with the tip of the day should appear The tip of the day is a brief instruction or a brief description of some program functions Pave 2007 2011 ALEE Software GUI Machine 1 5 8 page 28 of 236 GUI Machine User s Manual a9 ip of the Day 4 Did you know at You can make a quick copy of selected objects by pressing CTRL ALT and dragging them W Show tips on startup lt Previous amp Next gt Close Figure 22 Tip of the day Press Previous or Next to see other tips If you do not want to see the tip of the day deselect the checkbox Show tips on startup en 2007 2011 ALEE Software GUI Machine 1 5 8 page 29 of 236 GUI Machine User s Manual 2 5 Uninstallation To begin the uninstallation press the Start button Select in the menu All programs GUI Machine GUI Machine Uninstaller If you did not create shortcuts execute the file Uninstall GUI Machine Uninstall Are you sure you want to completely remove GUI Machine and all of its components Click Next to continue or Cancel to exit Setup MACHINE Figure 23 Launching the uninstall wizard The window of the uni
85. ating between objects Tj Animate area if any active objects are present Animation framerate per second 18 Figure 51 Navigation settings 2007 2011 ALEE Software GUI Machine 1 5 8 page 50 of 236 GUI Machine User s Manual The Hand tool will appear right after clicking on the mouse wheel The navigation with the Hand tool is also available on pressing Space PgUp PgDn This type of navigation may be very useful when working with prototypes of great size 3 4 1 1 Rulers The rulers provide for the exact positioning and the size of the objects They are located along the upper and the left borders of the edit area The tick marks on the ruler show the position of the cursir when moving The shifting of the grid origin allows to begin measuring from a definite point on the object The size of the objects is measured in pixels by default The tick marks are located over one tick in five To change the settings of the ruler select the item File Application settings or press C rl S Tj Show object preview on insert een transparency Invisible SI Co Opaque i Ruler settings Ruler units Pixels Minor ticks spacing 10 Major ticks spacing 50 Pixels Centimeters Millimeters Inches Figure 52 Ruler settings 7 2007 2011 ALEE Software GUI Machine 1 5 8 page 51 of 236 GUI Machine User s Manual 3 4 1 2 The grid The grid provides for the exact and symmetrical positioning of objects It consists
86. avigation In the Image Export tool Ctrl End Go to the right lower corner of the workspace Ctrl Home Go to the left upper corner of the workspace Ctrl Page Up A screen size shift to the left Ctrl Page Down A screen size shift to the right Page Up A screen size shift up Page Down A screen size shift down A Add anew image S Add a smart image In the Print Screen tool Print Screen Take a picture of the area covered by the semitransparent layer Enter Take a picture of the area covered by the semitransparent layer 2007 2011 ALEE Software GUI Machine 1 5 8 page 229 of 236 GUI Machine User s Manual 16 Conclusion GUI Machine is a tool for successful interface design We have studied the existing GUI editing tools and united the most useful features and solutions in GUI Machine We have also added a lot of unique features With the help of GUI Machine it is possible to solve a wide range of problems related to GUI design GUI Machine has been used for designing interfaces in Alee Software company It has proved the high quality We hope our program will help you to solve complex problems within the shortest possible periods of time The conception of constant development GUI Machine is a dynamically developing program Choosing GUI Machine you can be sure that all your wishes propositions and recommendations will be
87. ayers VaadinCalendar2 ii New page Figure 144 Selecting an action event object Objects that cannon used as action triggers are blocked In the Action settings field the action object is displayed You can change the object by pressing the button sas The type of the action can also be selected in the dropdown menu The event object and the action object can be located on different pages Such actions are u called multipage actions page 161 of 236 2007 2011 ALEE Software GUI Machine 1 5 8 GUI Machine User s Manual Configure the action and press the button Add action Events and actions related to objects are marked by and signs in the tree like structure on Layers panel ren Layers H EZ HH Layout3 JSeparator1 B E H Layouts rere h _ cm b Figure 145 Events and actions in the tree of objects If you double click on the signs the interface for editing actions will open On the edit area each action is marked by an arrow directed from the action trigger event object towards the action target The type of the event and that of the image are denoted by icons Figure 146 Icons denoting actions on the edit area Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 162 of 236 GUI Machine User s Manual Q If the event object or the action object is removed the action is also removed Q One and the same object can be a part of multiple actions
88. ayout space and cannot be changed That is why the button above it is blocked From the layout on the right part of figure 106 it is obvious that after decreasing the size of the layout gt zones 1 and 2 were not modified gt zoned 3 and 4 were diminished 25 n 75 of the diminished part of the layout rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 127 of 236 GUI Machine User s Manual For the exact setting of layout rows and columns select the items Set px columns height and Set px rows width in the context menu Enter the necessary size in pixels The cells will be resized in accordance with the value you entered amp Gi SA l3 25 30 30 100 Gera ened eee eee oD BY ae ae eee ee eo slah ili fe ir G tfmplJ 1 Es es ag Sra op T E os i N a a L eho e al i Th saM a cote a Figure 107 Identification of rows and columns It is possible to enter the values of the size for each Nth zone divided by a comma If you enter 10 20 the size of the zones with odd number will become equal to 10 pixels and the size of the zones with even numbers will be equal to 20 pixels E a a Gy aaa amp ma Gy Gy o 20 20 20 20 100 o Deoldeo 10 1s 20 a 100 3 djaja Ba B Hida E a Serio fe yeti He acai tees Beep I a Raa asap eal eee 1 Aep A gms ttt rE a a a a a ai a Bee EE pE Jeppe a a Pe E ii i a Ma pii 7 es pi a Sa OE ST o oe or Sey os
89. box Placeholder Gl Scrollbar List _ Window O Menu bar D Toggle Separator jot Static layout LI Split pane link Textarea Radio button fm Progress bar P Slider z Tree E Popup menu _ Tabbed pane O Field f HTML editor TE Combobox CE Spinner E Table Buttons Images Layout Text Condition Compound Windows Menu Figure 42 The Standard Menu The Standard menu includes the following items Buttons Images Layouts Text objects State objects checkboxes and radiobuttons Compound 2007 2011 ALEE Software GUI Machine 1 5 8 page 44 of 236 eS GUI Machine User s Manual 7 WIndows 8 Menu 3 3 4 Extended menu The Extended menu is shown on the figure below E Google map ___ Collapsible pane G Clock aj Audio player w8 Checkbox list Seb Tray icon B Timer Fd Connector object Images Layout Text Media Compound System Action Figure 43 The Extended menu It consists of the following items Google map Collapsible panel Clock Audioplayer Checkbox list Tray icon Connector object Timer Se ee a a 3 3 5 The Shapes menu The Shapes menu is shown on the figure below ik File EE Edit E Standard Gy Extended Ea Shapes D Square O Oval ct Polygon Cirde O Rhombus C Rectangle Simple Extended Figure 44 The Shapes menu This menu comprises the following items pan 1 Simple 1 Square 2 Circle 2007 2011 ALEE Software GUI Machine 1 5 8 page 45 of 236
90. by the header After removing all panels joints disappear New joints are created by moving panels to drag zones located near the existing joints or tho the border of the workspace Ke 2007 2011 ALEE Software GUI Machine 1 5 8 page 35 of 236 GUI Machine User s Manual gt To remove a panel click the button Close the symbol x in the top right corner or remove click the icon of the panel in the menu Tools and Frames Frames Settings gt To add the panel click its icon in the menu Tools and Frames Frames Settings IALHSHOUWOY i Cron i 8 EF Polygon2 Crap i EH Polygon2 Crap i9Hougem BB S R E Layout3 H Et E Layout E2 E Layout 6 E E Layout3 i Bit JSeparator1 H st E Layout6 H BB E Layouts E calendar Figure 29 Moving panels Panel groups manipulation gt To add the panel to the group drag the tab of this panel to the selected drag area in the upper part of the group gt To change the order of panels in the group drag the panel by the tab to the new place inside the group To remove a panel from the group and make it floating drag it by the tab out of the group To bring a panel to front click it by the tab To drag the whole group drag it by the header located above the tabs YYY Floating panels A panel dragged out of the joint but not placed in the drag area will become floating Floating panels can be placed in any
91. by triple click upon them The context menu Make a right button click on the tree to access to the context menu pnc 95 The context menu allows to select to select the main preview object sort objects show and hide actions To select the main preview object in the project select the item Set as main preview object in the context menu To show hide actions select the item Show actions Settings for sorting gt Sorting order gt Ascending sorting Descending sorting gt Do not sort gt Property for sorting gt Sort by object layer gt Sort by object name gt Sort by the text property gt Sort by object type 4 3 1 Tools for working with layers Tools for working with layers are located in the menu Edit Change object layers The description of the tools is given in the table below Table 31 Tools for working with layers Icon Tool Description Bring forward Raises the object one layer up wall Bring back Moves the object one layer down Moves the selected object to the Move object to the top layer top layer 2007 2011 ALEE Software GUI Machine 1 5 8 page 114 of 236 GUI Machine User s Manual r Moves the selected object to the l Move object to the bottom layer J bottom layer Hide layer Hides the selected layer Show layer Shows the selected layer T Select all layers Selects all visible layers Deselect all layers Allows to undo the
92. chosen to create and double click on the icon After that you will see the startup image with loading progress bars Then the following window should appear To start working To start working Select one of options ojo o Create new project GUI Open recent project MACHINE 2 Open project Load demo project O Start without a project Load one of recent projects Figure 18 Starting work in GUI Machine This window will allow you to select one of the following options Create a new project Open a recent project Open project Open a demo project Start without a project XS VN N88 Select the option and press Next Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 25 of 236 GUI Machine User s Manual Creating a new project To create a new project select Create new project and press Next Type the name of the project in the field Project name by default the project is given the name GUI Machine Project Then select the location for saving the project gH To start working Project name GUI Machine project P Project directory _ o C Users aemeljanov GUI MACHINE Figure 19 Creating a new project By default all projects are saved in C Documents and Settings lt User Name gt GUI Machine Project To change the location press the button lt gt then the standard window for selecting the location should appear If you need to create a separate
93. d description of this actions is m EON given in fer Changing the appearance of the tray icon This action is designed for timers Settings 1 hes the ti a a a S Start count launches the timer 2 Pause count 3 Stop count Tab selection Allows to select a tab on the tabbed panel par 2007 2011 ALEE Software GUI Machine 1 5 8 page 172 of 236 GUI Machine User s Manual Allows to collapse expand or change the state of a tabbed panel F3 Settings F Collapsing the panel gt Collapse gt Expand gt Change the state to opposite K Allows to send a message to the port Sending a message specified by the user Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 173 of 236 GUI Machine User s Manual 6 4 1 Inserting an object or clearing layout cells This action is very useful for creating This action can work in three ways gt inserting an object into layout cells gt clearing the cells of the layout gt inserting an object into the cells without clearing them 6 4 1 1 Inserting an object into layout cells For inserting objects into cells the Object checkbox should be selected ai Layouts D Button dick 4 Object insert or cells dear 7 Clear cells before insert Figure 148 Settings for inserting action e 2007 2011 ALEE Software GUI Machine 1 5 8 page 174 of 236 GUI Machine User s Manual Select the object to be inserted
94. d objects x stands for the number of objects par 2007 2011 ALEE Software GUI Machine 1 5 8 page 201 of 236 GUI Machine User s Manual 2 Show all hidden objects Total hidden Allows to show all hidden objects on the edit area x X stands for the number of hidden objects Move object to top layer Allows to bring the selected object on the top layer B Move one layer up Allows to raise the selected object on one layer Move one layer down Bring the l Brings the selected object one layer down object mi Move object to bottom layer Brings the selected object to the bottom layer Allows to align object and configure the settings for ot Aligning the alignment This item is equal to the appropriate items in Tools and Frames menu In the Objects under cursor section of the context menu the objects located beyond the mouse cursor are numbered The objects are arranged by layers from the bottom layer to the lower one The maximal number of objects displayed in the context menu is 10 If there are more than 10 objects under cursor the context menu looks as it is shown on the figure below Objects under cursor HO Layouts Layout JButton3 Button JButton4 Button JButtons Button JButton6 Button JButton Button JButton Button JButton9 Button JButtonl0 Button O7 JMenuBar UMenuBar Figure 182 The lower section of the context menu
95. dit Area The Edit Area is the main working area in which prototypes are created It consists of the following elements gt the edit area gt the toolbar gt the page manager I l I ot j Paste Undo Redo Insert ASCI value Alwaves on ton Figure 50 GUI Machine Edit Area xy 2007 2011 ALEE Software GUI Machine 1 5 8 Ctrl C Ctrl V Ctrl 7 Ctrl R Ctrl I Ctrl T page 49 of 236 GUI Machine User s Manual 3 4 1 Edit Area Single objects interface elements and prototypes can be located on the edit area The edit area can be resized if necessary Edit Area Navigation The Edit Area can be navigated gt with the help of the horizontal and the vertical scrollbars gt by moving the mouse with the wheel pressed by pressing the keys Page Up ans Page Down for shifting from screen to screen up and down by pressing the keys Page Up and Page Down together with Ctrl for moving from screen to screen to the left and to the right by pressing the keys End and Home together with Ctrl for moving to the right lower corner and the left upper corner by pressing the icons nan inthe left upper corner with the help of the Hand tool Select the item Application Settings in the File menu or press Ctrl S Deselect the checkbox Navigation scroll with middle mouse button bh Vv vy Fj Show pages preview Navigation scroll with middle mouse button wheel Fj Smooth area scroll while navig
96. dows Dynamic layouts Static layouts Panels Tabbed panels Split panels Collapsible panels YSN NNN SN Use the templates It can help you to save time and make prototyping easier Use hot keys In some situations it is the best way to access to necessary operations Use context menus It also allows to perform some operations faster Use placeholders Add a placeholder to the edit area Insert it to the location where you are going to place an object The are two ways to select an object to be replaced by the placeholder gt Click on the property Object to be replaced and select an object in the tree gt Select the item Object to be replaced in the context menu of the placeholder The object towards which the cursor is pointed is highlighted Tabi Tab2 Tab3 reo H 4 Movember 2010 SUN MON TUE WED THU FRI Ea Eh L FFF FFIT o Ail Figure 102 Selecting an object to be replaced by the placeholder ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 122 of 236 GUI Machine User s Manual During the preview the substitute object is displayed on the place of the placeholder The usage of placeholders can prevent you from creating too complicated cumbersome interfaces If you wish to unlink the placeholder from the object it substitute select the item Unlink the replaced object in the context menu It is recommended to create different interfaces on different pages This will prevent you from ove
97. e Te REI M U nE EEE AOE EEN EE EEE EEO E AE E EE AAA EE EONA 48 T TE E e E SE A E E AA AEE EEE E O A EA A E EN EA T 49 ALEEA ee AE E A E E E 50 Fda R NI E E E N A A vay A EO A A wenn AA ENO EE ONA T ENE sce EE A ETAT E A eas sii E EA ei 52 oe Bro pe G1 010 9 E OE EEEE E E EENEN A EAI ATA E E N E E AEE AOT E EEES Oe 52 3 4 2 Settings for prototype previeW s sss ssseessseessseesssesssseosstessstensstessstonsstonsteonstensstessstonsstossteosstensstensstonsstosstoosstoossossosenstosensensen e 53 34 2 1 Settings for the edit areari aiinsir ainiaan a aa aara aaaea aia e aaan 54 AP E I a E E E E E TE TE A E E ane timo 54 3 4 2 3 Settings for the appearance of the edit APO sessesessssesessesessssesssessesssessesssessessssesessssssesessesesessesssessessenssesseessesseessesseesseateesseaee 56 3 4 24 n E T TIMCS cccccsecccsesccecssssccssscccsssssscsessssssssusectesscccsscucectsscosseaucocdseuesstdensecseenceessenccedsencsessenccessesecsssssecessenecdeseteciesenesecosiecsnnenseens 57 3 4 2 5 O O L O S 58 3 4 3 Page manager OO aeon piae a nA R EE EER EEE e e a 58 2007 2011 ALEE Software GUI Machine 1 5 8 page 2 of 236 GUI Machine User s Manual A TOOLS a E A A EA 60 aE APOE see ez A E EE E A TE E AAO EE EA A A E EA A 60 PAD E E A O A EE S A EEE E E E EE A T E N E E 69 4 2 1 The Description Of Object Properties cccccsessssessssessssessssesessessssesssssssssssessssessssessssesessesessssessssesessesessesessesssneseen
98. e image black gray white red green blue orange brown pink purple teal yellow 4 Type of image content Faces photos clipart lineart any 5 Image size Icon small medium large extra large huge any Filter settings 1 Site address for search 2 Filtration level high moderate none 3 Image license type Any Public Domain Attribution Share alike Noncommercial No Derivate Works 2007 2011 ALEE Software GUI Machine 1 5 8 page 100 of 236 GUI Machine User s Manual Preview settings 1 Draw alpha as background 2 Preview size in pixels 4 2 2 3 Editing tabs The editor for tabbed panels allows to add and remove tabs by pressing the buttons and 8 change the position of the tabs by pressing the buttons O and add images to the headers of the tabs by pressing the button remove images from the headers of the tabs by pressing the button E lock unlock the tabs by pressing the button rename the tabs by double clicking on them VV VV VV L Tabs editor Tab content goes here Figure 78 Editor for tab panels The text of the tab headers can be changed without launching the editor Double click the header to edit the text contained in it Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 101 of 236 GUI Machine User s Manual 4 2 2 4 Table editor The editor for tables allows to add and remove rows and columns by pressing the buttons and to change the
99. e width equal to the height gt Width Width 2 Height Width 2 doubles the size of the window rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 182 of 236 GUI Machine User s Manual gt X 0 Y 0 Width screen width Height screen height the window will be expanded to the size of the screen gt X x 100 Y y 200 the window will be moved 100 pixel leftward Ha 200 pixels upward from the current position 6 4 4 Actions for displaying the message in the tray icon The object of the action tray icon You can select one of the following types of the message displayed error warning information message VV VV Tija Traylcon3 i GJ Show tray message y Figure 159 Selecting the type of the message to be displayed in the tray The text entered in the Caption field is displayed in bold type as the name of the message appearing in the tray The text of the message itself is entered in the Message field If you select Error as the type of the message and configure the settings as it is shown on the figure below pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 183 of 236 GUI Machine User s Manual Sb Traylcon3 E G3 Show tray message gt Message An error occurred while proceec Figure 160 Setting for displaying the message in the tray the following message in the tray should appear after configuring this settings
100. ecorded image a Display PixelGrabber atop all windows S Hide preview area on the image being recorded Show hide cursor on the image being recorded AANB Color value Eam The example of color To define the color of a display dot ee Place the cursor in the necessary area Press the Space button The Pixel Grabber will fix the image The image can be zoomed in with the help of the zooming tool the images can be zoomed from 1x 100 up to 64x 6400 4 Select a display dot on the fixed image 5 The color value in RGB format will be displayed in the Color field In the neighboring field the color value will be displayed in the hexadecimal format The example of the color is shown in the appropriate field 6 Press the Space key or the Continue button ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 219 of 236 GUI Machine User s Manual 11 The screenshot making tool Print Screen Print Screen is an easy to use tool for making the screenshots of prototypes created in GUI Machine To launch Print Screen select Tools and Frames Print Screen in the main menu the icon Eig The following window will open E Print screen xX Be EE o Screenshots storage ERA EA Trane 1 mran E Available frames TD Preview JToggleButton 1 160x89 E E Mctopma 542x330 E E CoxpaHennee dune tpel 642x330 D Preview JToggleButton2 159x88 __ Preview VaadinButton 1 226x6 1 E Bf Preview JEditorPane
101. ect Alt F4 Close the project Ctrl T Create a page Ctrl W Delete a page Ctrl Go to the next page Ctrl Go to the previous page Ctrl Z Cancel the last operation performed Ctrl R Repeat the last cancel operation Ctrl H Show hide all tools F12 Start the preview of the window of the interface F2 Rename the object Ctrl F2 Rename the page Shift F4 Allows to close the windows with the Allow closing window property disabled On the edit area Ctrl C Copy an object Ctrl X Cut an object Ctrl V Paste an object par 2007 2011 ALEE Software GUI Machine 1 5 8 page 228 of 236 GUI Machine User s Manual Ctrl D Clone an object Ctrl A Select all E Ctrl Shift D Deselect all Ctrl End Go to the right lower corner of the edit area Ctrl Home Go to the left upper corner of the edit area Ctrl Page Up A screen size shift to the left Ctri Page Down A screen size shift to the right Shift up unn down Move object to the left to the right up or down Alt down Increase the width or the height of the selected object Alt up Reduce the width or the heigt of the selected object Page Up A screen size shift up Page Down A screen size shift down Delete Remove the selected objects gt up down Move the selected object to the right to the left up down Space mouse move Free edit area n
102. edit area gt disable the properties Decorated and Opaque gt select the geometrical configuration for the window in the Shapes menu gt set up the limits within which it will be possible to move the window El Properties for Circle Ud Invert background Border color 4 Border width Moves window In parent window bounds A Font Tahoma Plain 11 A Font color EE ooo 28 Background color C 255 255 255 Cf Text margin 0 0 0 0 Horizontal alignment Center Vertical alignment Center Horizontal text position rel Right Vertical text position relati Center e Enabled vi El General properties Figure 134 Editing the properties for a figure gt drag the figure on the window The window will take the shape of the selected figure when previewed Other components can also be added to tailor made windows Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 146 of 236 GUI Machine User s Manual 5 5 Operations on the project Saving the project To save the project select the item File Save project in the file menu or press C rl S If you would like to change the location for saving the project or if you did not create project in the beginning of the work select the item File Save project as Select the directory in the window that will open Q It is highly recommended to backup all projects you work upon This can prevent you from data loss When a project is saved gt All the imag
103. eeeees 114 Tabl3 32 Tools for working With templates cccccsessesssesessssessssesessesssssescssessssssessssesussesessssessssesessesesesseessseeesaseesssseeseeeees 119 Tebe so pal Type 20 VEN Caen eee nee neve een eee et oer Ce ner cee eT ee eee ere een ee 165 Tapada AY 02 6 i ONS eee ere ee ee eee eee 170 Table 35 The tools of the Image Panel ccscsessesssssssssssecsssesesscsecsssesessssessesessessssssesessesessesessssesnssesessssecseseeesseeeeseseeesseeceees 193 Table 26 The Items O Ia GOL SIN eratan e a anaes ee EE EENES AA ENEE EA Tael eaS Er EEEIEE EEA aAA 200 Table 37 Additional items of the context menu for MENUS cccesesesssesssscsessesesessesessesessesesssesessesessesesesseseseseseseseesess 203 Table 38 Additional context menu items for dynamic lAYOUtS cccsesseesseessseessseesseeesseesssessesesseeesseesssesseeseeseeesseees 205 2007 20T ALEE Software GUI Machine 1 5 8 page 231 of 236 GUI Machine User s Manual Tape BF made Editor TOOS pn AE A AOE st 209 Table 40 The Print Sereen toolbar ssirirssisiicsissisrasstaiinniiisinanasas onai ennaa raiasiae teiaa arsed aeara iaa aiaiai idani 220 Table 41 Keyboard SION UCU i 5c cen caecncn csc bed nicewsctnsecttgsdcodnasnucivicec te dotshtsenidchpdcdccdpnqeeltebetv ia aseeutcnesoed gsiandeneeabieintenweccbeeeeueetoes 227 Appendix 2 List of figures List of figures PIC US Le Wari SSIS CU OM g EE icc cece cee sepzenee cece EE A E E E E 10 Figure Z GUT Machine S
104. eeueseeneceeseseeseessseeseetsseaeesens 185 Figure 165 Launching preview in the context MENU ccsssssssssesesssssssesssessssessessssesssesesesssssssssseessssssesesessseseaeseseeeseses 186 Figure 166 The button for launching preview in the upper tOOlD AM cessesesessesessessssesesssecssesessesesseseeeeseecseeeeees 187 Figure 167 Preview of an object with different Properties ceecessessssesssessssssesessssesssesessssesscsessesestesseessesteseeseeeees 187 Figure 168 Creating a OOO IMAI NC atscncdoe scsanssencachcuhaeansertsaice acon aeousenestasaxedeoteusdandsaaataacpaassn soupasenseitoteoipeaaiueeatiad eet coaneatofevssecuenties 187 Figure 169 Preview of the interface and Of its Parts cssessessssssessssssesssssessssessssssssssssssecsesessessesessescsesnssessesesseseseasess 188 Figure 170 Selecting an Object fOr PreVieW csecssssssssssssssscsssessssssssssessesssesssssssssssssessesesessssessssessessesessssessssesesesesessacessess 189 2007 2011 ALEE Software GUI Machine 1 5 8 page 235 of 236 GUI Machine User s Manual Figure 171 Settings for object preview in GUI Machine VieWe l cccssesessssssssesessessesessesseseseesessseessseeseseseeeseesseesesees 190 Figure 172 Selecting the next Object fOr Preview cccccesssssssssssessesesssssssesssessesessesssesssssesessesesessesssecessesescesseseseseseseseneess 190 Figure 173 Settings for exporting PrOtOtyPe cc ccccecsecessesessesssssssssessssessssssssssssssssssscsesse
105. elected region Allows to select an are of the image and discard everything outside this area by pressing the Enter key Allows to draw and to change the opacity of the pea Pencil tool marker from 0 tranparent to 100 totally Opaque by moving the slider jai Crop tool Allows to paint the selected area with color The Tolerance property allows to set the color tolerance from 0 filling the areas whose color is similar to F l that of the selected point up to 239 filling the P k ie K aInEOUCKEt toe areas whose color is different from that of the selected point The checkbox Save pixels transparency allows save the degree of the transparency of pixels after the work of this tool iF Eraser tool Allows to clear the area specified by the user os Eraser fill tool Allows to paint an area with alpha layer 2007 2011 ALEE Software GUI Machine 1 5 8 page 210 of 236 GUI Machine User s Manual Allows to sample a color from the image in order d Hyeersiaper 10C to use this color further Allows to zoom images in and out from 100 to 3200 You can zoom images by either pressing a the mouse buttons the left button for zooming in i Zoom tool and the right button for zooming out or by using the slider Images can also be zoomed out by pressing the left mouse button together with the Ctrl key Ht Draw pixels greed Allows to show hide the greed above the im
106. ellipse will be extended horizontally othervise vertically Corner rounding tal Polygon corners Displays the number of corners in a polygon Allows to enable disable snapping points to the 4 Snap points to sides sidesot apelyocn 4 2 1 26 Properties for data fields and calendars Table 29 Properties for data fields and calendars Icon Property Description Properties for data fields and calendars ealecredeta Displays the date and allows to select the date in the calendar The selected date is highlighted with blue ol Displayed date Displays the date when the calendar is previewed rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 90 of 236 GUI Machine User s Manual Allows to select a pattern of date and time display Date format Result yyyy MM dd Gat HHsmmiss z 2011 04 04 AD at 10 46 46 MSD iE EEE MMM d yy Mon Apr 4 11 E h mm a 10 46 AM m hh o dock a zzz 10 o clock AM MSD j i Time pattern yyvyy MMMMM dd GGG hh mm aaa 02011 April 04 AD 10 46 AM E EEE d MMM yyyy HH mm ss Z Mon 4 Apr 2011 10 46 46 0400 P yyMMddHHmmssZ 110404104646 0400 m yyyy MM dd T HH mm ss 555Z 2011 04 04T10 46 46 197 0400 FE Opaque Allows to change the degree of the opacity of the object 4 2 1 27 Properties for the tray icon Table 30 Properties for the tray icon Properties for the tray icon I p mas A
107. elp Menisin aeneae aA EAEE SO Ea NEEE EEEE EEE SO EEE ENE 48 Figure 50 GUI Machine Edit Area u cc sesssssssssssssssssssssssssssssssssssssssssssssssssssssessssesssssesnssesssnessssesssassesessesessesescseseseseneseseneases 49 Foue o L NaVvigaon Se NG aen e E eee On nee ee ee eee eee 50 Ee E E E E E A E E E A A E T eee 51 Figure 53 Deleting guideliheS sssini nonai eo Cea aia e a Raatan aaoi aaa 53 FOUG A TOO Or T VN S ee E E EE E E E E E A T 54 Foure aS Pn S ENGS pirea Ea EA EN E E AAEE E A AAA EE E E 54 FIQUIE 56 The OUTING OF printable pages ccrarasssie stores caseersseseivicececcrrdsde td aecnineartnieiese ce ned EET 55 FCI G56 Prnt SONNO Sosa E EE EE EEEa EE NEER E EE EEE EEE EREE 56 Figure 58 The edit area without background sesesssssssssessseesssesssersssersssrsesseesseessseesserossseossreossresseeesseesseerssessesseseeseoseoseesens 57 Houc oL Pago man Jo E A essen snes cee A E EE E T ete eens 58 Figure 62 The standard set of COMpOnentS ee ssssesssseesssssessssetessstesssstessstesssseesstteessteesssteessteesssteossteeosstesssstessstessssresssreessees 60 Figure 63 The Extended set of COMPONENMS cecesssssessssessssessesesssseesessseesessssesscsesssseesesesesussessesecsesuesecsesecseseeseaeseeneaeeseseeseens 60 POUDA Yea MIN a E E E E E E R E E 61 PWE Gs TING Rapes ME sions E E A E E E E E E 61 Figure 66 The compact view of the components PANE l ee ecessesessesessesessseseesessssssessssecessseessesessesese
108. em Selected in the dropdown list You can preview either interface or its separate parts pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 188 of 236 GUI Machine User s Manual Document search Document search Enter the name of the document Documents found Document 7 yf Select X Cancel i Figure 169 Preview of the interface and of its parts To stop the preview it is sufficient to close the window of the prototype If the window cannot be closed in the standard fashion press Alt F4 s It usually takes a long time to launch the preview of objects containing numerous objects and i actions par 2007 2011 ALEE Software GUI Machine 1 5 8 page 189 of 236 GUI Machine User s Manual 7 1 2 Previewing objects in GUI Machine Viewer GUI Machine Viewer allows to preview prototypes saved in gdv format without launching GUI Machine It is installed automatically when installing the program It is sufficient to double click on a gdv file to launch its preview GUI Machine Viewer can also be launched from the Start menu Start Programs GUI Machine GUI Machine Viewer Select an object for preview in the window that should open be C GUI MACHINE VIEWER Open one of nd project Choose other project J SE Alee Gui Machine Ei Allee Gui Machine Bd conf BJ demo ol ten i GD 4Ggck j3wUo G5IxR k8Xge ID Bp preview i 1 screenshots 2 ER Project 2 B GD 7015R Pen48 5189y K
109. emplate do the following gt add an object to the edit area gt modify the object gt press the button Create new template gt enter the name of the template To use a template in the project drag it to the edit area 4 5 1 Importing exporting templates The templates created by the user are stored in the folder templates data located inside GUI Machine install folder Each template is stored as a separate XML file The images for each template are stored in separate folders Thus the templates are not tied to a concrete project they can be used in any project you like To import the templates to another computer or to another folder just copy the the folder templates to the new GUI Machine install folder e 2007 2011 ALEE Software GUI Machine 1 5 8 page 120 of 236 GUI Machine User s Manual 5 Working in GUI Machine 5 1 General information General recommendations To insert one object into another drag it to the necessary location The insert area will be highlighted with blue Text LI eee eee ee eee eee ee ee ee eee eee eee o o o a o a Figure 101 Inserting an object The following objects cannot be inserted into other ones Standard and Vaadin windows Popup menus Timers Audio players Tray icons x x Xx Xx X pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 121 of 236 GUI Machine User s Manual The following objects can contain other objects Win
110. en this option is A objects are not snapped to guidelines serving as orienting points 2007 2011 ALEE Software GUI Machine 1 5 8 page 57 of 236 GUI Machine User s Manual 16 Tools and Frames Area Settings Lock guidelines After selecting this item the guidelines become locked and it will be impossible to move them If you want to move the guidelines select this item one more time HAN Tools and Frames Area settings Show guidelines All guidelines will be hidden after selecting this item Select this item again to show the guidelines i Tools and Frames Area settings Delete guidelines Guidelines can be deleted by selecting this item 3 4 2 5 Navigation settings Tools and Frames Area settings Show the sidebars The order of the objects on the edit area is shown by icons located on the right and at the bottom Fig 50 By this figure it s possible to define that the polygons are situates in the upper part of the edit area between them there is a window and to the left of it there is a menu in the lowest part of the area there is a list This function is useful for object search of the objects are situated far from each other 3 4 3 Page manager When a prototype includes multiple interfaces it is more convenient to create its parts on separate pages EZ calc E Main window F7 Settings Calendar F7 Kanoxynsrop2
111. ename elements of the list by double clicking on them to select images is on the Icon field 2007 2011 ALEE Software GUI Machine 1 5 8 page 103 of 236 VV VV VY GUI Machine User s Manual gt to setup the position of the text horizontal or vertical in relation to the image E List values editor Horizontal text position Vertical text position SS Element 2 Figure 81 The list editor 4 2 2 7 Checkbox editor The checkbox editor has the same functions as the list editor It also allows to gt lock unlock list elements by selected the checkbox enabled gt make the checkboxes selected deselected by default by editing the appropriate columns Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 104 of 236 GUI Machine User s Manual 2 Check box list values editor Horizontal text Vertical text po Element 1 j Center Element 2 Center Sis E m oht z New element New element Right New element Right Center SSS ee Figure 82 The checkbox editor 4 2 2 8 Editing popup menus The popup menu editor allows to gt gt gt M VV VV VV add and remove the items by pressing the buttons and change the order of items by pressing the buttons and select a type of items from the following options separator text checkbox radiobutton make an item selected by default by setting the flag Selected for checkboxes and radiobuttons only enable disab
112. er moving an indicator usually in a horizontal fashion A graphical widget typically oriented vertically with which a user can adjust the value in the adjoining E l textbox by either clicking on an up and down arrow Spinner l or by holding the arrows down thus making the value increase or decrease Allows the user to select one or more items from a list contained within a static multiple line text box The user clicks on an item to select it Multiple selections are made by clicking on items in combination with the Shift key or with the Control key pi List u Allows to create tables Table e 2007 2011 ALEE Software GUI Machine 1 5 8 page 65 of 236 GUI Machine User s Manual A tree is a data structure that emulating hierarchical D tree structure with linking nodes Internal nodes can Tree be open by clicking and e a Windows Windows m Window Allows to create windows H Meno Menu Allows to create menu bar A menu bar is a region of P a screen or application interface where dropdown Menu bar l menus are displayed A menu appearing upon user interaction typically upon a right button click Usually it has a limited number of choices related to the selected object Pop up menu context menu iy Extended Extended Gl E Images Images Google map Allows to add a Google map e E Layout Layout
113. er units pixels centimeters millimeters inches The spacing between minor ticks The spacing between major ticks Search settings In this window the following settings can be configured 1 Time to start the research in millisecunds or after pressing the Tab button 2 Show the previous research request 3 Repeat previous search when opening the window 4 Jump to event action object 5 Open event action edit dialog 6 Sorting search results 7 Sort order ascending descending do not sort 8 Sort type by layer by name by text by object type 9 Group objects by pages 10 Default search properties for objects 2007 2011 ALEE Software GUI Machine 1 5 8 page 155 of 236 GUI Machine User s Manual E Application settings jo Start search i Automatically in 500 ms after last text editing ojo After pressing TAB button Us Show previous search request GUI E Repeat previous search when opening the window MACHINE 3 Settings for opening search results _ Jump to event action object V Open event action edit dialog Search Sort search results tti settings Sortorder Descending Sort type l3 Sort by object layer M Group objects by pages Default search properties for objects lemons Object type P Object 1D Object ID Linked with Figur 140 Search settings Preview settings In this window the following settings can be configured Settings for the dyn
114. erty Description Properties for windows Window menu bar A or Allows to select the menu bar for the window Allows to select the design style for the window The styles of the following operating systems can be selected Windows XP Ubuntu Windows Vista Gnome Mac OS Windows Mac OS Grey F Window style Allows to select the desing for the window header in the style of one of the following browsers Myctou Internet Explorer 8 Firefox 3 6 Opera 10 Safari 5 Header style l Dialog window Displays the window as a dialog window Allows to create a modal window A modal window is a child window that requires users to interact with it before they can return to operating the parent application thus preventing Modal window the workflow on the application main window Modal windows are commonly used in GUI systems to command user awareness and to display emergency states On the Web they are often used to show images in detail Allows to select the parent window for the given m Parent window window ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 84 of 236 GUI Machine User s Manual Ontoporalwindew Allows to display the window atop all other windows l Allows to enable disable the closing of the EJ Allow closing window l window ae a i Resizable Allows to change the size of the window Allows to close the window automatically on Ca pack width
115. es are saved in the subdirectory resources located in the directory of the projects gt All the screenshots are saved in the subdirectory screenshots located in the directory of the project The templates are not linked to any project They are saved in the subdirectory templates located in GUI Machine install folder Opening a project To open a project gt select the item File Open project in the main menu gt select the necessary file gt press the button Open To open a demo project gt select the item File Demo projects in the main menu gt select a project in the list and click on it i Far A 2007 2011 ALEE Software GUI Machine 1 5 8 page 147 of 236 GUI Machine User s Manual If you have made the association of gui files with GUI Machine during the installation they can be opened by double clicking Creating a project To create a project select the item File New project or press Ctrl N Enter the name of the new project and select the directory for saving it The current project will not be saved when creating a new project in the fashion described above All the changes will be lost Save the current project before creating a new one Project settings To access to the project settings select the item File Project settings in the main menu or press Ctrl Alt S The following window should open e 2007 2011 ALEE Software GUI Machine 1 5 8 page 148 of 236 GUI Machine
116. es can be saved in the following formats Jpeg jpe JP9 gif pno VV VV Y 9 3 2 The Edit menu The Edit menu is shown on the figure below Ctrl Z Redo Ctrl Shitt Cut selection Ctr X Copy selection Ctrl C Paste Ctrl V Figure196 The Edit menu of the image editor It comprises the following items Undo cancels the last operation performed on the image Redo allows to repeat the last canceled operation Cut selection cuts the selected area and copies it to the clipboard Copy selection copies the selected area Paste pastes an image from the clipboard m 2007 2011 ALEE Software GUI Machine 1 5 8 page 213 of 236 YYYV Y GUI Machine User s Manual 9 3 3 The Image menu The Image menu is shown on the figure below Image iE Image size Ctrl Alt E Canvas size Ctrl Alt C Figure 197 The Image menu The Image menu contains the following items gt Image size gt Canvas size If you select the item Image size the window for configuring the size of the image will open fe Image size Width 3 pixels v Constrain proportions Figure 198 The image size Enter the necessary size in pixels and press Ok Mpu Bbi60pe nyHkta Pa3smep o6mactTu OTKpbiBaeTCA OKHO AVIA YCTaHOBKY pa3Mepa o6nacmn n pacnoso gt KeHuA UZ06pa gt KeHua If you select the Canvas size item the window for configuring the canvas and the location of the image should
117. es it is necessary to prevent from the increasing of layout columns when scrollbars are enabled If you do not want the column to increase indicate its size in pixels If you want the column to increase indicate its size in percentage of the free layout space To avoid the increasing of all layout columns add an empty column with the minimum size and assing 100 of free space to it Figure 128 The influence of scroll bars on the display of the layout a a a Alexandr Sergeevich l t I I Wexandr Sergeevich 1 57 I l q l l l l l l l l l l l l l l l l l l l T e e e e e e e l I l l I Alexandr Sergeevich I l l l l l l l I l l l l l l l l l l l I im Mlexandr Sergeevich 1 TE T E E Ll Scrolls F Scrolls AIH Horizontal scrol Show when needed Horizontal scroll Show when needed Vertical scroll Show when needed vertical scroll Show when needed Pre co GI e Alexandr Sergeevich F Ka Alexandr Sergeevich Pushkin Alexandr Sergeevich Pushkin eae Sergeevich Pushkin A Alexandr Sergeevich F Alexandr Sergeevich P b lexandr Sergeevich Pushkin Alexandr Sergeevich F 2007 2011 ALEE Software GUI Machine 1 5 8 page 140 of 236 GUI Machine User s Manual One more way of selecting images There is one more way to select
118. esesesesesesecseseseseeees 78 Table 14 Properties for the progress NO al ccs sepeciesescc tase seen sncnceecacs i Enia ATEA TEETE ra A 79 Tabe to Properes or ANS 6 na OA AAE I ERA N A E E T AE TEANTA 79 Taole 16 Propa es orhe DINNE asra E E AA EE S 80 TOEL PODA ear E OE a EE E E R EAE 80 Table 13 Proparties 10r Soll Da S nsen S TEETAR EA 81 Toe ans Or CCS E E E E 82 E e 9740p a ee E 0 a E E E A A EE E E E E EEE E ET T 83 Tane 2L PY OSS wW ON a a E A A E E E E N E EE E EAE EE E S 84 fF oem ol 0 6 Gil Or TAES sa E E E AAE AE EEE E A EE E N EA A 85 Tape 2o ws 1 6 61 ail ciow or Google MAp eea E ven nenebent Sr rnerirnetets cnr en teri erereneente tse eeerreweerte 86 Table 24 Properties for Collapsible Pane ceessssesesssesesssscsesesscsesesscscsesscsesesessesesesssesesssssesessesesessesesesesseseseseecsescseseaseees 87 Wale 2B ee E CIOCK E E EE E E E E E A AEE A E 88 Table ZG Propernes for the audio playal ssnrsnsnnani ien E vatseeisetdeaiet ears 89 o a7 Prope Ne dor ine connec OD e E E 89 Table 28 Properties for 1 0 ae ne no ae ae ene ee a ee 90 Table 29 Properties for data fields and calendarS sissisisssvissssresssiriissssisvisisurissarosasissevssevusississiisrisedsasisvisssevisnisevdiacisivssiisvsvask 90 Tape O Popas or me Tay I O ner AE E E eer ee eee 91 Table 31 Tools for working with layers cccessssssessssessesessesessssssssesssssssssessssesssssssscssesessesessssesussesessssesesseseesesesssseseseseeesse
119. ess field is blocked The action is described in details 6 4 2 7m Closing Opening the window Santre dlesie wineoue Allows to optimize the size of the window so that it be enough for containing th objects inserted into it or Window pack If a dynamic layout is inserted into the window the zones whose size is indicated in percentage of the free space will act as zones whose size as indicated as preferred Mowing resizing window The action is described in details in 6 4 3 Moving resizing window Allows to display the pop up menu over the show pop up menu object of the action par 2007 2011 ALEE Software GUI Machine 1 5 8 page 171 of 236 GUI Machine User s Manual After the event specified by the user the object of the action will be clicked upon as if by the mouse Settings ey Perform click gt Click delay Allows to enter the time in milliseconds after which the object will be clicked upon 1000 milliseconds 1 second Allows to transfer the focus to the selected aa Focus transfer l object 2 Play Allows to start playing a sound file Stop Allows to stop playing a sound file Add icon to tray Allows to add an icon to the tray Remove icon from tray Allows to remove the icon from the tray The detailed description of this actions is Show tray message given in 6 4 4 Actions for displaying the j message in the tray icon The detaile
120. etup Wiza d ssa on aaaea EN ENa TE eS aa eea NEEN REESE 10 Figure 3 Destination directory SOIC CTO I esasteestwstucesencszeneeseeratseeneshaersuednsauiacesttesseetdaest a avastuassuahdondesncarthectenstencdaanenleaaatedlsaeernteeet 11 Figure 4 Manual directory SelSCtION cccssssessesessessssesssessssessessssssssesessssessssesssnssesesssssenesssussesscssseesessssssssesseseesesssesassessnesesesees 12 Figure 5 Creating file associat ONS issersaenit ae ad e ae aasan a i aaa coca ede ect 13 Figure 6 Selection of the JOCATION TOMSMONMCUNS essasi ieee nouetteetaceneec 13 Foures CUL Machine INS laO Maase ar r tens ESERE E T E uetsenae 14 Figure 8 Installation completed ses ssseseseesssessssessseessseesseresssesssreessresseessseessereoserossreossresstresstesssreoserossreossresstessessesseseeseeseesesse 15 Figure 9 The activation of GUI Machine ssssssssssssssssssssessssesssssssssssssssssssssssssessssecsssssssssssesssesssessesessessesessseseseseseesesesenees 16 ourc LO Enta no ne OE O e E ES 17 Figure 11 The information about the incorrect license Key cecesessesssssssessssessssesessseseseeseeesecsseeseseesesseseeseseeseensseeeeeeeees 18 Figure 12 Information about the lICENSEC ce esssessssssssssssessssessessesessssesssssssesssesssssssssssssussessssessesecsesessessssesseseseseseseeeasseasess 19 Figure 13 License agreement eee ssessesssseeesseessrssseessrosseesseessresseessrosseesseessereseessereseesseeossreseesssrossres
121. ew snapshot will be added to the list Creating smart images With smart snapshots you need not select the area manually for it is selected automatically when clicking on the object The area is set above the object that has been clicked The spacing settings are taken into consideration To make a smart snapshot gt press the button for creating smart snapshots or the S key gt on the workspace click on the object the snapshot of which you would like to add An example of creating a smart snapshot is given on the figure below The following objects have been left clicked upon successively gt the Align left button gt the Large icon text gap button gt the Text at bottom button _ Heels simple ompi gag E Ei Image 102 png ao I Align left 1 E E I Align left png E J Large icon text gap png I Text at bottom png par 2007 2011 ALEE Software Tett F Large icon text gap EE a lconed a a Text at bottom Text atimage Disabled Disabled icon F On pre Figure 178 Making a smart snapshot GUI Machine 1 5 8 i Area shadowing n oN Ce ae a a iy 0 50 100 o Smart selection border spacing Top 5 Left 5 Bottom 5 Right 5 page 196 of 236 GUI Machine User s Manual As the spacing was set as 5 5 5 5 these settings were taken into consideration Three new images have been added to the list Smart snapshots are named automatically
122. ewsedeneeaneelect lt asdes 218 10 PU GRABBER as cece cs cccesacest ces tease nccecnd can cc casscats Saceda dens hecevcaaeasccustcabccscustncdsccedecudeacassacheccatacecssaniesdscssssidausslesssteccssseeds 219 11 THE SCREENSHOT MAKING TOOL PRINT SCREEN ccccssscscsscscccsccsccsscscscccccscccccsccscccccssccccsssccssssccocees 221 14 USER MANUAL AND INFORMATION Lu0 ccccccccccssssssscscssscssssssscccccccccccecccccscccssssssccsccccsccsccsscscccecccccccccccces 226 15 FEEDBACK nsssnvssensesnvesavsssnssenssssssssnssensessnesenecensessnesensssvessnssensssnssssnsssnessssssenssenssssnessnssensessnssenesenssssnssensssnsesssssenssensseess 227 2007 2011 ALEE Software GUI Machine 1 5 8 page 4 of 236 GUI Machine User s Manual 15 KEYBOARD SHORICUTS s cisieinioiacissispiinii rnea ersa saa Eaa SE EE aa Eaa SEEE Eaa iaaea daiane akarana rias 229 16 CONCLUSION corea E eases erent ee sneraseriseested 231 APPENDE 1 UST OF TABLES iscissi aaoiiaoecaoe dinaa aes SaaS naear aren ie Ther ter ieee rrr meyer error ener Tr 232 APPENDIX 2 LST OF FIGURES sscscscesssscbsscoscsconsereccecassst02cetousezestesestetelcaceviecescexsscevel cots yisias ostasaves sesastevta cuss savesenseauuotacsseriasiate 233 Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 5 of 236 GUI Machine User s Manual 1 Introducing GUI Machine 1 1 About the program The program GUI Machine is designed for crea
123. from the tree by pressing the button sas In the field located on the left of the button the name of the object being inserted will be displayed Select the item to insert the object in the sketch of the layout in the lower part of the window Then press the Save button Example The task is to insert a calendar into the cells marked with red after pressing the appropriate buttin figure 149 e a CEA E e a I l l l i auanei ee Ia __Insertealendor ff i ie SUN MON TUE WED THU FRI SAT 1 2 3 WJ G6 7 8 amp 9 10 11 12 1B 14 15 1 17 18 19 20 21 2 23 24 25 26 A 7 8 79 30 kb Figure 149 Inserting a calendar into layout cells Add the action Object insert or cells clear and configure its settings as follows fig 150 gt the event object VaadinButton5 Calendar gt the object of the action dynamic layout Select the Object checkbox and add VaadinCalendar2 from the tree like structure Press the button Add action 2007 2011 ALEE Software GUI Machine 1 5 8 page 175 of 236 GUI Machine User s Manual 4 Action settings oo Layouts i Object insert or dear v Clear cells before insert Figure 150 Adding an action The work of the action is shown on the figure below cod Preview Layouts J lf HH Preview Layout5 Figure 151 The work of the the action of inserting Pe 2007 2011 ALEE Software GUI Machine 1 5 8 page 176 of 236 GUI Machine User s Manual a Action setti
124. g guidelines To move a guideline mouse it over the appearance of the cursor must change and move it to any place on the edit area 2007 2011 ALEE Software GUI Machine 1 5 8 page 52 of 236 GUI Machine User s Manual It is also possible to create two intersecting guidelines Mouse the intersection over and move it to any place on the edit area Hiding guidelines To hide the guidelines select Tools and Frames Area Settings and click the icon m show guidelines To display the guidelines click this button again Deleting guidelines To delete a guideline drag it to the area where the ruler is located To delete all guidelines select the item Tools And Frames Area Settings and click on the icon delete guidelines You should see the following window appear Guidelines removal Horizontal only Vertical only Figure 53 Deleting guidelines Select the guidelines to delete in the dropdown list The following options are available x All x Horizontal only x Vertical only Select the necessary option and press OK Locking the guidelines To lock the guidelines select the item Tools and Frames Area Settings and click on the icon A lock the guidelines This will make the moving of the guidelines impossible If you need to move the guidelines click on this icon again 3 4 2 Settings for prototype preview The set of tools for prototype preview is given on the figure below ar 2007 20
125. g the editor Q Each new entry is added to the end of the list You can navigate the history in one of the following ways gt by selecting an entry in the history and clicking upon it gt by selecting the items Undo and Redo in the Edit menu gt by pressing Ctrl Z and Ctrl Shift Z gt by selecting and entry in the History and pressing the arrow keys 2 2007 2011 ALEE Software GUI Machine 1 5 8 page 217 of 236 GUI Machine User s Manual 10 Pixel Grabber Pixel Grabber is the tool for defining the color of display dots It can be used when working GUI Machine and separately To launch Pixel Grabber select Tools and Frames Pixel Grabber the icon To launch Pixel Grabber without launching GUI Machine press the Start button Select All programs GUI Machine Pixel Grabber You can also go to GUI Machine save directory and double click on the file pixelgrabber exe With the help of the Pixel Grabber you can define the color of any display dot in the RGB format Pixel Grabber is very simple and easy to use Pixel Grabber Tipumep 6 23 27 14171B MACHINE Figure 202 PixelGrabber rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 218 of 236 GUI Machine User s Manual The PixelGrabber tool consists of the following elements Icon Description ua Start Pause recording A Eyedropper tool m Image selection tool Zooming the r
126. ged when clearing cells or inserting a new object ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 126 of 236 GUI Machine User s Manual The size indicate in percentage of the free layout space can be changed dynamically The free space of the layout is that left after selecting the zones whose size is indicated in pixels or set as the preferred size It is these zones that are changed when changing the size of the layout The size of at least one zone in the layout should be indicated in the percentage of free space To indicate the size of a zone in percentage of free layout space press the button C The button above the last zone with the size in percentage of free layout space is blocked Ea To set the size as the preferred size press E to set the size in pixels press Example 100 a o TI F m g fy g g 1 i i E g i 8 Ge 2 de ae Ald eens ee e 0 E in 4 i a ee a a Figure 106 Type of the size of the layout cells On figure 106 it is obvious that gt zone 1 the size of which is indicated in pixels was not resized during the preview gt zone 2 whose size is set as preferred size was diminished and fitted to the size of the object inserted in it gt zones 3 and 4 whose sized is indicated in percentage of the free layout space increased 25 and 75 of the space occupied by zone 2 The layout contains one column whose size ought to have been indicated in percentage of free l
127. gnment Center Figure 120 Fitting to image size If you select the option Fit to full object size the image will be extended to the size of the selected cells Background settings Horizontal alignment Center i Vertical alignment Center Figure 121 Fitting to full image size If you select the option Alpha layer the selected cells will be filled with alpha layer The alpha layer is a sequence of squares used for marking transparent areas Enter the size of a square side in pixels in the field Square size The default size of a square size is 10 pixels You can also select the color for the squared K Far A 2007 2011 ALEE Software GUI Machine 1 5 8 page 134 of 236 GUI Machine User s Manual After changing the settings press the Save button Background settings Alpha layer Cf Square size 10 Light color z al Background preview Figure 122 Settings for the alpha layer F 2007 2011 ALEE Software GUI Machine 1 5 8 page 135 of 236 GUI Machine User s Manual Example On the figure below you can see a layout in which backgrounds with all possible settings are used f E Ei _ 100 100 100 a Ua m E E rererere erer Er a 8 Background tyoe Color P Color Red F CE FSS e SS SS SSS SS Er a Background type Alpha layer E Alpha rectangle width 10 Colors White Gray i Se SS i ee 2 ae ee ee ee ee eee ee ee eee eee E e Background type Alpha fayer a
128. hen the button is hovered pE Selected rollover image Allows to select the image which will be displayed when the button is selected and hovered Pressed image Allows to select the image which will be displayed when the button is pressed jE Disabled image Allows to select the image which will be displayed when the button is disabled jE Selected disabled image Allows to select the image which will be displayed when the button is selected and disabled Text This property allows to select the text for the button Selected text Allows to enter the text which will be displayed when the button is selected Disabled text Allows to enter the text which will be displayed when the button is hovered Selected disabled text Allows to enter the text which will be displayed when the button is selected and hovered Rollover text Allows to enter the text which will be displayed when the button is pressed Pressed text Allows to enter the text which will be displayed when the button is disabled B Mnemonic Allows to set a mnemonic for a button t Gap Allows to set a gap between the image and the 7 text i Text shift Allows to set the size of the lacunes in the text Horizontal alignment Allows to align the content horizontally Three options are available Center Left Right Vertical alignment Allows to align the content vertically Th
129. hout menus The item Choose window menu bar allows to select a menu for the window Click on the menu on the edit area after selecting this item The item Choose default focus component allows to select the element of the window to which the focus will be transferred on opening If a menu is linked to the window two more items are added T Change window menu bar T Unlink window menu bar Figure 189 Additional items for windows containing menus The item Change window menu bar allows to replace the existing menu by a new one Click on a new menu on the edit area after selecting this item The item Unlink menu bar allows to cancel the link between the window and its menu bar 2007 2011 ALEE Software GUI Machine 1 5 8 page 205 of 236 GUI Machine User s Manual Additional context menu items for images Edit image Copy image path to clipboard Figure 190 Additional context menu items for images Select the item Edit image to launch the image editor If you want to copy the path to the image select the appropriate item Additional context menu items for dynamic layouts Add object by cells Change selected cell background Change cells background Clear cells background Set all px columns width ot id i oo Set all px rows height Figure 191 Additional context menu items for dynamic layouts The functions of all items are described in the table below Table 38 Additional context menu items for dyna
130. information A standard widget used for entering passwords Password field allows to create a field similar to a text field that users can type into This field however Password field E causes everything show up as asterisks so onlookers cannot see what is being typed An interface element inside which texts are type and _ Text area element Ej HTML editor A text area designed for work with HTML texts E Condition Condition Permits the user to make multiple selections from a wP number of options or to have the user answer yes Checkbox checked or no not checked on a simple yes no question Allows to select one of the predefined set of Radiobutton options r 2007 2011 ALEE Software GUI Machine 1 5 8 page 64 of 236 GUI Machine User s Manual E Ea Compound Compound A widget standing for another interface element ys Placeholder J J o A widget used to convey the progress of a task such Progress bar as a download or file transfer It is a combination of a dropdown list and a single E line textbox allowing the user to either type a value i Combobox directly into the control or choose from the list of existing options A widget with which continuous text pictures or T anything else can be scrolled i e viewed even if it Scroll bar does not fit into the space in a display window or viewport TE A widget with which a user may set a value by Slid
131. ize of the font Font color Allows to select the font color mh GC G en 2007 2011 ALEE Software GUI Machine 1 5 8 page 88 of 236 GUI Machine User s Manual Background color Allows to select background color 4 2 1 23 Properties for the audio player Table 26 Properties for the audio player Properties for the audio player M Audio resource Allows to select an audio file to be played The location of the file should be typed manually in the text field Now it is possible to play mp3 files only 4 2 1 24 Properties for the connector object Table 27 Properties for the connector object Properties for the connector object oe Port number Allows to set the port number for connection 3 BL i w 2007 2011 ALEE Software GUI Machine 1 5 8 page 89 of 236 GUI Machine User s Manual 4 2 1 25 Properties for shapes Table 28 Properties for shapes Icon Property Description Properties for shapes ae Moves window Allows to change the position of the window Allows to resize the window when holding the Resizes window figure Allows to round the corners of the rectangles The property is coded by two values separated from each other by a column For circular rounding enter two equal values For elliptical rounding enter two different values If the first number is greater than the second the
132. lapsed Allows to collapse the pane p maie Allows to select the image which will be J displayed in the panel header Allows to enter the text which will be displayed Text in the panel header A Font Allows to select the style and the size of the font rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 87 of 236 GUI Machine User s Manual A Font color Allows to select the font color E Background color Allows to select background color 4 2 1 22 Properties for clocks Table 25 Properties for clocks Icon Property Description Properties for clocks Allows to set the pattern for displaying time and date By default the time is displayed according to the pattern hh mm ss The following patterns are also possible Date format Result yyyy MM dd G at HH mm ss z 2011 04 04 AD at 10 46 46 MSD Es EEE MMM d yy Mon Apr 4 11 h mm a 10 46 AM HE amp Time pattern hh o dock a zzz 10 o clock AM MSD i K mm a z 10 46 AM MSD m yyyyy MMMMM dd GGG hh mm aaa 02011 April 04 AD 10 46 AM EEE d MMM yyyy HH mm ss Z Mon 4 Apr 2011 10 46 46 0400 yyMMddHHmmssZ 110404104646 0400 Ht yyyy MM dd T HH mm ss SSSZ 2011 04 04T10 46 46 197 0400 l Hi Allows to select the type of the clock clock stop IOS Pe watch timer Allows to set the time interval for the timer in Time to complete millisec Font Allows to select the style and the s
133. le the menu items the Enabled column set mnemonics for menu items by pressing Alt mnemonic create submenus for menu items change the text of menu items using the HTML editor add images to menu items the Icon column create keyboard shortcuts for menu items the Hotkey column e 2007 2011 ALEE Software GUI Machine 1 5 8 page 105 of 236 GUI Machine User s Manual Figure 83 Pop up menu editor Q Pressing the hot keys during the preview is equal to the selection of the items You can see the menu with the settings as shown above on the figure below ig Copy Ctrl C E Paste Ctrl V Undo Ctrl Z C Redo Ctrl R Insert ASCH value Ctrl I Always on top Ctrl T Figure 84 A pop up menu If you need to edit the text of the menu items without changing their format you can do it on the edit area by double clicking them an 2007 2011 ALEE Software GUI Machine 1 5 8 page 106 of 236 GUI Machine User s Manual U Copy Ctrl C Undo Ctrl Z C Redo Ctrl R Insert ASCH value Ctrl I Always on top Ctrl T Figure 85 Editing pop up menu items You can edit the item even if it contains HTML text ig Copy Ctrl C Paste Ctrl i Undo Ctrl Z Redo Ctrl R Insert ASCH value Ctrl Figure 86 Editing HTML text in popup menu items You can add a submenu to any of the items by hovering it and opening the context menu by a right button click y E Cale Edit View Help
134. lect Image and press the button located on the right of the text You can also open this tool by double clicking on the image on the edit area Then the following window with three text should open gt For file a standard system window 1 5 710_html_m27516a9 Ma 1 5 711_htrnl_m3bfccO2F Me 1 5 712_html_md amp baaat Ma 1 5 710_htrnl_m318a7f30 W 1 5 711_html_m3e02611 Mi 1 5 713_html_23b041e2 DA gegl 0 0 Ba 1 5 710_html_m50dab4d2 Mi 1 5 711_html_m70e9a758 E 1 5 713_html_35d83b94 Jo My Axure RP Libraries E 1 5 710_htrl_m5b82524c My 1 5 711_html_m7d24541b E 1 5 713_htrnl_371b9561 J My Axure RP Prototypes E 1 5 710_html_m5d2faaQa 15 712 html i1b7217ce E 1 5 713_html_4906fd6l 1 5 710_html_18d7ect 1 5 710_html_m5d35dc80 Ma 1 5 712_html_360 826e M 1 5 713_html_4bf994de 1 5 710_html_23b041e2 BM 1 5 710_htrol_m5d595 20 Me 1 5 712_html_3b959546 W 1 5 713_html_51ddc25 1 5 710_html_2522a961 M 1 5 710_html_m60eec510 is 1 5 712_html_45b6d20c E 1 5 713_html_58aadd22 1 5 710_html_431ed65c 1 5 710_html_m6733d2cd Ba 1 5 712_html_4bcff609 ME 1 5 713_html_m257d03 1 5 710_html_55084fdf 1 5 710_html_m67a16498 W 1 5 712_htrnl552b427e Me 1 5 713_html_m59edace i 1 5 710_html_561a6668 E 1 5 710_html_m6e4b57d3 E 1 5 712_html_5bf19423f E 1 5 713_html_m6a63f63 1 5 710_html_562221ae Mi 1 5 710_htrl_m7ed7893d M 1 5 712_html_6f19344 W 1 5 714_html_m69f2ale
135. lity to toggle a EL Toggle button Ig state It has two states select and deselected El E Images Images E Allows to insert images in the prototype Image g p yp A widget allowing to divide the parts of the interface Separator B E Layout Layouts This is the wireframe of dynamic interfaces It allows to divide the area into cells and arrange the objects Dynamic layout inside Each cells can be resized The objects in the layout are resized when resizing the interface Allows to arrange objects inside without lining It fits automatically to the size of the objects it Static layout contains The objects in the layout are not resized when viewing the prototype Allows multiple elements to be contained within a single window using tabs as navigational widgets for Tabbed pane an p switching between these elements rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 63 of 236 GUI Machine User s Manual Allows to divide the interface into logical parts as ma Panel well as to arrange control elements A panel with a draggable divider also called splitter HLI Split pane between two components It allows the user to change the size of the components dynamically j c Text Text A standard widget used for displaying text on the 7 Text label screen H An interface element allowing the user to enter text Text field
136. llows to add image to the tray icon fara 2007 2011 ALEE Software GUI Machine 1 5 8 page 91 of 236 GUI Machine User s Manual 4 2 2 Auxiliary tools Some object properties are set with the help of auxiliary tools These tools are described below 4 2 2 1 HTML Text editor HTML Text editor is designed for typing editing and formatting text The interface of this tool is simple and user familiar To launch HTML Texkcmoeoeo pe akmopa you need to gt open the properties object gt select Text property gt click on the button located right near this property Eg Object properties El Properties for JLabel Gap 4 Al Font Tahoma Plain 11 w EEA aon OF O O 0D wee Left Figure 68 Launching the HTML editor Q If you do no need to work with HTML text there is no need to launch theHTML Text editor It is sufficient to type the text in the text field The main window of the tool includes 3 tabs v HTML editor v HTML code v Text editor e 2007 2011 ALEE Software GUI Machine 1 5 8 page 92 of 236 GUI Machine User s Manual HTML editor allows to create and edit texts in HMTL format You do not need to know HTML language to work with the editor The workspace of the editor includes gt the toolbar gt the workspace where the text is entered gt HTML Text editing E Vel ecto DaAMHOCHAHANAIAQOOHQNHumS be GG GAGEA In this window you BBM tvo a You can edi
137. mic layouts Icon Item Description Allows to insert an object into several layout cells After selecting this item choose the cells for the object being inserted and the select the object itself on the edit area fa Add object by cells Change selected cell backgrounds H Change background for the selected cell 2007 2011 ALEE Software GUI Machine 1 5 8 page 206 of 236 Allows to change the background for the cells specified by the user GUI Machine User s Manual Change cells background Allows to change the background for all layout cells Clear cells background Allows to clear the background of layout cells uae E E Allows to set the width for all columns whose size is d P indicated in pixels Allows to set the height for all columns whose size is tL Set px columns height inrsheeneal npe The detailed description of all tools described above is given in 5 3 Working with dynamic layouts The additional context menu items for toggle buttons checkboxes and radiobuttons Toggle check state Group buttons Figure 192 The specific items for toggle buttons checkboxes and radiobuttons When the item Toggle check state is chosen the value of the Selected property is changed to the opposite You can change the value of this property for several objects at once x 2007 2011 ALEE Software GUI Machine 1 5 8 page 207 of 236 GUI Machine User s Manual
138. n comprises a set of most widely components ready made interface elements including Vaadin web components set gt The application comprises special modules giving additional options for creating and editing prototypes v Image Editor v Print Screen a screenshot making tool v Pixel Grabber a special tool for defining display dots color in RGB format gt Interface languages English and Russian What platforms does GUI Machine support GUI Machine is a crossplatform application able to work on different operating systems vy Windows vY Linux Yy Mac OS x 2007 2011 ALEE Software GUI Machine 1 5 8 page 7 of 236 GUI Machine User s Manual 1 2 How to use this manual Each item in the table of contents contains a hyperlink to the corresponding page The page can be opened by clicking its number Most of the programs used for viewing documents have a function of key words search For further information please consult the manual of the viewer you use 1 3 Support Useful links http www gui machine ru GUI Machine official website news updates technical support http www gui machine com forum GUI Machine Forum where you can ask any questions concerning work in GUI Machine and express your opinion about the program Contacts You can contact us and ask all questions concerning the work in GUI Machine on our forum http www gui machine com forum or by e mail gui alee com e 2007 2011 AL
139. n the program there are two ways of clearing the background of cells gt total clearing x 2007 2011 ALEE Software GUI Machine 1 5 8 page 137 of 236 GUI Machine User s Manual gt selective clearing Total clearing is removing all backgrouns from the cells For total clearing gt Select the item Clear cells background in the context menu Add object by cells E Change selected cell background Change cells background J Clear cells background Figure 126 Clearing the background of cells gt press the left mouse button and select the cells to be cleared After clearing the cells will have the background indicated in Background color property Selective clearing allows to remove one of the previously set backgrounds gt select the item Clear cells background in the context menu Press the left mouse button and select the cells the background of which you need to clear Press Clear button in the window that should open During the selective clearing choose the cells for which the background was cells The button g Clear will not be active otherwise Q The property Background color does not depend upon the background set by means of the operations described above If you change the background of all cells with the help of the context menu the property will remain unchanged The background selected in the context menu is displayed above the background indicated in the g property Background color
140. nce object type or object ID It is possible to modify the properties of several objects when selecting all of them 4 2 1 The Description of Object Properties 4 2 1 1 Standard Properties Standard properties are those which can be attributed to all objects They are described in the table below Table 3 Standard object properties Icon Property Description Standard object properties By changing this property you can change the GA Tool tip text text in the tooltip appearing when hovering the cursor on the object K Cursor This property allows to select a cursor for the object from a predefined set 2007 2011 ALEE Software GUI Machine 1 5 8 page 69 of 236 GUI Machine User s Manual A Visible By changing this property you can make the object visible invisible on the edit area Allows to change the opacity of the object in the range from 0 tranparent to 1 absolutely Opacity onai H Scroll bars Allows to switch the display of scrollbars on off This property works only when the scrollbars are on It allows to set up the display of the horizonal scroll bar JE Horizontal scroll The following options can be selected from the dropdown list e Always show e Show when needed e Never show This property works only when the scrollbars are on It allows to set up the display of the vertical scroll bar Es Vertical scroll The following options can be selected from
141. ndow menu bar then click on the menu so it be inserted into the window gt In the properties of the window select the property Window menu bar and select the menu to be inserted into the window in the tree You can also select a submenu for each menu item by the following ways gt Right click on the item to which you would like to a add a submenu The context menu will open Select the item Choose popup for menu in the context menu and then left click on the necessary submenu gt Open the Menu editor In the column Popup menu select the submenu for the item by pressing the button sas 2007 2011 ALEE Software GUI Machine 1 5 8 page 144 of 236 GUI Machine User s Manual A window containing a menu with a submenu is shown on the figure below Fp Edit View 2 Help Ctrl C 45 2 Ctrl V 256 128 CtrleZ d 3 0 I Sibi iaiia Ctrl R Insert ASCII value Always on top Ctrl T Figure 133 A window with a menu To unlink the menu and the window select the item Unlink window menu bar in the context menu To replace the existing menu by another one open the context menu and select the item Change window menu bar Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 145 of 236 GUI Machine User s Manual How to create a tailor made window In GUI Machine it possible to create original windows not only rectangular but also round elliptical etc To create a tailor made window gt add a window to the
142. ne on your computer tis recommended that you dose all other applications before MACHINE Click Next to continue or Cancel to exit Setup Figure 2 GUI Machine Setup Wizard Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 10 of 236 GUI Machine User s Manual Press Next to continue The next screen will allow you to select the location where GUI Machine will be installed The default location is the following X Program files AleeGuiMachine where X is for the system drive letter Setup GUI Machine Select Destination Directory Where should GUI Machine be installed Select the folder where you would like GUI Machine to be installed then cick Next Destination directory C Program Files Alee Gui Machine Required disk space 115 8 MB Free disk space 61 650 MB Alee Software 1997 2011 Figure 3 Destination directory selection Enter the location in Destination directory field or press Browse button The following screen should then appear a 2007 2011 ALEE Software GUI Machine 1 5 8 page 11 of 236 GUI Machine User s Manual E Fa ounh cron ji KonnbtoTep a amp Vitaos C E Perflogs G ATI Technologies Axure Figure 4 Manual directory selection Select the location and press OK Press Next to continue The next window will allow you to create file associations You can choose file extensions by selecting check boxes or by clicking buttons Select all
143. ngs HH Layouts i Object insert or cells dear C dear cells None selected Select layout cells Figure 152 Clearing layout cells To clear the cells deselect the checkbox Object The text of this checkbox will be changed into Clear cells and the object selection field will be blocked figure 152 In the sketch of the layout select the cells to be cleared This action is configured similarly to the action of inserting objects into the layout described above 6 4 1 3 Inserting an object without clearing cells The default settings for the action of inserting suppose that the cells the inserting of a new object the cells are cleared If you do not want to clear the cells deselect the checkbox Clear cells before insert New objects will be inserted without deleting the existing content e 2007 2011 ALEE Software GUI Machine 1 5 8 page 177 of 236 GUI Machine User s Manual 6 4 2 Opening closing windows Almost all interfaces include windows It is impossible to create a realistic prototypes without actions related to windows The objects of the action gt Window gt Vaadin window Open Do not move outside screen bounds Relative to object X 1 Y 1 i Available parameters i Usage examples Figure 153 Settings for opening the window Select the necessary option gt Open gt Close gt Change state to the opposite If you choose the option Cl
144. nstall wizard should appear on the screen Press Next to continue If you do not want to uninstall the program press Cancel Pay 2007 2011 ALEE Software GUI Machine 1 5 8 page 30 of 236 GUI Machine User s Manual When the uninstall is finish you should see the following window appear GUI Machine Uninstall GUI Machine was successfully removed from your computer MACHINE Figure 24 Uninstall completed Press OK If the files of the program are not deleted delete them manually en 2007 2011 ALEE Software GUI Machine 1 5 8 page 31 of 236 GUI Machine User s Manual 3 Workspace 3 1 General information about GUI Machine workspace GUI Machine workspace comprises the following elements O40 Demo Project i Program Files A Jachine demo Demo Project Demo Project qui GUI Machine leone File amp Edit amp 3 Standard amp y Extended Shapes gt Vaadin Tools and frames Help gt Lad B amp B n l New project Open project Demo projects Save project Save as Export prototype Exportimages Export screenshots Project settings Program settings Printpages Show pages Print settings Close GUI N Start working Save changes Export Configure Print Finish wo 50 100 150 200 250 200 250 400 450 500 550 600 650 i700 750 800 850 900 1000 1050 1100 1150 120 Textatlet Q recat op _ On press change undecorated With simple HTML Words wrapping due to z i
145. nt 2007 2011 ALEE Software GUI Machine 1 5 8 page 20 of 236 GUI Machine User s Manual Then you should see the following window appear GUI Machine activation GU MACHINE Activation completed 1 You can start working with GUI Machine Q Connection settings Figure 14 Activation completed 2 3 2 Activating the license without Internet connection If your computer is not connected to the Internet or your Internet connection is limited the program will offer you to activate the license manually an 2007 2011 ALEE Software GUI Machine 1 5 8 page 21 of 236 GUI Machine User s Manual o GUI MACHINE Unable to complete automatic license activation There might be some problems with internet connection or local license might be corrupted You can manually activate GUI Machine by pressing Next You can also change Your license by pressing Change license button a Q Connection settings Figure 15 The dialog box offering to activate the license manually Press Next The window with the activation code should appear on the screen e 2007 2011 ALEE Software GUI Machine 1 5 8 page 22 of 236 GUI Machine User s Manual c7FOS30bF9S7 1 ab0SScb953762a82024 And enter Your license number and copied code on our site http gui machine com Im activate Q Connection settings Figure 16 Activation code oe 2007 2011 ALEE Software GUI Machine 1 5 8 page
146. o Ee Be amp Baek BAe E Figure 108 Setting the size of layout zones The size of the zones can also be set up manually by moving the slider e 2007 2011 ALEE Software GUI Machine 1 5 8 page 128 of 236 GUI Machine User s Manual 5 3 3 Inserting an object in several cells There are two ways of inserting objects in several layout cells gt stretch the object over the cells a i k a Se tl J T 13 A l l l leee Lsn LI Figure 109 Stretching the object over two layout cells gt open the context menu and select the item Add object by cells Select the cells keeping the left mouse button pressed and insert the object ey 79 LO0 m m e e eee g D 100 co Le Le Figure 110 Inserting an object in two layout cells If the object exceeds the size of the layout it will be decreased to the size of a layout cell If it is impossible to decrease the object it will not be inserting and you should see the following tooltip Unable to link object with layout because of object minimum size limit You can try to decrease object minimum size or increase layout cell size Figure 111 An error occuring at inserting an object into a dynamic layout x 2007 2011 ALEE Software GUI Machine 1 5 8 page 129 of 236 GUI Machine User s Manual 5 3 4 The background of cells In GUI Machine it is possible to change the background of the selected layout
147. open pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 214 of 236 GUI Machine User s Manual Figure 199 Canvas size To change the size of canvas enter the width and the height in pixels To specify the position of the image use the arrows There are 10 possible positions for an image on the area pari 2007 2011 ALEE Software GUI Machine 1 5 8 page 215 of 236 GUI Machine User s Manual 9 4 Saving images After editing the image press the Save button The following window will open Figure 200 Saving an image After pressing the Yes button the source image file will be modified If you press the No button the new image file will be created The source file will remain unchanged Fari 2007 2011 ALEE Software GUI Machine 1 5 8 page 216 of 236 GUI Machine User s Manual 9 5 The History tool With the help of the History tool you can return to any previous state of the image in the current workimg session Each time you bring a change a new entry is added to the History Specify the stage you would like to return to by selecting the appropriate entry Actions history Fa Pendil Fa Pendil Fa Pendil ra Pencil Fa Pencil Pencil Fa Pendil Ea Image inserted Fi Pencil Pencil Figure 201 Image editor history tool Operations of configuring the settings of the editor are not registered in the history for they do a not modify the image g The history is cleared after closin
148. ose all other fields will be blocked i Available parameters i Usage examples Figure 154 Settings for closing window There is no need to configure any additional settings Save the action and check it for correctness pan 2007 2011 ALEE Software GUI Machine 1 5 8 page 178 of 236 GUI Machine User s Manual If you select the options Open or Change state to opposite the additional settings are available The checkbox Do not move outside screen bounds allows prohibits to locate the window beyond the borders of the screen There are four options for locating the opening window on the screen gt Under event object the window opens right under the object of the event The fields for setting coordinates are blocked gt Middle of the screen the window opens in the center of the screen The fields for setting coordinates are blocked gt Relative to object the shifting of the object relative to the upper left point of the object of the actionis entered in coordinates x y gt Exact x y coordinates the shifting of the object relative to the upper left corner of the screen is entered in coordinates x y Settings for the coordinates of object shifting Coordinates X Y can be specified by two ways gt in exact number of pixels gt in special parameters Th coordinates in exact number of pixels can be set us gt 0 0 for locating the upper left point of the window e
149. ows to choose one of the three possible selection modes for the elements of the tree Tree selection mode e Single selection e Block selection e Multiple selection Show tree root Allows to display the root of the tree A 2007 2011 ALEE Software GUI Machine 1 5 8 page 82 of 236 GUI Machine User s Manual 4 2 1 17 Properties for tables Table 20 Properties for tables Icon Property Description Properties for tables ii Table settings Displays the number of columns and rows in the table Allows to edit them Table resize mode Allows to resize the table Allows to reorder the columns when viewing the Ti Columns reordering allowed J table Allows to choose the elements of the table rows Selection type E yp cells columns to be selected Allows to choose the color for the selected Selection foreground 9 elements of the table Allows to choose the background color for the Selection background J selected elements of the table E Show header Allows to display hide the header of the table A Font Allows to select the style and the size of the font A Font color Allows to select the font color jn Background color Allows to select background color e 2007 2011 ALEE Software GUI Machine 1 5 8 page 83 of 236 GUI Machine User s Manual 4 2 1 18 Properties for windows Table 21 Properties for windows Icon Prop
150. ox Do same action for all conflicts in order to repeat the selected operations in case of future conflicts ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 197 of 236 2007 2011 ALEE Software GUI Machine User s Manual 7 2 3 Exporting screenshots The screenshot making tool allows to create and export the screenshots of the prototype automatically Select the item Export screenshots in the File menu The window containing the previews of all objects saved for quick preview launch will open Background color v Screenshot delay 300 ms Fj Do not load actions You can add object E by dragging it on list or double clicking in tree ia Layers H EER H Layout i Eaa JTabbedPane GE oh AudioPlayer2 H EE GR Window Alee CRM WEB F Sort_projects m VaadinProgressBar 1 Text VaadinwWindowl png im VaadinProgressBar 1 Text Imagei H EEA Hii Layoutt kaneHkgapb prng COpTHpoOBEa png Set E Da ermee a ae a tanet png BHHMaHHe BHen Export to folder Users aemeljanov Desktop ckpraHwotbAlee CRM Web screenshots Vaadinvwindowl png A Oe Te Ei arene hf rrian y L CopThposka 111 png CopThpoeka_ 1i png Screenshots set JSplitFane 1 png Yaadinwindow 1 png KL_card png Novick _NpeANpH Figure 180 The main window of the screenshot export tool YaadinwWindowl prg a t gh By ori Dune Tp png Drag the objec
151. place it above or below or between other panels gt To fix a group of panels drag it to the joint by the header gt To delete a panel drag it out of the joint or double click on the header oa Separator E Properties for Layout a T Layout lw Spacing ee EH Dynamic layout E Columns rows Static layout i Linked objects _ Tabbed pane Show border Panel Split pane Show border on top a S D Text 4 Border width TP Label Border color 3 Link HH Badagound color H gt Field E Update content dyna w Password Ll be I Text area kee eS HTML editor S p Condition KH Checkbox H Radio button 5 Bi compound Figure 27 Jointing panels a 2007 2011 ALEE Software GUI Machine 1 5 8 page 34 of 236 GUI Machine User s Manual all Layers i Layers a m ri Window crew History a Objects deleted 14 51 50 a Objects created 14 51 55 a Objects created 14 52 00 Li Objects moved 14 52 00 ELO e into lay 14 52 02 zo ee Figure 28 Jointed panels NB If you do not want to join the panels please clear flag Joint panels in the menu shown on figure 32 When moving panels the zones where they can be placed are highlighted with gray To fix the panel drag it to the gray zone When dragged out of the zone the panel becomes floating gt To move the panel drag it by the header gt To move a group of panels or a stack of floating panels drag it
152. plicat applica a arrow di A t 2s b z arrow i arrow jo 9 arrow_le arrow O se arrow ib 9 AFFOWLF AOW Y i Connection settings Figure 76 Selecting an image from the icon collection 2007 2011 ALEE Software GUI Machine 1 5 8 page 99 of 236 GUI Machine User s Manual gt Search in Google the window allowing to select an image from those found by Google Search in Google B maple leaf ll Any ay v p Any _ Draw alpha as background mk Any ka Eh Any ka High Any 7 Thumbnail size 50 px Image settings Filter settings Preview Settings ikl a Eiteag Lir ee Rte i Pi S A i s r Mee sa Af Rt a Canad large fa 400_F silver ma maple leaf gif mediu E E ea 1 Single_G leaf 08 gif stock ph maplelea maple le maple le p wit os rm 4 cee a pajisi ie E B gt Bees ot ee oe Ea A Bai d Vs Tigo s a oa Je yee l ps K Toront 119709 gold ma red mapl maple le maples 2 gif Maple Le w BE laleaf2 jpg ae Libertar Red mik Autumn maple le maple _l rallies al wie i F F Connection settings Total images 54 Figure 77 Selecting an image from those found by Google Different parameters for the search can be set up Image settings 1 Image file format PNG JPEG GIF any 2 Grayscale or Colored image or any 3 The main color of th
153. point of the workspace All panels can become floating after selecting the icon of the panel 2007 2011 ALEE Software GUI Machine 1 5 8 page 36 of 236 GUI Machine User s Manual in the menu Tools and Frames Frames Settings Floating panels or panel groups can be united then they will be moved as a unit when dragging the upper panel by the header Panels being part of a joint cannot be put into stacks or relocated in such a manner Creating a stack of floating panels gt To create a stack of floating panels move a panel by the tab to the drag area located in the lower part of the other panel gt To change the order of panels in the stack move the panel by the header up or down NB The tab should be placed above the narrow drag area between the panels but not above the wide drag area at the panel header gt To remove the panel or a panel group from the stack and make it floating drag it out of the stack by the tab Resizing and collapsing panels gt Toresize the panel move one of its borders or the resizing symbol located in the right lower corner gt To change the width of all panels in the joint drag the capture area located in the upper left part of the joint gt To collapse the panel a group or a stack of panels click the Collapse button on the header panel ar 2007 2011 ALEE Software GUI Machine 1 5 8 page 37 of 236 GUI Machine User s Manual 3 3 The Main Menu The main menu panel is shown on
154. r cache in the window that will open Cache flush is recommended when you notice that some of the objects went out of the layout and were modified par 2007 2011 ALEE Software GUI Machine 1 5 8 page 59 of 236 GUI Machine User s Manual 4 Tools The functions of the following tools are described in this section gt Components gt Object properties gt Layers gt History gt Templates 4 1 Components This is the basic tool used for the creation of prototypes GUI Machine comprises four sets of components Standard Extended Shapes and Vaadin i BE Google map E Layout B Bl Collapsible pane 1 Eg Text a G Clock J E Media we ap Audio player Static layout Tabbed pane q E Text i Label z T Field Password T Text area J E Condition Checkbox i Radio button E Compound j SQ Placeholder Progress bar 2 A Combobox HH Scrollbar i Ot Slider Hist Figure 63 The Extended set of components EE Tree l E Windows J E Menu EP Menubar 2007 2 FB Popup menu GUI Machine 1 5 8 page 60 of 236 Figure 62 The standard set of components be HE Checkbox list Sal System bo i Tray icon oP Timer GUI Machine User s Manual min aans s amp Components gt gt vaadin E E3 Buttons l Em Button i D Toggle el e i i P Tabbed pane El E Text Password j Text area B HTML area pal EO Progress bar be CA
155. r cursor JWindowl Window Layoutl Layout LI Figure 181 The context menu For some objects certain items of the context menu can be blocked The detailed information about the items of the context menu is given in the table below 2007 2011 ALEE Software GUI Machine 1 5 8 page 200 of 236 GUI Machine User s Manual Table 36 The items of the context menu Icon Item Description Gil Preview Launches the preview of the selected object l Allows to specify the selected object as the trigger of os Add actions pean i a J J9 JA an action After selecting this item the target object is selected B Object events Displays the events related to the object Object actions Displays the actions related to the object Edit Edit Undo Allows to cancel the last of the previously performed operations Edit Repeat Brings the last canceled operation back Edit Cut x Allows to cut the selected objects x stands for the number of objects Edit Copy x Allows to copy the selected objects x stands for the number of objects Edit Paste Allows to paste objects from the clipboard Edit Clone selected objects Clones the selected object x Ee FP k amp A Ul e Edit Remove selected objects x Allows to remove the selected objects x stands for the number of objects Hide selected objects x Allows to hide the selecte
156. ree options are available Center Left Right rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 72 of 236 GUI Machine User s Manual Allows to position the text horizontally relative to the image Three options are available Center Left Right Horizontal text position relative to the image Allows to position the text vertically relative to the Vertical text position relative to the image image Three options are available Center Left Right A Font color Allows to change the font color Allows to change the type and the size of the F A on font E Ei ADIE Allows to enable disable the object Decorated Enables disables the decoration of the object Mnemonic is an underlined character in the text inside the button It indicates which key to press to activate a command or navigate to a component 4 2 1 3 Properties for images Table 6 Properties for images Icon Property Description Properties for images o imade Allows to add images from the file system or 4 J from the previously used images The images can also be found by Google search engine Allows to position the image it Orientation e by the size of the image e by the size of the object e as a background image Scale oe Horizontal and vertical image scaling re Rotation angle Allows to set the image angle 0 399 Allows to align the content horizontally Three
157. rloading pages If the page is overloaded with interface elements and actions the navigation may become more complicated Getting started Choose the working mode section 2 4 Launch When making a prototype of an application it is convenient to create the large interface parts first and the work through details To begin prototyping add a window to the edit area first Select is properties Select the header style and resize it if necessary When selecting the style of the window check into consideration the size and the resolution of the screen When adding new objects it is recommended to name them in accordance with their function g This will allow you to navigate a large project more easily Static and dynamic layouts Q Layout is the framework for prototypes All interfaces are designed on the basis of layouts There are three ways of prototyping in GUI Machine gt prototyping with static layouts gt prototyping with dynamic layouts gt mixed prototyping Prototyping with static layouts is rather simple and fast but prototypes created in such a way are not interactive 2007 2011 ALEE Software GUI Machine 1 5 8 page 123 of 236 GUI Machine User s Manual Static layouts can be used when the goal of prototyping is to create a set of screenshots When such a prototype is previewed the objects remain immobile Static layouts cannot be lined so it is recommended to use guidelines and operations of aligning
158. roject 2 Edit Vv New page v Rename page Vv Delete page VY Add object V Rename objects V Delete objects Y Cut Y Copy V Undo Y Insert Y Clone v Repeat 3 Format text type selection and settings 4 Align text 5 Align objects 6 Change objects layers 3 3 2 1 Object Text Format This tool is designed for formatting the text of an object or a group of objects Select on the edit area the objects to format Enter vam bold settings bold type size style color 2007 2011 ALEE Software GUI Machine 1 5 8 page 39 of 236 GUI Machine User s Manual A Tanoma bd BOT B Format test Figure 33 Bold settings 3 3 2 2 Text alignment This function allows to align the text Align test Figure 34 Text alignment The following options for the text alignment can be selected V Vertical alignment on top in the center at the bottom Vv Horizontal alignment on the left in the center on the right NB Not all objects contain text The operations of changing bold color and text alignment are not applicable to all objects containing text The format functions are not applicable to all objects For some objects they are not applicable to full extent If format functions for an object selected on the edit area are blocked the set of formatting tools is also blocked 2007 2011 ALEE Software GUI Machine 1 5 8 page 40 of 236 GUI Machine User s Manual P
159. secssesessesesseseesssesesesesees 203 Figure187 Additional items for the placeholder replacing an ObDje Ct csessessssesessssesessesessssessseseeseeesseseeeeseeeesees 204 Figure 188 The additional context menu items for windows without MENUG ccesssesseseseseseeseseesessestsseeteseeeseens 204 Figure 189 Additional items for windows CONTAINING MENUS ccessesessesesessssseseceseesesessesucsecueseeseeeeseeseseeseseeseensseenees 204 Figure 190 Additional context menu items for IMAGES ecesessessesesseceesesssseesesessesuesecseseesecussecseseeseseeseensseseseeseeteteneteeees 205 Figure 191 Additional context Menu items for dynamic layouts ee eseesessesessesessesesssecessesecsesessssesecsesessesseceeseeesees 205 Figure 192 The specific items for toggle buttons checkboxes and radiODUttONS ec eeesesesesseeeseseseeeeeeeeeeeees 206 LQ 3 Wie VAS SOL OM ses scsa sheetecet score E canton ieecnast E E E O A ance 208 Figure 194 The main menu Of the image ECITOM Qu ceccessessssssesesecessessssesessesesessesessesesseseccssesessesecesseeessesesseseseseseseseseess 211 FLU es Tne File meN Usiminas 211 Figure196 The Edit menu of the image editoreei Ere a iaeo rE Ee e TEU Tepai eaei 212 Poue ho am TS mago MEN aa E S E O E 213 Pore 198 WINS WANA S Onenen A E E case ace E N A EN 213 DOE MEE E A E E E E A A E A EA AA ene ene 214 Figure 200 Saving an Magese iiedeerseisur eisein aee aee ei step e oe anaa eia enparien de aa oie ai
160. selecting the checkbox Draw alpha as background you can enable disable the displaying of the alpha layer To change the size of the thumnails enter the necessary parameters in the field Thumbnail size The checkbox Show image size enables disables the dipslaying of the borders of images It contains the following information Name Image type e Image size gt From screenshots this window contains the screenshots made with the help of the screenshot making tool 2007 2011 ALEE Software GUI Machine 1 5 8 page 98 of 236 GUI Machine User s Manual Choose image Ie i a ii Fon sceenhots _ Draw alpha as background Show image size Thumbnail size 100 px Screenshot 1 png Screenshot png F Connection settings Figure 75 Selecting an image from the screenshots gt From icons collection the window containing a set of icons available with the application A accept png add png anchor png applicati applica applicati applicat applicat applicat applica applicat Eg Ed Ea Ea Ca r r lad o applicat applicati applicati applicat applica applicat applicat applicati applicati applicatio applica al Ca ED cE T m m applicat applica applicat applicati applicati applicati applicati applicati applicati applicati applicat Ea Ga b kd applica applicat applicat applica applica ap
161. selection page 115 of 236 2007 2011 ALEE Software GUI Machine 1 5 8 GUI Machine User s Manual 4 4 History The tool History allows to return to any of the previous stages of the project Every time you make an operation in the project a new entry is added to the History If you add for instance a new element to the project and then change its properties these operations will be listed in the History If you select one of the entries all the changes brought to the project after the appropriate operation will be abolished You can continue the work from the selected project state History as Objects properties edited d Objects moved o O A Objects properties edited d Objects properties edited Objects pasted o O O Pe Objects mowed Objects deleted E Objects pasted P Objects moved a Objects properties edited ui Objects properties edited o i Objectsmoved o Objects created o O O d Objects moved OOO ss sSCSCSCidY Objects moved lt Ohiarte recived l Figure 97 The history of the project The number of entries saved in the History can be limited by the user When this number is exceeded the entries are deleted New entries are added to the end of the list Thus the entries concerning the earlier operations can be found in the beginning of the list the entries about the newer ones in the end For each page of the project a separate History list is created If the n
162. sesessesessesessssssessesessesesesseseeeeees 191 Figure 174 The progress of the export Of the prototypes aia 191 FIQUIC d s The preview OF the edit GS dissesse euena e e EEEE EEEE 192 Fig re 176 Renaming ASIA SINC cars ca cosnsveccaccetdanicecded rerni Nair E ARENSE EEES TEA EESE EE Ea ieS 193 Figure 177 Configuring the SPACING c secesessssessessesesessssesscsesessesessesessessssssesessesecsesescssesussesessssessssesessesesessessssesesseaesseseaeeseaseseens 194 LUIS 172 Making a smart SIVA SIN Osetra ecs r E AE tee eet eee ee 195 Foue BD TES COMMUN E sss vecascucsctsed aceesses a0 eestasasecetuesyotseneeaee cneasvs se d tseu sie oto uaeaeen eatceses 196 Figure 180 The main window of the screenshot export tOOl ce ceecessesesesessesessssessesesseeeessssseeseseessseseeesseseeeeseeneneeeee 197 le Ul gent lech Hai Hl ae ec aii gt 4 91 1 PReneme Nene E SRR errr nn ener E TE eee 199 Figure 132 The lower SECTION OF TNE CONTEXT mMeNUssssessnrsriurir arie 201 Figure 183 Objects under MOUSE CUISOP sscisseccesssczscosstsceszececnsscazacestsesceds ectnenssdvanncensasnsscenucaseendcatousdeansedvelnane iiaia iieiea 202 Figure 184 The tree of objects under the MOUSE CULSOM ccccessesessesessessssssessssesessssessesecscsesessesessesesessesesseseeseseeesseeesseeees 202 PIQUE 13 5 Additional item TOR TIS GNIS yeaa cco eect cer Eae anas a EE a E 203 Figure 186 The additional item in the context menu for placeholders ou ceesesesessesesseseses
163. sesssrssseessessssessessesenseseeses 109 FUME Ss MO e E A E E E 109 Figure 92 Removing a POPUP Me nU sse ssesseesseessessesssesseesseessesseosseoseosseossesstosstoseoseroseessenssesstoseooseoseesstessroseosstoseossesessosesenseses 110 FU oo eano a I e E EE E AEE EEEE S ee E ET A S 111 Hawe 94 kayen Tie TESS On one E a E S E E S 112 Figure 95 Context menu for the lAayeLS cesesssssssssesssssssssssessssessesscsssscscssssssssesssesecssssessesesessesscsessesessssessssessessesesessacessess 113 Figure 96 THe list of objectis irere eaea a ra rei ea reai Eoen SaR 113 e r ER E A E Ee SC EE E EE E EAA ESE EEEE 116 PONEI PEO COENE M eaa ES EE EN A EEA 117 Figure 99 Colored history entries sce Sess nsec dees cased be asand abcess cask sds cuaGucses castatnceddecdtascc cauchedieccOsescocesetseesiecsesa eai iaaiiai 117 UNS AO MS Wei AUS a E E EE E E EEE EE E rues 119 Foure L0 ait al are an OD e eepermnne era Om Spear nee o einean EENE ane EESE AAE o ETA 121 Figure 102 Selecting an object to be replaced by the placeholder ss snsssnsessssessoesssesssessersssesseesssesseessessnsensesseseeses 122 Figure 103 An interface based on a static lAYOUT cc esssesssssesesessessesessessssessesessessssesuesessesessesnesesesseeseessesseseeseseeseeneseens 125 Figure 104 A static layout interface being PreViCWe esessssessesessessessssssessssessssscssssessesssesssesssesssseesssseseeessesssssseseseeees 125 Hoare RUMO a ay E E EE E E O E E eee
164. sessssesessesesessesesessssesessssesesessssesesssseseeesseseenseseeeess 21 2 3 5 Activating and CEACHIVAEING the WH COIS Cera iccteteeacencetastresiartevetatzachinstresd taeesetteaa se niin Eiaeai i aaa iaaa Seka en aeiiaaie a 24 PAN E i E PEE E ate E A ENTE KA TE EEA E A NE EA pee ATT 25 ea N ATT a A E E AA E E A A AEA 30 3 WORKSPACE oeii eE E EA 32 3 1 GENERAL INFORMATION ABOUT GUI MACHINE WORKSPACE cccscsssssscssscccscsscsscsscssssscscccccssccscscsssssccsssscsssssecssssescsscssssssecssssseessesenes 32 AN E PA USI TTN O a E EE T E E EEA AE 33 2 Mi TA A RON TOE a E E A tees 33 322 WAG Context Menu oline Panele ioiek ai ere Eaei TE ee E Ee ie a eiee eae erae 33 or TAE MAN MEN corsen Ea EEEE E AE EAT A aN EEEE 38 33 The File WMC Nest scence aea EEEE ENESE EEEE EAE EEEE AAE AEEA AEE EE E EEE AENEA 38 Jo Te CIN N a EE E AE E EA E 39 a EOE FOV e ET E O NE E N E E 39 232a Thealigning of Ne ODJEctS stiess ea ai aa i EEA E fur irr LAENA 41 oN MEU erene enen oa pEr AANER E AE E E E E AEEA EA 44 PAE ON eT T E aa E EA E AEE E EAA EAEE E EE EEA A en enter 45 aa ES Nape M ar E E E E A E E EENE 45 Pot A ee e AM 0 0L 8 E E E PE E ET E EE EA E PAA OEA AE A E A E EE 46 3 3 7 Tools and Frames MENUL u cece cccscsccscscsssscscsssscsssscsescsssscsssscscsesscscssscsssscsescsscscsesscsvscescscsssscscsssssscsscsescsassssesscsvssscscsscssaseacases 46 De Mig PINS CLS o E OL sek UNG I E A A IE AT AT EAA A POE AA ON nes 47 a Oee E VWN U TO O or EE EE E E E 47 B
165. splays the number of tabs Allows to add and prop edit tabs Selected tab Displays the selected tab and allows to change tabs et Tabs position Allows to change the position of the tabs BL m wmi 2007 2011 ALEE Software GUI Machine 1 5 8 page 76 of 236 GUI Machine User s Manual 4 2 1 9 Properties for text fields and areas Table 12 Properties for text fields and areas Icon Property Description Properties for texts fields and areas Text Allows to enter and edit the text Text margin Allows to set the text margin Allows to add a link e to a website e g http www google com Link Http www google com e toa local resource e g C e to an e mail address e g mailto support alee ru e toa FIP resource e g ftp files alee ru Empty field text Allows to enter the default text displayed in a empty text forms A Empty field font Allows to select the font for the empty field text A Empty field font color Allows to select the color of the font for the ee empty field text sa Background color Allows to select background color A Font Allows to select the style and the size of the font A Font color Allows to select the font color m 2007 2011 ALEE Software GUI Machine 1 5 8 page 77 of 236 GUI Machine User s Manual Empty field text horizontal alignment Allows to align the empty field text horizontally
166. srossroseeesnrossresstessresseesstesessent 20 FES LEAC ON COM Vi 1S E case sates nossacotacstecteaeaenewseswmaesessonse eertaaeeeestnensenmeentnneciecees 21 Figure 15 The dialog box offering to activate the license MANUALY cc esesseseseseeseseeseeseeesseseesesesecseeteseetseseeesees 22 ge U kame ACION C O umrnene meme E E E E eer eercern retraite 23 Figure 17 License Si ON CON Nee ccegeneccecteeceecescpstsruccgerssscucevoeegicxectecacaus usenet usu sot deaestenegearsseoesasp saenesiuceurg tucecedeatceeetcenseesgeuedonsggecets 24 Figure 18 Staring Work Wa GUL IAC IMIG sisama aaeeea ENEE a a RESEO Grenen aaea VAa RESENS 25 Figur 19 Creating a new PrOjeCt srsenuiisiosissiooriiiaensiirinoneiseeoda inisi necesan ei aeda r a eae e taaan iseda etree eae 26 FOU Onna r e A EEE A E ER E A N E E E ETT 27 Figure 21 Selecting a demo project to be loaded sssessssesssssssseesssessssessssesssresssresseesseessserosssesssresssressresssresserssseesseresssesse 28 FIWwWe 2A TPO d e A net ee er eee ener ee ener ree eee errr eee 29 Figure 23 Launching the Uninstall WIZard ssssessssssssssessssessssssssssssesessesssessesecsesssesssssesessessssssssessesseaesssneseenssesesseseseeesess 30 POUN ZAUN eo ag o a A pemermemmrrermrera tenreattrn terreeceaenrrerr E E A tert er EEE 31 Figure 25 The workspace of GUI IVC IMIG sce sis se sees coczaart carneses cues seuss van tereddenceesealsastareedctuatsiaaealnediet eee anaeaaosatteamerase 32 Figure 26
167. srsinsisssuessissisarisseesieiniunnaitaarksdnainsn ianao sina enina aaan adanadan Nisaa a aaien re adk oakin NNa 177 6 4 1 3 Inserting an object without clearing CelIS cc eessssssssssssssesessssssessssssessssssessssesessessssssesesessssesessssessessseceesesesesesesesesesesseeesesseeesesseeesess 177 6 4 2 Opening closing UMNO ees sans cc ceases eet ps eaet ieeccns ee deez eed ra aacscae ecb sath etc wsaheeieesnctbeensasesetbatosees 178 6 4 3 MOVING resizing WINKOW ccessesesessesssescscsessssesessssesessesesesussesessesesesucsesesessssesesuesesessssssesuesssessesesesucsesesesssseseausseseseeesseseeseseeeseees 181 6 4 4 Actions for displaying the message IN the tray ICON cccccssesessesessssecsssessesessesesssseccssesesscsessssessesesseseeusseseesesesseseseeeeseseseaes 183 6 4 5 Changing the appearance Of the tray ICON cccsssssessssssessesesscsessesessesessssessssessscsessssusscscsseseesssessssesessesessesesseseeeeseesseaeeeess 184 6 4 6 Connecting the prototype with other prototypes and applications ccecccsesessesessssesecessesessesssesessseeseeseeceeseeeeees 185 7 REAL TIME PREVIEW OF PROTOTYPEG cccccccsssssssssssssssssssscccccccccccccccccccccssssssssscscccccccccccscccccccccccscssscsssscccccces 187 T Ac PREVIEWING OBIECTS siv vevevesncsereadevesnnensaeienvacdivessuseuioasesaneeiubessocaseadivacvodeustunesdvaresaves vbesvndaveaducevaseebuneuirecsesexeeixboavninsasdenvecsctueeseaeebeeredna 187 7 1 1 Previewing objec
168. ssa AN EI RA AAA ER KESANA a Aaaa aaa 80 Aa loreal Properes or tne Saol Da ri TE E N AEE EA eee 81 ALI SP FOTOS Torne E aeee A A E EEEE E R EE A EES 82 BN NTF GOO O A DIEE a EE E E E E E A 83 d LIe Properes Or WNdOWS gee Ree eee eo EE nee ee 84 AeL PO E O E E EE EA E E AS 85 4A 2 1 20 Properties for Google Waa OS acca car antics cathe naa a a aa daaa KETO etna ed meee ai 86 4 2 1 21 Properties for collapsible PANES eesesseesessssssesesescssssesesesesssscsesesescssesesesssssscsesesessssssesescssssesescsessesssssesesesssscsescessessesesesescseseeecseeecacaees 87 4a L22 Properies Or COCKE sursin E ETE E E 88 4 2 1 23 Properties for the audio Playel uc esesssessessssssesssssssssssssssessessssssessssssessssssesessssessesesessssesessssesssssseseseesesesssseeesssessesesesssesesesseesecseseeeeeees 89 4 2 1 24 Properties for the connector ODJOCt ec eecssssssssessssssesssscsessssesessssssesesessssesessssesesssesssussesessescsessesesessesessssesessssesesseseseseesesesseseeseeseseseeases 89 APN 2 FF FOO BOE Shane Saena E EE EE E RS 90 4 2 1 26 Properties for data fields and Calendars eccsessesssssessssesesesssscscsesessssssesesesesssscsssessssesssesessssssescsssecssscsesesessseseseeesesscseseseseseseaseeeaces 90 42 127 Properties TOP the tray ICON sists ena td aces anette a aiai aE aiaa edana a Eaa a aa a i 91 AAAI OOE e E E E E E E E E E EAA E TE 92 7 ea AMG T EO e O 92 EME E SSN CANIN CO Wace cases E E A E E sin pian E sca E EEA A E A AAE T 96 A E
169. sseeesseseeseaeeees 69 AEE S a PrO lt 1 9 5 a E E E TS 69 Aa L2 Properes Tor EONO ouaa a E EEEE E NEE a A 71 4d LA Properties Tor DUONE eee nee re ee E EEA NERE 71 4 213 Properties for IMagE Sarsia T aR TEA Ta Oa a aeaa Eaa a E 73 42A Properes tor separator S naie A R E E E erento 74 Ada Properes Tor layouts scisti oeieo ikan Feed ae mest eap Eaa EA RASET Eai neide 74 de LOFO CHE LOr PAN aa E EA N EA A EE AE EANO EEN ERT 75 A MT Properes Tor SAIL IMAM I sisian EEE DEAE PAEA EEE REEE R E ORE 76 4 2 1 8 Properties for tabbed panel Sire cascacart eve caesacarstivoesan acct ese vatciacon soa ro eusncbivessa ts NA ESEESE ENS KAREE E Ea EKAS ESEE EA a NE EE ENER 76 4 2 1 9 Properties for text fields and ALCAS eececsessssssssssesesssssscscsssesssscsesesssscsssesesssesssesssesssscsesesesssseseseseseesssesesesssesesesesessesesesesesesseseseeseaseaeaces 77 42110 Propenies forthe placeholder uenisse isna EErEE a EENAA ENESE EANA EE A NEEDE RAE 78 4 2 1 11 Properties for the Progress bafr sssssseesssoessesssosssseesseosssessstosstesstossssosstosssesstessseosstesstensstssstosstesstensssesteesstesstesstosstesseeostessseossresseenees en 79 4 2 1 12 Properties for LISTS cc eesessssesesesessssescsesescssssescsssusssscsesessscsesessssussssesssessssssesescssssesesesssesssesesesussssesesesesusseseaeesesssesesssesssscseseeeseseeseseeeecseees 79 BP Ald Properies or the SPINETTA E E TREE EAEE EE E TATEA ENTE eeu 80 42 1 14 Properties for the shd Eroe
170. sseeesseseesesesesseeesseeeeess 62 Figure 67 Swiching the components tool ON OFF eesessessesessecsesessesessesecsesssesesecsssesseseesesusseceesecsecessesuesecseseeseensseeseaeesesteaeens 62 Figure 68 Launching the HT ML edItol sssssssssssesssessssessesssessssessessssssssussssessssssssssssesessessssssesssesssssseseesesessesssensseseseseseneaes 92 Pour Fe AMECA O e T A E S E E NA 93 Figure 70 Modifying text on edit ANS ass cszctecazern cece sscecoct aneceascseqecsrarey ens cieadezeaee ack reei iara Si ae een es isceeoneaseteomeeeeee 94 NOS Ti TAIN MIL COC ri a E A EE AE EE EE 95 MIS FZ ON o o E E E E E A E E 96 Figure 73 Selecting an image from the file SYSt M ccessessssssessssssessessesessesesssssessssssessessssessssussessesesnesessesesseseseseseseaessesens 97 Figure 74 Selecting an image from the previously used ONES ceecessssessesseseesesessessesessesesssssssessesessesesseseseseseeeseeeeneeeeses 98 Figure 75 Selecting an image from the SCreenshots ccscsessssssssseessesesesssssesssscssssssssssssessesessssssssssssessssesssssesesseseeseaeseesess 99 Figure 76 Selecting an image from the icon COM SCTION uc eecessesessesseseesessesesseseesecsesecsesessesessecueseesecesseseseeseseeneseseseseseesans 99 Figure 77 Selecting an image from those found by GOOGIE ce esesssessesssssesssseseesecessesessesesessecessesesseseseseseseseseseseeses 100 Moure 78 Editor for tab paneli sss ects ceca este ges cases scene coe cctecgsese
171. sucaccstes cssecsaseascoce ee e_qete st nec snecty ORO SEa aa aaa aa aaeain 101 BEW as mul ie 2 lt 6 ido E E E et arr wer O yr tts ta A E E rte eer ment reer errs 102 Figure g0 TNE Tree CUO esenea EAE a ceaceee caer sean E E E 103 Fe US de IIS NS MM eN T E E E E E E E E E E ET 104 Figure 82 The CHECKDOX OCItOM essssessessssssssecsesessesssssssseesessssesscsesesnssessssessesessssesesecssssesesssusssceesessesesscuesesnssesscaesasseseesensesssees 105 x 2007 2011 ALEE Software GUI Machine 1 5 8 page 233 of 236 GUI Machine User s Manual Roures o Pop up menu edito esasen i a e E eee eee eee 106 Figure 34 A pop up Men sssini ioe iau sokean a an os aaa eNA a aaa aiaa EEE Eae oiae E NEENA Enei aa RENAE 106 Figure 85 Editing pop up Menu ITEMS eecssessesssessssssssessesesessesessssesesssssessssssesssssessesessssesssusessesesesseseseseesesesssessetseseseesseass 107 Figure 86 Editing HTML text in popup menu MONS sinisisi E Ea 107 Figure 87 Adding submenus to popup menu ITEMS esessssesessesesessesessssesessssssesssssessssssessesssessesesesseseassessesessesessesssseess 107 Fig re 82 Menu Citoren a Ere EE E E aE EAA eSEE AEAEE n A a aeia eE ROSER e 108 Figure 89 Editing HTML text in a menu iteM ss sssessseessssesseessseesseeesseessssesssresseresseesseeesseeosseeossressstesstessstesserosseessseessseess 108 Figure 90 The connection between the menu and the POPUP Me nU ss ssssssesssesssesssesssres
172. t by pressing Ctrl Alt H gt each tool can also be hidden by pressing the button Toggle auto hide The tabs of the hidden tools are displayed on the workspace borders They are displayed when hovered The tools become hidden again when moving away the cursor They can also be hidden by pressing the button at the top of the panel To return the panel to the previous state press the button 3 2 2 The Context Menu of the Panels To activate the context menu move the cursor to the header of the panel and press the right mouse button figure 26 Close by Standard E Buttons Floating pe CO Button Auto Hide WD Togge Maximize 8 5s Images a Dockable 5 C Layout HEH Dynamic layout bannu I E Text Figure 26 The context menu for panels e 2007 2011 ALEE Software GUI Machine 1 5 8 page 33 of 236 GUI Machine User s Manual Select Close to close the panel If you want to relocate the panel select Floating Then the panel can be moved on the workspace To hide the panel select Toggle auto hide The tab of the panel will be displayed on the right border of the workspace If you want to expand the panel select Maximize Jointing and disjointing panels A joint is a set of panels displayed together usually the panels are jointed vertically Panels can be jointed and disjointed by dragging to the area gt To fix the panel drag it to the joint and
173. t specified by the e 2007 2011 ALEE Software GUI Machine 1 5 8 page 169 of 236 GUI Machine User s Manual 6 4 Types of actions The set of actions that can be added to an object depends upon its type All actions can be divided into the unique related to only one type of objects and repeated related to several types of objects All types of actions are described in the figure below Table 34 Types of actions Icon Action Description Changing of formatting the text of the Text change object The text can be edited in the Text and HTML editor Allows to enable disable the activity of the selected object The following options are ilable Enable Disable avelebe e Enable e Disable e Change state to opposite Allows to configure the visibility of objects E Visibility The following options are available Show Hid Change state to opposite VV v E Inserting an objects of clearing the cells of a This action is described in details in 6 4 1 dynamic layout Inserting an object or clearing layout cells i Far A 2007 2011 ALEE Software GUI Machine 1 5 8 page 170 of 236 GUI Machine User s Manual The checkbox Indeterminate progress bar allows to change the state of the bar to the indeterminate To specify the value of the progress bar enter it in the Progress field If the checkbox Indeterminate progress bar Progress state change is selected the Progr
174. t them Color them and even insert images Figure 69 HTML editor The toolbar consists of the upper and the lower line The upper line of tools includes the instruments for gt working with clipboard copying and pasting gt inserting different objects images tables symbols links gt cancelling repeating the operations gt copying text formatting gt creating and editing tables gt zooming gt drawing figures 2007 2011 ALEE Software GUI Machine 1 5 8 page 93 of 236 GUI Machine User s Manual The lower line of tools is designed for formatting text and is used for setting the following characteristics of the text header type font font size text style bold italic underlined subscript superscript mode horizontal text alignment the size of indents numbered bullet list font coloer background color VV VVVVV VV WV After creating the text in the HTML editor you can modify them right on the edit area Double click on the object to edit the text contained in it On figure 70 a text label with HTML content is shown The text on the edit area will look as it is shown on the figure below File Edit Standard amp y Extended Shapes gt Vaadn C Tools and frames Help M i Selected bject properties px 0 50 100 150 200 250 300 350 400 450 500 550 600 650 700 E Properties for JLabel E i Image r a 2 a _ a o a Gap r this window you HIB S p
175. taken into consideration in the text versions The program is constantly being improved and provided with new functions GUI Machine is a thoroughly supported product You can always contact our specialists if you have any problems concerning the work in GUI Machine We will help you to surmount the difficulties and solve the problems i Far A 2007 2011 ALEE Software GUI Machine 1 5 8 page 230 of 236 GUI Machine User s Manual Appendix 1 List of tables The list of tables WTS E E e EE a E A O E A A E 9 Toe Go ng 050 a nN a E EE E een E E E AEN AT E A 63 Table gt e Standard Opjact Propertio arsan AEE O N AE TENES EBEE A E Aae E 69 Table 4 PRO CU Me Tor FACO serraria ei a EA AAE E EA AAEN anata 71 Table 5 Properties Of 6 1c gata eee ane er On nr 71 Table Gs PROMS ISS TON MACS esc sce crece E E teers 73 Tabe Ae Propane gc 0 O lt a eee ener ee eee ee ere 74 Table 8 Properties for layOUtS cc ccsssessssessesessesssessessssesesscsessssessssesessssessesesussessssesessesescssesussesesucsecessesussesesssseeseseeeseeesseseseseseess 74 Table 9 Prop rties for O72 0 eee ne ne ne ee mee ne EERNISSE S 75 Table 10 APO SUS FO SIU PONEIS grinn E E A E E 76 Table 11 Properts FON aS Gh panels respaa E EE A EGE AIETEN 76 Table 12 Properties for text hields and areas arieso E EE A E 77 Table 13 Properties for the placeholder ccc ccsscsessssesescssssesssssscsescssssesessssesssessesesesscsesesssesesesssseseessseses
176. tem was created in the HTML editor the mnemonic will not be underlined 4 2 2 10 Selecting in a cursor In the cursor selection window you can choose a cursor from gt standard system cursors gt sets of cursors The standard cursors have the design set up in the operating system in the settings for mouse cursors In the sets of cursors you can select a cursor in one of the following styles gt Blue gt Yellow 2007 2011 ALEE Software GUI Machine 1 5 8 page 110 of 236 GUI Machine User s Manual Hand Static Arrows Cross Tools Windows Aero VV VV VV It is recommended to use standard cursors matching the style of the operating system in general This will allow you to create realictic prototypes ts Choose cursor Figure 93 Selecting a cursor ani 2007 2011 ALEE Software GUI Machine 1 5 8 page 111 of 236 GUI Machine User s Manual 4 3 Layers The Layers are the main tool used for creating interfaces This tool is indipensable for editing interfaces The Layers tool provides information about the location of the objects their hierarchy and actions connecting them With the help of this tool you can show and hide objects remove them add and edit actions Thus the object located on the layer with the greatest number is displayed above all others and the object with the smallest number is located below all others To open the Layers tool select the menu item Tools and
177. the dropdown list e Always show e Show when needed e Never show par 2007 2011 ALEE Software GUI Machine 1 5 8 page 70 of 236 GUI Machine User s Manual 4 2 1 2 Properties for Editor Table 4 Properties for Editor Icon Propery Description Properties for Editor Object type Displays the type of the object This property cannot be edited l Displays the identical number of the object P A Cannot be edited Allows to set the minimal size of the object This property is editable but not for all objects The W i iia Minima ae minimal size of the object cannot exceed the default size Name l l m Displays the name of the object aly Resizable left right Allows prohibits the changing of the object width te Resizable up down Allows prohibits the changing of the object i height lt gt Movable Allows prohibits to move the object 4 2 1 2 Properties for buttons Table 5 Properties of buttons Icon Property Description Properties for buttons including checkboxes and radiobuttons 2 Image This property allows to select an image for the button 2007 2011 ALEE Software GUI Machine 1 5 8 page 71 of 236 GUI Machine User s Manual pE Selected image Allows to select the image which will be displayed when the button is selected HE Rollover image Allows to select the image which will be displayed w
178. the figure below File Edit amp 3 Standard Ey Extended gt Vaadin c Tools and frames Help Figure 30 The main menu The main menu includes 8 root items 1 File 2 Edit 3 Standard 4 Extended 5 Shapes 6 Vaadin 7 Tools and Frames 8 Help 3 3 1 The File menu The File menu is shown on the figure below 5 7 D D m A B E k3 m e w 2 9 gt New project Open project Demo projects Save project Save as Export prototype Exportimages Export screenshots Project settings Program settings Printpages Show pages Print settings Close GUI Start working Save changes Export Configure Print Finish v Figure 31 The File menu It comprises the following items New project Open project Demo projects Save project Save as Export prototype Export images Export screenshots Project settings Pay PON AW RWN PH 2007 2011 ALEE Software GUI Machine 1 5 8 page 38 of 236 GUI Machine User s Manual 10 Program settings 11 Print pages 12 Show pages 13 Print settings 14 Close GUI Machine 3 3 2 The Edit menu The Edit menu is shown on the following figure 2 ae a Tai 7 5 5 IB S 4 EE o amp m wah s Find in project E ii g H I 11 Oj tir Gu i D g w CG Height 25 Search Edit Format text Align text Align objects Change object layers Object size Figure 32 The Edit menu This menu includes the following items 1 Find Find in p
179. ting prototypes of desktop and web interfaces Graphical User Interface GUI is the space for human computer interaction allowing the user interact with the computer with images rather than text commands The program is designed for all specialists taking part in software development programmers analysts GUI designers managers Prototypes created in GUI machine are characterized by high fidelity and interactivity GUI Machine is an intuitive tool No programming is necessary for the creation of prototypes The functionality of GUI Machine GUI Machine comprises a large set of functions gt Creation of interfaces for different types of applications vy desktop applications y web applications y mobile applications Creation of interactive graphical prototypes close to the original Interactive preview of prototypes their parts and single objects Viewing prototypes with a free viewer without running the whole application Option for rapid interface redesign Rapid creation and structuring of screenshots Rapid editing of images used in projects Rollback of changes made Option for detailed customization for each object Creation of reusable templates Preview of interfaces in different operating systems styles VVVV VV VV V V rar 2007 2011 ALEE Software GUI Machine 1 5 8 page 6 of 236 GUI Machine User s Manual Key functions of GUI Machine gt Platforms supported v Windows Y MacOS y Linux gt The applicatio
180. ton The screen will be painted with the background color you selected and the windows will be opened shot and closed automatically When the work is finished the folder in which the screenshots are saved will be opened par 2007 2011 ALEE Software GUI Machine 1 5 8 page 199 of 236 GUI Machine User s Manual 8 Context menu The context menu allows to access to the most frequently used tools quickly and to perform some operations with objects To open the context menu for an object or for a group of objects select them and press the right mouse button If you do not want the context menu to be related to any particular object do not select any object on the edit area and press the right button The context menu is displayed for the object being selected at the given moment If you approach the cursor to an object which is not selected it is highlighted When you press the right mouse button it will be selected and its context menu will be displayed Preview Add action There is no events on object Object actions Add object by cells Change selected cell background Change cells background T oe y CARE Er Clear cells background Set all px columns width Set all px rows height Edit Mowe object to top layer Mowe object layer up Mowe object layer down Mowe object to bottom layer Hide selected objects 1 a HF La a i m oa Show all hidden objects Hidden total 0 Objects unde
181. ts in GUI MaChine ssssssssesssesssesssesssesssesssessseesseesseesseesssesssesssensstnsstosstosstossensseessensseesssessstnssensstosseosstosseesens 187 7 1 2 PREVIEWING OBJECTS IN GUI MACHINE VIEWER ccccccscccessccccescccesscsesscccesscceestsccessceceeseccesucceeuscsecsecceesucescusecessseceeauscceceeeeeecs 190 T POR VO sce cee sea a css sae sce ae es seat era non a wh sete cess saan decades eaaseb taneckeeecawueees 193 La L gt 1916 a4 416 POON O nena arne Set Nee TT EE A Sete nacre tener a ete Teen Torre 193 Tl ONIN MINAS stented ca a esse EEEE A EA ta ass conse Sects cae pct teen eae sonnet asc ade E 194 FZ ADONIS CVC NO E E as aca tence snes E A E E A EE 199 SC ONTE XT NENU onnsa E E E E E EE 201 9 IMAGE EDITOR recsvetesrecsaescescneccecdiecestssunatiensbasciessusiaceiisisuaisiesiicsausisdaeiusialsisaVsasestscescdeusustsenisuousssecssicss ousbadessassesacicibesusdsedesdalasaausxs 209 9g Toas ore MAGE OO A E a A E ER 211 TAr WAIN IAIN a A AA AE 213 9 3 1 The File 1temn icccccccccccccesccsccsscssccsccsscesccsecsccsscesccsccesccsscscsscsaccsscesccseceseesecsssesccsecsscesscsccsscesscsscesecsecucesceacssceaccsceaeeecetsecessuccenseeeesaes 213 Joe FCn I a A N A css peczesacheatesatacessca 214 Aro WMS Mae TNS E E E E aes bes ac ep EEE 215 JA A AE a A 217 9 5 THE HISTORY TIO carne carat decscocnetorecca eeisecutinvcivern nests versa acioetestte2 7ae abicneeciex perce sGiea cutscenes diet ca etiwan eau stew ews Jesoa vennedouoescleciaetscsech
182. ts whose screenshots you would like to make to the central part of the window Delete the objects whose screenshots you do not need by clicking on the button or pressing the Delete key The objects can be added removed by double clicking on their icons in the tree The button allows to add all the objects saved for quick launch by a single click The button allows to add all the windows of the project by a single click GUI Machine 1 5 8 page 198 of 236 GUI Machine User s Manual The button allows to add all the unlinked object of the project by a single click If you need to get screenshots without window headers and borders select the checkbox Save content only Select the color for the background of the windows being shot in the dropdown menu Background color Enter the time interval between the object launch and making its screenshot in the field Screenshot delay If you need to use the actions in the launched objects deselect the checkbox Do not load actions All screenshots are combined into sets and saved together with the project The saved sets can be opened even on other computers You can select the sets of screenshots in the dropdown menu Press the button Ls to rename the set of screenshots You can add a new set of screenshots by pressing the button EJ To delete a set of screenshot select it and press the button Select a folder to save the screenshots at the bottom of the window Click on the Export but
183. ttings Split pane J IE Text Fe 2 E Password i Text area ke EH HTML editor il Condition ve Checkbox Radio button 3 f Compound Figure 142 Settings for components 2007 2011 ALEE Software GUI Machine 1 5 8 page 158 of 236 GUI Machine User s Manual 6 Actions Actions are a key feature that provides the prototypes created in GUI Machine with interactivity An action consists of two elements th event being the action trigger and the action itself Actions can be triggered by the following events mouse manipulations pressing keyboard combinations the changing of the focus Actions may have such results as changing objects properties opening closing windows establishing connections between objects 6 1 Adding actions In GUI Machine there are several ways gt With the help of the context menu gt select the object of an action gt press the right mouse button and open the context menju gt select the item Add action gt click on the object of the action If the object of the action has not been add it on the edit area you can edit by clicking on the a Components panel You can create several actions for one object Select the item Add action in the context menu as many times as it is necessary to create the actions After adding the first action the interface of creating the second one will open gt By pressing the button on the Layers panel gt select
184. umber of the entries in the list is too great the size of the project file will increase If there is no need to save the information about all entries the History list can be cleared rA 2007 2011 ALEE Software GUI Machine 1 5 8 page 116 of 236 GUI Machine User s Manual gt open the context menu by a right button click on the History panel Mark ewent with color Show event date Show event time Clear page history Clear all history Figure 98 History context menu gt select the item Clear page history The History list for the selected page will be cleared To clear all history lists select the item Clear all history The entries in the history can be marked with color The colors can be changed a ass Change mark color Objects crea A Objects created emg Clear mark 4 E Objects inserted 3 Show event date Show ewent time Clear page history Clear all history Figure 99 Colored history entries The context menu also allows to display the date and the time for each operation in the project Select the items Show event date and Show event time Return to the previous state There are two ways of returning to the previous state of the project gt Pressing Ctrl Z Fari the keys are pressed a change in the project is abolished 2007 2011 ALEE Software GUI Machine 1 5 8 page 117 of 236 GUI Machine User s Manual gt A left button click on the entry related to the state to which you
185. would like to return The repeated of abolished operations If you made an error when abolishing an operation there are two ways of correcting it gt Pressing Ctrl Shift Z Each time you press the keys the abolished operation is repeated gt A left button click on the entry related to the stage to which you would like to return NB If a new operation is made after canceling several operations the entries related to the canceled operations will be deleted The return to the canceled operations will become impossible e 2007 2011 ALEE Software GUI Machine 1 5 8 page 118 of 236 GUI Machine User s Manual 4 5 Templates A template is a ready made mockup of a frequently used object Using templates can make the creation of prototypes easier and faster especially when different parts of the prototype contain similar objects Templates can be created for all types of objects fi Templates Figure 100 User templates The templates are represented as a tree like structure You can create and delete folders for keeping templates Tabl3 32 Tools for working with templates Icon Description Create new template Allows to create a new template ae Remove template Removes the selected template e Create new folder Creates a new folder Remove folder Removes the selected folder par 2007 2011 ALEE Software GUI Machine 1 5 8 page 119 of 236 GUI Machine User s Manual To create a t
186. ws to remove the selected menue item Allows to add a new item preceding the selected item Double click on the item to rename it Add menu before lt name gt Add menu after lt name gt Allows to add a new item following the selected item Double click on the item to rename it Allows to choose the pop up menu for the selected item Select this item and click on the pop up menu on the edit area Select popup menu for the item lt name gt Additional item for placeholders Select an object to be replaced Figure 186 The additional item in the context menu for placeholders i Far A 2007 2011 ALEE Software GUI Machine 1 5 8 page 204 of 236 GUI Machine User s Manual This item allows to select an object to be replaced by the placeholder After selected this item click on the object on the edit area If an object is being replaced by the placeholder two more items are added A Unlink the replaced object Gl Show the replaced object Figure187 Additional items for the placeholder replacing an object If you select the item Unlink the replaced object the link between the placeholder and the object it replaces will be canceled Additional context menu items for windows For windows with no menus linked two more items are added to the context menu Tf Choose window menu bar 15 Choose default focus component Figure 188 The additional context menu items for windows wit
187. xactly in the left upper point of the event object over the object or in t he left upper point of the screen gt 1 1 in this case o if you select the option Relative to object the window will be located over the object o if you select the option Exact x y coordinates the coordinates of the object will remain the same to those of the last opening if the window is opened for the first time it will be located in the center of the screen gt any integral number including minus ones for upward and leftward shifting When setting the coordinates with special parameters you can use the following values gt x n y coordinates of the event object relative to the upper left point of the screen gt width n height the width and the height of the event object gt window width n window height the width and the height of the window being opened gt screen width n screen height the width and the height of the screen It is also possible to use the following mathematical operations gt addition gt substraction Far 2007 2011 ALEE Software GUI Machine 1 5 8 page 179 of 236 GUI Machine User s Manual gt multiplication gt division When you right click on the window the context menu with all possible settings will appear Example gt Ifthe option Relative to object is selected gt X 0 Y height locating the window under the object iF oo amp ee

GUI Machine User Manual

Contents

Download Pdf Manuals

Related Search

Related Contents