What’s new in Version 1.3

It’s been a long time…

…we shouldn’t have left you without a dope beat to step to… but now we are back! And we are very proud to announce the release of The-M-Project v1.3. We’ve been working on this one for quite a long time. Lots of experiences we gained with customer projects are combined within this release.

When taking a look at this release you might think: Well, where’s the big changes? Where is the “one more thing” kind of thing? But once you scanned through the changelog and started working with this version, you will notice that there are lots of improvements and fixes that will help you making your applications even better.


Speaking of the omega replica changelog, what’s part of the v1.3?

  • Support for jQuery Mobile v1.2
  • Add valueBinding to selectionListView
  • Fixed input tap delay
  • Fixed Android Chrome scrolling
  • Added M.ToggleSwitchView
  • Added isPersistent flag to Toolbar
  • Fixed multiple selection dialog mode on ipad
  • Bugfix if a browser does not support localStorage
  • Fixed problem with BB devices and keyUp event
  • Fixed issues with list item and multiple buttons
  • Fixed a bug with keyUp event an initial text
  • Fixed a bug with image view and the load event
  • Fixed a bug with M.WebView and Android+Cordova (render pseudo div and push iframe dynamically)
  • Set the current list item value to the view value. This enables for example to get the value/contentBinding of a list item in a template view.
  • Fixed an issue with the debugMode flag and M.Logger (thx to wherati)
  • Added M.ImagePreloader component and linked it with espressos preloading part to auto-load all images on startup if enabled via config.json.
  • Refactored internal id/model_id behaviour of list item ids passed when a list item is selected.
  • Disabled the automatic positioning of buttons within a list item view applied by jQuery Mobile.
  • Added updateListItemView to M.ListView.
  • Minor performance improvement for M.LoaderView (cached selector).
  • Fixed inconsistency bug with selection list in single_selection_dialog mode.
  • Added iconSize property to M.MapMarkerView.
  • Added auto-destroy on DOM remove especially for list items



Ehm, ok. But now give me some details

Value Binding
You all know the contentBinding feature we got from day one. With this feature, a view can be bound to a controller’s property. Everytime this property changes, the view gets updated automatically based on the content of that property. This features is very handy if you have e.g. a form view that display a person record. If this record changes, the view gets informed immediately and the form displays the updated version of the records properties. If your form is based on text fields, this fits your needs perfectly. But also filling selection lists with contentBinding is very easy. But there was one important limitation to this feature so far: A selection list is based on two information! The one that is responsible for the content of the list and another one  that is responsible for the selected value. That’s why we added the valueBinding feature. With contentBinding you can set the whole list of items of a selection list e.g. based on a model. With valueBinding you can set the selected value for the given selection list. Here’s an example (look at the KitchenSink app for the complete source code):

the view (a selection list)

selectionList: M.SelectionListView.design({
    selectionMode: M.SINGLE_SELECTION_DIALOG,
    initialText: 'Please choose',
    contentBinding: {
        target: KitchenSink.ControlsSelectionListViewController,
        property: 'boundContent'
    },
    valueBinding: {
        target: KitchenSink.ControlsSelectionListViewController,
        property: 'boundValue'
    }
})

the content bound to the view

var boundContent = [
    {
        "value":"06:00:00",
        "label":"06:00"
    },
    {
        "value":"07:00:00",
        "label":"07:00"
    },
    {
        "value":"08:00:00",
        "label":"08:00"
    },
    {
        "value":"09:00:00",
        "label":"09:00"
    }
];

the calls to trigger both the contentBinding and the valueBinding

this.set('boundContent', boundContent);
this.set("boundValue", "07:00:00");

The first set() will trigger the rendering of the selection lists’s item list, the second set() will trigger the selection of the ’07:00:00′ item. You can see that both the contentBinding and the valueBinding are triggered with the same function – the set()-method of M.Controller. The first argument of that method is the name of the referenced property as a string, the second one the value resp. content.


M.ToggleSwitchView
It took a while, but we finally decided to add the jQuery mobile flip toggle switch. This basically is some kind of a boolean view that offers the user two possible options of which one is always set: true or false.

isPersistent flag for the toolbar
Often a toolbar is placed at the top of a page and is basically the same on every single page. So if you want to have the same toolbar on every page and you want it not to change with the page transition, you can now set the isPersistent flag. This property determines whether the toolbar is persistent or not (as its name already told you). By default it is set to YES. If you like to customize the behavior you can simply define your own identifier. If you switch from one page to another and the toolbars on both pages share the same identifier, the toolbar will stick to the viewport while the rest of the pages will move. If you want the toolbar to be sticky all over your application, simply don’t care about the identifier property resp. set it to YES.

M.ImagePreloader
This feature is linked with the ‘preloadImages’ property of Espresso’s config.json. This feature can be used to advice The-M-Project to automatically preload all images located in your project directory. By default this is set to NO. So each images used within an application will be loaded once it gets displayed on the screen. So there always will be a tiny delay even if it’s only a small image. By turning this feature on, all images will be in memory right after the startup of your application.


Now get it!
We hope you enjoy the new version of The-M-Project. We also like to thank everyone who helped us improving this and further versions. We’re always happy to get feedback and pull requests from you guys (and girls). And, as always, a special thanks goes out to the guys at filament group for providing such a great thing as jquery mobile for free!

Download The-M-Project v1.3 or get it via NPM (npm install espresso -g)

Introducing: The-M-Project Version 1.2

Hey folks,

first of all: We are very sorry we had to postpone the original schedule! We planned on releasing this thing in June, now it took us until 3rd of July. But as you all know, you can’t rush these things. Anyway, we’re very happy finally announce the release of a new version of The-M-Project and Espresso – v1.2. The breitling replica impatient ones might want to take a close look at the changelogs here (The-M-Project) and here (Espresso). If you’d like to get a better idea of what has changed since the last release, simply keep reading.

Introducing M.CarouselView

We know that some of you have been patiently waiting for such a view component for quite a long time. Now we finally had the chance to build such a carousel view, based on cubiq’s amazing iScroll library. if you don’t have any clue what this view does, let me give it to you in short:

A Carousel View contains other (sub-) views, called M.CarouselItemView. No matter how many items there are, only one view is visible at a time. By swiping along with your finger, you can navigate through these views. One typical use case of such a component is a swipeable image gallery. So grab your smartphone and launch our sample app: the carousel sample.

Native packaging finally supports Cordova 1.9 (and 1.8)

As you know, we had some trouble lately with Espresso’s native packaging. We just started integrating a plugin support and forgot to keep the basics in line with each new Cordova/PhoneGap release in the meantime. But no we finally got everything back together.

Now you can fully enjoy this pretty helpful tool: Build web apps that run in a native Android or iOS container with just one command! Curious? Interested? Then check out a step by step tutorial at The-M-Docs (Native Packaging). In short this simply means: Add a few lines of configuration to your project’s the config.json and run espresso package build #platform#.

What else did we do?

  • You can call getParentPage() on every view and the view will tell you on which page it is defined. For example: M.ViewManager.getViewById(‘m_7′).getParentPage();
  • M.Environment.modernizr has now the attribute inputattributes.
  • Bugfixes

Now get it!
Download The-M-Project v1.2 or get it via NPM (npm install espresso -g)

Metro Style Apps with The-M-Project

Have a look at the Demo and the Code.

Recently Microsoft announced a Metro theme for jQuery mobile – fortunately The-M-Project uses rendering technics from jQm and so you can build Metro styled Apps with The-M-Project.
First you need the Metro Theme. Thanks to sgrebnov you get it from GitHub.

I started with the The-M-Project KitchenSink App and modified it. You can have a look at the source. It’s also published on GitHub.

Have a look at the frameworks folder. There are swiss replica watches all relevant Metro data inside the Metro directory.

  • images
  • jquery.mobile.metro.theme.css
  • jquery.mobile.metro.theme.init.js
  • jquery.mobile.themeswitcher.js

You also find them on sgrebnov / jqmobile-metro-theme and the Themeswitcher.

To include the files into the Application, Espresso needs to know about the new files. So you have to add the Metro directory to the config.json of your application.


"libraries":[
        {"name": "Metro", "refs": ["*"]}
    ]

If you now start or build your App with Espresso you will have a Metro-Styled The-M-Project Application.
If you like to test the App in your own environment have a look at the builddirectory. Theres the latest builded KitchenSink App with ran in every HTML5 Browser out of the box.

The-M-Project 1.1

Hey folks,

first of all: Thank you for the support! There have been almost 10.000 downloads of The-M-Project v1.0 so far, not to mention further installations via GitHub or NPM. Wow! Nevertheless, we are not resting on our laurels but continuing to work on advancing the framework.

Version 1.1 brings a lot of bugfixes and optimization under the hood. People from all over the globe helped us to improve it – thanks to your continuing support of the framework, issue tracking and pull requests for all those involved.

Also there’ve been some major improvements of rolex replica which I want to introduce three of them shortly.

Integration of jQuery Mobile 1.1: Header’s now fixed!

On 13th April 2012, the jQM team released version 1.1.0 of jQuery Mobile. They’ve again done a great job in improving it furthermore. A lot of effort has been put into optimization, e.g. of transitions. It’s great to see people putting that much effort into development and sharing it with the people for free. Thanks for that, again!

The probably greatest feature, and the one with the clearest impact is the new support for true fixed toolbars! The jQM team just killed it and now provides a CSS based solution that is lightweight and comes with great compatibility. Here’s a list of devices and/or platforms that support the new feature:

  • iOS5 – iPhone and iPad
  • Android 2.2 and 2.3
  • Android 3.x tablets (Honeycomb)
  • Android 4.x (ICS)
  • Chrome for Android (beta)
  • BB Playbook 1-2
  • BB7
  • Nook Color/Tablet
  • Kindle Fire
  • Kindle 3
  • All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)
I’ve just borroughed a picture of the jQM blog post, to show you, what this feature is about:

Fixed Toolbars

The header now is fixed and content scrolls underneath it.
By default a M.ToolbarView is now fixed. You don’t have to set any attributes to achieve it.
You’ll find all changes listed in the release announcement blog post on jquerymobile.com.

A new view for tablets: The M.SplitView

With our v.1.1 release we’re introducing a new view component, that makes developing tablet apps a lot more fun now: M.SplitView. It represents a view made popular by the iPad, where, in landscape mode, you have a menu on the left third of the screen and the details view on the other two thirds. In portrait mode, this switches the left menu switches to a dropdown menu with a button on the left side of the header bar. You all know it, see:

           

Or try the SplitView on your tablet, e.g. the iPad (www.the-m-project.org/apps/splitview) and check the source in our samples repository!

Parameterized I18N

Do you hate splitting translations in two parts, just because you’ve a dynamic component in the middle of it? I do. That’s why M.I18N now supports parameterized translations. Simply name the dynamic component in the well known template/pattern syntax “<%= name %>” in your translation and pass the localize call an object defining it (here: name) and you’re fine.

Read more details in a separate blog post or see the documentation.

But not only The-M-Project received updates. Also Espresso received major improvements, most of them were bug fixes, but those were important. The native packaging for iOS and Android now is fixed and supports Plugins. Check out our config.json doc to see how to use it and get more information.

One more thing: Windows support of Espresso now has improved! It now supports the init/generate/server/build commands. Check out the simple HowTo for it in our Docs!

That’s it for now. Let us know what you think about it! Here, on Twitter, on Facebook, or our iRC channel (#themprojet on irc.freenode.net).

 

Download The-M-Project SDK v1.1

 

Happy coding and cheers!

How to debug Espresso with WebStorm

Espresso is a NodeJS program and so, you can debug it with WebStrom. Currently we are using WebStorm 3.0.3 and it’s pretty easy.

What do you need?

After WebStorm is running open the folder where Espresso is located. File-> Open Directory…
Then click the NodeJS icon in the upper right (the one with the red border). The popup wants to know where your NodeJS is located. If you don’t know where you have installed NodeJS, open a commandline tool and use the following command:

echo $NODE_PATH

The path to NodeJS should be printed to the commandline tool. Just enter this path into the popup and confirm with OK. In WebStrom navigate to Espresso/bin/espresso.js and open it. Though Espresso wants to omega replica have parameters to startup, you now must hack a little bit. The last line of the espresso.js file is something like this:

cmdParser.dispatch(args);

Overwrite the ‘args’ variable with your command like this:

args = [ 'server', '-d', '/Users/dev/Documents/tmp/example_app' ];
cmdParser.dispatch(args);

The first command in this example is ‘server’. This means you’d like to use Espresso server. You could also use ‘build’ or something else (espresso -h will give you more examples). The second command is the parameter ‘-d’ for directory. And the third is the path to the sample app. So the whole thing starts the example_app in the server mode equal to the commandline call ‘espresso server -d /Users/dev/Documents/tmp/example_app/’.

If you now perform a left click on the espresso.js file in WebStorm the menu will show a debug entry. Select the one with the NodeJS logo on it and you can start debugging Espresso.

I18N: Localization with parameters

Hey guys,

one of the features that is really underrated is our M.I18N component. It makes developing multi-language really easy. Now, it’s extended for a really cool feature, that I call “Parameterized Localization”. Now, the subject says it all, you can pass dynamic values to a translation. Ok, let’s dig into it for hublot replica some clearness:

We’re assuming the following two language files.

M.I18N.en_us = {
    'greeting': 'Hello &lt;%= name %&gt;, today\'s date is &lt;%= date %&gt;.',
    'format': 'mm/dd/yyyy'
}

 

M.I18N.de_de = {
    'greeting': 'Hallo &lt;%= name %&gt;, das heutige Datum lautet &lt;%= date %&gt;.',
    'format': 'dd.mm.yyyy'
}

Ok, all pretty normal, except this syntax:

&lt;%= name %&gt;

Everyone using lists should be familiar with this syntax. It’s also used for placeholders in ListItemViews. And it’s working in a similar way here: The placeholder is replaced by a value we pass via an object. The key to the value has to be the string that’s used inside the brackets, here name and date. That means, we have to pass an object with these two keys as properties. And passing an object is just…yeah, it’s just passing an object ;) . Look at this example for translating a label view’s value and you’ll know all you need to:

greetingLabel: M.LabelView.design({
   value: M.I18N.l('greeting', { name: 'Brendan', date: M.Date.now().format(M.I18N.l('format')); }
})

As you can see, the usual translation (here used for the date format) works the same as ever before. But now, you can pass an object for the translations that include placeholders (or name it templates) and they’ll be replaced by the actual values.

This is what comes out for the above example, written at the 20th March 2012:

For German (de_de):

&quot;Hallo Brendan, das heutige Datum lautet 20.03.2012.&quot;

For English (en_us):

&quot;Hello Brendan, today's date is 03/20/2012.&quot;

As I said: this is dead easy. But it’s cool… :)

Always enjoy coding with The-M-Project!

Cheers,
Sebastian

Custom view for lists

The-M-Project already ships with lots of different ui components that will cover many parts of your app. But there might be a situation where you will need to cartier replica have your own custom view component. Therefore we published the “Howto build a custom view!” post a while ago. Based on this, we want to introduce to you two custom views today that will help you handling lists:

PaginationView

This custom views speeds up the rendering of long lists and the items will be clearly arranged.

First of all: Download this sample-app. It includes the pagination custom view.

You can test this app with “espresso server”:

To include the PaginationView in your own project, there will be three steps:

  1. Copy the pagination.js and the pagination.css in your projects framework folder. Create a new folder maybe “pagination”. You can see this in the sample app.
  2.  Reference to this folder in the config.json:
    &quot;libraries&quot;:[{&quot;name&quot;: &quot;pagination&quot;, &quot;refs&quot;: [&quot;*&quot;]}]
  3. Use this view inside a page-view. It is pretty much the same as the list-view, just one additional value: “itemsPerPage”. The total number of items will be splitted, so that the maximum number of items that will be rendered is given by this value.
    pagination: M.PaginationView.design({
         listItemTemplateView: MesseBlackBerry.SearchResultExhibitorList,
         contentBinding: {
              target:MesseBlackBerry.SearchController,
              property: 'searchResult'
         },
         itemsPerPage: 10
    })

Great thing is, if there are many pages, the user is always able to jump to the first and the last page.

PageIndicator

If you don’t want to split a long list, but show different shorter lists, maybe an indicator will be helpful.

There is not much logic implemented, so you have to take care of this yourself.

pageIndex: M.PageIndicatorView.design({
     contentBinding:{
          target: MyListsApp.IndicatorController,
          property: 'pageIndicator'
     },
     anchorLocation: M.CENTER
})

You can add the code above to your toolbar-footer. The “pageIndicator”-property should look like this: [3,3] the first value will be the current page, the second value the complete number of pages. So “3;3″ is the value-pair of the indicator picture above. If you set this properties value inside a controller, the indicator will refresh its state.

Download the small custom-view “PageIndicatorView“.

Hope this views make some things easier while coding with The-M-Project.

Hell, yeah: Version 1.0 RC1 arrived.

Hey guys,

on Thursday, late night at Middle European Time, we released our v1.0RC (and our new website). I’m very excited about this step and the feedback we’ve received so far was mostly positive and (what pleases me a lot) very constructive.
From a distance of two days now, I’m watching into the rear-view mirror and just want to talk about some changes.

The-M-Project v1.0 RC1

Most of the changes of v1.0 RC1 are bug fixes. Here’s the changelog:

  • Fixed a bug with sendNoCacheHeader property of M.Request
  • I18N not sets language to default language if the desired one is not available
  • Fixed a bug in M.Request concerning the internal callbacks
  • Added M.DataConsumer as a special data provider that only works as a source and in combination with the model’s find()
  • Fixed a bug with textfields (date input), computed value and the datepicker
  • Updated Underscore to v1.3
  • Updated mobiscroll to 1.5.3
  • Fixed a bug with M.ScrollView and the clear button
  • Added disable()/enable() and clearValue() to M.SearchBarView
  • Added cssClass property to M.ListView
  • Added special behaviour for M.ButtonView inside of an M.ToggleView
  • Model: changed m_id from number to unique string (4 digits each can be one of 32 chars)
  • Model: deleted bulkImport method
  • Renamed getRecordForId() to getRecordById() (in M.RecordManager), the latter one is deprecated now
  • Deleted M.ModelRegistry
  • Deleted M.DataProviderCouchDB
  • Deleted M.DataProviderWebSQL
  • Method find() in DataProviderLocalStorage now takes an object for query
  • Added “include” operator (for strings) for LS find query
  • Changed version to 1.0RC1

For a v1.0RC 1 it is important, that all components of the framework are usable and production ready. The data providers for the model were a great playground. But to make things stable and overall usable, we dropped the parts that weren’t 100% finished and whose future is questionable. The WebSQL spec is deprecated. That’s a sad thing that nobody is working anymore on this well-known technology, but that’s the way things go. The LocalStorage is an easy and widely available storage mechanism and IndexedDB is at the ready. That’s why we dropped the data provider for WebSQL and CouchDB. As soon as IndexedDB is getting more acceptance in the mobile world, we’ll provide an IndexedDB data provider for it – that’s for sure. And if you ever feel the need to have another data provider, you can simply extend M.DataProvider and write your own.

New Espresso feature: Native Packaging

The evolution of Espresso from v0.1 to 1.0RC 1 is just a pleasure to watch. It started as a simple nodeJS based test server to a tool that automates many parts of the development workflow. I don’t wanna miss Espresso in my daily work with the framework.

The newest feature of Espresso is the ability to produce native apps with one command, on-the-fly. After configuring your native environment in config.json you just enter

espresso package build myAndroidApp

your app is build and you’ll receive an .apk file that is ready for the market! That’s cool and very handy.
Here’s a sample configuration

&quot;package&quot;: {
    &quot;myAndroidApp&quot;: {
        &quot;method&quot;: &quot;PhoneGap&quot;,
        &quot;os&quot;: &quot;Android&quot;,
        &quot;sdk&quot;: &quot;android-8&quot;,
        &quot;mode&quot;: &quot;debug&quot;,
        &quot;package&quot;: &quot;com.tmp.todos&quot;,
        &quot;activity&quot;: &quot;ToDos&quot;,
        &quot;keystore&quot;: &quot;/path/to/android-key.keystore&quot;,
        &quot;keyalias&quot;: &quot;theAlias&quot;,
        &quot;storepass&quot;: &quot;thePassword&quot;,
        &quot;manifest&quot;: {
            &quot;activity&quot;: {
                &quot;screenOrientation&quot;: &quot;portrait&quot;
            }
        }
    }
}

In our docs, you’ll find a tutorial for packaging a web app. Check it out.

The-M-Docs

Besides working on the code itself, we heavily worked on our docs. The-M-Docs is a must for all developers working with The-M-Project. We’re offering Tutorials,  references and description to working with TMP, core concepts, Espresso and Views. For sure, docs are always work in progress and we’re working a lot on i, but up to now, they were undergoing a lot of improvements and they contain a lot of useful information right now. And as always: if you’re missing something and you know how to do it, simply clone the repository; and write it for yourself. That’s active contribution and we’ll be very thankful about it.

How to get it?

It’s also written down in our Get Started section, but here’s it again.
As always, The-M-Project and Espresso are available on GitHub. Since The-M-Project is integrated in Espresso as Git submodule, simply clone Espresso:

git clone --recursive https://github.com/mwaylabs/Espresso

Or if you prefer to checkout The-M-Project alone:

git clone https://github.com/mwaylabs/The-M-Project

Additionally you can get Espresso via NPM:

npm install espresso -g

And if you want it all simple and convenient, download the zip from our website to get it all at once:
Download zip

To set an espresso alias, add the following line to your .profile (e.g. .bash_profile in ~):

  • alias espresso='/Users/path/to/espresso/Espresso/bin/espresso.js'

Enjoy your coding with The-M-Project v1.0 RC1!

Version 1.0RC1 is here and: Happy Birthday The-M-Project

Yes, it’s already one year ago, since we released our first draft of the web site and the first version of The-M-Project, v0.1 alpha.  Reason enough to just say:

Hello,World! Like Franky said, we did it the m-way…check out our brand new website www.the-m-project.org #brand #new #website #yeah“, were the words we chose to tell the world that we’re online now.

Since then, a lot of stuff improved, things changed and many people are using our framework now. We’re proud of what has been come out of this project, what we’ve been realizing since January last year and what The-M-Project is today.

We’re also very thankful to the developers that are offering us great open source technology that we can use in The-M-Project to make it better and more useful. In special, this goes out to the guys of jQuery Mobile that have been doing a great job in 2011 and it doesn’t look like 2012 will change anything to it – let’s both keep on the great work!

Besides birthday wishes, there’s another really awesome announcement to make:

Version 1.0 RC1 is out!

And, as you see, with it, our new web site is launched.

There’s still some work to do (NPM update, Website refinement, …) of that we will tell you tomorrow. Good night, stay tuned!

Use the ThemeRoller for jQuery Mobile with The-M-Project

The jQuery guys have introduced their ThemeRoller with the RC 1.0.
I like to give you a short tip how I use this awesome tool for my The-M-Project apps.
The ThemeRoller is a very self-explanatory web app and saves you a lot of time while styling and customizing your apps. I like it colorful so in the example I styled the Todos app a little bit.*

First start the ThemeRoller and style all the Views you like in the colors you like. If you are ready to test you have to download the theme (you find the download button in the upper left). After unziping the theme, I recommend to place the minified css file in the app/resources/base/ folder of you The-M-Project app. There are several ways to include further css files. I’ve choosen the css import like this:

@import url(&quot;your_theme_name.css&quot;);

Place the import url line in your app/resources/base/style.css file and et voilà – you can see your colorfully App now by starting espresso server or building your App.

The ThemeRoller is also a good starting point for customized Apps. Think of the Theme as skeletal structures, which will take shape as the app develops.

Before and after:

* you can find our sample Apps source code here and the running ones here