Last page update: November 23, 2011
Note
summary of the component requirements:
It is NOT a standard component, so you have to import the correct package in your instanceconfig.xml file (more information on the importation of a package in the <packages> section).
For the FrameIndex the package to be imported is the adm package. The syntax is:
<gnrcore:adm/>It is an active component. Its py_requires is:
py_requires='frameindex'
The FrameIndex allow to load the webpages in an iframe.
Let’s see an image of the FrameIndex GUI:
![]()
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.
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:
Let’s see the code to initiate a GnrCustomWebpage (you can find more information on the following two points in the GnrCustomWebPage page):
First of all, you have to write some introductory lines:
#!/usr/bin/env python # encoding: utf-8Then you have to instantiate a GnrCustomWebPage:
class GnrCustomWebPage(object):
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.
The last thing you must define is a method of the GnrCustomWebPage: the pageAuthTags() method:
def pageAuthTags(self, method=None, **kwargs): return 'user'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.
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:
- the menu plug-in (to add it type “iframemenu_plugin”)
- the batch monitor (to add it type “batch_monitor”)
- the chat plug-in (to add it type “chat_plugin”)
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:
![]()
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
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>
Let’s see an image of the FrameIndex:
![]()
The FrameIndex GUI is composed by:
- a top bar
- a left pane
- a central pane
- a bottom bar
![]()
The top bar contains (in order from left to right):
navigation buttons (point 1) - they are (from left to right):
- show/hide button: show/hide the left pane
- menu button: open the menu plug-in
- batch button: open the batch monitor
- chat button: open the chat plug-in
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
The left pane includes an iframe with the following frames:
- the menu plug-in
- the batch monitor
- the chat plug-in
![]()
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)
![]()
TODO