nikawhite pushed a commit to branch master.
http://git.enlightenment.org/website/www-content.git/commit/?id=fe1e6db143253bf7eae098d3e6d10e8bcebfc037
commit fe1e6db143253bf7eae098d3e6d10e8bcebfc037
Author: Mykyta Biliavskyi <m.biliavs...@samsung.com>
Date: Tue Mar 29 09:49:24 2016 +0900
Add about page for Eflete project.
---
media/eflete-code-mode.png | Bin 0 -> 162957 bytes
media/eflete-demo-mode.png | Bin 0 -> 135099 bytes
media/eflete-groups.png | Bin 0 -> 10238 bytes
media/eflete-history.png | Bin 0 -> 108474 bytes
media/eflete-images.png | Bin 0 -> 210009 bytes
media/eflete-main.png | Bin 0 -> 344264 bytes
media/eflete-navigation.png | Bin 0 -> 126453 bytes
media/eflete-normal-mode.png | Bin 0 -> 143053 bytes
media/eflete-parts.png | Bin 0 -> 16618 bytes
media/eflete-projects.png | Bin 0 -> 44973 bytes
media/eflete-texts.png | Bin 0 -> 347389 bytes
media/icon-eflete.png | Bin 0 -> 24713 bytes
pages/about-eflete.txt | 142 +++++++++++++++++++++++++++++++++++++++++++
pages/about.txt | 1 +
14 files changed, 143 insertions(+)
diff --git a/media/eflete-code-mode.png b/media/eflete-code-mode.png
new file mode 100644
index 0000000..69af9ed
Binary files /dev/null and b/media/eflete-code-mode.png differ
diff --git a/media/eflete-demo-mode.png b/media/eflete-demo-mode.png
new file mode 100644
index 0000000..e1deac9
Binary files /dev/null and b/media/eflete-demo-mode.png differ
diff --git a/media/eflete-groups.png b/media/eflete-groups.png
new file mode 100644
index 0000000..229dc41
Binary files /dev/null and b/media/eflete-groups.png differ
diff --git a/media/eflete-history.png b/media/eflete-history.png
new file mode 100644
index 0000000..ade57f3
Binary files /dev/null and b/media/eflete-history.png differ
diff --git a/media/eflete-images.png b/media/eflete-images.png
new file mode 100644
index 0000000..6e7a6ef
Binary files /dev/null and b/media/eflete-images.png differ
diff --git a/media/eflete-main.png b/media/eflete-main.png
new file mode 100644
index 0000000..4857a19
Binary files /dev/null and b/media/eflete-main.png differ
diff --git a/media/eflete-navigation.png b/media/eflete-navigation.png
new file mode 100644
index 0000000..d3c8d3f
Binary files /dev/null and b/media/eflete-navigation.png differ
diff --git a/media/eflete-normal-mode.png b/media/eflete-normal-mode.png
new file mode 100644
index 0000000..13f98fc
Binary files /dev/null and b/media/eflete-normal-mode.png differ
diff --git a/media/eflete-parts.png b/media/eflete-parts.png
new file mode 100644
index 0000000..3db43f1
Binary files /dev/null and b/media/eflete-parts.png differ
diff --git a/media/eflete-projects.png b/media/eflete-projects.png
new file mode 100644
index 0000000..f4e96e5
Binary files /dev/null and b/media/eflete-projects.png differ
diff --git a/media/eflete-texts.png b/media/eflete-texts.png
new file mode 100644
index 0000000..a6b26d2
Binary files /dev/null and b/media/eflete-texts.png differ
diff --git a/media/icon-eflete.png b/media/icon-eflete.png
new file mode 100644
index 0000000..5c0e6a5
Binary files /dev/null and b/media/icon-eflete.png differ
diff --git a/pages/about-eflete.txt b/pages/about-eflete.txt
new file mode 100644
index 0000000..0e2d91b
--- /dev/null
+++ b/pages/about-eflete.txt
@@ -0,0 +1,142 @@
+~~Title: About Eflete~~
+==== Eflete ====
+
+[[download|Download Eflete Here]]
+
+{{ :icon-eflete.png?nolink|}}
+
+{{:eflete-main.png?&200 |}}
+== What is Eflete? ==
+
+Efl Edje Theme Editor is a rich graphical tool, that provide UI for edc markup.
+It is aimed to simplify creation and editing widgets styles. No one, for sure,
want to learn EDC syntax. Eflete was
+designed with mind, that target users are not just programmers but also
designers. Besides styles Eflete is also able
+to create and edit custom layouts. This is useful feature for developers which
creates applications layouts.
+
+== Eflete projects ==
+{{:eflete-projects.png?&200 |}}
+There are a lot of already existed projects, which are use edc collections for
theming or layouting. Or binaries, that
+compiled by edje_cc tool. For both cases Eflete has import wizards to help in
converting existing files into projects,
+that supported by theme editor.
+For new projects it is possible to select predefined widget styles. All
widgets in list contains a sets of groups, that
+required by Elementary library. User is free to modify those styles.
+It is possible to open existing project by File Selection tool. List of
recently opened projects provides fast one-
+mouse-click selection interface.
+
+NOTE: Eflete creates a specific file for each opened edj or edc-file. More
precisely - for new project or imported file
+Eflete creates a folder with project name, than copy imported file and create
specific file. This file has a .pro
+extension and Eflete used it for manipulations.
+
+
+Editor operates with binary edj files, but for developers, source code is the
must have thing. Of course Eflete support
+exporting of the currently editing project into the *.edc files. Also it can
be standalone group inside project. The
+export features could be found in main menu by path: File > Export as edc >
Group (or Project). It is also
+possible to export resources, that is used inside project (or group). There is
a shell script can be found inside
+folder, where data was exported to. It builds edc source code back to the
binary file.
+
+== Resource management ==
+Usually themes and layouts use a lot of images. Sometimes sounds, tones, fonts
and other resources. Theme Editor include
+few manage tools, that provide natural way to add, delete or edit existed
resources. It is also gives fast access to
+resource preview with additional info. Images, sounds, colorclasses and
textblock style manager tools are represented as
+a pinned tabs.
+{{ :eflete-images.png?&200|}}
+Images and sounds could be added into project by using file selection dialog
(it is possible to add a few files at the
+same time by holding Shift button and selecting necessary files in a dialog).
Images preview and info block (file
+name, format, resolution, etc.) will be displayed on selection. Also list of
styles which are used in selected images
+will be shown. Sound resources import is mostly same. Simple media player is
used instead visual preview.
+
+{{:eflete-texts.png?&200 |}}
+Next two tools used to manage internal text resources. First is a textblock
style manager. All attributes being used
+inside textblock can be edited here. Tree-view for styles navigation and tags
are very user-friendly. It's possible to
+create new styles and tags. Search bar will help to deal with huge amount of
applied styles, which is impossible to
+handle manually. Another useful feature - changeable color of background
preview. Simply change it by switching between
+colors preview at the bottom of manager view. Second text resource manager
responsible for manipulation with
+colorclasses values. It has mostly the same controls as in TextblockStyle
manager.
+
+== Navigations ==
+{{:eflete-groups.png?&200 |}}
+All navigation controls are represented by a tree-view lists. There are two
main areas: groups and parts/programs lists.
+The list of groups are placed on the left side of Eflete and holds all groups
from loaded project. Items sorted
+alphabetically. On the top of navigation bar placed two icons, that provides
ability to add new group into project or
+delete currently existing. In case of adding new group, simple dialog wizard
will be shown. It will set name for new
+group and chose source group if it is required to create copy or alias.
+{{ :eflete-parts.png?&200|}}
+Groups list structure is based on splitting group name by tokens, that
separated one from another by '\' character. What
+kind of benefit from this way? For example take the default Elementary theme.
This theme contain a lot of groups with
+styles for elementary widgets and styles for the E20 environment. By splitting
root tokens from widget styles (for
+example: **elm**/check/base/default), all groups related to Elementary can be
organized below "elm" entity. Next level
+of splitting will be widgets name (for example elm/**check**/base/default).
And finally leafs of this tree will be
+styles names (for example elm/check/base/**default**). At the same time
another root entity with name "e" will exist
+inside the groups navigation bar. There are two branches, that are visually
separated, but still exists inside the same
+project.
+For comfortable visual navigation tree leafs has "document" icon and nodes are
represented by a "folder" icon.
+
+
+{{ :eflete-navigation.png?&200|}}
+If it is all so good with groups organization, then what about parts and
programs inside groups? Eflete provides
+navigation bar for primitives, that are stored inside groups. The primitives
are Parts and Programs. They are placed on
+the right side of main work area as two root nodes. Controls, that placed at
the top of navigation bar, makes possible
+to add new primitives or change order of parts inside group. Press ADD button
to see listed names of primitive types
+(part, state, item and program). Depending on selected context, some of
entities might be disabled. For example: to add
+new state for existing part - select part name in list. Than, special wizard
will guide you thru adding new primitives
+with necessary attributes, according to type of selected primitive.
+By selecting primitive item in list - attributes properties will be updated.
By double-click on state name, user is able
+to switch Parts state. New state will be updated workspace view.
+
+NOTE: to explore tree - double-click on node or press on "right arrow" icon.
+
+== Workspace ==
+
+Finally the main work area. Workspace is placed in the middle of Eflete
window. It enables visual representation of
+group being edited. Many groups can be opened at the same time. The tab bar,
placed above the workspace area, is used
+for switching between workspaces.
+Each workspace has its own background color. There are 3 predefined colors
(black, white and "chess"). Click one of
+the color buttons, that placed at the bottom of workspace to change it.
+Size of previewed group can be changed by container border. It has a small
rectangle in the right bottom corner - use
+it to change size via mouse. Another way is to usage spinners, they are placed
on the same line as a color buttons.
+There are 3 possible behaviors, that can be demonstrated by workspace
component: normal, code and demo. Lets describe
+them one by one.
+{{:eflete-normal-mode.png?&200 |}}
+Normal mode.
+This mode is used to manipulate with group primitives on the development
stage. All parts are represented on the
+workspace, including containers and spacers. Each of the non-visible
primitives types has their own pattern and
+color. This makes possible to understand markup of group and dependencies
between primitives. Text parts are
+bordered, this shows area from left top to right bottom corners. Also for a
texts sets part name as a content.
+Ability to select primitives directly on workspace presented here, of course
still possible to select parts inside
+the part navigation panel. Selected part covered by the resizing control
element, that change maximum size of
+primitive.
+
+{{:eflete-demo-mode.png?&200 |}}
+Demo mode.
+In comparing with a Normal mode where happens all implementation process, the
Demo mode is the best way to see
+result. Objects that displayed in this mode will looks same as in runtime
application.
+It is possible to type text into texts part or to set container parts content.
Predefined widgets (button, check,
+slider, enty, progress bar) can be uses as content. Also it is can be a simple
rectangle or an image, that stored in
+filesystem. It is possible to set different colors and minimum/maximum sizes
for content. All this things requires
+adoption of demonstration view as closely as possible to real environment and
context.
+Of course this is not all about Demo mode. One more useful feature - ability
to emit signals into the object. When
+programs inside group are created they will be good to check reaction of the
object on those signals. List of
+signals, that are possible to emit is exclude programs that depends from mouse
events, because it is easier to click
+(or mouse in/out, double click and etc) on real object.
+
+IMPORTANT: Most of all Elementary widgets will be loaded as fully functional
widgets. It means that behavior of the
+loaded widget is depends on Elementary source code. Group will be loaded as
usual layout in cases when this group is
+not a Elementary widget style or still unsupported widget. List of supported
widgets for a demo mode will be shared
+later.
+
+{{ :eflete-code-mode.png?&200|}}
+Code mode.
+It is mostly same as a Normal mode, except that it will display memo with Edc
source code of currently editing
+group. Same code can be received by exporting current group into Edc project
(File > Export as edc > Group).
+Source code view supporting syntax highlighting and refreshing code
accordingly to changes in the editing group.
+
+NOTE: Right now this mode is only for viewing code. As one of the big features
planned to support Enventor library
+as a backend for edit group edc code directly. It should support most of
features from Enventor.
+
+==History==
+{{:eflete-history.png?&200 |}}
+Because Eflete is a editor tool, it means that managing changes is a
necessary. For each group separated change
+history is stored. To discover changes list, open tab "History" in the right
part of main screen. Of course hotkeys
+Ctrl+Z (for undo) and Ctrl+Y (for redo) exists and works, but user is able to
undo or redo changes by clicking mouse
+on necessary item in the history list. Only group changes will be stored in
history, all that related to other
+modules (like image manger or textblock styles manager) will be not stored.
diff --git a/pages/about.txt b/pages/about.txt
index f1fb856..3fe2c6c 100644
--- a/pages/about.txt
+++ b/pages/about.txt
@@ -16,6 +16,7 @@ their environment.
[[about-terminology|{{:icon-terminology.png|Terminology}}]]
[[about-rage|{{:icon-rage.png|Rage}}]]
[[about-edi|{{:edi-logo.png|EDI}}]]
+[[about-eflete|{{:icon-eflete.png|Eflete}}]]
----
--
