locked
FlipView out of different html pages

    Question

  • Hi all.

    I´ve got a problem. I´m trying to make a FlipView out of different HTML Sites. Let me explain shortly:

    There is a FlipView, containing 5 different html pages, one with buttons, one with textFields, etc.

    I can only find one sample for this and there they only have one html page, only changing the content of this single html page.

    I´m new to it and don´t know how to do it. Can somebody give me some ideas how to realize this?

    Thank you very much.


    • Edited by Benni Vogt Wednesday, March 06, 2013 12:39 PM
    Wednesday, March 06, 2013 10:41 AM

Answers

  • Hi. Thank you for your answer. It´s exactly what I would like to do and i think the WinJS.Navigation... is much easier to implement, than using the FlipView.

    I think I try it this way.

    Thanks for your help.

    Thursday, March 14, 2013 10:33 AM

All replies

  • Hi Benni,

    Could you elaborate your requirement. Do you want to use FlipView control to flip html pages rather than images/text?

    Quickstart: Adding Windows Library for JavaScript controls and styles please refer:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465425.aspx

    thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Benni Vogt Thursday, March 07, 2013 9:14 AM
    • Unmarked as answer by Benni Vogt Thursday, March 07, 2013 9:14 AM
    Thursday, March 07, 2013 8:58 AM
    Moderator
  • At the moment I try to write a demo app with the grid template. My first group contain the control elements. Structured in different views of a flipview. I have got an item buttons, lists, textfields, boxes, etc.

    So I have different html pages were i place different types of control elements. Cause I´m new to it, I don´t have any idea, how to implement it. I haven´t found any examples about how to use different html pages in the flip view or how i can add html content to a mainpage depending on which item I click.

    Thursday, March 07, 2013 9:12 AM
  • Haven´t figured it out yet. I hope someday there will be somebody who can tell me an idea how to do it. I ordered a book now, hoping it can help me with my problem.

    Forever alone.

    Wednesday, March 13, 2013 4:47 PM
  • Hi Benni,

    I am sorry for I miss your reply.

    The FilpView control is great for displaying images. base on my knowledge, your expection of placing different html pages as flip view items is out the range of FlipView control.  For your scenario, I would like to suggest you check ListView control, see the HTML ListView grouping and SemanticZoom sample at http://code.msdn.microsoft.com/windowsapps/ListView-grouping-and-6d032cc1

    Hope this helps, thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, March 14, 2013 8:01 AM
    Moderator
  • Okay. Very confusing. In C# it is very easy to do it. And I think this is predestinated for such ideas. Cause ListView is like a fluent passage, not a clear switch to another page. Could be confusing in several scenarios, where your aim is a clear seperation between different pages.

    Thank you for your answer.


    Benni


    • Edited by Benni Vogt Thursday, March 14, 2013 9:04 AM
    Thursday, March 14, 2013 9:02 AM
  • Hi Benni Vogt,

    I think the problem here is still what is the effect you want to achieve and what FlipView is supposed or designed to do. For your scenario, I understand is as below:

    • You have multiple pages (windows store html pages), each page has its own html controls/elements or structure
    • You want to let user navigate between them one by one by using left(<) and right(>) arror button (just like what FlipView) does

    If this is the case, I think maybe using FlipView is not the best idea here. As Yanping mentioned, FlipView is a data binding template control, its strength is that you can supply it with a data source (a List ) and then it can populate multple views (among which you can use < and > button to navigate through) based on each data item in the data source list. However, that also means each view will have similar html UI layout/appearnce (since they use the same data binding template to generate). IMO, you can consider directly using the WinJS.Navigation.navigate method to navigate between multiple pages(by supplying the page url). And on each page's UI, you can put two buttons which just look the same as the FlipView's go left (<) and go right (>) buttons. When user click one of the two buttons, you just invoke WinJS.Navigation.navigate to redirect user to the proper page.

    Or if you still want to use FlipView to achieve this, it is still ok. But you need to programmticaly generate different UI for each view generated from each data items in the data source (supplied to the FlipView). and I think you might need to implement a templating function (instead of using static html based itemTemplate) to achieve this(see reference below).


    #Quickstart: Adding a FlipView (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh465425.aspx


    #How to create a templating function (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx


    Again, it's totally based on what you want to achieve and then choose the proper control or UI design approach. If the above is not matching your scenario, you can try providing some simple sketching diagram (upload some images) for illustrating the result you want to achieve.

    Hope this helps some.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, March 14, 2013 10:23 AM
    Moderator
  • Hi. Thank you for your answer. It´s exactly what I would like to do and i think the WinJS.Navigation... is much easier to implement, than using the FlipView.

    I think I try it this way.

    Thanks for your help.

    Thursday, March 14, 2013 10:33 AM