Visual Designer – Tips and Tricks Agile Modernization with Profound.js Visual Designer – Tips and Tricks Glenn Hopwood Product Developer Profound Logic

Short list of things we will cover… Agenda Short list of things we will cover… Designer Tips General Development Tips A few advanced tips Conclusion Questions & Answers

Demo Demo Jump directly into the demo.

Designer Tips – Using a Wildcard in the Open Dialog You can use a wildcard in the Open… dialog. Remember that you need to click on the icon after entering your wildcard string.

Designer Tips – Sizing/Spacing Multiple Elements After selecting multiple elements, you can control their sizing and spacing, relative to each other, using either a right-click or the options in the Design tab.

Designer Tips – Using the Elements Tab Controls the tab order Can also be used to find ‘hidden’ elements

Designer Tips – Properties Window 1 You can use the All/Set toggle of the Properties window to focus in on the properties that you would like to work with.

Designer Tips – Properties Window 2 Using the ‘Find Property’ control. Search for a specific property by typing it’s name. Search for a property group by using a leading ‘+’ character.

Designer Tips – Properties Window 3 When you select multiple elements, the properties window will show the items that are shared by the selected elements. This will allow you to modify the properties of all of the elements.

General Development Tips - Preview Option 1 Using the ‘Launch Preview…’ option in the Designer allows you to test the look and feel of your screen.

General Development Tips - Preview Option 2 Using the Preview option and your browser’s development tools will allow you to see the behavior of some elements.

General Development Tips - Hidden Data 1 There are many reasons why you might need to put hidden data on the screen. The simplest way is to change the visibility property of the element to ‘hidden’. While this is the simplest way, you might end up with multiple hidden elements which will clutter your canvas.

General Development Tips - Hidden Data 2 Another way to hide data is to set the top and left positions of the element to negative values. This will move the elements off the canvas but will still allow you to access them via the Elements tab.

General Development Tips - Hidden Data 3 If the data you want to hide is related to another element on the screen you could also put it in the ‘user defined data’ property of the base element. It is also possible to add more than one ‘user defined data’ property. Note that these properties are output only.

General Development Tips - Local JavaScript Function There are times when you might want/need to include a JavaScript function in your Rich Display file. You can do this by loading it into the global scope. Note that you will probably want to remove it when your screen ends.

General Development Tips - DB-Driven Elements If you understand how our DB-Driven elements work, you can create powerful solutions. See this post in our forums: http://www.profoundlogic.com/forum/viewtopic.php?f=53&t=2356

General Development Tips - Custom Derived Widgets While our framework allows you to create your own look and feel by overriding styles via CSS, you can also create derived widgets that will already contain not only your CSS classes but also property settings that you have decided on. The widgets you create will be in the Widget Toolbox in the “Custom Widgets” group. See the below doc page for more information. http://www.profoundlogic.com/docs/display/PUI/Custom+Widget+Development

In Conclusion Our patented Visual Designer was created to allow you to quickly create professional looking browser interfaces. In doing that, we have spent (and continue to spend) quite a bit of effort on trying to make our Visual Designer as intuitive and easy to use as possible. If you have ideas on how to improve your experience while using our tools, please feel free to share them.

Questions & Answers Web Site: www.profoundlogic.com Doc site: Contact us: sales@profoundlogic.com support@profoundlogic.com profoundlogic company/profound-logic-software @ProfoundLogic