Archive for November, 2011

The iPhone, Cookies, and JSONP Logins

Tuesday, November 29th, 2011

I’ve been working a lot on mobile apps lately and one issue I recently came across was that my logins that are handled over JSONP requests work just fine on Chrome desktop and the Android browser, but not on Safari (mobile or desktop) unless I changed cookie settings on the device to “Accept All”.  That’s an awful answer since I don’t want to just force users to change their settings just to be able to use my app.

I’m now using the default setting, which is “Accept Visited” and my workaround was to include an iFrame with the source set to my server domain that is being logged into remotely and style is set to “display:none” since I don’t actually want to show the iFrame.  I consider this quite the hack, so if someone else has a better idea I’m all ears.

Add alt tag to Sencha image buttons for 508 Compliance

Monday, November 28th, 2011

Here’s an override for Sencha v1.1.1 to allow for a label field to be added to a button that is applied as an alt tag to an image button.  It’s pretty cool.

Ext.override(Ext.Button, {
  label   : '',
  setIconClass: function(cls) {
      var me = this;

      if (me.rendered) {
          if (!me.iconEl && cls) {
              me.iconEl = me.el.createChild({
                  tag: 'img',
                  src: Ext.BLANK_IMAGE_URL,
                  cls: cls
              });
              me.iconEl.set({
                'alt'   : this.label
              });
              me.setIconAlign(me.iconAlign);
          }
          else if (me.iconEl && cls != me.iconCls) {
              if (cls) {
                  if (me.iconCls) {
                      me.iconEl.removeCls(me.iconCls);
                  }
                  me.iconEl.addCls(cls);
                  me.setIconAlign(me.iconAlign);
              }
              else {
                  me.setIconAlign(false);
                  me.iconEl.remove();
                  me.iconEl = null;
              }
          }
      }
      me.iconCls = cls;
      return me;
  },
  setIcon : function(icon) {
    var me = this;
    if (me.rendered) {
      if (!me.iconEl && icon) {
        me.iconEl = me.el.createChild({
          tag: 'img',
          src: Ext.BLANK_IMAGE_URL,
          style: 'background-image: ' + (icon ? 'url(' + icon + ')' : '')
        });
        me.iconEl.set({
          'alt'   : this.label
        });
        me.setIconAlign(me.iconAlign);
      } else if (me.iconEl && icon != me.icon) {
        if (icon) {
          me.iconEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
          me.setIconAlign(me.iconAlign);
        }
        else {
          me.setIconAlign(false);
          me.iconEl.remove();
          me.iconEl = null;
        }
      }
    }
    me.icon = icon;
    return me;
  }
});

Use a label tag instead of a div on Sencha Forms

Tuesday, November 15th, 2011

Here’s how to override the default template for an input label and make it an actual label, in semantic traditional 508 compliant markup.

Ext.override(Ext.form.TextArea, {
    renderTpl: [
        '<tpl if="label"><label for="{inputId}"><span>{label}</span></label></tpl>',
        '<tpl if="fieldEl"><div>',
            '<textarea id="{inputId}" type="{type}" name="{name}"',
            '<tpl if="tabIndex">tabIndex="{tabIndex}" </tpl>',
            '<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',
            '<tpl if="style">style="{style}" </tpl>',
            '<tpl if="maxRows != undefined">rows="{maxRows}" </tpl>',
            '<tpl if="maxlength">maxlength="{maxlength}" </tpl>',
            '<tpl if="autoComplete">autocomplete="{autoComplete}" </tpl>',
            '<tpl if="autoCapitalize">autocapitalize="{autoCapitalize}" </tpl>',
            '<tpl if="autoFocus">autofocus="{autoFocus}" </tpl>',
            '></textarea>',
            '<tpl if="useMask"><div></div></tpl>',
        '</div></tpl>'
    ]
});

(more…)

Add a “Add to Homescreen” Modal to your Sencha Touch v1 App

Tuesday, November 8th, 2011

So you’re in Sencha 1.1.x and need a custom overlay panel like an Ext.MessageBox but with a lot more options? This one in particular is set up to pop into view whenever you’re on this particular parent panel. I used a modded version of it to create an “Add to Homescreen” panel for iOS devices.

App.Bookmark = new Ext.Panel({
  floating         : true,
  modal            : true,
  centered         : true,
  width            : Ext.is.Phone ? '95%' : 400,
  height           : Ext.is.Phone ? '85%' : '60%',
  styleHtmlContent : true,
  mask : true,
  hideOnMaskTap    : false,
  scroll           : 'vertical',
  html             : 'Some html. Whatever. Knock yourself out.',
  dockedItems: [
    {
      dock  : 'bottom',
      html  : '<div class="x-bookmark"><span class="x-bookmark-img"></span></div>',
      width : '100%',
      style : {
        'margin' : (Ext.is.Phone) ? '1em 0 0 0.25em' : '1em 0 1em 50px' // Me getting picky
      }
    },{
      dock  : 'top',
      xtype : 'toolbar',
      title : 'Add Bookmark',
      ui    : 'light',
      items : [
        {
          xtype : 'spacer'
        },{
          iconMask : true,
          ui       : 'plain',
          iconCls  : 'delete',
          handler  : function() {
            App.Bookmark.hide('fade');
            ParentPanel.getEl().unmask();  // IMPORTANT
          }
        }
      ]
    }
  ]
});


App.ParentPanel = new Ext.Panel({
  id               : 'termsPanel',
  scroll           : 'vertical',
  layout           : 'fit',
  styleHtmlContent : true,
  html             : 'blah blah blah',
  listeners        : {
    activate  : function() {
      if (Ext.is.iOS) {
        this.getEl().mask();  // IMPORTANT
        var child = App.Bookmark;
        child.show('pop'); // OMG MAGIC!!!
        var width = (this.getWidth(false) - child.getWidth(false)) / 2;
        var height = Ext.is.Phone ? // Really don't need this or the set position... I just wanted it docked at the bottom
          (this.getHeight(false) - child.getHeight(false) + 35) :
          (this.getHeight(false) - child.getHeight(false)) * 2 / 3;
        child.setPosition(width,height);
      }
    }
  }
});

Remove Sencha Gradient on Form Labels for Selectfields

Tuesday, November 8th, 2011

The gradient really shouldn’t be there. It doesn’t show up on the desktop. It does on the phone. Here’s a simple fix to add to your CSS:

.x-field-select:before {
    background: inherit !important;
}

If that doesn’t get rid of it you may have to set it to a specific color such as this:

.x-field-select:before {
    background: #F0EEDF !important;
}

©2005-2018 Blog – Epiphany Digital is proudly powered by Badgers and Web Design is by Epiphany Digital
Entries (RSS) and Comments (RSS). 24 queries. 1.944 seconds.

Thank you for visiting this site. The web fairy will visit you in your sleep... you know, I was going somewhere with this, but it really doesn't have as much innocent charm as the tooth fairy, especially when I picture the web fairy as someone much like the Simpsons' Comic Book Guy but with wings. It's just not something I want.