With Sencha Touch, i want to use some of the icons in the directory resources/themes/images/default/pictos/ for iconCls in my footer navigation. But from what I've read, it says I need to set up a ruby on rails server just to compile the right stylesheets and javascript files to use them?
I don't have the least bit knowledge of how to set up my own servers or set up my own RoR server. Is there anyway else to do this? I just want 3 icons from that directory...setting up a whole server seems a bit overkill.
Yes, you need to install Ruby and RubyGems (only if you're on Windows because they are pre bundled on Mac)
Then you just need to open the right scss file in touch/resources/sass (depending on what them you're using) and to add the following line to it :
#include pictos-iconmask(PICTOS_NAME);
Finally you need to open a terminal in that folder and to execute the following command :
compass compile // Run it every time you change something in the .scss
or
compass watch // Will automatically recompile every time you save
More information about Sencha-Touch Theming here
I used the following CSS
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(/resources/themes/images/default/pictos/TV.png)}
Actually... to be perfectly honest, I didn't map my CSS to the image, but rather converted the image to Base64 and embedded it in the CSS. The reason for this was that I only needed 4 of the icons and I didn't want to move them all around every time.
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFmUlEQVRoBe2aX6hURRzH75p/qCjLMLKk7CoZEgmikHjLSxbqWz30B6SXzF6ieujPg0FFfzB66KUSfO4hJAqKKDSp25USi6hESCoKUyr6Z4lalnn7fJadbTxnz+7Zc3fv3T34gw8zZ87Mb+Y7c87MnNmtjI2NDbRrlUplJmVugfNhKxzAT/uOKJjXqLNC3rlwOxyCV6nSsD2zne1CDY/A76DIj2AIzmjXT978+q7VMUponYfhybzl43xTKFjE5lNoeq3gMsLNsJRBKOqv5iod1HwurtVxbS3HVMKL07lzpMTq88ZxuwI+hRNgj8t+WAfT8vpplU9f4CP8DYR6rNO6V7Qq3+h+249zcEKFy2EX/AuhMb8S3wAzQr6ioT7ADtRn8H+S+GewvLDfogUthw3CCMQjfZTrTTCrqG/KOhnq4wgEsdYxAvOL+q22eTyFqw4GBhbQiNfgHwiN+5P4Fpjdrn/KzILn4S8I/vT9Bixo118yf+FHOnZEQ84CJ67jEBpp+DpcEudtFifvXLDzYh/61PfMZmXz3uuIYCvDHJlH4RjEDd7JdcvHkDy+HtsTZX1SnoHCr0eyIzomuCbaWfU++A1i0a7VVyYrD9fcWwi7E2Vc5++HcU+AoZ5qG+OLTsVp5M3gUuKsGoTvMz1ZB2lrYW+UzzKWvQs6tsSFejs6wsGpIbYGvoZY9Hdc3xDyEV8JpoVOMa/r+eqQp9Nh1wTXRF9N4z+MBCnsF3gYHoIfIYg13AVLOi0y9tdVwTXRVyBC0fFIOxlJEOu9z2Fh3LhuxCu1Rg2wZz2TCt2j+lXSSVPMHHgBboSkf0W/A/fC9zAFOmn6P4FOO3hgKkKnEw6DjXEd7HSFuKzuxAwV75dPbKZpj4Ed3mnT/wF0voXoEZ3fCgchPF5lDb9C4xpHcwiKfWpRsI9skLauVXA33tte7Ae1TsvzzpzogdbnaWeuZjZz9AUetsFP4HudnF1JmhCz7nNhNSwZb41Zgj/GsZuDUWa2MIuOt67C5Zlh7ewt8BzcBD6ehSyr4Jt429sLYlVFOxzlg+Bafhhic0D2w+OwEq6BjeD+PGVZI/wlOY+kck9ugqJtk0dKwRTrq3c37KZfqvd4ID7h+l14Cq6H+sDWIyTG5q4kdhzfm8x4sr3uyxW1K4i1ccSdaD3oexYcvLolHdRv9EHEY5898AECHf1TjKS/SXD0345v9LNgR/EH8Owry7znQULd+lmw889cOLuuJh3xrM08detnwR4nLYbhupoowsTl15/r9qoo+f/ZK07so/hM2vog4objNnM9g+ulsB4G43tZy1Kcp5fjfmougq2I3E64E1xhroNVcDmcYv0uWDHuwi6EdeDhocupW9GGVgbBQZjCm01g1XxlEuzy4yN9HIbgIkhZP8/SsZg/uNgMfljcAU/DIUhZGQS7y/oZXmZ3dRLcbLwP+yBlZRDsu3seDDNTeyjpzD0P5kPKyvIOX4CyjTAPPLC4E5y5U1YWwY7yHHggpTCRUIZHOiGp+eVpwc37p//vnh7h/h/D5grKMksfQ+YO8GdZ12G3lf4XNLW9LINgd1r+sL4J/J+IS9RV4PdwKQWjq/oz7FG2lYofY7fl8a2krEyTliPb0sokuKVYM5RJcOpsulEPZAnOVbiRw0lKU0dyAm74iCczhfZ66pfVGSHPZISeVyUHQ2GzYT2T1SuEYZa+lHjKsgRfRk4PsT0u6RVTiMeyjdp8Dun31CDItqxRvI0ii+ixrPvZHrt3x5PIDaC4wtaot3Tmov0ivIRo/zDmSDd8J0jvtlnvIKyHZeBOqrBlCdahP2O4Y2m4gJthAk3RzdqauymtnNib4+rR3C2ZoIy+oz6uvfjjd6e7QI3HFTwK/sex7HYAgTt8XL8FBftl4Ulfq8ecLH1lfjq+B0/Atv8AOeLFDQ1OlmYAAAAASUVORK5CYII=);}
Now, when you're creating your TabPanel you want do do something along these lines.
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: 'Video',
iconCls: 'tv' // the icon class string is appended to the CSS
// '.x-icon-mask.[iconCls string]'
// in this case
// '.x-icon-mask.tv'
// as seen in the CSS above
}]
});
EDIT
Looking over my old Sencha Touch V1 code base (as per your comment below) you will want to use the following CSS for Sencha Touch V1
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V1*/
.x-tab img.tv,.x-button img.x-icon-mask.tv{-webkit-mask-image:url('/resources/themes/images/default/pictos/TV.png');}
Related
Is it possible to customize core Spartacus components like cx-icon? I need to extend cx-icon to add functionality to support Material Icons, so whenever I use cx-icon in the app, Material Icons are rendered and not FontAwesome icons
PS - Material icons cannot be configured in cx-icon as it doesn't use CSS classes like FontAwesome, rather it uses text ligatures
I'm not sure, but you can try to figure it out with SVG sprite. You just need to download Material Icons in SVG sprite format (more details here https://google.github.io/material-design-icons/) and to configure IconModule with custom matIconConfig like this (more details here https://sap.github.io/spartacus-docs/icon-library/):
export const matIconConfig: IconConfig = {
icon: {
symbols: {
INFO: 'info', // Here you should add actual xlink to SVS symbol
},
resources: [
{
type: IconResourceType.SVG,
url: './assets/mat-icons.svg',
types: [ICON_TYPE.INFO],
},
],
},
};
And then merge it to global configuration by:
ConfigModule.withConfig(matIconConfig);
Of course, during debugging, maybe you will need to apply some additional styles, but I can't provide which exactly.
I downloaded the IncludeExternalPages project from the getting started site. In the main.js for iPhone I can see what the WL.TabBar should display:
function wlEnvInit(){
wlCommonInit();
WL.TabBar.init();
WL.TabBar.addItem("WLtab1", function () {tabClicked(1); } ,"Home",{
image: "tabButton:Favorites"
});
WL.TabBar.addItem("WLtab2", function () {tabClicked(2); } ,"Client",{
image: "tabButton:Search"
});
WL.TabBar.addItem("WLtab3", function () {tabClicked(3); } ,"IBM",{
image: "tabButton:More"
});
WL.TabBar.setVisible(true);
WL.TabBar.setSelectedItem("WLtab1");
tabClicked(1);
}
However, when executing this code in a simulator the labels are Favorite, Search, and More instead of Home, Client, and IBM. I made no modifications to the project, just built it and ran on the iOS simulator. This was using WL6.2 with the 9/4 update (latest).
Any ideas why the titles are defaulting to iOS instead of what is specified in the code?
When using the "built-in" OS icons (Favorites, More, Search, ...) the tab item's title will default to that of the icon instead of the label in the code.
To change that, provide your own Favorites icon, for example, and then the "Home" label will be used.
I tried this simple example:
$.magnificPopup.open({
gallery: {
enabled: true
},
items: [
{src: "tracks/" + p[0]},
{src: "tracks/" + p[1]}
],
type: 'image'
});
Only the first slide (0) pops up and there is no gallery - just a single slide. What is wrong?
You should never give up: Problem is solved. I isolated the code from the gallery example of the homepage of Magnific Popup and put it into a page of my own. The result was the same as described above i.e. gallery was not working. I then downloaded Magnific Popup again and noticed that the library file was bigger than my previous library file. So the library file was corrupted in some way - probably my fault. Now gallery is working...
In one of my views I would like to display a PDF, which is accesible via URL. This should be done without opening an extra tab in the browser, and without downloading the PDF (to view it outside the browser). It should be visible embedded within the Ember application.
What I have in mind is:
Use the URL to get the PDF and make it accessible to the ember application.
Use a special "PDF view" to display the PDF.
Is this possible? What options do I have to display an embedded PDF in an Ember application?
Displaying a PDF is not really related to ember, because to view a PDF you need a PDF plugin installed in your browser (which is mostly installed by default depending by the browser).
That said, a possible solution I could imagine could be to create a custom ember view with the tagName iframe on which you set the src attribute to the link referring to the PDF.
Example:
App.PDFView = Ember.View.extend({
tagName: 'iframe',
attributeBindings: ['src', 'width', 'height', 'frameborder'],
src: 'pdffile.pdf',
width: 800,
height: 600,
frameborder: 0
});
I've also used width, height and frameborder only for convenience so you can control some of the iframe's attributes easily from within ember. Here a working demo.
You can also go with something more elaborated and use a js lib like http://pdfobject.com/ which you then initialize in your view's didInsertElement hook:
App.PDFView = Ember.View.extend({
src: 'pdffile.pdf',
width: 800,
height: 600,
didInsertElement: function() {
new PDFObject({
url: this.get('src'),
width: this.get('width'),
height: this.get('height')}
).embed(this.get('elementId'));
}
});
(haven't tested the latter, but you get the point)
And then use this App.PDFView like a normal ember view in your templates.
{{view App.PDFView}}
Or your can set the src, width & height directly from within your template like
{{view App.PDFView src="pdffile.pdf" width="600" height="800"}}
Hope it helps.
You can certainly leverage the Ember PDFJS Addon by doing:
ember install ember-pdfjs
The README on GitHub describes the installation and use cases.
In short, the addon provides your Ember project with a component, pdf-document, which you can use in your HTMLBars template like so:
{{pdf-document src=[model.src]}}
... there are other permutations of what src can be (including a string file path, resource URI, or Uint8Array buffer).
If you don't see a feature that you need, please suggest in the Issues.
I just updated my Sencha Touch to Sencha Touch 2.0.1 and my home screen icon is no longer working. Previously I could inspect my code and see the correct <link> tags generated by Sencha. I no longer see these tags. I have my home screen icon set up with the following code:
Ext.application({
name: 'example',
phoneIcon: '/example/resources/icons/app_icons/114x114.png',
I have also tried changing "phoneIcon" to "icon", and I have also tried using an object after "icon" instead of a string. Any ideas?
The icon property works fine for me:
Example application: http://www.senchafiddle.com/#f15tv