Pages - Subpages

[Santiago_R_]

Hi, I'm quite new to xdk and I started learning and doing some tests in the last week, but Im a seasoned web developer in HTML technologies in general, and .Net and PHP as a server side technology. Im completely new to the intel XDK.

I started making a small app, that I plan to use, with a login, a sidebar when you are logged, and different pages and subpates. Mi idea was one page for when you are not logged in, with just the header and easy to go back,  and another page when you are logged in, with a header, and a side menu. That page would be used by all the logged subpages: Main, config, profile, change password, about, etc. So as I was doing it with one main page with the common code (header and side, and maybe a footer in in the future) and several subpages for each logged page.

I managed to create all (with the examples that are in the XDK), but I see a problem. I did some subpages completely empty, with just a text. I did 2, inside the main logged page (the one with the side) I did Home, and i did About. Both are empty except for the text that says Main, and About, in both cases. 

The problem I see is that when I get into the first subpage, Home, I not only see Home. I see the Home text, and the About text. When I click About in the navigation, I do see about by itself.

So, the question, is this normal? Is this how this should work? I thought it was going to work more as separate pages, more as a master page in .Net for instance, and the pages that use the master page, but it loooks like a continuous page. It looks more like 1 page with anchors in html. Is this how it should worlk? Or I am missing something.

BTW:

XDK Version: 1995

USed the login example as a base for this project.

This is a default project (no framework but the default used).

Checked the side bar example, did the same, added 2 subpages, and it works the same way. 

Is there any documentation on pages, subpages, headers footers and sides? The documentation is very poor in the architecture of the html apps. 

Thanks,

Santiago.

[Amrita_C_Intel]

Can you please provide some screenshots? And there are some helpful tutorials if you see top right corner of the XDK there is one "?" sign click on it for helpful tutorials. Please see the attachment.

[Chris_P_Intel]

Hi Santiago,

The sub-pages could definitely be better documented.  

In mobile web apps we typically do not use individual files for individual pages. Instead there is one file (index.html) and there are a variety of page <div>   inside that file, only one of which is visible at a time. Most mobile UI frameworks ( App Framework, jQuery Mobile, Ratchet, Ionic, etc.) support these types of "virtual" pages.  This approach is called SPA, which stand for Single Page Application. 

Sub-pages are a continuation of this idea. A single (virtual) page can have a header, footer, and a set of sidebars. Within its main content area there is support for sub-pages. Again, these are just divs that are hidden or shown as needed.

There is no master/template relationship between pages or sub-pages. That's not what they are.

In your case, it sounds like your HTML has gotten messed up a bit. Maybe a stray open <div>, or possibly some classes were removed from the sub-pages.  It should be pretty easy to spot the problem.  You might want to make a new .html file in your project, quickly make some pages, sub-pages and some basic content in it. Then open it in Code view to get a feel for the structure.  Then compare to the code view of your current file to see if you can spot the error.

Hope this helps,

Chris

[Santiago_R_]

Hi, thanks for the posts. Some comments:

Ive seent he documentation there, but there is no big scope of the apps. what is a page, what is a subpage, etc. That is really lacking.

I manage to solve my problem. Im very new to XDK but not to HTML and web development (15 years of web development!) so I could manage to solve it. The guilty party was the graphical IDE that is really lacking a lot. IT works really bad. Just to name a few:

-When I put some controls on the subpages it went crazy, it changed a lot of things, maybe I was inserting the controls wrongly, as it is not very clear how to insert them.

-The breadcrumb on top shows the page, never the subpage, so you are never sure where you are inserting.

-Sometimes a subpage looses the Delete button and there is no way to remove it from the graphycal IDE (so I went to code)

-For some reason, when I was inserting a new subpate, the IDE transformed the Side panel into a new subpage

-The events part could be done a lot better. I was doing custom scripts and it still shows me where it is going.

-Doing Undo is painfull!!!!! Specially if you have to do 5 or 10 steps back!!!!

And those are the ones I can remember now, there where a lot more.

So, basically, Im doing my main project in the code editor, and Im doing small projects with small parts in the Graphical UI and moving it to the code editor of the main project. That is how now I have 5 beautiful subpages on my main page. Also, when something is working I commit fast to a local SVN I have for development. With these painful steps I managed to do a very nice skeleton for an app, with registration, login, config, about, etc.

BTW, I really like the idea, The Graphical UI implementation is too green right now, but the code once done runs great.