How-To Tutorials - CMS and E-Commerce

Understanding the benefits of integrating Silverlight with SharePoint The following list shows many benefits of integrating Silverlight with SharePoint 2010: Rich UX: Silverlight RIAs can offer a rich user experience. You can take full advantage of the rich visual capabilities offered by Silverlight and include them in a SharePoint site. The rich and interactive content offers an incredible new world of possibilities in SharePoint. For example, you can offer an interactive balanced scorecard with animated graphs, rich navigation capabilities, and context menus. Code runs on the client: You can take advantage of the power of the client computers accessing the SharePoint server. You can use threading and asynchronous calls to offer responsive user interfaces and to take advantage of modern multi-core microprocessors found in client computers. You can offer great response times without the need to wait for the server to load another page. You can take advantage of rich controls, animations, and exciting multimedia effects. The processing removes load from the server and enables you to use both the server and the client in your solutions. Additionally, Silverlight 4 is cross-browser capable and we can take advantage of the improved Out of Browser features to create applications that interact with the SharePoint 2010 server but run in the Windows desktop, out of the web browser. Efficient applications: As you can work with the power offered by the client, you can process data without the need to make requests to the server all the time. This way, you can create load-balanced solutions. Access to the Client OM (Client Object Model): When you have to access data and services offered by the SharePoint 2010 server, you don't need to create your own complex infrastructure. There is no need to add additional layers. You can take advantage of the new Client Object Model, also known as Client OM. As you can work with asynchronous calls to the Client OM, you can still offer great responsive applications when consuming services from the server. Users can interact with SharePoint data without requiring server calls as they would from traditional pages. Lots of the processing can be pushed down to the client. This way, as previously explained, you can remove load from the SharePoint server and create load-balanced solutions. Leverage your existing Silverlight knowledge, components, and applications: You can build new capabilities quickly from existing Silverlight components and applications, integrating them with SharePoint 2010.   Creating a SharePoint solution   Now, when we design a new SharePoint 2010 solution, we will be able to consider Silverlight RIAs as new components for the global solution. We have to consider the aforementioned benefits of integrating Silverlight with SharePoint and decide which parts would be convenient to create as Silverlight RIAs. This way, we can focus on preparing the SharePoint 2010 infrastructure and then we can access data and services offered by the server through Silverlight RIAs. For example, you can view the images found in an assets library defined in SharePoint through a Silverlight application. Once you start integrating Silverlight with SharePoint, you will find a new exciting way of enhancing SharePoint solutions. Preparing the development environment We want to take full advantage of modern technologies. First of all, we must install the latest tools and begin working on configurations. Later, we will be able to use our existing knowledge to create different kinds of RIAs for SharePoint 2010, using Silverlight 4—the newest kid-on-the-block from Microsoft. Silverlight 4 is backward-compatible with its previous version, Silverlight 3. Therefore, when an example uses a feature found only in Silverlight 4, you will find a note explaining this situation. Most of the examples work for both Silverlight versions. However, we will also take advantage of some of the new features found in Silverlight 4. The only requirements underpinning the development and integration of RIAs into SharePoint 2010 sites are understanding the basics of the C# programming language, ASP.NET, XAML code, and the Visual Studio IDE. We will cover any other requirements in our journey through the creation of many different kinds of RIAs to run in a SharePoint 2010 site. First, we must download and install various Silverlight development tools. We need Visual C# 2010 Professional, Premium, or Ultimate installed, in order to successfully complete the installations explained in the following section. Visual C# 2010 allows us to choose the desired Silverlight version (for example, version 3 or version 4). The following part will show Visual Studio 2010 Ultimate screenshots. If you use other versions, some elements that appear in the screenshots could be different but the steps are all valid for the aforementioned versions. Setting up the development environment Follow these steps to prepare the development environment: Download the following files: Application's name Download link File name Description Silverlight 4 Tools for Visual Studio 2010 http://www.microsoft.com/downloads/details.aspx?FamilyID=eff8a0da-0a4d-48e8-8366-6ddf2ecad801&displaylang=en Silverlight4_Tools.exe We must install Silverlight 4 Tools in order to create Silverlight 4 applications in the Visual Studio 2010 IDE, using XAML and C#. It will co-exist with previous Silverlight SDKs (Software Development Kits). This new version of Silverlight Tools also includes the WCF RIA Services package. Silverlight 4 Offline Documentation (in CHM format) http://www.microsoft.com/downloads/details.aspx?familyid=B6127B9B-968C-46C2-8CB6-D228E017AD74&displaylang=en Silverlight_Documentation.EXE We must download and run this file to decompress its content because, because we will need access to Silverlight 4 official documentation in due course. Expression Blend for .NET 4 http://www.microsoft.com/downloads/details.aspx?FamilyID=88484825-1b3c-4e8c-8b14-b05d025e1541&displaylang=en Blend_Trial_en.exe This tool will enable us to create content that targets Silverlight 4 and to create rapid prototypes with the SketchFlow tool. Silverlight Toolkit (Updated for Silverlight 4 compatibility) http://codeplex.com/Silverlight Silverlight_4_Toolkit_April_2010.msi It is convenient to download the latest stable release. This toolkit provides a nice collection of Silverlight controls, components, and utilities made available outside the normal Silverlight release cycle. It will be really helpful to use these controls to provide even more attractive user interfaces. Besides, it includes more Silverlight themes. Run the installers in the same order in which they appear in the above table and follow the steps to complete the installation wizards. Once the installations have successfully finished, run Visual Studio 2010 or Visual Web Developer 2010 (or later). Select File | New | Project... or press Ctrl+Shift+N. Select Visual C# | Silverlight under Installed Templates in the New Project dialog box. You will see many Silverlight templates, including Silverlight Business Application and WCF RIA Services Class Library, as shown in the following screenshot: Discovering the rich controls offered by the Silverlight Toolkit Silverlight Toolkit is a Microsoft project offering many rich controls, components, and utilities that can help us to enhance our Silverlight UI (User Interface). As we want to create a very attractive UI for SharePoint, it is convenient to get familiar with its features. Follows these steps to see the controls in action and to change the values for many of their properties. Select Start | All Programs | Microsoft Silverlight 4 Toolkit April 2010 | Toolkit Samples and your default web browser will display a web page with a Silverlight application displaying a list of the controls organized in ten categories as follows: Controls Data DataForm Data Input DataVisualization Input Layout Navigation Theming Toolkit By default, the default.htm web page is located at C:Program Files (x86)Microsoft SDKsSilverlightv4.0ToolkitApr10Samples in 64-bit Windows versions. Click on a control name under the desired category and the right panel will display the control with different values assigned for its properties, creating diverse instances of the control. For example, the following screenshot shows many instances of the Rating control under the Input category. Click on the buttons shown at the bottom of the web page and you will be able to see both the XAML and the C# code used to create the sample for the control. For example, the following screenshot shows the XAML code for the DataGrid control example, DataGridSample.xaml. You can also click on DataGridSample.xaml.cs and check the C# part. This control appears under the Data category.

(For more resources on Plone, see here.) We can build our own theme add-on product from scratch. It can be done easily with PasteScript. Just type this on our command line from the root of our buildout: $ cd src$ paster create -t plone3_theme plonetheme.myintranet Answer all the questions with the default option except for: Skin Name: A human facing name for the theme, added to portal_skins, for example, MyIntranetTheme. Skin Base: Name of the theme from which this is copied. By default, it is Plone Default. Answer the default option here. Empty Styles?: If true, it will override default public stylesheets with empty ones. Answer False. Include documentation?: If true, the generated theme will include auto- explanatory documentation, desirable for beginners. The resultant theme add-on product will be generated in the src buildout folder. This add-on is completely usable right now, but it's innocuous. Once installed, it will replace the original Plone default theme with the one in this package. Installing the product Just proceed as any other add-on product. However, since we are developing the product, we should specify it in our buildout by filling the develop directive in the buildout section and the eggs directive in the instance section in our buildout.cfg file: [buildout]...develop = src/plonetheme.myintranet...[instance]...eggs = plonetheme.myintranet Go to the package folder, src/plonetheme.myintranet/plonetheme/myintranet, and edit the configure.zcml file. As we don't want to define an i18n folder, delete the following line if it exists: <i18n:registerTranslations directory="locales" /> And then, rerun buildout.cfg: $ ./bin/buildout$ ./bin/instance fg Now, go to the Add-on Products control panel configlet and install it. If we browse our site, we will notice that nothing has changed, because we've chosen to inherit the default theme in our new one. But, now the theme defined in our theme add-on product is in use in our site. Check it out in portal_skins: Notice three things in the previous screenshot: the Default skin is our recently created skin and three additional Plone skin layers have been added to the top of the layer's precedence order list. These three layers will contain the resources we may need for our new theme. These layers represent three folders inside our package structure; to be more precise, those inside skins folder: Name of the layer/folder Description plonetheme_myintranet_custom_images It will contain our theme images. plonetheme_myintranet_custom_templates It will contain our theme custom templates. plonetheme_myintranet_styles It will contain our theme styles. In fact, this layer organization is merely for convenience, as all the layers can contain any type of resources. Customizing Plone skin layer resources As our theme product is positioning the new layers on the top of the precedence order, the elements we place in these folders will override those in layers with less precedence. Just place our custom resource in any of the layers defined by our product and name it as the original one. Our custom resource will override the default one. We can also place other resources we may use, such as our custom templates, images, and styles as well. Enabling CSS debug mode By default, the changes made to our product will not be available until we restart our instance. For the changes to take effect immediately, we should enable CSS debug mode in CSS resource registry. We will find this setting at the top of the portal_css ZMI view. In debug/development mode, stylesheets are not merged to composites, and caching and compression of CSS is disabled. The registry also sends HTTP headers to prevent browsers from caching the stylesheets. It's recommended to enable this mode during CSS-related development. Remember to turn it off again when we finish CSS modifications, as debug mode affects site performance. Customizing the site logo Plone renders the site logo combining two kinds of resources—the viewlet plone. logo provides the HTML structure needed and a Plone skin layer image. Let's say we want to change the site logo and add an additional logo of our company containing a link to the corporate web besides it. We need to customize the original logo with the logo of our intranet and add the required HTML structure to add the new company logo besides the original one. We will need to customize the original logo and the plone.logo viewlet. Later, we will need to add our company logo as a new Plone skin layer image. Customizing the logo image and adding a new one We should override the original logo image with our customized one. In order to accomplish this, we should rename the image we've chosen to use as our site logo with the same name as the original one. The original logo image is called logo.jpg and it is located in the plone_images skin layer. We override it by simply placing our customized image inside skins/plonetheme_myintranet_custom_images and naming it exactly the same as the original one. Place the image for the second logo here too, and name it as company-logo.png. Customizing the plone.logo viewlet Customizing a viewlet is a little trickier than overriding skin layer resources. We will need to tell Zope that we want to override the original viewlet declaration by creating an overrides.zcml file in the plonetheme/myintranet folder of our custom add-on product, and add the attribute that tells Zope where to find the new template associated to this viewlet: <configure i18n_domain="plonetheme.myintranet"> <!-- The new logo viewlet declaration --> <browser:viewlet name="plone.logo" manager="plone.app.layout.viewlets.interfaces.IPortalHeader" class="plone.app.layout.viewlets.common.LogoViewlet" template="browser/newlogo.pt" permission="zope2.View" /></configure> Then place this Zope page template called newlogo.pt in the browser folder of our add-on product: <a id="portal-logo-company" tal_attributes="href string:http://www.mycompany.com/"> <img src="company-logo.png" alt="Company.com logo" title="Company.com logo"/></a><a metal:define-macro="portal_logo" id="portal-logo" accesskey="1" tal_attributes="href view/navigation_root_url" i18n_domain="plone"> <img src="logo.jpg" alt="" tal_replace="structure view/logo_tag" /></a> We leave the original logo template at the end of the file and add a new link tag with the structure for the new logo and the reference to the new Plone skin layer image (company-logo.png). Restart our instance to see the changes applied. This is needed because we have overridden a viewlet defining an additional ZCML file.

Download code from here More about securityFor a closer look at a variety of Plone-related security information, visit http://plone.org/products/plone/security/overview.For Erik Rose and Steve McMahon's excellent Plone Conference 2008 talk, visit http://plone.org/events/conferences/2008-washington-dc/agenda/securing-zope-and-plone-against-the-big-bad-internet/. Restricting TCP/IP access to localhost or LAN host One of the simplest things we can do to secure our system is to operate our Zope 2 instances only on the IP addresses that they are required to listen on. In most cases, it is 127.0.0.1 (or localhost, as it is commonly referred to) but it can also be a LAN host that is a private, non-routable IP address used only on your local area network (LAN). In this article, we will not cover LAN hosts. However, we suggest you consider using them when you need to access instances from another host on the LAN; otherwise, just use localhost. In the case of LAN hosts, once confgured, they will protect ports from being accessed by the outside world (that is Internet). However, it will allow them to be accessible from the LAN where you may want to confgure monitoring, for example via Munin , Zenoss (http://community.zenoss.org), and so on. What we will cover is how to use the localhost IP address. In 07-security-localhost.cfg, we have: [buildout]extends = 06-deployment-optimization-munin.cfg[instance1]http-address = 127.0.0.1:8081[instance2]http-address = 127.0.0.1:8082 You will notice we have re-configured the http-address parameter to include the entire HTTP address and not just the port number. You will also notice we have used the private, non-routable localhost address 127.0.0.1. Now run Buildout: $ bin/buildout -c 07-security-localhost.cfg Afterward, in parts/instance1/etc/zope.conf, you should see: ...<http-server> # valid keys are "address" and "force-connection-close" address 127.0.0.1:8081 # force-connection-close on # You can also use the WSGI interface between ZServer and ZPublisher: # use-wsgi on </http-server> This means that our instances will listen for connections only on 127.0.0.1; any attempt to connect from another host will fail. More about localhostFor more information about how the localhost really works, visit http://en.wikipedia.org/wiki/Localhost. For our purpose though, we can think of running the Plone site on localhost as "having a party that only your laptop or development workstation can join". Managing IP addresses and ports effectively As your production configuration grows, it may become more diffcult to manage a large number of IP addresses and ports. As such, it is often helpful to have them defned in their own part. In 07-security-ports.cfg, we have: [buildout]extends = 07-security-localhost.cfg[hosts]localhost = 127.0.0.1[ports]instance1 = 8081instance2 = 8082 Notice that we are not using these definitions for anything yet. But we can use them like this: ${hosts:localhost}:${ports:instance1}${hosts:localhost}:${ports:instance2} Effectively from now on, we have to change IP addresses and port numbers only in one place (assuming we change all static references such as 127.0.0.1:8080 to the new syntax). Configuring the Zope 2 effective user dynamically Another simple thing we can do to secure our system is to operate our Zope 2 instances with only those operating system users who have enough permission to execute the instances. In fact, Zope 2 will not run as root on UNIX-like systems. However, we frequently forget to do this. More importantly, sometimes we want to be more explicit with our configuration. This is where the effective-user parameter comes in handy. If no effective user is set, then Zope 2 will run as whoever executes the process. You could set the effective-user manually or you could use the gocept.recipe.env recipe (http://pypi.python.org/pypi/gocept.recipe.env) to set it. In the case of manual configuration, you may find it tedious to test your production configuration on systems that do not have the desired effective user (or you may not; this is mostly subjective). In the case of no configuration, you may find it annoying to be reminded that you cannot run Zope 2 as root when you get to production (or you may not; this is also subjective). In any event, we can formalize the configuration and automate the username selection process as follows. In 07-security-effective-user.cfg, we have: [buildout]extends = 07-security-ports.cfgparts += env[env]recipe = gocept.recipe.env[instance1]effective-user = ${env:USER}[instance2]effective-user = ${env:USER} Now run Buildout. $ bin/buildout -c 07-security-effective-user.cfg Afterward, in parts/instance1/etc/zope.conf you should see: ...effective-user aclark... This technique has several subtle, but important advantages over manual, or no configuration: The effective user is always set, so even if you try to start Zope 2 as root, it will run as the effective user The effective user is set to the user that runs the buildout, which means you can change the effective user easily The ${env:USER} variable can be used to configure user settings for additional services such as Pound, Varnish, and so on. Installing Cassandra to audit through the web (TTW) security If you ask anyone familiar with Plone about the permissions settings in the Security part of the Zope Management Interface, you are likely to get the following response: "DO NOT TOUCH!" That is because with so many possible permutations of settings, it is almost impossible to manage them all effectively by pointing and clicking. The next thing out of their mouth is likely to be: "USE WORKFLOW INSTEAD!" That is because Plone's workfow feature provides a much better way to effectively manage large amounts of permission changes. However, people do not always use workfow. They point and click away anyway, despite the warnings. You, however, have been warned. It is much better to manage permissions with workfow as compared to pointing and clicking on Permissions in the ZMI. Permissions and roles in the ZMI If you do not believe me, consider this. If you browse to http://localhost:8080/Plone and click on Site Setup | Zope Management Interface | Security, you will see almost two hundred permissions that look like the following (first ten): Next to each group of 10 permissions are checkboxes that correspond to the possiblerole assignments: Hopefully, enough has been said. The point again is two-fold: The ZMI opens the gateway to enormous complexity (categorically, not just with roles and permissions) In the case of roles and permissions, managing this complexity is best left to workfow (in which case, role-to-permission mappings are configured by the state) Roles and groups Similarly, the same Plone folks will often remind you to assign roles to groups and not users, and put users in groups to enable them to perform various tasks. They might say: "DO NOT ASSIGN ROLES TO INDIVIDUAL USERS!" This may be followed by: "ASSIGN THEM TO GROUPS INSTEAD!" Why? This is because to manage intricacies such as which user can perform which tasks and where, you are better off using the right tool for the job, that is adding users to groups with proper role assignments. Unfortunately, end users are still able to assign roles to individual users if they really want to via the Sharing tab or Local roles form in the ZMI. So, it is the site manager's responsibility to make sure they do not, to avoid having a site littered with individual role assignments.

Download code from here (Read more interesting articles on Plone here.) Examining themes in the Zope Management Interface Now that we have seen in part how themes work, let us take a closer look at their representation in Zope Object Database (ZODB). Browse to http://localhost:8080/Plone. Click on Site Setup Zope Management Interface| and you should see: This is a Through the Web (TTW) representation of all the objects in the database at the Plone site level (the application root is one level above). The most frequently used theme-related objects here are: portal_css portal_javascripts portal_skins portal_view_customizations Of these, portal_css and portal_javascripts are most often used to enable their respective debug modes, wherein the CSS and JavaScript files are not compiled into a single file (not to be confused with Zope 2's debug mode which detects filesystem changes in real time when enabled). Take a look at your site with Firebug, in particular the style tab. You should see: Now enable debug mode in portal_javascripts and look again. You should see: When portal_css debug mode is enabled, we can see (or by viewing the HTML source) that the CSS files are loaded individually in Firebug. The same applies to portal_javascripts debug mode. This can be absolutely invaluable when trying to correlate various visual elements with their respective sources. In addition to debug mode, you can also add CSS/JavaScript files to their respective registries through the Web, which brings us to the next topic.

Installing themes with Buildout For a lot of website projects, a theme downloaded from plone.org (http://plone.org/products) or the Python Package Index (http://pypi.python.org) is enough to launch a professional-looking site. If your project falls into this category, or if you just want to experiment, follow the steps in this chapter. Searching for themes on plone.org We will need to find a theme we like. We can do that by browsing to http://plone.org. Next, click on Downloads Add-on Product Releases | Themes|. You should see (result similar to): Click on a theme to view a screenshot and select one you like, for example beyondskins.ploneday.site2010, and add the package to your buildout.cfg file. Adding themes with Buildout In 03-appearance-wpd2010.cfg, we extend the last known working configuration file from Chapter 2, that is 02-site-basics-blog.cfg. It looks like this: [buildout]extends = 02-site-basics-blog.cfg[instance]eggs += beyondskins.ploneday.site2010zcml += beyondskins.ploneday.site2010 In addition to adding the package name to the eggs parameter, we must add it to the zcml parameter as well. Now stop Plone (with Ctrl + C or Ctrl +Z/Enter) and run: $ bin/buildout -c 03-appearance.cfgUpdating zope2.Updating fake eggsUpdating instance.Getting distribution for 'beyondskins.ploneday.site2010'.Got beyondskins.ploneday.site2010 1.0.3. Now start Plone: $ bin/instance fg Installing themes in Plone Browse to http://localhost:8080/Plone. Now, click on Site Setup Add/Remove Products| and you should see: Check the box next to WorldPloneDay: Theme for 2010 edition 1.0.3 and click on Install. Now browse to http://localhost:8080/Plone and you should see: This theme is the courtesy of Simples Consultoria (http://www.simplesconsultoria.com.br/). Thank you! You can examine the anonymous view (what everyone else sees) by loading http://127.0.0.1:8080/Plone in your browser (that is. by using the IP address instead of the hostname). You can also load either of these URLs (http://127.0.0.1:8080/Plone or http://localhost:8080/Plone) from another web browser (besides the one you are currently using) to see the anonymous view (for example, Safari or Internet Explorer, instead of Firefox). To display the blog entry to the public, we have transitioned the other objects in the site root to the private state. Examining themes with Omelette and Python Simply put, a theme is a collection of templates, images, CSS, JavaScript, and other files (such as Python scripts) that control the appearance of your site. Typically these files are packaged into a Python package, installed in your Plone site with the help of Buildout, and installed in Plone via the Add/Remove Products configlet in Site Setup. Once installed, certain elements of the theme can be edited through the Web using the ZMI. However, these changes only exist in the site's database. Currently there is no easy way to transfer changes made through the Web from the database to the filesystem; so there is a trade-off for performing such customizations through the Web. If you lose your database, you lose your customizations. Depending on your goals, it may not be entirely undesirable to store customizations in your database. But nowadays, most folks choose to separate their site's logical elements (for example themes, add-on functionality, and so on) from their site's content (that is data). Creating a filesystem theme and resisting the urge to customize it through the Web accomplishes this goal. Otherwise, if you are going to customize your theme through the Web, consider these changes volatile, and subject to loss.

(Read more interesting articles on Plone here.) Download code from here Creating a theme package with ZopeSkel Now that we have examined someone else's theme, let us try creating our own. Remember, we will not cover theme creation in depth; this is only a sample for site administrators (who may or may not be required to develop themes, in addition to managing their site). For more information about creating themes, Visit: http://plone.org/documentation/kb/how-to-create-a-plone-3-theme-product-on-thefilesystem. To create a theme, we will use the ZopeSkel tool (http://pypi.python.org/pypi/ZopeSkel) to generate some of the boilerplate code. ZopeSkel uses PasteScript (http://pypi.python.org/pypi/PasteScript) to facilitate package generation using a set of templates. Other options include: Write everything by hand from memory Copy the contents of another theme package Use another tool such as ArchGenXML to generate boilerplate code (http://plone.org/products/archgenxml) Adding ZopeSkel to a buildout Now let's add ZopeSkel to our buildout. In 03-appearance-zopeskel.cfg, we have this: [buildout] extends = 03-appearance-zopepy.cfg parts += zopeskel [zopeskel] recipe = zc.recipe.egg dependent-scripts = true We extend the previous working configuration file, and add a new section called zopeskel. This section uses the zc.recipe.egg recipe (http://pypi.python.org/pypi/zc.recipe.egg) to download ZopeSkel from the Python Package Index (zc.recipe.egg will search the Python Package Index for packages that match the section name zopeskel). We set dependent-scripts to true, to tell Buildout to generate Python scripts for ZopeSkel's dependencies such as PasteScript, which includes the paster script. Now stop Plone (with Ctrl + C or Ctrl + Z/Enter) and run Buildout: $ bin/buildout -c 03-appearance-zopeskel.cfg You should see: $ bin/buildout -c 03-appearance-zopeskel.cfg Uninstalling plonesite. Updating zope2. Updating fake eggs Updating instance. Installing plonesite. … Updating zopepy. Installing zopeskel. Getting distribution for 'zopeskel'. Got ZopeSkel 2.16. Getting distribution for 'Cheetah>1.0,<=2.2.1'. … Got Cheetah 2.2.1. Getting distribution for 'PasteScript'. Got PasteScript 1.7.3. Getting distribution for 'PasteDeploy'. … Got PasteDeploy 1.3.3. Getting distribution for 'Paste>=1.3'. … Got Paste 1.7.3.1. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ zopeskel'. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ paster'. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ easy_install'. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ easy_install-2.4'. You will notice that in addition to bin/zopeskel, Buildout also installed the "dependent scripts" bin/paster and bin/easy_install (the latter of which we do not really need in this case). Running ZopeSkel Now try running ZopeSkel with the command: $ bin/zopeskel You should see: Usage: zopeskel <template> <output-name> [var1=value] ... [varN=value] zopeskel --help Full help zopeskel --list List template verbosely, with details zopeskel --make-config-file Output .zopeskel prefs file ... This tells us we need to pick a template and output-name. ZopeSkel goes on to list the available templates. They are: archetype: A Plone project that uses Archetypes content types kss_plugin: A project for a KSS plugin plone: A project for Plone products plone2_theme: A theme for Plone 2.1 plone3_portlet: A Plone 3 portlet plone_app: A project for Plone products with a nested namespace plone_pas: A project for a Plone PAS plugin plone2.5_theme: A theme for Plone 2.5 plone3_theme: A theme for Plone 3 plone2.5_buildout: A buildout for Plone 2.5 projects plone3_buildout: A buildout for Plone 3 installation plone_hosting: Plone hosting: buildout with ZEO and Plone recipe: A recipe project for zc.buildout silva_buildout: A buildout for Silva projects basic_namespace: A basic Python project with a namespace package nested_namespace: A basic Python project with a nested basic_zope: A Zope project<

The first thing that you should always do before making any changes is take a backup of your site. You can do this manually or by using an extension like Akeeba backup, which can be found in the JED or at the following link: http://extensions.joomla.org/extensions/access-a-security/backup/1606 Having a backup copy is essential to restore a working copy of our site if a mistake is made. Also, you may be wondering whether, later, if you install a newer version of the extension, you may lose all of the changes made. This can happen; therefore, we have made these modifications after we have finished installing the extensions we need. But don't worry too much about that. You won't be installing a newer version of an extension every day. Mostly, you will install a newer version of the extension if bugs have been found or if the version introduces some features you want. Otherwise, if the site is working nicely and there are no bugs or newer features, we don't need to update these extensions. Anyway, the most important thing to remember is to backup. Always keep a backup of your work. As mentioned earlier, each one of the extensions that we are using is loading its own jQuery library, and thus makes our site needlessly load the library many times. This makes our site download more files than are really necessary. Just take a look at the source code of your site. In the head section we can see the script tags that are loading the required libraries: <script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/jquery /js/jsloader.php?files[]=jquery-latest.packed.js&amp;files[]= jquery-noconflict.js"></script> <script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/jquery/ js/ui/jsloader.php?file=ui.core"></script> <script type="text/javascript" src="/plugins/system/scjquery/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/plugins/system/scjquery/js/jquery.no.conflict.js"></script> <script type="text/javascript" src="/plugins/system/scjquery/js/ jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="/media/system/js/mootools.js"></script> <script type="text/javascript" src="/media/system/js/caption.js"></script> <script type="text/javascript" src="/plugins/content/ppgallery/res/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="/plugins/content/ppgallery/res/jquery.prettyPhoto.js" charset="utf-8"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_ninja_shadowbox/ninja_shadowbox/js/adapter/ shadowbox-jquery.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_ninja_shadowbox/ninja_shadowbox/js/shadowbox.js"></script> <script type="text/javascript" src="/modules/mod_ajaxsearch/js/script.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_superfishmenu/tmpl/js/jquery.event.hover.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_superfishmenu/tmpl/js/superfish.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.core.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.dialog.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.draggable.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.resizable.js"></script> Here we can see that lots of JavaScript files are being loaded, and some of them are repeated. Surely, that doesn't make our site load faster. Let's try to improve this as much as we can. We will use the SC jQuery plugin in order to load the jQuery library. With the help of a variable created by this library we can also determine if the jQuery library needs to be loaded or not. How is this done? If we open the plugins/system/scjquery.php file, at the very bottom of the file you can see the following code: $app->set( 'jquery', true ); In newer versions of the plugin this line of code seems to have been removed. However we can modify the plugins/system/scjquery.php file and add that line to it, at the very bottom, just like this: ... $app->set( ‘jquery’, true ); $doc->setHeadData($headData); return true; } } This way we will be able to use the techniques we are about to show.   This will set a variable jquery with the value true. Our next step is to use this variable to our benefit, just like we did in the ajaxSearch module. Open the modules/mod_ajaxsearch/mod_ajaxsearch.php file. We modified this file and it now appears as follows: $app =& JFactory::getApplication(); if( !$app->get('jquery') ){ $document->addscript(JURI::root(true).'modules'.DS. 'mod_ajaxsearch'.DS.'js'.DS.'jquery-1.3.2.min.js'); } First we need to get an instance of the global application object. We will then use the get method to try and read the 'jquery' variable. If this variable doesn't exist, it would mean that the SC jQuery plugin has not been loaded, and thus the jQuery library won't be present. If this happens, we will let the module load its own copy of the library. This helps us in reducing the number of times the library has been loaded. Now we are going to look into the other extensions that we used, seeing how we can solve each situation. Code highlight Remember the Core Design Chili Code plugin extension? We used it to reformat some code, as we can see in the next image: This plugin required the jQuery library, but as the plugin itself doesn't have the library included, another plugin from the same developers was needed—the Core Design Scriptegrator plugin. You can check it in Extensions | Plugin Manager: This plugins works much like the SC jQuery plugin, but for the extensions of the Core Design Chili Code plugin developers. This plugin loads the jQuery library, and some others that we don't need, in order for the other extensions to use it. As we are using the SC jQuery plugin, we can disable the Scriptegrator plugin: But hey, then the Core Design Chili Code plugin stops working. Why? We have said that the Chili Code plugin needs the jQuery library, but we are using the SC jQuery plugin to provide it. At this point we need to check the Chili Code plugin source code, so just open plugins/content/cdchilicode.php. Here we can see the following piece of code: // define language if (!defined('_JSCRIPTEGRATOR')) { Error::raiseNotice('', JText::_('CHILICODE_ENABLE_SCRIPTEGRATOR')); return; } // require Scriptegrator version 1.3.4 or higher $version = '1.3.4'; if (!JScriptegrator::versionRequire($version)) { JError::raiseNotice('', JText::sprintf('CHILICODE_SCRIPTEGRATOR_REQUIREVERSION', $version)); return; } if (!JScriptegrator::checkLibrary('jquery', 'site')) { JError::raiseNotice('', JText::_('CHILICODE_MISSING_JQUERY')); return; } What does all this code do? It checks for the Core Design Scriptegrator plugin. If it doesn't find any evidence of the plugin, it raises some errors and returns. We know that jQuery will be loaded. So we can comment the code mentioned, and the Chili Code plugin will work again. That's it; we have just reduced one jQuery library load; ready for the next one?

(For more resources on PrestaShop 1.3, see here.) Let's move on with our next step. Of course, exploring every tab in the back office would be advantageous, but we will specifically touch only those points that will affect your theming process. We will now look at how we can modify the following: Logo Top of page Adding FEATURED PRODUCTS block Footer Title Placing the other modules useful for your store on other section of your pages. Before going further, I would like to emphasize two important points. They are: Always work on a copy of your default theme: If you have not copied the default theme file, I would advise that when you start your development work, you copy the default theme file so that you have a backup or a comparison to work with. We will be working on the copy of the default theme, as in some cases, we will still change a few lines of codes to modify the theme. This means that if you ever make a huge blunder, you will at least have the original to start with again. If the worst ever happens, you can always upload the original file again to overwrite your errors, but that will be a big waste of time. Keep a quick reference list of any modifications made to any file: It may sound a bit tedious, but you will find this advice useful to heed. There are a few ways of making modifications to your theme, sometimes through modification of your other files (which are not in the theme folder). You may copy the file and put it into the theme folder to make the changes, or it is also possible to merely modify them by overwriting the file in its location. Whichever way you chose, when you need to modify files which are not in your custom theme folder, you should make a quick note of what changes you have made and where have you made them. Why? Because when there is a new version of PrestaShop, you will need to upgrade your PrestaShop site, thus the modifications you have made will be lost. The modifications in the theme folders will remain even if you update the version of your PrestaShop site. By keeping a list of the modifications you've made, it will be much easier to track back to where to re-apply them after you have upgraded your PrestaShop installation. Never procrastinate on making this quick list because you will always find that it is a waste of time to find and trace those changes later; even just six months down the road. Copying the default theme file When you download PrestaShop, by default, you will have a copy of the PrestaShop theme folder. Go to the PrestaShop_1.3.1/themes/PrestaShop folder. Copy this entire folder and save it on your computer. You may rename the theme accordingly, for example, theme1. Compress this into a ZIP file. Upload the renamed folder into the themes directory on your hosting through your cPanel or FTP. You will now have two themes in your /themes folder which are PrestaShop and theme1. You can now log in to your PrestaShop Back Office | Preferences | Appearance and switch to your theme1 that you just installed and click on the Save button. On this page, you may also control what logo, favicon, and the navigation pipes you want to use throughout your website. Now, let's start with the modification of these theme elements to complete the look of your new theme. Logo A logo is an important element of a company's or store's image, and it can contribute to the brand's marketing success. Therefore, getting a good quality logo is fundamental for the business. Getting a unique and attractive logo design can be daunting, especially for those who are not born with a flair for design. However, fortunately, there are various resources that you can use to get ideas or even create a very professional looking logo that you can use in your new online store. Some online resources for logo designs can be found at: http://www.logomaker.com—This is an online resource that allows you to freely create a logo, but you have to pay to download your new creation, which basically uses their online inputs. Quite attractive and interesting looking logos can be found and designed here. http://cooltext.com—This one describes itself as A free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. It allows you to choose the image you would like through a few simple steps. You only need to enter the words or company name using a form and you'll have your own custom image created on the fly. The logo you designed is downloadable for free. http://www.simwebsol.com/ImageTool/Default.aspx—This is a Web 2.0 logo generator. Free to use and download. It requires you to fill in a few fields and generates the image file quite easily. However, the background is limited to RGB flat choices and you only have 23 images that can be chosen from to insert. http://www.onlinelogomaker.com/ - A full featured free online logo design tool with a clean and easy interface and thousands of logo templates Another element, which is quite important here, is the favicon. The Favicon is the little icon representing the website you are visiting which gets displayed in the address bar of every browser. Usually, the favicon and the logo are the same thing, except for their sizes and the formats. They are not necessarily the same though. You may find some online resources that you can use to generate a favicon for the store. Make sure you have prepared the favicon icon before you try to replace the current favicon. If you are unsure of how to go about making a favicon, you may generate it online (using,http://www.favicon.cc/ or http://www.freefavicon.com/). Save the file on your hard drive and then upload it to your PrestaShop store. Uploading it is shown in the next section. Time for action—Replacing the default logo and favicon on your site The logo and the favicon can be replaced through Back Office | Preferences | Appearance, as shown in the following screenshot:     Browse the file you want to use from your computer. Upload the files and click on the Save button. You need to refresh your back office browser before you replace the logo and the new favicon.ico file. You also need to clean up your browser's cache and refresh the browser to see the favicon in the frontend of the website.     Upon saving and refreshing your browser, the updated images will be displayed. What just happened? In this simple exercise, you have just uploaded the logo that you had created, and PrestaShop has, by default, placed it in the correct directory in your new theme1 directory through the back office panel. If you did not choose the new theme, for example, theme1 in Preferences | Appearance under Themes, the logo you upload will go to the wrong directory. The Center Editorial Block The Center Editorial Block is where you see the main image at the center column, as we indicated previously in the front office. This is an important block, as this is where your visitors first arrive when they visit your store. It gives a first impression to your site visitor, and therefore, you need to consider what to include in it very carefully. Time for action—Modifying the Center Editorial block The Centre Editorial Block can be modified through Back Office | Modules | Tools | Home text editor. In this section, you can also edit the Centre Block image, which is referred to as Homepage's logo, and this title can be quite misleading as it may be confused with the actual logo. However, we have covered this matter in the previous article and did a mapping of each field here to the front office page of the store. You only need to upload the image you want to replace it with and continue with editing the Homepage logo link, which is the link for this image (Homepage's logo). You may just leave it set to your current website address if you want (for example, www.mydomainname.com). You can also leave it blank if you don't want the image to be a link. Furthermore, you will see Homepage logo subheading, which is the small letters you see on the default theme page that appear under the image. Let's replace the Homepage's logo image, Homepage logo link, and a new Homepage logo subheading: Click on the Update the editor button. Review your changes in your front office browser. You will need to refresh the page once to see the effect. It is possible to work with different image sizes, but the width of the image will "disturb" your column settings. If you are not going to make any unnecessary changes, then it is best to use images of the safe maximum width for the center column which is 530 pixels. If you exceed this width it will push your right column outside the standard browser view. Now let's have a look at what you have achieved so far. What just happened? You have modified your Center Editorial Block by inserting a new Homepage's logo image, Homepage logo link, and a new Homepage logo subheading. Top of pages block We will look at the header section of the page. The default layout comprises the following in the header section: Currency block (links to the available currencies used on the site). Languages block (links to the available language translation of the pages interface). Permanent link block: Contact (icon that links to the contact form page) Sitemap (icon that links to the sitemap page) Bookmark (icon that helps you bookmark a particular page on the site) Search block User links block: Your Account (icon that links to the login page or registration page). When logged in, it links to the account page that lists everything the customer can do with their account. It is only when the viewer is logged out that it links to the authentication page Cart (icon that links to the shopping cart summary page ) Welcome, Log in (links to the login page or registration page)     Time for action—Modifying the Top of pages To get these elements back on the pages, you will need to install and enable the relevant modules. These simple steps will need little modifications unless you want to add a new currency and a new language. Let's enable these modules through these simple steps: Currency block—go to Modules | scroll down to Blocks | Currency block. Languages block—go to Modules | scroll down to Blocks | Language block. Search block—go to Modules | scroll down to Blocks | Quick Search block. Permanent link block—go to Modules | scroll down to Blocks | Permanent links block. By default, these modules tend to appear on the pages in the order you installed and enabled them. The first one will appear the leftmost while the last one will be the rightmost. You can shift the arrangement by installing them according to what you want to appear on the leftmost or the rightmost sides. Notice that the Permanent link block is on the right as we enabled it last. There is an easier way to do this as well, which we will cover in the next section. You can modify this by working on the position of the modules within the Top of pages hooks. There are two similar hooks, which can be quite confusing, that is, the Top of pages and Header. The blocks are positioned or "transplanted" in a Top of pages hook and not Header of pages. The Welcome, Log in, Cart, and the User login links can be enabled through Back Office | Modules | Blocks | User info block. Upon installing and enabling the module, you will have the Welcome, Log in, Your Account, and Cart link displayed on your front office. By default, all those are automatically hooked to the Top of pages once they are enabled. If it is not, you can have it hooked through transplanting the module to the hook, as shown in the next screenshot. This can be done by following these simple steps: Go to Back Office | Modules | Position | Transplant a module.     Choose the Module you want to transplant from the drop-down menu. Choose the hook from Hook into, the one you want the Module to go into. Click on the Save button. The arrangement of the blocks can be done by moving them around within the hooks, which we will see next. Go to Modules | Positions. There you can arrange the position of the modules within the hooks by dragging each of them to the required position. As you can see, there are the two similar hooks which may be confusing, namely, the Header of pages and the Top of pages. Compare it with what you have at the front office in the next screenshot.   The Quick Search block does not appear despite it being hooked at the Header of pages. The other blocks which are hooked to the Top of pages are displayed in the front office. The same thing with the User info block; you only see the one which is hooked to the Top of pages and not the one in the Header of pages. The Top of pages hook is used to display a module at the top of the page. The Header of pages hook is used to put code in the <head> tag of the website. If you want to move a module or delete it from the top of the page, you should use the Top of pages hook, not the Header of pages hook. Modules that are in the Header of pages hook should not be removed, since they are required for the module to function correctly. For example, if you remove the Quick search block from the Header of pages hook, the search autocomplete will not work, since the code for it is missing. The resulting JavaScript error will also cause other problems on the website such as the Categories block not displaying any categories. To move the modules to the left or right, you need to move them up within the hook. The lower it is within the hook, the more to the right the module will appear, whereas the upper within the hook will be displayed on the left. For example, the Currency block is first in the list, and it is displayed on the left of the Top of pages section on the webpage. What just happened? You just learnt the differences between the hooks Top of pages and Header of pages in PrestaShop. You also get to modify the blocks you want to use on the top of the page and how to move them around within the hook.

(For more resources on PrestaShop 1.3, see here.) The most basic level is using the back office panel to customize the layout. Using this knowledge, we can make some quick and easy changes without having any technical knowledge. If you need more advanced changes than what can be achieved here, you will need to edit the theme and the CSS files, which will be explained in the next article on Customizing PrestaShop Theme Part 2. It must be noted that all design changes that you can do in this back office can also be achieved through customization on the theme files (which involves editing of the file's markup) too. Although knowledge of this theme editing approach encased that of the back office setting, it is useful to know that there are reasons to choose the latter option with no "hacking" of scripts even if you are an advanced user as there could be some issues when you have to update to the next PrestaShop version. You will have to update some of these modified files as these changes may not be automatically included in the newer version. We have to decide what kind of layout we would want, just like the interior design space of a building that you are erecting, you need to visualize the spaces and how users will navigate your retail outlet. You will also need to know what kind of resources can help the successful function of your store, customers in real brick-and-mortar stores do not have to ask a lot of questions as they are prone to browsing the items while having the advantage of feeling, smelling, holding, or trying the items at the same time. While this is true for a real store/shop, the online store does not have this advantage. So, consider features/functions that can be a "replacement" to this disadvantage, such as a 30 day return policy. In a real shop, customers may ask questions at the customer service desks. The same thing can be done with your online store; you can add a lot of information that your customers may need while balancing it with a good design, navigation, and browsing experience. This will ensure that the customer finds the information and this reduces the need to repetitively answer the same queries. This is one of the main reasons why an online store exists, which means that information can be obtained easily 24x7. Therefore, in an online shop, you will have to decide on what kind of features you want to introduce, for example, one block for product information, another for customer service information where they can get information on return policy, how to make payment, and so on. This is just a background that is needed to decide the functions of your store. We will not be discussing about what makes a good navigation or whether one way can be more effective than another. We will learn about how you can use the knowledge about theming for PrestaShop-based stores to build your online store or if you are a web designer, your clients' online stores suitable with the stores' concepts. You will also learn how to go about in applying the necessary modules to complement your theme setup. Before we start this article, you should get acquainted with the back office panel. This will help you understand what we are exploring here. In this article, we will be sticking with the default PrestaShop theme and learn how to: Install, uninstall, enable, and disable module blocks in the center, left, and right columns. Transplant and position modules by moving them to columns and within the columns. The default layout Let's have a look again at your current storefront and how the theme is governed by the back office control panel. By looking at the screenshot, you can tell which back office items you need to modify, replace, or set according to your needs. The basic layout outline can be seen in the following screenshot: Besides the back office control over appearance, our theme is also affected by the modules that control the functionality of your store. At this stage, we will be working on the existing modules in PrestaShop. This is where you decide whether your site visitor will see the product categories, the top selling products, your product listing, the specials, your featured products, and so on. If you run an e-commerce store with a payment option that links automatically to a payment gateway, you may want to study a bit more about each of these modules as well. You will also notice that the default theme uses a three column layout with a header in the top block and a footer at the bottom. Through the back office panel, all the default blocks on the left and right columns can be moved or transplanted interchangeably. Some of the blocks in the header (top blocks) can be moved into the left column or right column. The featured product block and the editorial block, which are at the center column, are pretty much stuck in this position. Modules The Modules tab allows you to control the modules you want to use in the store. You will be able to transplant the modules and move them around according to the site navigation you want, considering some limitations at this stage. You can move them up or down in the columns. You may also position them in the left or the right column or you may disable them. You also have the option of adding a new module or choosing ones that are available from the PrestaStore. PrestaShop has some already installed modules, and the number of newly developed ones is growing every day. Now let's move on to Back Office | Modules, as shown in the following screenshot:     We will go into the listing and get some ideas on each one. However, we will focus in greater detail on the modules that affect theming directly. Among the existing modules in this version (PrestaShop 1.3.1), which are readily available for installation, some of them are: Advertisement – 1 module: Google Adsense. Products module – 6 modules: Cross selling, RSS products feed, Products Comments, Products Category, Product tooltips, Send to a Friend module. Stats Engines – 5 modules: Artichow, Google Chart, Visifire, XML/SWF Charts, ExtJS. Payment – 8 modules: Bank Wire, Cash on delivery (COD), Cheque, Google Checkout, Hipay, Moneybookers, Paypal, PaypalAPI. Tools – 14 modules (but only 12 modules listed): Birthday Present, Canonical URL, Home text editor, Customers follow-up, Google sitemap, Featured Products on the homepage, Customers loyalty and rewards, Mail alerts, Newsletter, Customer referral program, SMS Tm4b, and Watermark. Blocks – 23 modules: Block advertising, Top seller block, Cart block, Categories block, Currency block, Info block, Language block, Link block, Manufacturers block, My Account block, New products block, Newsletter block, Block payment logo, Permanent links block, RSS feed block, Quick Search block, Specials block, Suppliers block, Tags block, User info block, Footer links block, Viewed products block, Wish list block. Stats – 25 modules: Google Analytics, Pages not found, Search engine keywords, Best categories, Best customers, Best products, Best suppliers, Best vouchers, Carrier distribution, Catalog statistics v1.0, Catalog evaluation, Data mining for statistics, Geolocation, Condensed stats for the Back Office homepage, Visitors online, Newsletter, Visitors origin, Registered Customer Info, Product details, Customer accounts, Sales and orders, Shop search, Visits and Visitors, Tracking - Front office. You should also see an Icon legend on the right that reads the following: Apart from these three options of installing, enabling, and disabling, you may also add new modules using the button on the top-left corner of the module tab. There are also plenty of third party modules that can be used to make the store more interactive and attractive. Discussing about them is not within the scope of this article.

(For more resources on Ubuntu, see here.) What is jailbreaking? Jailbreaking an iPhone or iPad allows you to run unsigned code by unlocking the root account on the device. Simply, this allows you to install any software you like - without the restriction of having to be in the main Apple app store. Remember, jailbreaking is not SIM unlocking. Jailbreaking voids the Apple-supplied warranty. What does this mean for developers? The mass availability of jailbreaking for these devices allows developers to write apps without having to shell out Apple's developer fees. Previously a one-off payment of $300 US, an "official" developer must now pay $100 US each year to keep the right to develop applications. What jailbreaks are available? Arguably the most advanced jailbreak available now is called Spirit. Though unlike a few others, which can now hack iOS 4.0, Spirit differs in a few key features. Not only is Spirit the first to be able to jailbreak the iPad, but this jailbreak also allows an "untethered" jailbreak - you won't have to plug it into a computer every boot to "keep" it jailbroken. Support for jailbreaking iOS 4.0 is coming soon for Spirit. There are tutorials on jailbreaking using Spirit, like this one, but they generally skip over the fact that there's a Linux version, and only talk about Windows and/or OS X. Jailbreaking the iPad A very simple process, you can now jailbreak the iPad very quickly thanks to excellent device support and drivers in Ubuntu. Please note that from now on, you should only plug in the device to iTunes 9 before 9.2, or better still, just use Rhythmbox or gtkpod to manage your library. Install git if you haven't already got it: sudo apt-get install git Clone the Spirit repository: git clone http://github.com/posixninja/spirit-linux.git Install the dev package for libimobiledevice: sudo apt-get install libimobiledevice-dev Enter the Spirit directory and build the program: cd spirit-linux make I've noticed that though Ubuntu has excellent Apple device support, and you can mount these devices just fine, that the jailbreak program won't detect the device without iFuse. Install this first: sudo apt-get install ifuse Now for the fun! Plug in your iPad (you'll see it under the Places menu) and run the jailbreak: ./spirit You'll see output similar to this: INFO: Retriving device listINFO: Opening deviceINFO: Creating lockdownd clientINFO: Starting AFC serviceINFO: Sending files via AFC.INFO: Found version iPad1,1_3.2INFO: Read igor/map.plistINFO: Sending "install"INFO: Sending "one.dylib"INFO: Sending "freeze.tar.xz"INFO: Sending "bg.jpg"INFO: Sending files completeINFO: Creating lockdownd clientINFO: Starting MobileBackup serviceINFO: Beginning restore processINFO: Read resources/overrides.plistDEBUG: add_fileDEBUG: Data size 922:DEBUG: add_fileDEBUG: Data size 0:DEBUG: start_restoreDEBUG: Sending fileDEBUG: Sending fileINFO: Completed restoreINFO: Completed successfully The device will reboot, and if all went well, you'll see a new app called Cydia on the home screen. This is the app that allows you to install other apps. Open Cydia. Cydia will ask you to choose what kind of user you are. There's no harm in choosing Developer; you'll just see more information. Also, if you choose the bottom level (User) console packages like OpenSSH will be hidden from you. You'll also receive some updates; install them. Interestingly, Cydia uses the deb package format, just like Ubuntu: That's it! Wasn't that quick?

(Read more interesting articles on Joomla! 1.5 here.) Introduction Joomla! is a feature-rich content management system, but there are some things it can't do out of the box. This is where JavaScript can become useful in improving the experience of your website to its visitors. Including a JavaScript file in your Joomla! template One of the most basic aspects of using JavaScript with your Joomla! template is including it within the page. There are two ways to do this—within the <head> element of your template, or within the <body> element of your template (best placed just above the </body> element). We'll make use of the method that uses the <head> template. (The reasons to do so are covered in another recipe of this article.) Getting ready Open your template's index.php template, located in your template's subdirectory within your Joomla! installation's templates directory. How to do it... Locate the <head> element of your Joomla! template in the index.php file and insert a <script> element that references the JavaScript file(s) that you wish to use: <!-- some HTML omitted for brevity --><script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/javascript-file.js"></script></head> Note that the base directory of your Joomla! installation is inserted automatically to help prevent any problems with changing directory paths to the JavaScript file, should you change your website's location.You will need to change the template's path if you choose to rename your template. For valid XHTML, you need to specify the type attribute, as shown: <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/javascript-file.js"></script> How it works... When a browser encounters a <script> element in your page, it loads the required behavior included in the JavaScript file, assuming that your browser has it enabled. See also Including a JavaScript file in your Joomla! template Maximizing backward compatibility with JavaScript Installing Google Analytics Integrating AddThis social bookmarking tool with your Joomla! template Tips and tricks for minimizing page load time when using JavaScript While JavaScript can be used to enhance your visitors' experience of your Joomla! website, it can have a negative impact in terms of both real and envisaged loading times of pages.JavaScript slows down the loading of a page because it's a single-threaded language. This means that nothing else can occur while JavaScript is being loaded or something in JavaScript is being evaluated. As such, a single, slow-loading JavaScript file can prevent a whole website from loading quickly! How to do it... The most obvious thing that you can do to make your Joomla! template load more efficiently is to compress any JavaScript you do use. As such, there are a number of online compression tools that you can use, including the JavaScript Compressor (http://javascriptcompressor.com): Once you've inserted your JavaScript into the Paste your code input area, click on Compress. In this example, we've used a function that creates a slideshow with the use of the jQuery library: // Requires jQuery to run$(document).ready(function() { $('#slideshow-wrapper').cycle({ fx: 'fade', speed: 'normal', timeout: 0, next: '#next', prev: '#prev' }); $('#slidie').cycle({ fx: 'fade' }); }); As you can see, quite a compression is noticeable even with a relatively compact piece of JavaScript, around half the size of the original in terms of memory required to store it (and thus, resources required to load it for a visitor visiting your website). $(document).ready(function(){$('#slideshow-wrapper').cycle({fx:'fade',speed:'normal',timeout:0,next:'#next',prev:'#prev'});$('#slidie').cycle({fx:'fade'})}); Many JavaScript libraries (such as jQuery and MooTools) and features are available in a compressed format already. There is also a Joomla! extension called JCH Optimize that you can use. You can download it from http://extensions.joomla.org/extensions/site-management/site-performance/12088. How it works... As you've seen, JavaScript is a single-threaded language, so one technique to minimize its impact on your Joomla! website's loading times for visitors is to make the JavaScript the last possible item in the page to load. Additionally, compressing JavaScript can greatly reduce page-loading times with larger JavaScript files. It's also worth keeping a backup of the uncompressed JavaScript file, as this makes it easier to change and recompress in the future. There's more... Another way to minimize your Joomla! template's page load time is to reference JavaScript and other template files from different hostnames. Browsers including Internet Explorer and Firefox have been known to limit the number of simultaneous connections to a hostname, slowing down the loading of the page. Moving <script>tags to the bottom of the page The other major factor that can slow down the page load times for visitors to your Joomla! website is the necessity for their browser to have to stop while it deals with any JavaScript included in your page. You can overcome this by reordering the HTML elements in your Joomla! template's index.php file to move the <script> elements to the bottom of the page where they appear inline. See also Maximizing backward compatibility with JavaScript Installing Google Analytics

(Read more interesting articles on Joomla! 1.5 here.) Adding a random background image to your Joomla! template In distinguishing your Joomla! template from others, there are a number of extensions for Joomla! to help you, including one that allows you to display a random image as your template's background image for the <body> element. Getting ready You need to install the extension called Random Background. You can find the file's download link on the Joomla! website at http://extensions.Joomla.org/extensions/style-a-design/templating/6054. Once you have saved the extension files somewhere on your computer, log in to your website's Joomla! administration panel (if Joomla! is installed at example.com, the administration panel is typically accessible at example.com/administrator), and select the Install/Uninstall option from the Extensions option in the primary navigation: You will then be presented with a form, from where you can upload the extension's .zip file. Select the file from your computer, and then click on the Upload file & install button: Once complete, you should receive a confirmation message: Setting relevant permissions for installing the module If you have problems installing the module, you may receive an error message like the following one: The error is most likely because two directories on your server do not have sufficient permissions: /tmp /modules Use Joomla!'s FTP layer to manage the necessary file permissions for you. You can edit Joomla!'s configuration file, which is called configuration.php, in the root of your Joomla! website. Simply add these variables into the file if they don't exist already: var $ftp_host = ''; // your FTP host, e.g. ftp.example.com or just example.com, depending on your hostvar $ftp_port = ''; // usually 21var $ftp_user = ''; // your FTP usernamevar $ftp_pass = ''; // your FTP passwordvar $ftp_root = ''; // usually / or the directory of your Joomla! installvar $ftp_enable = '1'; // 1 = enabled

(Read more interesting articles on Joomla! 1.5 here.) Customizing the breadcrumb The larger your website gets, the more important it is to make use of Joomla!'s breadcrumb feature. Getting ready To start redefining your breadcrumb's style, open the template.css file for your template; use the rhuk_milkyway template for this demonstration. This means that your CSS file will be located in the templatesrhuk_milkywaycss directory of your Joomla! installation. If you visit a page other than the home page in your Joomla! website, you'll be able to see the breadcrumb: As you can see, the rhuk_milkyway template defines the style for the breadcrumb in the template.css file: span.pathway { display: block; margin: 0 20px; height: 16px; line-height: 16px; overflow: hidden;} The HTML that defines the breadcrumb (for the Features page) is as shown: <div id="pathway"> <span class="breadcrumbs pathway"> <a href="http://example.com/" class="pathway">Home</a> <img src=" /templates/rhuk_milkyway/images/arrow.png" alt="" /> Features </span></div> How to do it... You can customize the breadcrumb by changing the CSS, and altering the color and size of the breadcrumb's content: span.pathway {color: #666;font-size: 90%;display: block;margin: 0 20px;height: 16px;line-height: 16px;overflow: hidden;} Once the altered CSS file has been uploaded, you can see your changes: The next step to customizing your breadcrumb is to alter the image used for the separator arrows, located at templatesrhuk_milkywayimagesarrow.png. You'll replace this image with your own new one (which has been enlarged in this image to make it easier to view). Once uploaded, your new breadcrumb looks a little more fitting for your website: How it works... By targeting specific ids and classes with CSS and changing an image in the images directory of our template, we can subtly change our template to distinguish it from others without a great deal of work. See also Styling the search module Styling pagination Styling pagination Some content in your Joomla! website may run over multiple pages (for example, some search results). By styling pagination you can again help to distinguish your Joomla! template from others. Getting ready Open your template's primary stylesheet; generally, this will be called template.css, and is located in the templatesrhuk_milkywaycss directory if we are using the rhuk_milkyway template (as we are for this demonstration). It is also worth bearing in mind the typical structure of the pagination feature within the HTML. We can find this by searching for a common word such as "the" or "Joomla!" on our website. <span class="pagination"> <span>&laquo;</span> <span>Start</span> <span>Prev</span><strong> <span>1</span></strong> <strong> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=20" title="2">2</a> </strong> <strong> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=40" title="3">3</a></strong> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=20" title="Next">Next</a> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=40" title="End">End</a> <span>&raquo;</span> </span> Our primary interest in the previous part is the .pagination class assigned to the <span> element that contains the pagination feature's content. By default, the pagination (as seen on the search results page) looks like this: How to do it... Now that you are aware of the relevant class to style, you can add it to your template's stylesheet, with the aim of making the pagination less obtrusive with the surrounding content of your pages: .pagination {color: #666;font-size: 90%}.pagination a {color: #F07 !important /* pink */} Once you've uploaded the newer stylesheet, you'll be able to see the new pagination style, which will appear smaller than before, and with pink-colored links. Producing more semantic markup for pagination As you can see above, the HTML that Joomla! currently generates for the pagination feature is quite verbose—unnecessarily long and untidy. We'll change our template's pagination.php file to use more semantic (meaningful) HTML for this feature by adding each item to a list item within an unordered list element ( Open the pagination.php file and you will see four PHP functions (assuming that you are looking within the rhuk_milkyway template), but the function which is of interest to us is the pagination_list_render PHP function. Currently, the code for this function looks like this: function pagination_list_render($list){ // Initialize variables $html = "<span class="pagination">"; $html .= '<span>&laquo;</span>'.$list['start']['data']; $html .= $list['previous']['data']; foreach( $list['pages'] as $page ) { if($page['data']['active']) { $html .= '<strong>'; } $html .= $page['data']; if($page['data']['active']) { $html .= '</strong>'; } } $html .= $list['next']['data']; $html .= $list['end']['data']; $html .= '<span>&raquo;</span>'; $html .= "</span>"; return $html;} You can see that Joomla! builds up the HTML to insert into the page by using the $html PHP variable. All you need to change is the HTML you can see: function pagination_list_render($list){ // Initialize variables $html = "<ul class="pagination">"; $html .= '<li class="page-previous">&laquo;</li>' . '<li>' . $list['start']['data'] . '</li>'; $html .= '<li>' . $list['previous']['data'] . '</li>'; foreach( $list['pages'] as $page ) { if($page['data']['active']) { $html .= '<li>'; } $html .= '<strong class="active">' . $page['data'] . '</strong>'; if($page['data']['active']) { $html .= '</li>'; } } $html .= '<li>' . $list['next']['data'] . '</li>'; $html .= '<li>' . $list['end']['data'] . '</li>'; $html .= '<li class="page-next">&raquo;</li>'; $html .= "</ul>"; return $html;} If you now upload the pagination.php file and refresh the page, you'll see that the previous style that you had defined only partially styles the newer HTML: If you add the following CSS to your template's template.css file, everything will be styled as you intended before: ul.pagination {list-style-type: none}ul.pagination li {display: inline} Once uploaded, your new pagination is complete:

(For more resources on JasperReports, see here.) Getting ready Refer to the installPostgreSQL.txt file included in the source code download (chap5) to install and run PostgreSQL, which should be up and running before you proceed. The source code also includes a file named copySampleDataIntoPGS.txt, which helps you create a database named jasperdb6 and copy sample data for this recipe into the database. How to do it... Open the SimpleTOCReport.jrxml file from the Task2 folder of the source code. The Designer tab of iReport shows a report containing data in Title, Column Header, Customer Group Header 1, Product Group Header 1, Detail 1, and Product Group Footer 1 sections, as shown in the following screenshot: Switch to the Preview tab and you will see invoices for each customer grouped by product names. Switch back to the Designer tab. Right-click on the Variables node in the Report Inspector window on the left side of your report. From the pop-up menu that appears, select the Add Variable option. A new variable named variable1 will be added at the end of the variables list. While variable1 is selected, find the Name property in the Properties window below the Palette of components and change its value to FirstRecordOfANewGroup. Now the name of the variable1 variable will change to FirstRecordOfANewGroup. Select the Variable Class property and change its value to java.lang.Integer. Select the Calculation property and change its value to Count. Select the Reset type property and change its value to Group. Select the Reset group property and change its value to Customer. Select the Variable Expression property and click the button beside it. A Variable Expression window with no default expression will open, as shown in the next screenshot: Select Variables in the first column of the lower-half of the Variable Expression window. Then double-click the FirstRecordOfANewGroup variable in the second column. A new expression $V{FirstRecordOfANewGroup} will appear in the Variable Expression window, as shown in the next screenshot. Press the OK button. Right-click on the Variables node in the Report Inspector window. A pop-up menu will appear. Select the Add Variable option. A new variable named variable1 will be added at the end of the variables list. While variable1 is selected, find the Name property in the Properties window below the Palette of components and change its value to TOC. Now the name of the variable1 variable will change to TOC. Select the Variable Class property and change its value to java.lang.String.

Introduction Although we've seen how to alter much of our Joomla! website, there's still much we can do to improve and polish our Joomla! template to perfection. Styling the search module Joomla! is a powerful content management system which is capable of supporting websites with hundreds and even thousands of pages. When websites become this large, it's often important to provide your website's visitors with a search feature as a means of locating the information on your website that they are looking for. One option that Joomla! provides for your visitors to search your website is the search module, which is a block displayed within your template. Getting ready Identify the class or id assigned to your Joomla! template's search form, which is assigned by a jdoc include statement within your template's index.php file. In the rhuk_milkyway template—the one that we've been working with—the search feature is assigned to the user4 block by default with this jdoc statement: <jdoc:include type="modules" name="user4" /> It appears to the top-right of the template: If we now look at the page's HTML source, the HTML generated by Joomla! for the search feature looks like this: <div id="search"> <form action="index.php" method="post"> <div class="search"> <input name="searchword" id="mod_search_searchword" maxlength="20" alt="Search" class="inputbox" type="text" size="20" value="search." onblur="if(this.value=='')this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> </div> <input type="hidden" name="task" value="search" /> <input type="hidden" name="option" value="com_search" /> <input type="hidden" name="Itemid" value=1 /> </form> This means that we can apply CSS to #search to style our template's search box. How to do it... Open your template's primary stylesheet file, which is usually called template.css, and is located in the templatesrhuk_milkywaycss directory of your Joomla! installation. The rhuk_milkyway template already defines the style for the form as follows: #search { float: right; width:320px; margin-top: -20px; margin-right: 30px; height: 40px; overflow: hidden; text-align:right; } By adding CSS to change the search field's state when a visitor focuses within it, you can help improve your Joomla! template by orientating visitors to their whereabouts on the page: #search input[type='text']:focus { border-color: #09C /* blue */ } Once you've uploaded the altered template.css file, you will now see a blue border surrounding the search field: How it works... By using the CSS pseudo-class :focus, the browser changes the attributes we define to make it clearer to our website's visitors that their input device (for example, keyboard) is focused on the search input field. Internet Explorer versions 7 and below do not support the :focus pseudo-class. You can provide support in Internet Explorer for this feature of CSS with the use of JavaScript; see http://james.padolsey.com/javascript/fixing-focus-in-internet-explorer/. See also Understanding Joomla! template positions Styling the search component Styling the search component Along with providing the search module, which is embedded within your Joomla! template depending on the module position it is assigned to, there is the Joomla! search component. Getting ready Firstly, you need to access the search component on your Joomla! website. You can do this by visiting http://example.com/index.php?option=com_search, assuming that your Joomla! installation is installed in the root directory of the example.com domain. With the rhuk_milkyway template as your currently enabled template, you should see that the search component looks like this: Open your template's primary CSS file; for our example, this is templatesrhuk_milkywaycsstemplate.css. It is also worth studying the source of the search component page; you'll find that the search form is contained within a &gt;form< element identified with an id of searchForm. How to do it... In your template's CSS file (template.css), begin by styling the overall form first: form#searchForm { background: #E5F1FD; border: 1px #0C3A6D solid; border-radius: 10px; padding: 10px } Some browsers do not yet support the border-radius property in CSS, so you may just see the search form with squared corners. This changes the look of the search form as follows: Next, you'll style the search query field, which is identifiable by the #search_searchword id: #searchForm #search_searchword { border: 2px #0C3A6D solid; color: #0C3A6D } This helps to distinguish the search field from the other fields in the form: Lastly, you'll add some padding to the table cells used to lay the search component form out to provide a little more space between inputs to prevent visitors accidentally clicking: #searchForm table td { padding: 5px } That's the search form styled!