WEBfactory 2010

WEBfactory 2010 SmartEditor

WEBfactory 2010SmartEditor is the most optimized tool for designing visualizations and user interfaces for WEBfactory 2010 applications. With the ability to adapt the UI language to the users preference and an intuitive layout, SmartEditor makes web-application development as simple as a drag-and-drop operation.

The enhanced SmartEditor user interface allows the user to focus on the content, providing a simple three steps workflow schematic: take what you need from the left side, place it in the middle and configure it from the right side.

SmartEditor 's UI is simple and intuitive, based on the Microsoft Windows Ribbon UI.

WF_SE_650.jpg

WEBfactory 2010SmartEditor User Interface

The following articles that describe the WEBfactory 2010SmartEditor are split in four categories. Click on any of the below categories to continue reading:

WEBfactory 2010SmartEditor User Interface

The SmartEditor window is divided in tool panels and canvas. The tool panels provide the main functionality of the SmartEditor, like navigation, toolbox, properties or logs. The page area is where the actual design of the visualization is happening.

The User Interface is flexible, all the panels are able to be pinned/unpinned on the sidebar. Pinning/unpinning a panel is made by clicking the pin/unpin button in the top-right corner of the panel. The panels can be closed using the X - close button next to the pin/unpin button, and can be later opened from the View tab from the Ribbon.

WF_SE_002_edit.png

WEBfactory 2010SmartEditor tool panels and canvas

WEBfactory 2010SmartEditor User Interface: The Ribbon

Commonly used by Microsoft starting with Office 2007 up to Windows 8, the Ribbon is the tabbed toolbar of the application.

WF_SE_651.jpg

WEBfactory 2010SmartEditorRibbon - Home

In WEBfactory 2010SmartEditor , the ribbon has two tabs: Home and View.

The Home tab is the default tab of the Ribbon and it contains the basic tools, separated in 5 categories:

  • File: provides the basic functionality of creating a new project, opening an existing project, saving a opened project, and saving a opened project as another project (using a different name or file format).

  • Clipboard: provides the basic functionality of copying to clipboard, pasting from clipboard, cutting or deleting objects.

  • Project: provides the particular functionality of running the current project in a preview mode, adding new template pages to the current project, adding navigation pages to the current project or removing pages from the current project.

  • Arrange: provides the particular functionality of aligning the objects from the page to a certain point or line. The alignment can be either vertical (1) or horizontal (2), and relative to the limit of one of the objects or to the calculated center of a group of objects.

    The arrange category provides the option of equal distribution of objects either vertically or horizontally (3), or placing objects in the foreground (4) or background (5).

    The last buttons in the Arrange category provide the possibility of scaling an object to the same size as another selected object. The scaling can be made either horizontal, vertical or both (6).

  • Shapes: provides the particular functionality of creating shapes, by dragging them onto the page area. The shapes can be either static or animated (with animated fill).

The View tab is divided in three categories: Tools , Snapping and Grouping and Language.

  • Tools: provides the option of hiding or displaying the tools panels in the main window of SmartEditor . The Toolbox, Property Inspector, Explorer and Build Log can be turned on or off by clicking on the corresponding buttons in the Tools category.

  • Snapping and Grouping: provides the toggles for grid lines, ruler guides, and for snapping to the grid or ruler.

  • Language: provides the option of changing the display language of SmartEditor .

WF_SE_652.jpg

The View tab

Untitled1.png

The Language options

All the project handling commands can be accessed by clicking on the Ribbon Orb (New Project, Open Project, Save, Save As, Exit and Recent Projects).

WF_SE_003.png

The Ribbon Orb is located in the top-left corner of the window

Quick Access for Save, Undo and Redo is located in the top part of the Ribbon, on the right side of the Orb.

WF_SE_006.png

Quick Access tool bar, the Customize menu

By clicking on the down arrow next to the Quick Access tool bar, the user can customize the appearance of the Ribbon, by displaying the Quick Access tool bar below or above the Ribbon, or minimizing the Ribbon.

WEBfactory 2010SmartEditor User Interface: The Toolbox

The Toolbox is an expanding menu containing all the controls available for creating a visualization with WEBfactory 2010SmartEditor .

WF_SE_008.jpg

WEBfactory 2010SmartEditor Toolbox

The controls from the Toolbox are sorted in 20 categories, using suggestive names. Each category of controls is divided in sub-categories, for an easier sorting. The categories and sub-categories can be expanded by clicking on the expand/collapse arrow in front of the name.

For example, the Static Symbols category has 12 sub-categories, each with its own controls.

WF_SE_8.jpg

The controls under the Arrows sub-category contained in the Static Symbols category.

To place a control on the page, click the chosen control and drag it on to the page. Complex visualizations can be built by combining the controls from the Toolbox.

WEBfactory 2010SmartEditor User Interface: The Explorer

The Explorer panel is the tool that displays the whole structure of the project. The Explorer is structured as a child-parent tree, just like the Toolbox.

WF_SE_009.jpg

The Explorer panel (on the left side, below the Toolbox), displaying the list of elements and the child-parent relation between them

In the example above, it is easy to see the elements in the example project listed in the Explorer panel (below the Toolbox).

The Page of the project contains one Navigation Toggle (WFNavigationToggle1), one Navigation Target (WFNavigationTarget) and three Navigation Buttons (WFNavigation, WFNavigation1 and WFNavigation2). The Explorer panel lists the existing elements in the correct order and with the current relations between them.

WF_SE_010.jpg

The Page containing the five elements

The main functionality of the Explorer panel is to organize the project elements.

WF_SE_011.png

Contextual menu in the Explorer panel

The contextual menu can be opened by right clicking on any of the elements of the project. Operations like renaming, cutting, deleting, copying and pasting can be executed to the selected element using the contextual menu. Each of this operations have assigned a specific shortcut (eg. Copy - Ctrl + C).

The other three options available in the contextual menu are Add Template Page, Add Navigation Page and Remove Page.

Add Template Page - adds a Template Page to the project. The Template Page is a pop-up page used by some specific WEBfactory 2010 controls.

More details can be found in the WEBfactory 2010SmartEditor Controls section of this guide.

Add Navigation Page - this option is active only when right clicking on a WFNavigationTarget control (the WFNavigationTarget control is basically a frame that requires a SubPage to hold its content).

By selecting Add Navigation Page, a new SubPage will be added to the project, having the same size as the WFNavigationTarget frame. All the controls inserted in the new Navigation Page/SubPage will be displayed in the WFNavigationTarget control, in the main page. The Navigation Page will appear as a SubPage in the Explorer panel.

More details can be found in the WEBfactory 2010SmartEditor Controls section of this guide.

WF_SE_011_2.jpg

Navigation Page (SubPage), child of a WFNavigationTarget control, containing a Language Selector control.

Remove Page - removes any of the above page types added to the project.

WEBfactory 2010SmartEditor User Interface: The Build Log

The Build Log panel displays the information behind the process of building the application designed in WEBfactory 2010SmartEditor . It lists the details of the process, helping the user find the eventual errors or warnings that may occur during the build process.

WF_SE_012.jpg

WEBfactory 2010SmartEditor Build Log

Just like all the other panels, the Build Log panel can be pinned or turned off using the buttons form the top-right corner.

WEBfactory 2010SmartEditor User Interface: The Property Inspector

The Property Inspector panel is the most used panel from WEBfactory 2010SmartEditor . It lists the properties of all the selected object and enables the user to change or adjust them to fit the project.

WF_SE_653.jpg

The Property Inspector displaying the properties of WFLabel1 label.

The example above shows the Property Inspector panel listing the properties of the label WFLabel1. All the controls in WEBfactory 2010SmartEditor can be edited here.

To edit the properties of a control, drag the control onto the Page and click on it. The Property Inspector will display the properties listed under categories.

The properties listed are divided in categories, each concerning specific set of properties. The categories listed by the Property Inspector depend on the selected control. Some controls may have more properties than other, thus, the Property Inspector will display additional categories or properties.

There are some properties that are common to all controls, some of those being listed under the Appearance category, Misc category, Security and Template.

More detailed information about the controls properties in the WEBfactory 2010SmartEditor Controls section.

A particularity of the Property Inspector panel is the top bar. It provides the possibility of filtering the properties using various options.

WF_SE_014.png

The filtering options of the Property Inspector

  • In order to access the filtering options, click on the symbol on the right side of the Display Name text, in the top bar of the Property Inspector.

  • Select the filtering conditions, or create a logical condition by entering the logics of the filtering in the text fields below.

  • Select Filter to apply the filtering or Clean Filter to cancel the filtering options.

  • Click anywhere outside the filtering dialog to close it.

WEBfactory 2010SmartEditor User Interface: The Page

The Page in WEBfactory 2010SmartEditor is the work area, or the canvas. Every other panel in SmartEditor revolves around the Page panel.

All the controls are dragged and arranged on the Page. Every item placed on the Page will be build and run when building the visualization.

WF_SE_014_2.jpg

WEBfactory 2010SmartEditorPage panel

Adding controls to the page is done by dragging and dropping controls from the Toolbox panel.

The whole content of the page, and the child-parent relations between the elements of the content can be seen in the Explorer panel.

Grid and Ruler can be enabled on the Page. To enable the Grid and Ruler, select the View tab in the Ribbon and toggle on the grid lines and ruler guides, from the Snapping and Grouping category (see The Ribbon for more information).

The grid size and the ruler size can be adjusted from the bottom bar of the Page.

WF_SE_015.jpg

The Page bottom bar

Zoom controls are also available in the Page bottom bar. The zoom can be controlled using three methods:

  • Using the zoom bar and the + and - buttons;

  • Using the 100% button for quick zooming to 100%;

  • Using the magnifying glass button next to the 100% button, to fit the page in the available space on the screen.

WEBfactory 2010SmartEditor Project Settings

The SmartEditor Project Settings allow the user to configure the appearance and behavior of the entire SmartEditor project. The Project Settings are available in the Property Inspector while the project (the root of the structure) is selected in the Explorer panel.

Capture1839.jpg

SmartEditorProject Settings

WEBfactory 2010SmartEditor Project Settings are available from version 3.4. Previous versions of WEBfactory 2010SmartEditor will not comply.

The Project Settings are grouped in six different categories:

Appearance

The Appearance category contains settings that allow the customization of the HTML page background at run time, the customization of the project pages background and stretching and the availability of the Silverlight contextual menu.

Capture1840.jpg
  1. HideSilverlightContextMenu - hide or show the Silverlight contextual menu at run time.

  2. HtmlPageBackground - allows the user to choose the color of the HTML page background at run time.

  3. PageDefaultBackground - allows the user to choose the color of the project pages. The pages that exist prior to selecting the color will not be affected. Only the new pages will have the default color selected here.

  4. StretchPages - the project pages stretch to fit the available space at run time. The contents of the pages are scaled automatically.

Misc

The Misc category displays project information like the project folders location, project name and web services URI. The displayed settings are not directly editable.

Capture1843.jpg
  1. Name - the name of the current SmartEditor project. Can be edited using the Save As... dialog.

  2. ProjectFolder - the complete path of the folder containing the current project. Can be edited using the Save As... dialog.

  3. ProjectFullPath - the complete path of the project. Can be edited using the Save As... dialog.

  4. WebProjectFolder - the complete path of the folder containing the current web project. Can be edited using the Save As... dialog.

  5. WebServicesBaseUri - the URI of the web services. By default, the web service URI is http://localhost:80/. To edit the web services connection, use the settings available in the Server Settings category.

Out of Browser

The Out of Browser category groups the settings that allow the user to enable and configure the Out of Browser option for the application built from the current SmartEditor project.

Capture1845.jpg
  1. EnableOutOfBrowser - enables the out of browser capability of the application at run time. If this option is enabled, the application can be installed on the local machine and used as a stand-alone application instead of using is via a web browser.

  2. Title - the title of the application displayed in the title bar.

  3. Shortcut - the name of the application displayed on the shortcut.

  4. Description - the description of the application.

  5. Width - the width of the application window.

  6. Height - the height of the application window.

  7. SetLocation - if enabled, this option allows the user to set the default location of the application window on the computer screen.

  8. Top - available only if SetLocation is enabled. The distance from the top of the display.

  9. Left - available only if SetLocation is enabled. The distance from the left side of the display.

  10. Icon16x16 - the path to the application icon with the size of 16 pixels wide and 16 pixels high.

  11. Icon32x32 - the path to the application icon with the size of 32 pixels wide and 32 pixels high.

  12. Icon48x48 - the path to the application icon with the size of 48 pixels wide and 48 pixels high.

  13. Icon128x128 - the path to the application icon with the size of 128 pixels wide and 128 pixels high.

  14. UseGPUAcceleration - allows the user to enable the GPU rendering for the out of browser application.

  15. ShowInstallMenu - displays the Install application on this computer option in the contextual menu. The option is available at run time if the contextual menu is enabled.

  16. RequireElevatedTrust - requires administrator privileges when installing the out of browser application.

  17. WindowsStyle - the visual style of the application window.

Server Settings

The Server Settings category groups the options that allow the user to parametrize the web services connection.

Capture1847.jpg
  1. PhysicalName - the physical path of the web services, localhost by default.

  2. Port - the port used in the web services connection, 80 by default.

  3. Protocol - the protocol used for web services connection. Can be either HTTP or HTTPS.

  4. ServerName - the name of the web services connection.

States

The States category contains the settings for the visual states colors and blink properties of the controls that have visual states in SmartEditor.

Capture1848.jpg
  1. StateDefaultBackground - the default background color for the visual states.

  2. StateDefaultForeground - the default foreground color for the visual states.

  3. StateFastBlinkSpeed(s) - the blinking speed, measured in seconds, when the Blink option of the state is set to Fast.

  4. StateMediumBlinkSpeed(s) - the blinking speed, measured in seconds, when the Blink option of the state is set to Medium.

  5. StateSlowBlinkSpeed(s) - the blinking speed, measured in seconds, when the Blink option of the state is set to Slow.

Theming

The Theming category holds the settings that allow the user to enable and parametrize the theming mechanism in the SmartEditor project.

The Theming mechanism in WEBfactory 2010SmartEditor allows the user to select different visuals for the whole application, based on established conditions.

Click here to learn more about working with themes in WEBfactory 2010 Smart Editor.

Capture822.jpg
  1. EnableThemeSwitching - allows the user to enable or disable the theming mechanism in WEBfactory 2010SmartEditor .

  2. Themes - allows the user to define themes and choose the default theme. The default theme will be applied when no ThemeConditions are active.

    Capture823.jpg

    Defining the themes in SmartEditor

  3. ThemableBrushes - allows the user to create the brushes contained by the defined themes. The brushes can be applied to all brush properties of the controls (Background, Foreground, BorderBrush, etc). Each brush must be defined for each available theme.

    Capture824.jpg

    Defining brushes for themes

  4. ThemeConditions - allows the user to create the conditions based on which the themes will be applied. The ThemeConditions are based on a comparation between a signal value and a constant value. The available comparators are: Different, Equal, GreaterThan, GreaterThanOrEqual, LessThan and LessThanOrEqual. ThemeConditions must be defined for every available theme.

    Capture825.jpg

    Defining the theme conditions

WEBfactory 2010SmartEditor Master Pages

The Master Pages in WEBfactory 2010SmartEditor are projects ready to be used as template projects. The Master Pages are available to the user at the New Project dialog in SmartEditor .

Master Pages are available in WEBfactory 2010SmartEditor version 3.4 and above.

Click here to learn more about how to create SmartEditor Master Pages.

Capture849.jpg

New project with Master Page in SmartEditor

The structure of Master Pages

The SmartEditor Master Pages can be found in the WEBfactory 2010 installation folder at WEBfactory 2010 \SmartEditor \ProjectTemplates. The .sept files, representing the Master Pages, can be unpacked using WinRar (or the .sept extension can be changed to .rar).

Capture850.jpg

Unpacking a Master Page file

A SmartEditor Master Page is composed of:

  • Manifest.xml - the XML file that contains the version of the project template, the name and the description of the project template.

Capture851.jpg

The Master Page manifest.xml file

  • Icon.png - the image visible in the New Project dialog in SmartEditor .

  • Template project - the folder containing a SmartEditor project that is used as template.

Capture852.jpg

The contents of the Template folder - the template SmartEditor project

Master Page template project

The template project used in a Master Page is a normal SmartEditor project, saved with the name Template. The SmartEditor project can contain any controls and any setup.

The SmartEditor project used as template project ca also contain Navigation Pages (see example above, where Page.WFPage and Page_X.WFPage are template pages).

Inside the Template.WFProject file, the user has the ability to add a <MasterPage> tag that locks the content of the page that is used on (the Template.WFProject must be opened with a text editor, not with SmartEditor , in order to apply the master page tags). This tag, and the closing </MasterPage> tag, must be manually added after the SmartEditor project is saved (using the name Template).

The controls placed on a page marked with the <MasterPage> tag cannot be deleted, moved. Also, new controls cannot be added to the page!

Capture853.jpg

The <MasterPage> tag used in the template project

Using this tag, the contents of the page affected by this tag cannot be moved, resized or have the layout changed in any way. The only available changes to the contents of a page marked as MasterPage are the changes that don't involve the layout (Naming, Appearance, etc).

Capture854.jpg

The layout properties of the controls from the template project are disabled

WEBfactory 2010SmartEditor Keyboard Combinations and Shortcuts

WEBfactory 2010SmartEditor supports a range of keyboard shortcuts and combinations that allows the user to efficiently use the clipboard, the file system and the controls inside of a project.

Clipboard keyboard actions:
  1. Ctrl + C (Copy): Copies the current selection to clipboard.

    Ctrl-C.png
  2. Ctrl + X (Cut): Cuts the current selection and stores it in the clipboard.

    Ctrl-X.png
  3. Ctrl + V (Paste): Places the content of the clipboard on the selected surface.

    Ctrl-V.png
  4. Ctrl + Z (Undo): Reverts all the changes starting with the most recent. SmartEditor keeps in memory all the changes done since the beginning of the session and is able to revert all of them to their initial state.

    Ctrl-Z.png
  5. Ctrl + Y (Redo): Reverts the changes done the Undo action. Like the Undo functionality, the Redo is able to revert all the Undo actions in a session.

    Ctrl-Y.png
File system keyboard actions:
  1. Ctrl + N (New): Opens the New Project dialog and allows the user to create a new SmartEditor project. If used while in a SmartEditor project, the Confirm save project dialog will ask the user to confirm the saving of the current project or cancel the New action.

    Ctrl-N.png
  2. Ctrl + S (Save): Saves the current state of the SmartEditor project.

    Ctrl-S.png
  3. Ctrl + O (Open): Brings up the Open dialog and allows the user to open a SmartEditor project.

    Ctrl-O.png
Other SmartEditor keyboard actions:
  1. F2 (Rename): Allows the user to easily rename any control in the Explorer panel.

    F2.png
  2. Arrow Keys (Up, Down, Left, Right): Allow the user to move the current selection on the Page.

    Arrows.png
  3. Shift + Mouse drag (Left-click pressed and control selected): Moves the selected control keeping either the original X axis or Y axis. Used for free alignment.

    ShiftDrag.png
  4. Ctrl + Mouse drag (Left-click pressed and control selected): Moves the selected control while ignoring the grid snapping. Used for free alignment.

    CtrlDrag.png