Scrollbars in a XEO Viewer

When creating an XEO Viewer you’ll probably run into the “scrollbar issue”.  Not all container components (such as panel or section) add scrollbars when the content exceeds the available space. In order for you to assure that your content is visible you need to wrap your content using the Tab component, like the following:

<xvw:tabs>

   <xvw:tab label='Test'>

       <!-- Your content goes here  -->

    </xvw:tab>

</xvw:tabs>

Which produces the following result:

Tab with Label and Scrollbar

Tab with Label and Scrollbar

 

 

 

 

 

 

 

 

 

This will make the scrollbar appear if needed. If you set a label for the tab (as in the example with the “Test” label) it will be rendered as such. If you don’t set a label for the tab it will still render the space for that empty label which is not very pretty. In order to make that go away you can use the renderTabBar property of the parent xvw:tabs component to make that tab bar disappear (but still use a tab component), like in the following listing:

<xvw:tabs renderTabBar='false'>

   <xvw:tab>

       <!-- Your content goes here  -->

    </xvw:tab>

</xvw:tabs>

Which will produce the following result (with scrollbars as needed) :

Tab with No Label and Scrollbar

Tab with No Label and Scrollbar

 

 

 

 

 

 

 

 

 

Happy coding!

Developing with Google Chrome – Disable Cache

If you’re like me and do web developing you have to use Google Chrome one time or another to check the results (depends on everyone, I like Chrome’s developer tools, so I use it a lot).

One of the things that bothers most web developers is the browser’s cache (which is a very nice feature, but sometime it just hinders the development process as we don’t know if our change didn’t work out because it was wrong, or the browser didn’t update the html/css/javascript file).

So, to disable Google Chrome’s cache while developing, fire the Developer Tools (F12) and press the little “gear” icon on the right bottom of the screen (see picture bellow)

Google Chrome Settings

Google Chrome Settings

If you do that, the settings screen will appear and you should see the “Disable Cache” setting, check the box and happy coding (see picture bellow):

Disable Chrome Cache

Disable Chrome Cache

And that disables Google Chrome’s Cache. Hope this tip is as helpful to you as it was to me.

CreateView vs CreateChildView why do I lose my boObject reference?

When you are developing an application using XEO you’ll need to open specific views as a result of certain actions. In order for you to achieve that you need to create the view in memory and for that you have two choices:

XUIViewRoot viewRoot = getSessionContext().createChildView("viewers/path/to/viewer/Viewer.xvw");

or

XUIViewRoot viewRoot = getSessionContext().createView("viewers/path/to/viewer/Viewer.xvw");

The main difference between the two is regarding the current context. Creating a view with createView uses a new context and switches the context immediately upon invocation (meaning you loose access to anything that was available in the current context) . If you use the createChildView method you maintain the same context in the two views ( which is important if the two views share some relationship – hence the name create ” child ” view)

So if your two views have no relationship but you need information for the current context… Save them in variables before creating the view – or else. Most of the times createChildView is the correct usage, but if the two views are disconnected, use createView.

Happy coding!