I want to dynamically add data into data.js in my JavaScript Windows 8 app based on the grid app template. I want some particular group items in that template to scroll from right to left. And also how to flip images of particular tile inside the group items?
For the question of adding data dynamically, I would check out the following samples:
HTML ListView loading behaviors sample
HTML ListView optimizing performance sample
More samples may be found at: http://code.msdn.microsoft.com/windowsapps
For the latter question, I'd suggest posting a separate question on the image manipulation, with some additional detail on what you're trying to do.
For more info on Windows Store app development, register for Generation App.
Related
I am working on my first extensive MERN project and part of the functionality involves specific components (like a checkbox to-do list, images, text, ets...) that then allow the user to build out different pages, larger multi-checkbox aggregation lists, etc... Think of it as something like https://www.notion.so/notes.
Building the individual react components and configuring them on static pages is straightforward. However, I'm having a hard time conceptually understanding how to take those components and then dynamically allow users to build out custom pages using them.
In a broad sense, how do page builders functionally work?
Here is a broad idea. You will need a page where the left side lists all your UI components [thump nails] and the right side area for dragging and dropping those compoents. You will need a grid system with rows and columns components like Bootstrap Grid or MUI Grid dividing space into 12 portions for the layout of any page. You should let each dropped component give an option to accept its props so users can set it. Setting props can be another component.
When they save the design you should get the react component tree of what they are saving along with all properties and save it in your DB. You should be able to generate both the design view and the actual view with those saved data.
It was easy to say but I know it's a lot of work. I have seen similar work done using Angular and .NET.
Shorter question: how should toolbars be programatically created and dynamically changed in a D3.js app with a Python backend?
I'm trying to create Javascript/D3 visualizations for simulations written in Python and using Flask, as an alternative to using a Tkinter GUI. I want a particular model to be selected by a radio button. Changing the selection not only changes the plot, but also swaps to a toolbar of numerical inputs appropriate for that model. I want to create the toolbars programatically, so that as a new model is added to the code an appropriate toolbar is automatically generated.
My problem is that there are a lot of ways to manipulate the DOM, and it's not clear to me what the best approach would be:
Python/Flask could manipulate the DOM, but I think that requires a
page refresh.
If HTML imports were used, there would have to be a separate .html file for each toolbar.
A unique <div> could be created for each toolbar and hidden/unhidden as needed, but it feels wrong to create a dozen <div>s rather than swap the content of one <div>.
A toolbar <div> could be torn down/built up everytime a toolbar is needed, but it feels wrong to keep building the same toolbars from scratch.
innerHTML could be swapped, but this might be bad? cf. this SO question
There are multiple options for manipulating the DOM at the frontend: JS, D3, JQuery...
To illustrate, here is a screenshot of what I have so far. The radio buttons swap between two models. In lieu of a toolbar, I have a JSON dump of the model's toolbar info. The JSON dump would be replaced by its interpretation as a series of labels and numerical inputs.
I am trying to do some R&D work around for my web app.
In the preceding image I have described my requirement. let say I have some custom web components like components 1, components 2 etc in the left side. Users should be able to drag and drop components into the play area and should be generate predefined some xml or text snippet belong to that component and that generated value should be store in the variable for later use. Currently I am using Angular and JS and HTML languages to achieve my requirement. I know I can use HTML5 drag and drop feature for items. But how can I generate some code snippet or text belong to that dragged items?
I'm trying to create an app with a database containing examples of scripts that I use in my apps for my personal use.
It is a very simple app: the west region has a grid with the name of the items, and the central region has a hbox with an editor and a panel with my notes.
My difficulty is building the editor.
The editor can be read only and load the script from database.
I do not need to be as complete as the Sencha Fiddle, the JS Fiddle or the Walking Tree app.
However I needed that has a numbered column on the left, as the editors mentioned above.
Any idea how to do this within a panel or a HTMLEditor or a textarea, or another solution that suits my purpose?
Thanks in advance.
If it is read only you most likely don't need it to be an editor and you can find some functionality like how here in Stackoverflow you can post code:
<div>like this</div>
Which I know there are plenty of those out there and probably already include line numbering natively. For example Prism.
I would like to create a "FlipView" of ListViews in Windows8 using JS and HTML. That is, I would like a control that would display a ListView and when the user swips or scrolls, it would display the contents of a different ListView. Is this possible? If so, how? Thanks for helping a Windows8 noob!
My attempt to put a listview under flipview, was not successful. css classes used by both controls overlap (e.g. win-item). I found that items in the nested list view occupied the whole available space like flip view item. This behavior was happening because the win-container hosting the nested list view item, was sized like that. I could not set its (win-container) size explicitly to smaller size even after overriding it in css file.
It does not look like that list view will work nested under a flip view for css/html. If any one else has had success with this, do share your comments and code.
if anyone had tried it in c# using FlipView and nested GridView/ListView and had success, do mark a answer with code (will be interesting to know).