com.smartgwt.client.docs

Interface SkinEditor

public interface SkinEditor

Skin Editor

Rapid skin customization

Isomorphic provides a visual Skin Editor tool which allows for rapid, bulk customization of skin details like colors, borders and fonts. With this tool, you can create a new skin based on an existing one, customize it and then export it to a zip file that you can drop into any SmartGWT project.

Your changes are saved in an intermediate database so the skin can be updated over time. When you are happy with your skin, export it to a zip file, drop it into your project skins/ directory and load it as you would any other skin. See below for details on exporting.

You can access the Skin Editor in one of two ways:

Online

The Skin Editor is available online as a single-user tool at smartclient.com/themes. This link runs against the latest public release and is available to customers with a Pro or better license of that release. Note that this is a single-user version of Skin Editor and does not support some team features like sharing your design with other users.

For Skin Editor team support, registered users can access the tool via Reify, Isomorphic's low-code platform. The Skin Editor for Reify allows skin-designs to be shared among users and changes you make to your skins are reflected right away within Reify. Note that this version of the tool may be running bleeding-edge code, more recent then the current public release.

Locally

If you have a Pro or better license, inheriting module com.smartgwtee.tools.Tools will make the Skin Editor available in your SmartGWT project. Only skin resources inherited by your project will be available for editing so you may want to add additional dependencies to your module file. For example, to make the Obsidian skin available, add:

<inherits name="com.smartclient.theme.obsidian.ObsidianResources"/>

Always run a GWT compile after any module file change to ensure it's picked up, and then navigate to {project_name}/tools/skinTools/skinEditor.jsp.

Prerequisites

Using Skin Editor locally requires the following additional steps:

• the builtin DataSource userSkin must be imported to your Database using the AdminConsole. This DataSource is used to store user skins until export
• both Ruby and Compass need to be installed on your computer, and in the PATH. During saves, Skin Editor uses Compass to recompile skin-CSS, via an operation on the userSkin DataSource which invokes compass compile 'path-to-skin-template-dir' on the server.

Exporting Skins

To export a skin, load it in the Skin Editor and click the "Export" button to download the skin in a zip file. To use the skin, extract the zip into your project skins/ directory and load it in your project in the usual way.

A skin exported in this way can be further edited locally in your project Skin Editor, if you have an appropriate license. Once extracted into the skins/ directory, it will appear in Skin Editor's list of user-skins and can be edited as normal, with changes being saved to disk rather than database. You might want to do this, for example, in order to make non-CSS configuration to the skin, via load_skin.js. While future versions of Skin Editor will support non-CSS skin configuration, these features are not yet available.

Base Skins

When you create a new skin in Skin Editor, the first step is to choose a Base skin to use as a starting-point - by default, these are all builtin Isomorphic skins, but you can add your own to the list by selecting Export as a Base skin in the Skin Editor.

You might want to do this if you create a customized skin and you want to be able to generate several variations on it - like changing colors, to make the color schemes of multiple customers that you are creating applications for.