|
|
| Line 27: |
Line 27: |
|
| |
|
| == Create snippets == | | == Create snippets == |
| | {| |
| | |valign="bottom" align="center"|[[File:Man2 create snippet.png|none|frame|lorem ipsum]] |
| | |valign="bottom" align="center"|[[File:Man2 create snippet2.png|none|frame|lorem ipsum]] |
| | |valign="bottom" align="center"|[[File:Man2 create snippet3.png|none|frame|lorem ipsum]] |
| | |} |
|
| |
|
| | [[File:Man2 create snippet4.png|left|frame|lorem ipsum]] |
| | lorem ipsum |
| | {{clear}} |
|
| |
|
| == old custum menu == | | == Reorder snippets == |
| | | [[File:Man2 move snippet.png|left|frame|lorem ipsum]] |
| | | lorem ipsum |
| To customize items in the Custom menu tool bar, you will use the Custom menu element:
| | {{clear}} |
| | |
| [[File:Man2_custom_menu_access.png|none|frame|Accessing the Custom Menu]] | |
| | |
| The Custom menu → Edit custom menu... leads to the Custom Menu Editor. The Load new item allows you to load a new menu in case you have directly changed the custom_menu file located in the .bluefish directory within your HOME directory, while Reset item allows you to return to the default custom menu under the same circumstances.
| |
| | |
| The custom_menu file is created upon install Bluefish and corresponds to some default entries, the ones you can see in the Custom menu tool bar. These will give you an idea what can be done with the custom menu.
| |
| | |
| The custom menu operates ''only'' on elements of the Custom menu tool bar, and allows you to:
| |
| | |
| * add "often used" items to an existing menu
| |
| * search and replace patterns to the Replace menu
| |
| * create new menus
| |
| | |
| The Custom Menu Editor is the place where you make all changes to the custom menu. The location for entries in the custom menu is defined by their menu path in the Custom Menu Editor:
| |
| | |
| [[File:Man2_custom_menu_editor.png|none|frame|The Custom Menu Editor]]
| |
| | |
| It has four parts:
| |
| | |
| * The top one with all action buttons:
| |
| ** Add which adds new menu entries, once all necessary fields have been filled in
| |
| ** Apply which applies changes to an existing menu entry, once it has been edited
| |
| ** Delete which deletes the menu entry currently selected in the Menu path list
| |
| ** Close which discards changes
| |
| ** Save which saves the changes and exit the editor
| |
| * The Menu Path field below the buttons, to enter either an existing or a new menu path
| |
| * The Menu path list on the left side, which lists existing menu paths. A menu path looks like ''/Main menu/submenu/item'' or ''/Main menu/item''. Here's an extract of the default custom menu paths: <br/> [[File:Man2_custom_menu_default_path.png|none|frame|Extract of the default Custom Menu Path]]
| |
| * A custom part on the right side, whose contents changes depending of the type of menu. There are two types of items in the Custom Menu Editor:
| |
| ** the Custom dialog, which will insert a string, optionally based on values asked in a dialog
| |
| ** the Custom Find and Replace, which will run a replace, also optionally based on values asked in a dialog. Here's how the Custom Replace dialog looks like: <br/> [[File:Man2_custom_menu_replace_dialog.png|none|frame|The Custom Replace Dialog]]
| |
| | |
| == 7.1. Adding a custom menu dialog ==
| |
| The most simple custom dialog item has a menupath, for example ''/MySite/author'', and a Formatstring before, for example ''written by Olivier''. If you add this item, you can add this string by selecting the menu item.
| |
| | |
| '''Procedure VII.2. Adding a custom menu based on custom dialog'''
| |
| | |
| # Choose Custom menu → Edit custom menu... in the custom menu tool bar.
| |
| # Enter <tt>'''/MySite/author'''</tt> in the Menu Path field of the Custom Menu editor.
| |
| # Enter <tt>'''written by Olivier'''</tt> in the Formatstring Before field located on the right.
| |
| # Click on the Add button at the top.<br/> Notice that upon adding the new entry, it is listed at the bottom of the Menu path list: <br/> [[File:Man2_custom_menu_add_basic.png|none|frame|A new Custom Entry in the Menu Path List]]
| |
| # Click on the Save button. This will add the menu to the Custom menu tool bar: <br/> [[File:Man2_custom_menu_basic_result.png|none|frame|A new Menu in the Custom Menu Tool Bar]]
| |
| | |
| Note that the new menu is placed at the right end of the custom menu tool bar. When closing Bluefish and relaunching it, it will be placed in alphabetical order, except that the Replace menu will always be at the far right side.
| |
| | |
| <nowiki>In another example, you have a string you often need to set before and after some block of text, for example <div class="MyClass">YourBlockOfText</div>. To do it:</nowiki>
| |
| | |
| # Open the Custom Menu Editor
| |
| # Enter <tt>'''/MySite/div with class'''</tt> in the Menu Path field
| |
| # <nowiki>Enter <div class="MyClass"> in the </nowiki>Formatstring Before field
| |
| # <nowiki>Enter </div> in the </nowiki>Formatstring After field
| |
| # Click on Add, then on Save. The item will appear in the menu.
| |
| | |
| If you select some text:
| |
| | |
| [[File:Man2_custom_menu_div_before.png|none|frame|A Block of selected Text before Activating the Menu]]
| |
| | |
| And activate this menu item, the first bit of text is now added before the selection, and the second bit after the selection:
| |
| | |
| [[File:Man2_custom_menu_div_after.png|none|frame|A Block of Text after Activating the Menu]]
| |
| | |
| Suppose you want to improve this last example. You have both MyClass1 and MyClass2 and want to be able to choose the desired class when activating the menu. Here's how to do it:
| |
| | |
| # Open the Custom Menu Editor
| |
| # Browse the Menu path list to retrieve the /MySite/class with div entry and click on it to make appear its components in the Menu Path and Custom Dialog fields
| |
| # Click on the top arrow of the Number of Variables pop up menu to get 1 in the field. As you see a Variables entry appears where you can enter the name for variable %0. As name we enter ''MyClass number''
| |
| # Now change the FormatString Before<nowiki> field to take this new variable into account, as following: <div class="MyClass%0"></nowiki>
| |
| # Click on Apply so that your changes will be taken in account, and click on Save to update the menu.
| |
| | |
| If you now activate this menu after having selected a block of text, you will be presented with a new dialog asking you for the value of ''MyClass number'':
| |
| | |
| [[File:Man2_custom_menu_div_dialog.png|none|frame|The new DIV with Class Dialog]]
| |
| | |
| After entering the desired value, the same process as before will occur, using the value you provided. Here we have entered 1 as value:
| |
| | |
| [[File:Man2_custom_menu_div_dialog_result.png|none|frame|The Block of Text after Entering the Value]]
| |
| | |
| {{tip|text=You can use the '''Return''' and '''Tab''' keys to format the output.}} | |
| | |
| Any variable can be used any times you want in the dialog.
| |
| | |
| == 7.2. Adding a custom replace dialog ==
| |
| Find and replace items are no different. The dialog has some more options, each of these options corresponds to the regular Replace dialog. Again you can use variables like %0, %1 etc. to make a certain menu item more flexible.
| |
| | |
| Say you want to add title tags to a selection in a HTML page so that the user agent could render it either as a tool tip or as spoken words. To ease the discussion we will work on the following snippet of code:
| |
| | |
| <nowiki><ul></nowiki>
| |
| <nowiki><li><a href="progsys01|">Process scheduling</a> - 26/10/2002</li></nowiki>
| |
| <nowiki><li><a href="progsys02|">Fork and Wait</a> - 02/11/2002</li></nowiki>
| |
| <nowiki></ul></nowiki>
| |
| | |
| We will transform it into the following one:
| |
| | |
| <nowiki><ul></nowiki>
| |
| <nowiki><li><a href="progsys01|" title="blah Process scheduling">Process scheduling</a> \</nowiki>
| |
| <nowiki>- 26/10/2002</li></nowiki>
| |
| <nowiki><li><a href="progsys02|" title="blah Fork and Wait">Fork and Wait</a> \</nowiki>
| |
| <nowiki>- 02/11/2002</li></nowiki>
| |
| <nowiki></ul></nowiki>
| |
| | |
| where blah is any text you want.
| |
| | |
| The initial rendering:
| |
| | |
| [[File:Man2_custom_menu_page_before.png|none|frame|The HTML Page before the Transformation]]
| |
| | |
| will be transformed as is:
| |
| | |
| [[File:Man2_custom_menu_page_after.png|none|frame|The HTML Page after the Transformation]]
| |
| | |
| <nowiki>To do this, we need to express the <a href="yoururl">yourstring</a> part of the initial snippet of code as a Perl regular expression (see </nowiki>[[Man 2 ch06s05#5.3. Find and Replace Using Regular Expressions|Section 5.3, “Find and Replace Using Regular Expressions”]] for full details):
| |
| | |
| * a href=" will be expressed as is and embedded into parentheses to retrieve it as \0 variable.
| |
| * <nowiki>yoururl will be expressed as ([[Man 2 ^"]]+) to match one or more non double quote characters and retrieve it as \1 variable.</nowiki>
| |
| * The second double quote will be expressed as is and embedded into parentheses to retrieve it as \2 variable.
| |
| * The second > sign will be expressed as is and embedded into parentheses to retrieve it as \3 variable.
| |
| * <nowiki>yourstring will be expressed as ([[Man 2 ^>]]+) to match one or more non > characters and retrieve it as \4 variable.</nowiki>
| |
| * <nowiki></a> will be expressed as is and embedded into parentheses to retrieve it as \5 variable.</nowiki>
| |
| | |
| <nowiki>Thus, the search string will be: (<a href=")([[Man 2 ^"]]+)(")(>)([[Man 2 ^>]]+)(</a>)</nowiki>
| |
| | |
| <nowiki>The replace string should be of the form: <a href="yoururl" title="yourvariablestring yourstring">yourstring</a></nowiki>
| |
| | |
| Expressed as a regular Perl replacement expression, it will be as simple as: \0\1\2 title=\2%0 \4\2\3\4\5 where %0 will match yourvariablestring, that is the value entered in the Title field of the Replace dialog at activating time.
| |
| | |
| '''Procedure VII.3. Adding a custom menu based on replace dialog'''
| |
| | |
| # Choose Custom menu → Edit custom menu... in the custom menu tool bar.
| |
| # Browse the Menu path list to retrieve the <nowiki>/Replace/Convert in Selection/<td> to <th></nowiki> and click on it to make appear its components in the Menu Path and Custom Replace fields.
| |
| # Change the Menu Path to /Replace/Anchor/Add Title.
| |
| # Click on the top arrow of the Number of Variables pop up menu to get 1 in the field. Enter Title in the %0 Variables field.
| |
| # Change the Matching pop up menu to perl regular expressions.
| |
| # Change the Search Pattern field like this: <br/> <nowiki>(<a href=")([[Man 2 ^"]]+)(")(>)([[Man 2 ^>]]+)(</a>)</nowiki>
| |
| # Change the Replace String field like this: <br/> \0\1\2 title=\2%0 \4\2\3\4\5
| |
| # Click on the Add button.<br/> The Custom replace dialog should have the following appearance: <br/> [[File:Man2_custom_menu_replace_dialog_new.png|none|frame|]]<br/> '''Figure VII.34. The Custom Menu Replace Dialog filled in'''
| |
| # Click on the Save button.
| |
| | |
| To use the new menu item, select the lines to be changed in the HTML file and activate Replace/Anchor/Add Title in the custom menu bar. Fill in the dialog as follows:
| |
| | |
| [[File:Man2_custom_menu_add_title.png|none|frame|The Add Title Dialog]]
| |
| | |
| Click OK to proceed.
| |
| | |
|
| |
|
|
| |
|
