PDA

View Full Version : Designer-Built Application With Multiple Namespaces



billtricarico
24 Feb 2012, 9:11 PM
Hello,

I am building an application that will have multiple tabs on the main viewport. What I would like to do is break each tab into its own namespace, to make it easier for parallel development of the UI. My thought was to create a folder for each namespace and create a new Designer project in each folder, where each folder is a tab on the application. There would be another 'application' folder that would be the main Viewport/TabPanel project that binds it all together.

Each Designer project would have a different namespace and would deploy the same developer's local working directory on their application server for development purposes.

One of my questions is....how can I configure the main 'application' project to reference the other namespaces?

The other question is....Is this a good way to structure the application, or is there a better way?

yAdEs
25 Feb 2012, 8:49 PM
I have the same problem, cause I need to combin 3 apps into one.If I do it in the nomoral way, we can't rebuild the app with Designer, so I choose to organize my folder like this:
MyFolder
app1(Controllers,Models,Stores,Views folders),
app2(Controllers,Models,Stores,Views folders),
app3(Controllers,Models,Stores,Views folders),
data,
extjs,
app.js,
index.html

billtricarico
26 Feb 2012, 7:42 AM
Hi yAdEs,

This is what I have done and it seems to work:

1) I create all my Designer projects in a flat folder structure:
/my_projects

application (my main project)
tab1 (subproject)
tab2 (subproject)
...
2) Each of my projects' deploy folder is the same, the web root. This will create a folder for each designer project in the web root.
3) First I created a skeleton application project with a simple Controller with a TabPanel render event, an ApplicationViewport View with a TabPanel inner view and deployed it to the web root. This created my "application' folder and designer.js/designer.html files.
4) Since Designer overwrites designer.js and designer.html, i backed them up to appliation.js and application.html
5) I then built a Panel in my tab1 project (this will be a tab on the main TabPanel), along with controllers/views/model/stores/etc just for this Panel. Deploying this project creates my tab1 folder in the web root and overwrites designer.js and designer.html.
6) Now I edit application.js, adding the paths and tab1's controller:


Ext.Loader.setConfig({
enabled: true,
paths:{
'tab1':'../tab1'
}
});


Ext.application({
views: [
'ApplicationViewport'
],


appFolder: 'application',


autoCreateViewport: true,


name: 'Application',


controllers: [
'ApplicationController',
'tab1.controller.Tab1Controller'
],


launch: function() {


}
});



In the ApplicationViewport Controller's TabPanel render event, I add this code:


abstractcomponent.add(Ext.create('tab1.view.Tab1'));


to add the subproject's tab to the main project's TabPanel.

When I point the browser to application.html, it loads the main application and loads both controllers.

I don't know if this is the Sencha way to do it, but it works for me, and it allows multiple developers to work on the UI in different Designer projects without stepping over each other.

Thanks.

yAdEs
27 Feb 2012, 7:14 AM
I guess this is exactly the right way to structure multi-app folder, mitchellsimoens said all controllers should load upfront, so that's not a problem to put all controllers in your app.js file. But can u give me an example? I'm trying it in the same way, but I haven't figure it out.

yAdEs
27 Feb 2012, 7:26 AM
And as u said, every "tab1" folder and "tab2" folder will have folders and files like this:
Application-
app-

controller,
model,
store,
view,

designer.js,
designer.html,


tab1-

app-

controller,
model,
store,
view,

designer.js,

designer.html,


tab2-

app-

controller,
model,
store,
view,

designer.js,

designer.html

Is this right?

yAdEs
27 Feb 2012, 7:55 AM
It's real a good way cause everybody can focus his part via designer.

billtricarico
27 Feb 2012, 8:14 AM
Yes it accomplishes two things: it allows parallel UI development and it prevents it from being one huge project, which can really slow down development because the Designer can become very slow.

Did you get a sample app up and running with this new folder structure?

yAdEs
27 Feb 2012, 8:54 AM
Well, I misunderstood your meaning, your file structure should look like this:
And as u said, every "tab1" folder and "tab2" folder will have folders and files like this:
Application-
app-

controller,
model,
store,
view,

tab1-

controller,
model,
store,
view,

tab2-

controller,
model,
store,
view,

designer.js,

designer.html

Is this right?

billtricarico
27 Feb 2012, 9:22 AM
My structure goes like this:
WEBROOT/

application

controller

ApplicationController.js

model
view

base

ui

ApplicationViewport.js

ApplicationViewport.js

Viewport.js

tab1

controller

Tab1Controller.js

model
view

base

Tab1.js

Tab1.js
Viewport.js

application.html
application.js
designer.html
designer.js





Things to note:



1) All Designer projects deploy to the web root.

2) I created application.js and application.html to be the true ExtJS entry points, since the Designer overwrites designer.js and designer.html on deploy.
3) I add the paths config to Ext.Loader in application.js to include the Tab1 folder path:

Ext.Loader.setConfig({
enabled: true,
paths:{
'Tab1':'../tab1'
}
});


4) I also add the Tab1Controller:

controllers: [
'ApplicationController',
'Tab1.controller.Tab1Controller'
],


5) I also added the models/views/stores in application.js as opposed to the Tab1Controller:



models: [
'Tab1.model.MyTreeModel'
],


stores:[
'Tab1.store.MyTreeStore'
],


view:[
'Tab1.view.Tab1'
],



6) Here is the last part. Since the launch point is application.js, ExtJS still thinks we are in the 'application' namespace. You have to fully qualify all models/view/stores in Tab1 to be visible in the application. For example, I have a TreePanel in my Tab1, so to reference the store for it, I have to use:

{
xtype: 'treepanel',
title: 'Some Tree',
store: 'Tab1.store.MyTreeStore',
rootVisible: false,
flex: 1,
viewConfig: {


}
},


The problem is that the view keeps getting overridden on each deploy. So you'll have to back up this file or just remember to constantly update the store/model/view references. I hope Sencha has a fix for this soon, as it really slows down UI development in teams of more than one.

Thanks.

yAdEs
27 Feb 2012, 5:36 PM
Hey billtricarico, actual I find a much better and easier way to organize the folder!
In the Designer, if you change the userClassName attribute to carStore.XXX, it will automatically create a "carStore" sub folder in "controller" and controller "base" folder, and what you need to do, is letting everybody change their names for Controller, Model, Store, View classes, and combin them together or just save to the same folder! It's so easy!

yAdEs
27 Feb 2012, 5:40 PM
For example, like your project, it only need to change userClassName of "tab1.controller.Mycontroller" from "MyController" to "tab1.MyController", and it will save to "app/controller/tab1" with an name called "app.controller.tab1.MyController", and you just put all subfolder together!

juegosgratisdefutbol
28 Feb 2012, 8:12 AM
I had a problem with a namespaces, how can i fix it??

billtricarico
28 Feb 2012, 1:45 PM
juego, can you be more specific? maybe post some code.

billtricarico
29 Feb 2012, 8:57 PM
hey yades,

I tried to build a multiple-namespace structure like you suggested. The part where I get stuck is when a store needs to load in the dependent project.

Can you provide me with a sample that consists of the following:

1) application - main project consisting of a TabPanel
2) tab1 - dependent project that is a TreePanel with a Model and autoloading TreeStore.
3) when the application loads, the TabPanel Controller render event will use Ext.create to instantiate the tab1 object, and add the tab to the TabPanel. The tree should then autload the tree store and show a valid tree.

Thanks.

billtricarico
1 Mar 2012, 10:36 PM
Disregard my previous post as I was able to get this working the way you described. My main problem was not using teh Viewport correctly.

Thanks.

yAdEs
2 Mar 2012, 8:13 PM
Disregard my previous post as I was able to get this working the way you described. My main problem was not using teh Viewport correctly.

Thanks.


Great!B)

billtricarico
30 Mar 2012, 12:05 PM
I have set up a multiple-namespace application in the latest Designer (v2, build 341). This is a "main" application TabPanel, with a dependent project as a Tab for that TabPanel. Everything seems to be set up fine. However, the only problem I seem to have (so far) is the store reference in the dependent project.

On the Tab I have a ComboBox which references a store "tab1.aStore". This deploys to the web folder as /webroot/scripts/app/store/tab1/aStore which is fine.

The problem is how the Dessigner references the store. When I select the ComboBox and pick the store from the list of stores, I can pick "aStore", which is the ID of my store. So the deployed code ends up with store: 'aStore' for the ComboBox. When I edit the deployed code to be "tab1.aStore" then it works fine. This leads me to believe that the store field in the ComboBox is not looking for the store ID, but rather the userClassName.

Can the Designer be changed to select the userClassName instead of the storeId?

Thanks.

aconran
30 Mar 2012, 5:47 PM
Can the Designer be changed to select the userClassName instead of the storeId?


No, this is a framework level issue. We have some enhancements in > 341 to keep the userClassName and storeId's in sync with one another when you are using Ext JS.

ArpanG
15 Jul 2013, 10:10 PM
If I understood it correctly then Sencha Command build process will create a single minified javascript file for production, which may be huge.

What I am intending is to develop our project into small parts, build them seperately, so as to fetch minified file on demand when that particular part of the project is used/invoked by the user.

Here main challenge is to develop these small parts with access to common code, app framework.
I can't duplicate my app framework between sencha architect sub-projects as it is not a good practice.

What is the best way to accomplish this?