LiquidApps User s Guide

Transcription

1 LiquidApps User s Guide Version 7.2 Harmonia Holdings Group, LLC LiquidApps, Inc Kraft Drive Suite 1000 Blacksburg VA 24060

2 Legal Notices Disclaimer All information in this document is accurate at the time of its release, but is subject to change without notice. Trademarks LiquidApps is a registered trademark of Harmonia Holdings Group, LLC and LiquidApps, Inc. Copyright Copyright 2014 Harmonia Holdings Group, LLC. All rights reserved. Confidentiality This document contains proprietary information that is privileged. This information is intended only for the use of the organization or individuals receiving it. The information shall not be duplicated, published or disclosed for any other purpose, in whole or in part without the written permission of Harmonia Holdings Group, LLC / LiquidApps, Inc. Revision History LiquidApps Document version 7.2.0_1 September 2014

3 Table of Contents 1. What is LiquidApps? LiquidApps Server Guide Overview System Requirements Languages Supported Customer Support Installing LiquidApps Starting LiquidApps and Getting a License Online Help Projects, Platforms and Structure Creating Projects in LiquidApps Create a New Project Importing and Exporting Projects Screen Layout Task Models Creating a Task Model User Interface (UI) Design Creating a User Interface Inside the Design Workspace UI Design Widget Palette Linking Tasks and UI Widgets Requirements Gathering Creating a Requirements List Assign Requirements to a Task Validation of Requirements Transform Additional Help Appendix A. Setting up Android Native Renderer Appendix B. Setting up Motif Renderer Server (MRS) B.1. Installing Motif Render Server (MRS) B.2. Using MRS with LiquidApps Appendix C. Setting up Ext JS Renderer Copyright 2014 Harmonia Holdings Group, LLC i

4 1. What is LiquidApps? LiquidApps is a comprehensive Software Lifecycle Management (SLM) tool suite. Featuring an easy-touse design tool, and direct integration with developer workflow, LiquidApps brings Human-Computer Interface (HCI) Designers, Stakeholders, and Developers together. A few of LiquidApps innovative features: Iterative design of HCIs for Human Factors testing no longer requires Developers. LiquidApps generates source code for Developers instead of static images produced by traditional HCI design tools. In addition, Logic Scripts can further clarify the designer s intent for the flow of logic and data through the application. LiquidApps works like a freeform design tool, but exposes the capabilities and limitations of the technology platform selected for the project. Enforces a consistent look and feel across interfaces through the application of Style Sheets. Automatic Transformation of user interfaces from one design platform to another. Generation of user interface documentation / training material through Scenarios showing the steps in an interface to accomplish a specific task. LiquidApps covers the software development process from start to finish with special attention to task modeling, requirements gathering, iterative HCI design, logic design, testing, training, and artifact generation LiquidApps Server If you install the LiquidApps Server, an easy-to-use web interface adds more functionality: Administration tools to allow Stakeholders to stay informed of HCI Designs as they are created, and contribute requirements throughout the design process. Collaboration tools that make it easy for teams to design and build HCIs together. Server-side code generation using LiquidApps Connect module. This allows a web-interface user to generate code without the need to install LiquidApps client. The web interface also has a 1- click way to generate a runnable JAR file, to preview UIs. More information about using the LiquidApps Server web interface is available in the online help. Please contact Harmonia if you are interested in purchasing LiquidApps Server. See Customer Support, page Guide Overview This User s Guide will help you get started with LiquidApps, and show you how to set up simple projects. It covers: Installing the program and using it for the first time An overview of the program work environment and basic program concepts Basic user interface construction using views, editors, and widgets Online Help Many additional topics, including Style Sheets, Logic Scripts, Simulator, Scenarios, and using the Server web interface are included in the online Help within LiquidApps. Copyright 2014 Harmonia Holdings Group, LLC 1

5 1.3. System Requirements Installation of LiquidApps client software requires the following system configuration: System Component Table 1: Minimum Desktop System Requirements Requirement Operating System Windows XP or Windows 7 Processor RAM Hard Drive Space Java Needs For automatically compiled.jar files 2 GHz multi-core processor 1 Gb 500 Mb Java 7; this can be downloaded from (Click the big red Free Java Download button.) Note: When installing LiquidApps, a pop-up window appears if you do not have the necessary Java components. JDK version 7 or higher ( Apache Ant 1.8 or higher ( Languages Supported LiquidApps can generate code for: Java ( Java for NetBeans Eclipse RAP/RWT ( Android ( C/Motif Ext JS ( Customer Support For help installing and using LiquidApps, please contact our Customer Support group at: Harmonia Holdings Group, LLC / LiquidApps, Inc Kraft Drive, Suite 1000, Blacksburg, VA (540) ; liquidapps@harmonia.com Copyright 2014 Harmonia Holdings Group, LLC 2

6 2. Installing LiquidApps Follow these instructions to install the LiquidApps client interface on your desktop. 1. Run the installer executable file (LiquidApps-<version>-Setup.exe). LiquidApps 7.2 User s Guide CD: If you received LiquidApps on a CD, insert the disk into your computer s CD drive. The installer starts automatically, and follows the steps shown below. If the installer does not start automatically, click Start Run in your Windows taskbar and type or browse to D:\LiquidApps-<version>-Setup.exe. Click OK or select the file and the setup wizard will load. Download: If you downloaded LiquidApps, a setup icon named LiquidApps-<version>- Setup.exe will appear on your desktop. Double-click this icon to start the setup wizard. 2. If LiquidApps is already installed, the first installer screen asks if you want to un-install LiquidApps. Select Yes, and the uninstaller leads you through the uninstall procedure. When the uninstaller finishes, Setup begins automatically. 3. Follow the instructions on the remaining screens to close other applications, accept the license agreement, and specify an installation location. 4. A desktop shortcut icon is installed by default, de-select if you don t want it (LiquidApps will still be available on the Start menu). Click Finish. 3. Starting LiquidApps and Getting a License Once the program is installed, start it from the desktop shortcut or from the Start menu. The first time you open LiquidApps, it asks for a license file. If you do not already have one, it guides you through the process of requesting the license. You need only obtain a license once. Every time you start LiquidApps, it prompts for a workspace. This is a directory (which initially should be empty) that will store your projects. You can have multiple projects in a workspace, and you may also have multiple workspaces, though only one workspace can be open at a time. Once you ve defined the workspace, LiquidApps remembers it. The next time you open the application, your workspace appears as the default selection. Copyright 2014 Harmonia Holdings Group, LLC 3

7 After setting your workspace directory, click OK. Then set your configuration to use the local server (use remote server only if LiquidApps Server is installed). This configuration needs to be done only once; each time you open LiquidApps after this, using this workspace, the configuration is remembered. Local: (default option) Use this for a private (not shared) workspace. If your LiquidApps installation is just the standalone desktop app, this is the only valid option. Remote: This option is valid only if LiquidApps Server has been installed. Contact Harmonia for more information about LiquidApps Server. Click OK again, and LiquidApps asks for your license file. The license also needs to be specified only once; it is remembered in subsequent sessions. Click Request a License from Harmonia if you do not already have one; otherwise follow the prompts to install the license file you have. Copyright 2014 Harmonia Holdings Group, LLC 4

8 If you are requesting a license, you will see another dialog box like this: Select the text in the box, and paste it into an . Send to support@harmonia.com; we will return a license file to you by . Once you receive it, put the file somewhere on your local machine. If you still have the License Management dialog box open, click Next. If you had closed the dialog box while waiting for a license file, just restart LiquidApps and you ll get the same series of dialogs. In either case choose Install a License from a File and browse to its location. Once you have successfully specified a valid license, LiquidApps opens your empty workspace. The parts of the screen are described in Screen Layout on page 8. NOTE: if you will be designing UIs for Android or Motif platforms, this is a good time to complete the installation of the correct renderer, so you will be able to see your designs in LiquidApps. Instructions are in Appendix A (Android) and Appendix B (Motif). 4. Online Help Throughout the application, look for the question mark ( ) buttons. On the ribbon it is in the upper right corner (circled in the figure below), and opens the full help system. Dialog boxes have a similar icon in the lower left corner. The Help screens included in the application are more detailed than this document. In addition, you can press F1 at any point to open a Help pane with information about the currently selected item or view. Copyright 2014 Harmonia Holdings Group, LLC 5

9 5. Projects, Platforms and Structure LiquidApps 7.2 User s Guide Projects are the base design unit within LiquidApps. A project contains user interfaces, task models, resources, requirements, style sheets, scripts (Swing only, at this time) and scenarios. When you start a project, you will select which Platform you are building it for: Swing, RWT, Android, or Motif. LiquidApps presents platform-specific options for creating UIs. Later you can add other platforms to the existing project (see Transform in Help) so you can generate source code for multiple platforms. Project Organization Platform-Specific Components: Notice that the project at right (Managing Lists) has two platforms: Android and Swing. Nested under the platforms, you ll find the Active Styles (styles applied to this platform), Scenarios, and User Interfaces (plus scripts for Swing). General Components: Requirements, Resources, Style Sheets, and Task Models belong to the project as a whole; they are shared by all platforms. This means, for example, that a requirement can be assigned to both a Swing UI widget AND an Android UI widget, indicating how each UI meets the requirement. LiquidApps is modular; the order in which you create components in your project does not matter. You do not have to create all the pieces discussed in this document. If all you want are UIs and requirements, then just create those pieces (or any pieces you choose) Creating Projects in LiquidApps Create a New Project 1. Select Add > Project: 2. The Create LiquidApps Project dialog box opens. The project is given the default name Project 1. Type over the default name to give your project a more meaningful name. Copyright 2014 Harmonia Holdings Group, LLC 6

10 3. Click Next. Choose the platform for which you are building your user interface. The selection of a platform is important because it is the technology that will be used to create the final product. By choosing it before you begin designing, you can take advantage of the features specific to that platform as you work. Note: LiquidApps now supports native renderers for the Android and Motif platforms; additional setup is required. See Appendix A (Android) or Appendix B (Motif). Once you have created a user interface under one platform, use the Transform feature to convert the UI to another platform, preserving its links with task models and other elements. You can find more information about Transform in the online Help. 4. Click Finish. This step creates a folder with the project name in the workspace directory. LiquidApps opens your new project Importing and Exporting Projects You can import projects created in LiquidApps by selecting Project (on the Home tab) > Import > Existing Project. In the Import Wizard, browse to find the project, then name the project. When you click Finish, the project is imported into your existing workspace. Exporting a project is just as easy. Select Project > Export. You can choose to export only the project source code, the entire project as an archive file, or the requirements and scenarios reports. Copyright 2014 Harmonia Holdings Group, LLC 7

11 Please note that depending on how you ve sized the LiquidApps window, each category on the ribbon may be collapsed or expanded. For example, you might see Project with a drop down button (below, left) that opens a menu, or you might see the category expanded (below, right): 5.2. Screen Layout This figure shows the UI Design Editor, after a project has been created (please note that the New User Interface tab shown here opens after selecting Add > User Interface). There are five areas in the layout: Ribbon Navigator View Design Canvas Widget Palette (and Show/Hide icon, circled) Views Panel Further explanation of the interface components is in the table below. Copyright 2014 Harmonia Holdings Group, LLC 8

12 Item/Term Ribbon (1) Navigator View (2) Design Canvas (3) Palette (4) Description The ribbon in LiquidApps is similar to Microsoft Office 2007 option layouts. This replaces the traditional menu and toolbars, enabling users to easily see the actions available to them, neatly categorized. The LiquidApps ribbon is divided into three tabs: Home, Layout, and Workbench. The Home tab is the primary interface. On the Home tab (pictured above), you ll find tools for interacting with Files, the Clipboard, Diagrams, User Interfaces, Graphs, and Projects. The Navigator view, in the left panel of the window, provides a tree-structure layout and access to all the resources in a project, such as user interfaces, requirements, and task models. The canvas is your work area; it s the canvas for a User Interface; at other times you will see Task Models, Requirements or other components here. To design interfaces, you will create containers (such as dialog boxes or tabbed panes), and add components such as buttons, tables, or images, and then assign properties to these components. These containers and components are available in the palette which appears at the right. If the palette does not appear in a User Interface or Task Model canvas, look for the Show/Hide icon at the far right. Views (5) Connections View Inventory View Requirements View User Activity View (not in figure) This feature is used to show connections between various entities found in LiquidApps. This view show connections between user interface components, task model tasks, scenario steps, and requirements. Connections between these entities are easier to discover with this view. This view shows all the user interface objects in the projects in your workspace. This makes it easy to re-use components: just click and drag an existing item in inventory to another user interface screen. For example, common buttons such as OK, Cancel and Reset may be needed in multiple places. Use the requirements view to record wants and needs for selected objects in a user interface or task model. Requirements can be added or modified at any time during the design process. When added in this view, requirements are associated with specific objects in a user interface or task model. Use the full Requirements Editor to view all requirements, and create requirements that apply to the project as a whole. This feature is designed to be used with the LiquidApps Server, to monitor recent activity by other users on projects in your workspace. This is a convenient way to track who has done what, and in which projects. Copyright 2014 Harmonia Holdings Group, LLC 9

13 6. Task Models LiquidApps 7.2 User s Guide At its core, the purpose of the LiquidApps Task Model is to integrate the simplicity and agility of UML (Unified Modeling Language) diagrams with the construction of robust Human-Computer Interfaces. You can create a task model before designing a user interface; this provides the means to synchronize the conceptual model with the physical design of the interface. Ultimately this allows you to focus on the user experience before constructing an HCI. The resulting benefits are: fewer logic errors improved reusability a more streamlined development process traceability to usage requirements To create a Task Model, select Add > Task Model on the Home tab. The figure below shows the default view of the Task Model Editor. Your new Task Model is in the center canvas area; the palette (on the right) contains task model widgets. Copyright 2014 Harmonia Holdings Group, LLC 10

14 6.1. Creating a Task Model The design canvas is the central editing area of the Task Model. Widgets are placed in the canvas and arranged according to your design vision. The figure below shows a very basic Task Model design. In this example, we are using an automotive purchase as the basis for our design. We show a starting point (possibly the idea of a new car is necessary), the first step in that purchase process (researching possible cars to purchase), followed by negotiating with two dealers, and finally the actual purchase of the car. To add these components to the canvas, just select a widget from the palette and click in the canvas. Type the name or description for the widget. Use the Connection widget to drag lines, showing logic flow, from one widget to the next. See the online Help for a full list of the task model widgets and descriptions. Create a Scenario from a Task Model, showing each step a user would take to follow one path through the interface. The Scenario shows what tasks are associated with a step, and shows (if you have linked tasks to User Interface widgets, p. 14) the part of the interface involved. More information is available in online Help. Task Models may also be created by importing data exported from IMPRINT. You will find this option on the home ribbon; click Project > Import > IMPRINT Task Model, then specify the file to be imported. Copyright 2014 Harmonia Holdings Group, LLC 11

15 7. User Interface (UI) Design LiquidApps 7.2 User s Guide Designing in LiquidApps uses a simple, drag-and-drop methodology. By generating code from the designs, designers can quickly piece together intricate user interfaces without the prerequisite of having a developer background Creating a User Interface 1. In an open project, select Add > User Interface on the Home tab. 2. A blank tab appears in the design canvas area. If there was already an existing user interface, this action creates another tab. 3. Select a widget tool from the palette, and click in the canvas to add the new widget at the default size. You ll typically start with a container, and then add buttons, labels, and other widgets inside the container. 4. Right-click on the newly created screen s icon in the Navigator View to rename it (see figure at right) Inside the Design Workspace When placed in the design canvas and selected, widgets (containers and components) are drawn with some informational content on their borders (the heads-up display). These objects give you quick access to the most popular properties of the selected widget. For example, at left, a Button widget has been added to the canvas. In the heads-up display are some property editors: Text, Icon, Font, and so on. Property names become brighter as you move the mouse over them. Click a property name to open the editor for the property. The name of the widget as well as the location and size may be edited by simply clicking on the text that displays their current values at the top of the object. You may also drag to move and resize widgets. Copyright 2014 Harmonia Holdings Group, LLC 12

16 After modifying one or more properties, a reset button appears for each property setting if you want to go back to the defaults. Below, the Text ( Search ), Background (green), and Foreground (white) properties have been changed: See online help for information about Style Sheets style sheets allow you to set values for widget properties that are automatically applied to all UIs in your project UI Design Widget Palette Widgets are the building blocks for your interfaces. Available widgets are shown in the Palette and include Containers (Windows and Areas), and Components (buttons, check boxes, and labels). To begin building an interface, select and drag containers or components on the canvas. Most user interfaces will start with a container such as a Frame or a Dialog. To add widgets to the canvas: 1. Click the widget you wish to add. The mouse pointer changes appearance. 2. Click and drag a box on the canvas. When you let up on the mouse, the widget is created and its properties appear around it. You can then resize or move the widget around the canvas as you see fit. Alternate way to add widgets: just double click the widget in the palette. Then move and size the widget as needed. At right, we have a Frame (container widget) and a Label (with the text Lists added to it. A complete list of the widgets available for each platform is included in the online Help within LiquidApps. Copyright 2014 Harmonia Holdings Group, LLC 13

17 7.4. Linking Tasks and UI Widgets To better correlate task models and user interfaces, the tasks and their corresponding user interface widgets can be linked. Simply drag a task from Navigator pane to a widget as shown below (it works in reverse as well drag a widget to the underlying task). Click on any widget and view its current links to other components in the Connections view at the bottom of the screen. Tasks may also be linked to steps in Scenarios. The LiquidApps Scenario Editor provides a means of stepping through all the actions that are possible in a user interface. For more about Scenarios, see the online help. 8. Requirements Gathering The Requirements portion of LiquidApps is designed to assist users in creating documentation detailing the decisions made about the application before, during, and after the software development process. Users can create requirements for individual widget s functionality, or add an overview of items needed for design completion Creating a Requirements List Select Add > Requirement from the Home ribbon to open the Requirements Editor. Type the text of a requirement, and press Ctrl-Enter when done. It makes no difference what order the requirements are in, just enter them as you think of them. Click the green plus icon more requirements. in the Requirements Editor to add Copyright 2014 Harmonia Holdings Group, LLC 14

18 The Targets column will be populated later when you assign a requirement to a task or UI widget. Also see the Requirements View in online help this pane is available below the canvas in a task model or UI and provides another way to enter requirements. Requirements may also be imported from IBM DOORS XML files. This option is under Project > Import > DOORS XML. See the online Help for more information Assign Requirements to a Task The figure below shows a user assigning a requirement to an element in a Task Model diagram by dragging requirements from the Navigator to a task model element. (The same process works to add requirements to user interfaces, dragging the requirements to a UI component.) The requirements, appearing here in the Navigator view, were entered in the Requirements Editor. Requirements can be added to each individual widget and task, or to the design structure as a whole (not assigned to a specific component), such as instructions pertaining to the application design Validation of Requirements Simply assigning a requirement to a task or widget does not necessarily mean that the requirement is met in the design. LiquidApps Audit feature (Project > Audit) provides a place for you to manually mark, or check off, requirements as validated. Copyright 2014 Harmonia Holdings Group, LLC 15

19 Once validated, any change to the target of a requirement (the thing it is associated with) automatically flags the requirement as invalid thus alerting you to the fact that something has changed. In the snippet above from the Audit editor, the red flag indicates a requirement that has been invalidated, and needs to be re-verified. See Audit in online help for more information. 9. Transform In many cases, you ll find that you need an interface to work on more than one platform. LiquidApps Transform feature does the hard work for you, converting a UI you create in one platform to an equivalent UI on another platform. The Transform process adds the new platform to your project, and maintains any links to requirements and tasks in the new UI. Just select User Interface > Transform on the ribbon to start a wizard, select the UI(s) to be transformed and to which platform LiquidApps does the rest. 10. Additional Help Full descriptions of all LiquidApps features are in the Online Help system. Look for the green question mark button in the upper right corner of the main window. You can also access help in the application by pressing F1, or selecting Help on the Workbench ribbon. Copyright 2014 Harmonia Holdings Group, LLC 16

20 Appendix A. Setting up Android Native Renderer To use the Android Native Renderer -- so you can see your design changes on the Android device in real time -- first install the LiquidApps Android Native Renderer App on your device, and run it. Get the latest version of the app from: LiquidApps downloads page ( Google app store ( search for liquidapps) When the Android Renderer App is running, it will display an IP address that you need to complete the setup. If the device is not properly configured, Android UI designs will appear using the generic Wireframe renderer, and LiquidApps displays a message to that effect upon opening the UI editor. In LiquidApps, open the Preferences dialog box (you'll find Preferences on the Workbench ribbon). There are two changes you must make to properly set up your Android device. 1. Click Renderer Preferences, and make sure the Android App-Supported Renderer is selected (this is the default setting). 2. Expand Renderer Preferences, and select Android Native Renderer Settings. In the Address field, replace 'localhost' with the IP address displayed on the device. Port 4444 is the default port. On the Android device, disable sleep settings. If the device is in sleep mode, the renderer will be very slow. Also, you will not be able to rotate the device to see landscape view, however you can rotate the display in the LiquidApps UI Editor using the Orientation button. The LiquidApps website ( also contains instructions for setting up an Android Emulator if you choose not to use a physical device to view your design. You may experience some performance issues with the emulator; not all features will function correctly. Copyright 2014 Harmonia Holdings Group, LLC 17

21 Appendix B. Setting up Motif Renderer Server (MRS) LiquidApps communicates with a separate program called the Motif Render Server (MRS) to produce Motif UI images as you design a Motif UI. MRS is a Linux / Motif based application, so it must be run on a Linux machine. LiquidApps users can connect to the MRS remotely via the internet from a Windows or OS X system. To use the native Motif renderer, you must do two things: 1. Install and run the MRS (on the same machine on which LiquidApps is running, or one that is accessible during your LiquidApps session). The latest version of MRS and installation instructions are available on the LiquidApps website downloads page, 2. Tell LiquidApps how to connect to the MRS, in either Automatic or Manual mode (in Preferences) If LiquidApps does not find the Motif renderer, Motif designs will appear using the generic Wireframe renderer, and a message to that effect is displayed upon opening the UI editor. B.1. Installing Motif Render Server (MRS) The MRS is dependent on the open source libraries OpenMotif and Cairo 2D. First, ensure these libraries are installed on the Linux machine where MRS will run. As an example, for an Ubuntu Linux machine, you can install these libraries using Synaptic. Installing dependencies with Synaptic: 1. Start Synaptic from the menu: System / Administration / Synaptic Package Manager 2. Search for libcairo2 and mark it for installation. 3. Search for libmotif4 and mark it for installation.* 4. Press the Apply button to install the two libraries. 5. Close Synaptic. * You may also need libpng if it's not already present or included by Cairo. The MRS binary can be placed anywhere on the host. For multi-user access, /etc/opt/liquidapps_motifrenderserver might be a good location. Otherwise it can simply be placed somewhere in your home folder. After copying the MRS binary, make sure that it is marked as executable on the host machine by following these steps: 1. Right click on the MotifRenderServer file. 2. Select Properties. 3. Switch to the Permissions tab. 4. Ensure the box labeled Executable is checked. Copyright 2014 Harmonia Holdings Group, LLC 18

22 B.2. Using MRS with LiquidApps Automatic Mode This mode can be used ONLY if you are running LiquidApps on the same machine where you have installed MRS. LiquidApps will start and stop MRS for you once you tell LiquidApps where the MRS binary is on your system. To do this, perform the following steps: 1. Note the path where you installed MRS. For this example we ll assume /home/user1/motifrenderserver. 2. Start LiquidApps. 3. Switch to the Workbench tab in the ribbon bar. 4. Select Preferences. 5. On Renderer Preferences, make sure Motif Renderer is selected (this is the default setting). 6. Expand Renderer Preferences. 7. Select Motif Native Renderer Settings. 8. In the field labeled MotifRenderServer Command, enter the path to MRS, (e.g., /home/user1/motifrenderserver). You do not need to enter or change the address and port fields. 9. Click OK to save these settings. Now you can create a Motif User Interface and LiquidApps will automatically start MRS and stop it when you close LiquidApps. Manual Mode In this mode you will start and stop MRS yourself as needed, and simply tell LiquidApps how to connect to it. 1. From a console, start MRS. This will allow you to see output from MRS including the port number that it is listening on for incoming connections (from LiquidApps). You will need the port number that MRS is listening on to complete the setup. Output in the console will look similar to this: establishing server socket... server listening on port Waiting for client connection or 'shutdown' command from terminal. Copyright 2014 Harmonia Holdings Group, LLC 19

23 In this case the port number is Start LiquidApps (it can be running on the same or a different machine as MRS). 3. In LiquidApps, switch to the Workbench tab in the ribbon bar. 4. Select Preferences. 5. Expand Renderer Preferences. 6. Select Motif Native Renderer Settings. 7. Enter the IP address of the machine where MRS is running in the Address field. If it's the same machine as LiquidApps, enter localhost. 8. Enter the port number that MRS is listening on for connections in the Port field. In this example we noted the port number was Make sure the MotifRenderServer Command field is empty. 10. Click OK to save these settings. LiquidApps will attempt to contact the MotifRenderServer and will report whether the settings you entered are correct. You can now create a Motif User Interface and LiquidApps will connect to the MRS instance you specified. When you are finished using MRS, stop it cleanly by entering shutdown in the console where you started it. While it s possible to simply kill the server process, this may leave temporary resources (like image files) sitting in your /tmp folder. See the online help topic Motif Setup for additional features. Appendix C. Setting up the Ext JS Renderer LiquidApps uses Ext JS to produce live Ext JS UI images as the user designs an Ext JS UI in LiquidApps. LiquidApps requires Ext JS 4.2. If the software is not already installed, obtain the Ext JS software from In LiquidApps: 1. Click the Workbench tab in the LiquidApps ribbon bar. 2. Select the icon labeled Preferences to open the preferences dialog. 3. Expand Renderer Preferences and select Ext JS Native Renderer Settings in the menu. 4. Use the file browser to navigate to the location of the Ext JS file labeled ext-all.js. NOTE: Please avoid altering the location of this file within the Ext JS software file structure. 5. Click Apply; verify that the text Connection succeeded. Location appears to be valid. appears at the top of the window. Close the preferences window. You should now be able to render Ext JS designs using the native renderer. Copyright 2014 Harmonia Holdings Group, LLC 20

24 LiquidApps 7.1 Quick Start Guide Index add widgets, 13 administration, server, 1 Audit, 15 collaboration, 1 containers, 13 create project, 6 requirements list, 14 Task Model, 10 User Interface, 12 Customer Support, 2 design canvas, 9 A C D drag requirement from Navigator, 15 G generate code (Server), 1 generate code, supported languages, 2 generate source code (export), 7 Guide Overview, 1 help, 2, 5, 16 H I Import and Export Projects, 7 IMPRINT task model, import, 11 Installing LiquidApps, 3 Inventory view, 9 Languages Supported, 2 L license install, 5 request a, 4 Linking Tasks and UI Widgets, 14 LiquidApps Installing, 3 license, 3 Server, 1 starting, 3 System Requirements, 2 Task Model, 10 what is, 1 LiquidApps Server about, 1 configuring a remote server, 4 local server, 4 Navigator view, 9 palette Task Model, 9 user interface, 13 platform, convert to other, 7 platform, selecting, 7 Remote server, 4 request a license, 4 Requirements add to a Task, 15 create list, 14 export, 7 import, 15 N P R Copyright 2014 Harmonia Holdings Group, LLC 21

25 LiquidApps 7.1 Quick Start Guide validation / invalidation, 15 view, 9 reset widget property (UI), 13 ribbon bar, 8, 9 Scenarios, 14 export, 7 screen layout, 8 Starting LiquidApps, 3 Style Sheets, 13 System Requirements, 2 Task Model benefits, 10 link task to UI, 14 Transform, 7, 16 S T U uninstall procedure, 3 User Activity View, 9 User Interface design workspace, 12 User Interface (UI) Design, 12 validation of requirement, 15 widget name, 12 widget properties (UI), 12 widgets adding, 13 Task Model, 11 User Interface, 13 workspace configuration, 4 defining, 3 V W Copyright 2014 Harmonia Holdings Group, LLC 22