public interface SkinEditor
With this tool, you can create a new skin
based on an existing one and make styling customizations to it - your changes are saved in an
intermediate database so the skin can be updated over time. If the skin exists in a local SDK
Skin Editor and your project uses the
Server, it can be loaded by pages outside of the Skin Editor in the same way as any other
skin. The server delivers your saved Skin Editor customizations from the database as if the
skin existed on disk.
Once complete, you can choose to leave your skin in the Skin Editor database, if it's local, or export it to a zip file that can be dropped into your project skins/ directory, along with other framework skins. If you export as a "Base" skin, your customizations are exported as base config and the skin is no longer editable in the Skin Editor - if you export as a "User" skin, you can extract the zip to another environment where it will continue to be editable if that environment has a local Skin Editor, by selecting it from the "Edit Skin" picker. This means that the exported zip must not be extracted into the same environment as the Skin Editor, since skin-names must be unique. See below for details on exporting.
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
Reify. Note that this version of the tool may be running
bleeding-edge code, more recent then the current public release.
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:
Always run a GWT compile after
any module file change to ensure it's picked up, and then navigate to
isc_userSkin dataSource and those on-disk.
tabs, each housing trees with cascades of skin
settings such as colors, borders and padding. Above these is a
ColorItem labelled "Highlight Color", which is the
main color from which most of the colored parts of the skin inherit - for example, background
ListGrid headers and rollovers, backgrounds
and shadows of buttons of various types, and various cases where text is highlighted, such as
changes. Above this ColorItem are several functional buttons: "Delete", which permanently
removes a skin; "Export", which allows the skin to be exported to a zip file for distribution;
and "Save", which saves your changes to database or file-system where you skin exists and
recompiles the underlying stylesheet to include your changes.
As a rough guide, a good way to start is as follows:
The Skin Editor only allows for editing variables
which are used to populate the base skin's SASS template. It will incorporate your changes to
those template variables and recompile the content for the skin's stylesheet,
skin_styles.css, but it does not currently allow for customizing the other parts
system/helpers/fonts directory. These are the
fonts available in the Skin Editor.
isc_userSkin must be imported to your Database using the
AdminConsole. This DataSource is used to store user skins until
recompile skin-CSS, via an operation on the
isc_userSkin DataSource which invokes
compass compile 'path-to-skin-template-dir' on the server.
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.
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.