Changes

2,310 bytes added ,  02:00, 23 December 2017
Included sugar3, pango, gdk
Line 3: Line 3:     
There is another guide written from scratch that uses this one as reference. It was done porting GetBooks Activity [[Features/GTK3/Porting/GetBooks]]
 
There is another guide written from scratch that uses this one as reference. It was done porting GetBooks Activity [[Features/GTK3/Porting/GetBooks]]
 +
 +
If you would like to reference other examples of GTK3 port:
 +
* [https://github.com/sugarlabs/biorhythm/commit/c16de3b70cce2cc6f8af933e2b062c844a47c144/ Biorhythm]
    
==Preparation==
 
==Preparation==
Line 63: Line 66:  
to
 
to
 
  from gi.repository import Gtk
 
  from gi.repository import Gtk
 +
 +
Remember to import the gi module and specify the Gtk version as 3.0 as well.
 +
<pre>
 +
import gi
 +
gi.require_version('Gtk', '3.0')
 +
from gi.repository import Gtk
 +
</pre>
 +
 
Then you have to change each call that involves Gtk, for example creating a button will look now like this:
 
Then you have to change each call that involves Gtk, for example creating a button will look now like this:
 
  button = Gtk.Button()
 
  button = Gtk.Button()
Line 82: Line 93:  
</pre>
 
</pre>
   −
For porting your activity you do have to change your calls for accessing widgets and services in the new GTK3 sugar-toolkit as well. The new namespace is called sugar3, trying to reflect that GTK3 is the underlying technology. For example the import of the base activity class has to be changed from
+
For porting your activity you do have to change your calls for accessing widgets and services in the new GTK3 sugar-toolkit as well. The new namespace is called [https://developer.sugarlabs.org/sugar3/ sugar3], trying to reflect that GTK3 is the underlying technology. For example the import of the base activity class has to be changed from
 
  from sugar.activity import activity
 
  from sugar.activity import activity
 
to
 
to
Line 93: Line 104:     
Ok, let's do these changes now for your activity. Make sure you are in your master branch using the 'git branch' command (the master branch should have a '*' before it). Make your changes, commit them ('git commit -a') and push them to the remote repository ('git push origin master').
 
Ok, let's do these changes now for your activity. Make sure you are in your master branch using the 'git branch' command (the master branch should have a '*' before it). Make your changes, commit them ('git commit -a') and push them to the remote repository ('git push origin master').
 +
 +
====Simple example on creating a toolbar====
 +
One of Sugar's activity most unique user interface includes the toolbar. In order to reference the relevant modules and graphics, the sugar3 library has to be imported. These are the relevant ones that would enable us to create a simple toolbar containing the activity button and the stop button.
 +
<pre>
 +
from sugar3.activity import activity
 +
from sugar3.graphics.toolbarbox import ToolbarBox
 +
from sugar3.activity.widgets import ActivityToolbarButton
 +
from sugar3.activity.widgets import StopButton
 +
from sugar3.graphics.toolbarbox import ToolbarButton
 +
from sugar3.graphics import style
 +
</pre>
 +
 +
Since the ActivityToolbar() module has been deprecated, the toolbar can now be called using
 +
ToolbarBox()
 +
Then, from the ToolbarBox(), include the ActivityButton and StopButton. In order for the StopButton to be align to the right as per Sugar activity interface, a separator has to be included as well.
 +
 +
<pre>
 +
toolbar_box = ToolbarBox()
 +
 +
activity_button = ActivityToolbarButton(self)
 +
toolbar_box.toolbar.insert(activity_button, 0)
 +
activity_button.show()
 +
 +
separator = Gtk.SeparatorToolItem()
 +
separator.props.draw = False
 +
separator.set_expand(True)
 +
toolbar_box.toolbar.insert(separator, -1)
 +
separator.show()
 +
 +
stop_button = StopButton(self)
 +
toolbar_box.toolbar.insert(stop_button, -1)
 +
stop_button.show()
 +
self.set_toolbar_box(toolbar_box)
 +
toolbar_box.show()
 +
</pre>
    
===Tools===
 
===Tools===
Line 163: Line 209:  
<pre>box.add(widget)</pre>
 
<pre>box.add(widget)</pre>
   −
This is as far as you need to go for now. However, in GTK3, GtkVBox and GtkHBox have been deprecated, which means they might be removed in GTK4. The replacement is to use GtkBox directly, and you may wish to make this change now. e.g.:
+
This is as far as you need to go for now. However, in GTK3, GtkVBox and GtkHBox have been deprecated, which means they might be removed in GTK3. The replacement is to use GtkBox directly, and you may wish to make this change now. e.g.:
 
<pre>vbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)</pre>
 
<pre>vbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)</pre>
 
<pre>hbox = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL, homogeneous=True, spacing=8)</pre>
 
<pre>hbox = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL, homogeneous=True, spacing=8)</pre>
Line 187: Line 233:     
Additionally, PyGTK accepted these construction parameters as positional arguments. As explained above, they must now be converted to keyword arguments.
 
Additionally, PyGTK accepted these construction parameters as positional arguments. As explained above, they must now be converted to keyword arguments.
 +
 +
=== Gdk ===
 +
Previously, gdk was an attribute of the gtk module, which means that it can be called through gtk. For example, if we want to use color_parse():
 +
gtk.gdk.color_parse(color)
 +
However, what we have to do now is:
 +
from gi.repository import Gdk
 +
Then we can modify the code to the following:
 +
Gdk.color_parse(color)
 +
 +
=== Pango ===
 +
Following the release of Gtk3, we should not be importing pango like this:
 +
import pango
 +
In fact, we ca now import pango as an attribute within the gtk3 library:
 +
from gi.repository import Pango as pango
    
=== Other considerations ===
 
=== Other considerations ===
11

edits