Home

Screen Architect Ltd

1. ae me Ier Ip 54 User Interface Prototype 54 Ul Prototype LoginPage Home Page HomePage 2 IT Customer 2 Customer Details 2 Customer List zi Sales History 2 Address Details Contact Details Figure 28 SA Project Browser You can drag and drop screens between folders If you right click with the mouse on an item in the Project View i e a folder or a screen element you may perform additional actions such as adding new packages creating screens renaming items generating documentation previews or even prototypes and deleting model elements It is also possible to edit the name of any item in the Project View through inline editing Tip The Project Browser is the main view of all model elements in your SA prototype model use the mouse to navigate the model Note The Project Explorer View displayed in SA will reflect the same structure as that within your EA model and project explorer However only SA packages on elements will be active The Model Context Menu The Root Node in the SA Project Explorer is the Model element You may have more than one model element The first level packages beneath the Model node are sometimes referred to as Views as they commonly divide a model into categories Project Explorer xi CN aB sitemap Documentation Login Pag e Generate Rename 2 Home 5 Customer X Delete Package zi Customer Details 2 Customer List zi Sales History Address De
2. Term to describe a user s movement across the web moving from page to page via hyperlinks using a web browser See Web Browser A Browser is a software program that enables you to view WWW documents They translate HTML encoded files into the text images sounds and other features you see A Button also referred to as a command button or push button is a control used to start actions or change properties In other words buttons cause the application to perform some action when the user clicks it A command button is usually rectangular and includes a label text graphic or both In web terms A web browser or web server feature which stores copies of web pages on a computer s hard disk An object oriented programming language based on the earlier C language A Cascading Style Sheet CSS is a W3C recommended language for defining style such as font size color Spacing etc for web documents Computer Aided Software Engineering CASE tool is a tool designed for the purpose of modeling and building software systems User Guide 78 Final Appendices Check Box Class Click Column Header Combo Box Command Button Comment Component Constraint Cookie D Database Database Schema Date Picker Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A CheckBox is a control used to represent an independent or non exclusive choice A check box appears as a square box with an accompany
3. Generate Version 1 2 Printed on 29 06 11 Functionality Opens the Add sub menu Opens the Documentation sub menu Opens the Generate sub menu User Guide 32 Final ch SCREEN Using Screen Architect ARCHITECT Menu Item Functionality Rename Rename model name Delete Package Delete model or package 3 6 3 The Screen Element Context Menu Right clicking on an Element screen in the Project Browser opens the element s context menu The example below illustrates the options available from this menu Project Explorer 3 54 Ul Prototype C Sitemap 47 Login Page Edit Screen Generate Rename Delete Screen a Sales Loi Address Details Contact Details Figure 31 Element Context Menu Menu Item Functionality Edit Screen Opens the selected screen in edit mode Generate Opens the generate sub menu From which you can generate prototypes and screen previews Rename Rename the selected screen Delete Screen Delete the selected screen Version 1 2 User Guide 33 Printed on 29 06 11 Final 3 7 3 7 1 ch SCREEN Using Screen Architect ARCHITECT The Ul Toolbox The UI Toolbox is used to create design controls and elements on a screen Related design controls and elements are organized into categories within the toolbox as shown below The UI Toolbox may be docked on either side of the Screen Design Window or free floated on top of the Screen Design Window to expose design and editing surfac
4. Shapes 5 Edit element properties as required Figure 51 Ul Toolbox The other method for creating a new element is to Copy and Paste an existing control on the Screen Design Surface Note that this can be done within an open and active screen or between screens Note When copying and pasting elements and controls within SA the properties of the element being copied are duplicated within the new element Version 1 2 User Guide 47 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT 3 12 2 Delete Element To delete an Element either 1 Select the Element s to be deleted and select the Del shortcut key or 2 Select the Element s to be deleted and right click to display the element context menu and select Delete Customer ID m _ be Oo dj Bring to Front First Name 44 Send to Back Last Name XI cu Category Consumer N43 Copy Comments A care x Delete Figure 52 Delete Element 3 12 3 Set Element Properties To edit an Elements properties 1 Select the element or control on the Screen Design Surface 2 The Properties Browser is displayed with the given element s properties as illustrated below for a label control Properties EI A Z E Appearance EI Font osoft Sans Serif 8 25pt Microso ft Sans Serif CH a oa 3 gt wo mmm mech nm 0 E uaaa oo 2 Ra e i 000 F2 7 25 bel og a EI m z F r 3 E Vi r
5. S Scenario Schema Screen Screen Flow Script Scripting Language Scroll Bar Search Engine Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A RadioButton also referred to as an option button represents a single choice within a limited set of mutually exclusive choices That is the user can choose only one of a set of options Accordingly option buttons are grouped in sets of two or more A facility for storing object models interfaces and implementations A desired feature property or behavior of a system The use of a pre existing artifact The process of importing source code into the model as standard UML model elements classes attributes operations etc A standard mark up language for creating word processor documents frequently associated with Microsoft Word The period of time during which a computer program executes A specific sequence of actions that illustrates behaviors Alternatively a scenario is a sequence of operations carried out in some order to produce a known result In UML and use case modelling a scenario may be used to illustrate an interaction or the execution of a use case instance See XML Schema A screen represents the complete GUI and may also be Known as a Page or Web Page A screen flow represents visually the navigation path between screens web pages A collection of statements written in a Scripting Language In web terms A simple programming l
6. SA Desi LIL 9 esign er see feed ieee cl ae Objects Repository Figure 1 SA Integration with EA Key integration features of SA include Screen Architect SA gt H HTML Wee Prototype Generate Ul Prototype gt and D Www o st Browser e SA can be launched either from within EA or from the Windows desktop e SA UI design controls and elements i e screens fields labels command buttons etc are stored in the EA repository as classes This includes an image of each screen that is designed Subsequent updates to these elements are synchronised with the EA repository e SA design controls and elements can be documented further within EA using EA s existing element properties dialog i e Notes Requirements Constraints Scenarios etc e SA documentation can be generated using EA S existing RIF and HTML documentation capabilities e UI prototypes can be generated from SA to be viewed through a web browser See also e Getting Started e Starting the Application e Using Screen Architect User Guide Final Version 1 2 Printed on 29 06 11 1 5 SCREEN Introduction IO eg Copyright Notice Copyright 2006 2010 Screen Architect Ltd All rights reserved The software contains proprietary information of Screen Architect Ltd It is provided under a license agreement containing restrictions on use and disclosure and is also protected by copyright law Reverse engineering o
7. SCREEN ARCHITECT Screen Architect Ltd Product Screen Architect User Guide Company Screen Architect Version 1 2 Date 28 06 2011 Release State Final Copyright O 2005 2010 Screen Architect Ltd All rights reserved SCREEN Document Information IO screen DOCUMENT INFORMATION Document History Filename SA User Guide V0 1b Revision History 0 1 11 03 07 Andrew Stubbins Initial draft 1 0 26 04 07 Andrew Stubbins Final draft 1 2 28 06 11 Final draft Document Purpose The purpose of this document is to provide a detailed User Guide for the software prototyping tool referred to here within as Screen Architect SA It also forms the basis for the Screen Architect Help System Contributors The following persons have provided input to this document Andrew Stubbins Director Business Systems Analyst amp Architect Bryce Day Director Project Manager Alex Henderson Senior Architect amp Developer Confidentiality The information contained in this document is proprietary to Screen Architect Ltd It may not be used reproduced or disclosed without the prior permission of Screen Architect Ltd Any recipients by retaining and using this document agree to the above restrictions and shall protect the document and information contained in it from loss theft and misuse Version 1 2 User Guide ii Printed on 29 06 11 Final Table of Content List of Tables Figures i TABLE OF CONTENTS DOCUMENT INFORMATION av
8. 256MB or higher recommended e 70 MB of available hard disk space 800 600 1024x768 or higher recommended Enterprise Architect for Windows e Desktop Edition e Professional Edition e Corporate Edition Starting the Application When you install Screen Architect on your computer a new program folder called Screen Architect is created in your Start menu unless you changed the default name during installation There are several ways in which Screen Architect can be launched and started Launching SA externally to EA You can launch and start SA externally to EA from the icon created on your Windows desktop during installation or alternatively 1 Open the Windows Start menu 2 Locate the Enterprise Architect program folder 3 Select Enterprise Architect 4 After a short pause the Start Page displays From this dialog you can a Open an existing EA project file EAP file with an existing SA model or to create a new SA model b Create a new EA project EAP file and therefore new SA model c Connect to a DBMS repository containing an existing EA project Corporate EA Edition only Note Users may find that this method of starting SA results in improved application response and performance during prototyping and screen design Launching SA from within EA As an alternative to launching SA from the Windows desktop you may start SA from within EA an existing EA project This may be done in one of two ways
9. Textalign HiddleLeft EI Design Mame Labell Locked False El Layout EI Location 6 149 6 149 120 23 120 23 Artifactld 00 7f5t6 11f4 4c46 b906 930cOabasct4 Size The size of the control in pixels Figure 35 Properties Browser Properties within the SA Property Browser are grouped into one of several Property Categories These include the following e Appearance e Contents Version 1 2 User Guide 35 Printed on 29 06 11 Final 3 9 Using Screen Architect ARCHITECT e Font e Behaviour e Design e Interaction e Layout e Miscellaneous See also e Ul Design Controls amp Elements Note The properties specified for a SA Ul design element are often used to implement certain functionality within the context of Ul screen design and prototyping in SA and therefore in some instances do not necessarily translate into a design specification Synchronisation with Enterprise Architect Each time a screen is updated and saved in SA synchronisation with the EA repository takes place and the corresponding artefacts are updated with the latest information or new artefacts are created see Integration with Enterprise Architect In the case of SA design element properties these are stored as Tags in EA as illustrated below BEE In order to display the Tag information gi H GH d m associated with a SA artefact in EA Ca Customer ddress Details E SE 1 Select the SA element In the EA TE Customer Details Proj
10. Textboxes CheckBoxes RadioButtons etc 4 3 1 Button A Button also referred to as a command button or push button is a control used to start actions or change properties In other words buttons cause the application to perform some action when the user clicks it command button is usually rectangular and includes a label text graphic or both Key properties include Property Functionality Text The text label or name associated with the control and is displayed on the Ul wherever applicable Link Used to create links from elements such as Links Buttons Images Boxes and Placeholders to either e A Screen within SA e An external web page In other words where the prototype will navigate to when this element is clicked See Also e Element Linking 4 3 2 CheckBox Active A CheckBox is a control used to represent an independent or non exclusive choice A CheckBox can have one of three states e Checked the associated value or property is set e Cleared the associated value or property is not set e Mixed value the associated value is set for some but not all elements of the selection Key properties include Property Functionality Text The text label or name associated with the control and is displayed on the UI wherever applicable Version 1 2 User Guide 63 Printed on 29 06 11 Final 4 3 3 4 3 4 4 3 5 Ul Design Controls A Elements ARCHITECT ComboBox A ComboBox combines a text bo
11. The Element menu enables you to manage the layout of Ul controls and elements within a screen during screen design Alignment k Make Same Spacing Z Order Figure 13 Element Menu Menu Item Functionality Alignment Opens the Alignment sub menu Make Same Opens the Make Same sub menu Spacing Opens the Spacing sub menu Z Order Opens the Z Order sub menu Version 1 2 User Guide 23 Printed on 29 06 11 Final 3 3 6 1 ch SCREEN Using Screen Architect ARCHITECT The Alignment Sub menu Provides options for aligning multiple selected Ul elements controls on a open and active screen Align Top Align Bottom Align Left Align Right Align vertical Centers CirlH Alt v CtrH Alt H Align Horizontal Centers Figure 14 Alignment Sub menu Menu Item Functionality Align Top Align top edges of selected elements Align Bottom Align bottom edges of selected elements Align Left Align left edges of selected elements Align Right Align right edges of selected elements Align Vertical Centers Align centers of selected elements vertically Ctrl Alt V Align Horizontal Centers Align centers of selected elements horizontally Ctrl Alt H 3 3 6 2 The Make Same Sub menu Provides options for sizing multiple selected UI elements controls on a open and active screen Size To Control width Alt z7 Size To Control Height DIEN Size To Control Alt B Size To Fit Size To Grid Figure 15 Make
12. horizontal spacing between selected elements Concatenates removes vertical spacing between selected elements Incrementally decreases the horizontal spacing between selected elements Incrementally decreases the vertical spacing between selected elements Incrementally increases the vertical spacing between selected elements Incrementally increases the vertical spacing between selected elements Makes the horizontal spacing between selected elements equal Alt Makes the vertical spacing between selected elements equal Alt Use the Z Order sub menu to bring the selected element s back forward to the top or bottom Th Bring To Front CtrlH lt F Zi Send To Back Ctrl Alt B Figure 17 Z Order Sub menu Functionality Bring selected element s to the Front in order of appearance and display Ctrl Alt F Bring selected element s to the Back in order of appearance and display Ctrl Alt B User Guide 25 Final 3 3 7 3 3 8 ch SCREEN Using Screen Architect ARCHITECT The Window Menu The Window menu provides access to various actions related to the configuring of open windows Close All Reset Window Layout 1 Designer Sales History Figure 18 Window Menu Menu Item Functionality Close All Closes all open windows Reset Window Layout Resets the current active window layout to the default SA window layout Note All open screens within the Screen Design View are displayed as me
13. 3 7 2 Shapes Category Shapes The Ul design controls in the Shapes category OR Pointers provides a basic set shape elements that are typically DN Box used during web design and by information architects Horizontal Line To add an element to the current diagram left click the x Placeholder required icon and drag it into position on the diagram Vertical Line Set an element name and other properties in the Properties dialog or as prompted Figure 34 Shapes Category Note Each element has its own unique set of properties that that may be configured to implement certain behaviours and formats For example Box and Line controls can be formatted in terms of colour border size etc 3 8 The Properties Browser The Screen Architect Properties Browser is used to configure the properties of Ul design elements controls used during the design of screens These properties will vary from Ul design element to element and are used to configure properties such as element name size formatting etc For user s familiar with development tools such as Microsoft Visual Studio etc the SA Properties Browser works in a similar manner as illustrated below for a Label control for example Properties gs EE El Appearance EI Fant Microsoft Sans Gent 8 25pt Hame Microsoft Sans Sent Size 8 25 Unit Foint Bold False GdiCharSet 1 GadiverticalFont False Italic False Strikeout False Underline False ForeColor HE Black Text Customer Name
14. AN HTML REPORT eavnvnvnvnvnrnvnnnrnrnrnrnensnsnenenenenenensnnnnnnnnnnnnnnenenenenenenenenenenenenen 73 Version 1 2 User Guide iil Printed on 29 06 11 Final Table of Contents Listof Tables amp Figures lite APPENDIX 1 ABBREVIATIONS uns 75 APPENDIX 2 GLOSSARY E 77 APPENDIX 3 ACKNOWLEDGEMENT Ssang 91 APPENDIX 4 REFERENCES ooreen nesei E EE EREE EEEE KEE EEEE 91 APPENDIX 5 RELATED WEBSITE REFERENCES Qrrnnnrvvnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnr 91 LIST OF FIGURES FIGURE 1 SA INTEGRATION WITH EA eeceeeeeceecceccecceccecceccuecuecueeaecaeenecaesaeeaeeaueceecueceesuesueeneseeeaees 9 FIGURE 2 LAUNCHING SA FROM THE EA PLUG IN MENU 17 FIGURE 3 LAUNCHING SA FROM THE EA PROJECT BROWSER 17 FIGURE 4 THE ABOUT SCREEN ARCHITECT DIALOG 18 FIGURE 5 THE SCREEN ARCHITECT WORKSPACE runnrnnnnnnnnnnnnnrnnrnnnnnvnnnnnnnnnnsnnennnnnnennnnnennernennennee 19 FIGURE 6 THE SCREEN DESIGN MWINDOW 20 FIGURE 7 THE SA MAIN MENU 21 FIGURE 8 FILE MENU 2 00 ccceccecceccecceceeeeeeceeceeceecueceecuecuecuecececaeeaecaeeaeeaeeaeeseeseeseeseesueeueeneeaees 21 FIGURE 9 EDIT MENU 22 FIGURE 10 VIEW MENU 22 FIGURE 11 PROJECT MENU 22 FIGURE 12 SCREEN MENU 23 FIGURE 13 ELEMENT MENU 23 FIGURE 14 ALIGNMENT GUB MENU 24 FIGURE 15 MAKE SAME DGUB MENU nne 24 FIGURE 16 SPACING SUB MENU rnnnnnnnnnnnnnnnnnnnnennnnnnnnvnnnnnnennennnnernennennenennennnnnnnnnnnnnennnnennennnnnenee 25
15. HTML Document HTML Document Object Model HTML Editor HTML Form HTML Page HTML Tags HTTP Client HTTP Server Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT In web terms A part of the browser screen displaying a particular content Frames are often used to display content from different web pages Therefore frames are controls that enable web pages to be segmented into separate content areas and functionality In other words they act as windows within windows A group box is a special control you can use to organize a set of controls A group box is a rectangular frame with an optional label that surrounds a set of controls Group boxes generally do not directly process any input However you can provide navigational access to items in the group by using the TAB key or by assigning an access key to the group label If you use arrow keys to support user navigation for controls within a group box for example option buttons you should use them to move only between controls in the group box The top level main page of a web site The default page displayed when you visit a web site Hypertext Markup Language HTML is the language of the web HTML is a set of tags that are used to define the content layout and the formatting of the web document Web browsers use the HTML tags to define how to display the text A document written in HTML HTML Document Object Model HTML DOM is a programming interface for HT
16. My Network Save as type Rich Text Format Figure 71 Windows Save As dialog Give your RTF document a file name and select where you wish to save it on your system and click the Save button Tip Alternatively select the F6 shortcut key to generate a RIF document Note The RIF document generated will include documentation for all the contents of the selected package as well as those of any child packages Ensure that your package selection is active in the Project Explore or else an RIF document will be generated for the whole prototype as well as your EA model s held in the corresponding EA repository Create an HTML Report To generate an HTML Report 1 In the Project Browser select a package or view for which to generate an HTML Report Right click the mouse on the folder icon within the Project Browser to open the context menu Select Documentation HTML Report b e Rich Text Format RTF Report la HTML Report Generate Rename Ka Delete Package Figure 72 Generate HTML Report 4 The Windows Browse For Folder dialog will be displayed as illustrated below Version 1 2 User Guide 74 Printed on 29 06 11 Final SCREEN Creating Documents IO screen Browse For Folder Desktop G My Documents F My Computer My Network Places E Recycle Bin My Safe IG Microsoft Office fn Security Apps IG Software Make New Folder Figure 73 Windows Browse For Folder
17. SA Main Menu and Lock Controls menu item or 2 Select the Ctrl L shortcut key Version 1 2 User Guide 46 Printed on 29 06 11 Final Tay SCREEN Using Screen Architect ARCHITECT 3 12 Element Tasks Elements otherwise known in SA as a Ul design elements or controls i e labels textboxes checkboxes combo boxes etc are the artifacts used to design screens in SA This section explores the tasks you can perform with Ul design elements or controls in SA including e Add Element e Delete Element e Set Element Properties See also e The Ul Toolbox e The Screen Design Window e The Properties Browser e Ul Design Controls amp Elements e Key Element Features 3 12 1 Add Element Ul design Elements and Controls may be added to a Screen Design Surface in one of several ways The primary way of doing this is to create new items from the Ul Toolbox as follows Toolbox Create new UI design controls and elements as follows 1 Open a screen select the desired screen from the Project Explorer if required Button CheckBox ComboBox val Image A Label Link ListBox RadioButton TextBox 2 Select the appropriate category in the Ul Toolbox for example Controls 3 Select the desired item within the category for example Button or Label 4 Click anywhere on the diagram to place the new element or alternatively drag and drop the element onto the screen design surface
18. Same Sub menu Menu Item Functionality Size to Control Height Sizes the selected controls to the same Height of the first control selected Alt Z Size to Control Width Sizes the selected controls to the same Width of the first control selected Alt X Size to Control Sizes the selected controls to the same Height and Width of the first control selected Alt B Size to Fit Sizes the selected controls to the same Height and Width in order to fit on screen Size to Grid Sizes the selected controls to the same Height and Width of the Grid Version 1 2 User Guide 24 Printed on 29 06 11 Final 3 3 6 3 3 3 6 4 Using Screen Architect The Spacing Sub menu SCREEN ARCHITECT Provides options for spacing multiple selected Ul elements controls on a open and active screen Concatenate Horizontal Space Concatenate Vertical Space Decrease Horizontal Space Decrease Vertical Space Increase Horizontal Space Increase Vertical Space Make Horizontal Space Equal Make Vertical Space Equal Menu Item Concatenate Horizontal Space Concatenate Vertical Space Decrease Horizontal Space Decrease Vertical Space Increase Horizontal Space Increase Vertical Space Make Horizontal Space Equal Make Vertical Space Equal The Z Order Sub menu Menu Item Bring to Front Send to Back Version 1 2 Printed on 29 06 11 Alt Subtract At Add Figure 16 Spacing Sub menu Functionality Concatenates removes
19. User Guide 44 Printed on 29 06 11 Final 3 11 6 3 11 7 e IO eg Using Screen Architect ARCHITECT G SampleScreenArchitectPrototype_v0 1 Screen Architect BEA File Edit View Project Screen Element Window Help i L 3 el JG a BD Oi a 3 l 8 Toolbox x Start Screen Designer Customer Details w X Project Explorer a x oe MiC E ee lis SA User Interface Prototype Button SCREEN CT 54 UI Prototype CheckBox ARCHITECT C Sitemap ES ComboBox Customers Reports Admin Home Logout 3 Login Page Image Home Page A Label Customer Details Sales History 3 Customer A Link EE 8 Customer Details ES ce Customer List Customer Details Customer Name 8 Customer List ca e S Sales History RadioButton Customer Nome 2 Address Details abl TextBox SEET 8 Contact Details First Name Last Name 0 Category Consumer vi Active Comments Contact Details Address Details Properties we I xx 821 E Design Name Customer Details E Layout Ss a Location 0 0 Size 743 480 EI Misc ArtifactId 31 afc8d3 eed1 4b86 8b Name Ready Ti 15 15 72743 x 480 etic Eo New Folder SI SA User Guide O 1 EX Enterprise Architect 6 5 SampleScreenArchite Y untitled Paint QR 3 06 p m Een EE ee Ut eer Ge ge EE Figure 48 Screen Properties Tip Screen areas can be resized by selecting the Screen Design Surface as with any other Ul design con
20. What is Screen Architect e Using Screen Architect e Integration with Enterprise Architect Installation Screen Architect is distributed as a single executable setup file exe Please note that Enterprise Architect 6 5 or later must be installed The latest edition of the evaluation and registered versions of SA are always available from www screenarchitect com Access to the registered version requires a username and password to gain access to the registered user area of the web site These will be provided upon purchase of a license Installing SA Run the SA setup program Generally you can accept all the default options without change Note however that previously installed releases of SA should first be uninstalled when upgrading To place SA in a directory other than the default enter the name of the destination when prompted You might be prompted to restart your computer when the installation completes Although this is not always necessary we recommend a restart just to be certain Note SA requires Read Write access to the Program files directory where SA and EA have been installed Version 1 2 User Guide 15 Printed on 29 06 11 Final 2 1 2 2 2 2 2 1 2 2 2 Minimum System Requirements Windows Version e Intel Pentium processor or better e Microsoft Windows 98 SE Windows NT 4 0 with Service Pack 5 Windows 2000 Windows XP or Windows 2003 e Microsoft Net Framework 2 0 e 128 MB of RAM
21. can be initiated from the selected element s Property Browser and Link property Note As will link elements with screens the same approach applies to linking elements with external web pages However when the Link Details dialog is displayed you should select the URL radio button and enter the site web address i e www screenarchitect com Subsequently the URL will be displayed in the link field When linking elements with a screen an information flow connector between the element and the destination screen is automatically created A configurable option introduced in v1 2 allows the following options to be applied when creating links between elements and screens 1 No connector link generated 2 Element to Screen connector link generated 3 Screen to Screen connector link generated To configure the information flow connection i e how the information flow will be represented in Enterprise Architect Relationship or Site Map diagram 1 From the Tools Menu select Options 2 Select Navigator from the Options menu 3 The Information Flow Mode can be selected from this screen L General 2 Navigation When configuring linkable elements such as buttons to navigate to another screen when generating matching elements in Enterprise Architect Screen Architect can generate an information flaw In the following drop you can choose to not have information flows created orto have them created between either the element itself i e but
22. element s Ctrl X Edit Copy the selected element s Ctrl C Edit Paste clipboard elements to the currently open and active screen Ctrl V Edit Delete the selected element s Del Edit Select all elements within the currently open and active screen Ctrl A Edit Generate Ul prototype from Screen Architect F5 Project Generate RTF documentation F6 Project Generate HTML documentation F7 Project Lock Ul elements controls on a selected open and active screen Ctrl L Screen Align centers of selected elements vertically Ctrl Alt V Element Align centers of selected elements horizontally Ctrl Alt H Element Size selected controls to the same Height of the first control selected Alt Z Element Size selected controls to the same Width of the first control selected Alt X Element Size selected controls to the same Height and Width of the first control Alt B Element selected Make horizontal spacing between selected elements equal Alt Element Make vertical spacing between selected elements equal Alt Element Bring selected element s to the Front in order of appearance and display Ctrl Alt F Element Bring selected element s to the Back in order of appearance and display Ctrl Alt B Element Display help contents Ctrl F1 Help Table 1 Screen Architect Keyboard Shortcut Keys Version 1 2 User Guide 49 Printed on 29 06 11 Final 4 1 4 1 1 SCREEN Ul Design Controls amp El
23. software solutions that fulfil business and user expectations Some of these challenges include Version 1 2 User Guide 7 Printed on 29 06 11 Final 1 3 ch a Introduction ARCHITECT e Software requirements are often easily misinterpreted when eliciting them from customers users and subsequently communicating them to software development teams e Most software requirements and resulting functional specifications are difficult to read and understand making it hard for both customers and developers to effectively visualise the end product from the underlying documentation alone e Because customers are unable to see and feel the end result an expectation gap occurs between their visualisation of what they are getting and the delivery of the final product Subsequently the signoff off of large software specifications is difficult to achieve with any degree of certainty and confidence by customers in the end product e Many unknown requirements are only discovered once the development team is a significant way through or in some cases completed the software development e Most often usability issues typically occur after the software has been completed and released to production leading to substantial effort to rework the user interface Ul resulting in additional time cost and effort To overcome some of these challenges business systems analysts and software architects rely on modern analysis and design approaches and ca
24. the Screen Design Surface 2 Select the Image element smart action tag Prototypelmage Tasks i Link m D Reset control size Select Image NE Ee Select an image to displayed within the bounds of this control Figure 61 Smart Action Tag 3 Select the Select Image control and the Select An Image dialog will be displayed Version 1 2 User Guide 55 Printed on 29 06 11 Final 4 1 6 4 1 7 f hissen UI Design Controls amp Elements ARCHITECT PrototypeImage Tasks select An Image biet DE Link m P Reset control size Select Image Figure 62 Select An Image Dialog 4 Select the From File control and the Select Image File dialog will be displayed 5 Browse and select the file of the image you wish to use and click on the Open button The selected image will be displayed in the Select An Image dialog 6 Click on the Ok button and the image will now be displayed in the Image element a jens dis SCREEN ARCHITECT Fernesseasssmsnn i C Figure 63 Linked Image Element Behaviour The behaviour or implementation of certain elements such as textboxes can be controlled through Behaviour Properties i e implementing the textbox element as either a single or multi line textbox This feature may be accessed and set via the Properties Browser for a selected element or via the smart action tag as illustrated below SE G EE HENNE TESE 4 PrototypeTextBox Tasks Multiline 9 o N
25. to the website for use by the server during a later visit Data stored in a computer in such a way that a computer program can easily retrieve and manipulate the data A database schema is the description of a database structure It defines tables and fields and the relationship between them The date picker control provides a calendar month display that enables the user to select a date You can use this control directly in a window or as a pop up window from a drop down list control User Guide 79 Final Appendices Data Base Administrator Design Dynamic Host Configuration Protocol Dynamic HTML Dialog Box Domain Document Type Definition E Element Enterprise Architect Entity Enumeration Form Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A Database Administrator DBA is the person or the software who administers a database including database backup maintenance and implementation activities The part of the software development process whose primary purpose is to decide how the system will be implemented During design strategic and tactical decisions are made to meet the required functional and quality requirements of a system Dynamic Host Configuration Protocol DHCP is an Internet standard protocol that assigns new IP addresses to users as need Dynamic DHTML is a term commonly to describe HTML content that can change dynamically A dialog box provides an exchange of inf
26. tool for rapidly modeling and designing graphical user interfaces GUI for web based software applications It has been developed as an integrated plug in to Sparx Systems Computer Aided Software Engineering CASE tool Enterprise Architect EA providing additional value to an already successful and integrated software design and specification platform that supports the UML 2 0 specification among others Key SA features include 1 Support for rapid User Interface Ul modelling and screen design including drag and drop out of the box Ul elements and components that adhere to existing standards 2 Application structure and navigation modelling using visual mapping and linking techniques commonly employed by information architects 3 Support for documenting an organisations given UI standards that could then be leveraged to create reusable Ul templates within a prototype 4 Support for comprehensively describing and documenting Ul design elements in the same manner supported by EA including element descriptions associated business requirements and rules 5 Capability to generate prototype specifications either as RTF documents or published HTML pages for incorporation with software design specifications 6 Integration with UML models maintained in EA including use cases activity diagrams and class models 7 Capability to generate standalone prototypes in HTML or similar format for demonstrating application design conce
27. website is www omg org follow the links to the UML pages A service that can be requested from an object to effect behavior An operation has a signature which may restrict the actual parameters that are possible See RadioButton A logical container of model elements Groups elements and may also contain other packages See Web Page Palette windows are modeless secondary windows that present a set of controls For example when toolbar controls appear as a window they appear in a palette window Palette windows are distinguished by their visual appearance The height of the title bar for a palette window is shorter but it still includes only a Close button in the title area The specification of a variable that can be changed passed or returned A parameter may include a name type and direction Parameters are used for operations messages and events Portable Document Format PDF is a document file format developed by Adobe Most often used for text documents Placeholder is a shape used by information architects during the creation of wireframes to represent other controls and content areas on screen in what are known as low fidelity prototypes and screen page mockups In other words Placeholders are used more for expressing the layout of screens and web pages and the location of elements that are not yet designed or available User Guide 84 Final Appendices Plug In Popup Window Primary Window Pro
28. window to tabbed windows group follow the steps below 1 Click on the item to move and drag it over the window group to which to add the target window The navigation compass is activated 2 Move the window to the centre of the navigation compass until the tabbed window icon becomes active the window closes 3 Release the mouse button to confirm the selection The window is added to the tabbed windows group 3 5 3 Autohide Windows You can automatically hide browser frames and menus by clicking on the button located in the top right corner of the frame To turn off the Autohide for a particular set of menus within a frame click the SS button When you automatically hide a set of windows in a frame the menu items contract to the outside of the application workspace Hover over the icons with your mouse to access the menus as illustrated below 7 SA User Interface Prototype EM 54 Ul Prototype UD Sitemap ea Login Page zi LoginPage ea Home Page HomePage e Customer a Customer Details a Customer List zi Sales History Address Details zi Contact Details JaJ0 ds3 080044 i Figure 27 Displaying Auto hidden windows Version 1 2 User Guide 30 Printed on 29 06 11 Final 3 6 3 6 1 SCREEN Using Screen Architect entice The Project Browser The Project Browser enables you to navigate through the Screen Architect project space It displays Packages and Screens Project Explorer EI
29. work habits Floating Windows Try floating the various windows instead of docking them To do this just drag the window by its title bar to the required position Dock Required Windows into One Frame You can also dock all of the windows you are using into a single frame The following example shows the Project Browser Properties and Toolbox windows all in one frame You can do this with all dockable windows Version 1 2 User Guide 28 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT RK CT 54 UI Prototype C Sitemap 2 Login Page LoginPage 2 Home Page 8 HomePage 2 CT Customer S Customer Details 8 Customer List 8 Sales History 8 Address Details Contact Details TProjec yy Proper X Toolbox Figure 25 Widows Docked into a single frame 3 5 2 The Dockable Window 2005 Style The 2005 style uses a different method for docking windows to the other styles This is achieved by dragging the window over a Navigation Compass to specify a target destination or to dock the window into a tabbed location To move a window to a new destination follow the steps below 1 Click on the item to move and start dragging it in the direction of its destination This activates the navigation compass Dock the window horizontally at the top based on the compass position Dock the window horizontally at the bottom based on the compass position Dock the window verticall
30. Also e Element Linking Version 1 2 Printed on 29 06 11 Functionality The text label or name associated with the control and is displayed on the UI wherever applicable Used to create links from elements such as Links Buttons Images Boxes and Placeholders to either e A Screen within SA e An external web page In other words where the prototype will navigate to when this element is clicked User Guide 68 Final 4 4 3 SCREEN Horizontal amp Vertical Lines Line shape elements i e Horizontal and Vertical lines provide a way for web application designers to create sections and space on a screen web page Key properties include Property Functionality Fore Colour Sets the colour of Labels Links and Lines One of three colour palettes may be selected including e System e Web e Custom Line Width Sets the width of lines Version 1 2 User Guide 69 Printed on 29 06 11 Final Prototype Management ih ARCHITECT 5 Prototype Management The information in this section provides you with a detailed guide regarding how to manage Ul prototypes in SA including how to generate standalone HTML prototypes from SA for user reviews and walk throughs When you have read through this section you will e Be able to generate standalone HTML UI prototypes from SA e Be able to structure and manage your SA Ul prototype more effectively In addition we recommend that you fully explore the sample project supplied with SA
31. E EEE p Figure 64 Element Behaviour properties Element Content Certain elements may contain content including e ComboBox controls may have selection or drop down lists defined e Listbox controls may have selection lists defined e Image controls may reference and contain a graphic or image from an external Source These properties may be maintained either via the Properties Browser or Smart Actions tag for a selected element See also e The Properties Browser Version 1 2 User Guide 56 Printed on 29 06 11 Final UI Design Controls amp Elements e Element Tasks Version 1 2 Printed on 29 06 11 User Guide Final IO SCREEN ARCHITECT d Ul Design Controls amp Elements e ComboBox e ListBox e Image Version 1 2 Printed on 29 06 11 User Guide Final IO SCREEN ARCHITECT 58 Ul Design Controls amp Elements ARCHITECT Element Formatting Certain elements can be formatted in several ways including Fonts Background and Foreground fill colours Border formatting Text alignment Sizing Generally these properties are maintained via the Properties Browser and apply to controls such as Labels and Links as well as Shape controls Properties Sdt CT Appearance dn CT Font Microsoft Sans Serf 8 25pt Ki Mame Microsoft Sans Serif Size 8 25 Unit Point Bold False GdiCharset 1 Gdiverticalkont False 7 Italic False Strikeout False Underline False ForeColor HE Black InnerCol
32. FIGURE 17 Z ORDER GUB MENU rnrn nne 25 FIGURE 18 Vy IND OW IE EEN 26 FIGURE EN HELP ENE EE EE EE 26 FIGURE 20 PP NUT OPS ae 27 FIGURE 21 FILE amp EDIT ToOoLpap 27 FIGURE 22 PROJECT Keier NG 27 FIGURE 23 PROJECT EXPLORER TOoOLpAn 27 FIGURE 24 ELEMENT IOOLBAR anaran rnrnn nnen 28 FIGURE 25 WIDOWS DOCKED INTO A SINGLE FRAME 2 cecceccecceeceeceeceeeeeeceeceececcuccuseeeeueeusenseaees 29 FIGURE 26 DOCKING WINDOWS USING THE WINDOW 2005 GIE 30 FIGURE 27 DISPLAYING AUTO HIDDEN WINDOWS rrr nrn 30 FIGURE 28 SA PROJECT BpOwWerEn 31 FIGURE 29 MODEL CONTEXT MENU 31 FIGURE 30 PACKAGE CONTEXT MENU 32 FIGURE 31 ELEMENT CONTEXT MENU 33 FIGURE NE QOUBOX EE 34 FIGURE 33 CONTROLS CATEGORY EE 34 FIGURE 34 SHAPES CATEGORY EE 35 FIGURE 35 PROPERTIES BROWSER raunnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnennnnnennennennnnnennnnnenneennnnnennnnnennenne 35 FIGURE 36 EA TAGS BROWSER bic tccssacchensaacebscnconsienasancdsvasnachenvageeleswaonseeeasandsiauecehertaadctenesanseeces 36 FIGURE 37 AppNEwWbDACKAGE 37 FIGURE 38 ADD NEW GCHEEN 38 FIGURE 39 GENERATE RTF DOCUMENT rrnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnennnnnennenennennennnnennennennnnennennnnnene 38 FIGURE 40 WINDOWS SAVE AS DIALOG 39 FIGURE 41 GENERATE HI ML RERpORT 39 FIGURE 42 WINDOWS BROWSE FOR FOLDER DIALOG 40 FIGURE 43 GENERATE PROTOTYPE ounnnunnnnnnnnnnnnnnnnnnnnnannnnennnnennnnennnnennrnenennnnennnnannnnennnnennnnennnnene 40 F
33. IGURE 44 GENERATE PROTOTYPE OPTIONS DIALOG 41 FIGURE 45 GENERATE PROTOTYPE OUTPUT PATH DIALOG 41 FIGURE 46 PROTOTYPE INDEX PAGE rnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnennnnnennennnnnnnnennnnnnennennnnnenennennenne 41 FIGURE 47 ADD NEW SCREEN 2 2 ceeceeeceeceececceccecceeceeceecaeceecaecaecaeeceeceeceecsecueneesueseesaesansaeeaees 43 Version 1 2 User Guide iv Printed on 29 06 11 Final Table of Contents Listof Tables amp Figures lite FIGURE 48 SCREEN PROPERTIES ccccececcecceceeceececceceeceeceececaecueceeaececueseeaecueceeaesaeseesusaeeneseeaees 45 FIGURE 49 GENERATE SCREEN PREVIEW 0 ceccecceceececcecceceececceeaecuecueceeaecueceeaeseceeseeaeeneeeeaees 46 FIGURE 50 SCREEN PREVIEW DIALOG 46 FIGURE 5ST Ul TOOLB X E 47 FIGURE 52 DELETE ELEMENT morunnnnnnnnnnnnnnnnnnnnnnnnvnnnnennnnnnnnnrnnnnnnnnnnnennennannennennnnnenneennennennnnennennee 48 FIGURE 53 PROPERTIES BROWSER rannnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnennrnnennennennennennnnnennennnennennnnnennenne 48 FIGURE 54 ELEMENT CONTEXT MENU 51 FIGURE 55 SMART ACTION TIaG 51 FIGURE 56 SMART ACTION TAG DISPLAYED narnnnnnnnnnnnnnnnnannnnnnnnnnnnnnnnnnnenennnnennnnennnnennenennnnennnnene 51 FIGURE 57 SMART ACTION TAG FOR LINKING ELEMENTS 2 2 eeceeeeeeceeceeceececceccecceccuscareaeeaees 52 FIGURE 58 LINK DETAILS DIALOG 52 FIGURE 59 SELECT SCREEN DIALOG 52 FIGURE 60 LINKED ELEMENT onunnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
34. Images e Boxes e Placeholders Version 1 2 User Guide 51 Printed on 29 06 11 Final IO eg Ul Design Controls A Elements ARCHITECT In order to link an element to another screen i e a Button for navigation purposes 1 Select the element or control on the Screen Design Surface 2 Select the element smart action tag PrototypeButton Tasks Link Figure 57 Smart Action Tag for Linking Elements 3 Select the Link control and the Link dialog will be displayed Link Details en PrototypeButton Tasks Link E Figure 58 Link Details Dialog 4 Select the Screen radio button and the link control and the Select Screen dialog will be displayed with available Screen elements to link to Select Screen SA User Interface Prototype CT SA Ul Prototype Ga sin Screen Pal Login Page O ud Home Page Customer Details Customer List Sales History 2 Address Details PrototypeButton Tasks Contact Details Link Figure 59 Select Screen Dialog 5 Select a screen to link to and click on the Select button 6 The name of the screen will be displayed in the Link Details dialog 7 Click the Ok button and the element will be linked to a screen PrototypeButton Tasks Link Customer List Figure 60 Linked Element Version 1 2 User Guide 52 Printed on 29 06 11 Final IO eg Ul Design Controls A Elements ARCHITECT Alternatively the same actions for linking elements to screens
35. It will assist you in learning to use SA and offers tips on getting the most out of SA s features see also e Getting Started e Starting the Application e Ul Design Controls amp Elements e Generating 5 1 Generating Prototypes To generate a prototype 1 Inthe Project Browser select a package or view 2 Right click the mouse on the folder icon within the Project Browser to open the context menu 3 Select Generate Generate Prototype V Documentation Renane ag Generate Prototype X Delete Package Figure 66 Generate Prototype 4 The Generate Prototype Options dialog will be displayed as illustrated below Version 1 2 User Guide 70 Printed on 29 06 11 Final Prototype Management LO ARCHITECT Generator Options Targets la Targets Address Details Qutout Contact Details E utp Sales History Customer Details Figure 67 Generate Prototype Options dialog 5 You may c Select which screens Targets to generate by selecting or deselecting the corresponding checkbox s Select the Output icon and define the output path to store the generated HTML prototype files on your system as illustrated below Generator Options Output lat Targets Output Path C Datal Va Prototype el EF Output Figure 68 Generate Prototype Output Path dialog 6 Click the Ok button to generate the prototype Tip Alternatively s
36. ML documents A software program for editing HTML pages With an HTML editor you can add elements like lists tables layout font size and colors to a HTML document like using a word processor An HTML editor will display the page being edited exactly the same way it will be displayed on the web See WYSIWYG A form that passes user input back to the server The same as an HTML Document Code to identify the different parts of a document so that a web browser will know how to display it A computer program that requests a service from a web server A computer program providing services from a web server User Guide 81 Final Appendices Hyperlink Hypertext Hypertext Markup Language Hyper Text Transfer Protocol Hyper Text Transfer Protocol Secure Information Architecture Interaction Case Interaction Design Internet Internet Browser Internet Explorer J Java Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A pointer to another document Most often a pointer to another web page A hyperlink is a synonym for a hotlink or a link and sometimes called a hypertext connection to another document or web page Hypertext is text that is cross linked to other documents in such a way that the reader can read related documents by clicking on a_ highlighted word or symbol see also hyperlink Hypertext Markup Language HTML is the language of the web HTML is a set of tags that are used to defi
37. Right Font The font formatting and style properties applied to text based controls such as Labels Version 1 2 User Guide 64 Printed on 29 06 11 Final Ul Design Controls amp Elements ARCHITECT Property Functionality Fore Colour Sets the colour of Labels Links and Lines One of three colour palettes may be selected including e System e Web e Custom 4 3 6 Link Contact Detalls Aa Link is a textual control sometimes known as a hyperlink and is used for navigational purposes i e linking one screen to another Key properties include Property Functionality Text The text label or name associated with the control and is displayed on the UI wherever applicable Text Align Sets the position of text within controls such as Labels and Links Valid alignment settings include e Top TopLeft TopCenter TopRight e Middle MiddleLeft MiddleCentre MiddleRight e Bottom BottomLeft BottomCentre BottomRight Font The font formatting and style properties applied to text based controls such as Labels Fore Colour Sets the colour of Labels Links and Lines One of three colour palettes may be selected including e System e Web e Custom Link Used to create links from elements such as Links Buttons Images Boxes and Placeholders to either e A Screen within SA e An external web page In other words where the prototype will navigate to when this element is clicked See Also e Element Linking Version 1 2
38. User Guide 65 Printed on 29 06 11 Final 4 3 7 4 3 8 4 3 9 SCREEN ListBox 1 l A ListBox is a control for displaying a list of choices for the user The d choices can be text colour icons or other graphics The purpose of a list box is to display a collection of items and in most cases support selection of an item or items in the list Key properties include Property Functionality Listltems The list items to be displayed in this control i e a ComboBox or ListBox control RadioButton Office Hours A RadioButton also referred to as an option button represents a single choice within a limited set of mutually exclusive choices That After Hours is the user can choose only one of a set of options Accordingly option buttons are grouped in sets of two or more Public Holiday Key properties include Property Functionality Text The text label or name associated with the control and is displayed on the UI wherever applicable TextBox Customer ID A TextBox also referred to as an edit control is a rectangular control where the user enters or edits text It can be defined to support a single line or multiple lines of text The standard text box control provides basic text input and editing support Editing includes inserting and deleting characters and the option of text wrapping Although individual font or paragraph properties are not supported the entire control can support a specific font sett
39. Version 1 2 User Guide 16 Printed on 29 06 11 Final Getting Started Ta eg ARCHITECT 1 Launch SA from the EA Add Ins main menu as illustrated below SS SampleScreenArchitectPrototype_v0 1 EA File Edit View Project Diagram Element Tools Add Ins Settings Window Help DG D B H l BPMN Technology UO DO en 7 Meta Mc To WAX IS Sc Screen Architect gt About f Meta Modele w Microsoft Visio gt Launch Screen Archiect ENTERPRISE G Class ARCHITECT 6 5 Manage Add Ins e a m H Figure 2 Launching SA from the EA Plug in Menu 2 Launch SA from by selecting and double clicking an SA screen class element contained in the EA Project Browser as illustrated below Note that you will be prompted with a pop up screen with two options allowing you to either a Design Screen which will launch SA and default to the selected screen b View Properties which allows users to document the SA screen class artefact using the standard EA Element Properties Dialog x Project Browser ay G c Bs d p SA User Interface Prototype 3 E 54 UI Prototype C Sitemap 3 Login Page Screen Architect Screen S LoginPage S ScreenArchitect Screen Screen Architect Screen 3 Ga Home Page You have selected a Screen Architect Screen a HomePage E ScreenArchitect Screen Home Would vou like to CJ Customer TE Address Details TE Customer Details View Pr
40. anguage that can be executed by a web browser or a web server See JavaScript and VBScript Scroll bars are horizontal or vertical scrolling controls you can use to create scrollable areas other than on the window frame or list box where they are automatically included Computer program used to search and catalogue index the millions of pages of available information on the web Common search engines are Google and AltaVista User Guide 86 Final Appendices Secondary Window Standard Generalized Markup Language Site Map Slider Simple Mail Transfer Protocol Simple Object Access Protocol Structured Query Language Secure Socket Layer Status Bar Storyboard Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT Secondary windows support and supplement a user s activities in the primary windows of an application Although secondary windows share many characteristics with primary windows they also differ from primary windows in behavior and use For example a secondary window should typically not appear as an entry on the taskbar Secondary windows obtain or display supplemental information that is often related to the objects that appear in a primary window A secondary window can be modeless or modal A modeless secondary window allows the user to interact with either the secondary window or the primary window just as the user can switch between primary windows modal secondary window requires the user to
41. applications also create other windows either directly or indirectly to perform tasks related to the main window Each window plays a part in displaying output and receiving input from the user A typical primary window consists of a frame or border that defines its extent and a title bar that identifies what is being viewed in the window If the viewable content of the window exceeds the current size of the window scroll bars are used The window can also include other components such as menu bars toolbars and status bars The same as an URL or URI See URL A document normally an HTML file designed to be distributed over the Web User Guide 89 Final Appendices Web Server Web Services Web Site Wildcard Win Forms Application Web Services Description Language World Wide Web What You See Is What You Get X XForms Extensible Markup Language XML Document Object Model XML Schema XML Schema Definition Extensible Stylesheet Language Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A server is a computer that delivers services or information to other computers In web terms A server that delivers web content to web browsers Software components and applications running on web servers The server provides these services to other computers browsers or individuals using standard communication protocols A collection of related web pages belonging to a company or an individual A c
42. ard is a series of illustrations that represent a process such as the steps of interacting with a computer or website User Guide 87 Final Appendices Style Guide T Tabbed Control Tag Test Case Text Box Toolbar Toolbox ToolTip Tree View Control U Unified Modeling Language Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A style guide is a reference that establishes the look and feel of a user interface by clearly defining the standards and conventions to be conveyed Style guides usually include the principles that guide the design of the interface graphic layout grids exact size and spacing of elements in the interface fonts colours standard text messages such as error messages and labelling standards The Usability Company 2007 A tabbed control is analogous to a divider in a file cabinet or notebook You can use this control to define multiple logical pages or sections of information within the same window In web terms Notifications or commands written into a web document See HTML Tags A test case is the specification for a single test of functionality and identifies both passed and failed conditions or results A TextBox also referred to as an edit control is a rectangular control where the user enters or edits text It can be defined to support a single line or multiple lines of text Toolbars and status bars are special interface constructs like menu bars for manag
43. aunnvannnvnvnnnnvnnnnnnnnnvnnnnnnvnnvnvnnnsvnnnsvnvnnrsvnnrsvnnnsvnnnnvnnnnvannnrnvnnvnvnnvnnnn lI re KE II LGT OF FIGURES 2 IV LIST OF TABLES EEN V PREFACE EEN VI Me INTRODUCTION tence teen a A 7 1 1 WHAT IS SCREEN ARCHITEC saa ga Ee Se deeg gedu Ee Eed ege gg 7 1 2 BACKGROUND EE 7 1 3 THE SCREEN ARCHITECT VALUE BpOPOSmrION 8 1 4 INTEGRATION WITH ENTERPRISE ARCHITECT 9 1 5 COPYRIGHT Nom 10 1 6 ACKNOWLEDGEMENT OF TRADEMARkKS nr nranrnnnn nran nnrnnna 11 1 7 SA PRODUCT SOFTWARE LICENSE cccsceccececccceccccecccececcecucceceeaecucaececacaeceeaeceuaeeeeaeeas 12 1 8 ORDERING SCREEN ARCHITECT ccceccccececececcecececcccecececueeucececscuuausecscaecausecseaueeneneras 14 SPE TR 14 1 10 AVAILABLE HELP FILE FOopMATg 14 1 11 YOUR FEEDBACK SEN 14 2 GETTING STARTED envnunnvannavnvnnnnvnnnnvnnnnnnnnnvnnnnnnvnnnsvnnnsvnnnsvannnrnnnnrnvnnnnvnnvnvnnnnvnnnnvannnvnnnne 15 2 1 NNN 15 2 2 STARTING THE APPLICATION nesravanrnnannanannnnnnnnrnnensnnensnnevnnnnnnnnnnensnnensnnenenenvnnennnennernvenen 16 2 3 LICENSE MANAGEMENT Lae ee ee AE 18 3 USING SCREEN ARCHITECT icccccesccccsccSicccsceteccessettcxcceatccussteSaccesendsaussdedsexddeatacwansstaecsecs 19 3 1 INTRODUCING THE APPLICATION WORkKSPDACE 19 3 2 THE SCREEN DESIGN WINDOW ccccceccccecccecccececcecuccececcecucaccacucauceuaeceuaeceeaeeaeaenecaees 20 3 3 THE MAIN VIE NU EEE EE 21 3 4 WORKSPACE TOOLBARS runrnunnnnnnnnnnnnnnnnnnnnnnenenenenenenenenenenenenenenenenenenenen
44. b Page Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A Use Case is a UML model element that describes how a user of the proposed system will interact with the system to perform a discrete unit of work It describes and signifies a single interaction over time that has meaning for the end user person machine or other system and is required to leave the system in a complete state either the interaction completed or was rolled back to the initial state A model that describes a system s functional requirements in terms of use cases Uniform Resource Identifier URI is a term used to identify resources on the internet URL is one type of an URI Uniform Resource Locator URL otherwise known as a web address is the standard way to address web documents pages on the Internet i e http www screenarchitect com A scripting language from Microsoft VBScript is the default scripting language in ASP Can also be used to program Internet Explorer A Microsoft programming language A software application that is designed using web based technology and architecture and whose User Interface is deployed via a Web Browser A software program used to display web pages A document normally an HTML file designed to be distributed over the Web A Window is a container used by every graphical Microsoft Windows based application that serves as either a primary or secondary interface between the user and the application Most
45. c controls such as a ComboBox The list items to be displayed in this control i e a ComboBox or ListBox control Used to insert an external image or graphic into a Image control Design properties are used to set cater for properties specific to the design runtime of a control in SA The technical name of the control used in code to identify the object Used to set the lock properties of SA elements and controls where e Unlocked False e Locked True And therefore determines whether or not the control can be resized and moved on the Screen design surface or not Interaction properties are used to define the interaction properties of controls when rendered as part of a Prototype such as navigation settings etc Used to create links from elements such as Links Buttons Images Boxes and Placeholders to either e A Screen within SA e An external web page In other words where the prototype will navigate to when this element is clicked User Guide Final SCREEN ARCHITECT Type Property Category Property Category Property Property Category Property Property Category Property 61 Ul Design Controls amp Elements 6 1 6 1 1 6 1 2 6 2 6 2 1 0 2 2 6 2 3 6 2 4 62 9 6 3 6 3 1 6 3 2 7 1 Category Property Layout Location X Y Padding All Left Top Right Bottom Size Width Height Miscellaneous ArtifactID Descriptio
46. ckage is a container of model elements and is displayed in the Project Explorer using the folder con familiar to Windows users This section explores the tasks you can perform with packages including e Open a Package e Adda Package e Adda Screen e RTF Documentation e HTML Documentation e Generate Prototype e Rename a Package e Delete a Package See also e The Project Browser 3 10 1 Open Package To open a package in the SA Project Explorer 1 Double left click the package you want to open 3 10 2 Add Package To add a new package 1 In the Project Browser select the package or view under which to add a new package 2 Right click the mouse on the folder icon within the Project Browser to open the context menu 3 Select Add Add Package Cy Add Package Vi Add Screen Documentation Generate Rename Delete Package Figure 37 Add New Package 4 Inthe dialog box fill in the name of the new package and click on the OK button 5 The new package is inserted into the tree at the current location Tip Alternatively select the Add package toolbar icon in the Project Browser Version 1 2 User Guide 37 Printed on 29 06 11 Final SCREEN ARCHITECT Using Screen Architect 3 10 3 Add Screen To add a new screen 1 In the Project Browser select the package or view under which to add a new screen 2 Right click the mouse on the folder icon within the Project Browser to open the c
47. complete interaction within the secondary window and close it before continuing with any further interaction outside the window Standard Generalized Markup Language SGML is an international standard for markup languages The basis for HTML and XML A site map is a graphical or textual representation of the structure and hierarchy of a web application or web site and may be used to identify the web pages and content areas contained therein A slider sometimes called a trackbar control consists of a bar that defines the extent or range of the adjustment and an indicator that shows the current value for the control Simple Mail Transfer Protocol SMTP is a standard communication protocol for sending e mail messages between computers Simple Object Access Protocol SOAP is a standard protocol for letting applications communicate with each other using XML structured Query Language SQL is an ANSI standard computer language for accessing and manipulating databases Secure Socket Layer SSL is the software to secure and protect web site communication using encrypted transmission of data A status bar is a special area within a window typically at the bottom that displays information about the current state of what is being viewed in the window or any other contextual information such as the keyboard state Although a status bar can contain controls it typically includes read only or non interactive information A storybo
48. ct Explorer Properties Toolbox Figure 10 View Menu Menu Item Functionality Output Select or unselect view the Output window Project Explorer Select or unselect view the Project Explorer window Properties Select or unselect view the Properties Browser window Toolbox Select or unselect view the Toolbox window The Project Menu Use the Project menu for tasks related to the management of your prototype project such as generating documentation and UI prototypes Documentation Prototype k Figure 11 Project Menu Version 1 2 User Guide 22 Printed on 29 06 11 Final 3 3 4 1 3 3 4 2 3 3 5 3 3 6 ch SCREEN Using Screen Architect ARCHITECT Menu Item Functionality Documentation Opens the Documentation sub menu Prototype Opens the Prototype sub menu The Documentation Sub menu Generate documentation from SA Menu Item Functionality Rich Text RTF Format Generates RTF documentation F6 HTML Format Generates HTML documentation F7 The Prototype Sub menu Generate SA prototypes Menu Item Functionality Generate Prototype Generates a UI prototype from Screen Architect F5 The Screen Menu The Screen menu enables you to save screen images to file as well as configure screen properties and options Lack Controls Chr Figure 12 Screen Menu Menu Item Functionality Lock Controls Locks UI elements controls on a selected open and active screen Ctrl L The Element Menu
49. d that you use the Software on an as is basis and at your own risk To the maximum extent permitted by law all representations or warranties whether statutory express or implied save any which may not lawfully be excluded are expressly excluded including the implied warranties of merchantability and fitness for a particular purpose Screen Architect will not be liable for any loss of profits or any indirect or consequential loss or damage however caused arising out of or in connection with the use of or inability to use the Software If despite clauses 3 1 to 3 3 Screen Architect is proven to be liable to you for direct damages or loss that liability will not exceed the total amount of the license fee actually paid by you for the Software Default and termination Screen Architect may terminate this License immediately by notice in writing to you if you breach any provision of this License and if the breach can be remedied fail to remedy the breach within 14 days after notice from Screen Architect On termination of this License you must destroy or return the Software to Screen Architect and destroy all other copies of the Software General Any notice to be given in terms of this License must be made in writing or by facsimile transmission sent to the registered office or principal place of business of the other party or to such other address as may be notified by either party to the other from time to time Any commu
50. dialog 5 Select where you wish to save the HTML document on your system and click the Save button Tip Alternatively select the F7 shortcut key to generate a HTML document Note The HTML document generated will include documentation for all the contents of the selected package as well as those of any child packages Ensure that your package selection is active in the Project Explore or else an HTML document will be generated for the whole prototype as well as your EA model s held in the corresponding EA repository Version 1 2 User Guide 75 Printed on 29 06 11 Final SCREEN ARCHITECT Appendices Appendix 1 Abbreviations Printed on 29 06 11 ASP Active Server Page CASE Computer Aided Software Engineering CSS Cascading Style Sheet DB Database DBA Database Administrator DHCP Dynamic Host Configuration Protocol DHTML Dynamic Hypertext Markup Language DOM Document Object Model DTD Document Type Definition EA Enterprise Architect GUI Graphical User Interface HTML Hypertext Markup Language HTML DOM HTML Document Object Model HTTP Hyper Text Transfer Protocol HTTPS Hyper Text Transfer Protocol Secure MS Microsoft OMG Object Management Group OO Object Oriented PDF Portable Document Format SA Screen Architect SGML Standard Generalized Markup Language SOA Service Oriented Architecture SQL Sequential Query Language SMTP Simple Mail Transfer Protocol SOAP Simple Object Access Protocol SQL Structured Query Language SSL Secu
51. e Create new UI design controls and elements as follows 1 Open a screen select the desired screen from Button the Project Explorer if required CheckBox ER ComboBox 2 Select the appropriate category in the Ul Pier Toolbox for example Controls A Label Link 3 Select the desired item within the category for en example Button or Label RadioButton TextBox 4 Click anywhere on the diagram to place the new element or alternatively drag and drop the element onto the screen design surface Shapes 5 Edit element properties as required Figure 32 Ul Toolbox See also e Ul Design Controls amp Elements Controls Category Controls The Ul design controls in the Controls category We lt Pointer gt provides a basic set of standard Windows Forms Button design controls CheckBox To add an element to the current diagram left click the Combobox required icon and drag it into position on the diagram ai Image Set an element name and other properties in the A Label Properties dialog or as prompted Link ListBox Note _ Each element has its own unique set of E RadioButton properties that that may be configured to implement certain behaviours and formats For example Button TextBox Image and Link controls may be linked to other screens or external sites Figure 33 Controls Category Version 1 2 User Guide 34 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT
52. e As illustrated above the SA application workspace consists of the components described below Together these elements provide a simple and flexible Ul prototyping environment that is integrated with Enterprise Architect Those who have used MS Office and Visual Studio should find the Screen Architect interface quite familiar Version 1 2 User Guide 19 Printed on 29 06 11 Final 3 2 SCREEN Using Screen Architect IO screen The core SA workspace components include e The Screen Design Window The large central area is the Screen Design Window or View This is where you can design screens including place new UI controls and elements and set their characteristics properties e The Main Menu The SA Main Window contains all the features and functionality of Screen Architect Standard Windows Application features functionality is provided through this interface including a Main Menu and Toolbars as well as standard toolboxes and browser windows e The Project Browser The SA Project Browser provides user with the capability to structure and navigate a prototype project by creating a hierarchical folder structure in order to group and manage screens Double click on packages to open them and right click with the mouse to view context sensitive menu options for project elements e The Properties Browser The SA Property Browser provides users with a convenient way to view edit and configure common properties of UI controls and element
53. ect Browser TE Customer List TE sales History H E ScreenArchitect Screen Address Details H H ER Screen rchitect Screen Contact Details 2 Select View and Tag Values EB Screen rchitect Screen Customer Details from the EA Main Menu Or the H Screend rchitect Buttons Button Ctrl Shift 6 shortcut key H Screen rchitect Buttons Buttonz ES sSrreendrrhikerk CherkBavs CherkBrvi1 EE EES Note You may need to refresh the EA Aj x SL ke Tagged Values dialog to display the tag Button Class EN Artifactld cBf95388 bocb 4Hae 00b 42aabebbdcer values for the selected element Height 23 Ba Tip You can document each SA Locked false S i Text CA element further within EA using the EA M We bad 7445 dobB dea bdl2 Bbf debarff20 Properties dialog K NE T requirements constraints scenarios etc ZDrder 20 we Pan amp Zoom os Tagged Values Instant Help Screendrchitect LinkLabel Link El Screen4rchitect LinkLabel Links Figure 36 EA Tags Browser see also e Ul Design Controls amp Elements Note The properties specified for a SA UI design element are often used to implement certain functionality within the context of Ul screen design and prototyping in SA and therefore in some instances do not necessarily translate into a design specification Version 1 2 User Guide 36 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT 3 10 Package Tasks A Pa
54. elect the F5 shortcut key to generate a prototype Once the prototype has been generated from Screen Architect your default Web Browser will be automatically opened and display an Index page for your prototype as illustrated below Version 1 2 User Guide 71 Printed on 29 06 11 Final SCREEN Mozilla Firefox JG 3 File Edit View History Bookmarks Tools Help gt ei gh LI Plet TDatetl GA 20broktotvpe gt IC JER Getting Started Gs Latest Headlines Business Server Error Address Details Contact Details sales History Customer Details Customer List File MC Dakab SA Prokokypelid dedtd954 6aa1 4517 a159 cbddb7zbeo df htm Figure 69 Prototype Index Page You can navigate your Ul prototype accordingly Version 1 2 User Guide 72 Printed on 29 06 11 Final ch SCREEN Creating Documents ARCHITECT 6 Creating Documents A powerful feature of Screen Architect like that of Enterprise Architect is the capability to generate Rich Text Format RTF and HTML reports and documents SA currently leverages EA s document generation capabilities However this is currently limited to a single predefined layout template For this reason it is recommended that for more advanced document generation and reporting using custom templates i e RTF templates this be done from within Enterprise Architect The information in this section provides you with a detailed guide on how to gen
55. ement are displayed in the Property Browser See also e Using Screen Architect e The Properties Browser e Element Tasks Version 1 2 User Guide 50 Printed on 29 06 11 Final SCREEN Context Menu Each SA design element has a context menu associated with it which can be displayed by selecting the Element s and right clicking as illustrated below Customer ID m m 4 Bring to Front First Name 44 Send to Back Last Name do Cut Category Consumer N23 Copy Comments ke ge X Delete Figure 54 Element Context Menu See also e Using Screen Architect e Element Tasks Smart Actions Smart Actions appear as a small tag on the top right of some elements i e text boxes images buttons etc as illustrated below Customer ID o Figure 55 Smart Action Tag Smart Actions are a productivity feature that allows you to set certain properties such as links and behaviours without having to access the SA Property Browser Select the Smart Action Tag and define the property as illustrated below Customer ID Demo F Multiline o PrototypeTextBox Tasks Figure 56 Smart Action Tag Displayed See also e The Properties Browser e Element Tasks Element Linking Certain SA Elements can be linked to either a screen or external web page in order to support navigation between screens in the prototype Elements that provide a link capability include e Buttons e Links e
56. ements igs UI Design Controls amp Elements The information in this section provides you with a detailed guide regarding the UI design controls and elements that are available for designing screens using Screen Architect SA When you have read through this section you will e Understand what UI design controls and elements available in SA including their key features and properties e Understand how to use the SA Property Explorer to edit and change UI control and element properties In addition we recommend that you fully explore the sample project supplied with SA It will assist you in learning to use SA and offers tips on getting the most out of SA s features See also e Getting Started e Starting the Application e Using Screen Architect e The Ul Toolbox e Element Tasks Key Element Features Elements otherwise known in SA as a UI design elements or controls i e labels textboxes checkboxes combo boxes etc are the artifacts used to design screens in SA This section explores some of the key features and functionality associated with various design elements in SA Element Properties Dialog As already mentioned in previous sections throughout this guide each SA design element has an associated Properties dialog associated with it Subsequently Element properties can be set and managed through the SA Property Browser By selecting a design element control on a Screen Design Surface the corresponding properties of the el
57. er OO languages User Guide 82 Final Appendices L Label Link Menu Menu Item Message Message Box Metamodel Method Mock up Model Module MySQL Name Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A Label is a textual control used to describe other controls such as textboxes on the screen A Link is a textual control sometimes known as a hyperlink and is used for navigational purposes i e linking one screen to another Menus display a list of commands available to the user There are several types of menus including drop down menus shortcut menus and cascading menus Menu items are the individual choices that appear on a menu Menu items can be text or graphics such as icons or graphics and text combinations that represent the actions presented in the menu Messages indicate a flow of information or transition of control between elements In UML messages are used by Communication diagrams Sequence diagrams Interaction Overview diagrams and Timing diagrams A message box is a secondary window that displays a message about a particular situation or condition Messages are an important part of the interface for any software product Messages that are too generic or poorly written frustrate users increase support costs and ultimately reflect poorly on the quality of the product Therefore it is worthwhile to design effective message boxes A model that defines the language for
58. erate documentation pertaining to your SA UI prototype When you have read through this section you will e Be able to generate RTF documentation from either SA or EA e Be able to generate HTML documentation from either SA or EA In addition we recommend that you fully explore the sample project supplied with SA It will assist you in learning to use SA and offers tips on getting the most out of SA s features See also e Getting Started e Starting the Application e Ul Design Controls amp Elements 6 1 Create an RTF Document To generate a RTF document 1 In the Project Browser select a package or view for which to generate an RIF document 2 Right click the mouse on the folder icon within the Project Browser to open the context menu 3 Select Documentation Rich Text Format RTF Report d e Rich Text Format RTF Report vl HTML Report Generate i Rename Ka Delete Package Figure 70 Generate RTF Document 4 The Windows Save As dialog will be displayed as illustrated below Version 1 2 User Guide 73 Printed on 29 06 11 Final 6 2 D SCREEN ARCHITECT Creating Documents Save As Save in Design a archive 9 HELP System My Recent Profiles Documents Research eeneg W Research Reference Models v0 1 M 5A CLASS MODELS v0 1 MSA USE CASES v0 1 Desktop WH testi fe f My Documents DE My Computer File name H
59. erate a HTML document Note The HTML document generated will include documentation for all the contents of the selected package as well as those of any child packages Ensure that your package selection is active in the Project Explore or else an HTML document will be generated for the whole prototype as well as your EA model s held in the corresponding EA repository See also e Creating Documents 3 10 6 Generate Prototype To generate a prototype 1 Inthe Project Browser select a package or view 2 Right click the mouse on the folder icon within the Project Browser to open the context menu 3 Select Generate Generate Prototype Documentation Renane Ka Delete Package Figure 43 Generate Prototype Version 1 2 User Guide 40 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT 4 The Generate Prototype Options dialog will be displayed as illustrated below Generator Options Targets Address Details Output Contact Details EF Outp Sales History Customer Details Pal Targets Customer List HomePage LoginPage Figure 44 Generate Prototype Options dialog 5 You may a Select which screens Targets to generate by selecting or deselecting the corresponding checkbox s b Select the Output icon and define the output path to store the generated HTML prototype files on your system as illustrated below Generator Options Out
60. expressing a model The implementation of an operation It specifies the algorithm or procedure associated with an operation Another term for prototypes usually referring to low fidelity prototypes such as paper illustrations screenshots or simple configurations of screens with limited interaction See also prototype The Usability Company 2007 An absiraction of a physical system with a certain purpose A software unit of storage and manipulation Modules include source code modules binary code modules and executable code modules Free open source database software often used on the web A string used to identify a model element User Guide 83 Final Appendices Namespace Navigate O Object Object Management Group Operation Option Button P Package Page Palette Window Parameter Portable Document Format Placeholder Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT A part of the model in which the names may be defined and used Within a namespace each name has a unique meaning In web terms The same as Browse An entity with a well defined boundary and identity that encapsulates state and behaviour State is represented by attributes and relationships behaviour is represented by operations methods and state machines An object is an instance of a Class The Object Management Group OMG is the standards body responsible for the UML specification and management Their
61. f the software is prohibited Please read the license agreement for full details Due to continued product development this information may change without notice The information and intellectual property contained herein is confidential between Screen Architect and the client and remains the exclusive property of Screen Architect If you find any problems in the documentation please report them to us in writing Screen Architect does not warrant that this document is error free No part of this publication may be reproduced stored in a retrieval system or transmitted in any form or by any means electronic mechanical photocopying recording or otherwise without the prior written permission of Screen Architect Licensed users are granted the right to print a single hardcopy of the user manual per licensed copy of the software but may not sell distribute or otherwise dispose of the hardcopy without written consent of Screen Architect Screen Architect Limited P O Box 5714 Wellesley Street Auckland New Zealand Phone 64 9 303 2023 Fax 64 9 303 2023 Support Email support screenarchitect com Sales Email sales screenarchitect com Website www screenarchitect com Version 1 2 User Guide 10 Printed on 29 06 11 Final 1 6 Introduction Acknowledgement of Trademarks The following are Trademarks of Sparx Systems e Enterprise Architect EA MDG The following are Trademarks of Microsoft Microsoft Word Microsoft Of
62. fice Windows Activex The following are Registered Trademarks of OMG CORBA The OMG Object Management Group logo The Information Brokerage CORBA Academy IIOP XMI The following are Trademarks of the OMG OMG Object Management Group the CORBA logo ORB Object Request Broker the CORBA Academy design OMG Interface Definition Language IDL CORBAservices CORBAfacilities CORBAmed CORBAnet Unified Modeling Language UML the UML Cube logo MOF CWM Model Driven Architecture MDA OMG Model Driven Architecture OMG MDA The following are Trademarks of IBM e RUP Version 1 2 User Guide Printed on 29 06 11 Final SCREEN ARCHITECT 1 7 Introduction SCREEN ARCHITECT SA Product Software License The Software Product refer www screenarchitect com The Number of Copies to which this License relates 1 SOFTWARE LICENSE Screen Architect Limited Screen Architect is willing to license the Software described above th e Software to you or the organisation if any on whose behalf you are accepting the license if you accept all the terms of this License Please read the terms carefully and indicate your acceptance at the end by checking the I accept the terms of the License checkbox and then selecting the Next button If you do not agree to any of these terms do not check the license terms checkbox in which case yo
63. gress Indicator Property Sheet Prototype Prototyping R Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT An application built into another application In web terms A program built in or added to a web browser to handle a special type of data like e mail sound or movie files Pop up windows are secondary windows used to display additional information when an abbreviated form of the information is the main presentation For example you could use a pop up window to display the full path for a field or control when an entire path cannot be presented and must be abbreviated Pop up windows are also used to provide context sensitive Help information ToolTips and balloon tips that provide the names for controls in toolbars are another example of pop up windows used to display contextual information Every graphical Microsoft Windows based application creates at least one window called the main window that serves as the primary interface between the user and the application Most applications also create other windows either directly or indirectly to perform tasks related to the main window Each window plays a part in displaying output and receiving input from the user A typical primary window consists of a frame or border that defines its extent and a title bar that identifies what is being viewed in the window If the viewable content of the window exceeds the current size of the window scroll bars are used The windo
64. haracter used to substitute any character s Most often used as an asterix in search tools A Win Forms Application is an application whose user interface is designed and implemented using traditional form controls as opposed to web pages Web Services Description Language WSDL is an XML based language for describing Web services and how to access them World Wide Web WWW is a global network of computers using the internet to exchange web documents See also Internet What You See Is What You Get WYSIWYG in Web terms To display a web page being edited exactly the same way it will be displayed on the web A future version of HTML Forms based on XML and XHTML Differs from HTML forms by separating data definition and data display Providing richer and more device independent user input Extensible Markup Language XML is a simplified version of SGML especially designed for web documents developed by the W3C XML Document Object Model XML DOM is a programming interface for XML documents developed by W3C A document that describes in a formal way the syntax elements and parameters of a web language Designed by W3C to replace DTD XML Schema Definition XSD is the same as XML Schema Extensible Stylesheet Language XSL is a suite of XML languages developed by W3C including XSLT XSL FO and XPath User Guide 90 Final IO SCREEN Appendices ARCHITECT XSL Transformations XSL Transformations XSLT is a
65. he About Screen Architect dialog located under the Help About SA menu item About Screen Architect SCREEN D ARCHITECT Screen Architect Limited 2006 2010 All rights reserved Addin Version 0 0 9 182 Technology Version 4 http ai sceenarchitect come Figure 4 The About Screen Architect dialog Version 1 2 User Guide 18 Printed on 29 06 11 Final 3 1 ch SCREEN Using Screen Architect ARCHITECT Using Screen Architect The information in this section provides you with a detailed guide to using Screen Architect SA to prototype and design screen It introduces users to the Screen Architect application workspace and features and functionality When you have read through this section you will e Understand the SA workspace including key features and functionality e Understand how SA is integrated with EA e Be able to begin prototyping software user interfaces with your own EA projects and SA In addition we recommend that you fully explore the sample project supplied with SA It will assist you in learning to use SA and offers tips on getting the most out of SA s features See also e Getting Started e Starting the Application Introducing the Application Workspace The SA Application Workspace consists of a number of windows In concept it is similar to programs such as Microsoft Outlook and the Microsoft Visual Studio application suite CG SampleScreenArchitectPrototype_v0 1 Screen Architec
66. il Screen Architect Ltd endeavour to provide a rapid response to all questions and concerns regarding Screen Architect You can contact the support team at support screenarchitect com 1 10 Available Help File Formats 1 11 Currently Screen Architect s help files are issued in the following formats based on this user guide e CHM e PDF e HTML Your Feedback Screen Architect Ltd would like to stay in touch with what Screen Architect users need in order to accomplish their tasks efficiently and effectively We value any suggestions feedback and comments you might have regarding this product the documentation or install process You can access our online feedback pages at www screenarchitect com Alternatively you can contact Screen Architect by email at support screenarchitect com Version 1 2 User Guide 14 Printed on 29 06 11 Final 2 1 2 1 1 Getting Started The information in this section provides you with a quick start guide to Screen Architect SA lt illustrates how to open and create new prototype projects set up local preferences and navigate the Screen Architect application When you have read through this section you should be able to begin prototyping software user interfaces with your own EA projects and SA In addition we recommend that you fully explore the sample project supplied with SA It will assist you in learning to use SA and offers tips on getting the most out of SA s features See also e
67. ines Sets the colour of Labels Links and Lines One of three colour palettes may be selected including e System e Web e Custom Sets the fill colour of the shape One of three colour palettes may be selected including e System e Web e Custom Sets the border colour of the shape One of three colour palettes may be selected including e System e Web e Custom User Guide Final Type Category Property Property Property Property Property Property Property Property Property Property Property Property Property Property Property 60 Ul Design Controls amp Elements 1 7 TextAlign 2 Behavior 2 1 Multiline 3 Contents 3 1 Listltems 3 2 Image 4 Design 4 1 Name 4 2 Locked 5 Interaction 5 1 Link Version 1 2 Category Property Printed on 29 06 11 Description Sets the position of text within controls such as Labels and Links Valid alignment settings include e Top TopLeft TopCenter TopRight e Middle MiddleLeft MiddleCentre MiddleRight e Bottom BottomLeft BottomCentre BottomRight Behavior properties are used to define behaviors specific to a give control type such as whether or not a text box should be single or multi line Controls whether the text of an edit control i e Textbox can span more that one line or not where e Single Line False e Multiline True Contents properties are used to define and set the contents for specifi
68. ing Key properties include Property Functionality Multiline Controls whether the text of an edit control i e Textbox can span more that one line or not where e Single Line False e Multiline True Version 1 2 User Guide 66 Printed on 29 06 11 Final 4 4 4 4 1 H IO eg Ul Design Controls A Elements ARCHITECT Shapes The second category of Ul design elements available from the Ul Toolbox are Shape Shape elements are typically used to elaborate the Ul design and include elements such as Boxes Vertical and Horizontal lines Placeholders etc Box ITEMS The Box shape element provides users with a great deal of flexibility in Screen Architect as a substitute for other Ul controls that are not yet available This is due to its formatting and linking properties Some of the Box shape s design and simulation uses could include among others E e Menus e Buttons e GroupBox e Panel e Content Frame e Tabs e Tables and Grids e Backgrounds Key properties include Property Functionality Text The text label or name associated with the control and is displayed on the Ul wherever applicable Text Align sets the position of text within controls such as Labels and Links Valid alignment settings include e Top TopLeft TopCenter TopRight e Middle MiddleLeft MiddleCentre MiddleRight e Bottom BottomLeft BottomCentre BottomRight Font The font formatting and style properties applied to text based c
69. ing label When the choice is set a check mark appears in the box When the choice is not set the check box is empty A description of a set of objects that share the same attributes operations methods relationships and semantics A class may use a set of interfaces to specify collections of operations it provides to its environment In web terms A mouse click on a hyperlink element such as text or picture on a web page which creates an event such as taking a visitor to another web page or another part of the same page a column heading control also known as a header control is used to display a heading above columns of text or numbers A ComboBox combines a text box with a list box This allows the user to type an entry or choose one from a predefined list See Button An annotation attached to an element or a collection of elements A note has no semantics A modular deployable and replaceable part of a system that encapsulates implementation and exposes a set of interfaces A component is typically specified by one or more classifiers e g implementation classes that reside on it and may be implemented by one or more artifacts e g binary executable or script files A rule or condition that applies to some element It is often modeled as a pre or post condition Information from a web server stored on your computer by your web browser The purpose of a cookie is to provide information about your visit
70. ing sets of controls A toolbar is a panel that contains a set of controls designed to provide quick access to specific commands or options Specialized toolbars are sometimes called ribbons tool boxes and palettes The toolbar control supports docking and windowing functionality It also includes a dialog box so that the user can customize the toolbar You define whether the customization features are available to the user and what features the user can customize A toolbox is secondary window containing icons representing key functions Le cut and paste that a user may use often in an application ToolTip is a small context window that includes descriptive text displayed when the user moves the pointer over a control A tree view control is a special list box control that displays a set of objects as an indented outline based on their logical hierarchical relationship The control includes buttons that expand and collapse the outline You can use a tree view control to display the relationship between a set of containers or other hierarchical elements The Unified Modeling Language UML is a standard object oriented modeling language used to specify model and design software applications and systems User Guide 88 Final Appendices Use Case Use Case Model Uniform Resource identifier Uniform Resource Locator V VBScript Visual Basic W Web Application Web Browser Web Page Window Web Address We
71. ise o E a a wh 23 ER n D g o ai z bel 3 m wo D n S lt E NN A s EE N LN I O N w Artifactld 8007f5 6 11f4 4c46 b906 930c0aba3cf4 Size The size of the control in pixels Figure 53 Properties Browser 3 Edit the properties you want Note The properties specified for a SA Ul design element are often used to implement certain functionality within the context of Ul screen design and prototyping in SA and therefore in some instances do not necessarily translate into a design specification With the exception of certain generic properties such as Element Location Size Name etc these properties will vary from element to element see also e The Properties Browser e The Element Menu e Ul Design Controls amp Elements Version 1 2 User Guide 48 Printed on 29 06 11 Final IO SCREEN Using Screen Architect ARCHITECT 3 13 Keyboard Shortcut Keys The table below lists the default keyboard shortcut functions within Screen Architect Function Shortcut Category Create a new Screen Architect project Ctrl N File Open an existing Screen Architect project Ctrl O File Save the currently open and active screen in a Screen Architect project Ctrl S File Save all currently open screens in a Screen Architect project Ctrl Shift F File Undo the last action performed Ctrl Z Edit Redo the last action performed Ctrl Y Edit Cut the selected
72. n Tip Alternatively select the F6 shortcut key to generate a RTF document Note The RIF document generated will include documentation for all the contents of the selected package as well as those of any child packages Ensure that your package selection is active in the Project Explore or else an RIF document will be generated for the whole prototype as well as your EA model s held in the corresponding EA repository See also e Creating Documents 3 10 5 HTML Documentation To generate a HTML report 1 In the Project Browser select a package or view for which to generate an HTML Report 2 Right click the mouse on the folder icon within the Project Browser to open the context menu 3 Select Documentation HTML Report e Rich Text Format RTF Report i HTML Report Generate Rename x Delete Package Figure 41 Generate HTML Report Version 1 2 User Guide 39 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT 4 The Windows Browse For Folder dialog will be displayed as illustrated below Browse For Folder x Desktop G My Documents E 4 My Computer J My Network Places E Recycle Bin My Safe Gy Microsoft Office Security Apps IG Software Make New Folder Figure 42 Windows Browse for Folder dialog 5 Select where you wish to save the HTML document on your system and click the Save button Tip Alternatively select the F7 shortcut key to gen
73. n Layout properties are used to define the layout settings of controls on a Screen including size and location The coordinates of the upper left corner of the control relative to the upper left corner of its container The X coordinate The Y coordinate Used to specify the interior spacing of the control i e Box shapes Padding is applied to all inner edges of the Box shape Padding is applies to just the left inner edge of the Box shape Padding is applies to just the top inner edge of the Box shape Padding is applies to just the right inner edge of the Box shape Padding is applies to just the bottom inner edge of the Box shape The size of the control height and width in pixels The width settings of the shape in pixels The height settings of the shape in pixels Miscellaneous properties cater for generic control settings The unique identifier of the SA element artifact Table 2 Summary of Element Property Categories amp Properties Version 1 2 Printed on 29 06 11 User Guide Final SCREEN ARCHITECT Type Category Property Property Property Property Property Property Property Property Property Property Property Property Category Property 62 SCREEN 4 3 Controls The first category of Ul design elements available from the Ul Toolbox are Controls Control elements are typically those that are used for Form design and include elements such as Buttons Label
74. n XML language for transforming XML documents A part of XSL developed by W3C Version 1 2 User Guide 91 Printed on 29 06 11 Final Appendices ARCHITECT Appendix 3 Acknowledgements Screen Architect Ltd would like to acknowledge and thank the following The team at Sparx Systems www sparxsystems com au for their advice support and encouragement Enterprise Architect is still the best UML Case Tool out there Catch Ltd www catch net nz for your expertise and support Dev Defined Limited www devdefined com for your development expertise Visacc www vizacc com for providing HelpMaker the best freeware help authoring tool out there All those who have made suggestions reported bugs offered feedback and helped with the alpha and beta testing of Screen Architect Your help has been invaluable Appendix 4 References Appendix 5 Related Website References 1 http www jig net elements Jesse James Garrett s site for the Elements of User Experience book Contains useful references for information architecture 2 http www adaptivepath com Jesse James Garrett s company site Adaptive Path Excellent resources for design etc 3 Version 1 2 User Guide 92 Printed on 29 06 11 Final
75. ne the content layout and the formatting of the web document Web browsers use the HTML tags to define how to display the text Hyper Text Transfer Protocol HTTP is the standard set of rules for sending text files across the Internet It requires an HTTP client program at one end and an HTTP server program at the other end Hyper Text Transfer Protocol Secure HTTPS is the same as HTTP but provides secure Internet communication using SSL see also SSL The art and science of organising and presenting information to help people effectively fulfil their information needs Information architecture may include the used of analysis and design techniques to understand user requirements to design the structure and presentation of information An interaction case represents the enactment of a scenario i e incorrect password entered results in an error message being displayed Interaction design is a systematic and iterative process for designing highly interactive user interfaces Methodology includes research and discovery techniques such as requirements analysis stakeholder analysis task analysis as well as prototyping inspection and evaluation methods The Usability Company 2007 A world wide network connecting millions of computers See also WWW See Web Browser A browser by Microsoft The most commonly used browser today A fully object oriented cross platform language based on elements from Smalltalk C and oth
76. nication by facsimile transmission will be deemed to be received when transmitted to the correct facsimile transmission address of the recipient and any communication in writing will be deemed to be received when left at the specified address of the recipient five days following the date of posting If any provision of this License is invalid or unenforceable the remaining provisions will not be affected and will continue in full force Governing Law and Jurisdiction This License is subject to the laws of New Zealand and the parties submit to the exclusive jurisdiction of the New Zealand courts User Guide 13 Printed on 29 06 11 Final 1 8 1 9 ch a Introduction ARCHITECT Ordering Screen Architect Screen Architect is designed built and published by Screen Architect Ltd and available from Screen Architect Ltd The trial version of SA is identical to the registered edition The trial software will stop working after the trial period has elapsed On purchase of a suitable license or licences the registered version will be made available for download The latest information on pricing and purchasing is available at the Screen Architect website www screenarchitect com Purchase Options include e On line using a secure credit card transaction For more information contact sales screenarchitect com Support Support is available to Registered Users of Screen Architect All support issues are currently dealt with via ema
77. nnnnennennnnnennnnnennennnnnnnnennnnnenneennennennennennenne 52 FIGURE 61 SMART ACTION IaG 55 FIGURE 62 SELECT AN IMAGE DIALOG 56 FIGURE 63 LINKED IMAGE vevinttsscancackvicanscnviend cuensynannatticnannddgueinvesieedutertenentiineisnid annaran nananana naerenn nnne 56 FIGURE 64 ELEMENT BEHAVIOUR PROPERTIES cccecceccecceccecceeceeeeeceeeaeeceecuecuecueceeceeeueeeeeaeeaees 56 FIGURE 65 ELEMENT FORMATTING PROPERTIES i ennnnnnvnnnnnnnnnnvnnnnnnnnnevnnnennnnnennensnnnvnennnnnnnnvenuenee 58 FIGURE 66 GENERATE PROTOTYPE rmnnnunnnnnnnnnnnnnnnnnnnnnnnnnnennnnnnnnnennnnennrnenennnnennnnennnnennnnennnnennnnene 69 FIGURE 67 GENERATE PROTOTYPE OPTIONS DIALOG 70 FIGURE 68 GENERATE PROTOTYPE OUTPUT PATH DIALOG 70 FIGURE 69 PROTOTYPE INDEX PAGE rnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnennennennennennnnnenneennennennennennenne 71 FIGURE 70 GENERATE RTF DOCUMENT rrnnnnnnnnnnnnnnnnnvnnnnnnnnnnnnnnennnnnennenennennennnnennennennnnennennnnuene 72 FIGURE 71 WINDOWS SAVE AS DIALOG 73 FIGURE 72 GENERATE HTML HEpopr 73 FIGURE 73 WINDOWS BROWSE FOR FOLDER DIALOG 74 LIST OF TABLES TABLE 1 SCREEN ARCHITECT KEYBOARD SHORTCUT kg 49 TABLE 2 SUMMARY OF ELEMENT PROPERTY CATEGORIES amp PROPERTIES 2 cscecceccecceceeceeceeees 61 Version 1 2 User Guide V Printed on 29 06 11 Final Preface SCREEN ARCHITECT PREFACE This document provides a User Guide for the prototyping software tool here within referred to a
78. nu items under the Windows menu The Help Menu The Help menu provides access to the SA help files the Read Me the SA License Agreement and various features on the Screen Architect website Contents CtrlH F1 ay Index a Search About Figure 19 Help Menu Menu Item Functionality Contents Displays help contents Ctrl F1 Index Displays help index Search Displays the SA Search dialog About Displays the About Screen Architect dialog Version 1 2 User Guide 26 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT 3 4 Workspace Toolbars Screen Architect provides you with a selection of toolbars which may be dragged and docked within the application frame These toolbars provide convenient shortcuts to common tasks SA s default toolbars are displayed as follows m AE als ob Ga Ba Al k ae SG Ome ai Figure 20 Default Toolbars 3 4 1 File amp Edit Tool Bar LES el G EI Figure 21 File amp Edit Toolbar The default File amp Edit toolbar provides quick access to the following functions in order e New ctrl N e Open Ctrl O e Save Ctrl S e Save All e Help e Cut Ctrl X e Copy Ctrl C e Paste Ctrl P e Undo Ctrl Z e Redo Ctrl Y 3 4 2 Project Toolbar ig 28 Figure 22 Project Toolbar The default Project toolbar provides quick access to the following functions in order e Generate Prototype F5 e Rich Text Format RTF Repor
79. on 1 2 User Guide 43 Printed on 29 06 11 Final Using Screen Architect ere 4 Inthe dialog box fill in the name of the new screen and click on the OK button 5 The new screen is inserted into the tree at the current location Tip Alternatively select the Add Screen toolbar icon in the Project Browser 3 11 3 Delete Screen To delete a Screen 1 Select the screen to delete in the Project Browser 2 Right click to open the context menu 3 Select Delete Screen 4 The confirm delete screen dialog will be displayed 5 Select Ok to delete the screen or Cancel to cancel the action 3 11 4 Rename Screen To rename a Screen 1 Select the Screen to rename in the Project Browser 2 Right click to open the context menu 3 Select Rename Screen 4 In line editing on the selected screen will be enabled 5 Type the new name in the Name field and enter Tip Alternatively select the Screen Name displayed in the tree browser and single click with the left mouse button to enable inline editing and rename the screen See also e Set Screen Properties 3 11 5 Set Screen Properties To set Screen Properties 1 Inthe Screen Design Window select the Screen Design Surface with a single left mouse button click anywhere within the grey surface area 2 The Properties Browser for Screen Design Surface will be displayed as illustrated below allowing you to edit any screen properties such as Screen Name etc Version 1 2
80. on to enable inline editing and rename the package 3 10 8 Delete Package To delete a Package 1 Select the package to delete in the Project Browser 2 Right click to open the context menu 3 Select Delete 4 The confirm delete package dialog will be displayed 5 Select Ok to delete the package or Cancel to cancel the action Version 1 2 User Guide 42 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT 3 11 Screen Tasks A Screen is the primary design surface in SA and while represents a type of UI control is the equivalent to an EA Diagram This section explores the tasks you can perform with screens including e Open Screen e Add Screen e Delete Screen e Rename Screen e Set Screen Properties e Generate Prototype e Generate Preview e Lock Controls See also e The Project Browser 3 11 1 Open Screen To open a package in the SA Project Explorer 1 Select the screen in the Project Explorer 2 Double left click the screen you want to open see also e The Project Browser 3 11 2 Add Screen To add a new screen 1 In the Project Browser select the package or view under which to add a new screen 2 Right click the mouse on the folder icon within the Project Browser to open the context menu 3 Select Add Add Screen Vi ddd Screen Documentation k Generate Rename Ka Delete Package Figure 47 Add New Screen Versi
81. ontext menu 3 Select Add Add Screen Aad Package Vi Add Screen Documentation Generate Rename Delete Package Figure 38 Add New Screen 4 Inthe dialog box fill in the name of the new screen and click on the OK button 5 The new screen is inserted into the tree at the current location Tip Alternatively select the Add Screen toolbar icon in the Project Browser 3 10 4 RTF Documentation To generate a RTF document 1 In the Project Browser select a package or view for which to generate an RIF document 2 Right click the mouse on the folder icon within the Project Browser to open the context menu 3 Select Documentation Rich Text Format RTF Report d e Rich Text Format RTF Report le HTML Report Generate Rename Ka Delete Package Figure 39 Generate RTF Document 4 The Windows Save As dialog will be displayed as illustrated below Version 1 2 User Guide 38 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT Save As archive f HELP System My Recent Profiles Documents Research Ht Research Reference Models v0 1 Wisa CLASS MODELS v0 1 lan USE CASES v0 1 Mtest1 Desktop Mu Documents r Mu Computer lf J My Network Save as Jupe Rich Test Format wg Figure 40 Windows Save As dialog 5 Give your RTF document a file name and select where you wish to save it on your system and click the Save butto
82. ontrols such as Labels Fore Colour Sets the colour of Labels Links and Lines One of three colour palettes may be selected including e System e Web e Custom Inner Colour Sets the fill colour of the shape One of three colour palettes may be selected including e System e Web e Custom Version 1 2 User Guide 67 Printed on 29 06 11 Final 4 4 2 Ul Design Controls amp Elements Property Outer Colour Link Padding See Also e Element Linking Placeholder SCREEN ARCHITECT Functionality Sets the border colour of the shape One of three colour palettes may be selected including e System e Web e Custom Used to create links from elements such as Links Buttons Images Boxes and Placeholders to either e A Screen within SA e An external web page In other words where the prototype will navigate to when this element is clicked Used to specify the interior spacing of the control from its inner borders The Placeholder shape element is one that is often used by information architects during the creation of wireframes Thus placeholders are used to represent other controls and content areas on screen in what are known as low fidelity prototypes and screed page mockups In other words Placeholders are used more for expressing the layout of screens and web pages and the location of elements that are not yet designed or available Key properties include Property Text Link See
83. operties Ix ESPA EI Design Name Customer D EI Layout Location n n M name v lt gt Ready TH 15 15 7743 x 480 Figure 6 The Screen Design Window Version 1 2 User Guide 20 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT Typical screen design activities include e Add new design controls and elements to the diagram using the UI Toolbox e Copy and paste existing design controls and elements within a screen or to other screens e Set screen and design control element properties e Align space and size multiple design controls and elements e Save the screen image to file or to the clipboard e Preview screens e Generating documentation and prototypes 3 3 The Main Menu 3 3 1 The Main Menu provides mouse driven access to many high level SA features and functions related to the prototyping and UI design life cycle along with administration functions len Sample creen rchitectPrototype v0 1 Screen Architect File Edit view Project Screen Element Window Help Figure 7 The SA Main Menu The following section provides an overview of the features and functions available from the main menu and their general purpose The File Menu The File menu provides options to create open close and save S projects _ New Ctrl M E Open Chr Close Save CtrlH 5 Save Os Save All CtrlH5hift F Exit Figure 8 File Menu Menu Item Functionality New C
84. operties TA Customer List TE Sales History E Screen rchitect Screen Address ScreenArchitect Screen Contact E ScreenArchitect Screen Custome B ScreenArchitect Screen Custome B ScreenArchitect Screen Sales Hi Figure 3 Launching SA from the EA project browser Note We recommend that new users select the SA Example file and explore it in some detail while they become familiar with Screen Architect and its integration with EA Version 1 2 User Guide 17 Printed on 29 06 11 Final 2 3 2 3 1 2 3 2 2 3 3 SCREEN Getting Stated eit License Management Registering a Full License The trial version of Screen Architect available for download is an evaluation version only For the full version you must first purchase one or more licenses The license code supplied is activated on installation and will enable you to use a full version of SA Upgrading an Existing License Currently Screen Architect consists of a single edition unlike EA For this reason there is no need for an upgrade path for SA However users will be expected to renew their annual SA license subscription in order to quality for support and ongoing release upgrades throughout the year See the Screen Architect website for the latest SA licensing and pricing details www screenarchitect com or contact SA sales at sales screenarchitect com Finding Your License Information You can find information about your SA license in t
85. or Gainsboro OuterColor Wl Green Text Smith Daniel Test lign TopLeft TextPadding d d 2 2 Ve Font The font used to display test in the control Figure 65 Element Formatting Properties See also The Properties Browser Element Tasks Version 1 2 User Guide 59 Printed on 29 06 11 Final 4 2 UI Design Controls amp Elements Control Categories and Properties SCREEN ARCHITECT Properties within the SA Property Browser are grouped into one of several Property Categories These include i 1 1 1 2 1 2 1 12 2 1 2 3 1 2 4 1 2 5 1 2 6 1 2 7 1 2 8 129 1 3 1 4 1 5 1 6 Category Property Appearance Text Font Name Size Unit Bold GdiCharSet GdiVerticalFont Italic Stikeout Underline Line Width ForeColour InnerColour OuterColour Version 1 2 Printed on 29 06 11 Description Appearance properties are used to specify how controls should look and be rendered on a screen in terms of Style wherever applicable including name fonts colour etc The text label or name associated with the control and is displayed on the Ul wherever applicable The font formatting and style properties applied to text based controls such as Labels The name of the font Sets the font size The unit applied to the font size i e pixels point millimeters etc Makes the text bold Makes the text italic Strikes the text out Underlines the text Sets the width of l
86. ormation or dialog between the user and the application Use a dialog box to obtain additional information from the user that is needed to carry out a particular command or task An area of knowledge or activity characterized by a set of concepts and terminology understood by practitioners in that area Document Type Definition DTD is a set of rules a language for defining the legal building blocks of a web document like HTML or XML A model object of any type class component node object or etc Enterprise Architect EA is a Computer Aided Software Engineering CASE tool for designing and constructing software systems EA supports the UML 2 0 specification which describes a visual language that you use to define maps or models of a project An Entity is a store or persistence mechanism that captures the information or knowledge in a system It is often used to represent real world objects i e invoice customer purchase order etc An enumeration is a list of named values used as the range of a particular attribute type For example RGBColor fred green blue Boolean is a predefined enumeration with values from the set false true A form is a Ul control used to facilitate user interaction with the application and underlying database It facilitates user inputs and displays results back to a user User Guide 80 Final Appendices Frame G Group Box H Home Page Hypertext Markup Language
87. pts such as application structure navigation look and feel and business requirements This would enable end users as well as developers to walk through a proposed application in conjunction with reading the associated requirements and design specifications 1 2 Background Over the past 15 years members of the Screen Architect team have been involved as practitioners in the end to end analysis design development and implementation of both commercial and in house software During this time we have assumed numerous roles during the software development and implementation lifecycles including project management business and systems analysis software architecture and design testing deployment and support We have followed a variety of approaches to software development including more traditional waterfall approaches through to iterative models such as Rationale s RUP Rationale Unified Process among others In particular we have used a variety of specification and design techniques and have adopted the Unified Modeling Language UML as our preferred standard Despite several significant advances in software engineering practices methods and techniques supported by functionally rich software development platforms and tools a number of key issues and challenges still exist when it comes to identifying and understanding user requirements and subsequently producing accurate functional design specifications that will deliver the right
88. put sf Targets Output Path CADataD154 Prototype Pa EF Dutput Figure 45 Generate Prototype Output Path dialog 6 Click the Ok button to generate the prototype Tip Alternatively select the F5 shortcut key to generate a prototype Once the prototype has been generated from Screen Architect your default Web Browser will be automatically opened and display an Index page for your prototype as illustrated below SG mozilla Firefox Rex File Edit View History Bookmarks Tools Help 2 e Gt L file f C Datan1 Sa 20Prototype P G EP Getting Started A Latest Headlines Business Server Error Address Details e Contact Details e Sales History e Customer Details e Customer List e HomePage file C DataO1 SA Prototypefid_ded4d954 6aal 4517 a159 cbddb72bc dF htm Figure 46 Prototype Index Page You can navigate your Ul prototype accordingly Version 1 2 User Guide 41 Printed on 29 06 11 Final ch SCREEN Using Screen Architect ARCHITECT See also Prototype Management 3 10 7 Rename Package To rename a Package 1 2 3 4 D Select the package to rename in the Project Browser Right click to open the context menu Select Rename In line editing on the selected package will be enabled Type the new name in the Name field and enter Tip Alternatively select the Package Name displayed in the tree view and single click with the left mouse butt
89. re Socket Layer Ul User Interface Version 1 2 User Guide 76 Final Appendices UML URI URL VB W3C WWW WYSIWYG XML XML DOM XSD XSL XSLT Version 1 2 Printed on 29 06 11 SCREEN ARCHITECT Unified Modeling Language Uniform Resource Identifier Uniform Resource Locator Visual Basic World Wide Web Consortium World Wide Web What You See Is What You Get Extensible Markup Language XML Document Object Model XML Schema Definition Extensible Stylesheet Language XSL Transformations User Guide 77 Final Appendices SCREEN ARCHITECT Appendix 2 Glossary A Analysis Artifact Active Server Pages B Bookmark Browse Browser Button Cache C Cascading Style Sheet CASE Tool Version 1 2 Printed on 29 06 11 The part of the software development process whose primary purpose is to formulate a model of the problem domain Analysis focuses what to do design focuses on how to do it A physical piece of information that is used or produced by a software development process Examples of Artifacts include models source files scripts and binary executable files An artifact may constitute the implementation of a deployable component ASP Active Server Pages is a Microsoft technology allowing the insertion of server executable scripts in web pages In web terms A link to a particular web site stored bookmarked by a web user for future use and easy access
90. reates a new Screen Architect project Ctrl N Open Opens an existing Screen Architect project Ctrl O Close Closes the current project Save Saves the currently open and active screen in a Screen Architect project Ctrl S Save As Saves the currently open Screen Architect project as another file with a new filename Save All Saves all currently open screens in a Screen Architect project Ctrl Shift F Exit Exits Screen Architect Version 1 2 User Guide 21 Printed on 29 06 11 Final 3 3 2 3 3 3 3 3 4 ch SCREEN Using Screen Architect ARCHITECT The Edit Menu The Edit menu shown below provides a range of functions which apply to screen elements for the currently open screen design page ba Undo Ctrl z Redo Ctrlt d Cut CtrlHX 23 Copy CtrlH C G Paste Ctrl P Delete Del Select All Chrl 4 Figure 9 Edit Menu Menu Item Functionality Undo Undo the last action performed Ctrl Z Redo Redo the last action performed Ctrl Y Cut Cuts the selected element s Ctrl X Copy Copies the selected element s Ctrl C Paste Pastes clipboard elements to the currently open and active screen Ctrl V Delete Deletes the selected element s Dell Selects All Selects all elements within the currently open and active screen Ctrl A The View Menu From the View menu you may set local user preferences including which toolbars or windows are hidden or visible Output Froje
91. rement The Screen Architect Value Proposition screen Architect provides a high value low cost alternative for easily and rapidly creating non functional software prototypes that may be fully integrated with the underlying software design specifications maintained in Enterprise Architect EA In our experience relatively few non technical prototyping tools are available however there is nothing available that offers complete integration of software designs and specifications with underlying Ul prototypes and in particular integration with a UML based case tool such as EA Thus from an end user perspective SA will allow project teams designing and developing business software to rapidly prototype these using an integrated toolset This will allow the translation of business and software requirements into well designed software that meets business expectations Version 1 2 User Guide 8 Printed on 29 06 11 Final 1 4 Introduction Integration with Enterprise Architect SCREEN ARCHITECT A key feature of Screen Architect is its integration with EA The figure below conceptually illustrates this integration as well as some of the key outputs generated from SA Es Generate RTF HTML Generate Documentation ENTERPRISE ige ARCHITECT CH ArcHiecT St SC Gen PN gt i Launch gt Enterprise Architect gt
92. rnsnsnsnsnsnsnenenenene 27 3 5 ARRANGING WINDOWS AND MENUS cccccccececcececcececcececcccececcececceceeaeceuaeceuaeeecaceecaees 28 3 6 THE PROJECT BpOowWeEn aranana nnana r a Anann AAEE A CE nE anana nananana 31 3 7 THE UD OO EE 34 3 8 THE PROPERTIES BpOowarEn nara arannana ALA n nananana nananana 35 3 9 SYNCHRONISATION WITH ENTERPRISE ADCHITECT 36 3 10 PACKAGE Tagksg aranna anaran ananuna DALALAR ARADALAR AEAEE DACA n annann anane 37 3 11 SCREEN TAgkS narrua rannan A naran EADARRA CARE ALARE ACARA D Annaan nanana 43 3 12 ELEMENT IAag kg anann annara nananana LALALA RARAP A CALARE A EEDA arannana nann 47 3 13 KEYBOARD SHORTCUT kg 49 4 UIDESIGN CONTROLS amp ELEMENTS euvnrannavnvnnvnvnnnnvnnnnnannnvnnnnrnvnnnnvnnnnvnnnnnannavannnrnnnne 50 4 1 KEY ELEMENT EEATURES aranana ananuna rana anaa RAPACE LALEA aaran annaran ant 50 4 2 CONTROL CATEGORIES AND HROPERTIES 59 BD CONTRO EE 62 BA SHAPES sesiviccssccsinSecaduicwasde ate ievnSeaidacwdeatemcindiccdal de weaedetncwueedawcwaaesalinndlamaauanddndasuutieaawustewcdaiesemavemenes 66 5 PROTOTYPE MANAGEMENT envnvnnvnvnnnnvnnnnvnnnnvnnnnvnvnnnnvnnnnvnnnnvnnnnrnnnnnnvnnrnvnnnnvnnnnvannnrnnnne 69 5 1 GENERATING PROTOTYPES asavaravavanaravarevaravananevevenenenenensnenenesenenenanenevenenenessneneneneuenennnnn 69 6 e Cd 2 ani Leger ere d 1 EE 72 6 1 CREATE AN RTF DOCUMENT avarnvnvnvnvnnnrnnnrnrnrnenensnenensnenennnsnnnnnnnnnnnnnnenenenenenenenenenenenenen 72 6 2 CREATE
93. roperty in the Software and rights to patents licenses trade marks trade names inventions trade secrets copyrights and know how relating to the origin manufacture programming operating and or servicing of the Software and any enhancements or modifications to the Software You may not copy the Software in whole or in part in any visual or machine readable form except a to obtain the number of authorized copies and b for one copy of the Software which may be made and stored on a storage device such as a network server used only to install the authorized number of copies on your computers over an internal network You must User Guide 12 Printed on 29 06 11 Final Introduction 2 4 3 1 3 2 3 3 3 4 4 1 4 2 5 1 5 2 6 1 Version 1 2 SCREEN ARCHITECT a not copy translate adapt modify reverse engineer decompile or disassemble the Software nor communicate the Software to any person other than in accordance with the terms of this License b ensure your employees and agents comply with the provisions of this License c not transfer assign or otherwise deal with the Software or your rights under this License d maintain and not remove all copyright notices on the Software Your obligations under this clause will survive termination of this License Limitation of liability You acknowledge that the Software is of a complicated and technical nature and may have defects an
94. s When an element is selected the Properties tab will show the element s properties e The Ul Toolbox The Ul Toolbox is an Outlook style toolbar from which you can select and drag and drop UI controls and design elements to design screens in SA The Screen Design Window The Screen Design Window is the main SA workspace window and displays the currently selected screen Although multiple screens can be opened within SA as tabbed pages only one screen can be open and active at a time In this view you can design screens by adding creating new design controls and elements as well as arranging and formatting existing elements mmer E SampleScreenArchitectPrototype_v0 1 Screen Architect Job File Edit View Project Screen Element Window Help Gw OBC Ape ME i eg EET dE ale 2 9 JG Toolbox A x Designer LoginPage Designer HomePage Designer Customer Details Designer Customer List v 2 Controls a Button Lh SCREEN CheckBox ARCHITECT KAS ComboBox Customers Reports Admin Home Logout val Image A Label Customer Details Sales Histor A Link Customer List Customer Details Customer Name Shapes Project Explorer hx Customer Name 2 aa d DE Customer ID 0 5A User Interface Prc o SA UI Prototype First Name 1 Sitemap Last Name CT Login Page 2 LoginPage Category Consumer vi Active Cl Home Page ai HomePaa Y Comments Contact Details gt Address Details Pr
95. s Screen Architect SA Summary of Inclusions This User Guide incorporates among other things the following l An introduction and overview of Screen Architect including background and integration with Enterprise Architect EA Getting started with Screen Architect including installation launching SA licensing and support Using Screen Architect including a detailed description of the Screen Architect workspace features and functionality including synchronization with the EA repository A detailed description of the UI design elements and controls used for screen design including their properties An introduction prototype management including the generation of prototypes from Screen Architect A detailed description of generating RTF and HTML documentation from Screen Architect Summary of Exclusions Known exclusions include iP An introduction to screen design Summary of Amendments Amendments from the previous version 0 1 of this document include 1 Updates to the list of Abbreviations and Glossary Version 1 2 User Guide vi Printed on 29 06 11 Final 1 1 ch Keen Introduction ARCHITECT Introduction Welcome to the Screen Architect User Guide This guide helps you use Screen Architect a software user interface prototyping tool to rapidly model and design graphical user interfaces for web based software applications What is Screen Architect Screen Architect SA is a prototyping
96. se tools to design and specify software However one of the most valuable and useful approaches for capturing and conveying business requirements is to mimic the look and feel of the proposed software through user interface Ul mock ups and prototypes Traditionally this has been achieved using a range of techniques These include anything from producing simple hand drawn wire diagrams through to more elaborate electronic versions using standard office software products such as Microsoft Excel Word Visio or FrontPage among other web development tools However several key issues and limitations with these approaches include e Producing realistic Ul designs and software prototypes that convey a sense of the implementation of business requirements and functionality is time consuming e The underlying software requirements documentation and design specification details have to be maintained across multiple tools and documents that are not integrated in any way e Software requirements and design specifications become difficult to maintain during the analysis and design phases of the project with little or no traceability between design iterations This often leads to unacceptably high maintenance overheads e Few ofthe afore mentioned approaches allow for the easy creation of standalone non functional prototypes that end users and development teams can walk through the application with to understand and confirm the business requi
97. t JEg File Edit View Project Screen Element Window Help EL E KAE 5a JO GE Ga AEE at le ae SG RR Toolbox SES Designer LoginPage Designer Customer Details x Project Explorer ax lis SA User Interface Prototype Button LO SCREEN CJ SA UI Prototype CheckBox ARCHITECT CJ Sitemap EF ComboBox Customers Reports Admin Home Logout 3 Login Page Al Image Eee EE EE 8 LoginPage A Label Customer Details Sales Histor Cl Home Page gt z E s HomePage A Pls Customer List Customer Details Customer Name af ag Home Se zi Customer Details RadioButton Customer Name EI Customer List hl TextBox 8 Sales Histor l e Y cemani Address Details Fist Name 2 Contact Details Last Name Category Consumer vi C Active Properties 4x A Z Comments Contact Details i ppearance A Address Details Text Submit E Design Name Button Locked False El Interaction Link D CARD E Layout 4 Submit H pa Location 5 432 KEE Size 75 23 EI Mier od Name Indicates the name used in code to identify the object Shapes E Show output From General v s Environment Loaded Screen Architect Version 0 0 9 182 Ready SEI 432 gi 75 x 23 Design m SA Help System VO 1 SampleScreenArchite EX Enterprise Architect 6 5 SampleScreen rchite QR 2 19 p m In EE EE ea EE Figure 5 The Screen Architect Workspac
98. t e HTML Report 3 4 3 Project Explorer Toolbar Project Explorer cast FEE VEN Figure 23 Project Explorer Toolbar The default Project Explorer toolbar provides quick access to the following functions in order e Add Package e Add Screen Version 1 2 User Guide 27 Printed on 29 06 11 Final 3 4 4 3 5 3 5 1 30 1 1 3 5 1 2 SCREEN Using Screen Architect IO screen e Generate Prototype e Generate Preview e Rich Text Format RTF Report e HTML Report Element Toolbar D Gy oa ee Ge m AE S 4 a Figure 24 Element Toolbar The default Element toolbar provides quick access to the following functions in order e Align Top e Align Bottom e Align Left e Align Right e Align Vertical Centres Ctrl Alt V e Align Horizontal Centres Ctrl Alt H e Bring to Front Ctrl Alt F e Send to Back Ctrl Alt B e Size to Control Height Alt Z e Size to Control Width Alt X e Size to Control Alt B Arranging Windows and Menus Screen Architect enables you to rearrange the windows and some menus to suit your work habits Dockable Windows The Project Browser Property Browser Toolbox and Output windows can all be docked against any edge of the application workspace or freely floated Drag any of these windows around the application workspace until you find a comfortable way of working The examples below show two ways you can rearrange the windows to suit your
99. tails zi Contact Details Figure 29 Model Context Menu Version 1 2 User Guide 31 Printed on 29 06 11 Final 3 6 1 1 3 6 1 2 3 6 1 3 3 6 2 Using Screen Architect SCREEN ARCHITECT Tip How you structure your model i e model nodes views and packages will determine how easy your prototype is to manage It is highly recommended that you create a separate Model within EA from your UML models to contain SA prototype elements Menu Item Add Documentation Generate Rename Delete Package Add Sub menu Menu Item Add Package Add Screen Documentation Sub menu Menu Item Rich Text RTF Format HTML Format Generate Sub menu Menu Item Generate Prototype Functionality Opens the Add sub menu Opens the Documentation sub menu Opens the Generate sub menu Rename model name Delete model or package Functionality Add a new package Add a new screen Functionality Generates RTF documentation Generates HTML documentation Functionality Generates a UI prototype from Screen Architect F5 The Package Context Menu Right clicking on a View or Package element in the Project View opens the context menu below Project Explorer Dii aa det e te lies S User Interface Prototype 5 5A Ul Prototype C Sitemap Add Documentation Generate Rename Delete Package zi Contact Details Figure 30 Package Context Menu Menu Item Add Documentation
100. ton or the screen the element belongs to Information Flow Mode Generate with link from control Dont Generate Generate with link from control Generate with link from screen Cancel Close Version 1 2 User Guide 53 Printed on 29 06 11 Final UI Design Controls amp Elements ser When Generate with link from control is selected the information flow in your diagram will be represented in the following way When Generate with link from Screen is created information flow in your diagram will be represented in the following way Version 1 2 User Guide 54 Printed on 29 06 11 Final IO eg Ul Design Controls A Elements ARCHITECT Ka Logical Diagram Relationship diagram created 24 06 2011 1 48 21 p m modified 24 06 2011 4 16 32 pm 100 780x 1134 e X Les kal dick Button aflown Se Se i wenn I 13 Screen 1 Screen 3 SoeenArchitect Soeens EE ited S een ra dick Button di Button I a of lowe eflowe Information Flow click Button Screen 1 gt Screen 2 ees e Sg ze Screen 2 x Soeen rchitect Sceens yt 4 1 5 Linking an Element with an Image As with linking elements to other screens in SA or external URL s web pages some elements allow you to link to an external image or graphic as an alternative to the default display of the element on screen This is the case for the S Image control for example In order to link an element to an image 1 Select the Image element control on
101. trol or element and resizing with your mouse by dragging the control edge from the corner or edge centre See also e The Screen Design Window e The Properties Browser Generate Prototype See Generate Prototype under the Package Tasks section or Generating Prototypes under Prototype Management Generate Preview To generate a Screen Preview 1 Inthe Project Browser select a package or view 2 Right click the mouse on the screen icon within the Project Browser to open the context menu 3 Select Generate Generate Preview Edit Screen d Generate Preview Ev Generate Prototype FS Rename Ka Delete Screen Version 1 2 User Guide 45 Printed on 29 06 11 Final Figure 49 Generate Screen Preview 4 The Screen Preview dialog will be displayed with an image of the selected screen as illustrated below re Preview Screen Pex SCREEN ARCHITECT Customers Reports Admin Home Logout Preview Customer Details Sales History Customer List Customer Details Customer Name Customer Name Customer ID First Name Last Name Category Active Comments Contact Details Address Details Figure 50 Screen Preview dialog Tip Alternatively select the Screen Preview toolbar icon in the Project Browser 3 11 8 Lock Controls To lock Ul design controls and elements on the screen design surface for an open and active screen 1 Select Screen on the
102. u will not be permitted to install access copy or use the Software 1 1 1 1 2 1 3 2 1 2 2 2 3 Version 1 2 License Subject to your having paid all fees and become registered with Screen Architect as a user Screen Architect grants to you a non exclusive non transferable license to use the number of copies of the Software described above on the terms of this License Each individual copy of the Software may only be used on a single computer If you have been issued a trial version of the Software the following additional terms apply a you are licensed to use the Software only for evaluation purposes without charge for 30 days b on expiration of the 30 days the Software must be removed from the computer Unregistered use of Software after the 30 day evaluation period will constitute an infringement of Screen Architect s Proprietary Rights C Screen Architect may extend the evaluation period on request and at its discretion d if you wish to use the Software after the 30 day evaluation period a license must be purchased as described at http www screenarchitect com On payment of the license fee you will be sent details on where to download a registered copy of Software and you will be provided with a suitable software key by email Protection of proprietary rights You acknowledge that the Proprietary Rights in the Software are vested in Screen Architect Proprietary Rights means all p
103. w can also include other components such as menu bars toolbars and status bars A progress indicator also known as a progress bar control is used to show the percentage of completion of a lengthy operation It consists of a solid or segmented rectangular bar that fills from left to right The most common presentation of an object s properties is a secondary window called a property sheet A property sheet is a modeless secondary window that displays the user accessible properties of an object that is properties that the user can view but not necessarily edit An experimental design of the whole or part of a product used for illustration or testing purposes The Usability Company 2007 Prototyping is the development of incomplete representations of a target system for testing purposes and as a way of understanding the difficulties of develooment and the scale of the problem Prototyping is an essential element of an iterative design approach where designs are created evaluated and refined until the desired performance or usability is achieved Prototypes can range from extremely simple sketches for example paper prototyping low fidelity prototypes to full systems that contain nearly all the functionality of the final system high fidelity prototypes The Usability Company 2007 User Guide 85 Final Appendices Radio Button Repository Requirement Reuse Reverse Engineering Rich Text Format RTF Run Time
104. x with a list box This allows the user to type an entry or choose one from a predefined list Key properties include Property Functionality Listltems The list items to be displayed in this control i e a ComboBox or ListBox control Image The Image control also known as a PictureBox is a type of container used to hold and display image files and graphics Note A default image is displayed in the Image control until it is replaced Key properties include Property Functionality Image Used to insert an external image or graphic into a Image control Link Used to create links from elements such as Links Buttons Images Boxes and Placeholders to either e A Screen within SA e An external web page In other words where the prototype will navigate to when this element is clicked See Also e Element Linking e Linking an Element with an Image Label LastName A Label is a textual control used to describe other controls such as text boxes combo boxes etc on the screen It may also be used for Headings and Sub headings Key properties include Property Functionality Text The text label or name associated with the control and is displayed on the UI wherever applicable Text Align sets the position of text within controls such as Labels and Links Valid alignment settings include e Top TopLeft TopCenter TopRight e Middle MiddleLeft MiddleCentre MiddleRight e Bottom BottomLeft BottomCentre Bottom
105. y at the left based on the compass position Dock the window vertically at the right based on the compass position Dock the window into a tabbed location based on the compass position The navigation compass enables you to dock a window at the required destination by placing the window over one of the points of the compass Moving the window to the middle of the compass when available adds the window to a tabbed set 2 Drag the window onto a compass point The screen display indicates the potential target destination by shading the area where the window will be placed 3 Release the mouse button over the compass point to confirm the destination and move the window When the mouse button is released in the example below the Project Explorer window will be docked into the shaded area Version 1 2 User Guide 29 Printed on 29 06 11 Final SampleScreenArchitectPrototype_v0 1 Screen Architect Job File Edit View Project Screen Element Window Help FG mila ig EET ae i Oe GE T s Toolbox H x Button CheckBox as ComboBox Gem LURA Image Az A Label 9 SA User Interface Prototype A Link E SA ul Prototype E3 ListBox Sitemap CJ Login Page RadioButton H LognPage E E Home Page 8 HomePage E Customer Customer Details 8 Customer List Sales History Address Details 8 Contact Details Ready Figure 26 Docking Windows using the Window 2005 Style To move a

Screen Architect Ltd

Contents

Download Pdf Manuals

Related Search

Related Contents