Sencha Architect crashes? Can’t start Sencha Architect problems…

Posted on in Architect Questions

These are always tricky problems. The best is to contact Sencha support via the support portal, and mention the following:

1) Which OS are you using?
2) Which version of Sencha Cmd installed? (open a terminal, run the following command: sencha which)
3) Which version of Java is installed (open a terminal, run the following command: java -version)
4) Did you see any error messages? In Architect at the log or output tab,
or in a txt error file, located in your ext js project?

Apart from that, there are a couple of things you could try out yourself!
Let's start with a fresh re-install of Sencha Architect:

1) Uninstall Sencha Architect
2) After uninstalling, usually there are meta / settings files left in the user documents folder.
These needs to be removed as well. I know on a Mac it's located in a hidden folder here:
/Users//Library/Application Support/Sencha/Sencha Architect 3.2
I assume on Windows, there is a similar folder in the MyDocuments folder, please search for it, and rename or remove it.
3) Download a new version of S.A. https://www.sencha.com/products/architect/#overview
And install.
(BTW I wrote a great installation guide a while ago: http://docs.sencha.com/architect/3/getting_started/installation_setup.html)

Step 2 is very important, if it went correct, it will install a fresh copy of the latest S.A, and you will need to login with your Sencha forum id again. When you don't remove these files, it sticks to the old setup. So it's possible it will crash again, after installation.

If the trial is expired, Sencha Sales can usually help you.

How to get SOAP proxy to work in Sencha Architect?

Posted on in Architect Questions

The SOAP data proxy is part of the pro package in Ext JS, and isn't available in the GPL version (which is on the CDN). Therefore it also won't be visible in the Sencha Architect toolkit.

I don't have a SOAP server to test from, but I was able to make a test where the soap proxy & reader are at least loaded in the project. Here's what I did:

1) In project settings / framework, set it to "Commercial", i.s.o. custom paths.
That one, will use the local version of Ext JS 5.

2) In the requires for the application if have the following 2 files added:
- Ext.data.soap.Proxy
- Ext.data.soap.Reader

3) Now, the most important step: Select "Resources" in the Project Inspector.
Click the + new button, in the top of the Project Inspector, and add 2 new JS resources.
You can point the urls to:
-ext/packages/sencha-soap/src/data/soap/Proxy.js
-ext/packages/sencha-soap/src/data/soap/Reader.js
Once you've done that, the files are visible in the editors.

Once you have the soap proxy and reader fully loaded, you should be able to use it.

Although I am not an expert with the Soap proxy, I can point you out to one of our Soap guides.
http://docs.sencha.com/extjs/6.0/enterprise/soap.html

In case you notice a bug in one of the 2 scripts, I would advise you to add ticket in the support portal. If it's indeed a framework bug, it won't cost you any support credits.

Using Custom Fonts with Sencha Architect

Posted on in Architect CSS Sass Sencha

Back in the days when websites were restricted to typical fonts such as Arial, Georgia, Times and so on, fonts were delivered from the user’s machine. Fortunately today, because of HTML5 and CSS3, browsers support embedded web fonts.

This time, I will explain how to use custom fonts with Sencha Architect. For this tutorial, I will use one of the Sencha Touch starter apps, with the default theme. However, you can also use these tips for other Sencha Touch or Ext JS apps.

Incorporating a custom font from a font service

If you haven’t done so, drag the Default theme into your project (I used one of the Sencha Touch starter apps). Apply the Default theme, to create a custom theme extension.

  1. Select the MyDefaultTheme, and click on the scss + button, to add a new Sass snippet.
  2. Click on the right arrow button of the Scss Resource to enter the Sass code snippet properties.
  3. Set the compile order to beforeVariables
  4. Note: One thing you should know about working with custom fonts is that font imports must always be at the very top of your stylesheet. If you don’t change the compile order of the Scss resource, this snippet will be inserted after all the Sencha theme styles are inserted. That would cause your custom fonts to not be visible.

  5. A font service (or online font provider) is a directory of free hosted web fonts. This is nice, because with a font service, you don’t need to host the fonts locally, and therefore you don’t have to deal with font copyrights. There are a couple of popular font services, such as Google Web Font or Typekit.
  6. Let’s use Google Web Font and you can choose a font you like.

    Once, you have found the font you want, click the Add to Collection button.

    Next, click the “Use” tab. Scroll down to paragraph #3, and click the @import tab. Then, copy the code it displays.

  7. Open Architect, in the Code editor paste the font code, for example:
  8. @import
    url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
     
  9. Select the MyDefaultTheme and click on the Theme tab in the config inspector.
  10. Here, filter for font. In Ext.Class, you can set the font family. Set it to the following value (depending on the font you choose):
  11. 'Exo', sans-serif;
    

Now go back to the Design view, (if you don’t see anything, hit the “Refresh” button) and preview your new font.

Incorporating a custom @font-face (local) font

But what if you want to use your own font? Or, maybe your company has its own font you want to use. Before we get into that, let me explain a little more about local fonts.

@font-face is a CSS technique used to integrate custom web fonts. With system fonts, it picks the font if available in your OS, @font-face downloads the font from the Internet. Unfortunately, the major browsers have not standardized on one web font solution. Therefore, you have to embed multiple webfont extensions into your stylesheet.

You can get these packages of fonts online. For example, http://www.fontsquirrel.com is a website where you can download fonts, 100% free for commercial use.

  1. Select the MyDefaultTheme, and click on the scss + button, to add a new Sass snippet.
  2. Click on the right arrow button of the Scss Resource to enter the Sass code snippet properties.
  3. Set the compile order to beforeVariables
  4. Now let's download a nice font-face kit from font-squirel.com to your hard drive, for example: http://www.fontsquirrel.com/fonts/exo-2
  5. Click on the Webfont kit tab, make sure the following extensions are included in the package: ttf, eot, woff, svg, and hit the blue Download @Font-face Kit button.

  6. Extract the zip file, and open one of the regular font folders. Check out the .css stylesheet that’s included, and copy the import lines of code.
  7. Go back to Sencha Architect, in the Code editor of the MyDefaultTheme, and paste the import. For example:
  8. @font-face {
        font-family: 'exo_2.0regular';
        src: url('Exo2.0-Regular-webfont.eot');
        src: url('Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('Exo2.0-Regular-webfont.woff') format('woff'),
             url('Exo2.0-Regular-webfont.ttf') format('truetype'),
             url('Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
  9. Now save your Architect project, and copy the 4 font extensions over to your project resources folder in your file system; if you want, you may create a subfolder fonts here.
  10. Since my fonts are located in resources/fonts/, I need to fix the path in my Architect snippet. Sencha Architect expects the fonts to be located in the /theme/ folder. I also renamed the font-family name:
  11. @import url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
     
    @font-face {
        font-family: 'Exo2';
        src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot');
        src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.woff') format('woff'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.ttf') format('truetype'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
  12. Select the MyDefaultTheme, and click on the Theme tab.
  13. Here, filter for font. In Ext.Class, you can set the font family. Set it to the following value: (depending on the font you choose):
  14. 'Exo2';
    
  15. Compile your project, and test the result in your browser. You will see the new font.

Looking for more help with theming for Sencha Touch? Sign up for a training class. In July, we will offer an advanced Sencha Touch online theming course.

Using Custom Fonts with Sencha Architect

Posted on in Architect CSS Sass Sencha Sencha Touch

Back in the days when websites were restricted to typical fonts such as Arial, Georgia, Times and so on, fonts were delivered from the user’s machine. Fortunately today, because of HTML5 and CSS3, browsers support embedded web fonts.

In this month’s training tip, I will explain how to use custom fonts with Sencha Architect. For this tutorial, I will use one of the Sencha Touch starter apps, with the default theme. However, you can also use these tips for other Sencha Touch or Ext JS apps.

Incorporating a custom font from a font service

If you haven’t done so, drag the Default theme into your project (I used one of the Sencha Touch starter apps). Apply the Default theme, to create a custom theme extension.

  1. Select the MyDefaultTheme, and click on the scss + button, to add a new Sass snippet.
  2. Click on the right arrow button of the Scss Resource to enter the Sass code snippet properties.
  3. Set the compile order to beforeVariables
  4. Note: One thing you should know about working with custom fonts is that font imports must always be at the very top of your stylesheet. If you don’t change the compile order of the Scss resource, this snippet will be inserted after all the Sencha theme styles are inserted. That would cause your custom fonts to not be visible.

  5. A font service (or online font provider) is a directory of free hosted web fonts. This is nice, because with a font service, you don’t need to host the fonts locally, and therefore you don’t have to deal with font copyrights. There are a couple of popular font services, such as Google Web Font or Typekit.
  6. Let’s use Google Web Font and you can choose a font you like.

    Once, you have found the font you want, click the Add to Collection button.

    Next, click the “Use” tab. Scroll down to paragraph #3, and click the @import tab. Then, copy the code it displays.

    <img src="http://cdn price of tamiflu.sencha.io/img/20140519-training-tip-custom-fonts/google-fonts-add.png" class="aligncenter" />

  7. Open Architect, in the Code editor paste the font code, for example:
  8. @import url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
  9. Select the MyDefaultTheme and click on the Theme tab in the config inspector.
  10. Here, filter for font. In Ext.Class, you can set the font family. Set it to the following value (depending on the font you choose):
  11. 'Exo', sans-serif;

Now go back to the Design view, (if you don’t see anything, hit the “Refresh” button) and preview your new font.

Incorporating a custom @font-face (local) font

But what if you want to use your own font? Or, maybe your company has its own font you want to use. Before we get into that, let me explain a little more about local fonts.

@font-face is a CSS technique used to integrate custom web fonts. With system fonts, it picks the font if available in your OS, @font-face downloads the font from the Internet. Unfortunately, the major browsers have not standardized on one web font solution. Therefore, you have to embed multiple webfont extensions into your stylesheet.

You can get these packages of fonts online. For example, http://www.fontsquirrel.com is a website where you can download fonts, 100% free for commercial use.

  1. Select the MyDefaultTheme, and click on the scss + button, to add a new Sass snippet.
  2. Click on the right arrow button of the Scss Resource to enter the Sass code snippet properties.
  3. Set the compile order to beforeVariables
  4. Now let’s download a nice font-face kit from font-squirel.com to your hard drive, for example:
    http://www.fontsquirrel.com/fonts/exo-2
  5. Click on the Webfont kit tab, make sure the following extensions are included in the package: ttf, eot, woff, svg, and hit the blue Download @Font-face Kit button.

  6. Extract the zip file, and open one of the regular font folders. Check out the .css stylesheet that’s included, and copy the import lines of code.
  7. Go back to Sencha Architect, in the Code editor of the MyDefaultTheme, and paste the import. For example:
  8. @font-face {
        font-family: 'exo_2.0regular';
        src: url('Exo2.0-Regular-webfont.eot');
        src: url('Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('Exo2.0-Regular-webfont.woff') format('woff'),
             url('Exo2.0-Regular-webfont.ttf') format('truetype'),
             url('Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
  9. Now save your Architect project, and copy the 4 font extensions over to your project resources folder in your file system; if you want, you may create a subfolder fonts here.
  10. Since my fonts are located in resources/fonts/, I need to fix the path in my Architect snippet. Sencha Architect expects the fonts to be located in the /theme/ folder. I also renamed the font-family name:
  11. @import url(http://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
     
    @font-face {
        font-family: 'Exo2';
        src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot');
        src: url('../../resources/fonts/Exo2.0-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.woff') format('woff'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.ttf') format('truetype'),
             url('../../resources/fonts/Exo2.0-Regular-webfont.svg#exo_2.0regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
  12. Select the MyDefaultTheme, and click on the Theme tab.
  13. Here, filter for font. In Ext.Class, you can set the font family. Set it to the following value: (depending on the font you choose):
  14. 'Exo2';
  15. Compile your project, and test the result in your browser. You will see the new font.