PDA

View Full Version : Difficulties to link Architect and Themer



senacle
4 Oct 2017, 12:51 AM
Hello,

Themer 1.3.0
Architect 4.2.2

I made some work with Architect and Themer and i find it's difficult to link work between them.
I've tried different solution :

http://docs.sencha.com/themer/1.3.0/guides/architect_import_theme.html
https://www.sencha.com/forum/showthread.php?311450-Sencha-Themer-custom-theme-exported-and-usable-in-Sencha-Architect
https://www.sencha.com/forum/showthread.php?275772

but it's not working as expected.

After a lot of tests, i found this way to link Architect end Themer :

Create a project with Architect and save it. At this time, you can design your views, stores, etc....
Keep Architect open
Open Themer and create a theme from your project. You specify the path of your app / workspace {ArchitectSaveFolder} and you choose the folder where to save the theme inside your project {ArchitectSaveFolder}/packages/local/{theme-name}
Design your theme in Themer without doing anything else in Architect.
You can see in the "Cmd Output" of Architect the fashion compilation each time you change something in your theme in Themer. But the theme isn't apply in Architect nor in the browser at this time :(
When you have designed some or all parts of your theme, close Architect and keep Themer opened.
Open again Architect. Nothing changes here :(
Close again Architect (keep Themer always opened).
Open again Architect. This time, all compilations are running in "Cmd Output" of Architect.
That's it ! Your theme is applied inside Architect and the browser. :)



After that, i want to design some custom component (like a numberfield).
In Architect, I've tried to add Scss Resource in the {theme-name} (Remember : {theme-name} is the theme designed with Themer).
But this custom css doesn't apply.
So, i did some specific ui in Themer, and i've chosen the ui name to apply to the component in Architect (in the UI tab under the Toolbox). Seems to work for simple design (background color).
But for some total specific design, need to edit the "theme-ui-variable.scss" file in {ArchitectSaveFolder}/packages/local/{theme-name}/sass/var. Trying some test here to see if all my specific design is really applied ==> Not good solution, or need to know the entire scss syntax....
An other simple solution : add a Css Resource in your Architect project and set the different cls properties of your components with the one declared in the Css Resource. That's OK.



If other simple way exists, i take it ;)

bjdurham85
30 Nov 2017, 8:21 AM
Hi--,

Sorry to hear about your troubles. To my knowledge there isn't much currently in the way of bridging the SA/Themer, however, a recent roadmap blog post was released and has a section around that.

https://www.sencha.com/blog/sencha-product-roadmap-update/

Regards,
Bryan

senacle
1 Dec 2017, 6:39 AM
however, a recent roadmap blog post was released and has a section around that.
https://www.sencha.com/blog/sencha-product-roadmap-update/


Integrate Themer with Architect : need to wait after Q4'18 :(

senacle
4 Dec 2017, 12:37 AM
An other simple solution : add a Css Resource in your Architect project and set the different cls properties of your components with the one declared in the Css Resource.

Very strange....

This morning, i open again my app with sencha Architect.
And you know what ?
My custom css for number field is appearing well !?!?!?

So, here is how it works :
the numberfield config "fieldCls" is set to "my_custom_cls".

.my_custom_cls is declared in the custom Css Resource in packages/local/theme-triton-my_app/sass/src/Custom.scss