Coding and more – Concrete5, Flex, JavaScript

Latest from the blog

concrete5 SooperFish drop down navigation

Creating a drop down navigation is an old technique by now but it’s still used in a lot of cases to hide parts of a navigation. In addition to the plain CSS menu I wrote more than 2 years ago, I decided to write a new tutorial which uses JavaScript as well. You might ask why: Avoiding JavaScript is nice but creating something as complex as a drop down navigation without any JavaScript leads to a few ugly work arounds. You’ll also have some difficulties to add a fade out and fade in effect unless you’re using CSS3 which isn’t well supported yet.

But at the end it’s up to you, both solutions can work just fine!

Using SooperFish is also a bit easier for us, you’ll see at the end of the tutorial how little code you needed.
At the end your navigation can look like this:

(more…)

concrete5 – improving performance by adding favicon.ico

Most browsers are looking for that little favicon to display a 16×16 icon next to the URL in the address bar. How does this work? There are two main ways:

  • They check if a file is available at /favicon.ico
  • They check if a proper link tag has been set:<link rel="shortcut icon"
    href="http://www.oraclerecipes.com/oraclerecipesicon.ico" />

But what happens if you don’t do anything of the above? The browser will still try to search for favicon.ico. While you don’t even see that when you open your browsers console, the webserver will notice that. If you check your webservers log file, you’ll find something like this:

www.oraclerecipes.com 88.222.33.111 - - [04/Sep/2011:08:09:23 +0200] "GET /favicon.ico HTTP/1.1" 404 751 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1"

The concrete5 URL rewriting rules check if the requested path is a static file but since it doesn’t exist, the request is forwarded to the dispatcher. This means that concrete5 will search through its database to see if there’s a concrete5 page available at /favicon.ico but obviously won’t return anything else but “Page not found”. This database lookup can easily consume 100ms which isn’t a lot but assuming you’ve got a busy site, this is probably still something you’d like to get rid!

Oracle Recipes

Despite the fact that most articles on this blog are about concrete5, I mostly work with Oracle and ERP applications with Oracle in the back. In my daily work with Oracle, I often find myself doing more or less the same tasks and sometimes I just want to get that script I wrote a decade ago to finish the task.

It’s mostly for myself to organize some of my Oracle information but it might get helpful for other people as well.

There’s not much going on yet but I still launched the site to get some feedback as soon as possible. Check out my new site

http://www.OracleRecipes.com/.

concrete5 – AJAX Add-on to display File Download Statistics

Today’s article is about concrete5 again after a long time without anything about concrete5 on codeblog.ch. The example we’re going to look at takes a few ideas and code snippets from my book about concrete5.

If you ever had a closer look at the file manager you’ve probably seen that if you open the file properties, you can see a small statistics about the downloads of a file. This is quite nice but what if you wanted to see how many file downloads there are in total? Right now, there’s no such report available in concrete5 which is why we’re going to build the first part of such an addon.

It will use some AJAX to switch between different views, allowing us to extend it even further in the future. At the end you’ll have an additional page in the reports section like this:

(more…)

Statically linked Linux executables with GCJ, Seed7 and haXe

While some of you might try to avoid statically linked executables, they can be quite handy. In my case there are situations where I quickly have to run some code on a shared hosting with limited access. Installing libraries isn’t possible but running binaries is – at least if you have something like SSH access like I mostly do.

The exact reasons why I don’t run a PHP, Ruby or Python script are a bit more difficult. Just believe me that I needed a binary file without the ability to install any additional libraries ;-)

To do this, I toyed around with a bunch of different languages. This list is certainly not complete but I’m happy to extend it if you have any suggestions. Please note, I didn’t include languages like C intentionally because I also didn’t want to see things like malloc in my code. At this point you probably think that I’m a rather complicated person and yes, you’re probably quite right about that.

Enough about that, the first languages/compilers I’ve had a look at on my Debian box if you following the link..

(more…)

concrete5 – Performance Improvement with Block-Cache

There has been an interesting feature in concrete5 which can improve your sites performance noticeably. If you log in to your site and look at the Sitewide Settings screen, you can see this box:

concrete5 full page cache settings

As already mentioned on the screenshot, these settings improve the performance by caching various outputs generated by blocks. In order to get the most out of your own blocks, you should look into this feature a bit closer. Think about this: How does concrete5 know that the output of a block can be cached? It can’t!

Block Cache Options

If you already created your own blocks in the past, your should be familiar with the BlockController. You probably also specified properties like $btTable and $btInterfaceWidth. Now, there are a few more properties you can set. Look at the following start of a BlockController:

class MusicBlockController extends BlockController {
   protected $btInterfaceWidth = 450;
   protected $btInterfaceHeight = 430;
   protected $btTable = 'btMusicPlayer';
   protected $btCacheBlockRecord = true;
   protected $btCacheBlockOutput = true;
   protected $btCacheBlockOutputOnPost = true;
   protected $btCacheBlockOutputForRegisteredUsers = true;
   protected $btCacheBlockOutputLifetime = 60*30; // 30 minutes

There are a number of variables starting with btCache. All of them are related to the new cache functionality of concrete5. They let you specify if the content changes once a user is logged in ($btCacheBlockOutputForRegisteredUsers) they let you tell concrete5 if the content stays the same if the page is opened using the POST method allowing the cache to be enabled during a form post too ($btCacheBlockOutputOnPost).

You probably won’t be able to measure a huge impact if you’re block doesn’t have to process lots of data in order to print the output. But if there’s a complex method in the background of your block you can use these variables to easily control the cache of the output making your site feel faster.

Remote Lock Computer

If you work at home using remote control tools you might have had troubles accessing your computer if the connection has been dropped. Some remote control tools like RDP or Unicenter Remote Control will only allow you to access the computer if it’s locked. Something which usually makes sense but can be annoying if you lose the connection or if the remote control tool crashes.

There are some VB Scripts out there which you can use to lock the computer from another computer. They work but aren’t really nice as the have to copy a file to the computer you’re trying to lock. You also don’t have a nice interface and sometimes you even have to create some files manually. Not really userfriendly, something which might annoy you – especially if you just lost your internet connection.

I did some quick work and came up with a rather small C# tool which uses WMI to execute a remote command. There’s a command you can execute to lock your local computer, just hit Windows+R (or click on Start and select Run) and enter this command:

rundll32 user32.dll,LockWorkStation

Once it has been executed, your computer will be locked and ready for remote access. I only created a small interface which combines WMI and this rundll32 command to make the process of locking a computer in your network a bit easier. Please note, you’ll need plenty of permissions. I’m not 100% sure but I think the impersonate option I’m using will only work if you’re a domain admin. Enough talking, here’s the code:

using System;
using System.Windows.Forms;
using System.Management;
 
namespace RemoteLock
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
        }
 
        private void btnClose_Click(object sender, EventArgs e)
        {
            Application.Exit();
        }
 
        private void btnLock_Click(object sender, EventArgs e)
        {
            ConnectionOptions connOptions = new ConnectionOptions();
            connOptions.Impersonation = ImpersonationLevel.Impersonate;
 
            if (txtUsername.Text != String.Empty && txtPassword.Text != String.Empty)
            {
                connOptions.Username = txtUsername.Text;
                connOptions.Password = txtPassword.Text;
            }
            connOptions.EnablePrivileges = true;
 
            ManagementScope managementScope = new ManagementScope(String.Format(@"\\{0}\ROOT\CIMV2", txtComputer.Text), connOptions);
            managementScope.Connect();
 
            ObjectGetOptions objectGetOptions = new ObjectGetOptions();
            ManagementPath managementPath = new ManagementPath("Win32_Process");
            ManagementClass processClass = new ManagementClass(managementScope, managementPath, objectGetOptions);
 
            ManagementBaseObject inParameters = processClass.GetMethodParameters("Create");
 
            inParameters["CommandLine"] = @"rundll32 user32.dll,LockWorkStation";
            ManagementBaseObject outParameters = processClass.InvokeMethod("Create", inParameters, null);
 
            MessageBox.Show("WMI process created, return value: " + outParameters["returnValue"]);
        }
    }
}

The project should compile just fine if you open the sln file using the free Microsoft Visual C# Express 2010 edition. There’s a binary file in the zip file for those who don’t have the time or interest to compile the project on their own. The code is free, improve it, copy it, trash it.. I’d only appreciate if I’d get some credits for it!

Download RemoteLock

Concrete5 Beginner’s Guide

Concrete5 Beginner's Guide No posts for quite some time on this blog! I don’t have a new tutorial at the moment, but I still have an explanation and something exciting to tell you!

Some of you guys sent me messages telling me that they wish I’d still be as active in the Concrete5 community as I was a while ago. I was really great to hear that, it’s always good to know that someone appreciates your work. However, truth is, I’m still quite active, just not so much in the forums – there’s a good reason or two for that!

First, I have been rather busy doing Oracle and ERP related work which has nothing to do with Concrete5 at all. However, I’ve been spending quite a few evenings, nights and weekends working on a huge tutorial about Concrete5, more like a “book”! I was contacted by Packt Publishing in June and stared writing shortly after that. I’m currently working on the drafts of the last chapters, I’ll then go through the reviews and after that the people are Packt are going to make sure that everything looks and reads smoothly. However, you can already get access to the first chapters because the book has been accepted as a RAW book, just have a look at https://www.packtpub.com/create-and-customize-your-own-website-with-concrete5-beginners-guide/book. You’ll get access to each chapter as it gets written in an unfinished state.

The book is aimed for people knowing web technologies like PHP, JavaScript, HTML and CSS but without Concrete5 experience. It starts rather easy, for some of you too easy I assume but different readers, different skills. It the continues with a custom theme and lots of custom templates for some Concrete5 core blocks. We then look at building blocks, packages and a simple dashboard extension which allows you to have a look and modify your files on the server. Making it easier (and a bit dangerous) to quickly modify your Concrete5 configuration or theme files if you’re out on business without having the FTP credentials with you.

I hope you like it! The final and printed book is expected to be available in April!

Writing a Book

A few words about my experience writing a book. First of all, I had quite a few doubts, especially since English is not exactly my first language. I knew that I could explain myself in English in a way most people understand what I’m trying to say but still.. The people at Packt convinced me that this is not going to be a problem, especially since you never write a book which gets printed without having someone else having a look at it.

After my first doubts, things started very quickly and have gotten a bit stressful from time to time. There’s a deadline for each chapter to assure that everyone involved in the project is able to do their part in time. Working on a book like I do isn’t a fulltime job, for most authors at Packt it’s an evening and weekend job. This makes it sometimes a bit hard to meet all the deadlines with the result that things can be a bit stressful, especially if some unexpected things happen, at work or in your personal life. Nonetheless, I think it’s absolutely worth the effort, the imagination of finding your own book in your postbox or your favorite bookstore is awesome and drives you to keep working on the book.

Having a tight deadline for every chapter can also be really helpful, especially if you’re a bit like me. Whatever I do, I’d like to spend as much time on it as possible to get the best result possible. It also doesn’t happen very often that I think something is perfect… No matter what I do, having a limited amount of time is beneficial. Whenver I wrote a tutorial I told someone that it’s going to be online the next day and it usually was. Being on time is rather important, probably a disease I’ve got due to the fact that I’m Swiss. It’s pretty much the same with the book, you start writing on a chapter and the closer you get to meet the deadline, the more stressful things are but you feel reliefed once you’ve sent the mail, even if you don’t think your work’s as good as it should be.

If you ever get the chance to write a book, make sure you like writing, make sure you have some time or be prepared to sleep less ;-) It’s a great experience!

Concrete5 – Using TinyMCE Templates

The Concrete5 content block uses TinyMCE as its WYSIWYG editor. Thanks to this decision, we are able to use several plugins most Concrete5 users haven’t thought about.

One feature I really like is the “template” plugin which allows you to create html snippets which you can insert into the content block. In this tutorial I’m going to show you, how you can create a simple 2 and 3 column table template.

TinyMCE Configuration

You’ll find almost anything you have to know on this page: http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template. But luckily for you, I’m going to make this even easier for you.

First, you have to go to the Dashboard – Sitewide Settings. In the bottom right corner, you can activate a “Custom” configuration for the rich text editor. Once you’ve enabled it, it will show you some options. What do we need to activate the TinyMCE templates:

  • We have to load the template plugin
  • There must be a button to display the template dialog
  • We have to create at least one template
theme : "concrete", 
plugins: "inlinepopups,spellchecker,safari,advlink,template",
editor_selector : "ccm-advanced-editor",
spellchecker_languages : "+English=en",	
theme_concrete_buttons1 : "template,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect",
theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor",
theme_concrete_blockformats : "p,address,pre,h1,h2,h3,div,blockquote,cite",
theme_concrete_toolbar_align : "left",
theme_concrete_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
theme_concrete_font_sizes : "1,2,3,4,5,6,7",
theme_concrete_styles: "Note=ccm-note",
spellchecker_languages : "+English=en",
template_templates : [
	{
		title : "2 Columns",
		src : "themes/yourTheme/templates/2_columns.html",
		description : "Adds a 2 columns table"
	},
	{
		title : "3 Columns",
		src : "themes/yourTheme/templates/3_columns.html",
		description : "Adds a 3 columns table"
	}
]

There’s one thing you probably have to change. In the two templates I’ve added, there’s a hardcoded path which won’t work on your site. Make sure it points to an existing directory. The content of the html file is rather simple. I modified the example for TinyMCE to make it look like this:

<!-- This will not be inserted -->
<div class="mceTmpl">
<table width="98%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">HEADER 1</th>
<th scope="col">HEADER 2</th>
</tr>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</table>
</div>

How you can insert an HTML snippet

You’re already done, but where can you find the snippets? We you add a new content block, you’ll see a new button:

When you click on this button, you’ll see a dialog where you can select the template:

Unfortunately, the insert button is a bit hidden, you have to scroll down to insert the template. You can insert as many snippets into one content block as you want:

I hope you like it and thanks for completely reading this tutorial!

Linux Shell in a Browser

If you’re a *unix admin you probably like SSH a lot. Even if you have to work on a Windows computer you can simply download a small tool like Putty and you’re ready to work on your server. However, there are situations where not even Putty works – if you’re behind a firewall that filters the outgoing traffic as well. It usually makes sense to block outgoing SSH traffic in a big company because you could easily create an encrypted tunnel to move secret data to any server you want.

But there’s another way to access your server using SSH like tools without having to worry about encrypted tunnels or any other threats SSH could cause. It’s called shellinabox and can be found on Google Code.

If you’re working with debian like I do, you can even download a prebuilt deb file.
wget http://shellinabox.googlecode.com/files/shellinabox_2.10-1_i386.deb
dpkg -i shellinabox_2.10-1_i386.deb

The installer creates an init script located in /etc/init.d/shellinabox. As soon as it has been started you can access your shell using any webbrowser using an address like this: https://localhost:4200. But the port 4200 is usually not accessible if you’re working behind a firewall that blocks SSH traffic. Let’s use apache to redirect traffic from HTTPS to 4200. We have to enable mod_proxy if it’s not already active:

/etc/apache2/mods-enabled
ln -s ../mods-available/proxy.conf
ln -s ../mods-available/proxy.load
ln -s ../mods-available/proxy_http.load

Edit the site file where you want to add your shell, I used /etc/apache2/sites-available/default-ssl and added these lines:
<Location /shell>
ProxyPass http://localhost:4200/
Order allow,deny
Allow from all
</Location>

Shellinabox uses https by default as well and is accessible by any ip address. We want to change that, let’s edit this file /etc/init.d/shellinabox and add SHELLINABOX_ARGS (the last line in the following box):
# Set some default values
SHELLINABOX_DATADIR="${SHELLINABOX_DATADIR:-/var/lib/shellinabox}"
SHELLINABOX_PORT="${SHELLINABOX_PORT:-4200}"
SHELLINABOX_USER="${SHELLINABOX_USER:-shellinabox}"
SHELLINABOX_GROUP="${SHELLINABOX_GROUP:-shellinabox}"
SHELLINABOX_ARGS="--localhost-only --disable-ssl"

If you now restart all the services “/etc/init.d/shellinabox restart” and /etc/init.d/apache2 restart”, you’re shell can be accessed by https://localhost/shell from anywhere you want!