1. #1
    Touch Premium Member charlez's Avatar
    Join Date
    Dec 2011
    Location
    Venice, CA
    Posts
    38
    Vote Rating
    0
    charlez is on a distinguished road

      0  

    Default Pictos Icons with Architect

    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?

    Thanks

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    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!

    Allister

  3. #3
    Touch Premium Member charlez's Avatar
    Join Date
    Dec 2011
    Location
    Venice, CA
    Posts
    38
    Vote Rating
    0
    charlez is on a distinguished road

      0  

    Default


    Thanks - found the pictos files.

    Quite a few mysteries about what's going on under the covers with Architect...

    How does Architect know where the pictos files are? css?

    Trying to setup Sass/Compass for themes with Sencha Touch 2 - could the config.rb perhaps be more cryptic?

    Everything was working fine for basic saas / stylesheets - but when trying to set up for themes & pictos - instant quagmire :-(

    Video tutorial by @nelstrom - all makes sense, and very cool - http://www.sencha.com/learn/theming-sencha-touch/

    Github examples
    http://senchalearn.github.com/Touch-Theming/

    Perhaps a tutorial or documentation about setting up the config.rb for compass with sencha touch/architect & pictos?

    Code:
    ---------------
    # Get the directory that this configuration file exists in
    dir = File.dirname(__FILE__)

    # Load the sencha-touch framework
    load File.join(dir, '..', 'touch', 'resources', 'themes') - (Is this needed - or what exact files are needed?)

    sass_dir = dir

    #css_dir = "stylesheets" (this is where the stylesheets were originally - when it worked)
    css_path = File.join(dir, "..") (From the github - nelstrom)

    images_dir = "images" (is this needed?)

    output_style = :expanded
    environment = :development
    preferred_syntax = css
    -------

    For example: @import 'sencha-touch/default/all'; in myTheme.scss errors out - where should this file be located and what exactly is it?

    Really time-consuming to chase all this stuff down & get a real-world professional dev environment up and running.

    More than a wee bit frustrating, but that's life on the bleeding edge...

    This is all one-time setup stuff and then you're off and running - or spend a day or two chasing down the cryptic details... or maybe a week...

    Cheers

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Can send you a project with sass/css in place if that helps....

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Hi Charles - try this.

    The important thing is to get your head around compass
    http://thesassway.com/beginner/getti...ss-and-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.

    http://www.bilbobaggins.org/sencha/SASS.zip

    Hope it helps

    Allister

  6. #6
    Touch Premium Member charlez's Avatar
    Join Date
    Dec 2011
    Location
    Venice, CA
    Posts
    38
    Vote Rating
    0
    charlez is on a distinguished road

      0  

    Default


    And then like magic - everything is obvious, simple and just works.

    Nothing like a "Complete Working Example" to keep from re-inventing the wheel and going down dark alleys...

    Getting beyond cryptic documentation & examples will help a lot for Sencha to win over experienced devs.

    Thanks so much Allister!

  7. #7
    Touch Premium Member charlez's Avatar
    Join Date
    Dec 2011
    Location
    Venice, CA
    Posts
    38
    Vote Rating
    0
    charlez is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    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.

    Allister

  9. #9
    Sencha User
    Join Date
    May 2012
    Posts
    34
    Vote Rating
    0
    pashute is an unknown quantity at this point

      0  

    Default Could someone just give a step by step example?

    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

  10. #10
    Sencha User
    Join Date
    May 2012
    Posts
    34
    Vote Rating
    0
    pashute is an unknown quantity at this point

      0  

    Default Example of getting a pictos icon on a button with Architect

    Example of getting a pictos icon on a button with Architect


    Could someone step us thru the whole process (preferably on win7) please?

Thread Participants: 2

Tags for this Thread