Tag Archives: html5 framework

Using the SliderFill Sencha Touch Plugin in Sencha Architect

08 Aug 2013

Sliders are pretty cool in Sencha Touch – what makes them cooler is the SliderFill plugin by Thomas Alexander. The plugin can be downloaded here: https://market.sencha.com/extensions/sliderfill.

Before SliderFill the sliders are minimalist – functional yet a tad bland:

sliderfill_before

After SliderFill – one small addition makes them much more appealing:

sliderfill_after

Adding the plugin to your Sencha Architect project is simple – there was one caveat that I encountered – an error within the plugin but it was easy to sort out. Lets walk through the various steps needed to add and use the plugin within Sencha Touch via Sencha Architect.

Create a Sample Architect Project

First thing is first – open Sencha Architect, create a new project and add a slider to your default view. I won’t walk you through that part but if you are lazy here’s a link to a sample project before the plugin was added. What we want is something simple so my example looks like this:

sliderfill_01

Download and Install the SliderFill plugin

Next, download the plugin (link is in first para above) and extract the contents. The archive has the following structure:

  • sliderfill
    • img/
    • src/
    • index.html
    • README

Curiously the README is empty – no worries – within the “src” folder are two files, what you want is the plugin itself which is called “SliderFill.js”. Copy that file and place it within the root of your project, or, if you like, create a plugins folder in your project root and place the file there. For this demonstration I’m just placing it in the project root.

Next you need to add the plugin to your project. Within architect look for the Project Inspector panel – in the screen caps provided here it is on the right. Scroll down to the bottom and look for the “Library” node. Once the plugin is added to the project it will appear as a child of that node.

sliderfill_02

To add the plugin, click the “plus” (+) icon as shown below and choose Resource > JS Resource:

sliderfill_03

You now have a new JS resource added to your project’s library. You can see a red exclamation indicator nexct to it indicating that it needs to be configured.

sliderfill_04

Select the JS library resource and its config will appear. All you need to do is to enter the path to the SliderFill.js file. As I just placed it in the project root all I need to do here is to add the file name.

sliderfill_05

Add SliderFill to a Slider

Now that the plugin is installed lets add the plugin to a slider. Select your slider from the Project Inspector. Its config options will appear.

sliderfill_06

The plugin property doesn’t exist in the config but we can add and configure it by typing the word “plugins” into the config search field and then clicking the “Add” button to create it.

sliderfill_07

We now have a new custom property within the slider’s config.

sliderfill_08

Lets set the property’s type by clicking the “type” button (to the left of the property identified by a circle icon with three dots) and choosing “Array”:

sliderfill_09

We now need to configure the plugin. The plugin will accept a configuration object which is comprised of two things: 1)The xclass that specifies the plugin, and 2) an array of class names to apply to each SliderFill background. I have a single slider handle so I’m only going to have a single class.

To add the config object click the “Edit” button that appeared to the right of the plugins property when you selected “Array” as the property type.

sliderfill_10

The editor appears:

sliderfill_11

I’ll add this object wrapped in an array literal:

[
  {
    xclass : 'Ext.plugin.SliderFill',
    fillCls : ['my_custom_slider_bg']
  }
]

sliderfill_12

Done!

…but one last thing – SliderFill Ver 1 currently generates an error:

sliderfill_13

Ok then, lets go fix it – look in your Project Inspector under the Library node where you added SliderFill.js. Double-click it to open the file as we’ve got a single line to add to fix the error:

sliderfill_14

As the error indicated lets go down to line 46. We want to go back up a couple of lines and add the following line *after* line 44 – but first we need to unlock the file – click the “Unlock” button:

sliderfill_15

Again, create new line after line 44, we will add the following code:

slider = Ext.getCmp('slider.id');

The code should look like this:

sliderfill_16

Save your project.

Style the SliderFill background

Almost done – we just need to setup some defaults and we need to specify a color for the SliderFill background. An easy way to do this is to attach a new style sheet to the project via the Library. So create a new css file, save it in the root fo your project as we did with SliderFill.js (or create a new folder for it if you like) and populate it with the following:

.x-slider-fill{
    margin:0.925em;
    position:absolute;
    height:0.8em;
    -webkit-border-radius:0.4em;
    border-radius:0.4em;
    margin-top:0.75em !important;
    background-image:-webkit-gradient(linear, left top ,left bottom, from(#0A3A86), color-stop(.5, #4C8DE7), color-stop(.95, #6BABF5), to(#0A3A86));
    z-index:1 ;
}

.x-draggable {
    z-index:2;
}

.my_custom_slider_bg{
    background-image:-webkit-gradient(linear, left top ,left bottom, from(#8b1a05), color-stop(.5, #e35e4f), color-stop(.95, #e18080), to(#6f2c22));
}

Note that last style – my_custom_slider_bg thats the class name we specified in SliderFill’s configuration object.

All that is left is to attach the style sheet. The process is the same as what we did to add SliderFill.js, except this time we will add a Style Sheet instead (note that this is a quick and dirty way of doing things – perfectly functional though if you’re familiar with SASS then you’d likely prefer to do it that way).

sliderfill_17

Select the CSS node underneath the Library and enter the path to your CSS – in my case my CSS file is called SliderFill.css.

Save your project and preview – you should see this:

sliderfill_after

Has your design view in Architect gone blank?

Sencha Architect V2.2.2 has a bug where if you add the plugin attribute to the view config the WYSIWG Design View will become completely blank as you can see in one of the above screen captures.

There are a couple of ways around this – the one I think I prefer is to create an onSliderfieldInitialize event in the controller which will apply the plugin to every slider that is initialized within your app.

To do this follow these steps:

  1. Click on your Controller node within the Project Inspector
  2. Next, Locate “Actions” and click the “Plus” button to the right
  3. Select “Controller Action” from the pop-up
  4. Next choose “Ext.field.Slider” as the target type
  5. Then select “initialize” as the event name

Architect will create the new event and display the editor for it – paste in the following code:

component.setPlugins({
    xclass : 'Ext.plugin.SliderFill',
    fillCls : ['my_custom_slider_bg']
});

That’s it, now **every** slider that you add will have SliderFill applied to it and Architect’s 2’s Design View won’t go completely blank on you.

Scrolling in LungoJS HTML5 Framework

12 Jul 2012

I’ve been looking at other frameworks lately, among them LungoJS. After fiddling with the framework I had difficulties creating scrolling views. The docs say that getting a scrolling area is as simple as adding a “scrollable” class to a div – not quite, there are some other requirements.

To get scrolling articles you must have the following structure – notice the DIV that wraps the content:

...
Your content in here
...

If you attempt to create a scrollable div inside an article tag you **must** also set a height for that div, like so:

...
Your content in here
...

Notice the ID in the scrollable divs – ID is **required**, you will see as much in the console if you forget this.

Note the DIV that is the immediate child of the scrollable div – that is also required. No need to style it or add an ID. Your content must be wrapped by a DIV – P’s, Lists and header elements also work. Spans do not.

If the scrolling area is not an article tag then you **must** include the height for the scrolling div, which is illustrated in the second example above.

I noticed a lot of confusion in the forums and was confused myself – IMO the docs should be amended with the above.