4.4. FrameIndex

Last page update: November 23, 2011

Note

summary of the component requirements:

4.4.1. introduction

The FrameIndex allow to load the webpages in an iframe.

Let’s see an image of the FrameIndex GUI:

../../_images/fi35.png

The webpages will take place in the central pane. There are also other three parts (top bar, left pane and bottom bar) that allow to interact with the central pane.

So, the FrameIndex GUI can be divided in 4 parts. We remind the description of these parts to the FrameIndex GUI section. In the next section we start to learn about the creation of a FrameIndex page.

4.4.2. creation of a FrameIndex page

The FrameIndex component lives in a standard webpage. So, to use the FrameIndex you have to create a standard webpage and then you have to personalize it with the FrameIndex features. In this section we’ll guide you in the creation of a FrameIndex.

If you are creating a project, you have to write the FrameIndex page into your index page.

We remember you that in Genro the default name for the index file is (guess what?) index.py. However, you can change the default name using the homepage attribute of the <wsgi> tag of the siteconfig file.

To create a FrameIndex page you have to:

4.4.2.1. create a standard GnrCustomWebpage

Let’s see the code to initiate a GnrCustomWebpage (you can find more information on the following two points in the GnrCustomWebPage page):

  1. First of all, you have to write some introductory lines:

    #!/usr/bin/env python
    # encoding: utf-8
    
  2. Then you have to instantiate a GnrCustomWebPage:

    class GnrCustomWebPage(object):

4.4.2.2. inside the GnrCustomWebPage: the FrameIndex

  1. Now you may define inside the GnrCustomWebPage some webpage variables: they are python variables that allow to customize your component. Two of them are mandatory, in particular:

    • the py_requires, that allows to use the FrameIndex component:

      py_requires = 'frameindex'
      
    • the index_url, that allows to specify the url of your index page:

      index_url = 'a string with the url of the index page'
      

    For an example of the usage of the index_url, check the index_url example

    For the complete list of all the webpage elements, check the next section.

  2. The last thing you must define is a method of the GnrCustomWebPage: the pageAuthTags() method:

    def pageAuthTags(self, method=None, **kwargs):
        return 'user'
    
  3. You can optionally define the windowTitle() method:

    def windowTitle(self):
        return '!!Title of the window'
    

    If you don’t specify the windowTitle, the default is a string with the name of the page in which you define the FrameIndex.

4.4.3. FrameIndex webpage variables

With the term webpages variables we mean that there are some defined variables that you can use to customize your FrameIndex page. Let’s see all of them:

  • plugin_list: string. Allow to define what frames you want to see in the left pane. You can add:

    If you don’t specify anything, you will find all the three tools.

    The syntax is:

    plugin_list = 'iframemenu_plugin,batch_monitor,chat_plugin'
    

    To see only the menu plugin, write:

    plugin_list = 'iframemenu_plugin'
    

    The buttons that allow to pass from a

  • custom_plugin_list: allow to personalize the set of buttons of the top bar that manage the left pane. They are: iframemenu_plugin, batch_monitor, chat_plugin, menuToggle, refresh, delete. For a complete description of these buttons, check the top bar section

    Example:

    If you set the custom_plugin_list equal to:

    custom_plugin_list = 'refresh,delete'
    

    then the buttons relative to the the left pane will be the following ones:

    ../../_images/custom_plugin34.png

    where the yellow highlighted buttons are the default buttons of the plugin_list webpage variable, while the other two buttons (the ones with the red edge in the figure) are the “reload” and the “cancel” buttons (check the top bar section for more information)

  • index_url: string. Allow to specify the url of your index page. For more information check the index_url example

  • indexTab: by default it is set to False; you can write a string in place of False to allow to see your index page (defined through the index_url attribute) as a first button of the pages buttons in the top bar of the FrameIndex page

  • hideLeftPlugins: boolean. If True, allow to start a page with the left pane hidden. By default it is False

  • preferenceTags: TODO By default it is admin

4.4.4. examples

4.4.5. index_url example

Let’s see this code, that is an example of a complete FrameIndex page:

#!/usr/bin/env python
# encoding: utf-8

class GnrCustomWebPage(object):
    py_requires = 'frameindex'
    index_url = 'indexcontent.html'

    def windowTitle(self):
        return '!!Invoice'

    def pageAuthTags(self, method=None, **kwargs):
        return 'user'

In particular, we set:

index_url = 'indexcontent.html'

because we want to use an html page as index page. (you could use a Python page, too)

The indexcontent.html page must be placed into the resource folder of your package: we call this folder “public resource” folder.

The content of the indexcontent.html could be something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Invoice</title>
</head>
<body>
    <img src='images/money.jpg' alt='Invoice image'/>
</body>
</html>

4.4.6. FrameIndex GUI

Let’s see an image of the FrameIndex:

../../_images/fi35.png

The FrameIndex GUI is composed by:

4.4.6.1. top bar

../../_images/fi_top35.png

The top bar contains (in order from left to right):

  • navigation buttons (point 1) - they are (from left to right):

  • pages buttons (point 2): its a series of all the pages opened by the user. The current page is highlighted through a different color. In the image there are three opened pages (customers.py, products.py and invoices.py) and the current opened page is products.py

  • right buttons (point 3):

    • reload button: allow to reload the current page
    • close button: allow to close the current page

4.4.6.2. left pane

The left pane includes an iframe with the following frames:

4.4.6.4. batch monitor

This frame includes the list of all the batches in execution or executed

../../_images/fi_left_batch12.png

4.4.6.5. chat plug-in

This frame includes the GUI of the chat component

TODO “fi_left_chat.png”

4.4.6.6. central pane

The central pane is used to display the content of your webpages

4.4.6.7. bottom bar

../../_images/fi_bottom35.png

The bottom bar has got:

  • (point 1) A link that opens the user preference dialog; the link is represented by the name of the logged people or by the package name (in the image invoice is the package name)
  • (point 2) A link that allow the user to disconnect himself from the application (in the image the open door with the green arrow)

4.4.6.8. user preference

../../_images/userpreference12.png

TODO