Home

RapidPLUS Xpress User Manual

1. Third_Number Stage 4 is completed Be sure to save your application TUTORIAL 2 EXPANDING THE BASIC APPLICATION STAGE 5 DEFINING THE FUNCTIONALITY FOR CALL _ CONTROL In this stage you define the functionality for Call_Control mode Call_Control itself does not have attachments or transitions like the Ready branch it acts as an organizational mode in the OPERATE branch of the tree Call_Control has four child modes Send_Call Receive_Call Talk and End_Call Send_Call presents the screen that appears after the Send key has been pressed Receive_Call presents the screen that appears when a call is incoming Talk presents the screen that appears when a call has been answered End_Call presents the screen that appears when a call is ended Defining the Screen for Send_Call Mode In Send_Call mode the screen will display the message Calling and the phone number that was dialed Calling 456 Generally phone numbers contain more than three digits For design purposes three digits are enough to show the design concept Designing the Screen You will use the label object that is attached to Third_Number mode for the phone number in the Send_Call display You will then duplicate this label object to create a label object that holds the text Calling The Duplicate operation copies a graphic object but not to the Clipboard and pastes it on the layout frame with a new na
2. Before you begin take a look at the Object Layout window Notice the Object Palette on the left side of the window You will use it to select most of the objects that you will place on the layout frame BA Object Layout UNTITLED IO xX File Edt Layout Group Objects Options Help Olea w oim Mouse coordinates The layout frame Object Palette Left column object class buttons Right column object buttons Resizing handl y Po El Adding the Cell Phone Bitmap Object To add the cell phone bitmap object 1 Click in the Object Layout to make it the active window 2 Choose File Import Bitmaps the Import Bitmap File dialog box opens TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 16 From the Rapid70 Tutorials RapidPLUSXpress folder select Phonelmage jpg then click __Open_ Another dialog box opens with image management options click ox The cursor changes into crosshairs for placing the bitmap Click in the layout frame the cell phone bitmap appears Drag the bitmap object as far left and up as it will go The Object Layout should look similar to this illustration BA Object Layout CELLPHONE File Edt Layout Group Objects Options Help STAGE 2 DEFINING BACKGROUND GRAPHICS 17 Adding a Background Frame Object You will add a frame object on top of the cell phone s display screen It will provide the background for the states in transition charts an
3. Adding Modes to Dial Dial mode will have three exclusive child modes First_Number Second_Number and Third_Number Each of these modes will present the screen as it looks when numbers are entered None of them have children To add modes to Dial 1 Select Dial in the tree 2 In the Name box type First_Number and click Accept 3 Type Second_Number and click Accept 4 Type Third Number and click Accept Adding Modes to Call_Control By now you have added many modes so you no longer need explicit instructions For Call_Control mode add the following exclusive modes 1 Send Call presents the screen that appears after the Send key has been pressed 2 Receive Call presents the screen that appears when a call is incoming 3 Talk presents the screen that appears when a call has been answered 4 End Call presents the screen that appears when a call is ended None of these modes have children STAGE 1 DEFINING THE SYSTEM S MODES 45 Adding Modes to Menus For the Menus branch add the following modes taking care to preserve the hierarchy To Menus add three exclusive children 1 Main Menu presents the cell phone s main menu options 2 Phone Book Submenu presents the phone book s menu options 3 Menu Functions presents one menu function To Main_Menu add two exclusive children 1 Phone Book 2 Services Both of these modes present menu options Usually a cell phone
4. Adding the Beep Sound The beep will be added using a nongraphic object the Sound object When a nongraphic object is added in the Object Palette it is not placed directly on the Layout frame Instead a dialog box opens in which you can change the default name and access additional features via a second dialog box To add the beep 1 In the Object Palette click the Signal class button in the left column and the Sound object button in the right column Click the Signal class button then click the Sound object 2 The first dialog box opens There is no need to change any parameters however to hear the beep click More the second dialog box opens the beep sounds Click to close the dialog box STAGE 3 DESIGNING THE SCREEN ELEMENTS 23 4 Click to close the first dialog box Look in the upper left corner of the Layout frame you should see the outline of a box that is selected File Edit Layout Group Objects Options Hel Djem x2 a ja The selected box encloses an icon the Nongraphic objects icon which appears when a nongraphic object has been added Currently it is hidden behind the cell phone bitmap object Help I clicked somewhere else and can t see the hidden icon Don t worry This situation is easy to fix 1 Select the cell phone bitmap object 2 Place the cursor in the upper left corner where the icon is located 3 Press the Tab key the Nongraphic objects i
5. Accept NOTE If you forget to select the Concurrent type OPERATE is saved as an Exclusive type Although you can edit a mode s name you cannot edit its type If you assign the wrong type you must delete the mode and start again 5 In the Name box type SYSTEM and click Accept Notice that concurrent modes appear in blue Adding Modes to OPERATE OPERATE mode will have three exclusive child modes Ready Call_Control and Menus Ready is the mode in which the cell phone waits for user input Call_Control is the mode that manages call functionality Menus is the mode that manages menu navigation and menu input To add modes to OPERATE 1 Select OPERATE in the tree Notice in the New Mode dialog box that the mode type switches back to Exclusive Exclusive is the default type and the one you need for the next branch in the tree 2 In the Name box type Ready and click Accept 3 Type Call_Control and click Accept 4 Type Menus and click Accept 44 TUTORIAL 2 EXPANDING THE BASIC APPLICATION Adding Modes to Ready Ready mode will have two exclusive children Idle and Dial Idle presents the screen that appears when the cell phone is awaiting user input Idle does not have children Dial comprises modes that display numbers as they are dialed To add modes to Ready 1 Select Ready in the tree 2 In the Name box type Idle and click Accept 3 Type Dial and click Accept
6. Ctrl Shift T Menu is tee wt esim MC et i AT i TTT s i Viewing the Screen Transition Charts Export the transition charts for Ready and Dial The charts should look similar to the next two illustrations Screen Transition Chart for Ready State In Idle state the idle screen is displayed Pressing any numeric key transitions to Dial state in which Dial and its default child First_Number are active Notice the transitions from Dial state back to Idle state The transition arrow named Right_Soft_Key longPress appears as a solid black line and arrow this arrow type signifies that the source for the transition is Dial state The other transition arrow Right_Soft_Key in appears as a gray line with an unfilled arrow and two small lines Lt this arrow type signifies that the source for the transition is one of Dial state s children in this case First_Number Ready Right_Soft_Key in 10 15 Right_Soft_Key lo gt STAGE 4 DEFINING THE FUNCTIONALITY FOR READY MODE 73 Transition Chart for Dial State This chart illustrates the transitions among Dial s children Pressing in any numeric key transitions from First_Number to Second_Number to Third_Number Pressing in the right soft key Clear transitions back through the numbers The dashed arrow that points back to Idle state indicates that there is a transition to a state that is not a child of Dial
7. See screen transition charts single state screen transitions See single state screen transition charts collapsing branches in a mode tree 46 Colors Edit dialog box 29 56 concurrent modes 42 copying objects 58 creating screen transition charts 18 108 transitions 30 99 user objects 119 INDEX 128 D deactivating ancestor attachments 96 attachments 27 96 default mode 28 deleting transitions 31 100 duplicating attachments 94 graphic objects 74 nongraphic objects 51 E editing modes 28 object colors 29 effects backlight 56 blink 51 esimstd vss 6 event objects 93 exclusive modes 28 42 expanding branches in a mode tree 47 exported events 122 exporting transition charts for user objects 124 from the Mode Tree 36 108 from the State Chart 18 108 with subtree charts 81 103 F fonts changing for label objects 21 saving font settings in rapidx ini 38 G graphic objects attaching to mode tree 90 91 behavior when attached 92 definition 14 used in transitions 30 H hiding attachments 94 l images displaying triggers in transition charts 62 importing 15 used during team development 125 importing bitmaps 15 125 L label objects adding to layout 20 changing font 21 launching RapidPLUS Xpress 10 legend page 19 110 logic adding logic in standard RapidPLUS mode 125 read only 126 logic information pane 98 111 M making transitions 30 99 Microsoft Visio 6 18 87 108 112 mode of o
8. The new timer object is still selected Keep the Nongraphic Objects dialog box open TUTORIAL 2 EXPANDING THE BASIC APPLICATION 52 BK Ctrl R To make the transitions 1 Make the first transition in the Nongraphic Objects dialog box click Hake Transition 2 In the Make Transition dialog box select From Show_Battery To Hide_Battery The selected object and event Two_Sec_Tmr and tick are entered by default 3 Click and don t close the dialog box 4 Make the second transition in the Make Transition dialog box select From Hide_Battery To Show_Battery 5 Click Accept then click Close 6 Close the Nongraphic Objects dialog box 7 In the Mode Tree attach Two_Sec_Tmr to both Show_Battery and Hide_Battery modes The Low mode branch is complete LL wy Show Battery HE mptyBattery Two Sec_Tmr Hide Battery LiT wo Sec Tm Testing the Application in the Prototyper Now that you have added the battery functionality test it before you build the transition chart To run the application 1 In the Application Manager choose Tools Prototyper or click the Prototyper button 2 In the Prototyper click the Start Play button STAGE 2 DEFINING THE BATTERY FUNCTIONALITY Fal Ctrl F 3 Power on the cell phone with a long press on the End Power key Notice that the full battery icon is displayed E Prototyper CELLPHONE File Controls CBT Options Help Ol
9. e Screen transition charts e Single state screen transition charts This section presents both types of charts how to modify them and how to export them This section also presents information about the charts in Microsoft Visio CREATING SCREEN TRANSITION CHARTS 101 Screen Transition Charts A screen transition chart is generated for a state that has children It shows transitions among the state s children Here is an example of a screen transition chart for a state Low that has two children Low N The arrow indicates a hyperlink f to the state s parent This link is Hide_Battery especially useful when the drawing is saved in html format Show_Battery wo_Sec_Tmr tick Two_Sec_Tmr tick Compare the two child states The screen image that appears in both of them is based on a transparent frame object placed on a bitmap of a cell phone s screen The e SIM logo is a bitmap that was attached to an ancestor mode The difference in the appearance of the two states is that Show_Battery state has a battery bitmap attached to its mode and Hide_Battery state does not Here is the corresponding mode tree CelPhone2 Frarrie Off Powering On Powerng_UOff On logo OPERATE SYSTEM BATTERY Normal Low Show Battery EmptyB atter Two Sec Tr Hide Battery LiTwo Sec Tm The same object Two_Sec_Tmr and event tick are used to trigger transitions between the two
10. however when this state chart is exported to Visio as a screen transition chart the overlapping transition lines will remain and may make the chart confusing You can change the routing type to continuous by rearranging the states in the Mode Tree r S oe Gee To rearrange the modes 1 Click in the Mode Tree to make it the active window 2 If Powering Off is not already selected then select it 3 Drag it above On and release the mouse button Powering _Off becomes the third sibling and On becomes the fourth Frarrie Of Powernng On Welcome Message Sound Timer Powerng_ Ut Good Bye Message Tirmer 4 Save the application TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 36 Viewing the Screens in the Screen Transition Chart Now that you have added the transitions you can export the chart again The Mode Tree window is already active you can export the chart from there To re export the transition chart 1 In the Mode Tree choose File Export Transition Chart the chart is re exported to Visio The final transition chart should look similar to this illustration CellPhone 1 nd Power_Key longPress Timer tick Timer tick Powering_Off End_Power_Key longPre RUNNING THE APPLICATION IN THE PROTOTYPER 37 RUNNING THE APPLICATION IN THE PROTOTYPER Now that you have added the transitions you can run the applic
11. Active The user object and its parent application communicate via exported functions and events The user object template includes two exported functions xpress_start and xpress_stop When the parent application runs and the mode to which the user object is attached becomes active the following things occur Rapid shows the user object b Rapid enters the user object s Idle mode c Rapid calls the xpress_start exported function This function triggers an event which then causes a transition in the user object to Active mode d Active mode contains user defined modes such as the five child modes shown in the illustration above These modes are activated by internal events defined in the user object e When the mode to which the user object is attached in the parent application is exited Rapid calls the xpress_stop function which activates a transition to Idle mode in the user object f The user object is hidden TEAM DEVELOPMENT OF RAPIDPLUS XPRESS APPLICATIONS 121 The User Object Template s Interface Elements TYPE NAME Exported functions xpress_start DESCRIPTION A function that is used in the parent application to trigger the event object xpress_onStart_ev This function is called when the mode to which the user object is attached is activated Do not delete or modify this exported function xpress_stop A function that is used to trigger the event object xpress_onStop_ev This fun
12. CALL_CONTROL 77 Defining the Screen for Talk Mode In Talk mode the screen will display the time as it elapses 00 00 43 The transition from Send_Call will be triggered by a timer In the completed application Tutorial2_Completed rpd the trigger will be a mechanism that simulates the call being answered Designing the Screen for Talk Mode You will duplicate the Incoming Call label to create the display To define the screen 1 Select the label object Incoming _Call_Message and duplicate it Ctrl click and drag In the Parameter Pane name this new object Time Elapsed Message Click More In the Label dialog box change Incoming Call to 00 00 43 Attach this object to Talk mode Position this object in the center of the screen Making the Transition from Send_Call to Talk You will use the five second timer Five_Sec_Tmr for the transition To make the transition In the Mode Tree select Send_Call mode In the Object Layout double click the Nongraphic Objects icon to open the Nongraphic Objects dialog box Select Five_Sec_Tmr in the list then click Attach To Mode ocated at the bottom of the dialog box Click Make Transition 78 TUTORIAL 2 EXPANDING THE BASIC APPLICATION 5 For the To value in the Make Transition dialog box select Talk The other values From Send_Call Object Five_Sec_Tmr Event tick are correct 6 Click Accept t
13. ELEMENTS 21 3 Place the crosshairs in the middle of the cell phone screen and click the Label dialog box opens 4 In the Text box overtype Text with Welcome 5 Change the font by clicking _ Eont to open the Windows Font dialog box The font we used is MS San Serif Bold 14 pt Click __ox__ 6 Click ox the text is added where you placed the crosshairs Drag the label object to the appropriate position The screen should look similar to this illustration Naming the Label Object in the Parameter Pane The Parameter Pane is a dialog box used by all graphic objects added to an application It is used to set four parameters object name parent object position and size When you attached the frame object to the mode tree in Stage 2 Rapid assigned it a generic name Framel1 The same would happen when you attach this label object it would be assigned the name Label1 Instead of using the default name you will give a more meaningful name TUTORIAL 17 BUILDING A BASIC XPRESS APPLICATION To name the label object 1 Double click the label object on the screen the Parameter Pane opens 2 Type Welcome Message in the Name box Parameter Pane Label Hame Position pxl Accent fwelcome_Message X je y fizo Accept Parent Close Size CellPhonet ae r F 24 Heset _ Dynamic Drag n Drop _ More Help 3 Click Accept then click Close
14. Label class button in the left column the Label button is selected in the right column 2 Place the crosshairs in the empty space next to the cell phone and click 3 In the Label dialog box overtype Text with Good bye The font you selected for the Welcome will automatically be used Click __ok_ The text is added where you placed the crosshairs For now leave it where it is When it is time to attach this label object to Powering Off mode you ll position it correctly on the cell phone screen STAGE 4 ATTACHING SCREEN ELEMENTS TO MODES 25 4 Double click this object to open the Parameter Pane Name the object Good Bye Message and click Accept then click Close 5 Save the application STAGE 4 ATTACHING SCREEN ELEMENTS TO MODES In this stage you attach the graphic and nongraphic objects you added in the Object Layout to the appropriate modes in the Mode Tree Attaching Screen Elements to Powering_On Mode You will attach the Welcome message and beep to this mode To attach the screen elements 1 Click in the Mode Tree to make it the active window 2 Select Powering_On in the mode tree and right click the popup menu opens 3 Choose Attach Object Welcome_Message 4 Right click Powering_On again and choose Attach Object Sound1 Attaching Screen Elements to On Mode You will attach the e SIM logo to this mode To attach the screen elements 1 Select On in the mode tree and
15. Object Palette of RapidPLUS Xpress In Xpress mode you can use this object as an advanced label setting its colors and text entry type However to change the text that appears in the text display during runtime or to manipulate the cursor you must switch to standard RapidPLUS mode 127 Index A adding additional logic 125 background frame 17 exported events 122 imported bitmaps 15 label objects 20 logos 24 modes 13 43 notes to states and transition triggers 109 pushbutton objects 29 sound objects 22 timer objects 32 transitions 28 user objects 123 aligning objects 49 68 75 ancestor attachments deactivating 96 animation objects 93 Application Manager 10 applications running in the Prototyper 37 saving 14 team development 117 125 workflow for developing 86 attaching objects to mode tree how to 18 25 90 92 timer objects 33 attachments behavior of 92 cutting copying and pasting 94 deactivating 27 96 deactivating ancestor attachments 96 duplicating 94 hiding 94 moving in the mode tree 64 93 selecting all instances of 95 selecting in the mode tree 94 B background frame purpose 15 17 115 background graphics 14 115 backlight effect 56 bitmaps importing 15 making transparent 24 blink effect 51 55 bringing objects to front 23 C centering objects 75 changing font for label objects 21 object colors 29 56 order of modes 35 114 Chart Tool See State Chart charts screen transitions
16. Powering_On Mode to On Mode You will make this transition from the Nongraphic Objects dialog box To make the transition 1 In the Nongraphic Objects dialog box click Make Transition to open the Make Transition dialog box All of the values in the dialog box are correct From Powering On To On Object Timer1 Event tick Timer1 s only event 2 Click and don t close the dialog box TUTORIAL 17 BUILDING A BASIC XPRESS APPLICATION Defining the Transition from Powering_Off Mode to Off Mode The timer tick event is also used to move from Powering_Off to Off To make the transition 1 In the From box click the arrow and select Powering_ Off Rapid automatically updates the contents of the To box with the next sibling mode which is Off 2 The selected event tick is correct so click Accept then click Close 3 Close the Nongraphic Objects dialog box To attach the timer 1 In the Mode Tree right click Powering_Off 2 From the popup menu choose Attach Object Timer1 3 Save the application Designing the Charts Take a look at the transitions in the State Chart As you can see two of the arrows cross each other This is because the routing method used in Rapid to lay out states is left to right routing The following illustration shows how left to right routing works Powering Ott STAGE 5 DEFINING TRANSITIONS 35 In Rapid simulations left to right routing works fine
17. ark eed eeu ne HE GE ewan She OHS ees 113 Distributing Transition Charts Over the Web 0 cece ec ec ce ee ee eee 113 Tips for Building Successful Applications 0 cece cee eee ee eee eee 114 Chaneine the Order of MOdES 223 003 ies inetadkeeek ee th ea woe tere eee nae ee 114 Building Uniform States in Screen Transition Charts 0 0 eee eee ee eee 115 Team Development of RapidPLUS Xpress Applications 0 ce eee eee eee eee 117 Developing an Application Without User Objects 0 0 eee eee eee eee 117 Developing an Application With User Objects 0 0 eee eee eee eee 119 Using Common Graphics During Team Development 0 00 125 Adding Supplemental Logic using RapidPLUS 0 0 0 eee eee ee eee eee 125 ACCS TO GIG sess pa a a he Wace De he wa a seh otha Rahn e eee wheats 126 Using Logic That is Accessible in Standard RapidPLUS Only 126 vii PREFACE Requirements Microsoft Visio 2000 or higher must be installed on your system in order to view edit and print generated screen transition charts About this User Manual This manual provides the information you need to build RapidPLUS Xpress applications It comprises the following chapters Chapter 1 Introducing RapidPLUS Xpress This chapter provides an overview of RapidPLUS Xpress Chapter 2 Tutorial 1 Building a Basic Xpress Application This tutorial
18. at the beginning of their appropriate sections that is entry activities appear at the top of the entry activities section and exit activities appear at the top of the exit activities section This behavior is designed to allow the RapidPLUS developer to override the logic automatically written by RapidPLUS Xpress in order to create the necessary behavior The RapidPLUS developer must be careful when adding logic so that the read only behavior is not invalidated Example of how supplemental logic can invalidate Xpress logic The RapidPLUS Xpress designer attached Bitmap1 to ModeA The RapidPLUS developer later writes a logic line in the entry activities of ModeA bitmap1 hide Result When the application is run in the Prototyper the bitmap will not show when ModeA is entered even though it is attached to the mode For the RapidPLUS Xpress designer this behavior may be confusing Using Logic That is Accessible in Standard RapidPLUS Only For some objects there are functions that can only be accessed in standard RapidPLUS mode of operation Examples In RapidPLUS Xpress you can create a transition using an event from a user object udo but you cannot call an exported function of the user object when Rapid is set to Xpress mode of operation For such functionality you must switch to standard RapidPLUS mode of operation The same rule applies to ActiveX objects and JavaBean objects The text display object is available from the
19. be displayed as images by opening the Chart Options dialog box Single State Transition tab and selecting the options Entry States and Exit States in the Information Shown as Images group Notice the arrow in the upper right corner of each chart This arrow is a hyperlink to the parent s chart To go to the parent s chart from a child s chart right click this arrow to open a popup menu and select the parent Send_Call Send_Call Five _ Sec_Tmr tick Send_Key in Calling 456 Receive_Call Receive_Call Incoming Call TUTORIAL 2 EXPANDING THE BASIC APPLICATION 84 End_Power_Key in F a End_Call Send_Call Five_Sec_Tmr tick 00 00 43 End_Call End_Call Five_Sec_Tmr tick _End_Power_Key in Total Time 00 03 76 Stage 5 is completed Be sure to save your application Congratulations You have completed the second of two tutorials about RapidPLUS Xpress You have learned e How to work with mode hierarchy to design a logical and efficient RapidPLUS Xpress application e How to modify the appearance of screen transition charts e How to work with Rapid objects attachments and transitions Now you can move on to designing your own RapidPLUS Xpress applications But before you do open CellPhone2_Completed rpd the fully developed application located in the Rapid70 Tutorials RapidPLUSXpress folder Examine
20. cell phone screen when the cell phone is on and indicates whether the battery is full or low To achieve this effect you add two graphics one for a full battery and one for an empty battery You will attach the full battery graphic to the mode BATTERY Normal and the empty battery graphic to the mode BATTERY Low Show_Battery You will create three transitions one from Normal mode to Low mode and two within Low mode s subtree to make the empty graphic blink Adding the Battery Graphics You can add both graphics in one Import file operation To add the battery graphics Before you add the graphics check in the Mode Tree that either On mode or OPERATE mode is selected 1 In the Object Layout choose File Import Bitmaps 2 In the Import Bitmap File dialog box select both EmptyBattery bmp and FullBattery bmp located in the Rapid70 Tutorials RapidPLUS Xpress folder and click __Open_ 3 In the Import Bitmaps from 2 files dialog box click ox 4 Place the crosshairs in the screen s upper right corner above the e SIM logo and click both graphics are added to the layout frame 5 Double click the top bitmap to open the Parameter Pane Notice that the name of the bitmap file has become the name of this new bitmap object Close the Parameter Pane 6 Shift click the other bitmap so that both battery graphics are selected If you have trouble selecting both bitmaps you can use the Edit Sele
21. four most basic modes Off Powering _On On Powering_Off Using these modes you will build a mode tree in the Mode Tree tool You ll start with Off because it is the default mode of the cell phone To add modes 1 Click in the Mode Tree to make it the active window T 2 Choose Tree New Mode or click the New Mode button the New Mode Ctrl W The mode currently selected in the tree will be the new mode s parent dialog box opens Click the New Mode button E Mode Tree u Ioj x File Edt Tree Logic Help Ci Gel 96 AL The mode at the top of the tree is the root mode It is created automatically whenever you start a new application New Mode and it takes the application s name Hame Poo Parent Untitled Hode Type Exclusive Concurrent 3 In the Name box type Off and click Accept Off mode is added to the tree as a child of Untitled which refers to the current application that has not yet been saved The New Mode dialog box remains open Look at the State Chart tool When you added Off to the tree it was also added to the State Chart which displays the modes graphically Because Off is a child of Untitled it is nested within Untitled 4 In the Name box type Powering On and click Accept 5 Type On and click Accept TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 14 6 Type Powering Off and click Accept then click _ Close The completed
22. modes This chart was exported using the default settings of the Chart Options dialog box These settings are explained in the following section WORKING IN RAPIDPLUS XPRESS 102 Modifying the Appearance of Screen Transition Charts To change the format of a screen transition chart 1 In the State Chart choose Tools Options the Chart Options dialog box opens 2 Select the Screen Transition tab The default settings are Chart Options i X State Chart Screen Transition Single State Transition Information Shown as Images Scheme i tein Tiers Scheme for exported chart _ Show Top Level E _ Export Subtree Charts Settings No of Levels Shown 1 Graphic Scaling of State Images 1 0 Scale range it 0 5 5 0 const Hep The dialog box options are described in the following table Options for Screen Transition Charts OPTION DESCRIPTION Information Shown as When not checked each transition trigger the Images Transition object and its triggering event is displayed as text Triggers only The font for this text is set via the Label Font dialog box When checked the object in each transition trigger is displayed as a graphic image Default not checked NOTE This option is not available when the No of Levels Shown is set to 2 CREATING SCREEN TRANSITION CHARTS OPTION Show Top Level 103 DESCRIPTION When checked the selected state is shown e
23. off op AAN 4 Wait one minute for the empty battery icon to start blinking 5 Power off the cell phone then close the Prototyper window Viewing the State Chart 1 In the Mode Tree click the Battery mode 2 Click in the State Chart and look at the chart If you can t see all of the modes you can make the chart fit in the space by choosing View Fit or clicking the Fit button The chart should look similar to the following illustration If you see a different view double click BATTERY in the State Chart or try the various View options Normal Lowy 53 TUTORIAL 2 EXPANDING THE BASIC APPLICATION Viewing the Transition Charts You will export transition charts for three states Battery Normal and Low Use the following instructions for each chart To export the charts 1 In the State Chart double click the state for which you want to export a transition chart so that it appears as the top state For example in the following state chart Battery is the top state therefore the exported transition chart will show Battery and its two children Lam Normal k ey 2 Choose Tools Export Transition Chart or click the Transition Chart button Visio opens displaying the chart Ctrl Shift T Transition Chart for Battery state The transition chart should look similar to the following illustration BATTERY One_Min_Tmr tick In Normal state the full battery is displaye
24. or click the Copy button Choose Edit Paste Object the Paste Conflicts Duplicate Elements dialog box opens Click the dialog box closes and the cursor changes to crosshairs Place the crosshairs at the upper left corner of the Send key and click If the transparent pushbutton doesn t cover the Send key reposition it until it does Double click the new pushbutton object to open the Parameter Pane and rename it Send _ Key Click leave the Parameter Pane open To add the soft key pushbuttons iP A With Send_Key selected Shift click End_Power_Key to select it too Copy and paste these objects the Paste Conflicts Duplicate Elements dialog box opens Click twice Place the crosshairs at the upper left corner of the left soft key and click If the new pushbuttons don t cover the soft keys correctly reposition them Deselect both pushbuttons then select the pushbutton over the left soft key STAGE 3 DEFINING THE BACKLIGHT FUNCTIONALITY 59 6 In the Parameter Pane rename it Left_Soft_Key and click Accept 7 Select the pushbutton over the right soft key and rename it Right_Soft_Key Be sure to click Accept To add a general pushbutton for the numeric keys Now you will add one general pushbutton for all the numeric keys If these keys aren t visible on the layout frame scroll down until they are visible 1 Copy and paste one of the transparent pushbuttons 2 In the Paste Conflict
25. right click 2 Choose Attach Object logo TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 26 Attaching Screen Elements to Powering_Off Mode You will attach the Good bye message to this mode You may have noticed that when you moved from Powering_On mode the Welcome label object disappeared from the Layout frame Now that it is attached you can only see it when Powering _On mode is selected Before you attach the Good bye message you will reposition it on the screen To attach the screen elements 1 In the Object Layout select the Good bye message label object and drag it to its new position on the cell phone screen approximately where the Welcome message was positioned Don t deselect it 2 In the Mode Tree select Powering Off and right click 3 Choose Attach Good_Bye_Message The mode tree looks like this illustration Mode Tree CELLPHONE M File Edt Tree Logic Help CellPhone Welcome Message Sound On Lflogo Good Bye Message 4 Save the application STAGE 4 ATTACHING SCREEN ELEMENTS TO MODES 27 Viewing the Screens in the Screen Transition Chart You can check how the screens look in the screen transition chart by re exporting the application to Microsoft Visio To re export the transition chart 1 Click in the State Chart to make it the active window and select the CellPhone l state ey 2 Click the Transition Chart button the chart is re exported Ctrl Shi
26. state screen transition charts definition 55 104 examples 8 55 83 84 exporting 108 modifying appearance of 105 sound objects 22 93 standard RapidPLUS mode of operation 125 126 State Chart deleting transitions 31 exporting transition charts 18 108 fitting chart to window 53 options for transition charts 62 102 overview 4 purpose 11 states adding notes 109 110 definition 12 89 designing for transition charts 20 sample state in a screen transition chart 90 T team development 117 125 using common graphics 125 with user objects 119 without user objects 117 text display object 126 timer objects adding to layout 32 attaching to mode tree 33 used in transitions 93 tracing application behavior 37 transition charts See screen transition charts transitions definition 28 97 deleting 31 100 displaying as images in transition charts 62 graphic vs nongraphic objects 30 how to make 30 99 100 naming 50 98 Overview 6 transparent colors bitmap 24 pushbuttons 29 triggers adding notes 111 definition 28 97 U user objects adding exported events 122 building 119 definition 117 development methodology 123 generating screen transition charts 124 in standard RapidPLUS 126 keypad 123 User_Object_Template udo 119 121 V viewing application behavior 37 Visio See Microsoft Visio W WaveAudio objects 93 X xpress_onStart_ev 121 xpress_onStop_ev 121 xpress_start 121 xpress_stop 121
27. the source of the transition 2 In the Object Layout select the object that will trigger the transition 3 Select the Make Transition command Ctrl M the Make Transition dialog box opens The mode that is Make Transition for On_Off Button currently selected in the Mode Tree The object that is currently selected in the Object Layout A list of the selected object s events WORKING IN RAPIDPLUS XPRESS 100 4 Make sure that the From To and Object values are correct then select the event value 5 Click Accept then click Close To make a transition using a nongraphic object 1 In the Mode Tree select the mode that is the source of the transition 2 In the Object Layout open the Nongraphic Objects dialog box by double clicking the Nongraphic Objects icon 3 In the list of nongraphic objects select the object that will trigger the transition 4 Click Make Transition located at the bottom of the dialog box the Make Transition dialog box opens Deleting Transitions You can delete transitions from the State Chart To delete a transition 1 In the State Chart select the transition that you want to delete when selected the transition appears in red 2 Choose Logic Delete Transition or press the Delete key You can also select the Delete Transition command from the popup menu CREATING SCREEN TRANSITION CHARTS RapidPLUS Xpress produces two types of screen transition charts
28. the user is talking and iv the screen that appears when a call is ended This tutorial does not fully develop the application rather it touches on the main aspects of building a realistic RapidPLUS Xpress application You will learn e To develop mode hierarchy efficiently e To choose the types of modes according to system functionality e To work with Rapid objects so that they provide optimal visual effects in screen transition charts e To develop transitions among modes that provide the necessary functionality e To customize screen transition charts in RapidPLUS Xpress The fully developed application CellPhone2_Completed rpd is provided in the Rapid70 Tutorials RapidPLUSXpress folder After you have built the second tutorial open the completed application to see how it was built Tutorial 2 should take 1 2 hours Enjoy discovering RapidPLUS Xpress s capabilities STARTING THE TUTORIAL 41 STARTING THE TUTORIAL This application is based on CellPhone1 rpd the application you built in the previous tutorial To start 1 If Rapid is closed launch it now If you saved system settings in Tutorial 1 RapidPLUS will open in Xpress mode If not choose Options Xpress mode 2 In the Application Manager choose File then select CellPhonel from the list of most recently used files The path for this file should be Rapid70 Tutorials RapidPLUSXpress 3 Choose File Save As and save the appl
29. to Off mode This arrow means that Off is the default child of its parent mode CellPhonel Why You Don t Need to Define This Transition a Look at Exclusive Modes Take a look at the dialog box you used to add Off mode To do so select Off in the mode tree and choose Tree Edit Mode Notice that the Mode Type is Exclusive An exclusive mode is a mode that cannot be active when a sibling mode is active Exclusive modes are used for modes of the system that cannot run simultaneously For example when the cell phone is off it cannot be on when it is powering on it cannot be powering off Be sure to close the dialog box when you have finished looking at it When you add exclusive modes the first child mode added becomes the default mode and is marked by an arrow The default designation means that when the application is run in the Prototyper and a transition is made to the parent mode so that it becomes active its default child becomes active as well Therefore there is no need to define a transition between the parent and its default exclusive child Defining the Transition from Off Mode to Powering_On Mode As mentioned earlier the transition from Off mode to Powering On mode will be triggered when an On Off button is pressed You will define this transition by adding a pushbutton object in the Object Layout and then using it to make the transition STAGE 5 DEFINING TRANSITIONS 29 Adding the On Off Pushbutton The pushbut
30. transition to it from the selected state is displayed as a simple rectangle When checked each exit state is displayed as it was designed in the Mode Tree that is with all of its attachments Default not checked Graphic Scaling of State Images The scaling factor for the bitmap representation of states 1 0 means 1 1 or the same size as in the Object Layout window 5 reduces the image by half 2 0 means 2 1 or twice the size of the object image in the Object Layout and so on Range 0 5 to 5 0 Default 1 0 Scheme The Scheme list presents predefined schemes that define the appearance of textual elements in charts You can use the supplied schemes or create your own by selecting lt New gt from the list and Clicking Settings All supplied and new schemes are part of a RapidPLUS stencil schemes vss For details about creating new schemes see the following section CREATING SCREEN TRANSITION CHARTS Creating New Chart Schemes RapidPLUS provides a stencil named schemes vss to which you can add additional scheme masters This stencil contains several predefined masters the master named Default is the basis for all predefined and new masters NOTE Only modify the Default master if you want all subsequent masters to contain these modifications To create a new chart scheme 1 Open the Chart Options dialog box Tools Options to either the Screen Transition or Single State Transition pag
31. tree looks like EF Mode Tree UNTITLED Op x File Edit Tree Logic Help Di fea HELA Saving the Application After you have completed each stage in the tutorial save the application You can perform the Save operation from any of the windows To save the application nj 1 Choose File Save or click the Save button the Save As dialog box opens Ctrl S 2 Save the application to the Rapid70 Tutorials RapidPLUSXpress folder and name it CellPhonel STAGE 2 DEFINING BACKGROUND GRAPHICS In this stage you will add a graphic of the cell phone an imported bitmap to provide realism for the prototype You do not need the full graphic for the transition charts so you will add a separate Rapid graphic a frame object to present the cell phone s screen In order for the frame object to appear in the transition charts you must attach it to the upper most mode the root mode Graphic objects are added to an application in the Object Layout tool They provide a visual representation of the system s user interface such as switches pushbuttons lamps imported images STAGE 2 DEFINING BACKGROUND GRAPHICS 15 Adding Graphics to the Application You will add the following two graphics e A bitmap of the cell phone that you will import into RapidPLUS Xpress This bitmap will add realism and usability to the application e A frame object that will be the background for the states in screen transition charts
32. wa ee ae Bek Ware vii Conventions Used it This Manual c xsesurstoae veer ass aenukeouseta niri eet Eeods vii CHAPTER T INTRODUCING RAPIDPLUS XPRESS 0 cc cece eee ee eee eee 1 The Rapid EUS Xpress TOOLS o346 6 0tnavecineaeke wien Endene ve ah A ERENT 3 From Application to Screen Transition Chafterersessshentespire tian ienris da Ee nega 8 6 Designing RapidPLUS Xpress Prototypes for RapidPLUS Applications 8 CHAPTER2 TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 9 Laan hine Kapid PLUS APTES 5 s0 i dadagwatawieadetanipehaatiddeadandsadgadatamdeaes 10 The Rapid PLUS Xpress LOOMS eassunn satena ter kaeee eae ian heehee ee ew EENEN ETER 11 Stage 1 Defining the System s States Using MOdES 00 06 00 esc0s bee ee ve sewecee beeen ees 12 Developing States Using RapidPLUS Xpress ModeS 2 cece ee ee ee eee eens 13 Savine Ne APOUCAON cn iota tan ewe hale Gey A ew ER ee Bae ON ee eRe Ce NS 14 Stage 2 Defining Backsround Graphics yc ssn scene twH eS ees keene oks esc LEDAN Uon SR 14 Adding Graphics to the Application 60 6404 doe eWeek edhe woh haw hows Fe eee ERR Yee 15 Attaching the Frame Object to the Mode Tree cece ccc cc ee eee eee 18 Viewing the Background Frames in the Screen Transition Chart 18 Stage 3 Desisning the Screen Elements eses cave ana wesdaeven Enu E AEN ewe ek pene 20 Designing the Screen for Off MOd 2 3c5cnc8ceerseeeses terier Eki EEE
33. will teach you how to use the RapidPLUS Xpress tools to build a simple prototype It will also introduce you to the screen transition charts that are generated in RapidPLUS Xpress and viewed in Microsoft Visio 2000 or higher Chapter 3 Tutorial 2 Expanding the Basic Application This tutorial expands on the first tutorial to build a more complex prototype It introduces you to the RapidPLUS Xpress hierarchical structuring capabilities that enable fast construction of product prototypes It also teaches you how to work efficiently with the RapidPLUS Xpress tools and features Chapter 4 Working in RapidPLUS Xpress This chapter provides instructions for using features specific to RapidPLUS Xpress and for creating screen transition charts It should be used as a reference after you have performed Tutorials 1 and 2 Conventions Used in This Manual This documentation uses the following conventions Menu Conventions Choose File Import Bitmaps means to select the Import Bitmaps command from the File menu All of the RapidPLUS Xpress tool windows have a File menu from which you can open and save applications and exit RapidPLUS Xpress PREFACE Vili Typographic Conventions e Information to be typed into dialog boxes appears in Courier New bold e Information to be selected from lists in dialog boxes appears in bold e File names and extensions appear in italics Pictures of Toolbar Buttons and Object B
34. E EAEEREN 20 Designing the Screen tor Powerine On Modes gcc c oot Sons iced colt caw ets net eae xees 20 Designing the Screen for On Mode cece cece eee idento ier Eenes 24 Designing the Screen for Powering Off Mode cece ccc cee cee cee ee eae 24 1V CONTENTS Stage 4 Attaching Screen Flements to MOdGS o9cc vs oce ses boone etwas Se oe ge eee dn ow oy 25 Attaching Screen Elements to Powering On Mode 0 0 cece eee ee eee 25 Attaching Screen Elements to On M0d lt 2 50cascecae eae can cenieni CSS eae R eens 25 Attaching Screen Elements to Powering Off Mode 0 0 ee eee eee eee eee 26 Viewing the Screens in the Screen Transition Chatto oiscdscaw ee shines steed eae 27 Stages Dennie Transitions o4 6 ynad wegen poe boumaeud Jes bea mea SAC GG eee ery ees 28 Defining the Transition from CellPhonel to Off Mode 0 0 00 006 28 Defining the Transition from Off Mode to Powering On Mode 28 Defining the Transition from On Mode to Powering Off Mode 31 Defining the Transition from Powering On Mode to On Mode 32 Defining the Transition from Powering Off Mode to Off Mode 34 Pesic mne Te Ch ANS 12a cada ete adie Meade aya Gd eae G hae eee 34 Viewing the Screens in the Screen Transition Chart 0 0 0 0 0 ee ee eee 36 Running the Application in the Prototyper eee cc eee eee eens 37 DAVIS SY
35. Power off the cell phone then close the Prototyper window Viewing the Screen Transition Chart Export the transition chart for Backlight The chart should look similar to this illustration BACKLIGHT End_Power_Key in Send_Key in Left_Soft_Keyin Five Sec Tmr tick Right_Soft_Key in umeric_Keys in 61 62 TUTORIAL 2 EXPANDING THE BASIC APPLICATION Modifying Options for the Screen Transition Chart You can modify the screen transition chart s default settings to display the transitions as images To modify chart options 1 In the State Chart choose Tools Options the Chart Options dialog box opens 2 Select the Screen Transition tab 3 In the Information Shown as Images box select Transition Triggers This option will display images of the pushbuttons 4 Click to close the dialog box 5 Save this setting by using the Save Settings Now command from the Options menu in the Application Manager Export the transition chart for Backlight state again The chart should look similar to this illustration BACKLIGHT End_Power_Key in Send_Key in Left_Soft_Key in Right_Soft_Key in hk os ee esim Numeric_Keys in Stage 3 is completed Be sure to save your application STAGE 4 DEFINING THE FUNCTIONALITY FOR READY MODE 63 STAGE 4 DEFINING THE FUNCTIONALITY FOR READY MODE In this stage you define the functionality for Ready mode Ready mode itse
36. RapidPLUS Xpress User Manual RapidPLUS Xpress User Manual 2003 e SIM Ltd All rights reserved e SIM Ltd POB 45002 Jerusalem 91450 Israel Tel 972 2 5870770 Fax 972 2 5870773 Information in this manual is subject to change without notice and does not represent a commitment on the part of the vendor The software described in this manual is furnished under a license agreement and may be used or copied only in accordance with the terms of that agreement No part of this manual may be reproduced or transmitted in any form or by any means electronic or mechanical including photocopying and recording for any purpose without the express written permission of e SIM Ltd Microsoft Windows Windows NT Visio and Internet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the United States and or other countries Java and the Java logo are trademarks or registered trademarks of Sun Microsystems Inc in the United States and other countries Other product and company names mentioned in this manual may be trademarks or registered trademarks of their respective owners Written and produced by e SIM Ltd MAN Xpress 7 2 Printed in Israel Contents PREFACE ox 1524465 han o Oe 6S See Oo hoe k So Eke aks eee eee ERAN Ew eee bee eee vii ReQuITeMeSs so 2540 6 66 5 5 85 Othe toe Eee A bee oe be Sk ed es Vii PDOUL 1S User MMil tise ap aired hates eens aw areas een aia an acne Gre
37. SECIN SENO S 22 o en ob Sead ES are Bie ace A enme at ely ea ea es coke 38 CHAPTER 3 TUTORIAL 2 EXPANDING THE BASIC APPLICATION 39 State he TUTON aI oi nase akan car a aa tye ee es Seow eaten en a ate e eee 41 stage 1 Defmins the System s Modes rerin ees wid kee awe REAREA yaw TORS 41 USE Concurrent ModE reaS rE eee EEEE E E E anh hare eh EEEE 42 Adding Modes tothe eS noenee see ar ene cee O EE E A 43 Stage 2 Defining the Battery Functionality lt scacwuke Geer ene ee OSes Sao ew ay 48 Addins the Battery Gig OMCs oan dsaeicns Theses hod spa Wee PRGA as ae WR ee Boo arses 48 Attaching the Battery Graphics to the Battery Modes 0 0 0 0 eee eee 49 Detining Transitions for the Battery As Pears hades aie eda Gee hi team ewwe aes 50 Testing the Application 1 THe PIOLOly per scars nc i anena r shavaeeewaas wma Soe a 52 NCW IIS the state Can Chatto tous eee erie ete Paras data ease ae aa eee 53 Viewing the Transition Charts ot cco ws acne Mans lew aunatnany aie MAA Me Sone an eee 54 Stage 3 Defining the Backlight Functionality 0 00 eee eee eee eee 56 Addime the Iikuminated Frame OD eCt si03 0a tena esta send ans oh WE Eau ewes Baw oN 56 Attaching the Illuminated Frame to Backlight On Mode 00 57 Defining the Transitions for the Backlight 0 eee ee eee eee 58 Testing the Application m The PIOloly pel soca a wea peek eteeieewaa EAO EES 61 VIEW Ile Ue Screen Transit
38. a hyperlink to the state s parent These hyperlinks enable you to navigate easily among all of the transition charts 114 WORKING IN RAPIDPLUS XPRESS TIPS FOR BUILDING SUCCESSFUL APPLICATIONS Below is additional information to assist you in building successful RapidPLUS Xpress applications Most of the information applies to the stand alone version of RapidPLUS Xpress the last section applies to standard RapidPLUS programs Changing the Order of Modes In the State Chart tool child modes are nested within their parent mode Within the parent mode child modes are arranged in left to right order in columns of two as shown below This layout routing method is known as left to right routing When transitions are added the state chart looks like TIPS FOR BUILDING SUCCESSFUL APPLICATIONS 115 In Rapid simulations left to right routing works fine however when this chart is exported the overlapping transition lines will remain and may make the screen transition chart confusing You can change the routing by rearranging the modes in the Mode Tree There are several ways to rearrange modes e Drag modes along the tree e Use the Alt up down keys e Use the Move command Edit Move For details about moving modes refer to the Moving Modes topic in the online Help In the following example the six modes were rearranged in the Mode Tree to provide continuous routing To see how rearranged mod
39. above the left soft key and click 3 In the Text box overtype Text with Menu and click oK_ 4 In the Parameter Pane name the label object Menu Label and click Accept 5 Reposition the menu label object as necessary To attach the menu label 1 In the Mode Tree right click Idle and choose Attach Menu_Label The Idle branch is complete Lon OPERATE Ready You have finished designing the screen for Idle mode logo T ime_Label Menu Label TUTORIAL 2 EXPANDING THE BASIC APPLICATION 66 Designing the Screens for Dial Mode Dial has three children First_Number Second_Number and Third Number Each of these child modes will present a screen that displays numbers as they are dialed Dial mode will present a Clear option for clearing numbers entered on the screen Adding a Clear Option All cell phones have a Clear option that enables the user to either clear the last number entered or clear the entire phone number The Clear option should be available from all of Dial mode s child modes therefore you will add the clear label to Dial To add and attach the Clear label 1 Add another label object positioning it above the right soft key 2 In the Text box add the text Clear 3 4 In the Parameter Pane name the object Clear Label Align the Clear label with the Menu label To do so select Menu_Label and copy its y position in the Parameter Pane Select Clear_Label and pas
40. ate and positioned below it Transition based on 1 sec timer To add a note 1 In the Mode Tree or State Chart select the mode to which you want to add a note 2 In the small Rapid window click in the Notes area E Rapid TUTORIAL COMPLETED WA OTE ioj xj File Tools Reports Code Generator Options Help Olema wle Gk Ee B el Edit TUTORIAL1_ COMPLETE Notes for the mode On 06 1 246 Ph Click here WORKING IN RAPIDPLUS XPRESS 110 3 Position the note To do so right click in the Notes area to access the popup menu and choose Tags The submenu for the Tags command displays six positions Title Top Left Bottom Right and Footnote Choose one of the positions For example to create the note shown on the previous page you would choose Bottom A special formatting tag is added which is similar to an HTML tag In this example the following tag would be added lt bottom gt lt bottoms 4 Insert the cursor between the opening and closing tags and type the note For example Edit TUTORIALI _COMPLETEI lt bottom Transition based on 1 sec timers bottom Notes for the mode On fi 0 09 74 Abd When you export the screen transition chart the note will appear in the selected position Information about notes in transition charts e The appearance font font color etc of each note in Microsoft Visio is determined by the transition chart s Legend page You can chang
41. ation in the Prototyper tool and see how Rapid moves from state to state To run the application 1 Click in the Application Manager to make it the active window a Ek 2 Choose Tools Prototyper or click the Prototyper button Ctrl R The Prototyper window opens empty because you only see the application when you run it 3 In the Prototyper click the Start Play button the cell phone is displayed in its Off state Click the Start button E Prototyper CELLPHONE1 M E3 Fil Controls CBT Options Help Ci ce fal in JEE While the Prototyper runs the active modes are highlighted in the Mode Tree so you can check that each mode is being entered and exited This feature is called Trace and is located in the Prototyper s Options TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION menu The modes being traced are highlighted in gray the mode that is highlighted in cyan is the mode that was last selected in the Mode Tree 4 Click and hold the End Power key The Welcome message appears and the beep is sounded Then the Welcome message disappears and is replaced by the e SIM logo Powering On was briefly highlighted and now On mode is highlighted 5 Click and hold the End Power key again The e SIM logo disappears the Good bye message appears briefly and then the display goes blank Powering Off was briefly highlighted and now Off mode is highlighted If your application did not run as described abov
42. be used as the first character in an object name Dashes and spaces also cannot be used and will be substituted with an underscore _ You could also use the name OneMnTmr fewer characters yet descriptive Just make sure that readers of your transition charts will understand your naming conventions STAGE 2 DEFINING THE BATTERY FUNCTIONALITY 51 To attach the timer 1 In the Mode Tree right click BATTERY Normal and choose Attach Object Time One_Min_Tmr Attaching the timer will cause it to restart each time Normal mode is activated Normal mode is completed BATTERY eae athery One_Min_ Tr To make the transition from Normal mode to Low mode 1 Right click BATTERY Normal and choose Make Transition 2 In the Make Transition dialog box select To Low Object One_Min_Tmr Event tick 3 Click Accept then click Close Defining Transitions that Makes the Empty Battery Icon Blink You can make the empty battery icon blink by using another timer object that transitions back and forth between Show_Battery and Hide_Battery modes To add another timer object 1 Double click the Nongraphics icon to open the Nongraphic Objects dialog box 2 In the list select Timer1 then click Duplicate 3 In the Duplicate dialog box rename the object Two Sec Tmr and click 4 The Two_Sec_Tmr timer object is selected in the list Click __E change the initial value from 1 sec to 2 sec 5 Click ox
43. bject Layout attach it to Powering_On in the Mode Tree and make the transition in the State Chart Adding the Timer Object To add the timer 1 Click in the Object Layout to make it the active window 2 In the Object Palette click the Time class button in the left column click the Timer object in the right column then click the Timer object Click the Time class button 3 The first dialog box opens click Mare 4 In the second dialog box change the initial value from 10 to 1 This value means that the timer will count down 1 second then trigger the transition 5 Click twice to close both dialog boxes STAGE 5 DEFINING TRANSITIONS 33 Attaching the Timer Object Although you did not need to attach the pushbutton to the mode tree you must attach the timer Attaching the timer to a mode causes the timer to restart each time the mode is activated After the timer is restarted the transition is triggered To attach the timer 1 In the Mode Tree select Powering On 2 In the Object Layout double click the Nongraphic objects icon the Nongraphic Objects dialog box opens 3 Select Timer Timer1 in the list 4 Click Attach To Mode located at the bottom of the dialog box Timer1 is added to the list of attachments for Powering On CellPhone Wrealcome_Mersage Sound Tirmer Don t close the Nongraphic Objects dialog box Making the Transition from
44. box and select the nongraphic object from the list 3 Click the Attach to Mode button located at the bottom of the dialog box the object is attached to the mode 4 Close the dialog box To attach a nongraphic object from the Mode Tree 1 In the Mode Tree select the mode that the object will be attached to and right click to open the popup menu 2 Choose Attach Object lt object class gt lt object name gt Behavior of Attached Objects Attached objects affect an application and generated screen transition charts in several ways e Attached graphic objects determine the look of states in screen transition charts They also determine the look of an application when it runs in the Prototyper Each attached graphic object appears when the mode to which it is attached is active and disappears when the mode is no longer active e Attached nongraphic objects affect the behavior of the application when it runs in the Prototyper They do not appear in screen transition charts Nongraphic objects used in transitions are attached to enable the transitions to occur DEFINING STATES 93 Certain objects must be attached to modes in order for them to function properly when the application is run in the Prototyper These objects are OBJECT BEHAVIOR WHEN ATTACHED TO A MODE Animation Runs through its frames one time when the mode is entered In screen transition charts only the first frame is displayed Event The ev
45. cause the frame is filled if you resize it to fit the screen it will cover all the graphics therefore you must send it behind the e SIM logo With the filled frame selected choose Layout Order Send to Back of the Order Objects dialog box opens Alt click the logo to add it to the dialog box then click __oK_ Resize the frame to fill the screen Attaching the Illuminated Frame to Backlight On Mode To attach the filled frame object L In the Mode Tree right click Backlight On mode 2 Choose Attach Object Frame SquareCornersFilledFrame When it is attached it will be renamed Frame2 The Backlight branch looks like this illustration LBACKLIGHT Off On L Frame2 TUTORIAL 2 EXPANDING THE BASIC APPLICATION 58 Ctrl C 4 Ctrl V Defining the Transitions for the Backlight When the cell phone is in idle state the backlight is off When any key is pressed the backlight illuminates If no other key is pressed the backlight goes off after five seconds In this step you will create transitions from all the keys so that the backlight will illuminate when any of them is pressed Adding the Pushbuttons You will copy the End_Power_Key pushbutton object to create the other pushbuttons because you have already defined its size and transparency in Tutorial 1 To add the Send pushbutton L In the Object Layout select End_Power_Key and copy it To copy it choose Edit Copy
46. con will be selected To see the hidden nongraphic objects icon 1 Choose Layout Order Bring to Front The icon appears in front of the bitmap object BA Object Layout CELLPHONE File Edit Layout Group Objects Options Help Djem Lid gt re r 2 Double click the icon the Nongraphic Objects dialog box opens listing all nongraphic objects that have been added to the application Click Close TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 24 Designing the Screen for On Mode In this screen the e SIM logo will be displayed You will add the logo in the same way you added the cell phone bitmap object You will then make it transparent so that the color of the screen shows through it To add the e SIM logo 1 In the Object Layout choose File Import Bitmaps 2 In the Import Bitmap File dialog box select logo bmp then click __Oren_ 3 In the next dialog box click o Place the crosshairs in the cell phone screen above Welcome and click Ae Reposition the logo as necessary It should look similar to this illustration Welcome To make the logo bitmap transparent 1 With the logo selected choose Edit Colors the Colors Edit dialog box opens 2 Select the Transparent check box and click o Designing the Screen for Powering Off Mode In this screen Good bye will be displayed To add the Good bye text using a label object 1 In the Object Palette click the
47. ct from List command to select EmptyBattery and FullBattery from a list of application objects STAGE 2 DEFINING THE BATTERY FUNCTIONALITY ie 9 49 Choose Layout Align Top and then choose Layout Align Right to place them in the identical position If they are not exactly where you want them to appear nudge them into place using the Shift arrow keys Keep the battery graphics selected Now make both graphics transparent To do so choose Edit Colors to open the Colors dialog box select the Transparent check box to make the transparent color white and click ox Click outside the cell phone to deselect both bitmaps Attaching the Battery Graphics to the Battery Modes You will attach FullBattery to the BATTERY Normal mode and EmptyBattery to the BATTERY Low Show_Battery mode There is no need to attach any bitmaps to the Hide_Battery mode because it will be blank to simulate the blink effect with Show_Battery mode To attach the graphics to the modes 1 In the Mode Tree right click BATTERY Normal and choose Attach Object Bitmap FullBattery Right click BATTERY Low Show_Battery and choose Attach Object Bitmap EmptyBattery The tree should look like this illustration LovsTEM BATTERY Normal L FullE atter Low Hide Battery TUTORIAL 2 EXPANDING THE BASIC APPLICATION 50 Defining Transitions for the Battery When the cell phone is powered on the battery starts running As time pa
48. ction is called when Active mode is exited Do not delete or modify this exported function Objects xXpress_onStart_ev A nongraphic event object that is used to trigger a transition from Idle mode to Active mode Do not delete or modify this object xXpress_onStop_ev A nongraphic event object that is used to to trigger a transition from Active mode to Idle mode Do not delete or modify this object Framel A named frame object that can be used to attach the user object to a mode This object can be replaced by any other graphic object Modes Idle An exclusive mode whose transition to Active mode occurs when the event object xpress_start_ev is triggered Do not delete or modify this mode Active An exclusive mode whose transition to Idle mode occurs when the event object xpress_stop_ev is triggered Do not delete or modify this mode The event objects and exported functions are used in logic that can only be accessed when the program is in standard RapidPLUS mode of operation This logic should not be changed WORKING IN RAPIDPLUS XPRESS 122 Adding Exported Events to the User Object Exported events are used to trigger transitions in the parent application The user object template does not contain predefined exported events You must add them as necessary To add exported events 1 Open your user object 2 In the Object Layout double click the layout making sure that no
49. d In Low state the empty battery is displayed Low Show_Battery is the default exclusive child of Low therefore it is active and its screen appears in the chart A one minute timer causes the transition from Normal to Low STAGE 2 DEFINING THE BATTERY FUNCTIONALITY 55 Transition Chart for Battery Normal State Normal is a state with no child states and its chart is referred to as a single state screen transition chart This type of chart is different from a screen transition chart which is the chart type for a state that has child states A single state screen transition chart is state centric only showing transitions to and from the selected state The transition chart for Normal state should look similar to the following illustration Normal One_Min_Tmr tick Normal Pitty The grayed transition with an unfilled arrow indicates a transition from an ancestor mode in this case from its great grandparent On mode Transition Chart for Battery Low State The transition chart should look similar to the following illustration Show_Battery Hide_Battery SS sinr wo_Sec_Tmr tick Two_Sec_Tmr tick In Show_Battery state the empty battery is displayed in Hide_Battery state no battery graphic is displayed The two second timer that transitions between the two states causes the blink effect when the application is run in the Prototyper Stage 2 is completed Be sure to sav
50. d ensure that the size of the states will be uniform To add the background frame 1 In the Object Palette click the Frame class button at the top of the left column BA Object Layout CELLPHONE1 File Edit Layout Group Objects Options Help nlem BS n2 Click the Frame Al class button The Square Corners Frame is selected In the right column the top frame object below the pointer Square Corners Frame is selected This is the object that you will use 2 Place the crosshairs in the left corner of the cell phone s screen and click a small frame is added on top of the screen 3 Drag the lower right resizing handle until the entire screen is enclosed You may want to resize the frame object to include a bit more than the screen as shown here TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 18 ea Ctrl Shift T Attaching the Frame Object to the Mode Tree In order for the frame object to appear as the background for states in the screen transition charts you must attach it to the root mode which bears the application name CellPhonel To attach the frame object 1 In the Mode Tree window make sure that CellPhonel is selected 2 In the Object Layout window right click the frame object that you just added to open the popup menu and choose the option Attach to Mode CellPhonel When the frame object is attached RapidPLUS assigns it a name Framel The mode tree looks like this illust
51. designer in charge of the Mail feature might add the following child modes to Mail mode BA Mode Tree CellPhone File Edit Tree Logic Help ojej Eae CellPhone Main_Mail Inbox Outbox Send Mestage_Arnives Browser The designers give their completed applications to the team leader The team leader copies and pastes each mode branch into the master application For example from the Mail application copy the Mail mode its attached objects and logic are also copied In the master application CellPhone rpd select On mode and paste the new Mail branch When a copied mode is pasted into the master mode tree its attached objects and logic are pasted with it For each duplicate bitmap object the Paste Conflicts dialog box will open Do not choose the Keep Both option otherwise the master application will contain more than one version of the same bitmap We recommend that you choose the Keep original option This option ensures that the common graphic objects were not changed by the designers TEAM DEVELOPMENT OF RAPIDPLUS XPRESS APPLICATIONS 119 Developing an Application With User Objects When you develop an application with user objects you must base all the user objects on the Rapid supplied user object User_Object_Template udo This section explains how to work with the user object template describes the interface elements in the user object template provides a development methodology and expla
52. destination mode example On mode e An object example Pushbutton1 e One of the selected object s events example longPress The steps for defining a transition are 1 Add the appropriate object in the Object Layout For instructions about adding objects refer to the topics Adding graphic objects and Adding nongraphic objects in the online Help 98 WORKING IN RAPIDPLUS XPRESS 2 Make a transition from one mode to another using one of the object s events The transition is made in the Make Transition dialog box see p 99 for instructions When a transition is made the State Chart looks similar to this illustration Fe State Chart PRODUCTI Fille Logic View Tools Help The parent state oet Se Fa alle El al w zal R with its two children nested The selected transition inside it appears in red Logic information pane that displays the selected transition s triggers Off On TRIGGERS On Ofi Button in This application has two transitions When a transition is selected in the chart the arrow turns red Transition details are displayed in the Logic Information pane below the chart if View Display Logic Info is selected Tips on naming objects used in transitions Here are points to keep in mind when you name transition objects e Transition object names appear in transition charts together with their events For example One_Min_Tmr tick The longer the name the m
53. djustT ime f second appear in red and in flashCIn brackets AdiustFlashT ime Bitrape flashO ff AdjustFlashT ime Bitmap hour flashOn AdjustFlashT ime Bitmap flashO ff LiAdiustFlashT ime day low The State Chart Tool The State Chart tool is used to present the modes graphically It has options for modifying the appearance of the exported screen transition charts Here is the state chart for the Watch application H State Chart Watch IOl x File Logic View Settings Tools Help oeli Serle r fel wese ke WIthB attery WithoutB atterry _ peue Alarms SSS ifStopw aicr THE RAPIDPLUS XPRESS TOOLS The Prototyper Tool The Prototyper tool is used to run and test the application When the Watch application runs in the Prototyper its various buttons can be pressed and the display changes accordingly In the following illustration a button has been pressed to start the stopwatch feature EA Prototyper Watch Iof x File Controls CBT Options Help ojem oje oo E ol Al e nel INTRODUCING RAPIDPLUS XPRESS FROM APPLICATION TO SCREEN TRANSITION CHART A screen transition chart is a diagram that displays states and transitions among states Each state is presented as a rectangle and whatever graphic objects are attached to its modes appear in the rectangle The transitions are presented as arrows with accompanying text that describes each transition for example P
54. e 2 In the Scheme list click the arrow and select lt New gt then click Settings Microsft Visio opens to a new master named Default lt consecutive number gt The schemes vss stencil is also opened but is not in focus 3 Modify any or all of the following elements e Mode names e Transition text default history and deep history e Note text e Indirect transitions text and line color Although other elements can be modified they will not be applied to the charts 4 Save the new scheme To do so a Close the master b In the Update dialog box that opens click c In the scheme vss stencil right click the new master named Default lt number gt and choose Master Properties d Edit the Master s name then click ox e Close schemes vss In the Save Changes dialog box click The newly created scheme is added to the Scheme list in the Chart Options dialog box 107 WORKING IN RAPIDPLUS XPRESS 108 a Ctrl Shift T Exporting Transition Charts Screen transition charts and single state transition charts are exported from either the State Chart or the Mode Tree tools To export a transition chart from the State Chart 1 In the State Chart double click the state for which you want to export a transition chart so that it appears as the top state 2 Choose Tools Export Transition Chart or click the Transition Chart button To export a transition chart fro
55. e open Tutorial1_Completed rpd located in Rapid70 Tutorials RapidPLUS Xpress and compare it to your application 6 Close the Prototyper window Congratulations You have completed the first of two tutorials about RapidPLUS Xpress Although your screen transition chart is very basic and the application doesn t do much you have learned the main features of RapidPLUS Xpress Now you can move on to designing a more complex system Before you go on SAVING SYSTEM SETTINGS You can continue with the second tutorial or close RapidPLUS Xpress and perform the second tutorial later Either way now is a good time to save settings that you set during the tutorial RapidPLUS opening in Xpress mode and font settings The settings are saved to the rapidx ini file To save system settings 1 Click in the Application Manager to make it the active window 2 Choose Options Save Settings on Exit Tutorial 2 Expanding the Basic Application In this tutorial you will start with the cell phone application that you built in Chapter 1 and develop it into a more realistic application Tutorial 2 is divided into five stages Stage 1 Defining the System s Modes In this stage you define many more modes for the cell phone including dialing a phone number sending a call and entering information in a phone book These types of modes are grouped under a main Operation mode Two modes that operate in the background a battery
56. e End Power key to end the call When you have finished testing the application close the Prototyper If your application didn t run as described above open the supplied Tutorial2_Completed rpd located in Rapid70 Tutorials RapidPLUSXpress and compare it with your application STAGE 5 DEFINING THE FUNCTIONALITY FOR CALL_ CONTROL Viewing the Screen Transition Charts You will now export the transition charts for Call_Control and its four children There is a setting in the Chart Options dialog box that enables you to export the screen transition chart for a state and all the screen transition charts for its children To export transition charts for Call_Control and its children 1 In the State Chart choose Tools Options to open the Chart Options dialog box and click the Screen Transition tab 2 Select the Export Subtree Charts option then click to close the dialog box 3 Make Call_Control the top state then export its transition charts The Progress dialog box indicates the status of the Export operation Click here to stop the Export The progress bar for the Euporting Call Contro E eerste Raps xpress entire Export operation l j j being exported then stops Call_Control The progress bar for the chart currently being exported NOTE RapidPLUS Xpress uses the Clipboard during the Export process When a single chart is being exported the process is quick and the use of the Clipboard is in
57. e Object Layout select the pushbutton object named Send_Key In the Mode Tree right click Third_Number mode and choose Make Transition 76 TUTORIAL 2 EXPANDING THE BASIC APPLICATION 3 For the To value in the Make Transition dialog box select Send_Call The other values From Third_Number Object Send_Key Event in are correct 4 Click Accept then click Close Defining the Screen for Receive_Call Mode In Receive_Call mode the screen will display the message Incoming Call Incoming Call You will design the screen for Receive_Call mode however you will not make transitions to it because the current application does not have a mechanism for sending calls to the cell phone The completed application Tutorial2_Completed rpd does implement this mechanism and you can learn how it was done by looking at that application Designing the Screen You will use a label object for the Incoming Call message To define the screen 1 In the Mode Tree select Receive_Call mode 2 In the Object Layout add a label object In its Label dialog box change Text to Incoming Call and redefine the font size to be 10 pt 3 In the Parameter Pane name this object Incoming Call Message 4 Position this object in the center of the screen using the Layout Center Horizontal and Layout Center Vertical commands 5 Attach this object to Receive_Call mode STAGE 5 DEFINING THE FUNCTIONALITY FOR
58. e format of a single state transition chart 1 In the State Chart choose Tools Options the Chart Options dialog box opens 2 Select the Single State Transition tab The default settings are Chart Options i X State Chart Screen Transition Single State Transition Information Shown as Images Scheme 56 2 Scheme for exported chart A Transition Triggers _ Entry States L Exit States Settings Graphic Scaling of State Images 1 0 Scale range is 0 5 5 0 const Mep The dialog box elements are described in the following table Options for Single State Transition Charts OPTION DESCRIPTION Information Shown as When not checked each transition trigger the Images Transition object and its triggering event is displayed as text Triggers only The font for this text is set via the Label Font dialog box When checked the object in each transition trigger is displayed as a graphic image Default checked 106 WORKING IN RAPIDPLUS XPRESS OPTION Information Shown as Images Entry States DESCRIPTION When not checked each entry state a state that has a transition to the selected state is displayed as a simple rectangle When checked each entry state is displayed as it was designed in the Mode Tree that is with all of its attachments Default not checked Information Shown as Images Exit States When not checked each exit state a state that has a
59. e the appearance of notes by changing their appearance on the Legend page Changes are applied to transition charts that are exported after the changes were made NOTE On the Legend page only the notes style can be changed e A state can contain any or all of the note types In addition a state can contain multiple tags of the same type e Notes that do not appear inside tags are not exported e If the Title tag is used the note replaces the state s title The note will also appear in outgoing transitions transitions to modes outside the current transition chart in place of the state s title e If you want a note to contain angle brackets lt and gt you must type them twice lt lt and gt gt CREATING SCREEN TRANSITION CHARTS 111 Adding Notes to Transition Triggers A trigger is the event of a specified RapidPLUS Xpress object that causes a transition to occur In a screen transition chart notes appear below the trigger Example This illustration was taken from a screen transition chart It shows a trigger that has a note Welcome Timer tick Starts the timer The transition s trigger A note that was added to the trigger To add a note to a trigger 1 In the State Chart window select the transition that contains the trigger to which you want to add a note To select a transition click its arrow When a transition is selected it appears in red and all of its tr
60. e user object otherwise all of the user object s graphic objects will be shown e When generating transition charts for an application that contains user objects charts are only generated for the parent application To generate screen transition charts for a user object 1 You must first switch the context to the required user object To do so click in the Application Manager window Notice the Project Components list that displays the name of the parent application E Rapid Main_Application i ol x File Tools Reports Code Generator Options Help mle Be Eln rz Notes for the object Main _ Applic 06 20 46 Fii 2 Click the down arrow and select the relevant user object 3 Generate screen transition charts as you would for any application ADDING SUPPLEMENTAL LOGIC USING RAPIDPLUS 125 Using Common Graphics During Team Development Sometimes several members of the development team will need to use the same graphics In these cases there should be one source for all of the graphics used in the application The simplest way to maintain control over common graphics is to add them to the master application before the team development stage starts However sometimes common bitmaps need to be imported into more than one application In this case here is a suggested methodology To work with common graphics 1 Store all of the graphic files in a single folder This folder should be a subfolder
61. e your application TUTORIAL 2 EXPANDING THE BASIC APPLICATION 56 STAGE 3 DEFINING THE BACKLIGHT FUNCTIONALITY In this stage you will define a screen that will give the appearance of a backlight The backlight illuminates each time a key is pressed and goes off after five seconds of inactivity To achieve the backlight effect you will attach a frame object to the Backlight On mode that has a lighter color than the original screen You will create transitions to and from the backlight s Off and On modes to turn the backlight off and on Adding the Illuminated Frame Object To add the frame object 1 In the Object Layout click the Frame class button in the left column of the Object Palette and the Square Corners Filled Frame in the right column Add a frame that is smaller than the size of the screen so that you can see the logo You will resize it later The battery icon may or may not show depending on the mode that is selected in the Mode Tree Make the frame s color lighter than the screen color To do so open the Colors Edit dialog box Edit Colors and click _ Eolors In the Colors dialog box select a color We used the RGB values of 212 247 96 Click Add Color then click ok The color appears in the Selected Color box next to the palette STAGE 3 DEFINING THE BACKLIGHT FUNCTIONALITY 57 Click the Line and Fill color boxes to make them this color then click Be
62. eating New Chart Schemes on p 107 WORKING IN RAPIDPLUS XPRESS 104 End_Call An entry state Five_Sec_Tmr tick Single State Transition Charts A single state transition chart is the transition chart that Rapid generates for a state that does not have children It shows transitions to and from the selected state Transitions to the selected state come from entry states and transitions from the selected state go to exit states Here is an example of a single state transition chart The arrow indicates a hyperlink to the state s parent This link is especially useful when the drawing is saved in html format The selected state An exit state End_Call ol Wale Talk _End_Power_Key in Total Time 00 03 26 An exit state from an ancestor mode is indicated by a grayed transition with an unfilled arrow Notice that the entry and exit states appear as simple rectangles Also notice that the transition from Talk mode to End_Call mode appears as text only whereas the transitions from End_Call mode appear with images for the transition objects The appearance of entry states exit states and transitions is set in the Chart Options dialog box The chart shown above was created using the default settings These settings are explained in the following section CREATING SCREEN TRANSITION CHARTS 105 Modifying the Appearance of Single State Transition Charts To change th
63. ed and pasted using the standard Cut Copy and Paste commands Hiding attachments in a mode tree You can hide all of a mode tree s attachments This capability is useful when you want to view or work with the mode tree without seeing the attachments To hide all objects attached to the mode tree 1 In the Mode Tree choose Tree Hide Attachments A check mark appears next to this command in the Tree menu To view the hidden attachments 1 Choose Tree Hide Attachments again Selecting Attached Graphic Objects In the Mode Tree all graphic objects that have been attached to a mode can be selected in a single operation using the Select Attachments command When this command is used the graphic attachments of the selected mode and its descendants are selected in the Object Layout This operation is cumulative that is previously selected attachments are not deselected when the attachments of another mode are selected DEFINING STATES 95 To select attached graphic objects 1 In the Mode Tree select a mode 2 Choose Edit Select Attachments All of the mode s graphic objects and the graphic objects of its descendant are selected in the Object Layout In the Mode Tree each selected object is enclosed in a rectangle 3 Repeat steps 1 and 2 for all the modes whose graphic attachments you want to select To cancel the Select Attachments operation 1 In the Object Layout click an area outside of the selected gra
64. ent occurs when the mode is entered Sound The sound occurs when the mode is entered Timer Timers used in transitions must be attached Attaching the timer causes it to restart each time the mode is entered When the mode is exited the timer stops and its counter is reset to its initial value WaveAudio The linked wav file plays from the beginning of the file when the mode is entered If the file is still playing when the mode is exited the file stops playing Working with Attachments After you have attached objects to the mode tree you may want to manipulate them in the Mode Tree and or Object Layout tools This section explains how to work with attachments Moving Attachments You can move an attachment from one mode to another To move an attachment 1 Select the attachment that you want to move 2 Drag it to the other mode making sure that the mode is highlighted before you release the mouse button 94 WORKING IN RAPIDPLUS XPRESS Duplicating Attachments You can easily duplicate an attachment and attach it to a second mode The Duplicate operation copies the attachment but not to the Clipboard and attaches it to the selected mode To duplicate an attachment 1 Select the attachment that you want to duplicate 2 Ctrl drag it to the second mode making sure that the mode is highlighted before you release the mouse button Cutting Copying and Pasting Attachments Attachments can be cut copi
65. es affect a screen transition chart see Designing the Charts on p 34 Building Uniform States in Screen Transition Charts You can attach a frame object to the root mode to provide a background for the states in transition charts and ensure that the size of the states will be uniform See Adding a Background Frame Object on p 17 for an example Without the attached frame object the size of each state is determined by its attachments Compare the following two screen transition charts The first one does not have a frame object attached to its root mode and the second one does Notice how the attached frame object in the second chart provides a uniform look for the states This uniformity not only provides legibility to the chart but also shows how the screen will look when this state is achieved WORKING IN RAPIDPLUS XPRESS 116 A sample chart without a background frame Off End_Power_Key longPress A Timer tick Timer 1 tick Powering_ Off End_Power_Key longPress A sample chart with a frame attached to the root mode End_Power_Key longPress Timer ti Timer tick Powering_Off Powering On ck TEAM DEVELOPMENT OF RAPIDPLUS XPRESS APPLICATIONS 117 TEAM DEVELOPMENT OF RAPIDPLUS XPRESS APPLICATIONS A team of designers can work together to develop an application Team development is especially useful when a feature rich application is be
66. ess program 1 From the Windows Start menu choose Programs Rapid 7 0 RapidPLUS Xpress The names on your system may be different depending on your choices during installation 2 RapidPLUS Xpress opens Proceed to the next section The RapidPLUS Xpress Tools To launch RapidPLUS Xpress from within RapidPLUS 1 From the Windows Start menu choose Programs Rapid 7 0 RapidPLUS The names on your system may be different depending on your choices during installation Three tool windows open 2 Click in the small window in the upper left corner titled Rapid UNTITLED to make it the active window E Rapid UNTITLED Iof x File Tools Reports Code Generator Options Help Djema wli OR EE Edit UNTITLED UNTITL TopPanel 03 35 25 PM This window which is referred to as the Application Manager is used for opening the various tools in RapidPLUS and for setting general options 3 Choose Options Xpress mode Options Help press mode Fonts tiegen Leliai Click here to switch w Tool Tips to RapidPLUS Xpress search Path Save Settings Mow Save Settings on Exit l abla eel LAUNCHING RAPIDPLUS XPRESS 11 The screen configuration changes and the three main tools that are used in RapidPLUS Xpress open Also the Rapid window s toolbar changes so that only the tools and options relevant to RapidPLUS Xpress are available The RapidPLUS Xpress Tools The main tools in RapidPLUS Xpre
67. ff are both modes of the cell phone The behavior of On mode can be described by additional modes such as Idle Place a Call Talk End a Call and Menu Functions The behavior of Menu Functions mode can be described by additional modes such as Main Menu and Phone Book Menu Phone Book Menu can be further described by modes such as Add Entry Delete Entry and so on In the first stage of developing a RapidPLUS Xpress application you list the system s modes Then you build these modes in the Mode Tree tool A mode tree is a hierarchical representation of a system s behavior It is used to organize a system s structure logically and efficiently A snapshot of a system at a given time is called a state A state can capture the system e When only one mode is active such as when the mode Off is active e When many modes are active such as when the modes On Menu Functions Phone Book Menu Add Entry are all active Each of these modes presents different information about the On state In this tutorial you will focus on states that capture the behavior of single modes In other words the state and the mode will be equivalent In the second tutorial you will work with states that capture the functionality of more than one mode STAGE DEFINING THE SYSTEM S STATES USING MODES 13 Developing States Using RapidPLUS Xpress Modes Although a real cell phone has many modes at this stage in the tutorial you will focus on its
68. ft T 3 Maximize Visio Your transition chart should look similar to this illustration CellPhone m Powering_Off Good bye By the way if you want to see how the frame object adds consistency temporarily remove it from the transition charts To do so right click Frame1 in the mode tree and choose Deactivated then regenerate the transition chart When you have finished viewing the transition chart minimize the Visio window Right click Frame1 again and choose Deactivated so that the frame will once again appear in the screen transition charts TUTORIAL 17 BUILDING A BASIC XPRESS APPLICATION STAGE 5 DEFINING TRANSITIONS In this stage you define transitions A transition is a move from one mode to another that occurs when a specified trigger takes place A trigger is an event of a specified RapidPLUS Xpress object For example the transition from Off mode to Powering On mode will occur when an On Off button is pressed In screen transition charts transitions appear as arrows going to and from the designated screens Transitions are also important when the Rapid application is run because the transitions are the triggers that cause the application to change states To define transitions you add objects that will be used to trigger the transitions then you make transitions using these objects events Defining the Transition from CellPhonel to Off Mode In the Mode Tree notice that there is an arrow pointing
69. ge the To value to Second_Number and click Accept To make the transition from Second Number back to First Number 1 Click the arrow in the From box and select Second Number 2 Change the To value to First Number and click Accept To make the transition from First Number back to Idle 1 Click the arrow in the From box and select First Number 2 Change the To value to Idle and click Accept then click Gose STAGE 4 DEFINING THE FUNCTIONALITY FOR READY MODE 71 To make the transition from Dial s child modes back to Idle 1 In the Mode Tree right click Dial and choose Make Transition The values From Dial To Idle Object Right_Soft_Key are correct 2 Change the Event value to longPress 3 Click Accept then click Close Testing the Application in the Prototyper Now that you have added the Idle and Dial functionalities test the application before you build the screen transition chart To run the application E 1 Open the Prototyper and click the Start button 2 Power on the cell phone 3 Click any of the number keys on the keypad One by one the three numbers are added to the display 4 Use the Clear soft key to test the Clearing functionality 5 Notice the functioning of the battery icon and backlight 6 When you have finished testing the application power off the cell phone and close the Prototyper TUTORIAL 2 EXPANDING THE BASIC APPLICATION 72 zy
70. h 68 TUTORIAL 2 EXPANDING THE BASIC APPLICATION 3 Place the crosshairs on the layout frame and click 4 In the Parameter Pane rename the object Second Num Label and click Accept Click More Type 45 and click ox_ 6 Reposition the object so that it is aligned with First_Num_Label To do so select both of the number labels Choose Layout Align Right then choose Layout Align Bottom si 7 Attach Second _Num_Label to Second Number mode To add the third number label 1 Repeat the procedure that you just performed naming the object Third Num Label and assigning the text 456 2 Align Third_Num_Label with Second_Num_Label 3 In the Mode Tree attach Third _Num_Label to Third _Number mode The Dial branch is complete Clear_Label FirstNumber LIFirst_Mum_Label SecondNumber LiSecond_Num_Label ThirdN umber LiThird Mum Label STAGE 4 DEFINING THE FUNCTIONALITY FOR READY MODE 69 Defining Transitions for Ready Mode In Stage 3 you added the pushbutton objects needed to make the transitions in this stage you do not have to add any more transition objects Defining the Dialing Transitions Pressing numeric keys repeatedly will cause transitions from Idle to Dial First_Number to Second_Number to Third_Number No matter which key is pressed the display will be the same 49454456 To make the transition from Idle to Dial First_Number 1 In the Mode Tree select Idle 2 I
71. has many options in its main menu To keep the tutorial short only two options are presented Neither of these modes has children To Phone_Book_Submenu add three exclusive children 1 Add Entry 2 Edit Entry 3 Delete Entry These modes present menu options for performing work on phone book entries None of these modes have children To Menu_Functions add one exclusive child 1 Add Entry Usually a cell phone has many menu functions To keep the tutorial short only one menu function is presented Add_Entry presents screens for entering data in phone book entries 46 TUTORIAL 2 EXPANDING THE BASIC APPLICATION To Add_Entry add three exclusive children 1 Add Name 2 Add Number 3 Save Entry The first two modes present data being entered in a phone book entry The third mode presents the screen that appears when the entry has been saved None of these modes have children The completed Menus branch should look like this illustration i LEnd_Call Menus Main_Menu Phone_Book Services Phone _Book_ Submenu dd Entry Edit_Entry Delete Entry Menu Functions Ladd Entry dd Name Add Nurniber Save Eritry SYSTEM Adding Modes to SYSTEM Before you add modes to the SYSTEM branch you can collapse the OPERATE branch to give more room in the tree and help you focus on the upcoming branches To collapse the OPERATE branch 1 Select OPERATE 2 Choose Tree Collapse For the SYSTEM branch add the fol
72. he ancestor mode is not affected Example The Menu_Options mode parent has numerous child modes that require a label object displaying the word Menu however two of the child modes require a label object displaying the word Select The Menu label object is attached to Menu_Options mode and deactivated in the two child modes that do not require it WORKING WITH TRANSITIONS A transition is a move from one mode to another that occurs when a specified trigger takes place A trigger is an event of a specified RapidPLUS Xpress object For example the transition from Off mode to On mode will occur when an On Off button is pressed Transitions are important when the Rapid application is run because the transitions cause the application to move from mode to mode Transitions are important in screen transition charts because they document how the product moves from one state to another A transition can have more than one trigger For example the transition from Place_a_Call mode to End_the_Call mode can be triggered by pressing the End button on the cell phone by pressing the End button on a second phone or by powering off the cell phone To define transitions you add objects that will be used to trigger the transitions then you make transitions using these objects events Typical objects used in transitions are pushbuttons switches and timers A transition has four elements e A source mode example Off mode e A
73. he object you want to deactivate 2 Choose Tree Deactivated A check mark appears next to this command in the Tree menu and the deactivated object appears in gray You can also select the Deactivated command from the object s popup menu To reactivate the object 1 Select the deactivated object in the tree 2 Choose Tree Deactivated again Deactivating Ancestor Attachments There will be times that you want a graphic object to appear in all descendant modes children grandchildren and so on so you will attach the object to the parent mode There will also be times that you want the attached object to appear in all descendant modes except one or two A command Deactivate Ancestor Attachment deactivates the attached object in specific descendant modes When this command is used the ancestor attachment will appear in all of its descendant modes except in the modes that have the attachment deactivated To deactivate an ancestor attachment 1 In the Mode Tree right click the mode for which you want to deactivate the ancestor attachment 2 Choose Deactivate Ancestor Attachment lt attachment name gt The deactivated object is attached to the selected mode and appears in gray to indicate that it is deactivated To reactivate the ancestor attachment in the descendant mode 1 Select the deactivated attachment the one that appears in gray then delete it WORKING WITH TRANSITIONS 97 The original attachment in t
74. hen click Close 7 Close the Nongraphic Objects dialog box 8 The completed Send_Call Receive_Call and Talk branches look like this illustration Send Call He hird_Num_Label Calling Message Five_Sec_T mr Receive Call Lilncoming Call Message Talk LiTime Elapsed Message End Call Defining the Screen for End_Call Mode In End_Call mode the screen will display the total time that elapsed during the duration of the call Total Time 00 03 76 Designing the Screen You will duplicate the 00 00 43 label object in Talk mode to create the total time elapsed label object You will then duplicate this new label object to create a label for the Total Time text To design the screen 1 In the Mode Tree select Talk 2 In the Object Layout duplicate the Time_Elapsed_Message object STAGE 5 DEFINING THE FUNCTIONALITY FOR CALL_ CONTROL 79 3 In the Parameter Pane name this new object Total Time Elapsed Message In its Label dialog box change 00 00 43 to 00 03 26 Attach this object to End_Call mode Duplicate the Total_Time_Elapsed_Message object In the Parameter Pane name this new object Total Time Message In its Label dialog box change Text to Total Time Sot SS eS Attach this object to End_Call mode Lime _blapsed Message Pct Time_Elapsed Message Total Time_Messaqge 10 Position these objects in the center of the screen Making the Transitions You will ma
75. her with its subcharts a separate page is added for each state s transition chart NOTE If the RapidPLUS Xpress application is located in a folder on a server and you don t have permission to save to that folder RapidPLUS Xpress places the vsd file in your TEMP folder Modifying Transition Charts You can edit exported transition charts in Visio However If you edit a state s transition chart in Visio and then re export the state s transition chart your changes in Visio will be overwritten To prevent overwriting your changes save the modified vsd file with a different name WORKING WITH TRANSITION CHARTS IN MICROSOFT VISIO 113 Printing Transition Charts The size of a Visio page is determined by the Export operation s output RapidPLUS Xpress sets the Print Zoom to Fit to 1 sheet across by 1 sheet down This setting ensures that each chart will fit onto one page when it is printed however it also means that the sizes of the screens may vary from chart to chart If you have a printer that can print large pages you can change the Print Zoom to Adjust to 100 Distributing Transition Charts Over the Web In Visio you can save the screen transition charts to html format for distribution over the Web When RapidPLUS Xpress generates a transition chart it adds hyperlinks to all of the transition chart s elements states transitions etc Also an arrow at the top of each transition chart is
76. hic and nongraphic 20 graphic defined 14 making colors transparent 29 naming 21 pasting 58 selecting multiple objects 48 opening applications 41 Parameter Pane 22 RapidPLUS Xpress 10 RapidPLUS Xpress tools 11 P Parameter Pane 21 22 parent mode 13 28 pasting objects 58 Prototyper overview 5 running applications 37 tracing active modes 37 pushbutton objects adding to layout 29 making transparent 29 R RapidPLUS products amp RapidPLUS Xpress launching 10 overview 1 8 tools 3 11 workflow for developing applications 86 rapidx ini 38 read only logic 126 root mode 13 routing of states 34 114 running applications in the Prototyper 37 S saving applications 14 screen transition charts 112 system settings 38 schemes in screen transition charts 103 106 107 screen transition charts See also single state screen transition charts creating 18 INDEX screen transition charts cont designing 20 34 115 displaying triggers as images 62 distributing over the Web 113 examples 7 27 36 54 55 61 62 72 82 101 exporting 18 108 exporting with subtree charts 81 103 generating from user objects 124 in Microsoft Visio 112 modifying appearance of 102 notes for states and triggers 109 111 Overview 6 87 printing 113 saving 112 schemes 107 transitions to ancestor mode 55 uniformity 115 selecting attachments 94 95 multiple objects 48 sending objects to back of a specified object 57 single
77. hoose Attach lt name of selected object gt To attach more than one graphic object 1 2 3 In the Object Layout select the objects that will be attached In the Mode Tree select the mode to which the objects will be attached and right click to open the popup menu Choose Attach Selected Objects To attach an object exclusively from the Mode Tree 1 2 In the Mode Tree select the mode to which the object will be attached and right click to open the popup menu Choose Attach Object lt object class gt lt object name gt To attach objects from the Object Layout 1 3 In the Mode Tree select the mode to which the object s will be attached In the Object Layout select the object s that will be attached and right click to open the popup menu Choose Attach to Mode lt name of selected mode gt WORKING IN RAPIDPLUS XPRESS Attaching Nongraphic Objects to the Mode Tree Nongraphic objects are attached to the mode tree to add effects for example sounds from wav files or the sound object Sounds will be heard when the application runs in the Prototyper however no reference is made to them in the screen transition charts Nongraphic objects can be attached from the Object Layout and Mode Tree tools To attach a nongraphic object from the Object Layout 1 In the Mode Tree select the mode to which the object will be attached 2 In the Object Layout open the Nongraphic Objects dialog
78. how the Menus branch was developed Also examine the mechanism that was used to simulate the answering of phone calls Working in RapidPLUS Xpress The purposes for building a RapidPLUS Xpress application are two fold 1 To build an application that presents a product s design and functionality 2 To create screen transition charts from the application that document the product s design and functionality This chapter explains how to build applications and create screen transition charts Information about screen transition charts is new in RapidPLUS Xpress and is completely documented in this manual Information about building applications is presented in existing RapidPLUS documentation and is therefore not presented here References to other documentation are given where appropriate This chapter presents e The workflow for building a RapidPLUS Xpress application e The RapidPLUS Xpress library of objects e How to define state images for the screen transition chart e How to work with transitions e How to create screen transition charts e Team development of RapidPLUS Xpress applications Before you begin working with RapidPLUS Xpress we strongly recommend that you perform the tutorials presented in Chapters 2 and 3 85 WORKING IN RAPIDPLUS XPRESS WORKFLOW FOR DEVELOPING AN APPLICATION There are several stages in developing RapidPLUS Xpress applications The development doesn t have to be followed
79. ication with the name Cel1Phone2 in the same folder as CellPhonel STAGE 1 DEFINING THE SYSTEM S MODES A real cell phone may contain dozens or hundreds of modes depending on the phone s functionality and complexity In the first stage of this tutorial you will add 33 modes to the RapidPLUS Xpress application you built in Tutorial 1 That number may sound large but it is not a difficult number to manage The strength of the Mode Tree tool lies in its hierarchical nature so you will be able to organize these modes logicially and efficiently Before you begin look on the next page at the completed trees for each application The original application CellPhone1 has four modes its attachments are hidden the next application CellPhone2 has 37 modes Examine the hierarchy of both trees The tree in CellPhonel has only two generations the parent CellPhonel the root mode and its children The tree in CellPhone2 has multiple generations The root mode CellPhone2 has children grandchildren etc 42 TUTORIAL 2 EXPANDING THE BASIC APPLICATION A Mode Tree CELLPHONE1 _ Ox File Edit Tree Logic Help HEEG EAL Using Concurrent Modes E Hode Tree CELLPHONE IO x File Edt Tree Logic Help On OPERATE Ready Idle Dial First_Nurnber Second Number Third Nurnber Call Control Send Call Receve_Call Talk End_Call Menus Main Menu Phone Book Services Phone Book _ Submenu dd Entry Edit_Eritry Delete Entr
80. iggers are displayed in the Logic information pane at the bottom of the window The top most trigger is selected by default NOTE If the Logic information pane is hidden you can show it by choosing View Display Logic Info 2 In the Logic information pane select the relevant trigger 3 In the small Rapid window click in the Notes area as shown on p 109 and type the note When you export the screen transition chart the note will appear WORKING IN RAPIDPLUS XPRESS 112 WORKING WITH TRANSITION CHARTS IN MICROSOFT VISIO When a transition chart is generated in RapidPLUS Xpress it is exported to Microsoft Visio 2000 or higher therefore Visio must be installed on your system The first time that a state s transition chart is generalizer Visio opens and displays a new vsd drawing comprising two pages the first page displays a legend and the second page displays the transition chart The vsd file is assigned a default name based on the name of the application and is placed in the folder in which the RapidPLUS Xpress application is located The page displaying the transition chart is assigned a default name based on the name of the state Each time a transition chart is generated for that specific state its page is overwritten Each time a transition chart is generated for a different state in the application a new page is added to the Visio drawing When a state s screen transition chart is exported toget
81. in the exact order described below but must include each stage Stage 1 Defining the Product s Functionality A product s functionality is defined through modes Modes are the distinct units of functionality that describe the system s behavior For example a cell phone can be on or off therefore On and Off are both modes of the cell phone application The behavior of On mode can be described by additional modes such as Place a Call Talk and End a Call The product s functionality is organized logically and efficiently using a tree design in the Mode Tree tool For details about designing and building a mode tree see Stage 1 Defining the System s States Using Modes on p 12 and Stage 1 Defining the System s Modes on p 41 Information about modes is available in the online Help file in the Working in the Mode Tree topic Stage 2 Designing the Product s User Interface A product s user interface comprises graphic and nongraphic elements that create the look of the product The user interface is created in the Object Layout tool For details about designing the user interface see Stage 2 Defining Background Graphics on p 14 and Stage 3 Designing the Screen Elements on p 20 Information about graphic and nongraphic elements is available in the online Help file in the Working in the Object Layout topic This stage is usually performed in conjunction with the next stage Stage 3 Defi
82. ing developed To assist you with team development two methodologies are presented in this section one methodology utilizes user objects the other does not A user object is a RapidPLUS application that is built specifically for nesting inside another RapidPLUS application known as the parent application User objects can be re used within the same application and in other applications as well Once built they reduce the work of recreating functionality A Rapid supplied user object User_Object_Template udo is the basis for all user objects added to the parent application Both methodologies rely on a master mode tree and common graphics Developing an Application Without User Objects 1 The team leader designs a master mode tree For example B Mode Tree CellPhone File Edit Tree Logic Help Dej aee Sz a Idle Man Menu Phonebook Mail Browser 2 The team leader adds the objects that are common to the entire application such as the bitmap of the cell phone and pushbuttons for the keypad keys 3 The team leader gives a copy of the master application to each designer 4 The team leader assigns each designer a mode to develop For example the designer in charge of the Mail feature will develop the Mail mode 118 WORKING IN RAPIDPLUS XPRESS 5 Each designer builds the assigned mode branch making sure not to change the names of the modes or the structure of the master mode tree For example the
83. ins how to use a keypad user object Working with the User Object Template The file User_Object_Template udo has a special interface that was designed to communicate with the parent application in which it is nested The template contains e Two modes lIdle and Active e One graphic object that gives the user object its graphic representation in the Object Layout of the parent application e Two nongraphic objects event objects that trigger transitions between the user object s modes e Two exported functions that when called by Rapid activate the event objects These interface elements are described in detail on p 121 Each time you build a new user object you will start with the user object template To build a new user object 1 Open User_Object_Template udo It is located in the Objects folder 2 Choose File Save As select your working folder and give the application a meaningful name Notice that it is saved with the udo extension WORKING IN RAPIDPLUS XPRESS 120 3 Build the user object making sure that changes or additions that you make will not adversely affect the parent application All modes should be children of Active mode as shown in the following example FE Mode Tree Mail_ User Object Use Ob j Ale cone e Logic Help Ci oo a eja xel Idle Actye Main Mail Inbox Outbox Send Message _Arives A sample mode tree of a user object What Happens When the User Object is
84. interface elements states and transitions among states The tools that comprise RapidPLUS Xpress are e Object Layout e Mode Tree e State Chart e Prototyper An additional tool the Object Editor is available for customizing graphic elements of the user interface The Object Layout Tool The Object Layout tool is used to develop the prototype s user interface It can import graphics created in other graphics programs and has its own library of objects Here is an example of a watch that was designed in the Object Layout d Object Layout Watch Mie x File Edit Layout Group Objects Options Help pelil xas x 7503303 s r An imported bitmap of a watch A RapidPLUS Xpress object a transparent push button used to add functionality to the imported bitmap An imported bitmap that shows a specific state of the watch INTRODUCING RAPIDPLUS XPRESS The Mode Tree Tool The Mode Tree tool is used to develop the prototype s functionality It presents a hierarchical tree structure comprising modes parent mode gt child modes gt grandchild modes etc Graphic objects are attached to the modes to create the look of each state in screen transition charts Here is the tree for the Watch application B Mode Tree Watch Iofs File Edit Tree Logic Help Parent mode k elal Fl Fx k Child mode Grandchild mode Great grandchild mode me Graphic objects that time are attached to modes A
85. ion CAI ug tea sine is hate Rell Peasy Aik oh Rane sen AACE eile lo 61 Stage 4 Defining The Functionality for Ready Mode cece eee eee ee 63 Designing the Screen for Idle Mode neseser ae euskal iieu tadau eana kaya 64 Designing the Screens Tor Dial Mode sn ecaaiek ciety as dan Gadus ns Gee ems N TTE 66 Defining Transitions for Ready Mode riaren cece ete eect teenies 69 Testing the Application im the Prototype wy eee ivonind rahe aee RERE Ea 71 Viewine the Screen Transition Charts oo Sc ck aa wee hae Ra eee ER 72 Stage 5 Defining the Functionality for Call_Control Mode 0405 74 Defining the Screen for Send Call Mode ie icceve eres teh ek oda ele ln ee EEA 74 Defining the Screen for Receive_Call Mode cece ccc eee eee eens 76 Definine the screen for Talk Mode 4 taceset atone dan Gadus as tee eemeOhatanewees 77 Defining the Screen for End Call Mode s c 2640e2 couse setanivens bce Cee DER OR ded 78 Testing the Application ti th RIOtOly Der wy sks eoorhed Sea oat iyi eeo ats tae dt at oe 80 Viewing the Screen Transition Charts i005 aaan wegen aed Cala ee eee RL Ra A Cees 81 CHAPTER 4 WORKING IN RAPIDPLUS XPRESS ce eee ee ee ee ee eee eee 85 Workflow for Developing an Application 0 0 cece cece eee cence 86 RapidPEUS Xpress ODJECE 2504 6622s a0n a aks keh ba ae ae ha a Ee Te Rees 88 Penno States och ocus kee A E TA ty hale a Se yal wa Wels Su aw ete Manele
86. its appropriate location in the mode tree and makes transitions to and from the user object using its exported events Working with a Keypad User Object An application for a mobile device usually requires a keypad You can develop the keypad as a user object which can then be added to the parent application and to all user objects that require keypress inputs The keypad user object does not need to be based on User_Object_Template udo because its functionality does not require the predefined interface elements xpress_start xpress_stop etc 124 WORKING IN RAPIDPLUS XPRESS Project Components lis In order to add the keypad user object be sure to save it to the same folder as the parent application and user objects Do not attach the keypad user object to any modes In the parent application the keypad user object must be at the bottom of the stack order so that each of the user object keypad will be active when the user object is active To send the parent application s keypad user object to the bottom select it then choose Layout Order Send to Back Refer to the Xpress example application located in the Examples folder to see how a keypad user object was developed and utilized Guidelines for Generating Screen Transition Charts from User Objects e Be sure that the option Information Shown as Images Transition Triggers is not selected when generating a screen transition chart for the mode that contains th
87. k the arrow The pushbutton object has three events associated with it in out and longPress Select longPress 4 Click and don t close the dialog box In the State Chart notice that an arrow was drawn which indicates the presence of a transition from Off to Powering On Defining the Transition from On Mode to Powering_Off Mode Because the End Power key is used to power on and power off the cell phone the transition from On to Powering_Off is similar to the one you just created To make the transition L In the From box click the arrow and select On Notice that Powering_Off is now selected in the To box The selected object and event are correct click Accept then click Cose In the State Chart notice that another arrow was drawn this time from On to Powering_Off Click the arrowheads transition information is presented in the Information pane below the chart Deleting incorrect transitions You can delete incorrect transitions in the State Chart To delete a transition 1 In the State Chart select the transition arrow that you want to delete 2 Choose Logic Delete Transition or press the Delete key TUTORIAL 17 BUILDING A BASIC XPRESS APPLICATION 32 Defining the Transition from Powering_On Mode to On Mode When a cell phone moves from Powering _On to On no user action is involved this transition is automatic To define this transition you add a timer nongraphic object in the O
88. ke two transitions e A transition from Talk to End_Call using the transparent pushbutton over the End Power key e A transition from End_Call to Idle using the five second timer To make the transition from Talk to End_Call 1 In the Object Layout select the End_Power_Key pushbutton object 2 In the Mode Tree right click Talk mode and choose Make Transition In the Make Transition dialog box all of the values are correct From Talk To End_Call Object End_Power_Key Event in 3 Click Accept then click Close TUTORIAL 2 EXPANDING THE BASIC APPLICATION 80 To make the transition from End_ Call to Idle 1 2 In the Mode Tree right click End_Call mode and choose Make Transition Make the transition select To Idle Object Five_Sec_Tmr Event tick Click Accept then click Close Attach Five _Sec_Tmr to End_Call mode To do so Ctrl click Five_Sec_Tmr which is attached to Send_Call mode and drag it to End_Call mode The completed End_Call branch looks like this illustration Total Time Elapsed Message Total Time _Message Five_Sec_Trnr Testing the Application in the Prototyper Now that you have added the Call_Control functionality test the application before you build the screen transition chart To run the application Open the Prototyper and click the Start button Power on the cell phone 1 2 oe 4 5 Dial three numbers then send the call Click th
89. lf does not have attachments or transitions it simply acts as an organizational mode in the OPERATE branch of the tree Ready mode has two child modes e Idle presents the screen that appears when the cell phone is awaiting user input e Dial comprises modes that display numbers as they are dialed Idle mode will always be the first screen that the user sees after powering on the cell phone Why Take a look at the following illustration It shows the tree with the attachments hidden as the application is running in the Prototyper A transition was just made from Powering _On to On When On mode becomes active its child modes OPERATE and SYSTEM become active Because OPERATE is active its default child Ready becomes active And when Ready is active its default child Idle becomes active TUTORIAL 2 EXPANDING THE BASIC APPLICATION 64 Designing the Screen for Idle Mode In Idle mode the screen will display the logo the time and the Menu option for opening the Main menu qe 7 r e JaN Moving the e SIM Logo Currently the e SIM logo is attached to On mode which means that the logo will appear in every screen in the On branch Because the logo only needs to appear when the application is idling you should move it to Idle mode NOTE The reason that you wouldn t move the logo to Ready mode is because doing so would cause the logo to remain on screen when numbers are being dialed To
90. ll be implementing your design understand exactly what you envisioned RapidPLUS Xpress is easy to learn and requires no programming experience The basic steps for designing your product with RapidPLUS Xpress are 1 Define the different states comprised of RapidPLUS Xpress modes the product can be in For example a cell phone can be in the following states On Off and Dialing The On state could consist of just one mode On or it could comprise several more modes such as ReadyForInput and Idle 2 Define the objects that will appear in the product prototype Objects can be i graphics of the product and its different screens ii graphic input elements such as pushbuttons and switches and iii nongraphic input elements such as timers and sounds INTRODUCING RAPIDPLUS XPRESS 3 Define the objects that will appear in the screen transition charts by attaching the graphic objects to the appropriate modes For example in the On state various messages such as company name the current time and soft key text will appear on the cell phone screen in the chart Objects that would be attached to the mode s include a bitmap of the screen and label objects that hold text 4 Define transitions between modes such as from Off to On and the triggers that cause them to happen such as the PowerOn pushbutton being pressed That s it After these steps are completed you can run
91. lowing modes taking care to preserve the hierarchy To SYSTEM add two concurrent children 1 BATTERY comprises modes that display the battery icon 2 BACKLIGHT comprises modes that display the backlight STAGE 1 DEFINING THE SYSTEM S MODES 47 To BATTERY add two exclusive children 1 Normal presents the full battery icon This mode has no children 2 Low comprises modes that present the low battery icon To Low add two exclusive children 1 Show Battery presents the low battery icon 2 Hide Battery hides the low battery icon Using these modes will cause the low battery icon to appear to blink Neither of these modes has children To BACKLIGHT add two exclusive children 1 Off presents the default screen which is not illuminated 2 On presents the screen illuminated Neither of theses modes has children When you have finished building the tree close the New Mode dialog box The completed SYSTEM branch should look like this illustration Lon OPERATE SYSTEM BATTERY Normal Low Show Battery Hide Battery BACKLIGHT Off On Stage 1 is completed Compare your tree with the illustration on p 42 to ascertain that it is correct To see the entire tree double click OPERATE to expand it Be sure to save your application TUTORIAL 2 EXPANDING THE BASIC APPLICATION STAGE 2 DEFINING THE BATTERY FUNCTIONALITY In this stage you will define a battery icon that always appears on the
92. m the Mode Tree 1 In the Mode Tree select the state for which you want to export a transition chart 2 Choose File Export Transition Chart Microsoft Visio opens first displaying a Legend page and then the transition chart NOTE The Export Subtree Charts option in the Chart Options dialog box Screen Transitions tab enables you to export transition charts for the selected state and all of its descendant states A Consideration When Exporting Transition Charts RapidPLUS Xpress uses the Clipboard during the Export process When a single chart is being exported the process is quick and the use of the Clipboard is insignificant However when several charts are being exported the process takes longer and the Clipboard will be unavailable in other Windows programs until the Export operation is completed CREATING SCREEN TRANSITION CHARTS 109 Adding Notes to Screen Transition Charts You can add notes in Rapid which will then be included in screen transition charts next to states and or triggers Notes are written and positioned in the small Rapid window Adding Notes to States Notes can be positioned in six places above the state below it to its left to its right as a footnote or as its title You specify the position when you add the note Example This illustration was taken from a screen transition chart It shows a state that has a note nd_Power_Key longP A note that was added to the On st
93. me To add the dialed number to Send_Call mode 1 In the Mode Tree select Dial Third Number Its screen is displayed in the Object Layout 2 In the Object Layout select the 456 display Third_Num_Label 3 In the Mode Tree right click Send_Call and choose Attach Third_Num_Label STAGE 5 DEFINING THE FUNCTIONALITY FOR CALL_ CONTROL 75 To add the Calling label I In the Object Layout Ctrl click and drag Third_Num_Label to duplicate it When you release the mouse button a copy of Third_Num_Label is added to the screen Double click the new label object to open the Parameter Pane and rename it Calling Message Click Accept Click More In the Label dialog box type Calling and click o The screen looks similar to this illustration Calling Right click the Calling Message label object and choose Attach to Mode Send_Call Center the two label objects in the screen To do so select them and the frame object Frame1 Choose Layout Center Horizontal NOTE The label object Third_Num_Label is now attached to two modes It s position in each mode is retained that is in Third_Number mode it appears in the lower right side of the screen and in Send_Call mode it appears in the center Making the Transition from Dial Third_Number to Send_Call You will use the transparent pushbutton over the Send key for the transition To make the transition 1 A In th
94. monitor and a backlight are grouped under a main System mode Stage 2 Defining the Battery Functionality In this stage you define a battery icon that always appears on the cell phone screen and indicates when the battery is full and when it is low To achieve this effect you add two graphics one for a full battery and one for an empty battery and attach them to the appropriate modes You then create transitions from full battery mode to low battery mode Stage 3 Defining the Backlight Functionality In this stage you define a backlight that makes the screen appear illuminated whenever a key is pressed The backlight goes off after five seconds of inactivity To achieve this effect you add a frame to simulate the illuminated screen and attach it to the appropriate mode You then create transitions that cause the screen to illuminate 39 40 TUTORIAL 2 EXPANODING THE BASIC APPLICATION Stage 4 Defining The Functionality for Ready Mode In this stage you define several screens i the screen that appears when the cell phone is in an idle state awaiting user input ii screens that show phone numbers being dialed and iii screens that show phone numbers being cleared Stage 5 Defining the Functionality for Call_Control Mode In this stage you define several more screens i the screen that appears when a phone number has been sent ii the screen that appears for an incoming call iii the screen that appears when
95. move the logo 1 In the Mode Tree select the attachment logo under On mode 2 Drag it to Idle mode making sure that Idle is highlighted before you release the mouse button Defining a Time Display In Idle mode the cell phone will display the current time To add a time display 1 In the Object Layout click the Label class button in the left column of the Object Palette the Label button is already selected in the right column Place the crosshairs under the e SIM logo and click In the Text box overtype Text with 10 15 7 In the Font dialog box change the font to Arial bold 10 pt 5 Click twice STAGE 4 DEFINING THE FUNCTIONALITY FOR READY MODE 65 6 Double click the label object to open the Parameter Pane and name the label object Time_Label1 Click Accept Keep the Parameter Pane open 7 Reposition the time label object as necessary To attach the time label 1 In the Mode Tree right click Idle and choose Attach Time_Label Defining a Menu Option In Idle mode the cell phone will display the option Menu To add the menu option 1 In the Object Layout the Label class button should still be selected in the left column of the Object Palette Click the Label button in the right column Why wasn t the Label button still selected Because an object button is deselected after the object has been added to the layout frame 2 Place the crosshairs on the screen
96. n how the system appears when each state is active For example when Off is active the screen will be blank when Powering On is active a graphic or message will be displayed on the screen when On is active a different graphic will be displayed and so on The screen elements are added to the application in the Object Layout They comprise both graphic and nongraphic objects As mentioned in Stage 2 graphic objects provide a visual representation of the system s user interface Nongraphic objects such as timers and wav files are not seen in the application but maintain a very important role in the behavior of the system In this stage you will add both graphic and nongraphic objects After you have added the objects in the Object Layout you will attach them to modes in the Mode Tree Designing the Screen for Off Mode Because the screen is blank in Off mode you do not add screen elements to it Designing the Screen for Powering On Mode In this screen Welcome will be displayed Also a single beep will sound Adding the Welcome Message using a Label Object You will use a label object to hold the Welcome message To add the text 1 Click in the Object Layout to make it the active window 2 In the Object Palette click the Label class button in the left column Click the Label class button The right column displays the Label button which is selected STAGE 3 DESIGNING THE SCREEN
97. n the Object Layout right click Numeric_Keys the numeric keypad object and choose Make Transition Make Transition for Numernc_Keys Object Numeric Keys Event in Help All of the values are correct so click Accept Keep the dialog box open To make the transition from First Number to Second Number 1 In the dialog box click the arrow in the From box and select First_Number The To value changes to Second_Number and the object and event remain the same 2 Click Accept To make the transition from Second Number to Third Number 1 Click the arrow in the From box and select Second_Number The To value changes to Third_Number and the object and event remain the same 2 Click Accept then click Close 70 TUTORIAL 2 EXPANDING THE BASIC APPLICATION Defining the Clearing Transitions Pressing the right soft key Clear repeatedly will cause transitions from Third_Number to Second_Number to First_Number to Idle A long press on the right soft key will cause a transition from any of Dial s child modes all the way back to Idle To make the transition from Third_Number back to Second_Number 1 In the Mode Tree select Third Number 2 In the Object Layout right click Right_Soft_Key pushbutton and choose Make Transition Make Transition for Aight_Soft_Key From Third _Mumber a To First_Nurniber 7 Object Right_Soft_ Key Event iri 3 Chan
98. nced Tutorial 1 Building a Basic Xpress Application In this tutorial you will launch RapidPLUS Xpress and then build a very simple cell phone in RapidPLUS Xpress and create a screen transition chart from the cell phone application The tutorial is divided into five stages Stage 1 Defining the System s States Using Modes You define four states for the cell phone off powering on on and powering off Stage 2 Defining Background Graphics You define a background bitmap that will appear in the screen transition chart as the background for all four states Stage 3 Designing the Screen Elements You design the elements that appear on each state s screen For example the screen in the powering on state will present a Welcome message the screen in the powering off state will present a Good bye message Stage 4 Attaching Screen Elements to Modes In the previous stage you designed the screen elements in this stage you enable them to appear in the screen transition chart Stage 5 Defining Transitions You define transitions that cause the system to move from state to state The tutorial should take 14 2 2 hours Enjoy learning RapidPLUS Xpress TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION LAUNCHING RAPIDPLUS XPRESS The following instructions present how to launch the stand alone RapidPLUS Xpress program and how to launch it from within RapidPLUS To launch the stand alone RapidPLUS Xpr
99. nclosed in a border When not checked the selected state is not enclosed Default not checked Export Subtree Charts When not checked a single screen transition chart is exported for the selected state When checked transition charts screen and or single state are generated for the selected state and ALL its descendants children grandchildren great grandchildren etc Default not checked No of Levels Shown The number of levels that will appear in the screen transition chart either 1 or 2 A setting of one level shows the selected state and its children A setting of two levels shows the selected state its children and grandchildren Default 1 NOTE When the setting is 2 the Transition Triggers Shown as Images option is unavailable Graphic Scaling of State Images The scaling factor for the bitmap representation of states 1 0 means 1 1 or the same size as in the Object Layout window 5 reduces the image by half 2 0 means 2 1 or twice the size of the object image in the Object Layout and so on Range 0 5 to 5 0 Default 1 0 Scheme The Scheme list presents predefined schemes that determine the appearance of textual elements in charts You can use the supplied schemes or create your own by selecting lt New gt from the list and Clicking Settings All supplied and new schemes are part of a RapidPLUS stencil schemes vss For details about creating new schemes see Cr
100. ning the Product s States A state comprises one or more modes It is a snapshot of a product at a given time The appearance of each state is created by attaching graphic objects to the state s mode s The states are then used in the screen images that appear in the screen transition charts As mentioned above Stages 2 and 3 are usually performed together Graphic objects are added in the Object Layout tool and are then attached to the modes in the Mode Tree tool For details about defining product states see Defining States on p 89 WORKFLOW FOR DEVELOPING AN APPLICATION A state comprising one mode with one attached graphic object a frame 87 Stage 4 Making Transitions Among Modes A transition is a move from one mode to another that occurs because a specified event takes place For example the transition from Off mode to On mode will occur when an On Off button is pressed Transitions are important when the RapidPLUS Xpress application is run because the transitions cause the application to move from mode to mode For details about making transitions see Working With Transitions on p 97 Stage 5 Testing the Application The application can be tested to ensure that the transitions move the application from mode to mode Testing takes place in the tool called the Prototyper For details about running and testing an application see Running the Application in the Prototyper on p 37 Information abou
101. object is selected The Parameter Pane opens for the user object 3 Click More the User Object Functions dialog box opens 4 Click the Events tab 5 Click AddEvent An event is added and assigned a default name fuser Object Events Producti H X Properties Events Messages Functions Hame Eventi Accept Add Event 6 Change the default event name by overtyping it in the Name box then click Accept Repeat steps 5 and 6 for each exported event that you want to add TEAM DEVELOPMENT OF RAPIDPLUS XPRESS APPLICATIONS 123 The Development Methodology 1 The team leader designs a master mode tree For example BA Mode Tree CellPhone File Edit Tree Logic Help Djem xee Se S a Off On Idle Main Menu Phonebook Mail Browser 2 The team leader determines which of the modes functionalities will be based upon user objects 3 The team leader assigns each designer a user object to develop For example the designer in charge of the Mail feature will develop the Mail user object 4 Each designer builds the assigned user object based on the template user object see instructions on p 119 5 The designers give their completed user objects to the team leader 6 The team leader places the user objects in the same folder as the parent application then adds them to the parent application using the Objects Add User Object command 7 The team leader attaches each user object to
102. ode Pb in Time24 Timer Set_Pb in A transition chart can also be generated for states that do not have child states This type of chart a single state screen transition chart shows the transitions to and from the state Example of a single state screen transition chart TimeAMPM Timer Mode_Pb in TimeAMPM StopWatch Set_Pb in Time24 Timer DESIGNING RAPIDPLUS XPRESS PROTOTYPES FOR RAPIDPLUS APPLICATIONS RapidPLUS Xpress is the ideal tool for designing prototypes of products that will be developed in RapidPLUS e SIM s software package for building functional product prototypes e SIM offers several products for producing product prototypes The basic product called RapidPLUS DOC is used for building simulations and generating documentation for user interface specifications and test procedures Another product called RapidPLUS CODE enables generation of C code from the RapidPLUS application The generated C code can be integrated into the actual product A third product called RapidPLUS Web Studio enables generation of Java code from the RapidPLUS application to produce simulations that can be viewed in a Web browser The RapidPLUS Xpress application supplies the information needed and some building blocks to begin building the RapidPLUS application The RapidPLUS Xpress application can be opened in any of the RapidPLUS products and then be modified and enha
103. of the folder that contains the master application for example in a subfolder named Images 2 Bring the graphics into the Object Layout using the Import Bitmaps command File Import Bitmaps Select the Link to File Image Management option in the Import Bitmaps dialog box Each bitmap imported into Rapid brings its name with it thus ensuring that the bitmap has the same name in all the applications into which it is imported NOTE Some characters are not legal in RapidPLUS Xpress and they will be replaced with an underscore _ ADDING SUPPLEMENTAL LOGIC USING RAPIDPLUS This section applies to owners of RapidPLUS RapidPLUS Xpress Before you add supplemental logic we recommend that you be familiar with standard RapidPLUS methodology In the Xpress mode of operation logic is added behind the scenes each time an object is attached to a mode or a transition is created The RapidPLUS Xpress designer never has to write a line of logic nor does the designer see the logic If the RapidPLUS developer wants to add more sophisticated logic standard RapidPLUS mode can be used at any time To switch to the standard RapidPLUS mode of operation 1 In the Application Manager choose Options Xpress mode to deselect it 126 WORKING IN RAPIDPLUS XPRESS Adding Logic In the standard RapidPLUS mode of operation the logic entered via Xpress mode appears as read only logic These read only logic lines appear
104. ongraphic objects such as timers and wav files which are not seen in the application but play an important role in the application s behavior The steps for defining a state are 1 Add the appropriate objects in the Object Layout For instructions about adding objects refer to the topics Adding graphic objects and Adding nongraphic objects in the online Help 2 Attach objects to the appropriate modes as explained later in this section When an object is attached to a mode the mode tree looks similar to these illustrations FE Mode Tree Application Mil Ei File Edt Iree Logic Help MECLENG Attached objects appear in red and in brackets Model LiGraphic_Object_1 Modes Modes Mode3_1 Modes 2 Moded EF Mode Tree Application Mil Ei File Edt Tree Logic Help HECO Model Graphic Object 1 Modes Modes Modes 1 Modes 2 Moded When the attached object is selected in the Object Layout it is enclosed in a rectangle in the Mode Tree WORKING IN RAPIDPLUS XPRESS Attaching Graphic Objects to the Mode Tree Graphic objects are attached to the mode tree to create the appearance of screens in transition charts Without attaching images and or graphic objects states in screen transition charts are simple rectangles A typical state in a screen transition chart that has no attached graphic objects With attached images and graphic objects states in transition charts presen
105. ore space it takes in the chart which can lead to collisions with other transitions Therefore you should keep names as short as possible e Transition names should be descriptive Timer2 is okay but when an application has numerous timers it is hard to remember their attributes Battery_Timer is also a descriptive name but it doesn t mention the time setting If the time setting appears in the object s name it is easier to reuse the object e Why not 1 min timer Numbers cannot be used as the first character in an object name Dashes and spaces also cannot be used and will be substituted with an underscore _ WORKING WITH TRANSITIONS Rapid automatically selects the sibling after the selected mode to be the destination for the transition 99 e You could also use the name OneMnTmr fewer characters yet descriptive Just make sure that readers of your transition charts will understand your naming conventions Making Transitions Transitions can be made from the Object Layout Mode Tree or State Chart using the Make Transition command either from the menus or popup menus This command is located in the following menus TOOL MENU COMMAND NAME Object Layout Edit Make Transition Mode Tree Logic Make Transition State Chart Logic Make Transition To make a transition using a graphic object An efficient way to make a transition is to use the following procedure 1 In the Mode Tree select the mode that is
106. organized by object class in the Object Palette Class Objects Class Objects Class Objects l Frames oO Square Corners Square Corners Filled O Round Corners Round Corners Filled E Pushbuttons Flat LJ Square Q Round Q Circles O Circle Filled Circle 0 Ellipse J Filled Ellipse Time Timer Nd Lines As Solid Be Dashed Dotted A signal Event d Sound Multimedia mc b Wave Audio aj Bitmap aj Bitmap Displays Text Display Animated Animated In addition to these objects graphic files can be imported into the application to add realism for example a graphic of a cell phone and specialized buttons After a graphic file has been imported it is treated as a RapidPLUS Xpress bitmap object There are also two system objects Mouse and Keypad that cannot be used in stand alone RapidPLUS Xpress DEFINING STATES 89 DEFINING STATES A state comprises one or more modes It is a snapshot of a system at a given time The appearance of each state is created by attaching graphic objects to the state s mode s The states are then used in the screen images that appear in the screen transition charts Also by attaching graphic objects to the state s modes you can see in the Object Layout how each mode will appear when the application is run in the Prototyper Besides attaching graphic objects to modes you can attach n
107. peration standard RapidPLUS 125 126 Xpress mode 10 Mode Tree tool collapsing branches 46 deactivating attached objects 27 defined 86 examples of trees 42 expanding collapsed branches 47 exporting transition charts 36 108 making transitions 30 purpose 4 11 12 rearranging modes 35 114 selecting attachments 95 modes adding 13 43 attaching nongraphic objects 33 attaching objects 18 25 90 91 concurrent 42 default 28 definition 12 86 editing 28 exclusive 28 42 parent 13 28 root 13 moving attachments 64 93 modes 35 115 objects on the layout 49 N naming objects 21 objects used in transitions 50 98 nongraphic objects attaching to mode tree 33 92 behavior when attached 92 definition 20 89 duplicating 51 making transitions with 100 sound objects 22 timers 33 viewing in Nongraphic Objects dialog box 23 Nongraphic objects icon 23 notes adding to states 109 110 adding to transition triggers 111 O Object Layout adding frame objects 17 adding label objects 20 adding pushbutton objects 29 attaching objects to mode tree 18 90 importing bitmaps 15 making transitions 30 purpose 3 11 Select All Attachments command 95 sending objects to back of other objects 57 window described 15 Object Palette 15 88 objects aligning 49 68 attaching to mode tree 18 25 90 92 available in Object Palette 88 bringing objects to front 23 centering 75 changing colors 56 copying 58 duplicating 74 129 grap
108. phic objects Selecting All Instances of Attached Graphic Objects From the Object Layout you can select a graphic object s and then use the Select All Attachments command to select all instances of its attachment in the Mode Tree This command is useful when you want to make changes to all instances of an attached object s To select all instances of an attached graphic object 1 In the Object Layout select the object 2 Choose Edit Select All Attachments SHORTCUT Ctrl click the object The attachment is selected in each of the modes to which the object is attached E Mode Tree Applica 0 x fey Object Layout Application for Mode Mode File Edit Tree Logic Help File Edit Layout Group Objects Options Help ojek XSS a Re Djem klaja r Application mee eel Model Graphic Object 1 Graphic_Object_2 Graphic Object 1 Mode3_1 Modes 2 Mode4 Graphic Object 1 NHongqraphic Object 1 Example of a graphic object s attachments selected via the Select All Attachments command WORKING IN RAPIDPLUS XPRESS Deactivating Attached Objects in a Mode Tree You can deactivate objects graphic and nongraphic that are attached to a mode tree A deactivated graphic object will not appear in the Object Layout the Prototyper or screen transition charts a deactivated nongraphic object will not function in the Prototyper To deactivate an object attached to the mode tree 1 In the Mode Tree select t
109. pr E 89 Attaching Graphic Objects to the Mode Tree ee eee eee eee eee eee 90 Attaching Nongraphic Objects to the Mode Tree eee eee eee eee eee 92 Behavior of Attached ObECts 12sencresebetdauee cae Ar aA Hed bees eek beara 92 Workin WIth AtACHIMNGINS 4 052520 pea eug aerate 32 cee eteae sea ean renee ae 4 93 Deactivating Attached Objects in a Mode Tree 0 cece eee ee eens 96 WOT KIS Witi PEAnSIIONS she aurea Skate seu ence eandeA ser aw erases Reoceveeanateie oes 97 Making Transitions a a6 de tgitindanna e mmarated ag eat Bee edge uaa Benga as 99 Deleting Mansions 5502 s a te She wake tas Sener ss Lee tawteale eas Dee sek wees 100 Creams Screen Iransiiem C Watts avs cece tek eae eee tee ed eee ea een aes 100 Screen Tinsin CATAL US e aa a emia baal elem ean mene ase waite iA 101 Modifying the Appearance of Screen Transition Charts 0 0006 102 SInSle Slate Transition Nats 45 Gsm bah kp yao pnw ws ote E y Wied ale wee ae Bae wn ea ana 104 Modifying the Appearance of Single State Transition Charts 105 EXPOE MIS ransom t Naisa ereire ae ier Gaeta set CNet ae ENNE EEEN 108 Adding Notes to Screen Transition Charts 0 0 cece cece eee eee 109 Vi CONTENTS Working With Transition Charts in Microsoft Visio 0 0 cece eee eee eee 112 Modifyine ansition atts E tin oer pad eee pas pede eerste NaS 112 Printing Transition Charts 3 g0n Susi aed aes ee
110. ration A Mode Tree CELLPHONE1 lol x File Edit Tree Logic Help Ci i FSG Sela R Attached objects appear in red and in brackets When the object is selected in the Object Layout it is enclosed in a rectangle in the Mode Tree as shown here 3 Save your application Viewing the Background Frames in the Screen Transition Chart Now that you have attached the background frame you can create a screen transition chart to see how the frame adds a consistent background for all the modes NOTE Microsoft Visio 2000 or higher must be installed to create the chart To create a screen transition chart 1 Click in the State Chart to make it the active window 2 Choose Tools Export Transition Chart or click the Transition Chart button the chart is exported to Microsoft Visio STAGE 2 DEFINING BACKGROUND GRAPHICS Visio opens first displaying a Legend page and then the chart Your transition chart should look similar to this illustration Normal r T Arial de pt Fo A F a Bi CELLPHONE 1 vsd CellPhoneli E Bes 160 AMM te MET er rel Pcl Or tee Ree re Me ear NE IER CellPhone i Notice that the transition chart uses the transparent frame object as its shape for the states When you have finished viewing the transition chart minimize the Visio window 19 TUTORIAL 17 BUILDING A BASIC XPRESS APPLICATION STAGE 3 DESIGNING THE SCREEN ELEMENTS In this stage you desig
111. s dialog box click Keep both 3 Place the crosshairs over the number 1 key and click Resize this new pushbutton until the entire keypad is enclosed 4 Rename this new pushbutton Numeric Keys and click Accept then click Close NOTE You can create pushbuttons that use different bitmaps for the In and Out positions For instructions refer to the online Help file in the Adding realism to pushbutton and switch positions topic Defining the Transitions from Backlight Off to Backlight On You will make five transitions one transition for each pushbutton object Each time that a pushbutton is pressed in the backlight will go on To define the transitions 1 In the Mode Tree right click Backlight Off and choose Make Transition In the Make Transition dialog box From Off and To On are correct 2 Make the first transition select Object End_Power_Key Event in and click Accept 60 TUTORIAL 2 EXPANDING THE BASIC APPLICATION Make the second transition select Object Send_Key Event in and click Accept Make the third transition select Object Left_Soft_Key Event in and click Accept Make the fourth transition select Object Right_Soft_Key Event in and click Accept Make the fifth transition select Object Numeric_Keys Event in and click Accept then click _ Close Defining the Transition from Backlight On to Backlight Off You
112. selected color white Click the Line Shading and Fill color boxes to make them white 3 Select the Transparent check box and click __ 0k ___ The transparent pushbutton object looks like the one in this illustration 4 Double click this object to open the Parameter Pane Name the object End_Power_Key and click Accept then click _ Close NOTE Graphic objects such as pushbuttons that are used in transitions do not need to be attached to the mode tree Making the Transition from Off Mode to Powering_On Mode Transitions can be made from the Object Layout Mode Tree or State Chart An efficient way to make a transition is to i select the mode that is the source of the transition in the Mode Tree then ii select the object that will trigger the transition in the Object Layout To make the transition 1 In the Mode Tree select Off 2 In the Object Layout select End_Power_Key if not already selected right click and choose Make Transition the Make Transition dialog box opens The mode tharis Hake Transition tor End_Power Key currently selected in the Mode Tree From or Rapid automatically selects the sibling after the selected mode to To Fowering_On The object that is be the destination for currently selected in the transition the Object Layout Object End Power Key A list of the selected object s events STAGE 5 DEFINING TRANSITIONS a 31 In the Event box clic
113. significant However when several charts are being exported the process takes longer and the Clipboard will be unavailable in other Windows programs until the Export operation is completed The screen transition charts should look similar to the illustrations on the following pages 81 82 TUTORIAL 2 EXPANDING THE BASIC APPLICATION Screen Transition Chart for Call_Control State The following chart shows all the screens for Call_Control s children The dashed arrow that points to Send_Call indicates that there is a transition from Third_Number a state outside of Call_Control The dashed arrow exiting End_Call indicates that there is a transition to Idle a state outside of Call Control Call_Control Send_Call Receive_Call Third_Number Calling Incoming Call 456 Five_Sec_Tmr tick inl End_Call End_Power_Key in Five_Sec_Tmr tick Idle gt gt Total Time 00 03 76 00 00 43 STAGE 5 DEFINING THE FUNCTIONALITY FOR CALL_ CONTROL Third Number 83 Screen Transition Charts for Call Control s Child States Call_Control s children do not have children therefore single state screen transition charts are produced for each of them In each illustration notice that there are images for the transition triggers graphic objects exiting the states but not entering the states The entry and exit states are currently displayed as simple rectangles but they can
114. ss are presented in the following table When their windows are closed you can open them from the Rapid window using the toolbar buttons shown below BUTTON TOOL PURPOSE E Mode Tree UNTITLED The Mode Tree tool is used Eg Heg Edr lee Kieg np for organizing a system s EE Ci aed a Re states and determining each ri state s appearance Fe State Chart UNTITLED The State Chart tool oe Ele Logic view Took Help graphically presents a Ctrl Shift C Ole ta BG system s states and the transitions among states EJ Object Layout UNTITLED The Object Layout tool is ied File Edit Layout Group Objects Options He used to add the objects and Gain Ci a 2 images that appear in the a ja application and in the transition charts Another tool the Prototyper will be used at the end of the tutorial to run and test the application RECOMMENDATION Don t close any of the tool windows or move them from their default positions while performing this tutorial TUTORIAL 17 BUILDING A BASIC XPRESS APPLICATION STAGE 1 DEFINING THE SYSTEM S STATES USING MODES To begin developing a RapidPLUS Xpress application for a system you must first consider the system s functionality In RapidPLUS Xpress a system s functionality is defined in terms of modes Modes are the distinct units of functionality that describe the system s behavior For example a cell phone can be on or off therefore On and O
115. sses the battery empties and eventually gets low You will use a timer object to cause the battery to empty Defining the Transition from Normal Mode to Low Mode You will define this transition using a timer object To add the timer 1 In the Object Layout click the Time class button in the left column of the Object Palette and the Timer object in the right column 2 In the dialog box name the object One Min Tmr then click More 3 In the second dialog box change the initial value from 10 sec to 1 min 4 Click twice to close both dialog boxes Tips on naming objects used in transitions Look at the suggested name for the new timer object One_Min_Tmr It could have been One_Minute_Timer Battery_Timer or even just Timer2 Here are points to keep in mind when you name transition objects Transition object names appear in transition charts together with their events For example One_Min_Tmr tick The longer the name the more space it takes in the chart which can lead to collisions with other transitions Therefore you should keep names as short as possible Transition names should be descriptive Timer2 is okay but when an application has numerous timers it is hard to remember their attributes Battery_Timer is also a descriptive name but it doesn t mention the time setting If the time setting appears in the object s name it is easier to reuse the object Why not 1 min timer Numbers cannot
116. t how the product s screens will look in that state A typical state in a screen transition chart that has attached graphic objects The attached objects are a bitmap for the e SIM logo two label objects for the time display and Menu option and a transparent frame object that shows part of the cell phone bitmap on which it was placed NOTE Both of the states shown above comprise several modes For example the frame object is attached to the root mode the e SIM logo is attached to the On mode and the labels are attached to the Idle mode For details about the mode structure see p 63 Objects can be attached from the Object Layout and Mode Tree tools using several Attach commands either from the menus or popup menus Attach commands are located in the following menus TOOL MENU COMMAND NAME Object Layout Edit Attach to Mode lt name of mode selected in Mode Tree gt Mode Tree Tree Attach lt name of object selected in Object Layout gt Attach Selected Objects Attach Object lt object class gt lt object name gt DEFINING STATES 91 A graphic object can be attached to more than one mode And it can be positioned in a different location in the Object Layout for each mode To attach a single graphic object 1 Zi 3 In the Object Layout select the object that will be attached In the Mode Tree select the mode to which the object will be attached and right click to open the popup menu C
117. t the Prototyper is available in the online Help file in the Working in the Prototyper topic Stage 6 Creating Screen Transition Charts A screen transition chart is a diagram that displays screen images representing states and transitions among states Screen transition charts are used to document product design concepts They are generated in RapidPLUS Xpress and exported to Microsoft Visio 2000 and higher The look of a screen transition chart is determined by two factors the graphic objects that are attached to the various modes that make up each state and the Chart design options that are defined in the State Chart tool A basic screen transition chart looks like this illustration A state comprising two modes with three attached graphic objects a frame a bitmap and a label Product1 On_Off_Button in On_Off_Button in Welcome For details about creating screen transition charts see Creating Screen Transition Charts on p 100 Information about the State Chart tool is available in the online Help file in the Working in the State Chart topic Transitions to and from each state with transition triggers WORKING IN RAPIDPLUS XPRESS 88 RAPIDPLUS XPRESS OBJECTS RapidPLUS Xpress provides a library of objects that are particularly useful for designing product prototypes Each object has its design and predefined logic The library of objects includes the following objects
118. te the copied value into its y position 5 Click Accept In the Mode Tree attach Clear_Label to Dial mode In the Object Layout notice that the logo time and menu option do not appear They are part of Idle mode and are not needed when a phone number is being dialed STAGE 4 DEFINING THE FUNCTIONALITY FOR READY MODE 67 Designing the Screens for Dialed Numbers In Dial mode you will simulate the dialing of numbers The actual numbers dialed are not important in the screen transition charts the appearance and placement of the dialed numbers are important In each child mode you will add another number to the display The numbers are displayed in label objects To add the first number label 1 In the Object Layout click the Label button in the right column of the Object Palette then place the crosshairs on the screen above the Clear label and click 2 In the Text box overtype Text with 4 3 Click Font to open the Font dialog box then change the font size to 14 and click ox___ Click again 4 In the Parameter Pane name the object First Num Label and click yd 5 Reposition the label object so that the number 4 appears over the r in Clear 4 Clear 6 Attach First _ Num_ Label to First Number mode To add the second number label 1 Select First_Num_Label on the layout frame then copy and paste it 2 In the Paste Conflicts dialog box click Keep bot
119. the prototype and test its behavior If you are not satisfied with the result you can easily repeat these steps until you are satisfied At any point in the development of your prototype you can distribute the result of your efforts throughout your organization You can distribute the prototype via the Internet or a file You can distribute clear graphic screen transition charts that capture your design ideas in a printable format These screen transition charts are generated in RapidPLUS Xpress and exported to Microsoft Visio 2000 or above RapidPLUS Xpress is the way to realize your design ideas quickly and ensure that everyone involved in the development of the product understands your design This chapter presents e An introduction to the RapidPLUS Xpress tools e How an application s states appear when they are generated to screen transition charts and exported to Microsoft Visio e How RapidPLUS Xpress prototypes are used as guidelines for RapidPLUS applications THE RAPIDPLUS XPRESS TOOLS THE RAPIDPLUS XPRESS TOOLS The library of objects that are easily accessible from an object palette A RapidPLUS Xpress application is a virtual prototype It presents a product s user interface and the functionality of each of the prototype s states RapidPLUS Xpress comprises several tools each of which is used to develop a different aspect of the application Together they produce an application made up of user
120. ton object will appear on top of the End Power key on the cell phone bitmap and will be made transparent so that the bitmap s End Power key shows through the pushbutton object To add the pushbutton 1 Click in the Object Layout to make it the active window 2 In the Object Palette use the scroll bar in the left column Click the ____ scroll bar vr aw E to scroll down to the Pushbutton class button and click it In the right column the top pushbutton object Flat Pushbutton is selected This is the object that you will use 3 Place the crosshairs at the upper left corner of the End Power key and drag until the entire key is enclosed When you release the mouse button the pushbutton will hide the key The added pushbutton object To make the pushbutton transparent 1 Choose Edit Colors to open the Colors Edit dialog box Notice that the colors selected in the Line Shading Fill and Background boxes are all different Then notice that there is only one color box next to the Transparent check box Line Ea Background shading Indication Cancel Fill o m Transparent o eoe e i a Color palette E E PT HW Colors E Selected Objects Help Hew Objects Colors Edit Color palette TUTORIAL 1 BUILDING A BASIC XPRESS APPLICATION 2 You must make the color elements the same color so they will be trans parent Next to the Color palette is a box that displays the
121. ushbutton1 in Graphic representation of the object that triggers a transition may also appear in the chart depending on settings made in the State Chart tool Transitions are made in the Object Layout Mode Tree and State Chart tools The transitions are important because they cause the application to change states They determine how the prototype functions For example a transition from an Off state to an On state can be caused by pressing a button or operating a switch To create a screen transition chart RapidPLUS Xpress takes a state chart created in the State Chart tool generates it into a screen transition chart and exports it to Microsoft Visio 2000 and higher In Visio the screen transition chart can be manipulated using the e SIM supplied Visio stencil esimstd vss The appearance of the screen transition charts can be enhanced by attaching graphics to the modes and using options in the State Chart tool The illustrations on the next page show two charts in Visio one basic and the other enhanced FROM APPLICATION TO SCREEN TRANSITION CHART Example of a basic screen transition chart Modes TimeAMPM Alarm Mode_Pb in A Mode_Pb in Made_Pb in y StopWatch Timer Mode_Pb in Example of an enhanced screen transition chart TimeAMPM Modes INTRODUCING RAPIDPLUS XPRESS TimeAMPM Alarm M
122. uttons in When a step instructs you to click a toolbar button or object button in the Object Palette a picture of the button appears to the left of the step as shown here If the toolbar button has a shortcut key the shortcut key is presented below the picture Ctrl A Tips Information about designing and building RapidPLUS Xpress applications separate from procedures appears between double lines This manual was written with the assumption that you are familiar with Microsoft Windows conventions and with Microsoft Visio 2000 or higher Introducing RapidPLUS Xpress Welcome to RapidPLUS Xpress the tool that helps HMI Human Machine Interface designers product managers marketing managers and other people involved in product definition and design to quickly and easily create working interactive graphical models of their future products This ease of use includes outlining a product s functionality prototyping the product and generating screen transition charts from the prototype RapidPLUS Xpress lets you quickly realize your design concepts and ensure that your ideas look and behave as you envisioned them It also saves you a lot of paperwork because it can automatically create the screen transition charts that document your ideas With RapidPLUS Xpress you can modify and test your design at any stage of development Once your product design is finished the prototype will ensure that the people who wi
123. will define this transition using a timer object so that the backlight will go off after five seconds of inactivity To define the transition 1 In the Object Layout add a timer object Name it Five Sec Tmr and set its initial value to 5 sec Attach Five_Sec_Tmr to Backlight On mode LBACKLIGHT Off On Frame Five_Sec_Trnr Make the following transition From On To Off Object Five_Sec_Timer Event tick STAGE 3 DEFINING THE BACKLIGHT FUNCTIONALITY a Ctrl Shift T Testing the Application in the Prototyper Now that you have added the backlight functionality test it before you build the screen transition chart To run the application 1 Open the Prototyper and click the Start button 2 Power on the cell phone Notice that the screen s default color is displayed 3 Click any of the keys on the cell phone The screen s color immediately changes to the lighter backlight color After five seconds the screen displays the default color 4 Click several keys to see how the backlight switches on and off Did you notice that the timer starts counting when the first key is pressed in and turns off after five seconds even though you pressed more keys This functionality is fine for the screen transition charts however if you want the timer to restart each time you press a numeric key you can add a transition from On mode to itself that is triggered each time a numeric key is pressed 5
124. y Menu Functions Ladd Entry dd_ Name Add Nurnber Save_Entry SYSTEM BATTERY Normal Low Show Battery Hide Battery BACKLIGHT Ort On Before you build the second tree you must understand the difference between exclusive and concurrent mode types As you learned in Tutorial 1 exclusive modes are used for sibling modes that cannot be active simultaneously For example when the cell phone is on it can t be off and so on Sometimes there are sibling modes that can run simultaneously because they are functionally independent of each other For example the battery is being used while the cell phone is being operated the backlight lights up when a key is pressed These types are called concurrent modes You determine the type when you add modes to the tree STAGE 1 DEFINING THE SYSTEM S MODES Ctrl W 43 Adding Modes to the Tree You will add modes logically working down through the generations Adding Modes to On On mode will have two concurrent child modes Operate and System Operate comprises all modes that require user input System comprises modes that occur automatically To add modes to On 1 In the Mode Tree select On in the tree 2 Choose Tree New Mode or click the New Mode button to open the New Mode dialog box 3 In the Name box type OPERATE We suggest using all caps for concurrent modes to differentiate them from exclusive modes 4 Select the Concurrent mode type then click

RapidPLUS Xpress User Manual

Contents

Download Pdf Manuals

Related Search

Related Contents