How to use bootstrap configurator along with GWTbootstrap3 (i.e. what is bootstrap.min.cache, and how is it generated?) - css

you can use the bootstrap configurator (http://getbootstrap.com/customize/) to configure your own bootstrap version (e.g. set the variables like #grid-float-breakpoint to configure the navbar collapse point). I want to use this feature within my project which is based on gwt using https://github.com/gwtbootstrap3/gwtbootstrap3based.
I managed to create my download my configured bootstrap.zip using the method above.
The zip contains (as expected):
\bootstrap\js
\bootstrap\css
\bootstrap\fonts
just as GWTBootstrap3 project
gwtbootstrap3-0.9.3\org\gwtbootstrap3\client\resource\js
gwtbootstrap3-0.9.3\org\gwtbootstrap3\client\resource\css
gwtbootstrap3-0.9.3\org\gwtbootstrap3\client\resource\fonts
So I tried to replace the bootstrap files out of css with the genereated bootstrap files.
But then I recognized that in the GWTBootstrap3 project there are files named *.cache.min.
How / when are these files generated? This is explained already here: GWT Caching Concept
So obviously we want to replace the bootstrap files to remain "cache"d.
Can you please forward me a step-by-step description of how to use bootstrap configurator along with the current GWTBootstrap3 project , i.e. what files need to be replaced?
What I already tried (with no success):
0.) Create a bootstrap.zip with the online configurator and download it
1.) Rename gwtbootstrap3-0.9.3.jar to gwtbootstrap3-0.9.3.zip
2.) Extract
3.) Replace bootstrap-3.3.6.min.cache.css with bootstrap.min.css (from the configurator) and replacing meaning the bootstrap.min.css is renamed to bootstrap-3.3.6.min.cache.css
4.) Put all files from bootstrap.zip into the respective directory and renaming it accordingly as explained in 3.) to effectively replacing the original file
5.) zip and rename it again to gwtbootstrap3-0.9.3.jar
6.) replace the lib in my project
But after doing so I continuously get the compiler errors:
Package org.gwtbootstrap3.client.ui cannot be found.
Any help greatly appreciated
Best regards
Hannes

I can provide an answer which should work for most of the configuration changes. First of all I had to learn that renaming gwtbootstrap3-0.9.3.jar to gwtbootstrap3-0.9.3.zip then unzip, rezip and rename to jar does NOT WORK!!!
So here is a step by step tutorial of how to configure your bootstrap and use it with gwtbootstrap3.0.9.3 . I am not sure this will work for future editions but it should work for bootstrap3.
Configure and download your new bootstrap
https://github.com/gwtbootstrap3/gwtbootstrap3based.
Unzip your new bootstrap, this will provide the subdirectories css,
fonts and js. So you will have something like bootstrap/css etc.
Now copy your "old" gwtboostrap3.0.9.3 jar to the base directory, so
that the bootstrap.zip and the jar lie in the same directory.
From the commandline issue jar xf gwtbootstrap3.0.9.3.jar which will
create the 2 directories META-INF and org in your directory
Move into org\gwtbootstrap3\client\resource\css
Copy the FILENAME (not the file!!!). In my gwtbootstrap version the
file is called "bootstrap-3.3.6.min.cache.css".
Rename the file bootstrap/css/bootstrap.min.css to
bootstrap/css/bootstrap-3.3.6.min.cache.css and REPLACE
org\gwtbootstrap3\client\resource\css\bootstrap-3.3.6.min.cache.css
with bootstrap/css/bootstrap-3.3.6.min.cache.css
Rename the file bootstrap\css\boostrap-theme.min.css to
boostrap\css\bootstrap-theme-3.3.6.min.cache.css and REPLACE
org\gwtbootstrap3\client\resource\css\bootstrap-theme-3.3.6.min.cache.css
with bootstrap\css\bootstrap-theme-3.3.6.min.cache.css
I left out the fonts directory because my changes did not change
anything with the fonts
Rename bootstrap\js\bootstrap.min.js to
bootstrap\js\bootstrap-3.3.6.min.cache.js and REPLACE
org\gwtbootstrap3\client\resource\js\bootstrap-3.3.6.min.cache.js
with bootstrap\js\bootstrap-3.3.6.min.cache.js
In the basedirectory (where the bootstrap directory lies) issue from
the commandline: "jar xf gwtbootstrap3.0.9.3.jar META-INF org". This
should produce your new gwtbootstrap3.0.9.3.jar lib
In your project replace the old gwtbootstrap3.0.9.3.jar with the new
lib.
In case you get lots of java errors telling you it cannot find the classes you mixed up the paths. Please let me know if this worked out for your. Perhaps someone can provide a shellscript to automate the whole process.
One tip: Customizing your bootstrap gives you more control, e.g. for handling the point at which the navbar becomes uncollapsed (at the configuration page look for the key called "#grid-float-breakpoint"). Don't forget to enter a value suitable for you (mine was 800px). Don't forget to add px at the end!!

Related

How to include dependent projects XML-comment files during a publish?

When I use the "normal" "Publish-tool" built into Visual Studio for ASP.net, it seems like it does not include XML-comment-files that belongs to dependent projects/assemblies.
For instance, lets say we have two projects:
Presentation = The Web-application
Definitions = A project
containing definitions of models
The presentation-project has a dependency to the Definition-project.
The presentation-project has XML-comments enabled, and so does the Definition-project (for all configurations).
The presentation-project has a few comments added to the actions of its controller(s).
The definition-project has a few comments added to the properties of the model(s).
The expected result would be that when I publish the Presentation-project, we should end up with two XML- files in the bin folder:
Presentation.xml
Definitions.xml
The names might of course alter if any other name has been specified in the build-properties of each project.
The actual result is that only Presentation.xml is published to the bin-folder.
I have tried to link resulting Definitions.xml-file to the Presentation-project as setting it as "Content" and to always copy, that ended up in the file getting copied to the root-folder of the application during a publish and not the /bin-folder.
I have tried the same thing but linked it into the bin-folder of the Presentation-project, but that ened up with the result of the Definitions.xml-file ending up at /bin/bin/Definitions.xml.
I have tried linking and setting Always, but that did nothing.
Here is a simple sample that can be used to reconstruct the problem:
https://github.com/Inx51/publishdemo
However.. one thing to notice is that the Definitions.xml-file is indeed copied to the /bin-folder during build, but its not copied once using publish.
Anyone that has a workaround for this strange behaviour?
Edit your project XML file, .csproj/.vbproj, and include this in the first PropertyGroup:
<ExcludeXmlAssemblyFiles>false</ExcludeXmlAssemblyFiles>
This will include all the .xml of all dependent assemblies.

changing file names, how to?

I've created some forms following this approach:
iron g:template cars/create_car
and the following files were created:
create_car.css
create_car.html
create_car.js
Easy question - if I want to change the name of the files where else do I have to update to keep my changes in sync with the rest of the application?
Thank you!
Mark
You won't be out of sync by changing file's name.
The only things which would change is the file load order, according to the documentation:
HTML template files are always loaded before everything else.
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
On your case It's wouldn't probably cause any issue, feel free to test.

Flex : Create new folder in zip file

I am using Flex, Flash Builder 4.5 and Extension Builder 2.0.0 and I use the "nochump ziplib" library to generate a ZIP file. I want to create a new folder in created ZIP file, but I can't find such function function in the "nochump" library.
Can anyone please tell me if there is any function to add new folder in a ZIP file or a library which can help me do this?
The directories are not first-class citizens in the ZIP format.
The archive is built from "entries" - plain files with their relative locations to the "central directory" (the "root" of the archive). This means that the ZIP file is composed from entries like "pictures/1.jpg", "doc/old/1.txt" etc. You don't have separate entries for the "pictures", "doc" or "doc/old" directories.
You can't create a new directory directly. Instead of creating a new directory first (such as "newDir") you may want to create a file (entry) inside instead (such as "newDir/1.txt") and "newDir" will appear as directory when you open the resulting ZIP file.
If you insist on having an empty directory in the archive, you may try the hacky way - adding entries like "newDir/." with zero length. But this may not work with your library.
The Wikipedia article for the ZIP format has all the theory explained pretty well.

Build-time CSS combiner that respects relative url references?

Looking for a build-time CSS combiner/minifier that respects relative URL references.
That is, if one of the files I am combining is at
/path/to/style.css
and contains
background-image: url(images/my-image.png)
the resulting file should contain
background-image: url(/path/to/images/my-image.png).
Should work cross-platform Mac and PC, so either .NET via Mono or Node seem like obvious choices.
Check out WebAssets / Github
Asset management application for Python web development - use it to
merge and compress your JavaScript and CSS files.
It includes filters/ precompiles for cssmin, cssutils, yui_css, less, sass, clevercss, compass, scss, coffeescript, gzip, etc.
Specific to your question:
cssrewrite Source filter that rewrites relative urls in CSS files.
CSS allows you to specify urls relative to the location of the CSS
file. However, you may want to store your compressed assets in a
different place than source files, or merge source files from
different locations. This would then break these relative CSS
references, since the base URL changed.
This filter transparently rewrites CSS url() instructions in the
source files to make them relative to the location of the output path.
It works as a source filter, i.e. it is applied individually to each
source file before they are merged.
No configuration is necessary.
The filter also supports a manual mode:
get_filter('cssrewrite', replace={'old_directory', '/custom/path/'})
This will rewrite all urls that point to files within old_directory to use /custom/path as a prefix instead.
General Usage:
from webassets import Environment
my_env = Environment('../static/media', '/media')
""""As you can see, the environment requires two arguments,
the path in which your media files are located, as well as
the url prefix under which the media directory is available.
This prefix will be used when generating output urls. Next,
you need to define your assets, in the form of so called
bundles, and register them with the environment. The easiest
way to do it is directly in code:""""
from webassets import Bundle
js = Bundle('common/jquery.js', 'site/base.js', 'site/widgets.js', filters='jsmin', output='gen/packed.js')
my_env.register('js_all', js)
In this case you'll replace your js src with output.
Here is an alternate notation:
directory: ../static
url: /media
debug: True
updater: timestamp
bundles:
bundle-name:
filters: sass,cssutils
output: cache/default.css
contents:
- css/jquery.ui.calendar.css
- css/jquery.ui.slider.css
Also has special hooks for Django, Flask, Jinja2, Werkzeug..
Documentation is here. Hope this helps!
Here's a basic Python script that will combine all CSS files in a directory and replace references to your images folder:
import os
import fnmatch
output_text = ''
for filename in os.listdir('.'):
if fnmatch.fnmatch(filename, '*.css'):
output_text += open(filename, 'r').read()
output_text = output_text.replace('url(images', 'url(/path/to/images'))
f = open('combined.css', 'w')
f.write(output_text)
f.close()
This is off the top of my head and hasn't been tested, so it might contain errors.
In response to your comment:
Alternatively, you could use server-side CSS, like SASS/Compass or LESS.
With SASS/Compass you can dynamically change the path to assets (images) using the config.rb file, or from the command-line. You can toggle between relative and absolute paths easily in the same way. Your stylesheets are automatically compressed. To make sure that your files are combined, you can just create a master.scss file and #import each file. Most of my experience is with SASS but I believe LESS has similar features.
This is probably not ideal, however. It would be much simpler, portable, and more efficient to take care of this in a Python/Ruby script. It wouldn't take much effort to expand on the Python script above to make it compress the output file and match all relative paths. Then you can make it automatically run by having something like Foreman watching the build directory for changes.

Why can't Xcode 4 find my .h files during a build?

I have a project that won't build because the compiler (?) can't seem to find the .h files. I have tried using the full path, relative path and setting the Project Search Paths (both Header and User Header) and nothing seems to work. What I find very strange is even with the full path it gives an error: No such file or directory (the file does indeed exist in the specified path).
What could be the problem?
import statements:
#import <Foundation/Foundation.h>
#import <zxing/common/Counted.h>
#import <zxing/Result.h>
#import <zxing/BinaryBitmap.h>
#import <zxing/Reader.h>
#import <zxing/ResultPointCallback.h>
Headers are located in:
/Users/rolfmarsh/iPhoneCodeLibrary/BarcodeLibrary/zxing-1.6/cpp/core/src/zxing
Header search path is:
$(inherited)
"$(SRCROOT)/zxing/common"
and
/Users/rolfmarsh/iPhoneCodeLibrary/BarcodeLibrary/zxing-1.6/cpp/core/src
Full path of the include files:
/Users/rolfmarsh/iPhoneCodeLibrary/BarcodeLibrary/zxing-1.6/cpp/core/src/zxing/Result.h
I also had quite a bit of pain with ZXing's dependencies. Here's some tips that will hopefully be of assistance to others with similar issues.
This line does an import:
#import <zxing/common/Counted.h>
For the compiler to find Counted.h, the header search path must be specified.
Now, because the import statement will look for Counted.h relative to two subfolders zxing/common, we need to give it the parent folder of zxing.
In this case, the parent folder is going to be something like:
/ .. my full path here ../cpp/core/src/
So, under the src directory you'll find zxing.
How do we configure this in Xcode? Best to do it relatively. Otherwise, the project will fail on a different user's machine.
To do this, we specify a path relative to the project directory. As follows:
$(PROJECT_DIR)/../cpp/core/src
That goes in the Header Search Path of Build Settings for the ZXingWidget target.
The crucial thing with this header path stuff is to specify the relative directory to search from. In our case, we specify search relative to $(PROJECT_DIR). That variable specifies the directory of our subproject ZXingWidget.
Other caveats. Be careful to specify these in the build settings of your target. If you do it at project level you'll still need to specify it at target level using the $(inherited) variable.
Also, don't forget that the build transcript can be very useful. Look at the header paths included with the -I flag.
As a general debugging technique, I like to specify the absolute path in my settings. That gives a clean build and I know that the files can be included, and where they definitely are. Having done that I then use the $(PROJECT_DIR) to specify a relative path.
I am posting this in order to make things simple for newbies like me that are integrating zxing qr reader in their projects and to bring closure to a couple of threads related to zxing integration.
1.
Main thing - Be absolutely sure you have the latest version.
http://zxing.googlecode.com/svn/trunk/
[By now, January 18th, you will have no more issues with that zxing/common/ folder. Easiest fix for this: get the latest code!]
2.
Go to zxing -> iphone -> ZXingWidget.
Drag ZXingWidget.xcodeproj file and drop it onto the root of your Xcode project's "Groups and Files" sidebar.
[you should now have ZXingWidget.xcodeproj listed there and it has to drop down and list it's content]
3.
In the same place, project navigator, select:
Your project file - > Targets -> 'your project name' -> Build phases -> Link binary with libraries.
You should find a folder named 'Workspace'. Add 'libZXingWidget.a' from within.
4.
Still in Build phases, expand Target Dependencies and add ZXingWidget.
5.
Select Build Settings and search for Header Search Paths.
You need to add 2 records to Header Search Paths. You do not need to associate values to User Header Search Paths. You achieve this by double clicking the column on the right. A small popover window will apear. Use the + button to add the first record. Add:
../zxing/iphone/ZXingWidget/Classes
Now use the + button to add the second record. Add:
../zxing/cpp/core/src
These are the values I use. These values work because I use the same folder to host both my project and the zxing folder.
[Be sure to refer your folder properly in case you decide to have a different file structure.]
6.
Go back to Build Phases and add the following ios frameworks required:
AVFoundation
AudioToolbox
CoreVideo
CoreMedia
libiconv
AddressBook
AddressBookUI
7.
Create a set of files (.h&.m) and change it's .m extension to .mm
8.
Test the integration by including the following in the file previously created:
#import <ZXingWidgetController.h>
#import <QRCodeReader.h>
At this point you should run into missing files only if you are not running the latest version. Hope this helps.
Some things to check:
- file permissions
- can you build from the command line using xcodebuild?
I went over many blog posts on how to fix this. This one helped me well.
http://alwawee.com/wordpress/2011/12/01/zxingwidgetcontroller-h-not-found-zxing-installation-problem-solution/
The problem was that header search paths were not properly defined.
So I...
1) Downloaded zxing 2.1
2) From the download I copied: iphone, cpp, objc and readme and pasted in a folder names "zxing"
3) I added the new folder "zxing" to my project (on my mac) not to the xcode app.
4) From the created folder zxing I dragged the zxingwidget.xproje to my xcode project
5) I followed all the steps you find in all the blogs
KEY TO SOLVE THIS
6) I followed this steps for xcode errors https://stackoverflow.com/a/14703794/1881577
7) I followed this steps for header path file errors http://alwawee.com/wordpress/2011/12/01/zxingwidgetcontroller-h-not-found-zxing-installation-problem-solution/
IMPORTANT NOTE: I had to do follow step 7) twice, I had to select the project target and assign header paths, and I had to select the project project and assign header paths.
8) Build zxingwidget project (from the scheme select options)
9) Build Run the project.
Hope this helps other people as well.

Resources