Oracle JET Single Page Application without Starter-Template - javascript

Over the last week I tried to create a single page application without using the template provided by Oracle. My goal is to load the modules by clicking on simple headers or divs.
I know that OJ-Module and the CoreRouter are needed, but nothing I’ve tried so far has worked.
Maybe someone can give me some hints on this.
Thank you

I am trying similar methods and it is the best way of getting hang od the syntax, variables and the structure.
I created projects of all the 4 templates in different folders. Each one serves as a reference on how to implement a specific set of features like CSS, behaviors in my new app, created out of the blank template.
I also created a demo project. This project contains the specific element from cookbook I am trying to understand (one or two at a time and not more) and then implement the learning in the blank template, which I started filling already. The demo project keeps getting erased and recreated in my case.. You can choose to retain different demo projects if you need.
Most important will be the understanding of concepts like the busyContext, dataBinding, ResponsiveUI, Require, AMD, ojModule, inter-module interactions and the creation of events, views and viewMdels. Once you get past the initial hiccups, the APi docs are a great assistance in helping you programmatically control the entire behavior of the application features.
BTW: Do not remember the css variables. I think it is a bad idea to maintain so much material in your mind, which could otherwise be easily referenced in a document. You only need to know which documents have what content..

Related

Best way to structure reusable code using Node.JS, EJS, and front end JS?

Evidently the 'Software Engineering' exchange was the wrong place to ask this:
I'm more or less learning the MEAN stack (have yet to start on Angular, so currently using straight vanilla JS for front-end) and part of what I'm building for my portfolio is a drag-and-drop form builder.
Currently the form has sections, which contain questions, which can contain multiple options as well as multiple follow up/sub questions (which can then contain their own options, but not follow ups).
EJS helps me with the original render of the stored form using nested for..of loops, however my question comes into play when adding new elements to the form.
Currently, I have vanilla front-end JS that is looking at some template tags within the page, then filling those in for new sections, questions, and options.
However it doesn't seem very DRY because I'm using essentially the same logic in EJS when initially rendering the page (albeit multiple times).
To make my code more reusable, should I write functions on the back end which are cast into the EJS render call both for the initial render and then available to the front-end JS, or cast the EJS variable containing the form (from MongoDB) into the front-end JS directly and use functions in there to both draw the page initially, as well as add new elements? Both of these, hopefully, would make use of template tags in the HTML. Is one faster and/or safer than the other?
Another option could also be to use EJS partials for sections, questions, and options to render the page, but I wouldn't know how to incorporate that into the front-end JS to add new elements without using templates, which is essentially what I'm doing now.
I'm going through the same ordeal right now.
From my understanding, your scenario requires using both the server side rendering (using EJS) and front end rendering using HTML templates and you want to know what's the best approach to go about it.
The short answer: cast everything on the front end and do the heavy lifting there.
I've used EJS components (includes) and they are simply not designed to be interactive. Data flow is basically one way and there is no state management that I know of.
You don't have to do this for the entire project mind you, this can be done for certain pages only where interactivity is very heavy.
Just import Vue or any other SPA framework on the said page and act as if it is a single page App. That way you don't miss out on server side benefits when you need them on other pages of the project.
Of course going into complete code split (API/SPA) would be the more traditional way but I'm sure there is a reason why you're forced to use server side rendering.
It helps that both (server/front end) use JavaScript which might not lead directly to code sharing but will surely make it easier to write the needed functions in similar ways on the back end and front end.

Moving between views without refreshing/reloading

I'm currently looking at putting together a website with ASP.NET MVC that gives the viewer the ability to move around from page to page (view to view) without it being refreshed each time.
The way I'm currently thinking of doing it treating views as 'areas' (or mini master pages) and using partial views in the place of views. I'll then switch the partial views in and out as needed using AJAX calls to the controller (which will load the partial view) and JavaScript.
I feel like I could have explained this better but I'm not quite sure how to phrase it, so hopefully this diagram will help somewhat:
Here's a look at my current folder structure. Index.vbhtml is acting as the aformentioned 'area'.
Views/
Accounts/
Partials/
ViewAccount.vbhtml
CreateAccount.vbhtml
Index.vbhtml
I'm loading my partials views in using a JS function along the lines of: nav.navigateToView("Action", "Controller")
For example: nav.navigateToView("ViewAccount", "Accounts" will load the ViewAccount.vbhtml partial view onto my page.
What I'd like to know is: Is there currently a defined method for doing this, or perhaps a library I can use to aid me? If not, could you give some helpful advice on how to achieve this? I'm not convinced the method I've described will be adequate.
Apologies if this question has already been asked! I've had a tough time trying to find anything relevant on this topic. Am I missing something simple?
Thanks,Aaron.
From the description you have provided, I think what you are describing is a single page application (SPA). Needless to say, there is a bunch of articles available so sorry for not being more specific.
One approach would be to use Angular.js which is a Javascript framework, described here and here (and thousands of other sites).
ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.
Please see this site.

AngularJS - Asynchronous loading of parts within the app

Currently I am working on my app and I decided to use AngularJS as a framework to structure my front-end code. However, I don't have any experience with AngularJS and thus, am currently struggling with the concepts and logics of it.
Below you can see a rough draft of my app's scaffold:
So what I am trying to do is to create a single page application for my whole app.
Within the <menu bar> one can select different pages to display within the workspace. I learned that I can realise this behaviour by using the <ng-view> directive.
However, what I want to do is, depending on the buttons clicked within the <workspace> (-> the currently loaded view) I'd like to show different <sidebars>.
For example: If one clicks on an edit object button within the workspace, the form to edit the object will be loaded into the sidebar.
At first I though I could solve this by using multiple ng-view directives within the app, but I learned that this is not possible.
So, do you have any ideas on how to realise the above described behaviour?
I would like to asynchronously load <sidebar> templates whenever they are needed within the app. These sidebar templates should contain some logic, e.g. buttons to submit data etc.
I really don't know how to realise this behaviour, as I'm as well struggling with how to use scopes and controllers in this context.
Any ideas, articles, examples are highly suggested! Thanks.
Edit: I created a small and only minimalised draft of how I imagine AngularJS would handle the process:
You can use Angular-UI.
The UI-Router has much more powerful routing features than the default AngularJS router.
For the views, with Angular-UI, you can have multiple views in a same document (ui-view) and each can load a different template depending on the current application state (the URL).
Here is the documentation for these components:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
https://github.com/angular-ui/ui-router/wiki
You definitely should check it out!
Please note that once you'll get your two templates, they will be in different scopes so you'll need some sort of communication service to handle passing data from one scope to another without getting into a $watch or $rootscope hell.

AngularJS Concept Understanding

I'm trying to learn angular by building this small web app that has this layout:
Simply, the Header's going to say "first app!"
each content nav button is going to be a different category (sports, music, etc) and each one is going to pull some public api and display it in a list on the content page in a table. I think I'm ganna have some search and filtering features and bread crumb if I decide to get fancy and add submenus.
Anyways, I understand the gist of Angular and I went through the phoneCat app tutorial on the angular site: https://docs.angularjs.org/tutorial and I have been watching bits and pieces of youtube videos on angular as well.
Unfortunately I'm still confused when it comes to transposing the concepts of routing/modules/services/directives/etc... into making an actual web app/site
I'm looking for someone to kind of give me a super high level view of how they would make this app using angular and explain it like I'm a total noob and maybe offer some simple rule of thumb tricks to think about angular in terms of web app components (eg. when I think of the data in a json file and I want to display it, what could I think of that in terms of angular concepts (data/model/view?) or ie: you'll be using ng-repeat a lot, etc.)
Here are some questions I have off the bat:
How many .html files should I have (views?) Do I make a .html for each content page?
The Header, Nav and bread crumb (if I use sub menus) will always be displayed to the user. Does this mean I have a index.html page with <div ng-view></div> in the body and then have a main.html with the header/nav/breadcrumb, and then have content1.html / content2.html/ content3.html etc separate? If this is true then how do I use more than one ng-view? Or is this where the concept of routing comes in? Could someone explain how I would set up these pages from a ng-view/routing perspective at the simplest level?
What does angular.module() do? and when do I use it? I see it at the top of controllers, routing, and services files, etc...
Could someone use an example when and how they use a service / factory?
I feel like this is asking a lot for someone to explain. I'm not very computer-sciency minded and I feel stuck in this place where I feel like I can almost build a really cool app but just need to put all the pieces in the right place.
Thanks
Great questions, I know I had my fare share when I first started. I am going to answer each question with a link that will give you detailed information of each.
yes, you make a html page for each content page(aka view)
Yes, your index page will contain all the static content, and you will use your ng-view directive to state the area that is dynamic. ng-views are the only way to make set dynamic content. You can use: switches, hide/show, and ng-repeats. For multiple views I would suggest you either user a combination of ng-views and in the views use a switch. If saving the state is very important, than I suggest you look at angular-ui https://github.com/angular-ui/ui-router
Angular.module() is a way to separate/ modularize your code. This means that it is only used in the parts that you explicitly state. When used the dependencies stated will be injected.
A great example of how to use the factory module, is in the angularjs tutorial from the official site. I would also suggest some great videos from egghead.io -https://www.youtube.com/watch?v=HvTZbQ_hUZY
If you are looking into a mobile solution, you might want to check out Ionicframework. It is angularjs but with added magic for mobile.

Is it possible to create a self contained Angularjs app that will not clash with with any other Js or css libraries on the same page

This may not be a plausible and I will except that as an answer if someone can tell me why with reasonable detail but I am looking to create a simple Angularjs app that I can include in any html page (whether on a tomcat server, MAMP or in wordpress) and it not be affected by any js/css libraries used on the same page except by my app's own Dependencies.
For example, if I built a simple Calculator that uses a specific version of Bootstrap, Jquery and Angularjs, I would like to be able to give someone the project folder and a simple snippet or 2 like the following and it would work on their site without clashing with anything else already existing on their site.
<div data-my-ng-calculator></div>
I realise that it if this is plausible may require some complex angular application bootstrapping or even an external library to some how load my JS and CSS in some sort of self contained container. Or maybe inside my app I need to find some way to reference my libraries and Css class with a custom selector of some sort????
Any advice or links to articles/tutorial/frameworks or books on the matter would be welcomed. Obviously this is currently hypothetical ( or maybe it's not and someone has seen similar already) and I am just looking to explore the possibility
I have tried Googling this but so far i haven't been able to find anything but this is probably down to bad search terms.
It appears that this is an emerging standard called Web Components (Thanks #steveax for pointing me to this). From here I was able to then find this excellent tutorial on css-tricks , in particular the section on the Shadow Dom was very relevant. unfortunately according to canIUse.com it is only supported in Chrome and and Opera at the moment.

Categories