Framework Converter: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
 
(13 intermediate revisions by the same user not shown)
Line 5: Line 5:
* Bootstrap 3 to Bootstrap 4
* Bootstrap 3 to Bootstrap 4


The app itself is written in AppStudio, using Node libraries. It compiles into standalone apps for Windows and MacOS using Electron. The project is kept in a public repository in GitHub, called [[nsbasic/framework-converterhttps://github.com/nsbasic/framework-converter.appstudio|nsbasic/framework-converter]].
The app itself is written in AppStudio, using Node libraries. It compiles into standalone apps for Windows and MacOS using Electron. The project is kept in a public repository in GitHub, called [https://github.com/nsbasic/framework-converter.appstudio framework-converter].
 
Users are invited to open issues, look at the code and improve the app.


==== Notes on Bootstrap 3 Conversions ====
==== Notes on Bootstrap 3 Conversions ====


==== jQuery Mobile Conversions =====
Bootstrap changed a lot underneath the surface from Version 3 to Version 4. Some controls were dropped, some where added. Default font sizes changed. The conversion will replace all the controls with Bootstrap 4 equivalents (where possible), but will not have perfect alignment. You'll need to tune your app.
 
All controls are converted, with the exception of controls which were dropped in Bootstrap 4.
These are:
<ul>
<li>Pageheader
<li>Panel
<li>Tabs
<li>Thumbnail
</ul>
 
The converter will replace these controls with a simple Container of the same name and dimensions.
You will need to replace these controls with a Bootstrap 4 control which works similarly.
Panel and Thumbnail can be replaced with the Card control.
Tabs can be replaced with the Navs control.
Pageheader can be replaced with the Label control.
 
<ul>
<li>Font sizes may need to be adjusted, especially if you are using a theme.
<li>The names of icons may be different. BS3 used Font Awesome, while BS4 uses Open Iconic. They have different names for icons.
<li>Controls with Header/Detail structures (like Checkbox) will need tweaking afterwards. BS4 uses different spacing than BS3.
<li>You will need to test different screen widths to find issues.
</ul>
 
==== Notes on jQuery Mobile Conversions ====
This app converts all controls of a jQuery Mobile project to Bootstrap 4.
 
The new controls will be styled as BS4 controls, which means they will have a different design
than jQuery Mobile. This is deliberate: the BS4 controls reflect current web design,
not what was being done in 2014, when JQM was last updated.
 
All controls are converted, with the exception of controls which have no matching Bootstrap 4 control:
These are:
<ul>
<li>Collapsible
<li>Panel
<li>Popup
</ul>
 
All controls will have some differences. Listgroup does convert, but the Bootstrap 4 version does
have all the same features.
 
<p>The converter will replace these controls with a simple Container of the same name and dimensions.
You will need to replace these controls with a Bootstrap 4 control which works similarly.
 
You should test different screen widths to find issues.


Users are invited to open issues, look at the code and improve the app.
<p>For more tips on converting, see [[Converting jQuery Mobile to Bootstrap 4]].


=== Running the Framework Converter ===
=== Running the Framework Converter ===
Download and install the Framework Converter app:
* [https://www.dropbox.com/s/n9f0675722yx9kw/framework-converter.app.zip?dl=0 MacOS]
* [https://www.dropbox.com/s/d8o735s109yyrc0/FrameworkConverter.exe?dl=0 Windows]
Run the app.
Click on the Find .project File button. Locate that file in the project you want to convert, then select which conversion you want to do.
'''Important''': Do this on a copy of your project. The process is destructive: the project you select will be modified. There is no undo.
[[File:FrameworkConverter.png|frame|center]]


=== Reporting Issues ===
=== Reporting Issues ===
The Framework Converter is meant to do the initial conversion. It can certainly be improved.
Please open issues on GitHub for stuff you find when using it. We may fix the issue, suggest a workaround, or another user may fix it. It's an open source project.
You open issues in the [https://github.com/nsbasic/framework-converter.appstudio/issues/1 Issues tab of the project in Github].
If you want to get involved with the Framework Converter project, see "Modifying the Framework Converter" in this document.


=== Modifying the Framework Converter ===
=== Modifying the Framework Converter ===
The Framework Converter is an open source project written in JavaScript using AppStudio. You're welcome to look at the code and make a copy of it for your own use. You're encouraged to submit changes to the code through GitHub which will help others.

Latest revision as of 17:24, 17 July 2019

The Framework Converter is an app which converts control frameworks to Bootstrap 4. It works on projects saved using AppStudio.

It can convert

  • jQuery Mobile 1.4 to Bootstrap 4
  • Bootstrap 3 to Bootstrap 4

The app itself is written in AppStudio, using Node libraries. It compiles into standalone apps for Windows and MacOS using Electron. The project is kept in a public repository in GitHub, called framework-converter.

Users are invited to open issues, look at the code and improve the app.

Notes on Bootstrap 3 Conversions

Bootstrap changed a lot underneath the surface from Version 3 to Version 4. Some controls were dropped, some where added. Default font sizes changed. The conversion will replace all the controls with Bootstrap 4 equivalents (where possible), but will not have perfect alignment. You'll need to tune your app.

All controls are converted, with the exception of controls which were dropped in Bootstrap 4. These are:

  • Pageheader
  • Panel
  • Tabs
  • Thumbnail

The converter will replace these controls with a simple Container of the same name and dimensions. You will need to replace these controls with a Bootstrap 4 control which works similarly. Panel and Thumbnail can be replaced with the Card control. Tabs can be replaced with the Navs control. Pageheader can be replaced with the Label control.

  • Font sizes may need to be adjusted, especially if you are using a theme.
  • The names of icons may be different. BS3 used Font Awesome, while BS4 uses Open Iconic. They have different names for icons.
  • Controls with Header/Detail structures (like Checkbox) will need tweaking afterwards. BS4 uses different spacing than BS3.
  • You will need to test different screen widths to find issues.

Notes on jQuery Mobile Conversions

This app converts all controls of a jQuery Mobile project to Bootstrap 4.

The new controls will be styled as BS4 controls, which means they will have a different design than jQuery Mobile. This is deliberate: the BS4 controls reflect current web design, not what was being done in 2014, when JQM was last updated.

All controls are converted, with the exception of controls which have no matching Bootstrap 4 control: These are:

  • Collapsible
  • Panel
  • Popup

All controls will have some differences. Listgroup does convert, but the Bootstrap 4 version does have all the same features.

The converter will replace these controls with a simple Container of the same name and dimensions. You will need to replace these controls with a Bootstrap 4 control which works similarly. You should test different screen widths to find issues.

For more tips on converting, see Converting jQuery Mobile to Bootstrap 4.

Running the Framework Converter

Download and install the Framework Converter app:

Run the app.

Click on the Find .project File button. Locate that file in the project you want to convert, then select which conversion you want to do.

Important: Do this on a copy of your project. The process is destructive: the project you select will be modified. There is no undo.

Reporting Issues

The Framework Converter is meant to do the initial conversion. It can certainly be improved.

Please open issues on GitHub for stuff you find when using it. We may fix the issue, suggest a workaround, or another user may fix it. It's an open source project.

You open issues in the Issues tab of the project in Github.

If you want to get involved with the Framework Converter project, see "Modifying the Framework Converter" in this document.

Modifying the Framework Converter

The Framework Converter is an open source project written in JavaScript using AppStudio. You're welcome to look at the code and make a copy of it for your own use. You're encouraged to submit changes to the code through GitHub which will help others.