Touch Premium Member
Pictos Icons with Architect
I want to use the pictos icons in Sencha Touch 2 / Architect and have viewed the videos, docs, etc... - but most are 1.1 vintage.
Compass/Sass is implemented for the project
Understand all the theory - but need current implementation specifics.
Where are the Pictos icons located / can be downloaded from?
Also where to put them in a project - under resources/icons?
Also how to just deploy the subset being used for production?
I seem to remember the pictos came with the normal sencha 1 or 2 package. Here's a screen shot of where they are located on one of my architect projects, if that helps.
Screen shot 2012-05-18 at 08.17.56.jpg
You need to include them via SASS css and run compass watch on the yourcss.scss file via a command line to watch for changes and recompile it. You can also add your own designs and specifically reference them too.
You also have to include the compiled css file in architect in the resources.
I just read the above and it sounds total gobbledegook, but I hope it points you in the right direction!
Can send you a project with sass/css in place if that helps....
Hi Charles - try this.
The important thing is to get your head around compass
Every time you make a change in the sass file, it has to be recompiled to deliver a new css, otherwise you won't see any changes on your page.
The css file has to be added as a resource to your project, and the class can be identified in the config of any object.
In the example project, I've changed the css styles to create custom styles of a tab bar icon, a page background, a toolbar background and a navigationbar background.
Hope it helps
Touch Premium Member
UPDATE: If a project is created with SDK Tools Beta 3 (command line), it creates the correct project structure that includes a sdk folder that contains the pictos icons, config.rb files, compass scss files, and a lot more. There are some inconsistencies between the SDK and Architect 2 at the moment - but getting much closer to prime time.
For sure, many people understand it better when they see it, not just read about it. It would be great to facilitate more example projects by increasing the max file size that can be uploaded for zips or project archives.
Could someone just give a step by step example?
Download the latest Sencha Touch 2.0.x (not the Architect)
Open the zipped directory somewhere you'll remember.
I put it in the Program Files (x86) folder - because I have administrator privileges
Download and install the Sencha SDK Tools and test the installation according to the docs Here [TBD fill this in]
Download Ruby from [here] // latest version works fine
Download SASS from [here] // read the docs while at it
and then install compass from [here]
or did I forget something.
Download Scout UI or don't download Scout UI, do this or that...
Now if you want the phonecall icon do this and that. [TBD]
First find the icon in the icons folder of the Sencha Touch package.
C:\Program Files (x86)\sencha-touch-2.0.0-commercial\resources\themes\images\default\pictos
And then do so and so...
Thanks in advencha
31 May 2012, 12:10 AM
Example of getting a pictos icon on a button with Architect
Could someone step us thru the whole process (preferably on win7) please?
Tags for this Thread