B4J Tutorial Beginning JQuery Mobile with OneEvery

Well, this is a proof of concept, nothing fancy...

The idea behind OneEvery is to explore JavaScript frameworks for developing websites/webapps. Whilst the Bootstrap exploration is still going under way, I wanted to test and see if this idea actually works with another js library.

The reason I chose JQuery Mobile is because its very well documented and also just very easy to get around. To be able to work, OneEvery should be fed any css and js files, the pages for the site should be easily created and following the same idea in using the CLI, it should be easy to create elements.

So I created a new project via the command line...

• create jqm com.Mashy.JQM JQM and
• cd jqm

After that I downloaded and linked the JQuery Mobile CSS and Javascript files as seen above. Then I added a new page called buttons

• add_page buttons Buttons

Then it was time to add the components to this page for JQM. I did not create a JQM 'page' for this as I just wanted to proove this concept, so I went ahead...

<a id="anchor" href="#"
    class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-top ui-shadow-icon">Anchor</a>
    <button id="btn" class="ui-btn ui-btn-inline">Button</button>
    <a id="anchor1" href="#"
    class="ui-btn ui-corner-all ui-shadow ui-btn-b">Anchor1</a>
    <button id="btn1"
    class="ui-btn ui-corner-all ui-mini">Button</button>
    <a id="anchor2" href="#"
    class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-state-disabled"></a>

These are the page elements added and like this on the CLI. First I needed a way to ensure the intergrity of the classes. A table called FrameworkClasses exists for OneEvery to know about all the classes being used in the Creator.db file, so a new CLI command was added to update this file.

• add_styleclass [classname category] - add a class to the framework classes e.g. add_styleclass ui-icon-delete Delete Icon will add the ui-icon-delete class.
• secondly, I needed a way to copy elements so I added the copy_element source target command

From the above code

<a id="anchor" href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-top ui-shadow-icon">Anchor</a>

1. addanchor anchor #
2. addclass anchor ui-btn
3. copyelement anchor anchor1
4. copyelement anchor anchor2
5. addclass anchor ui-btn-inline ui-icon-delete ui-btn-icon-top ui-shadow-icon

<button id="btn" class="ui-btn ui-btn-inline">Button</button>

1. addbutton btn
2. addclass btn ui-btn
3. copyelement btn btn1
4. addclass btn ui-btn-inline

<a id="anchor1" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Anchor1</a>

1. addclass anchor1  ui-corner-all ui-shadow ui-btn-b

<button id="btn1" class="ui-btn ui-corner-all ui-mini">Button</button>

1. addclass btn1 ui-corner-all ui-mini

<a id="anchor2" href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-state-disabled"></a>

1. addclass anchor2 ui-corner-all ui-icon-delete ui-btn-icon-notext ui-state-disabled[/CODE]

The result is that JQM is able to be rendered by OneEvery without any hard-coded code internally but by just using the same HTMLElement class and using the database backend to store needed content.

Only the buttons of JQM were explored here. Whilst JQM seems to be a 'dead' framework (has not been updated for ages), there are some interesting things people have done with it.

Ta!