1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jacobsr is on a distinguished road

      0  

    Default Using an HTML5 canvas in Architecht 2.0

    Using an HTML5 canvas in Architecht 2.0


    Greetings All,

    I'm very new to Sencha Architect; and I couldn't readily discover a way to add an html5 canvas object to my view. is there any way to achieve this?

    I'm evaluating Sencha as an alternative to Adobe Flex for our company.

    Thanks!
    -Raymond

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    If you drag out a Component, you can then create a canvas element inside of that component.

    If you give me some idea of what you are trying to do in straight html/javascript, I can show you how you would do so in Architect.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jacobsr is on a distinguished road

      0  

    Default


    We're writing simulation applications that are originally in Flex, but we've done some conversion to Javascript; we're thinking about using Sencha for all of it, as we'd like the benefit of the 'windowing' toolkit.

    So normally our application would run in a browser where most of the browser was taken up by a window or form, with some toolbar type controls and a large portion of it occupied by an HTML5 canvas for graphics output.

    From what Ive done with Sencha so far it doesn't seem to let me write any custom html or JS (the source files appear as 'read only') it would seem that you need to create an override to add something custom; but the IDE seems to warn against that.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    For this specific example, you would need to write an override.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    New Zealand
    Posts
    119
    Vote Rating
    41
    wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about

      0  

    Default


    Why would you need an override? Surely you just put the custom rendering code in Controller actions and/or functions?

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    You could do that sure... but that would sort of break the rules of self containment for the particular class wouldn't it? As I said, without a specific example of what you're trying to implement its difficult to give you good advice of a "good way" to build it.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    New Zealand
    Posts
    119
    Vote Rating
    41
    wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about

      0  

    Default


    True - then why not add a function to the View which does the rendering to the canvas element. Just doesn't seem to warrant 'resorting' to an override.

    edit: just tried it out - works a treat

    Ext.define('Ezybook.view.MyEzybook', {
    extend: 'Ext.container.Container',
    alias: 'widget.myezybook',


    height: 600,
    itemId: 'myezybook',
    width: 800,
    layout: {
    type: 'fit'
    },


    initComponent: function() {
    var me = this;


    Ext.applyIf(me, {
    items: [
    {
    xtype: 'panel',
    Test: function() {
    var canvas = document.getElementById('theCanvas');




    if (canvas.getContext){


    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');


    // Draw shapes
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
    }


    },
    html: '<canvas id=\'theCanvas\'></canvas>',
    itemId: 'canvasPanel',
    title: 'My Panel'
    }
    ]
    });


    me.callParent(arguments);
    }


    });

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jacobsr is on a distinguished road

      0  

    Default


    I think the biggest issue is that I have _no_ experience with Sencha Architecht; I've started going through the tutorials, but so far they're not working.


    So, a question, if I drag a component onto a form, click the "Flyout config", then "Edit Template"

    and add some HTML markup in it; I see the markup (as html) in the designer; but when i run it, I only see the form, I don't see the result of my markup, any idea why?

Thread Participants: 2