Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The Downloadlinks for the current version are:

 

Bootstrap: http://getbootstrap.com/getting-started/#download

Datatables: https://datatables.net/download /index

Info
titleDatatables Kombifiles


Expand
titledownload advice, click to expand...

The DataTables package has a lot of features and for each feature there is a corresponding CSS and JS File. However on the linked Site it is possible to generate one CSS and JS file with the desired features. This is advantageous, because fewer HTTP Requests are needed.

Currently (as of Jan-2017) the activated options are: The changed options are printed bold

  • jQuery: no jQuery (could be included to reduce HTTP Requests further)
  • Styling: Bootstrap
    • no styling library
  • DataTables: DataTables
  • AutoFill: Do not include
  • Buttons: Buttons
    • Column visibility: Do not include
    • Flash export: Do not include
    • HTML5 export: HTML5 export
      • JSZip: Do not include
      • pdfmake: pdfmake
    • Print view: Print view
  • ColReorder: Do not include
  • Editor: Do not include
  • FixedColumns: Do not include
  • FixedHeader: Do not include
  • KeyTable: Do not include
  • Responsive: Responsive
  • RowReorder: Do not include
  • Scroller: Scroller
  • Select: Select
  • Minification: Minify
  • Concatenate: Single File
  • CDN: CDN or Local files -> own preference


jQuery: https://code.jquery.com/jquery/ 

The implementation is done in views/bootstrap/header.blade.php (for CSS) and views/bootstrap/footer.blade.php (JS) Files. There are several ways to implement these Frameworks, such as via cdn, by downloading the corresponding files or composer.

...

Code Block
languagecss
titleExample CSS implementation example (Header)
collapsetrue
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

...

Code Block
languagephp
titleExample JS implementation example (Footer)
collapsetrue
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


ProsCons
  • easy and fast to implement
  • Requesting external sources
  • high availability (100% uptime)
  • longer access time when called from "local" network
  • easy to upgrade
  • does not work without internet access (might be bad for a NMS-Tool)
  • easy to maintain ( - no maintenance)
 
  • Dependant on source file -> debugging and adjustments hard to do

2 Local implementation

For the deployment version a local implementation is recommended.

...

Code Block
languagebash
titleGet CDN files via wget example
collapsetrue
wget https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

...

The files that need to be replaced are inside the public/components/assets-admin/plugins/[Pluginname] Folder.

...

Code Block
languagecss
titleExample CSS implementation example (Header)
collapsetrue
<link href="{{asset('components/assets-admin/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet" />

...

Code Block
languagephp
titleExample JS implementation example (Footer)
collapsetrue
<script src="{{asset('components/assets-admin/plugins/bootstrap/js/bootstrap.min.js')}}"></script>


ProsCons
  • faster in "local" networks
  • installation, upgrade and maintenance required
  • independent of internet access
 
  

...

  • file can be easier debugged
 

Formating the downloaded file in Sublime3 - recommended to prevent bugs/bad behaviour

To work with the files, they almost always need to be reformatted, because they are only machine readable and due to for me unknown properties the lines are sometimes too long and get not completely interpreted.

For Sublime 3 exists a Plug-in to automatically beautify HTML, JS and CSS code. With the help of this Plug-in the code becomes human-readable and gets interpreted without errors

Link to sublime Plug-in page: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify

The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu. Once open, paste the appropriate Python code into the consol.

Code Block
titleSublime 3 JS CSS beautify
collapsetrue
'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76';
 pf = 'Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); urllib.request.install_opener( 
urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = 
urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', 
'%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error 
validating download (got %s instead of %s), please try manual install' %
 (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)    

This code creates the Installed Packages folder (if necessary), and then downloads the Package Control.sublime-package into it. The download will be done over HTTP instead of HTTPS due to Python standard library limitations, however the file will be validated using SHA-256.

Now right-click into sublime in the opened file and click on HTML/CSS/JS Prettify -> Prettify Code

3 Installation through composer

TO-DO: Check Composer implementation seems also possible and would be easier to maintain and does automatic updates, but was not used by me, because copying the files to the corresponding folders was sufficient for me.

 

 

 

Filter by label (Content by label)
showLabelsfalse
max5
spacesLAR
sortmodified
showSpacefalse
reversetrue
typepage
labelsCSS JS Bootstrap Header Footer

...

hiddentrue

...