I am developing a website which unlike others, everything will run on end user's computer. Application will start a server then user will go to localhost to see the GUI. One part of my GUI is called a view. It represents a component which will be provided by the server as a json object.
Which component and view should be rendered will be determined by url parameters like:
localhost?component=mycomponent&view=myview
I want end users to be able to create their own views and someway register them to the application. Let's say they created a view called "userview" and registered it to the application. Now they should be able to go to:
localhost?component=mycomponent&view=userview
And see their representation of the same component.
I will most likely use spring boot for back-end (in case that matters). Views are just HTML, CSS and JS.
I have no idea how to structure such application or even if it's possible. If it is, how would one structure such application? How should the registration be handled?
Update: Solution
I dedicated a folder called "views" in which my server serves all resources under it. Users write their views as simple static websites and put files under that folder. I used an iframe element to embed these websites.
I added all the component related information to parent frame's window element like:
window.viewContext = {}
So that user's can access component related information in their views like:
parent.viewContext
Related
I only started with this a couple of days ago, so this may be a silly question...
I have an admin area with its own directory "admin" within the controller folder. So if the user is in the admin area, I want a sidebar to show. But obviously there will be a fair few "pages" (controllers) within the admin area. I have Clients, Services and Dashboard.
In the sidebar (on all pages) I want a list of clients and services so when clicked, it goes to a page and display info for that client/service.
I sort of have it working with add_service(), edit_service(), view_services() etc... but in each of these methods, it seems like I need to load services AND clients models, and pass the data back to each view... in all methods? So if I want to add a service, I click "add service" and it takes me to the add_service(). Do I need the below 4 lines in each method?
$this->load->model('client_model');
$this->load->model('services_model');
$data['clients'] = $this->client_model->get_clients();
$data['services'] = $this->services_model->get_services();
I have read about widgets, but not sure if that's what I need exactly.
Thanks
As you read, all you need is HMVC. This will create a "widget" with your controller, model and views, and you'll be able of calling "a whole": A part of the website wich manage its own part.
One solution is implement https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc into your code, you create a module called "client", and in your "admin" controller you call it. You'll get your client table there, and in your controller "client" you'll be able of call it too, and you'll have exactly the same behaviour. I've implemented wiredesignz HMVC quite times and I think is the solution for your trouble. Anyway, you could also check https://github.com/Bigwebmaster/codeigniter-modular-extensions-hmvc, which is a fork with improvements into the code.
About your sidebar, you'll have to call the widget you'll create with your clients, and you'll have it quickly with only one call, because the module will manage all the behaviour
The tutorials and example I've seen are all single page application.
Can anyone give an idea or point to a resource showing how a multiple page app can be developed with CanJS?
You should be able to create a new page in whatever app framework you are using or even just static pages, and then hookup your new control and view to any element on that new page.
You want to have a separate control for each module, so you might have separate controls even on a single page if you have, for example, a filterable dropdown list, a todo list, and a login. So, in your canjs directory for your app you will have separate sub-directories for each module which will contain your control, view/s, model/s, and observe/s and unit tests. This makes them re-usable, easier to test, and since they are modular if one part of your app breaks it won't take down all functionality. Once you get the hang of that incorporate AMD style loading of your assets with stealJS which is made by Bitovi - the CanJS creators.
https://github.com/bitovi/steal
If you want to manipulate the location.hash without actually changing pages or manaage browser history and client state you should check out can.route:
http://canjs.com/docs/can.route.html
We are trying to create a portal type application with multiple / independent "sub-apps". Assuming that all sub-apps are written in Angular what is a good pattern to achieve the following goals.
Each app can be developed and deployed independent of each other.
They share a common authentication service, they can share common libraries (directives, filters etc).
Only one app will be visible and active at any given time. The scope of each sub-app is isolated from each other.
When the users goes between the sub-apps, the state is maintained as long as the user does not refresh the page or visit another static link. (I think this is built into Angular and no special effort maybe needed)
Each sub-app will have more than one views (it will have its own menu). There will be a top menu based on what sub-apps are available. Ideally the top menu is dynamically build based on what sub-apps are deployed. Maybe there is a server side component to this (the server detects the folder structure etc and determines what apps are deployed and injects the necessary js code into the page).
Given the fact that AngularJs does not have multi-level view structure, I was thinking of using multiple ng-app declarations on different divs and then using $window scope to store the key of the active app and hide the ones which are not active.
There is no easy answer to your (rather open) question, but regarding the $route and ngView limitations, I have been having great success employing a technique derived from this: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
This is something that I also have been thinking of trying to implement. While I don't have a complete working solution, I believe that this type of portal app would consist of multiple angular apps on the same page.
The portal app would be the traditional ng-app directive on the main page and the "portlets" would be dynamically created and manually bootstrapped angular apps on a sub view div. You can share data, state, authentication, personalization, etc from injecting the portal services (contained in their own module) that provide these features into the manually bootstrapped portlet apps.
The tricky part is how the portal app would discover the portlet apps and serve up their angular modules knowing that these apps would be independently deployed web apps with their own urls.
I still have some questions around if the service data would be common between the apps or if you would need to try and leverage HTML5 local storage via the portal service (like a data manager).
I've an existing MVC3 project that implements a certain functionality, this project has it's own views, and a separate Database.
now I'm required to use the same functionality inside one of my orchard project,so I thought that I can host this solution in somewhere and view it inside an iframe or something.
Am I thinking right?,
is this the correct step to take in order to achieve this requirement inside Orchard?
to make it more clear, all I need to do is to view this solution and interact with it's controls and views from a hosting page inside orchard, and the subsequent requests should be handled by my solution in order to hit it's own data store and get back with the requested data in order to be displayed to the user.
any help would be appreciated.
Update:
thanks for Bertrand Le Roy for his answer, I can now view my solution inside my
orchard website.
I came in to one more HUGE problem, which is that my application can no longer connect to my external database.
I've a DB that is hosted in some where else, and I'm using EntityFramework to deal with it.
the problem is that if I put the connection string inside my module web.config, or main orchard web.config, I run into several types of errors like:
"System.Reflection.TargetException: Object does not match target type."
or
"System.Data.MetadataException: Unable to load the specified metadata resource."
My question is: How could I pass my connectionstring correctly to my solution, assuming that I'm using Entity framework as my ORM.
Many thanks.
You will need to put it into a module.
You will have to move route definitions to a Routes.cs file (look at any existing such file for examples).
You will also need, in order to access your data store, to opt out of the ambient Orchard transaction around the data access code (using (var scope = new TransactionScope(TransactionScopeOption.Suppress))).
If you are using dependency injection, you may have some work to move that to the Autofac-based way of doing things in Orchard.
If you want your work to appear seamlessly in the Orchard admin, you may want to decorate your admin controllers with the Admin attribute. If you want your front-end to use the current theme, you'll have to add Themed attributes and maybe refactor your views so that they only emit HTML for the content zone instead of for the whole page.
Add a manifest (module.txt) to your module folder and you should be good to go.
Where do you guys put your static pages, like "home", in an MVC framework? Do you have a "home" controller? A "pages" controller? Do you create actions for each static page?
I'm using CFWheels now, and I'm trying to figure out the best place to put them.
Edit: Apparently CFWheels doesn't require you to create actions for all your views. So you can just create an empty controller and call the views like actions, but not have to write out the blank functions.
CakePHP (and I guess, Ruby On Rails) has a "pages" controller. There is a routing function which redirects requests to /pages/foo to /pages/display/foo. Similarly, / is redirected to /pages/display/home. The display action looks up the views/pages folder for any file with a matching name and renders that.
At the end of the day, a static page is a view without a model, that was returned based on an action the user requested from your server by hitting particular route. :-)
Yes, technically you could expose the direct location of the view resource to the user and rely on the http daemon to go fetch it and return it. However, that means that the resource URL is now tied not to the semantic of the resource you want to expose, but to actual bits. This means that if you want another representation of that same resource, you have to expose it on a different URL.
So, when you create the structure of your web app, think first about the URLs and the resources you want to expose and then think how to implement each resource.
I put my static pages in the database using a simple CMS with a private admin page.
This way, the clients can make simple changes themselves.
In Wheels, you don't even need to create the controller file.
If you create your view here:
views/about/index.cfm
You don't need to create the controller file at all. Then you should be able to just call this with no problems:
http://www.example.com/about