Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography
来源:互联网 发布:金和网络财报2017 编辑:程序博客网 时间:2024/05/29 05:06
source:http://druckit.wordpress.com/2013/04/04/changes-to-sencha-touch-2-2-theming-part-1-using-iconography/
Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography
Sencha Touch 2.2 handles iconography very differently than its predecessors. Whereas Touch 1.x-2.1 base-64 encoded PNG files into your app’s stylesheet, Touch 2.2 instead uses a web font from http://pictos.cc/font/ to render iconography in your app’s buttons. This new methodology should significantly improve the performance of your app, particularly with respect to memory consumption. Unfortunately, you will likely need to spend a small bit of time refactoring your code as the strings used to identify icons do not match up to the icon library that had been available in previous versions of Touch. More importantly, the procedure for incorporating your own custom iconography has changed as you will now need to encode your custom icons into a web font (covered in part 2 of this blog entry).
Reviewing the Out of the Box Icons
I’ve catalogued the new iconography and their corresponding string identifiers below:
ment2bird delete_
black1eye file browserhomeinbox networkkey
newsphotospoweractionfavoritesplaneuservideo truckchartexpandrefreshcheckcheck2playpause forwardrewindplay2refresh2minusbatteryleftright wirelessspedo
metermoreprintdown
loadwarning
_blacklocatetrash bankflagadddeletelockunlockminus2up screensbellquotevolume
_mutevolumehelparrow
_leftarrow
_right arrow
_downorganizebook
marksstarmapsreplyattach
mentsearch
cloudcomposemailstopshufflecartdownarrow
_up
Behind the scenes, the SCSS mixin icon-character-for-name maps the iconCls icon identifier to a specific character in the pictos font. This mixin is located at the following location:
touch-2-2-0/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss
@
function
icon-character-
for
-name($name) {
//http://pictos.cc/font/
// Row 1
@
if
($name ==
"anchor"
) { @
return
"a"
; }
@
else
if
($name ==
"box"
) { @
return
"b"
; }
@
else
if
($name ==
"upload"
) { @
return
"c"
; }
@
else
if
($name ==
"forbidden"
) { @
return
"d"
; }
@
else
if
($name ==
"lightning"
) { @
return
"e"
; }
@
else
if
($name ==
"rss"
) { @
return
"f"
; }
@
else
if
($name ==
"team"
) { @
return
"g"
; }
// @else if ($name == "h") { @return "h"; }
@
else
if
($name ==
"info"
) { @
return
"i"
; }
@
else
if
($name ==
"attachment"
) { @
return
"j"
; }
@
else
if
($name ==
"heart"
) { @
return
"k"
; }
@
else
if
($name ==
"list"
) { @
return
"l"
; }
@
else
if
($name ==
"music"
) { @
return
"m"
; }
@
else
if
($name ==
"table"
) { @
return
"n"
; }
@
else
if
($name ==
"folder"
) { @
return
"o"
; }
@
else
if
($name ==
"pencil"
) { @
return
"p"
; }
@
else
if
($name ==
"chat2"
) { @
return
"q"
; }
@
else
if
($name ==
"retweet"
) { @
return
"r"
; }
@
else
if
($name ==
"search"
) { @
return
"s"
; }
@
else
if
($name ==
"time"
) { @
return
"t"
; }
@
else
if
($name ==
"switch"
) { @
return
"u"
; }
@
else
if
($name ==
"camera"
) { @
return
"v"
; }
@
else
if
($name ==
"chat"
) { @
return
"w"
; }
@
else
if
($name ==
"settings2"
) { @
return
"x"
; }
@
else
if
($name ==
"settings"
) { @
return
"y"
; }
// Row 2
@
else
if
($name ==
"attachment2"
) { @
return
"A"
; }
@
else
if
($name ==
"bird"
) { @
return
"B"
; }
@
else
if
($name ==
"cloud"
) { @
return
"C"
; }
@
else
if
($name ==
"delete_black1"
) { @
return
"D"
; }
@
else
if
($name ==
"eye"
) { @
return
"E"
; }
@
else
if
($name ==
"file"
) { @
return
"F"
; }
@
else
if
($name ==
"browser"
) { @
return
"G"
; }
@
else
if
($name ==
"home"
) { @
return
"H"
; }
@
else
if
($name ==
"inbox"
) { @
return
"I"
; }
@
else
if
($name ==
"network"
) { @
return
"J"
; }
@
else
if
($name ==
"key"
) { @
return
"K"
; }
// @else if ($name == "") { @return "L"; }
@
else
if
($name ==
"mail"
) { @
return
"M"
; }
@
else
if
($name ==
"news"
) { @
return
"N"
; }
// @else if ($name == "") { @return "O"; }
@
else
if
($name ==
"photos"
) { @
return
"P"
; }
@
else
if
($name ==
"power"
) { @
return
"Q"
; }
@
else
if
($name ==
"action"
) { @
return
"R"
; }
@
else
if
($name ==
"favorites"
) { @
return
"S"
; }
@
else
if
($name ==
"plane"
) { @
return
"T"
; }
@
else
if
($name ==
"user"
) { @
return
"U"
; }
@
else
if
($name ==
"video"
) { @
return
"V"
; }
@
else
if
($name ==
"compose"
) { @
return
"W"
; }
@
else
if
($name ==
"truck"
) { @
return
"X"
; }
// @else if ($name == "") { @return "Y"; }
@
else
if
($name ==
"chart"
) { @
return
"Z"
; }
// Row 3
@
else
if
($name ==
"expand"
) { @
return
"`"
; }
@
else
if
($name ==
"refresh"
) { @
return
"1"
; }
@
else
if
($name ==
"check"
) { @
return
"2"
; }
@
else
if
($name ==
"check2"
) { @
return
"3"
; }
@
else
if
($name ==
"play"
) { @
return
"4"
; }
@
else
if
($name ==
"pause"
) { @
return
"5"
; }
@
else
if
($name ==
"stop"
) { @
return
"6"
; }
@
else
if
($name ==
"forward"
) { @
return
"7"
; }
@
else
if
($name ==
"rewind"
) { @
return
"8"
; }
@
else
if
($name ==
"play2"
) { @
return
"9"
; }
@
else
if
($name ==
"refresh2"
) { @
return
"0"
; }
@
else
if
($name ==
"minus"
) { @
return
"-"
; }
@
else
if
($name ==
"battery"
) { @
return
"="
; }
@
else
if
($name ==
"left"
) { @
return
"["
; }
@
else
if
($name ==
"right"
) { @
return
"]"
; }
@
else
if
($name ==
"shuffle"
) { @
return
";"
; }
@
else
if
($name ==
"wireless"
) { @
return
"'"
; }
@
else
if
($name ==
"speedometer"
) { @
return
","
; }
@
else
if
($name ==
"more"
) { @
return
"."
; }
@
else
if
($name ==
"print"
) { @
return
"/"
; }
// Row 4
@
else
if
($name ==
"download"
) { @
return
"~"
; }
@
else
if
($name ==
"warning_black"
) { @
return
"!"
; }
@
else
if
($name ==
"locate"
) { @
return
"@"
; }
@
else
if
($name ==
"trash"
) { @
return
"#"
; }
@
else
if
($name ==
"cart"
) { @
return
"$"
; }
@
else
if
($name ==
"bank"
) { @
return
"%"
; }
@
else
if
($name ==
"flag"
) { @
return
"^"
; }
@
else
if
($name ==
"add"
) { @
return
"&"
; }
@
else
if
($name ==
"delete"
) { @
return
"*"
; }
@
else
if
($name ==
"lock"
) { @
return
"("
; }
@
else
if
($name ==
"unlock"
) { @
return
")"
; }
@
else
if
($name ==
"minus2"
) { @
return
"_"
; }
@
else
if
($name ==
"add2"
) { @
return
"+"
; }
@
else
if
($name ==
"up"
) { @
return
"{"
; }
@
else
if
($name ==
"down"
) { @
return
"}"
; }
@
else
if
($name ==
"screens"
) { @
return
"|"
; }
@
else
if
($name ==
"bell"
) { @
return
":"
; }
@
else
if
($name ==
"quote"
) { @
return
"\""
; }
@
else
if
($name ==
"volume_mute"
) { @
return
"<"
; } @
else
if
($name ==
"volume"
) { @
return
">"
; }
@
else
if
($name ==
"help"
) { @
return
"?"
; }
// Backwards compat; icons that are not in the font
@
else
if
($name ==
"arrow_left"
) { @
return
"["
; }
@
else
if
($name ==
"arrow_right"
) { @
return
"]"
; }
@
else
if
($name ==
"arrow_up"
) { @
return
"{"
; }
@
else
if
($name ==
"arrow_down"
) { @
return
"}"
; }
@
else
if
($name ==
"organize"
) { @
return
"I"
; }
@
else
if
($name ==
"bookmarks"
) { @
return
"I"
; }
@
else
if
($name ==
"star"
) { @
return
"S"
; }
@
else
if
($name ==
"maps"
) { @
return
"@"
; }
@
else
if
($name ==
"reply"
) { @
return
"R"
; }
@
else
{
// @debug "#icon: icon with name '#{$name}' not found.";
@
return
false
;
}
}
Using the Out of the Box Icons
In prior versions of Sencha Touch you would use the SASS pictos-iconmask() mixin to encode a png file and add appropriate style references into your generated CSS file. In Touch 2.2, however, you’ll need to use the new icon() mixin that generates a style class referencing the new pictos webfont. The sourcecode for the new icon() mixin is listed below:
/**
* Includes an icon to be used on Button or Tab components. The $name is the name of the icon, or the character
* of the font being used.
*
* @include icon('attachment');
*
* @param {string} $name The name of the icon to be included.
* @param {string} $font-family The `font-family` used for this icon. Defaults to the `Pictos` font.
*/
@mixin icon($name, $font-family:
false
) {
.x-tab .x-button-icon.
#{$name},
.x-button .x-button-icon.
#{$name} {
$character: icon-character-
for
-name($name);
&:before {
@include absolute-position;
text-align: center;
@
if
$font-family {
font-family: $font-family;
}
@
if
$character {
content:
"#{$character}"
;
} @
else
{
content:
"#{$name}"
;
}
}
}
}
Therefore, if you wanted to include a button that used the “network” icon, you would have to add the following to your .SCSS file:
@include icon('network');
Inside of your application’s source files, you would reference the icon name as an iconCls configuration property for a button component or tab as illustrated by the following snippet.
{
xtype:
'button'
,
iconCls:
'network'
,
iconAlign:
'top'
,
text:
'Net'
}
Note: The iconMask configuration property is no longer required on a button torender the icon.
==================================================================================================
source:http://bruno.tavares.me/sencha-touch/adding-custom-font-icons-to-sencha-touch-2-2/
Adding custom font icon to sencha touch 2.2
In Sencha Touch 2.2 instead of using icons with the -webkit-mask trick, Touch is moving to a more cross-browser solution with icon fonts. You can read more about this at Steve Drucker blog Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography.
As Steve mentions on his blog, Touch SDK ships with the Pictos Font, and it already loads some basic icons for you to use directly on buttons with iconCls.
{
xtype:
'button'
,
iconCls:
'home'
}
If you want to define more icons from the same Pictos fonts, you just have to use the mixin icon():
@include
icon
(
'network'
);
{
xtype:
'button'
,
iconCls:
'network'
,
iconAlign:
'top'
,
text:
'Net'
}
Touch Theming Layer already has a big object on SASS mapping keys into characters. So when you inform the key “network”, the theme knows that it has to use the key “J”.
Adding Custom Icons
To add more icons you’ll need to generate your own font! You might be question yourself – How do I create a new font? Sounds complicated but it’s fairly easy.
There’s a few tools, but my favorite is IcoMoon. With this tool you can select from dozens of fonts and create your own font package, or even import your own SVG vectors.
All you need to do is select your icons, click generate font, and download!
After you have your font, it’s time to add to your project. Add the font into {touch_app}/resources/fonts/, and add this path to your config.rb:
# Compass configurations
sass_path = dir
css_path =
File
.join(dir,
".."
,
"css"
)
fonts_path =
File
.join(dir,
".."
,
"fonts"
)
Hint: Because we’re defining the fonts_path I had an error like “Pictos fonts not found”. It’s also good to copy the pictos folder from touch/resources/themes/fonts to this new fonts/ directory.
For the last step you just need to include the font and use the icons on your app.scss, like this:
@include icon-font(
'SenchaConIcons'
, inline-font-files(
'senchacon-icons/senchacon-icons.woff'
, woff,
'senchacon-icons/senchacon-icons.ttf'
, truetype,
'senchacon-icons/senchacon-icons.svg'
, svg
));
@include
icon
(
"menu"
,
"\e009"
);
@include
icon
(
"search"
,
"\e000"
);
@include
icon
(
"star"
,
"\e001"
);
Updated June/5: In 2.2.1 you have to specify your font along with icon() mixin. Otherwise it will fallback to ‘Pictos’
@include
icon
(
"menu"
,
"\e009"
,
"SenchaConIcons"
);
@include
icon
(
"search"
,
"\e000"
,
"SenchaConIcons"
);
@include
icon
(
"star"
,
"\e001"
,
"SenchaConIcons"
);
Recap
- Use a tool to pick icons and generate the font (IcoMoon, Fontello)
- Add font into new directory {your_app}/resources/fonts
- Copy Pictos font from Touch directory to the same {your_app}/resources/fonts to avoid errors
- Add fonts_path into config.rb so Compass finds your font
- Import the font icon in your app.scss
What about PNG?
PNG is bitmap based, while Fonts are vectorial based. The above mentioned tools provide hundreds of icons, so it’s pretty easy to find an existent font icon pre-built. If that’s not the case, you can convert PNG to SVG and then import into IcoMoon. There are tools for that, like VectorMagic, Online Image Converter or Inkscape. I haven’t try any of these but If you have, please let us know via comment.
- See more at: http://bruno.tavares.me/sencha-touch/adding-custom-font-icons-to-sencha-touch-2-2/#sthash.Dz643eCv.dpuf- Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography
- 第十六天(Theming Sencha Touch)
- Using Validations and Associations in Sencha Touch
- Using LINQ to SQL (Part 1)
- Using LINQ to SQL (Part 1)
- 视频: Sencha Touch - Intro to List Component
- Intro to Applications with Sencha Touch 2
- Iconography
- Sencha touch 开发 start 1
- sencha touch 学习(1)
- LINQ to SQL系列Part 1 - Using LINQ to SQL
- 第二天(Using Components in Sencha Touch)
- 第四天(Using Layouts in Sencha Touch)
- 第五天(Using the Data Package in Sencha Touch)
- 第十二天(Understanding and Using Events in Sencha Touch)
- 第十五天(Using AJAX with Sencha Touch)
- Sencha Touch
- sencha touch
- Windows句柄到底是什么
- 2014年1月6号,开始写技术博客了
- Android异步处理系列文章索引
- ajax中执行服务器返回的js脚本
- 梳理C/C++ 语言char,int,long,float,double,longlong的字节数
- Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography
- IOS中关于延迟函数performSelector的使用
- sql语法1
- bash 启动脚本
- AWS等入华对国内云计算产业和公有云市场格局的影响
- linux SPI驱动 - 模拟gpio
- Android异步处理一:使用Thread+Handler实现非UI线程更新UI界面
- (9)Java集合框架
- Automatic Objects and Local static Objects