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

2. 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

3. Demo
Demo
Jump directly into the demo.

4. 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.

5. 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.

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

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. 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.

15. 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.

16. 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:

17. 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.

18. 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.

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