A designer company have made a prototype of a web application using HTML/CSS/JS, with forms, menus, roll-over sub-menus ... Now I have to take this prototype and build GWT views using widgets.
My question is : Do I have to start from scratch and build every view with UIBuinders and integrate the CSS files or there is an easy way to do this ?
Thanks
My suggestion - don't generate HTML. This basically means not using GWT widgets (or only using widgets that provide .wrap(element) method.
I'm taking this approach with my projects and works very well. I put all HTML in one big file and then hide (display: none) all divs. Then I use gwtQuery to identify, copy and show relevant parts. qwtQuery is also used inject behavior (event handlers).
Related
I haven't touched React in over 2 years, and a bit confused looking back at my old code. For example, if I were to build an instagram clone, would I utilize html templates and inject javascript as such as
<div id="reactEntry">
Loading ...
</div>
for the login page, profile page, etc.
and use react components for main logic? for example, dynamically rendering posts and comments?
Or would it be smarter to make everything a react component-- login page, profile page, etc.
would it be smarter to make everything a react component-- login page, profile page, etc. - yes. As you don't need to rely much on other libraries and can use routing between pages. Also, there is performance benefit for a fully react app.
Having other components along with react component would not cause any harm as long as you don't dom manipulate the react component.
Or would it be smarter to make everything a react component-- login
page, profile page, etc.
There are benefits of using react components over the traditional multi-page web apps.
Since most react apps are Single Page Applications(SPA), hence they are fetched once, and then virtual dom handles the rendering of various components. This is faster than the tree-based document rendering.
Components are re-usable. Say you need a Document upload form - consisting of a drag and drop file field and an upload button. You could simply create a component, and keep using it at multiple places. All components have their internal logic, which makes it easier to manipulate and define them. Such an approach ensures a consistent app look and facilitates codebase maintenance and growth.
Plugins like react-router can handle page transitions, by using its navigational components. You could do partial renders too, giving you a faster UI/UX experience than rendering the entire pages.
I would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
I've a set of pre-generated html documentation files (provided via an external mechanism). These are fully standalone in their own right, but I'd like to integrate these files into an existing portal.
Ideally, I'd like the existing site to take care of the (common) layout, and simply embed the existing html into this layout. I've been trying to get it to work over the last few hours to no avail.
Problems I've encountered (no specific order):
The pre-generated content already contains html/body/etc. tags (as mentioned, it is standalone documentation in its own right).
Redirection is no use, as it bypasses the view mechanism, losing the common layout.
I'm not really sure how to proceed, as I seem to have exhausted my googling ability on this matter. I'd appreciate any tips or pointers on concepts or terminology surrounding what I'm trying to do - I'm happy to do the leg work investigation as required.
have you tried putting your html files in the wwwroot folder and in the Startup.cs Configure method, add the line app.UseStaticFiles();
If you really need to static *.html use
var htmlString = System.IO.File.ReadAllLines(#"patch/to/your.html");
And then pass it to view and render by #Html.Raw() but i not reccomend this way. Better create partial view and then simply use by #Html.Partial() (official docs)
I'm looking to Add social sharing buttons on a static which is having more than 500 Static Pages.
I can add manually but it's very tedious task so looking for an easy way to add.
Is there any Way to get the Permalinks of a Static Site Dynamically I'm thinking to pass it to the Sharing Code so that I can append the URL in the code if there is any way to add a piece of code automatically to all the pages it would be of great help.
Best Regards,
Arpit
You manually have created 500 pages or using php to generate dynamically?
If it is generated dynamically, you can easily add social share plugin to every page.
HTML code for social share by social9.com
https://www.social9.com/get-free-social-share/
...Select "code your own" from the list for HTML Code.
Yes, there is a way.
Use regular expressions in an IDE to find the right places and place the code in the replacing string.
If that's not enough powerful, then write a script, using e.g. Bash in Linux, or Groovy, or I would personally write a simple Java program leveraging the JSoup library.
Lastly, and I would recommend that most, give up maintaining the files manually, and switch to static site generating software, like JBake.
JBake can take your HTML pages and take their content as an input and re-generate the website through templates.
I am working on my own Mediawiki installation and developed a skin based on Bootstrap 3 (MediaWikiBootstrap). There are a few issues which are taking time to resolve and few cases i am not sure how to resolve.
I used ContactPage extension and could not find an easy way to use bootstrap form css classes. there are options to use 'MediaWiki UI' for that contact form but i am facing the same problem with the other pages, like the All articles, search page and so on.
so is there any way to use 'MediaWiki UI' in all the form and can i create my own form style using Bootstrap3 css classes?
There is a configuration variable ($wgUseMediaWikiUIEverywhere) which, if set to true, should activate mediawiki ui on every form element (that is build with the Html or Xml MediaWiki class) in MediaWiki (excluding forms build with string operations).
For the long term it is planned to remove this variable an activate mediawiki ui by default.
If i understand Bootstrap correctly, there is no easy way to add/remove classes to elements generated by MediaWiki.
Btw: There is already a bootstrap skin, maybe you can reuse this? https://www.mediawiki.org/wiki/Skin:BootStrapSkin