Introduction to NikaFramework (NKF). Part 1

mercredi 23 janvier 2013

NikaFramework - architectural JavaScript Framework for Web UI developers.
The first thing to understand is that it is not UI-HYDRATED framework, as for example. ExtJS or SmartClient.
This framework, which is designed to organize your code, to make writing complex dynamic pages just busy, while leaving an opportunity to impose pages at the discretion of the developer.

NBikaFramework Logo

Decides which tasks framework?

1. Code Organization
One of the problems of writing large web applications is the fact that often the code is not organized, and different parts of the p-ties are in files that do not meet the meaning of the name. The same problem is that you can not say 100%, where there will be one or a certain part of f-ties.

To solve this problem NKF divides the page into its component parts:
layout (layout), page (page), widget (widget), component (component).

layout - a global model of the form, for example. logged on / nezaloginenny that will not change when you change pages. Eg., If we nezaloginennoe state - then we just show the logo on top, and the bottom footer.



But if the user is logged on to the state - then we show the top menu, where you can already go to a page.



Layout is not necessarily state zalogenenny / nezaloginenny. It can also be used as a layout for reference, wiki, where markup is initially different.

On top is the component layout - page (page). This is a random page on standard Web sites, for example. Home, About Us, Products, etc.
Page itself is very similar to the layout (layout), with the only difference that when you change the contents of the page changes, while the layout (layout) changes only when you change the global form (zalogeneny / nezalogineny / help / wiki etc. ).

And layout (layout) and the page (page) are a widget (widget). Of course, you or anyone allowed to write HTML directly in the layout (layout) and the page (page).
But registered more than make rational faculty cash into widgets. Widget (widget) is a custom UI part f-signal. Ex. if you look at page gmail, then the widgets can be roughly divided into:
- Header (top)
- Actions (on the left)
- GTalk (left)
- MailList (center)

Such a division is convenient because then this widget is easy to find and copy, as it is located in a specific, pre-known place.

Пример структуры реального проекта

Now let's see how to store files offers NKF.
xhtml - in dom
css, scss - in style
json - in data
js - in logic
drawings - in img
+ Can create their own versions

This way you always clear code organization.



2. Layout in classic form
This may sound funny, but JavaScript UI frameworks such as ExtJS, SmartClient and others - it is purely declarative writing JavaScript code, which is then converted to the desired DOM.
This means that anything podizaynit make their own way is extremely difficult, because the UI framework dictate your style.

For me personally as a true Web UI Developer, it is very important.

Here, the same approach to writing code is a classic.
First we typeset (HTML), then stylizing (CSS) and Doda logic (JavaScript).

For these purposes, you can write code in dom folder. Ex. we have a widget Header. Therefore, by default, a file and write it index.xhtml markup.
In the style folder, create a file with any name and extension. Css or. Scss there writing styles.
How to write logic - it will be in a separate article.

Nothing else to do. NKF project build system itself will take all the files, convert them to what you need, and you will see your markup, styles, and logic which was written.

3. Access to resources on demand
This f-ties is one of the important features of NKF.
Imagine that we need to write a simple menu widget, which just 3 points.

And so, in the dom / index.xhtml write home layout.
In data / menu.json will keep yourself a predefined set of data for the menu.
In dom / item.html we describe the markup for one item

dom / index.xhtml:
<div class="menu-list"> <ul></ul> </div> 


dom / item.xhtml:
 <li> <a /> </li> 


data / menu.json:
 [ { "id": 1, "name": "Home", "url": "/home" }, { "id": 2, "name": "Products", "url": "/products" }, { "id": 3, "name": "Contacts", "url": "/contacts" } ] 


logic / Menu.js
 /* .... */ // доступаемся к index.xhtml, если не указано никаких доп. параметров var domComponent = this._getComponent(); // доступаемся к data/menu.json, получаем структуру меню var menuData = this._getComponent({ componentPart: "data", // data это JSON componentPartName: "menu" }); // доступаемся к dom/item.xhtml var itemEl = this._getComponent({ componentPartName: "item" // по умолчанию ищет xhtml файлы }); var root = domComponent.find("ul"); $.each(menuData, function(key, value) { var el = itemEl.clone(); el.find("a").attr({ href: value.url, "data-id": value.id }).text(value.name); root.append(el); }); /* .... */ 

That finished the menu. Note that we do not write JavaScript pieces of HTML code, but only
operate DOM. Just pay attention that index.xhtml, item.xhtml, menu.json not catching up with AJAX, and already on the client side, due to the method of packaging resources Web Resource Bundle system and build the project, and you can access them by inherited methods.
I would also like to note that the only file you will need to register in the project configuration file, it Menu.js.
All other resources will be included automatically by the build system.

0 commentaires:

Enregistrer un commentaire

 
© Copyright 2010-2011 GARMOBI All Rights Reserved.
Template Design by Herdiansyah Hamzah | Published by Borneo Templates | Powered by Blogger.com.