Update example code in the Directory to Vaadin 7 style

The current example code in the directory is derived from Vaadin 6 era. It should be updated to Vaadin 7. I used this code snippet to try the editor:

    CKEditorConfig config = new CKEditorConfig();
    config.useCompactTags();
    config.disableElementsPath();
    config.setResizeDir(CKEditorConfig.RESIZE_DIR.HORIZONTAL);
    config.disableSpellChecker();
    config.setToolbarCanCollapse(false);
    config.setWidth("100%");

    final CKEditorTextField ckEditorTextField = new CKEditorTextField(config);
    layout.addComponent(ckEditorTextField);

    final String editorInitialValue = 
        "<p>Thanks TinyMCEEditor for getting us started on the CKEditor integration.</p><h1>Like TinyMCEEditor said, &quot;Vaadin rocks!&quot;</h1><h1>And CKEditor is no slouch either.</h1>";

    ckEditorTextField.setValue(editorInitialValue);
    //ckEditorTextField.setReadOnly(true);
    ckEditorTextField.addValueChangeListener(new Property.ValueChangeListener() {

        public void valueChange(ValueChangeEvent event) {
            Notification.show("CKEditor contents: " + event.getProperty().getValue().toString());
        }
    });
    Button button = new Button("Hit server");
    layout.addComponents(button);

OpenESignForms / vaadin-ckeditor

Update example code in the Directory to Vaadin 7 style #51